/* ============================================================
   Playcourse Elementor Widget Styles
   ============================================================ */

/* ── Grid container ────────────────────────────────────────── */
.pcl-el-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ── Card ──────────────────────────────────────────────────── */
.pcl-el-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pcl-el-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	border-color: #d1d5db;
	transform: translateY(-2px);
}

/* ── Thumbnail ─────────────────────────────────────────────── */
.pcl-el-card__thumb-wrap {
	display: block;
	overflow: hidden;
	text-decoration: none;
	flex-shrink: 0;
	position: relative;
}

.pcl-el-card__thumb-link {
	display: block;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
}

.pcl-el-card__thumb-wrap.pc-card-thumb .pcl-el-card__thumb {
	height: 100%;
}

.pcl-el-card__thumb {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.pcl-el-card__thumb-wrap:hover .pcl-el-card__thumb {
	transform: scale(1.04);
}

.pcl-el-card__thumb-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0);
	transition: background 0.25s ease;
	pointer-events: none;
}

.pcl-el-card__thumb-wrap:hover .pcl-el-card__thumb-overlay {
	background: rgba(15, 23, 42, 0.35);
}

.pcl-el-card__level-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(17, 24, 39, 0.85);
	color: #fff;
	backdrop-filter: blur(4px);
}

.pcl-el-card__thumb-placeholder {
	width: 100%;
	height: 200px;
	background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
	font-size: 40px;
}

/* Fills aspect-ratio thumb when featured image is missing (kit `.pc-card-thumb`). */
.pcl-el-card__thumb-wrap.pc-card-thumb .pcl-el-card__thumb-placeholder {
	height: 100%;
	min-height: 0;
}

/* ── Card body ─────────────────────────────────────────────── */
.pcl-el-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
	gap: 10px;
}

/* ── Categories ────────────────────────────────────────────── */
.pcl-el-card__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pcl-el-card__body .pcl-el-card__cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	background: #eff6ff;
	color: #2563eb;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.pcl-el-card__body .pcl-el-card__cat:hover {
	background: #2563eb;
	color: #fff;
}

/* ── Title ─────────────────────────────────────────────────── */
.pcl-el-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

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

.pcl-el-card__title a:hover {
	color: #2563eb;
}

/* ── Excerpt ───────────────────────────────────────────────── */
.pcl-el-card__excerpt {
	margin: 0;
	font-size: 13.5px;
	color: #6b7280;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Meta ──────────────────────────────────────────────────── */
.pcl-el-card__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12.5px;
	color: #6b7280;
	flex-wrap: wrap;
}

.pcl-el-card__meta span {
	display: flex;
	align-items: center;
	gap: 4px;
}

.pcl-el-card__meta i {
	font-size: 14px;
	color: #9ca3af;
}

/* ── Instructor ────────────────────────────────────────────── */
.pcl-el-card__instructor {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #374151;
}

.pcl-el-card__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1.5px solid #e5e7eb;
}

/* ── Rating stars ──────────────────────────────────────────── */
.pcl-el-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #6b7280;
}

.pcl-el-stars {
	display: inline-flex;
	gap: 1px;
	color: #f59e0b;
	font-size: 14px;
	line-height: 1;
}

.pcl-el-stars i {
	line-height: 1;
}

.pcl-el-card__rating-num {
	font-weight: 700;
	color: #111827;
}

.pcl-el-card__rating-count {
	color: #9ca3af;
}

/* ── Footer / Price / Button ───────────────────────────────── */
.pcl-el-card__footer {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.pcl-el-card__footer.pc-card-foot:not(:has(.pcl-el-card__price)) {
	justify-content: flex-end;
}

.pcl-el-card__price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	min-width: 0;
	font-variant-numeric: tabular-nums;
}

