/* ────────────────────────────────────────────────────────────────────────
 * PlayCourse Pro — Elementor widgets
 * Class prefix: .ppro-* (avoid collisions with .pcl-* in the free plugin)
 * ──────────────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────
 * P-35  Student of the Month  (.ppro-som*)
 * ──────────────────────────────────────────────────────────────────────── */

.ppro-som {
	position: relative;
	max-width: 360px;
	margin: 0 auto;
	padding: 36px 28px 32px;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.18);
	text-align: center;
	font-family: inherit;
	color: #0f172a;
	overflow: visible;
}

/* Crown badge floating above the avatar */
.ppro-som__crown {
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX(-50%) rotate(-6deg);
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #fde047, #f59e0b);
	border-radius: 50%;
	box-shadow: 0 10px 24px -8px rgba(245, 158, 11, 0.55);
	z-index: 2;
}
.ppro-som__crown i {
	font-size: 28px;
	color: #92400e;
	line-height: 1;
}

/* Avatar */
.ppro-som__avatar {
	position: relative;
	width: 96px;
	height: 96px;
	margin: 18px auto 14px;
	border-radius: 50%;
	border: 4px solid #facc15;
	overflow: hidden;
	background: #f1f5f9;
}
.ppro-som__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.ppro-som__period {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 6px;
}

.ppro-som__rank-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	margin-bottom: 14px;
	background: rgba(250, 204, 21, 0.15);
	color: #a16207;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
}
.ppro-som__rank-label i { font-size: 14px; }

.ppro-som__name {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	color: #0f172a;
	letter-spacing: -0.01em;
}

/* Stats row */
.ppro-som__stats {
	margin: 0 0 12px;
	padding: 14px 16px;
	background: #f8fafc;
	border-radius: 12px;
}

.ppro-som__stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.ppro-som__stat dt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #eef2ff;
	color: #7A3FF2;
	border-radius: 10px;
	margin: 0;
}
.ppro-som__stat dt i { font-size: 18px; line-height: 1; }

.ppro-som__stat dd {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}
.ppro-som__stat dd strong {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	font-variant-numeric: tabular-nums;
}
.ppro-som__stat dd span {
	font-size: 11.5px;
	color: #64748b;
	font-weight: 500;
}

/* Optional quote */
.ppro-som__quote {
	position: relative;
	margin: 14px 0 0;
	padding: 14px 16px 14px 36px;
	background: #faf5ff;
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #581c87;
	font-style: italic;
	text-align: left;
	border: 0;
}
.ppro-som__quote i {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: 18px;
	color: #a855f7;
	font-style: normal;
	line-height: 1;
}

/* Empty state — no winner */
.ppro-som--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 24px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 18px;
	text-align: center;
	color: #64748b;
}
.ppro-som--empty i { font-size: 36px; color: #94a3b8; }
.ppro-som--empty p { margin: 0; font-size: 14px; }

/* ────────────────────────────────────────────────────────────────────────
 * P-34  Waitlist Form  (.pcl-wl*)
 * Migrated from free plugin — kept the .pcl-* prefix to avoid breaking
 * any existing themes/customizations that target these classes.
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-wl {
	padding: 24px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 14px;
	font-family: inherit;
	color: #0f172a;
}

.pcl-wl__header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.pcl-wl__header > i {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 22px;
	color: #ea580c;
	background: rgba(234, 88, 12, 0.1);
	border-radius: 50%;
}

.pcl-wl__title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	color: #0f172a;
}

.pcl-wl__count {
	margin-top: 3px;
	font-size: 12.5px;
	color: #92400e;
}

/* Logged-in user identity panel */
.pcl-wl__as-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid #fed7aa;
	border-radius: 10px;
	margin-bottom: 12px;
}

.pcl-wl__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.pcl-wl__as-user-name {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}

.pcl-wl__as-user-email {
	font-size: 12.5px;
	color: #64748b;
}

/* Form fields */
.pcl-wl__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pcl-wl__field { display: flex; flex-direction: column; gap: 5px; }

.pcl-wl__label {
	font-size: 12.5px;
	font-weight: 600;
	color: #92400e;
}

.pcl-wl__input {
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: #0f172a;
	background: #ffffff;
	border: 1px solid #fed7aa;
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
	width: 100%;
}
.pcl-wl__input:focus {
	outline: none;
	border-color: #ea580c;
	box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}

.pcl-wl__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
	align-self: flex-start;
}
.pcl-wl__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pcl-wl__btn:active { transform: translateY(1px); }
.pcl-wl__btn i { font-size: 16px; }

.pcl-wl__btn--primary {
	background: #ea580c;
	color: #ffffff;
}
.pcl-wl__btn--primary:hover {
	background: #c2410c;
	color: #ffffff;
}

.pcl-wl__status {
	font-size: 12.5px;
	color: #64748b;
	min-height: 16px;
}
.pcl-wl__status--error { color: #b91c1c; }

/* Success state (after joining) and "already on list" notice */
.pcl-wl__success,
.pcl-wl__already {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	background: #F3EEFE;
	color: #5A20C8;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
}
.pcl-wl__success[hidden] { display: none; }

.pcl-wl__success > i,
.pcl-wl__already > i {
	font-size: 22px;
	color: #7A3FF2;
	line-height: 1;
	margin-top: 1px;
}

.pcl-wl__success-msg { font-weight: 600; }
.pcl-wl__success-pos {
	display: inline-block;
	margin-top: 4px;
	padding: 3px 10px;
	font-size: 12.5px;
	font-weight: 700;
	background: rgba(6, 95, 70, 0.12);
	color: #5A20C8;
	border-radius: 999px;
}
.pcl-wl__success-pos[hidden] { display: none; }

/* ────────────────────────────────────────────────────────────────────────
 * P-33  Certificate Verify  (.pcl-cv*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-cv {
	padding: 24px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	font-family: inherit;
	color: #0f172a;
}

.pcl-cv__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pcl-cv__label {
	font-size: 12.5px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pcl-cv__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pcl-cv__input {
	flex: 1 1 280px;
	min-width: 0;
	padding: 11px 14px;
	font: inherit;
	font-size: 14px;
	color: #0f172a;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pcl-cv__input:focus {
	outline: none;
	border-color: #7A3FF2;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.pcl-cv__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.pcl-cv__btn i { font-size: 16px; }
.pcl-cv__btn:active { transform: translateY(1px); }
.pcl-cv__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pcl-cv__btn--primary {
	background: #7A3FF2;
	color: #ffffff;
}
.pcl-cv__btn--primary:hover { background: #7A3FF2; }

/* Result card */
.pcl-cv__result {
	margin-top: 16px;
	padding: 18px 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #cbd5e1;
	border-radius: 10px;
	outline: none;
}
.pcl-cv__result:focus-visible {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
.pcl-cv__result[hidden] { display: none; }

.pcl-cv__result--valid {
	background: #F3EEFE;
	border-color: #a7f3d0;
	border-left-color: #7A3FF2;
}
.pcl-cv__result--revoked {
	background: #fef2f2;
	border-color: #fecaca;
	border-left-color: #dc2626;
}
.pcl-cv__result--invalid {
	background: #f8fafc;
	border-color: #e2e8f0;
	border-left-color: #94a3b8;
}

.pcl-cv__state {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #0f172a;
}
.pcl-cv__state i {
	font-size: 22px;
	line-height: 1;
}
.pcl-cv__result--valid   .pcl-cv__state i { color: #7A3FF2; }
.pcl-cv__result--revoked .pcl-cv__state i { color: #dc2626; }
.pcl-cv__result--invalid .pcl-cv__state i { color: #94a3b8; }
.pcl-cv__result--invalid .pcl-cv__state { color: #475569; font-weight: 600; }

.pcl-cv__result:has(.pcl-cv__grid) .pcl-cv__state { margin-bottom: 14px; }

.pcl-cv__grid {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 24px;
	row-gap: 8px;
	margin: 0;
}
.pcl-cv__grid dt {
	color: #64748b;
	font-weight: 500;
	font-size: 13px;
}
.pcl-cv__grid dd {
	margin: 0;
	color: #0f172a;
	font-weight: 600;
	font-size: 13.5px;
	word-break: break-word;
}

.pcl-cv__qr {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed #cbd5e1;
	display: flex;
	justify-content: center;
}
.pcl-cv__qr img {
	display: block;
	border-radius: 4px;
	background: #fff;
	padding: 6px;
}

@media (max-width: 480px) {
	.pcl-cv__btn--primary .pcl-cv__btn-label { display: none; }
	.pcl-cv__btn--primary { padding: 11px 14px; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-32  Video Popup (Promo)  (.pcl-vpop*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-vpop {
	--pcl-vpop-h: 380px;
	position: relative;
	font-family: inherit;
}

.pcl-vpop__card {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
}
.pcl-vpop__card:focus-visible {
	outline: 2px solid #7A3FF2;
	outline-offset: 4px;
	border-radius: 18px;
}

.pcl-vpop__thumb {
	position: relative;
	overflow: hidden;
	background: #0f172a;
	border-radius: 18px;
	height: var(--pcl-vpop-h);
	transition: transform .25s ease, box-shadow .25s ease;
}

.pcl-vpop__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.pcl-vpop__card:hover .pcl-vpop__thumb img { transform: scale(1.04); }
.pcl-vpop__card:hover .pcl-vpop__thumb {
	box-shadow: 0 22px 44px -14px rgba(15, 23, 42, 0.45);
}

.pcl-vpop__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.3);
	transition: background .2s ease;
	pointer-events: none;
}
.pcl-vpop__card:hover .pcl-vpop__thumb::after { background: rgba(15, 23, 42, 0.16); }

.pcl-vpop__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #5B1ED9, #7A3FF2);
}
.pcl-vpop__thumb--placeholder i {
	font-size: 84px;
	color: rgba(255, 255, 255, 0.55);
}

/* Play button — absolutely centered */
.pcl-vpop__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84px;
	height: 84px;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #ffffff;
	color: #7A3FF2;
	box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.5);
	z-index: 2;
	transition: transform .25s ease;
}
.pcl-vpop__play i {
	font-size: 38px;
	color: inherit;
	margin-left: 4px; /* optical centering for play triangle */
}
.pcl-vpop__card:hover .pcl-vpop__play {
	transform: translate(-50%, -50%) scale(1.1);
}

/* Pulse ring — emanates from behind the play button */
.pcl-vpop--pulse .pcl-vpop__play::before {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	z-index: -1;
	animation: pcl-vpop-pulse 1.8s ease-out infinite;
}

@keyframes pcl-vpop-pulse {
	0%   { transform: scale(0.9); opacity: 0.55; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* Title overlay — bottom (default) */
.pcl-vpop__overlay {
	position: absolute;
	left: 0;
	right: 0;
	padding: 28px 24px;
	color: #ffffff;
	z-index: 2;
	pointer-events: none;
}
.pcl-vpop--title-bottom .pcl-vpop__overlay {
	bottom: 0;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 10%, transparent 85%);
}
.pcl-vpop--title-top .pcl-vpop__overlay {
	top: 0;
	background: linear-gradient(to bottom, rgba(15, 23, 42, 0.85) 10%, transparent 85%);
}

.pcl-vpop__title {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
	.pcl-vpop__play { width: 64px; height: 64px; }
	.pcl-vpop__play i { font-size: 28px; }
	.pcl-vpop__title { font-size: 17px; }
	.pcl-vpop__overlay { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.pcl-vpop__thumb,
	.pcl-vpop__thumb img,
	.pcl-vpop__play { transition: none; }
	.pcl-vpop__card:hover .pcl-vpop__thumb img { transform: none; }
	.pcl-vpop__card:hover .pcl-vpop__play { transform: translate(-50%, -50%); }
	.pcl-vpop--pulse .pcl-vpop__play::before { animation: none; opacity: 0; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-31  Social Share  (.pcl-share*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-share {
	--pcl-share-color: #7A3FF2; /* set inline on each <li> per network */
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: inherit;
}

.pcl-share--vertical { flex-direction: column; align-items: stretch; }

.pcl-share__item { margin: 0; padding: 0; }

/* Visually-hidden live region for SR copy announcements */
.pcl-share__sr-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Base button */
.pcl-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #ffffff;
	background: var(--pcl-share-color);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
	line-height: 1;
}
.pcl-share__btn:hover {
	filter: brightness(0.92);
	color: #ffffff;
	box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.25);
}
.pcl-share__btn:active { transform: translateY(1px); }

.pcl-share__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.pcl-share__icon i { font-size: 16px; line-height: 1; }

.pcl-share__label {
	line-height: 1;
	white-space: nowrap;
}

/* Icon-only layout — circular buttons */
.pcl-share--icon .pcl-share__btn {
	padding: 0;
	width: 40px;
	height: 40px;
	justify-content: center;
	border-radius: 50%;
}

/* Vertical layout — full-width rows */
.pcl-share--vertical .pcl-share__item { width: 100%; }
.pcl-share--vertical .pcl-share__btn { width: 100%; justify-content: center; }

/* Outline variant — brand color on white bg, fills on hover */
.pcl-share--outline-btn .pcl-share__btn {
	background: #ffffff;
	color: var(--pcl-share-color);
	border: 1.5px solid var(--pcl-share-color);
}
.pcl-share--outline-btn .pcl-share__btn:hover {
	background: var(--pcl-share-color);
	color: #ffffff;
	filter: none;
}

/* Neutral variant — widget controls set bg + color */
.pcl-share--neutral-btn .pcl-share__btn {
	background: #f1f5f9;
	color: #0f172a;
}
.pcl-share--neutral-btn .pcl-share__btn:hover {
	background: #e2e8f0;
	color: #0f172a;
	filter: none;
}
.pcl-share--neutral-btn .pcl-share__icon i {
	color: var(--pcl-share-color);
}

/* Copied state */
.pcl-share__btn.is-copied {
	background: #7A3FF2 !important;
	color: #ffffff !important;
	border-color: #7A3FF2 !important;
}
.pcl-share__btn.is-copied .pcl-share__icon i {
	color: #ffffff !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * P-30  Course Timeline  (.pcl-ctl*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-ctl {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: #0f172a;
}

/* Central spine — runs through the dots */
.pcl-ctl::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	border-left: 2px solid #cbd5e1;
	z-index: 1;
}

/* Left/right-only layouts: shift spine to the gutter */
.pcl-ctl--left::before,
.pcl-ctl--right::before {
	left: 24px;
	transform: none;
}
.pcl-ctl--right::before {
	left: auto;
	right: 24px;
}

.pcl-ctl__item {
	position: relative;
	display: grid;
	margin: 0 0 32px;
	padding: 0;
}
.pcl-ctl__item:last-child { margin-bottom: 0; }

/* ── Alternating layout ───────────────────────────────────────────── */
.pcl-ctl--alternating .pcl-ctl__item {
	grid-template-columns: 1fr 48px 1fr;
	align-items: start;
	gap: 16px;
}

.pcl-ctl--alternating .pcl-ctl__dot {
	grid-column: 2;
	justify-self: center;
}

.pcl-ctl--alternating .pcl-ctl__item--side-right .pcl-ctl__card {
	grid-column: 3;
}
.pcl-ctl--alternating .pcl-ctl__item--side-left .pcl-ctl__card {
	grid-column: 1;
	text-align: right;
}

/* ── Left-aligned layout ──────────────────────────────────────────── */
.pcl-ctl--left .pcl-ctl__item {
	grid-template-columns: 48px 1fr;
	align-items: start;
	gap: 16px;
}
.pcl-ctl--left .pcl-ctl__dot { grid-column: 1; justify-self: center; }
.pcl-ctl--left .pcl-ctl__card { grid-column: 2; }

/* ── Right-aligned layout (mirror of left) ────────────────────────── */
.pcl-ctl--right .pcl-ctl__item {
	grid-template-columns: 1fr 48px;
	align-items: start;
	gap: 16px;
}
.pcl-ctl--right .pcl-ctl__dot { grid-column: 2; justify-self: center; }
.pcl-ctl--right .pcl-ctl__card { grid-column: 1; text-align: right; }

/* ── Dot ──────────────────────────────────────────────────────────── */
.pcl-ctl__dot {
	position: relative;
	z-index: 2;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #7A3FF2;
	color: #ffffff;
	border: 3px solid #ffffff;
	border-radius: 50%;
	/* Neutral shadow so it stays correct when users change the dot color */
	box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.22);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.pcl-ctl__dot i { font-size: 16px; line-height: 1; }

/* ── Card ─────────────────────────────────────────────────────────── */
.pcl-ctl__card {
	padding: 18px 20px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.pcl-ctl__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.15);
}

.pcl-ctl__label {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7A3FF2;
	margin-bottom: 6px;
}

.pcl-ctl__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #0f172a;
}

.pcl-ctl__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #475569;
}

/* Mobile — collapse alternating into left-aligned to avoid squeezed text */
@media (max-width: 720px) {
	.pcl-ctl--alternating::before { left: 24px; transform: none; }
	.pcl-ctl--alternating .pcl-ctl__item {
		grid-template-columns: 48px 1fr;
	}
	.pcl-ctl--alternating .pcl-ctl__dot,
	.pcl-ctl--alternating .pcl-ctl__item--side-left .pcl-ctl__card,
	.pcl-ctl--alternating .pcl-ctl__item--side-right .pcl-ctl__card {
		grid-column: auto;
		text-align: left;
	}
	.pcl-ctl--alternating .pcl-ctl__dot { grid-column: 1; }
	.pcl-ctl--alternating .pcl-ctl__card { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.pcl-ctl__card { transition: none; }
	.pcl-ctl__card:hover { transform: none; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-29  Discussion Thread  (.pcl-dt*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-dt {
	font-family: inherit;
	color: #0f172a;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* New-thread form */
.pcl-dt__form--new {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.pcl-dt__input,
.pcl-dt__textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: #0f172a;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pcl-dt__textarea { min-height: 80px; resize: vertical; }
.pcl-dt__input:focus,
.pcl-dt__textarea:focus {
	outline: none;
	border-color: #7A3FF2;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.pcl-dt__form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pcl-dt__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 14px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.pcl-dt__btn i { font-size: 15px; }
.pcl-dt__btn:active { transform: translateY(1px); }
.pcl-dt__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pcl-dt__btn--primary { background: #7A3FF2; color: #ffffff; }
.pcl-dt__btn--primary:hover { background: #7A3FF2; color: #ffffff; }
.pcl-dt__btn--ghost { background: transparent; color: #475569; border: 1px solid #e2e8f0; }
.pcl-dt__btn--ghost:hover { background: #f1f5f9; color: #0f172a; }

.pcl-dt__status { font-size: 12.5px; color: #64748b; }
.pcl-dt__status--error { color: #b91c1c; }

/* Locked notice */
.pcl-dt__locked {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 13.5px;
}
.pcl-dt__locked i { color: #94a3b8; font-size: 16px; }

/* Empty state */
.pcl-dt__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 24px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	text-align: center;
	color: #64748b;
}
.pcl-dt__empty i { font-size: 36px; color: #94a3b8; }
.pcl-dt__empty p { margin: 0; font-size: 14px; }

/* Threads list */
.pcl-dt__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pcl-dt__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Discussion card */
.pcl-dt__card {
	display: flex;
	gap: 12px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-left: 3px solid #7A3FF2;
	border-radius: 10px;
}

.pcl-dt__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: #f1f5f9;
}
.pcl-dt__avatar--sm { width: 32px; height: 32px; }
.pcl-dt__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.pcl-dt__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pcl-dt__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
}
.pcl-dt__name { font-weight: 700; color: #0f172a; }
.pcl-dt__when { color: #64748b; font-size: 12px; }

.pcl-dt__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.35;
}

.pcl-dt__content {
	font-size: 14px;
	line-height: 1.55;
	color: #334155;
}
.pcl-dt__content p { margin: 0 0 8px; }
.pcl-dt__content p:last-child { margin-bottom: 0; }

.pcl-dt__foot {
	display: flex;
	gap: 10px;
	margin-top: 2px;
}

.pcl-dt__reply-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	background: transparent;
	border: 0;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: #7A3FF2;
	border-radius: 6px;
	cursor: pointer;
}
.pcl-dt__reply-toggle:hover { background: #eef2ff; }
.pcl-dt__reply-toggle i { font-size: 14px; }
.pcl-dt__reply-count { color: #94a3b8; font-weight: 500; }

/* Replies — indented under the parent card */
.pcl-dt__replies {
	list-style: none;
	margin: 0 0 0 36px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
}

.pcl-dt__replies::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 6px;
	bottom: 6px;
	border-left: 2px solid #e2e8f0;
}

.pcl-dt__reply {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}

.pcl-dt__reply .pcl-dt__body { gap: 4px; }

/* Reply form — appears below thread card when toggled */
.pcl-dt__form--reply {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-left: 36px;
	padding: 12px 14px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}
.pcl-dt__form--reply[hidden] { display: none; }

@media (max-width: 640px) {
	.pcl-dt__replies { margin-left: 20px; }
	.pcl-dt__replies::before { left: -12px; }
	.pcl-dt__form--reply { margin-left: 20px; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-28  Assignment Submission Form  (.pcl-asform*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-asform {
	padding: 24px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	font-family: inherit;
	color: #0f172a;
}

.pcl-asform__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.pcl-asform__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #0f172a;
}

.pcl-asform__due {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	background: #e0e7ff;
	color: #5B1ED9;
}
.pcl-asform__due i { font-size: 14px; }

.pcl-asform__due--overdue {
	background: #fee2e2;
	color: #b91c1c;
}

.pcl-asform__instructions {
	padding: 14px 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	margin-bottom: 18px;
	font-size: 14px;
	line-height: 1.55;
	color: #334155;
}

.pcl-asform__instructions p { margin: 0 0 8px; }
.pcl-asform__instructions p:last-child { margin-bottom: 0; }

/* History (existing submissions) */
.pcl-asform__history {
	padding: 14px 16px;
	background: #f1f5f9;
	border-radius: 10px;
	margin-bottom: 18px;
}
.pcl-asform__history-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: #334155;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.pcl-asform__history-title i { font-size: 15px; color: #64748b; }

.pcl-asform__history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pcl-asform__history-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}
.pcl-asform__history-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #64748b;
}
.pcl-asform__history-n {
	font-weight: 700;
	color: #0f172a;
}
.pcl-asform__history-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #334155;
	white-space: pre-wrap;
}
.pcl-asform__history-link,
.pcl-asform__history-file {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #7A3FF2;
	text-decoration: none;
	word-break: break-all;
}
.pcl-asform__history-link:hover,
.pcl-asform__history-file:hover { text-decoration: underline; }
.pcl-asform__history-link i,
.pcl-asform__history-file i { font-size: 14px; }

/* Form fields */
.pcl-asform__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pcl-asform__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pcl-asform__label {
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

.pcl-asform__input,
.pcl-asform__textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: #0f172a;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}

.pcl-asform__textarea { min-height: 120px; resize: vertical; }

.pcl-asform__input:focus,
.pcl-asform__textarea:focus {
	outline: none;
	border-color: #7A3FF2;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* Upload zone */
.pcl-asform__drop {
	position: relative;
	display: block;
	padding: 22px;
	background: #f8fafc;
	border: 2px dashed #cbd5e1;
	border-radius: 10px;
	transition: background .15s ease, border-color .15s ease;
	cursor: pointer;
}
.pcl-asform__drop:hover,
.pcl-asform__drop.is-dragover {
	background: #eef2ff;
	border-color: #7A3FF2;
}

.pcl-asform__file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.pcl-asform__drop-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	color: #334155;
	pointer-events: none;
}
.pcl-asform__drop-inner i {
	font-size: 32px;
	color: #7A3FF2;
}
.pcl-asform__drop-text {
	display: flex;
	gap: 5px;
	font-size: 14px;
}
.pcl-asform__drop-text strong { color: #7A3FF2; font-weight: 700; }
.pcl-asform__drop-text span { color: #64748b; }
.pcl-asform__drop-hint {
	font-size: 12px;
	color: #94a3b8;
}

.pcl-asform__file-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	position: relative;
	z-index: 2;
}
.pcl-asform__file-chip i { font-size: 16px; color: #7A3FF2; }
.pcl-asform__file-chip-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13.5px;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pcl-asform__file-chip-remove {
	border: 0;
	background: #f1f5f9;
	color: #475569;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pcl-asform__file-chip-remove:hover { background: #e2e8f0; color: #0f172a; }

/* Actions */
.pcl-asform__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.pcl-asform__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, transform .1s ease;
}
.pcl-asform__btn i { font-size: 16px; }
.pcl-asform__btn:active { transform: translateY(1px); }
.pcl-asform__btn:disabled { opacity: 0.55; cursor: not-allowed; }

.pcl-asform__btn--primary {
	background: #7A3FF2;
	color: #ffffff;
}
.pcl-asform__btn--primary:hover {
	background: #7A3FF2;
	color: #ffffff;
}

.pcl-asform__status {
	font-size: 13px;
	color: #64748b;
}
.pcl-asform__status--error { color: #b91c1c; }

.pcl-asform__success {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 14px;
	background: #F3EEFE;
	color: #5A20C8;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
}
.pcl-asform__success i { font-size: 18px; }
.pcl-asform__success[hidden] { display: none; }

/* Locked state (logged-out) */
.pcl-asform--locked {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 24px;
	text-align: center;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
}
.pcl-asform--locked > i {
	font-size: 32px;
	color: #94a3b8;
}
.pcl-asform--locked p {
	margin: 0;
	color: #475569;
	font-size: 14.5px;
}

/* ────────────────────────────────────────────────────────────────────────
 * P-27  Learning Path  (.pcl-lpath*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-lpath {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pcl-lpath;
	font-family: inherit;
}

.pcl-lpath__step {
	position: relative;
	display: grid;
	gap: 14px;
}

/* Step number badge */
.pcl-lpath__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #eef2ff;
	color: #7A3FF2;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	z-index: 2;
}
.pcl-lpath__num i { font-size: 18px; line-height: 1; }

/* Step card */
.pcl-lpath__card {
	display: flex;
	gap: 14px;
	align-items: stretch;
	padding: 16px 18px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
}

.pcl-lpath__thumb {
	flex: 0 0 auto;
	width: 80px;
	min-height: 60px;
	background-size: cover;
	background-position: center;
	background-color: #f1f5f9;
	border-radius: 8px;
}

.pcl-lpath__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pcl-lpath__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: #0f172a;
}
.pcl-lpath__title a {
	color: inherit;
	text-decoration: none;
}
.pcl-lpath__title a:hover { color: #7A3FF2; }

.pcl-lpath__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
}

.pcl-lpath__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
}
.pcl-lpath__pill i { font-size: 13px; line-height: 1; }

.pcl-lpath__pill--done   { background: #F3EEFE; color: #5A20C8; }
.pcl-lpath__pill--active { background: #e0e7ff; color: #5B1ED9; }
.pcl-lpath__pill--todo   { background: #f1f5f9; color: #475569; }
.pcl-lpath__pill--locked { background: #f1f5f9; color: #64748b; }

.pcl-lpath__time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #64748b;
}
.pcl-lpath__time i { font-size: 14px; }

/* Per-step progress bar */
.pcl-lpath__bar {
	width: 100%;
	height: 5px;
	background: #eef2ff;
	border-radius: 999px;
	overflow: hidden;
	margin-top: 4px;
}
.pcl-lpath__bar-fill {
	height: 100%;
	background: #7A3FF2;
	border-radius: 999px;
	transition: width .4s ease;
	min-width: 2px;
}

/* ── Vertical timeline ─────────────────────────────────────────────── */
.pcl-lpath--vertical {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pcl-lpath--vertical .pcl-lpath__step {
	grid-template-columns: 40px 1fr;
	align-items: flex-start;
}

/* Connector line — uses border so color/width/style controls all work natively */
.pcl-lpath--vertical .pcl-lpath__step::before {
	content: "";
	position: absolute;
	left: 19px; /* centered on the 40px number */
	top: 40px;
	bottom: -18px;
	width: 0;
	border-left: 2px solid #cbd5e1;
	z-index: 1;
}
.pcl-lpath--vertical .pcl-lpath__step:last-child::before {
	display: none;
}

/* ── Horizontal steps ──────────────────────────────────────────────── */
.pcl-lpath--horizontal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: stretch;
}

.pcl-lpath--horizontal .pcl-lpath__step {
	flex: 1 1 220px;
	min-width: 0;
	grid-template-rows: 40px 1fr;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: start;
	justify-items: center;
}

.pcl-lpath--horizontal .pcl-lpath__num {
	justify-self: center;
}

.pcl-lpath--horizontal .pcl-lpath__card {
	width: 100%;
	flex-direction: column;
}

.pcl-lpath--horizontal .pcl-lpath__thumb {
	width: 100%;
	height: 120px;
}

/* Horizontal connector — runs along the center of the numbers */
.pcl-lpath--horizontal .pcl-lpath__step::before {
	content: "";
	position: absolute;
	top: 19px; /* centered on the 40px number */
	left: calc(50% + 20px); /* start past the number */
	right: calc(-50% + 20px); /* reach to the next number */
	height: 0;
	border-top: 2px solid #cbd5e1;
	z-index: 1;
}
.pcl-lpath--horizontal .pcl-lpath__step:last-child::before {
	display: none;
}

@media (max-width: 640px) {
	.pcl-lpath--horizontal { flex-direction: column; }
	.pcl-lpath--horizontal .pcl-lpath__step::before { display: none; }
}

/* ── State tweaks ──────────────────────────────────────────────────── */
.pcl-lpath__step--done .pcl-lpath__num {
	background: #7A3FF2;
	color: #ffffff;
}
.pcl-lpath__step--locked .pcl-lpath__card {
	opacity: 0.6;
}
.pcl-lpath__step--locked .pcl-lpath__num {
	background: #f1f5f9;
	color: #64748b;
}
.pcl-lpath__step--active .pcl-lpath__num {
	background: #7A3FF2;
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.pcl-lpath__bar-fill { transition: none; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-26  Enrollment Deadline Countdown  (.pcl-edl*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-edl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	background: #0f172a;
	border-radius: 12px;
	text-align: center;
	font-family: inherit;
	color: #f1f5f9;
}

.pcl-edl__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
}

.pcl-edl__timer {
	display: flex;
	flex-wrap: wrap;
	justify-content: inherit;
	gap: 12px;
}

.pcl-edl__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 72px;
	padding: 10px 8px;
	background: #1e293b;
	border-radius: 10px;
}

.pcl-edl__num {
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
	letter-spacing: -0.01em;
}

.pcl-edl__label-unit {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
}

/* Expired state */
.pcl-edl__expired-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #fecaca;
}
.pcl-edl__expired-text i { font-size: 18px; line-height: 1; }
.pcl-edl__expired-text[hidden] { display: none; }

.pcl-edl--expired .pcl-edl__timer { display: none; }

@media (max-width: 480px) {
	.pcl-edl__unit { min-width: 58px; }
	.pcl-edl__num  { font-size: 26px; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-25  Seats / Enrollment Counter  (.pcl-seats*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-seats {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 10px;
	font-family: inherit;
}

.pcl-seats__row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pcl-seats__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #d97706;
}

.pcl-seats__icon i {
	font-size: 18px;
	line-height: 1;
}

.pcl-seats__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: #854d0e;
	line-height: 1.4;
}

.pcl-seats__count {
	font-size: 13px;
	color: #0f172a;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
	white-space: nowrap;
}

.pcl-seats__count strong { color: inherit; }
.pcl-seats__count-sep { color: #94a3b8; margin: 0 1px; }

/* Progress bar */
.pcl-seats__bar {
	position: relative;
	width: 100%;
	height: 8px;
	background: #fef3c7;
	border-radius: 999px;
	overflow: hidden;
}

.pcl-seats__bar-fill {
	height: 100%;
	background: #f59e0b;
	border-radius: 999px;
	transition: width .4s ease;
	min-width: 2px;
}

/* Warn state — brighter, more urgent */
.pcl-seats--warn {
	background: #fef2f2;
	border-color: #fecaca;
}
.pcl-seats--warn .pcl-seats__label,
.pcl-seats--warn .pcl-seats__icon { color: #b91c1c; }
.pcl-seats--warn .pcl-seats__bar { background: #fee2e2; }
.pcl-seats--warn .pcl-seats__bar-fill { background: #dc2626; }

/* Full state — muted, no urgency */
.pcl-seats--full {
	background: #f8fafc;
	border-color: #e2e8f0;
}
.pcl-seats--full .pcl-seats__label,
.pcl-seats--full .pcl-seats__icon { color: #475569; }
.pcl-seats--full .pcl-seats__bar { background: #e2e8f0; }
.pcl-seats--full .pcl-seats__bar-fill { background: #64748b; }

/* Unlimited state — informational, no progress */
.pcl-seats--unlimited {
	background: #F3EEFE;
	border-color: #a7f3d0;
}
.pcl-seats--unlimited .pcl-seats__label { color: #5A20C8; }
.pcl-seats--unlimited .pcl-seats__icon { color: #7A3FF2; }

@media (prefers-reduced-motion: reduce) {
	.pcl-seats__bar-fill { transition: none; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-24  Money-Back Badge  (.pcl-mbb*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-mbb {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-family: inherit;
}

.pcl-mbb--card {
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

/* Shape — the circle/shield/card backdrop */
.pcl-mbb__shape {
	position: relative;
	color: #7A3FF2; /* also used as currentColor for SVG fill */
	/* Neutral drop-shadow follows the SVG shield path (box-shadow can't —
	 * it'd render as a rectangle). Color-neutral so it stays correct when
	 * the user changes the shape's fill color. */
	filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.22));
}

/* Inner stack holds the content (days number, icon, card text) */
.pcl-mbb__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: #fff;
	text-align: center;
	padding: 0 12%;
}

/* Size scale — applies to all layouts */
.pcl-mbb--size-sm .pcl-mbb__shape { width: 96px;  height: 96px; }
.pcl-mbb--size-md .pcl-mbb__shape { width: 128px; height: 128px; }
.pcl-mbb--size-lg .pcl-mbb__shape { width: 168px; height: 168px; }

.pcl-mbb--size-sm .pcl-mbb__days-num { font-size: 20px; }
.pcl-mbb--size-md .pcl-mbb__days-num { font-size: 28px; }
.pcl-mbb--size-lg .pcl-mbb__days-num { font-size: 36px; }

.pcl-mbb--size-sm .pcl-mbb__icon i { font-size: 20px; }
.pcl-mbb--size-md .pcl-mbb__icon i { font-size: 28px; }
.pcl-mbb--size-lg .pcl-mbb__icon i { font-size: 36px; }

/* Shield layout — inline SVG scales to the shape */
.pcl-mbb--shield .pcl-mbb__shape { width: 120px; height: 140px; }
.pcl-mbb--shield.pcl-mbb--size-sm .pcl-mbb__shape { width: 96px;  height: 112px; }
.pcl-mbb--shield.pcl-mbb--size-md .pcl-mbb__shape { width: 128px; height: 150px; }
.pcl-mbb--shield.pcl-mbb--size-lg .pcl-mbb__shape { width: 168px; height: 196px; }

.pcl-mbb__shield {
	width: 100%;
	height: 100%;
	display: block;
}

/* Circle layout */
.pcl-mbb--circle .pcl-mbb__shape {
	background: #7A3FF2;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, 0.25);
	box-sizing: border-box;
}

/* Card layout — horizontal shield-less panel with left "badge" + right text */
.pcl-mbb--card .pcl-mbb__shape {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	min-width: 120px;
	max-width: 40%;
	background: #7A3FF2;
	border-radius: 14px 0 0 14px;
	filter: none;
	padding: 18px 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pcl-mbb--card .pcl-mbb__inner {
	position: static;
	inset: auto;
	padding: 0;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.pcl-mbb--card .pcl-mbb__card-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-left: 0;
	border-radius: 0 14px 14px 0;
	text-align: left;
	align-items: flex-start;
}
.pcl-mbb--card .pcl-mbb__headline {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}
.pcl-mbb--card .pcl-mbb__subtitle {
	font-size: 13px;
	color: #64748b;
	line-height: 1.4;
}

/* Days number + word */
.pcl-mbb__days {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}
.pcl-mbb__days-num {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: inherit;
}
.pcl-mbb__days-word {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.9;
}

.pcl-mbb__icon {
	display: inline-flex;
	line-height: 1;
}
.pcl-mbb__icon i {
	font-size: 24px;
	line-height: 1;
	color: inherit;
}

/* Caption beneath shield/circle */
.pcl-mbb__caption {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: center;
	max-width: 260px;
}
.pcl-mbb__headline {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.35;
}
.pcl-mbb__subtitle {
	font-size: 13px;
	color: #64748b;
	line-height: 1.45;
}

/* Card layout collapses stacked on narrow screens */
@media (max-width: 520px) {
	.pcl-mbb--card {
		flex-direction: column;
	}
	.pcl-mbb--card .pcl-mbb__shape {
		max-width: 100%;
		width: 100%;
		border-radius: 14px 14px 0 0;
	}
	.pcl-mbb--card .pcl-mbb__card-text {
		border-radius: 0 0 14px 14px;
		border-left: 1px solid #e2e8f0;
		border-top: 0;
	}
}

/* ────────────────────────────────────────────────────────────────────────
 * P-23  Trust Badges  (.pcl-trust*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-trust {
	--pcl-trust-cols: 4;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: inherit;
	gap: 24px;
}

.pcl-trust--horizontal {
	display: grid;
	grid-template-columns: repeat(var(--pcl-trust-cols), minmax(0, 1fr));
}

.pcl-trust--vertical {
	display: flex;
	flex-direction: column;
}

/* Mobile — collapse to 2 columns for horizontal */
@media (max-width: 640px) {
	.pcl-trust--horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Alignment (controls how the item lays out its icon + text inside its cell) */
.pcl-trust--align-left   .pcl-trust__item { justify-content: flex-start; text-align: left; }
.pcl-trust--align-center .pcl-trust__item { justify-content: center;     text-align: center; }
.pcl-trust--align-right  .pcl-trust__item { justify-content: flex-end;   text-align: right; }

/* Vertical lists default to a left-icon layout regardless of align so the
 * icon stays next to the text in a readable list shape. */
.pcl-trust--vertical .pcl-trust__item {
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.pcl-trust__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* Horizontal items: stack icon above text when centered, side-by-side when left/right */
.pcl-trust--horizontal.pcl-trust--align-center .pcl-trust__item {
	flex-direction: column;
	gap: 10px;
}

.pcl-trust__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #eef2ff;
	color: #7A3FF2;
}

.pcl-trust__icon i {
	font-size: 22px;
	line-height: 1;
}

.pcl-trust__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pcl-trust__label {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.35;
}

.pcl-trust__sublabel {
	font-size: 12.5px;
	color: #64748b;
	line-height: 1.4;
}

/* ────────────────────────────────────────────────────────────────────────
 * P-22  Course Hotspot  (.pcl-hspot*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-hspot {
	--pcl-hspot-radius: 16px;
	position: relative;
	font-family: inherit;
}

.pcl-hspot__figure {
	position: relative;
	margin: 0;
	padding: 0;
	border-radius: var(--pcl-hspot-radius);
	overflow: visible;
	display: block;
}

.pcl-hspot__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pcl-hspot-radius);
}

/* Hotspot point — absolutely positioned at X%/Y% of the image */
.pcl-hspot__point {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.pcl-hspot__point.is-open { z-index: 4; }

/* Dot button */
.pcl-hspot__dot {
	position: relative;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background: #7A3FF2;
	cursor: pointer;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.3);
	transition: transform .2s ease, box-shadow .2s ease;
}

.pcl-hspot__dot:hover {
	transform: scale(1.12);
	box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.5);
}

.pcl-hspot__dot:focus-visible {
	transform: scale(1.12);
	outline: 2px solid #7A3FF2;
	outline-offset: 3px;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.pcl-hspot__dot-inner {
	display: none; /* reserved for future dual-ring variant */
}

/* Pulse ring — absolutely centered on the dot, expands and fades */
.pcl-hspot--pulse .pcl-hspot__dot::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: #7A3FF2;
	opacity: 0.35;
	z-index: -1;
	animation: pcl-hspot-pulse 2s ease-out infinite;
}

@keyframes pcl-hspot-pulse {
	0%   { transform: scale(0.8); opacity: 0.5; }
	70%  { transform: scale(1.8); opacity: 0; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* Tooltip */
.pcl-hspot__tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 14px);
	transform: translateX(-50%);
	width: 240px;
	max-width: 85vw;
	padding: 14px 14px 12px;
	background: #0f172a;
	color: #f8fafc;
	border-radius: 10px;
	box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.5);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
	z-index: 3;
}

/* Small arrow pointing down at the dot */
.pcl-hspot__tip::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: #0f172a;
}

.pcl-hspot__tip-title {
	font-size: 13.5px;
	font-weight: 700;
	color: #f8fafc;
	margin-bottom: 4px;
	line-height: 1.35;
}

.pcl-hspot__tip-body {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(248, 250, 252, 0.88);
}

.pcl-hspot__tip-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(248, 250, 252, 0.12);
	font-size: 12.5px;
	font-weight: 600;
	color: #c7d2fe;
	text-decoration: none;
	transition: color .15s ease;
}
.pcl-hspot__tip-link:hover { color: #ffffff; }
.pcl-hspot__tip-link i { font-size: 14px; transition: transform .15s ease; }
.pcl-hspot__tip-link:hover i { transform: translateX(2px); }

/* Reveal modes */
.pcl-hspot--trigger-hover .pcl-hspot__point:hover .pcl-hspot__tip,
.pcl-hspot--trigger-hover .pcl-hspot__point:focus-within .pcl-hspot__tip,
.pcl-hspot__point.is-open .pcl-hspot__tip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(-2px);
}

/* Auto-flip tooltip below dot when near top edge (y < 20%) */
.pcl-hspot__point--edge-top .pcl-hspot__tip {
	bottom: auto;
	top: calc(100% + 14px);
}
.pcl-hspot__point--edge-top .pcl-hspot__tip::before {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: #0f172a;
}

/* Anchor tooltip to left edge when dot is near left side (x < 15%) */
.pcl-hspot__point--edge-left .pcl-hspot__tip {
	left: -6px;
	transform: translateX(0);
}
.pcl-hspot__point--edge-left .pcl-hspot__tip::before {
	left: 22px;
	transform: translateX(0);
}

/* Anchor tooltip to right edge when dot is near right side (x > 85%) */
.pcl-hspot__point--edge-right .pcl-hspot__tip {
	left: auto;
	right: -6px;
	transform: translateX(0);
}
.pcl-hspot__point--edge-right .pcl-hspot__tip::before {
	left: auto;
	right: 22px;
	transform: translateX(0);
}

/* Reveal-state transforms must be overridden for edge-anchored tips too */
.pcl-hspot--trigger-hover .pcl-hspot__point--edge-left:hover .pcl-hspot__tip,
.pcl-hspot--trigger-hover .pcl-hspot__point--edge-left:focus-within .pcl-hspot__tip,
.pcl-hspot__point--edge-left.is-open .pcl-hspot__tip {
	transform: translateX(0) translateY(-2px);
}
.pcl-hspot--trigger-hover .pcl-hspot__point--edge-right:hover .pcl-hspot__tip,
.pcl-hspot--trigger-hover .pcl-hspot__point--edge-right:focus-within .pcl-hspot__tip,
.pcl-hspot__point--edge-right.is-open .pcl-hspot__tip {
	transform: translateX(0) translateY(-2px);
}

/* Mobile — tooltips collapse to a narrower width to stay on-screen */
@media (max-width: 640px) {
	.pcl-hspot__tip { width: 210px; }
}

/* Empty / no-image placeholder */
.pcl-hspot--empty {
	padding: 48px 24px;
	text-align: center;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	color: #64748b;
}
.pcl-hspot--empty p { margin: 0; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.pcl-hspot__dot { transition: none; }
	.pcl-hspot__tip { transition: none; }
	.pcl-hspot--pulse .pcl-hspot__dot::before { animation: none; opacity: 0.25; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-21  Flip Card  (.pcl-flip*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-flip {
	--pcl-flip-h: 360px;
	position: relative;
	width: 100%;
	height: var(--pcl-flip-h);
	perspective: 1600px;
	font-family: inherit;
	outline: none;
}


.pcl-flip__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform .65s cubic-bezier(.4, .2, .2, 1);
	transform-style: preserve-3d;
}

/* Hover flip only on devices that actually have hover (not touch — prevents
 * the classic "stuck hover" bug on mobile where the card never flips back). */
@media (hover: hover) {
	.pcl-flip:hover .pcl-flip__inner { transform: rotateY(180deg); }
	.pcl-flip--vertical:hover .pcl-flip__inner { transform: rotateX(180deg); }
}

/* Keyboard focus + touch tap (via JS toggled class) */
.pcl-flip:focus-within .pcl-flip__inner,
.pcl-flip.is-flipped .pcl-flip__inner {
	transform: rotateY(180deg);
}
.pcl-flip--vertical:focus-within .pcl-flip__inner,
.pcl-flip--vertical.is-flipped .pcl-flip__inner {
	transform: rotateX(180deg);
}

.pcl-flip__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.pcl-flip__face--front {
	background: #fff;
	border: 1px solid #e2e8f0;
	color: #0f172a;
	box-shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.18);
}

.pcl-flip__face--back {
	background: linear-gradient(135deg, #7A3FF2 0%, #5B1ED9 100%);
	color: #fff;
	transform: rotateY(180deg);
	padding: 24px 22px;
	justify-content: space-between;
	box-shadow: 0 18px 38px -14px rgba(67, 56, 202, 0.4);
}

.pcl-flip--vertical .pcl-flip__face--back { transform: rotateX(180deg); }

/* Front face elements */
.pcl-flip__thumb {
	position: relative;
	height: 55%;
	background-size: cover;
	background-position: center;
	background-color: #f1f5f9;
	border-radius: 16px 16px 0 0;
}

.pcl-flip__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.pcl-flip__thumb--placeholder i {
	font-size: 48px;
	color: rgba(99, 102, 241, 0.6);
}

.pcl-flip__front-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}

.pcl-flip__cat {
	display: inline-flex;
	align-self: flex-start;
	padding: 3px 9px;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #7A3FF2;
	background: rgba(99, 102, 241, 0.1);
	border-radius: 999px;
}

.pcl-flip__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: inherit;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pcl-flip__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	font-size: 13px;
}

.pcl-flip__stars {
	display: inline-flex;
	gap: 1px;
}
.pcl-flip__stars i {
	font-size: 14px;
	color: #facc15;
	line-height: 1;
}
.pcl-flip__stars i.ri-star-line { color: #cbd5e1; }

.pcl-flip__rating-num { font-weight: 700; color: #0f172a; }
.pcl-flip__rating-count { color: #64748b; font-size: 12.5px; }

.pcl-flip__hint {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	color: #7A3FF2;
	font-size: 16px;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.18);
	z-index: 2;
	opacity: 0.85;
}

/* Back face elements */
.pcl-flip__back-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}

.pcl-flip__back-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pcl-flip__back-title a {
	color: inherit;
	text-decoration: none;
}
.pcl-flip__back-title a:hover { text-decoration: underline; }

.pcl-flip__instructor {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
}
.pcl-flip__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.35);
}

.pcl-flip__excerpt {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pcl-flip__back-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	margin-top: 10px;
}

.pcl-flip__price {
	font-weight: 700;
	color: #fff;
}
.pcl-flip__price .pcl-el-price,
.pcl-flip__price .pcl-el-price__sale,
.pcl-flip__price .pcl-el-price__amount {
	color: #fff;
}
.pcl-flip__price .pcl-el-price__old {
	color: rgba(255, 255, 255, 0.7);
}

/* Override enroll button to suit the dark back face by default; widget Style
 * tab can re-override on a per-instance basis. */
.pcl-flip__enroll .pcl-enroll-btn {
	background: #fff;
	color: #7A3FF2;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.25);
	transition: background .15s ease, transform .1s ease;
}
.pcl-flip__enroll .pcl-enroll-btn:hover {
	background: #f1f5f9;
}
.pcl-flip__enroll .pcl-enroll-btn:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.pcl-flip__inner { transition: none; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-20  Video Testimonials  (.pcl-vtest*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-vtest {
	--pcl-vtest-cols: 3;
	--pcl-vtest-thumb-h: 260px;
	--pcl-vtest-gap: 20px;
	position: relative;
	font-family: inherit;
}

/* Grid layout */
.pcl-vtest__grid {
	display: grid;
	grid-template-columns: repeat(var(--pcl-vtest-cols), minmax(0, 1fr));
	gap: var(--pcl-vtest-gap);
}

@media (max-width: 960px) {
	.pcl-vtest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.pcl-vtest__grid { grid-template-columns: 1fr; }
}

/* Slider layout */
.pcl-vtest--slider .swiper { overflow: hidden; padding-bottom: 40px; }
.pcl-vtest--slider .swiper-slide { height: auto; }

/* Card (also the clickable button) */
.pcl-vtest__card {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
}

.pcl-vtest__card:focus-visible {
	outline: 2px solid #7A3FF2;
	outline-offset: 4px;
	border-radius: 16px;
}

/* Thumbnail */
.pcl-vtest__thumb {
	position: relative;
	overflow: hidden;
	background: #0f172a;
	border-radius: 16px;
	height: var(--pcl-vtest-thumb-h);
	transition: transform .25s ease, box-shadow .25s ease;
}

.pcl-vtest__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}

.pcl-vtest__card:hover .pcl-vtest__thumb img { transform: scale(1.05); }

.pcl-vtest__card:hover .pcl-vtest__thumb {
	box-shadow: 0 18px 36px -12px rgba(15, 23, 42, .4);
}

.pcl-vtest__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.24);
	transition: background .2s ease;
	pointer-events: none;
}

.pcl-vtest__card:hover .pcl-vtest__thumb::after {
	background: rgba(15, 23, 42, 0.12);
}

.pcl-vtest__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #5B1ED9, #7A3FF2);
}

.pcl-vtest__thumb--placeholder i {
	font-size: 72px;
	color: rgba(255, 255, 255, 0.6);
}

/* Play button — absolutely centered */
.pcl-vtest__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	transform: translate(-50%, -50%) scale(1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.45);
	z-index: 2;
	transition: transform .25s ease, background .15s ease;
}

.pcl-vtest__play i {
	font-size: 30px;
	color: #7A3FF2;
	margin-left: 3px; /* optical centering for play triangle */
}

.pcl-vtest__card:hover .pcl-vtest__play {
	transform: translate(-50%, -50%) scale(1.15);
}

/* Name overlay on thumbnail */
.pcl-vtest__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 18px 16px;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 10%, transparent 80%);
	color: #fff;
	z-index: 2;
	pointer-events: none;
}

.pcl-vtest__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.pcl-vtest__role {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.8);
	margin-top: 2px;
}

.pcl-vtest__course {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	font-size: 12px;
	color: #c7d2fe;
	background: rgba(99, 102, 241, 0.22);
	padding: 3px 9px;
	border-radius: 999px;
}
.pcl-vtest__course i { font-size: 13px; }

/* Slider arrows */
.pcl-vtest__arrow {
	position: absolute;
	top: calc(var(--pcl-vtest-thumb-h) / 2);
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	background: #fff;
	color: #0f172a;
	cursor: pointer;
	box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .25);
	transition: background .15s ease, transform .1s ease;
}
.pcl-vtest__arrow:hover { background: #f8fafc; }
.pcl-vtest__arrow:active { transform: translateY(-50%) scale(0.95); }
.pcl-vtest__arrow i { font-size: 20px; }
.pcl-vtest__arrow--prev { left: -6px; }
.pcl-vtest__arrow--next { right: -6px; }
.pcl-vtest__arrow.swiper-button-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Slider dots */
.pcl-vtest__dots {
	text-align: center;
	bottom: 8px !important;
}
.pcl-vtest__dots .swiper-pagination-bullet {
	width: 8px; height: 8px;
	background: #cbd5e1;
	opacity: 1;
	transition: background .15s ease, transform .15s ease;
}
.pcl-vtest__dots .swiper-pagination-bullet-active {
	background: #7A3FF2;
	transform: scale(1.25);
}

/* Empty state */
.pcl-vtest--empty {
	padding: 48px 24px;
	text-align: center;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	color: #64748b;
}
.pcl-vtest--empty p { margin: 0; font-size: 14px; }

/* ── Lightbox Modal ─────────────────────────────────────────────────── */

.pcl-vtest-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.pcl-vtest-modal.is-open { display: flex; }

.pcl-vtest-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.82);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: pclVtestFadeIn .25s ease;
}

.pcl-vtest-modal__panel {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
	animation: pclVtestScaleIn .25s ease;
}

@media (max-width: 640px) {
	.pcl-vtest-modal__panel { border-radius: 8px; }
}

.pcl-vtest-modal__media {
	width: 100%;
	height: 100%;
}

.pcl-vtest-modal__media iframe,
.pcl-vtest-modal__media video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #000;
}

.pcl-vtest-modal__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	font-size: 26px;
	transition: background .15s ease, transform .1s ease;
}
.pcl-vtest-modal__close:hover { background: rgba(255, 255, 255, 0.12); }
.pcl-vtest-modal__close:active { transform: scale(0.9); }

@media (max-width: 640px) {
	.pcl-vtest-modal__close {
		top: -44px;
		right: -4px;
	}
}

.pcl-vtest-lock,
.pcl-vtest-lock body {
	overflow: hidden;
}

@keyframes pclVtestFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes pclVtestScaleIn {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.pcl-vtest-modal__overlay,
	.pcl-vtest-modal__panel { animation: none; }
	.pcl-vtest__thumb img,
	.pcl-vtest__play,
	.pcl-vtest__thumb { transition: none; }
	.pcl-vtest__card:hover .pcl-vtest__thumb img,
	.pcl-vtest__card:hover .pcl-vtest__play { transform: translate(-50%, -50%) scale(1); }
	.pcl-vtest__card:hover .pcl-vtest__thumb img { transform: none; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-19  Testimonial Carousel  (.pcl-tscar*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-tscar {
	position: relative;
	font-family: inherit;
	padding: 0 8px;
}

.pcl-tscar .swiper { overflow: hidden; padding: 8px 0 44px; }

.pcl-tscar__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 28px 26px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}

.pcl-tscar .swiper-slide { height: auto; }

.pcl-tscar__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px -12px rgba(15, 23, 42, .16);
}

/* Decorative quote mark (layout: quote) */
.pcl-tscar__mark {
	position: absolute;
	top: 14px;
	right: 18px;
	font-size: 60px;
	line-height: 1;
	color: #e0e7ff;
	pointer-events: none;
}

.pcl-tscar__mark i { line-height: 1; display: inline-block; }

/* Stars */
.pcl-tscar__stars {
	display: inline-flex;
	gap: 2px;
}
.pcl-tscar__stars i {
	font-size: 16px;
	color: #facc15;
	line-height: 1;
}
.pcl-tscar__stars i.ri-star-line { color: #cbd5e1; }

/* Quote */
.pcl-tscar__quote {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #0f172a;
	font-style: normal;
	border: 0;
	quotes: none;
}
.pcl-tscar__quote::before,
.pcl-tscar__quote::after { content: none; }

/* Who / author block */
.pcl-tscar__who {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
}

.pcl-tscar__avatar {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: #f1f5f9;
}
.pcl-tscar__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.pcl-tscar__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.pcl-tscar__name {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}
.pcl-tscar__role {
	font-size: 12.5px;
	color: #64748b;
}
.pcl-tscar__course {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: #7A3FF2;
	margin-top: 2px;
}
.pcl-tscar__course i { font-size: 13px; }

/* Layout variants */
.pcl-tscar--minimal .pcl-tscar__card {
	border: 0;
	background: transparent;
	box-shadow: none;
	padding: 16px 4px;
}
.pcl-tscar--minimal .pcl-tscar__card:hover { transform: none; box-shadow: none; }
.pcl-tscar--minimal .pcl-tscar__mark { display: none; }

.pcl-tscar--feature .pcl-tscar__card {
	padding: 36px 34px;
	border-radius: 20px;
}
.pcl-tscar--feature .pcl-tscar__quote {
	font-size: 18px;
	line-height: 1.6;
	font-weight: 500;
}
.pcl-tscar--feature .pcl-tscar__avatar {
	width: 64px;
	height: 64px;
}
.pcl-tscar--feature .pcl-tscar__name { font-size: 15px; }

/* Arrows */
.pcl-tscar__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	background: #fff;
	color: #0f172a;
	cursor: pointer;
	box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .18);
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
.pcl-tscar__arrow:hover { background: #f8fafc; }
.pcl-tscar__arrow:active { transform: translateY(-50%) scale(0.95); }
.pcl-tscar__arrow i { font-size: 20px; }
.pcl-tscar__arrow--prev { left: -6px; }
.pcl-tscar__arrow--next { right: -6px; }
.pcl-tscar__arrow.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

@media (max-width: 640px) {
	.pcl-tscar__arrow { width: 34px; height: 34px; }
	.pcl-tscar__arrow i { font-size: 17px; }
}

/* Dots */
.pcl-tscar__dots {
	text-align: center;
	bottom: 8px !important;
}
.pcl-tscar__dots .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #cbd5e1;
	opacity: 1;
	transition: background .15s ease, transform .15s ease;
}
.pcl-tscar__dots .swiper-pagination-bullet-active {
	background: #7A3FF2;
	transform: scale(1.25);
}

/* Empty state */
.pcl-tscar--empty {
	padding: 48px 24px;
	text-align: center;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	color: #64748b;
}
.pcl-tscar--empty p { margin: 0; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.pcl-tscar__card { transition: none; }
	.pcl-tscar__card:hover { transform: none; }
}

/* ────────────────────────────────────────────────────────────────────────
 * P-18  Animated Stats Counter  (.pcl-scounter*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-scounter {
	--pcl-scounter-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--pcl-scounter-cols), minmax(0, 1fr));
	gap: 24px;
	font-family: inherit;
}

.pcl-scounter__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 16px;
}

/* Alignment */
.pcl-scounter--align-left   .pcl-scounter__item { align-items: flex-start; text-align: left; }
.pcl-scounter--align-center .pcl-scounter__item { align-items: center;     text-align: center; }
.pcl-scounter--align-right  .pcl-scounter__item { align-items: flex-end;   text-align: right; }

/* Vertical dividers between items (disabled on mobile for clarity) */
.pcl-scounter--divider .pcl-scounter__item + .pcl-scounter__item {
	border-left: 1px solid #e2e8f0;
}
@media (max-width: 640px) {
	.pcl-scounter--divider .pcl-scounter__item + .pcl-scounter__item {
		border-left: 0;
	}
}

.pcl-scounter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #eef2ff;
	color: #7A3FF2;
}

.pcl-scounter__icon i {
	font-size: 24px;
	line-height: 1;
}

.pcl-scounter__number {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	color: #0f172a;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

.pcl-scounter__prefix,
.pcl-scounter__suffix {
	font-size: 0.6em;
	font-weight: 700;
	color: #7A3FF2;
}

.pcl-scounter__value {
	display: inline-block;
}

.pcl-scounter__label {
	font-size: 14px;
	font-weight: 500;
	color: #64748b;
	letter-spacing: 0.01em;
}

/* Respect users' motion preference: skip any entrance/hover kinetics */
@media (prefers-reduced-motion: reduce) {
	.pcl-scounter__item { transition: none; }
}

/* ============================================================
   P-16: Dashboard Summary
   ============================================================ */

.pcl-dsum {
	gap: 14px;
}

.pcl-dsum--horizontal {
	display: flex;
	flex-wrap: wrap;
}

.pcl-dsum--grid {
	display: grid;
	grid-template-columns: repeat( var(--pcl-dsum-cols, 4), minmax(0, 1fr) );
}

@media (max-width: 900px) {
	.pcl-dsum--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.pcl-dsum--grid { grid-template-columns: 1fr; }
}

.pcl-dsum__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	flex: 1 1 180px;
	min-width: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pcl-dsum--grid .pcl-dsum__card { flex: none; }

.pcl-dsum__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.15);
}

.pcl-dsum__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
}

.pcl-dsum__icon i {
	font-size: 20px;
	line-height: 1;
}

.pcl-dsum__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pcl-dsum__value {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	color: #0f172a;
	font-variant-numeric: tabular-nums;
}

.pcl-dsum__label {
	font-size: 12px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

/* Tone palette — pairs light background with saturated icon color */
.pcl-dsum__card--indigo  .pcl-dsum__icon { background: #eef2ff; color: #5B1ED9; }
.pcl-dsum__card--amber   .pcl-dsum__icon { background: #fef3c7; color: #b45309; }
.pcl-dsum__card--emerald .pcl-dsum__icon { background: #F3EEFE; color: #5A20C8; }
.pcl-dsum__card--violet  .pcl-dsum__icon { background: #ede9fe; color: #6d28d9; }
.pcl-dsum__card--rose    .pcl-dsum__icon { background: #ffe4e6; color: #be123c; }
.pcl-dsum__card--blue    .pcl-dsum__icon { background: #dbeafe; color: #1d4ed8; }
.pcl-dsum__card--orange  .pcl-dsum__icon { background: #ffedd5; color: #c2410c; }

/* Subtle left-border accent matching the tone */
.pcl-dsum__card--indigo  { border-left: 3px solid #a5b4fc; }
.pcl-dsum__card--amber   { border-left: 3px solid #fcd34d; }
.pcl-dsum__card--emerald { border-left: 3px solid #6ee7b7; }
.pcl-dsum__card--violet  { border-left: 3px solid #c4b5fd; }
.pcl-dsum__card--rose    { border-left: 3px solid #fda4af; }
.pcl-dsum__card--blue    { border-left: 3px solid #93c5fd; }
.pcl-dsum__card--orange  { border-left: 3px solid #fdba74; }


/* ============================================================
   P-10: Quiz Embed
   ============================================================ */

.pcl-qz {
	padding: 28px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
}

.pcl-qz__screen { display: block; }

/* Intro */
.pcl-qz__title {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
}

.pcl-qz__desc {
	color: #475569;
	font-size: 14.5px;
	line-height: 1.6;
	margin-bottom: 16px;
}

.pcl-qz__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 14px 18px;
	background: #f8fafc;
	border-radius: 10px;
	font-size: 13px;
	color: #475569;
	margin-bottom: 18px;
}

.pcl-qz__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pcl-qz__meta i    { color: #7A3FF2; font-size: 15px; }

.pcl-qz__notice {
	padding: 12px 16px;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	color: #92400e;
	border-radius: 10px;
	font-size: 13.5px;
}

/* Buttons */
.pcl-qz__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 10px;
	border: 1.5px solid #e2e8f0;
	background: #ffffff;
	color: #334155;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pcl-qz__btn:hover { background: #f8fafc; border-color: #cbd5e1; }

.pcl-qz__btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.pcl-qz__btn--primary {
	background: #7A3FF2;
	color: #ffffff;
	border-color: #7A3FF2;
}
.pcl-qz__btn--primary:hover { background: #7A3FF2; border-color: #7A3FF2; color: #ffffff; }

/* Play screen head */
.pcl-qz__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.pcl-qz__progress { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pcl-qz__progress-text { font-size: 13px; color: #64748b; font-weight: 600; white-space: nowrap; }
.pcl-qz__progress-bar  { flex: 1; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.pcl-qz__progress-fill { height: 100%; width: 0; background: #7A3FF2; transition: width 0.3s ease; }

.pcl-qz__timer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #eef2ff;
	color: #0f172a;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.pcl-qz__timer.is-warning { background: #fee2e2; color: #dc2626; }
.pcl-qz__timer-label { font-weight: 500; opacity: 0.8; }

/* Questions */
.pcl-qz__question {
	padding: 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	margin-bottom: 14px;
}

.pcl-qz__q-num {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 11.5px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pcl-qz__q-text {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.4;
}

.pcl-qz__options { display: flex; flex-direction: column; gap: 8px; }

.pcl-qz__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.pcl-qz__option:hover { background: #f8fafc; }

.pcl-qz__option input { accent-color: #7A3FF2; cursor: pointer; margin: 0; }

.pcl-qz__option:has(input:checked) {
	background: #eef2ff;
	border-color: #7A3FF2;
}

.pcl-qz__option-text { color: #0f172a; font-size: 14px; line-height: 1.5; }

.pcl-qz__nav {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.pcl-qz__nav .pcl-qz__submit { margin-left: auto; }

.pcl-qz__error {
	margin-top: 10px;
	padding: 10px 14px;
	background: #fee2e2;
	color: #b91c1c;
	border-radius: 8px;
	font-size: 13.5px;
}

/* Result */
.pcl-qz__screen--result {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 20px 0;
}

.pcl-qz__result-icon i {
	font-size: 64px;
	color: #cbd5e1;
	line-height: 1;
}
.pcl-qz__result-icon.is-passed i { color: #7A3FF2; }
.pcl-qz__result-icon.is-failed i { color: #dc2626; }

.pcl-qz__result-status {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
}

.pcl-qz__result-score {
	font-size: 15px;
	color: #475569;
}

.pcl-qz__result-score strong { color: #0f172a; font-size: 17px; }

.pcl-el-price__vat {
	display: block;
	font-size: 11.5px;
	color: #64748b;
	margin-top: 2px;
	flex-basis: 100%;
}

.pcl-el-price--stacked .pcl-el-price__vat {
	flex-basis: auto;
}


/* ────────────────────────────────────────────────────────────────────────
 * P-7  Certificate List  (.pcl-clist*)
 * ──────────────────────────────────────────────────────────────────────── */

.pcl-clist {
	--pcl-clist-cols: 3;
	font-family: inherit;
	color: #0f172a;
}

.pcl-clist__inner {
	display: grid;
	grid-template-columns: repeat(var(--pcl-clist-cols), minmax(0, 1fr));
	gap: 20px;
}

.pcl-clist--list .pcl-clist__inner {
	grid-template-columns: 1fr;
	gap: 14px;
}

.pcl-clist__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.pcl-clist__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .15);
}

/* List layout: side-by-side preview + body */
.pcl-clist--list .pcl-clist__card {
	flex-direction: row;
	align-items: stretch;
}
.pcl-clist--list .pcl-clist__preview {
	flex: 0 0 220px;
	height: auto;
	min-height: 140px;
}
.pcl-clist--list .pcl-clist__body {
	flex: 1 1 auto;
}

@media (max-width: 640px) {
	.pcl-clist--list .pcl-clist__card { flex-direction: column; }
	.pcl-clist--list .pcl-clist__preview { flex: 0 0 auto; height: 180px; }
}

.pcl-clist__preview {
	position: relative;
	height: 180px;
	background: #f8fafc;
	overflow: hidden;
}

.pcl-clist__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pcl-clist__preview--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
}

.pcl-clist__preview--placeholder i {
	font-size: 52px;
	color: #94a3b8;
}

.pcl-clist__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	flex: 1 1 auto;
}

.pcl-clist__course {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	color: #0f172a;
}

.pcl-clist__course a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}

.pcl-clist__course a:hover { color: #7A3FF2; }

.pcl-clist__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	color: #64748b;
}

.pcl-clist__date i { font-size: 14px; }

.pcl-clist__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
}

.pcl-clist__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}

.pcl-clist__btn i { font-size: 15px; }

.pcl-clist__btn:active { transform: translateY(1px); }

.pcl-clist__btn--primary {
	background: #7A3FF2;
	color: #fff;
}
.pcl-clist__btn--primary:hover {
	background: #7A3FF2;
	color: #fff;
}

.pcl-clist__share {
	background: #f1f5f9;
	color: #0f172a;
}
.pcl-clist__share:hover { background: #e2e8f0; }

.pcl-clist__share.is-copied {
	background: #dcfce7;
	color: #166534;
}

/* Empty state */
.pcl-clist__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 56px 20px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	text-align: center;
	color: #64748b;
}

.pcl-clist__empty i {
	font-size: 44px;
	color: #94a3b8;
}

.pcl-clist__empty p {
	margin: 0;
	font-size: 14px;
}

/* Locked state (logged-out) */
.pcl-clist--locked {
	padding: 56px 24px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	text-align: center;
}

.pcl-clist__lock-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 360px;
	margin: 0 auto;
}

.pcl-clist__lock-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #eef2ff;
	color: #7A3FF2;
	font-size: 26px;
}

.pcl-clist--locked p {
	margin: 0;
	color: #475569;
	font-size: 15px;
}

/* ============================================================
   P-6: My Courses
   ============================================================ */

.pcl-myc {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Tabs */
.pcl-myc__tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #e2e8f0;
}

.pcl-myc__tab {
	position: relative;
	padding: 12px 18px;
	background: transparent;
	border: 0;
	color: #64748b;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color 0.2s ease;
	font-family: inherit;
}

.pcl-myc__tab:hover { color: #0f172a; }

.pcl-myc__tab.is-active { color: #7A3FF2; }

.pcl-myc__tab.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: #7A3FF2;
	border-radius: 2px;
}

.pcl-myc__tab-count {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: #eef2ff;
	color: #5B1ED9;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
}

/* Grid */
.pcl-myc__grid {
	display: grid;
	grid-template-columns: repeat( var(--pcl-myc-cols, 2), minmax(0, 1fr) );
	gap: 20px;
}

@media (max-width: 700px) {
	.pcl-myc__grid { grid-template-columns: 1fr; }
}

/* Card */
.pcl-myc__card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pcl-myc__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.12);
}

.pcl-myc__thumb-wrap {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #f1f5f9;
	overflow: hidden;
}

.pcl-myc__thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.pcl-myc__card:hover .pcl-myc__thumb-wrap img {
	transform: scale(1.04);
}

.pcl-myc__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: #7A3FF2;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 999px;
	backdrop-filter: blur(4px);
}

.pcl-myc__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 20px;
	flex: 1;
}

.pcl-myc__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
	color: #0f172a;
}

.pcl-myc__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.pcl-myc__title a:hover { color: #7A3FF2; }

/* Progress */
.pcl-myc__progress-track {
	height: 6px;
	background: #e2e8f0;
	border-radius: 999px;
	overflow: hidden;
}

.pcl-myc__progress-fill {
	height: 100%;
	background: #7A3FF2;
	border-radius: inherit;
	transition: width 0.6s ease;
}

.pcl-myc__progress-text {
	margin: 6px 0 0;
	font-size: 12px;
	color: #64748b;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.pcl-myc__last-lesson,
.pcl-myc__date {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #64748b;
}

.pcl-myc__last-lesson i,
.pcl-myc__date i {
	color: #94a3b8;
}

.pcl-myc__last-lesson span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	flex: 1;
}

/* Button */
.pcl-myc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding: 10px 16px;
	background: #7A3FF2;
	color: #ffffff;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	transition: background 0.2s ease;
	font-family: inherit;
}

.pcl-myc__btn:hover { background: #7A3FF2; color: #ffffff; }

/* Ghost variant for the Review button on completed cards so they don't
   compete visually with the primary "Continue" on active cards. */
.pcl-myc__btn--ghost {
	background: transparent;
	color: #0f172a;
	border: 1.5px solid #e2e8f0;
}

.pcl-myc__btn--ghost:hover {
	background: #f8fafc;
	color: #0f172a;
	border-color: #cbd5e1;
}

/* Empty state */
.pcl-myc__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 48px 20px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	color: #64748b;
	text-align: center;
}

.pcl-myc__empty i {
	font-size: 40px;
	color: #94a3b8;
}

.pcl-myc__empty p {
	margin: 0;
	font-size: 14.5px;
	max-width: 48ch;
}

.pcl-myc__empty .pcl-myc__btn { margin-top: 6px; }

/* Logged-out state */
.pcl-myc--locked .pcl-myc__lock-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 60px 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	text-align: center;
	color: #475569;
	max-width: 560px;
	margin: 0 auto;
}

.pcl-myc__lock-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #eef2ff;
	color: #7A3FF2;
	font-size: 26px;
	margin-bottom: 4px;
}


/* ============================================================
   P-3: Live Filter + Search
   ============================================================ */

.pcl-cf {
	display: grid;
	gap: 24px;
	align-items: start;
}

.pcl-cf--sidebar_left  { grid-template-columns: 260px minmax(0, 1fr); }
.pcl-cf--sidebar_right { grid-template-columns: minmax(0, 1fr) 260px; }
.pcl-cf--sidebar_right .pcl-cf__panel { order: 2; }
.pcl-cf--top           { grid-template-columns: 1fr; }

@media (max-width: 900px) {
	.pcl-cf:not(.pcl-cf--top) { grid-template-columns: 1fr; }
	.pcl-cf--sidebar_right .pcl-cf__panel { order: 0; }
}

/* Filter panel */
.pcl-cf__panel {
	padding: 20px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	position: sticky;
	top: 20px;
}

.pcl-cf--top .pcl-cf__panel {
	position: static;
}

.pcl-cf--top .pcl-cf__form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

.pcl-cf__group + .pcl-cf__group {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #f1f5f9;
}

.pcl-cf--top .pcl-cf__group + .pcl-cf__group {
	margin: 0;
	padding: 0;
	border-top: 0;
}

.pcl-cf__group-label {
	display: block;
	font-weight: 700;
	font-size: 12px;
	color: #0f172a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}

.pcl-cf__search {
	position: relative;
	display: flex;
	align-items: center;
}

.pcl-cf__search i {
	position: absolute;
	left: 12px;
	color: #94a3b8;
	pointer-events: none;
}

.pcl-cf__search input {
	width: 100%;
	padding: 10px 12px 10px 36px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 14px;
	outline: 0;
	background: #f8fafc;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.pcl-cf__search input:focus {
	border-color: #7A3FF2;
	background: #ffffff;
}

.pcl-cf__check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 13px;
	color: #334155;
	cursor: pointer;
}

.pcl-cf__check input {
	accent-color: #7A3FF2;
	cursor: pointer;
}

.pcl-cf__check:hover { color: #0f172a; }

.pcl-cf__count {
	color: #94a3b8;
	font-size: 12px;
	margin-left: auto;
}

.pcl-cf__rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #f59e0b;
	font-size: 13px;
}

.pcl-cf__rating .ri-star-line { color: #e2e8f0; }

/* Main area */
.pcl-cf__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	gap: 14px;
	flex-wrap: wrap;
}

.pcl-cf__result-count {
	font-size: 13.5px;
	color: #64748b;
}

.pcl-cf__sort {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #64748b;
}

.pcl-cf__sort select {
	padding: 6px 28px 6px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 13px;
	color: #0f172a;
	background: #ffffff;
	cursor: pointer;
}

.pcl-cf__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
	min-height: 0;
}

.pcl-cf__pills:empty { display: none; }

.pcl-cf__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: #eef2ff;
	color: #5B1ED9;
	border: 0;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pcl-cf__pill:hover { background: #c7d2fe; }

.pcl-cf__clear {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 0;
	background: transparent;
	border: 0;
	color: #dc2626;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 10px;
}

.pcl-cf__clear:hover { text-decoration: underline; }

/* Results grid */
.pcl-cf__grid {
	display: grid;
	grid-template-columns: repeat( var(--pcl-cf-cols, 3), minmax(0, 1fr) );
	gap: 20px;
}

@media (max-width: 1024px) { .pcl-cf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pcl-cf__grid { grid-template-columns: 1fr; } }

.pcl-cf__results { position: relative; transition: opacity 0.2s ease; }

/* Loading states */
.pcl-cf__results.is-loading { opacity: 0.7; pointer-events: none; }

.pcl-cf__results.is-spinner::after {
	content: '';
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 32px;
	border: 3px solid transparent;
	border-top-color: #7A3FF2;
	border-right-color: #7A3FF2;
	border-radius: 50%;
	animation: pcl-cf-spin 0.9s linear infinite;
}

@keyframes pcl-cf-spin { to { transform: translateX(-50%) rotate(360deg); } }

.pcl-cf__empty {
	text-align: center;
	padding: 60px 20px;
	color: #64748b;
}

.pcl-cf__empty i {
	font-size: 42px;
	color: #cbd5e1;
	display: block;
	margin-bottom: 12px;
}

.pcl-cf__empty p {
	margin: 0;
	font-size: 15px;
}

/* Pager */
.pcl-cf__pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
	flex-wrap: wrap;
}

.pcl-cf__page {
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	color: #334155;
	font-weight: 600;
	font-size: 13px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pcl-cf__page:hover { background: #eef2ff; border-color: #c7d2fe; }

.pcl-cf__page.is-current {
	background: #7A3FF2;
	border-color: #7A3FF2;
	color: #ffffff;
}

.pcl-cf__pager.pc-grid-pagination .pcl-cf__page.is-current,
.pcl-cf__pager.pc-grid-pagination .pcl-cf__page.is-active {
	background: var(--pc-gradient, linear-gradient(135deg, #7a3ff2 0%, #2196f3 100%));
	border-color: transparent;
	color: #ffffff;
}


/* ============================================================
   P-1: Course Carousel (Swiper-powered)
   ============================================================ */

.pcl-carousel {
	position: relative;
}

.pcl-carousel__swiper {
	overflow: hidden;
}

.pcl-carousel__slide {
	height: auto; /* let cards size themselves */
}

/* Outside arrows need extra horizontal breathing room */
.pcl-carousel--arrows-outside {
	padding: 0 60px;
}

.pcl-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #ffffff;
	color: #0f172a;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}

.pcl-carousel__arrow:hover {
	transform: translateY(-50%) scale(1.06);
	background: #f8fafc;
}

.pcl-carousel__arrow:disabled,
.pcl-carousel__arrow.swiper-button-disabled {
	opacity: 0.4;
	pointer-events: none;
}

.pcl-carousel__arrow i {
	font-size: 22px;
	line-height: 1;
}

/* Arrow positions */
.pcl-carousel--arrows-inside .pcl-carousel__arrow--prev { left: 16px; }
.pcl-carousel--arrows-inside .pcl-carousel__arrow--next { right: 16px; }

.pcl-carousel--arrows-outside .pcl-carousel__arrow--prev { left: 0; }
.pcl-carousel--arrows-outside .pcl-carousel__arrow--next { right: 0; }

/* Dots */
.pcl-carousel__dots {
	position: relative !important;
	bottom: auto !important;
	margin-top: 20px;
	text-align: center;
}

.pcl-carousel--dots-overlay .pcl-carousel__dots {
	position: absolute !important;
	bottom: 12px !important;
	left: 0;
	right: 0;
	margin-top: 0;
	z-index: 4;
}

.pcl-carousel .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #cbd5e1;
	opacity: 1;
	margin: 0 4px;
	transition: background 0.2s ease, transform 0.2s ease;
}

.pcl-carousel .swiper-pagination-bullet-active {
	background: #7A3FF2;
	transform: scale(1.25);
}

/* Hide outside arrows on narrow screens — not enough room */
@media (max-width: 640px) {
	.pcl-carousel--arrows-outside { padding: 0; }
	.pcl-carousel--arrows-outside .pcl-carousel__arrow { display: none; }
}