.pcl-el-card__price.pc-card-price--promo {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.pcl-el-card__price-free,
.pcl-el-card__price-free.pc-card-price-free {
	font-weight: 800;
	font-size: 16px;
	color: var(--pc-green, #16A34A);
}

.pcl-el-card__price-regular,
.pcl-el-card__price-regular.pc-card-price-regular {
	font-weight: 800;
	font-size: 17px;
	color: var(--pc-dark, #111827);
	letter-spacing: -0.02em;
}

.pcl-el-card__price-sale,
.pcl-el-card__price-sale.pc-card-price-sale {
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.03em;
	color: var(--pc-dark, #111827);
	line-height: 1.15;
}

.pc-card--premium .pcl-el-card__price-sale,
.pc-card--premium .pcl-el-card__price-sale.pc-card-price-sale {
	color: var(--pco-primary-color, #7A3FF2);
}

.pcl-el-card__price-old,
.pcl-el-card__price-old.pc-card-price-old {
	font-size: 12px;
	color: var(--pc-subtle, #9ca3af);
	text-decoration: line-through;
	font-weight: 600;
}

.pc-card-price-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pco-primary-color, #7A3FF2);
	background: var(--primary-color-50, #f3eefe);
	border: 1px solid var(--primary-color-100, #e7ddfd);
	line-height: 1.2;
}

.pcl-el-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	background: var(--pco-primary-color, #7A3FF2);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
	white-space: nowrap;
}

.pcl-el-card__btn:hover {
	background: var(--pco-primary-color, #7A3FF2);
	color: #fff;
}

.pcl-el-card__btn.pc-btn-outline {
	background: transparent;
	background-image: none;
	color: var(--pco-primary-color, #7A3FF2);
	border: 1px solid var(--pc-border, #e5e7eb);
	box-shadow: none;
}

.pcl-el-card__btn.pc-btn-outline:hover {
	background: var(--primary-color-50, #f3eefe);
	color: var(--pco-primary-color, #7A3FF2);
	border-color: var(--pco-primary-color, #7A3FF2);
}

/* ── Pagination ────────────────────────────────────────────── */
.pcl-el-pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.pcl-el-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #e5e7eb;
	color: #374151;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.pcl-el-pager .page-numbers:hover,
.pcl-el-pager .page-numbers.current {
	background: var(--pco-primary-color, #7A3FF2);
	border-color: var(--pco-primary-color, #7A3FF2);
	color: #fff;
}

.pcl-el-pager.pc-grid-pagination .page-numbers.current,
.pcl-el-pager.pc-grid-pagination a.page-numbers:hover {
	background: var(--pc-gradient, linear-gradient(135deg, #7a3ff2 0%, #2196f3 100%));
	border-color: transparent;
	color: #fff;
}

.pcl-el-pager--loadmore {
	margin-top: 32px;
}

.pcl-el-loadmore {
	min-width: 200px;
	padding: 12px 24px;
}

.pcl-el-loadmore[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Empty state ───────────────────────────────────────────── */
.pcl-el-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	color: #6b7280;
}

.pcl-el-empty i {
	font-size: 40px;
	display: block;
	margin-bottom: 12px;
	color: #d1d5db;
}

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

/* ── Elementor editor placeholder ──────────────────────────── */
.elementor-editor-active .pcl-el-grid {
	min-height: 80px;
}

/* ============================================================
   F-4: Enroll Button
   ============================================================ */

.pcl-el-enroll {
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
}

.pcl-el-enroll__form {
	margin: 0;
}

.pcl-el-enroll__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border: 1.5px solid transparent;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	white-space: nowrap;
	font-family: inherit;
}

.pcl-el-enroll__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pcl-el-enroll__btn:disabled,
.pcl-el-enroll__btn.is-disabled,
.pcl-el-enroll__btn[aria-disabled="true"] {
	cursor: default;
	transform: none;
	box-shadow: none;
	opacity: 0.85;
}

/* Per-state defaults (overridable from Elementor Style tab) */
.pcl-el-enroll__btn--enroll        { background: var(--pco-primary-color, #7A3FF2); color: #fff; }
.pcl-el-enroll__btn--enroll:hover   { background: var(--pco-primary-color, #7A3FF2); color: #fff; }

.pcl-el-enroll__btn--continue      { background: #0ea5e9; color: #fff; }
.pcl-el-enroll__btn--continue:hover { background: #0284c7; color: #fff; }

.pcl-el-enroll__btn--completed     { background: var(--pco-primary-color, #7A3FF2); color: #fff; }
.pcl-el-enroll__btn--completed:hover { background: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 72%, black); color: #fff; }

.pcl-el-enroll__btn--buy           { background: #f59e0b; color: #fff; }
.pcl-el-enroll__btn--buy:hover      { background: #d97706; color: #fff; }

.pcl-el-enroll__btn--login         { background: #64748b; color: #fff; }
.pcl-el-enroll__btn--login:hover    { background: #475569; color: #fff; }

.pcl-el-enroll__btn--waitlist_join  { background: #a855f7; color: #fff; }
.pcl-el-enroll__btn--waitlist_join:hover { background: #9333ea; color: #fff; }

.pcl-el-enroll__btn--waitlist_on   { background: #e2e8f0; color: #334155; }
.pcl-el-enroll__btn--waitlist_on:hover { background: #cbd5e1; color: #334155; }

.pcl-el-enroll__icon {
	font-size: 16px;
	line-height: 1;
}

.pcl-el-enroll__price {
	font-size: 14px;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: #0f172a;
}

.pcl-el-enroll__price-regular { font-weight: 700; }
.pcl-el-enroll__price-sale    { font-weight: 800; color: var(--pco-primary-color, #7A3FF2); }
.pcl-el-enroll__price-free    { font-weight: 700; color: var(--pco-primary-color, #7A3FF2); }
.pcl-el-enroll__price-old     { text-decoration: line-through; color: #9ca3af; font-size: 12px; }

.pcl-el-enroll__enrolled {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #6b7280;
}

.pcl-el-enroll__enrolled i {
	color: #9ca3af;
}

/* ============================================================
   F-12: Course Price
   ============================================================ */

.pcl-el-price {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	line-height: 1.2;
}

.pcl-el-price--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.pcl-el-price__regular {
	font-size: 22px;
	font-weight: 700;
	color: #0f172a;
}

.pcl-el-price__sale {
	font-size: 22px;
	font-weight: 700;
	color: #dc2626;
}

.pcl-el-price__old {
	font-size: 15px;
	color: #94a3b8;
	text-decoration: line-through;
}

.pcl-el-price__free {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 9%, white);
	color: var(--pco-primary-color, #7A3FF2);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
}

.pcl-el-price__access {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	color: #64748b;
	font-weight: 500;
}

.pcl-el-price__access i {
	font-size: 14px;
	color: #94a3b8;
}

.pcl-el-price__discount {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	background: #fee2e2;
	color: #b91c1c;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	vertical-align: middle;
}

.pcl-el-price .woocommerce-Price-amount {
	font-weight: inherit;
	color: inherit;
}

/* ============================================================
   F-13: Rating Stars (Standalone)
   ============================================================ */

.pcl-el-stars-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	color: inherit;
	text-decoration: none;
}

.pcl-el-stars-wrap:hover {
	text-decoration: none;
}

/* Re-declared here as a standalone widget (separate from the card variant) */
.pcl-el-stars-wrap .pcl-el-stars {
	display: inline-flex;
	gap: 1px;
	color: #f59e0b;
	font-size: var(--pcl-star-size, 16px);
	line-height: 1;
}

.pcl-el-stars-wrap .pcl-el-stars i {
	line-height: 1;
	font-size: var(--pcl-star-size, 16px);
}

.pcl-el-stars-wrap .pcl-el-stars .is-filled,
.pcl-el-stars-wrap .pcl-el-stars .is-half {
	color: #f59e0b;
}

.pcl-el-stars-wrap .pcl-el-stars .is-empty {
	color: #e2e8f0;
}

.pcl-el-stars__number {
	font-weight: 700;
	color: #0f172a;
	font-size: 13.5px;
}

.pcl-el-stars__count {
	color: #64748b;
	font-size: 12.5px;
}

/* ============================================================
   F-3: Course Hero
   ============================================================ */

.pcl-hero {
	position: relative;
	padding: 72px 20px;
	overflow: hidden;
	color: #0f172a;
}

.pcl-hero--dark {
	color: #fff;
}

.pcl-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.pcl-hero__container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 1;
}

.pcl-hero__grid {
	display: grid;
	gap: 48px;
	align-items: center;
}

.pcl-hero--split_60_40 .pcl-hero__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.pcl-hero--split_50_50 .pcl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pcl-hero--video_full  .pcl-hero__grid,
.pcl-hero--stacked     .pcl-hero__grid,
.pcl-hero--no-media    .pcl-hero__grid { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
	.pcl-hero__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; }
	.pcl-hero { padding: 48px 20px; }
}

/* Text column */
.pcl-hero__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pcl-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pcl-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}
.pcl-hero__badge--featured { background: #f59e0b; }
.pcl-hero__badge--free     { background: var(--pco-primary-color, #7A3FF2); }
.pcl-hero__badge--new      { background: var(--pco-primary-color, #7A3FF2); }

.pcl-hero__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.pcl-hero__cat {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 12%, transparent);
	color: inherit;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.pcl-hero--dark .pcl-hero__cat { background: rgba(255, 255, 255, 0.18); }

.pcl-hero__title {
	margin: 0;
	font-size: clamp( 28px, 3.5vw, 48px );
	font-weight: 800;
	line-height: 1.15;
	color: inherit;
}

.pcl-hero__excerpt {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	max-width: 60ch;
	color: inherit;
	opacity: 0.85;
}

.pcl-hero__rating {
	font-size: 14px;
}

.pcl-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 13.5px;
	color: inherit;
	opacity: 0.85;
}

.pcl-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pcl-hero__meta i {
	font-size: 15px;
	opacity: 0.75;
}

.pcl-hero__instructor {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.pcl-hero__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.pcl-hero__instructor-meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.pcl-hero__instructor-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
	font-weight: 600;
}

.pcl-hero__instructor-name {
	font-size: 14px;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

.pcl-hero__instructor-name:hover {
	text-decoration: underline;
}

.pcl-hero__sub-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 12.5px;
	opacity: 0.7;
	margin-top: 4px;
}

.pcl-hero__sub-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Media column */
.pcl-hero__media {
	position: relative;
}

.pcl-hero__media--top {
	margin-bottom: 36px;
}

.pcl-hero__media-inner {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.25);
	background: #0f172a;
}

.pcl-hero__media-inner iframe,
.pcl-hero__media-inner video,
.pcl-hero__media-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.pcl-hero__media-inner--image img {
	transition: transform 0.4s ease;
}

.pcl-hero__media-inner--image:hover img {
	transform: scale(1.04);
}

.pcl-hero__media-inner--image {
	display: block;
	text-decoration: none;
}

.pcl-hero__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.pcl-hero__play i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #0f172a;
	font-size: 32px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
	transition: transform 0.25s ease, background 0.25s ease;
}

.pcl-hero__media-inner--image:hover .pcl-hero__play i {
	background: #fff;
	transform: scale(1.08);
}

/* ============================================================
   F-5: Progress Bar
   ============================================================ */

.pcl-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.pcl-progress__label {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.2;
	white-space: nowrap;
}

.pcl-progress__label--above {
	margin-bottom: 2px;
}

.pcl-progress__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pcl-progress__track {
	position: relative;
	flex: 1;
	height: 10px;
	background: #e2e8f0;
	border-radius: 999px;
	overflow: hidden;
}

.pcl-progress__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--pco-primary-color, #7A3FF2);
	border-radius: inherit;
	transition: width 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10px;
}

.pcl-progress--pos-inside .pcl-progress__track {
	height: 22px;
}

.pcl-progress__label--inside {
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
}

.pcl-progress--pos-inside .pcl-progress__fill {
	min-width: 2.5em; /* keep the label readable at low percentages */
}

.pcl-progress__label--right {
	color: #0f172a;
}

.pcl-progress__counts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 12.5px;
	color: #64748b;
}

.pcl-progress__counts span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.pcl-progress__counts i {
	font-size: 14px;
	color: #94a3b8;
}

/* Celebration on 100% */
.pcl-progress.is-complete .pcl-progress__fill {
	background: var(--pco-primary-color, #7A3FF2);
	box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
	animation: pcl-progress-pulse 1.6s ease-in-out 1;
}

@keyframes pcl-progress-pulse {
	0%   { box-shadow: 0 0 0 0    rgba(16, 185, 129, 0.55); }
	70%  { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);    }
	100% { box-shadow: 0 0 0 0    rgba(16, 185, 129, 0);    }
}

@media (prefers-reduced-motion: reduce) {
	.pcl-progress__fill { transition: none !important; }
	.pcl-progress.is-complete .pcl-progress__fill { animation: none !important; }
}

/* ============================================================
   F-6: Stats Strip
   ============================================================ */

.pcl-stats {
	border: 0 solid transparent;
}

.pcl-stats--strip {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.pcl-stats--grid {
	display: grid;
	gap: 12px;
}

.pcl-stats__item {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 180px;
	min-width: 0;
	padding: 14px 18px;
	transition: background 0.2s ease;
}

.pcl-stats--strip .pcl-stats__item {
	justify-content: center;
}

/* Rating star gets its own color */
.pcl-stats__item[data-stat="rating"] .pcl-stats__icon {
	background: #fef3c7;
	color: #f59e0b;
}

.pcl-stats--divided .pcl-stats__item + .pcl-stats__item {
	border-left: 1px solid #e2e8f0;
	border-left-style: solid;
}

@media (max-width: 640px) {
	.pcl-stats--divided .pcl-stats__item + .pcl-stats__item { border-left: 0; }
}

.pcl-stats__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #eef2ff;
	color: var(--pco-primary-color, #7A3FF2);
	flex-shrink: 0;
}

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

.pcl-stats__body {
	display: inline-flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.pcl-stats__value {
	font-weight: 700;
	font-size: 15px;
	color: #0f172a;
	line-height: 1.2;
}

.pcl-stats__label {
	font-size: 12px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ============================================================
   F-2: Course Card (Single) — layout + style modifiers
   ============================================================ */

.pcl-el-single-card {
	display: block;
	width: 100%;
	container-type: inline-size;
}

/* Horizontal — thumbnail on the left, body on the right */
.pcl-el-single-card--horizontal .pcl-el-card {
	display: grid;
	grid-template-columns: minmax(140px, 40%) 1fr;
	flex-direction: row;
}

/* Auto-collapse when no thumbnail rendered */
.pcl-el-single-card--horizontal .pcl-el-card:not(:has(.pcl-el-card__thumb-wrap)) {
	grid-template-columns: 1fr;
}

.pcl-el-single-card--horizontal .pcl-el-card__thumb-wrap {
	height: 100%;
	aspect-ratio: auto;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: inherit;
}

.pcl-el-single-card--horizontal .pcl-el-card__thumb {
	height: 100%;
}

.pcl-el-single-card--horizontal .pcl-el-card__footer {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.pcl-el-single-card--horizontal .pcl-el-card {
		grid-template-columns: 1fr;
	}
	.pcl-el-single-card--horizontal .pcl-el-card__thumb-wrap {
		aspect-ratio: 16 / 9;
		height: auto;
		border-bottom-left-radius: 0;
		border-top-right-radius: inherit;
	}
}

/* Overlay — text sits on top of the thumbnail */
.pcl-el-single-card--overlay .pcl-el-card {
	position: relative;
	min-height: var(--pcl-card-overlay-h, 360px);
	overflow: hidden;
}

.pcl-el-single-card--overlay .pcl-el-card__thumb-wrap {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	border-radius: inherit;
	z-index: 0;
}

.pcl-el-single-card--overlay .pcl-el-card__thumb-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 60% );
	z-index: 1;
}

.pcl-el-single-card--overlay .pcl-el-card__body {
	position: relative;
	margin-top: auto;
	z-index: 2;
	color: #fff;
}

.pcl-el-single-card--overlay .pcl-el-card__title a,
.pcl-el-single-card--overlay .pcl-el-card__excerpt,
.pcl-el-single-card--overlay .pcl-el-card__meta,
.pcl-el-single-card--overlay .pcl-el-card__meta i,
.pcl-el-single-card--overlay .pcl-el-card__instructor {
	color: #fff;
}

.pcl-el-single-card--overlay .pcl-el-card__footer {
	position: relative;
	z-index: 2;
	background: transparent;
	border-top-color: rgba(255, 255, 255, 0.22);
	margin-top: 0;
}

.pcl-el-single-card--overlay .pcl-el-card__price,
.pcl-el-single-card--overlay .pcl-el-card__price-free,
.pcl-el-single-card--overlay .pcl-el-card__price-regular,
.pcl-el-single-card--overlay .pcl-el-card__price-sale {
	color: #fff;
}

.pcl-el-single-card--overlay .pcl-el-card__price-old {
	color: rgba(255, 255, 255, 0.65);
}

.pcl-el-single-card--overlay .pc-card-price-badge {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.35);
}

.pcl-el-single-card--overlay .pcl-el-card__btn.pc-btn-primary {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Card style modifiers (only apply when the user keeps default colors) */
.pcl-el-single-card--minimal .pcl-el-card {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.pcl-el-single-card--bordered .pcl-el-card {
	border-width: 1.5px;
	box-shadow: none;
}

.pcl-el-single-card--shadow .pcl-el-card {
	border: 0;
	box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.18);
}

/* ============================================================
   F-11: Course Curriculum
   ============================================================ */

.pcl-cur {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pcl-cur__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: #475569;
}

.pcl-cur__summary span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pcl-cur__summary i {
	color: var(--pco-primary-color, #7A3FF2);
	font-size: 15px;
}

.pcl-cur__list {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
}

/* Section */
.pcl-cur__section + .pcl-cur__section {
	border-top: 1px solid #e2e8f0;
}

.pcl-cur__section.is-extra {
	display: none;
}

.pcl-cur.is-expanded .pcl-cur__section.is-extra {
	display: block;
}

.pcl-cur__section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 16px 20px;
	background: #f8fafc;
	border: 0;
	cursor: pointer;
	text-align: left;
	transition: background 0.2s ease;
	font-family: inherit;
}

.pcl-cur__section-head:hover {
	background: #eef2ff;
}

.pcl-cur__section.is-open .pcl-cur__section-head {
	background: #eef2ff;
}

.pcl-cur__caret {
	color: #64748b;
	transition: transform 0.25s ease;
	display: inline-flex;
	align-items: center;
}

.pcl-cur__section.is-open .pcl-cur__caret {
	transform: rotate(180deg);
}

.pcl-cur__section-title {
	flex: 1;
	font-weight: 700;
	font-size: 14.5px;
	color: #0f172a;
}

.pcl-cur__section-count {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
}

.pcl-cur__section-body {
	display: none;
	padding: 6px 0 12px;
	border-top: 1px solid #f1f5f9;
}

.pcl-cur__section.is-open .pcl-cur__section-body {
	display: block;
}

.pcl-cur__section-summary {
	margin: 10px 20px 4px;
	font-size: 13px;
	color: #64748b;
	font-style: italic;
}

/* Items */
.pcl-cur__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcl-cur__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px;
	color: #334155;
	text-decoration: none;
	font-size: 13.5px;
	transition: background 0.15s ease;
	border-top: 1px solid #f1f5f9;
}

.pcl-cur__items > li:first-child .pcl-cur__item {
	border-top: 0;
}

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

.pcl-cur__item.is-done .pcl-cur__title {
	color: #64748b;
}

.pcl-cur__item.is-locked {
	cursor: default;
	color: #94a3b8;
}

.pcl-cur__check {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: #cbd5e1;
	font-size: 18px;
	flex-shrink: 0;
}

.pcl-cur__item.is-done .pcl-cur__check {
	color: var(--pco-primary-color, #7A3FF2);
}

.pcl-cur__type {
	color: var(--pco-primary-color, #7A3FF2);
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

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

.pcl-cur__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	flex-shrink: 0;
}

.pcl-cur__badge--quiz       { background: #fef3c7; color: #b45309; }
.pcl-cur__badge--assignment { background: #fce7f3; color: #be185d; }
.pcl-cur__badge--preview    { background: #dbeafe; color: #1d4ed8; }
.pcl-cur__badge--lock       {
	background: transparent;
	color: #94a3b8;
	padding: 0;
	font-size: 16px;
	letter-spacing: 0;
}

.pcl-cur__duration {
	color: #64748b;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.pcl-cur__toggle-more {
	width: 100%;
	padding: 14px 20px;
	background: #f8fafc;
	border: 0;
	border-top: 1px solid #e2e8f0;
	color: var(--pco-primary-color, #7A3FF2);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s ease;
}

.pcl-cur__toggle-more:hover {
	background: #eef2ff;
}

/* ============================================================
   F-7: Category Grid
   ============================================================ */

.pcl-catgrid {
	display: grid;
	grid-template-columns: repeat( var(--pcl-catgrid-cols-d, 4), minmax(0, 1fr) );
	gap: 18px;
}

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

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

.pcl-catgrid__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 16px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pcl-catgrid__card:hover {
	background: #eef2ff;
	border-color: #c7d2fe;
	transform: scale(1.03);
}

.pcl-catgrid__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #eef2ff;
	color: var(--pco-primary-color, #7A3FF2);
	flex-shrink: 0;
	overflow: hidden;
}

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

.pcl-catgrid__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pcl-catgrid__name {
	font-weight: 700;
	font-size: 14.5px;
	color: #0f172a;
	line-height: 1.3;
	transition: color 0.2s ease;
	word-break: break-word;
}

.pcl-catgrid__card:hover .pcl-catgrid__name {
	color: #5B1ED9;
}

.pcl-catgrid__count {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: 11.5px;
	font-weight: 600;
}

/* ============================================================
   F-8: Instructor Card
   ============================================================ */

.pcl-instr {
	display: flex;
	gap: 20px;
	padding: 28px 24px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
}

.pcl-instr--vertical {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.pcl-instr--horizontal {
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
}

.pcl-instr__avatar-wrap {
	flex-shrink: 0;
}

.pcl-instr__avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px #eef2ff;
	display: block;
}

.pcl-instr__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	flex: 1;
}

.pcl-instr--vertical .pcl-instr__body {
	align-items: center;
}

.pcl-instr__name {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
	word-break: break-word;
}

.pcl-instr__role {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pco-primary-color, #7A3FF2);
	letter-spacing: 0.02em;
}

.pcl-instr__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: #64748b;
}

.pcl-instr__stats span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.pcl-instr__stats i {
	font-size: 15px;
	color: #94a3b8;
}

.pcl-instr__star {
	color: #f59e0b !important;
}

.pcl-instr__bio {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
	max-width: 60ch;
}

.pcl-instr__socials {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.pcl-instr__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.pcl-instr__social:hover {
	background: #eef2ff;
	color: var(--pco-primary-color, #7A3FF2);
	transform: translateY(-2px);
}

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

@media (max-width: 640px) {
	.pcl-instr--horizontal {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* ============================================================
   F-9: Course Search Bar
   ============================================================ */

.pcl-search {
	position: relative;
	display: block;
	width: 100%;
}

.pcl-search__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 12px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pcl-search__bar:focus-within {
	border-color: var(--pco-primary-color, #7A3FF2);
	box-shadow: 0 0 0 3px var(--primary-color-glow, color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 18%, transparent));
}

.pcl-search--icon-right .pcl-search__bar { flex-direction: row-reverse; }

.pcl-search__icon {
	font-size: 18px;
	color: #94a3b8;
	flex-shrink: 0;
	display: inline-flex;
}

.pcl-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 14.5px;
	color: #0f172a;
	padding: 0;
	box-shadow: none !important;
	font-family: inherit;
}

.pcl-search__input::placeholder { color: #94a3b8; }

.pcl-search__cat {
	flex-shrink: 0;
	border: 0;
	background: #f8fafc;
	border-radius: 8px;
	font-size: 13px;
	padding: 4px 28px 4px 10px;
	color: #475569;
	cursor: pointer;
}

.pcl-search__submit {
	flex-shrink: 0;
	padding: 8px 18px;
	background: var(--pco-primary-color, #7A3FF2);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease;
	font-family: inherit;
}

.pcl-search__submit:hover { background: var(--pco-primary-color, #7A3FF2); }

.pcl-search__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid transparent;
	border-top-color: var(--pco-primary-color, #7A3FF2);
	border-right-color: var(--pco-primary-color, #7A3FF2);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.pcl-search__spinner.is-visible {
	opacity: 1;
	animation: pcl-search-spin 0.9s linear infinite;
}

@keyframes pcl-search-spin { to { transform: rotate(360deg); } }

/* Dropdown */
.pcl-search__dropdown {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.15);
	max-height: 400px;
	overflow-y: auto;
	z-index: 40;
}

.pcl-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	color: #0f172a;
	text-decoration: none;
	transition: background 0.15s ease;
	border-bottom: 1px solid #f1f5f9;
}

.pcl-search__item:last-child { border-bottom: 0; }

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

.pcl-search__thumb {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: #f1f5f9;
}

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

.pcl-search__item-title {
	font-weight: 600;
	font-size: 13.5px;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcl-search__item-cat {
	font-size: 11.5px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.pcl-search__price {
	font-weight: 700;
	font-size: 13px;
	color: #0f172a;
	flex-shrink: 0;
}

.pcl-search__price--free { color: var(--pco-primary-color, #7A3FF2); }
.pcl-search__price--sale { color: var(--pco-primary-color, #7A3FF2); font-weight: 800; }

.pcl-search__empty {
	padding: 20px 14px;
	text-align: center;
	color: #94a3b8;
	font-size: 13px;
}

/* ============================================================
   F-10: Course Reviews
   ============================================================ */

.pcl-rvw {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Summary */
.pcl-rvw__summary {
	display: grid;
	grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 20px 24px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

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

.pcl-rvw__summary-score { text-align: center; }

.pcl-rvw__avg {
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	color: #0f172a;
	margin-bottom: 4px;
}

.pcl-rvw__count {
	font-size: 12.5px;
	color: #64748b;
	margin-top: 6px;
}

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

.pcl-rvw__bar-row {
	display: grid;
	grid-template-columns: 28px 1fr 40px;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: #64748b;
}

.pcl-rvw__bar-label { font-weight: 600; text-align: right; }

.pcl-rvw__bar-track {
	height: 8px;
	background: #f1f5f9;
	border-radius: 999px;
	overflow: hidden;
}

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

.pcl-rvw__bar-count { text-align: right; font-variant-numeric: tabular-nums; }

/* Form */
.pcl-rvw__form-wrap { margin: 4px 0; }

.pcl-rvw__notice {
	padding: 12px 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 13.5px;
	color: #475569;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pcl-rvw__notice--ok {
	background: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 9%, white);
	border-color: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 22%, white);
	color: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 72%, black);
}

.pcl-rvw__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.pcl-rvw__form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.pcl-rvw__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pcl-rvw__form-title {
	margin: 0 0 2px;
	font-weight: 700;
	font-size: 15px;
	color: #0f172a;
}

.pcl-rvw__form-rating {
	display: inline-flex;
	gap: 2px;
}

.pcl-rvw__form-star {
	background: transparent;
	border: 0;
	color: #e2e8f0;
	font-size: 22px;
	cursor: pointer;
	padding: 2px;
	transition: color 0.15s ease, transform 0.15s ease;
	line-height: 1;
}

.pcl-rvw__form-star.is-active { color: #f59e0b; }

.pcl-rvw__form-star:hover { transform: scale(1.1); }

.pcl-rvw__form-title-input,
.pcl-rvw__form-content {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: #ffffff;
	color: #0f172a;
	outline: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pcl-rvw__form-title-input:focus,
.pcl-rvw__form-content:focus {
	border-color: var(--pco-primary-color, #7A3FF2);
	box-shadow: 0 0 0 3px var(--primary-color-glow, color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 18%, transparent));
}

.pcl-rvw__form-content { resize: vertical; min-height: 96px; }

.pcl-rvw__form-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pcl-rvw__form-submit {
	padding: 10px 22px;
	background: var(--pco-primary-color, #7A3FF2);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	transition: background 0.2s ease;
	font-family: inherit;
}

.pcl-rvw__form-submit:hover { background: var(--pco-primary-color, #7A3FF2); }
.pcl-rvw__form-submit:disabled { opacity: 0.7; cursor: not-allowed; }

.pcl-rvw__form-msg { font-size: 12.5px; color: #64748b; }
.pcl-rvw__form-msg.is-ok    { color: var(--pco-primary-color, #7A3FF2); }
.pcl-rvw__form-msg.is-error { color: #dc2626; }

/* Review cards */
.pcl-rvw__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pcl-rvw__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.pcl-rvw__card-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pcl-rvw__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

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

.pcl-rvw__card-top {
	display: flex;
	align-items: center;
	gap: 8px;
}

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

.pcl-rvw__verified {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 9%, white);
	color: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 72%, black);
	font-size: 11px;
	font-weight: 700;
}

.pcl-rvw__card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: #64748b;
}

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

.pcl-rvw__card-stars .ri-star-fill { color: #f59e0b; }
.pcl-rvw__card-stars .ri-star-line { color: #e2e8f0; }

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

.pcl-rvw__card-body {
	font-size: 14px;
	color: #475569;
	line-height: 1.6;
}

.pcl-rvw__card-body p { margin: 0 0 0.6em; }
.pcl-rvw__card-body p:last-child { margin-bottom: 0; }

/* Empty + pager */
.pcl-rvw__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 36px 20px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	color: #64748b;
	font-size: 14px;
	text-align: center;
}

.pcl-rvw__empty i {
	font-size: 28px;
	color: #94a3b8;
}

.pcl-rvw__pager { margin-top: 6px; }

/* ============================================================
   F-14: Course Meta Box
   ============================================================ */

.pcl-metabox {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
}

.pcl-metabox__title {
	margin: 0 0 6px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e2e8f0;
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pcl-metabox__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcl-metabox__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
}

/* When icons are off, collapse to 2-column layout so label/value stay aligned */
.pcl-metabox__row:not(:has(.pcl-metabox__icon)) {
	grid-template-columns: minmax(0, 1fr) auto;
}

.pcl-metabox__row + .pcl-metabox__row {
	border-top: 1px solid #f1f5f9;
}

.pcl-metabox__icon {
	display: inline-flex;
	width: 26px;
	justify-content: center;
	color: var(--pco-primary-color, #7A3FF2);
	flex-shrink: 0;
}

.pcl-metabox__icon i {
	font-size: 17px;
	line-height: 1;
}

.pcl-metabox__label {
	font-size: 13px;
	color: #64748b;
	font-weight: 500;
}

.pcl-metabox__value {
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
	text-align: right;
	word-break: break-word;
}

/* ============================================================
   F-15: What You'll Learn
   ============================================================ */

.pcl-wyl {
	border: 1px solid transparent;
	border-radius: 12px;
}

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

.pcl-wyl__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( var(--pcl-wyl-cols, 2), minmax(0, 1fr) );
	gap: 12px;
}

@media (max-width: 640px) {
	.pcl-wyl__grid {
		grid-template-columns: 1fr !important;
	}
}

.pcl-wyl__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
}

.pcl-wyl__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 9%, white);
	color: var(--pco-primary-color, #7A3FF2);
	flex-shrink: 0;
	margin-top: 2px;
}

.pcl-wyl__icon i {
	font-size: 14px;
	line-height: 1;
}

.pcl-wyl__text {
	color: #334155;
	min-width: 0;
	flex: 1;
}

/* ============================================================
   F-16: Requirements
   ============================================================ */

.pcl-req {
	border: 1px solid transparent;
	border-radius: 12px;
}

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

.pcl-req__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( var(--pcl-req-cols, 1), minmax(0, 1fr) );
	gap: 10px;
}

@media (max-width: 640px) {
	.pcl-req__list {
		grid-template-columns: 1fr !important;
	}
}

.pcl-req__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0;
	font-size: 14px;
	line-height: 1.55;
}

.pcl-req__icon {
	color: var(--pco-primary-color, #7A3FF2);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	/* Match the first text line's height so the icon stays aligned
	   regardless of the Elementor-supplied font size */
	height: 1.55em;
}

.pcl-req__icon i {
	font-size: 16px;
	line-height: 1;
}

.pcl-req__text {
	color: #334155;
	min-width: 0;
	flex: 1;
}

/* ============================================================
   F-17: Target Audience
   ============================================================ */

.pcl-aud {
	border: 1px solid transparent;
	border-radius: 12px;
}

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

.pcl-aud__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( var(--pcl-aud-cols, 1), minmax(0, 1fr) );
	gap: 10px;
}

@media (max-width: 640px) {
	.pcl-aud__list {
		grid-template-columns: 1fr !important;
	}
}

.pcl-aud__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0;
	font-size: 14px;
	line-height: 1.55;
}

.pcl-aud__icon {
	color: #ec4899;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 1.55em;
}

.pcl-aud__icon i {
	font-size: 16px;
	line-height: 1;
}

.pcl-aud__text {
	color: #334155;
	min-width: 0;
	flex: 1;
}

/* ============================================================
   F-18: Course Includes
   ============================================================ */

.pcl-inc {
	border: 1px solid transparent;
	border-radius: 12px;
}

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

.pcl-inc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

/* List layout — 1 column by default, responsive via --pcl-inc-cols */
.pcl-inc--list .pcl-inc__list {
	grid-template-columns: repeat( var(--pcl-inc-cols, 1), minmax(0, 1fr) );
}

@media (max-width: 640px) {
	.pcl-inc--list .pcl-inc__list { grid-template-columns: 1fr; }
}

/* Pills layout — wraps inline */
.pcl-inc--pills .pcl-inc__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pcl-inc__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: #334155;
}

.pcl-inc--pills .pcl-inc__item {
	padding: 6px 14px;
	background: #eef2ff;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

.pcl-inc__icon {
	color: var(--pco-primary-color, #7A3FF2);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 1.55em;
}

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

.pcl-inc--pills .pcl-inc__icon i {
	font-size: 15px;
}

.pcl-inc__text {
	min-width: 0;
	flex: 1;
}

.pcl-inc--pills .pcl-inc__text { flex: 0 0 auto; }

/* ============================================================
   F-19: Breadcrumb
   ============================================================ */

.pcl-bc {
	font-size: 13.5px;
	line-height: 1.4;
}

.pcl-bc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pcl-bc__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: #64748b;
}

.pcl-bc__link {
	color: #64748b;
	text-decoration: none;
	transition: color 0.15s ease;
}

.pcl-bc__link:hover {
	color: var(--pco-primary-color, #7A3FF2);
}

.pcl-bc__current {
	color: #0f172a;
	font-weight: 600;
	max-width: 28ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcl-bc__sep {
	color: #cbd5e1;
	display: inline-flex;
	align-items: center;
	font-size: 15px;
	line-height: 1;
}

.pcl-bc__sep i {
	font-size: inherit;
	line-height: 1;
}

/* ============================================================
   F-20: Lesson Navigation
   ============================================================ */

.pcl-lnav {
	display: grid;
	gap: 12px;
}

.pcl-lnav--side {
	grid-template-columns: 1fr 1fr;
}

.pcl-lnav--stacked {
	grid-template-columns: 1fr;
}

/* When only prev OR next is enabled, span the full row instead of leaving
   a lopsided gap next to the single button. */
.pcl-lnav--side > .pcl-lnav__btn:only-child {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.pcl-lnav--side { grid-template-columns: 1fr; }
}

.pcl-lnav__btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
	min-width: 0;
}

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

/* Next button → arrow on the right, body pushed left */
.pcl-lnav__btn--next {
	justify-content: flex-end;
	text-align: right;
}

.pcl-lnav__btn--next .pcl-lnav__body {
	align-items: flex-end;
}

.pcl-lnav__btn.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.pcl-lnav__arrow {
	color: var(--pco-primary-color, #7A3FF2);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

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

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

.pcl-lnav__label {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	color: #64748b;
}

.pcl-lnav__title {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 220px;
}