/* ==========================================================================
   Ahulearn — Design System ("Coursera Trust": light, academic-blue)
   ========================================================================== */

:root {
	/* Colors */
	--color-bg-primary: #FFFFFF;
	--color-bg-secondary: #F1F6FC;
	--color-bg-tertiary: #E3EDF7;
	--color-accent: #0056D2;
	--color-accent-light: #2E73DE;
	--color-accent-glow: rgba(0, 86, 210, .15);
	--color-success: #10B981;
	--color-warning: #F59E0B;
	--color-error: #EF4444;
	--color-status-pending: #9CA3AF;
	--color-promo: #38BDF8;
	--color-text-primary: #1F2937;
	--color-text-secondary: #4B5563;
	--color-text-muted: #6B7280;
	--color-border: rgba(31, 41, 55, .1);
	--color-border-accent: rgba(0, 86, 210, .3);

	/* Typography */
	--font-primary: 'Vazirmatn', 'Inter', system-ui, sans-serif;
	--text-xs: .75rem;
	--text-sm: .875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
	--text-6xl: 3.75rem;
	--leading-tight: 1.25;
	--leading-normal: 1.6;
	--leading-loose: 1.8;

	/* Spacing */
	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: .75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* Radius */
	--radius-sm: .375rem;
	--radius-md: .75rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, .35);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
	--shadow-glow: 0 0 40px var(--color-accent-glow);

	--max-width: 1280px;
	--transition-fast: .18s ease;
	--transition-normal: .3s ease;
	--transition-slow: .5s ease;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	font-family: var(--font-primary);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { line-height: var(--leading-tight); margin: 0 0 var(--space-4); font-weight: 700; }
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }

/* WordPress core's own clip-based technique — unlike `left: -9999px`, this
   doesn't depend on text direction, so it can't blow out scrollWidth/cause a
   horizontal scrollbar on RTL pages (WooCommerce's classic templates use a
   lot of these for accessible field labels). */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	position: absolute !important; word-wrap: normal !important;
}
.ahulearn-skip-link:focus {
	position: fixed; top: 10px; inset-inline-start: 10px; z-index: 9999;
	clip: auto !important; clip-path: none !important; width: auto; height: auto; margin: 0;
	background: var(--color-accent); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.ahulearn-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
.ahulearn-section { padding: var(--space-24) 0; }
.ahulearn-grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) {
	.ahulearn-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.ahulearn-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.ahulearn-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.glass-card {
	background: linear-gradient(180deg, rgba(0,86,210,.05), rgba(0,86,210,.015));
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(12px);
	padding: var(--space-6);
}

.text-gradient {
	background: linear-gradient(90deg, var(--color-accent-light), var(--color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 600;
	border: 1px solid transparent;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
	overflow: hidden;
	white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn--primary {
	background: var(--color-accent);
	color: #fff;
	box-shadow: var(--shadow-glow);
}
.btn--primary:hover { background: var(--color-accent-light); transform: translateY(-2px); }
.btn--ghost {
	background: transparent;
	color: var(--color-text-primary);
	border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-border-accent); background: var(--color-bg-secondary); }
.btn--large { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn--small { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--block { width: 100%; }

.btn::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 0; height: 0;
	background: rgba(255,255,255,.25);
	border-radius: var(--radius-full);
	transform: translate(-50%, -50%);
	transition: width .5s ease, height .5s ease, opacity .6s ease;
	opacity: 0;
}
.btn.is-rippling::after { width: 300px; height: 300px; opacity: 1; transition: width 0s, height 0s, opacity 0s; }

/* ==========================================================================
   Accordion — shared component (FAQ on home/landing pages, curriculum +
   instructor/reviews tabs on course-single). Lives here, not in a
   page-specific stylesheet, so it always renders correctly regardless of
   which page includes it.
   ========================================================================== */
.ahulearn-accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden; background: var(--color-bg-secondary); }
.ahulearn-accordion-header {
	appearance: none; -webkit-appearance: none;
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	background: var(--color-bg-secondary); border: none; padding: var(--space-4) var(--space-6); color: var(--color-text-primary);
	font-family: inherit; font-size: var(--text-base); font-weight: 600; text-align: start; line-height: var(--leading-normal);
	cursor: pointer; transition: background var(--transition-fast);
}
.ahulearn-accordion-header:hover { background: var(--color-bg-tertiary); }
.ahulearn-accordion-header:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ahulearn-accordion-header .chevron { flex-shrink: 0; margin-inline-start: var(--space-4); color: var(--color-text-secondary); transition: transform var(--transition-fast); }
.ahulearn-accordion-item.is-open .chevron { transform: rotate(180deg); }
.ahulearn-accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); background: var(--color-bg-primary); }
.ahulearn-accordion-item.is-open .ahulearn-accordion-body { max-height: 1000px; }
.ahulearn-lesson-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-loose); }

/* ==========================================================================
   Promo bar (discount countdown strip above the main header)
   ========================================================================== */
.ahulearn-promo-bar { background: var(--color-promo); color: #fff; }
.ahulearn-promo-bar__inner {
	display: flex; align-items: center; justify-content: center; gap: var(--space-4);
	flex-wrap: wrap; padding: var(--space-2) var(--space-6); text-align: center;
	font-size: var(--text-sm); font-weight: 600;
}
.ahulearn-promo-bar .ahulearn-countdown { gap: var(--space-2); }
.ahulearn-promo-bar .ahulearn-countdown__unit strong,
.ahulearn-promo-bar .ahulearn-countdown__unit span { color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.ahulearn-header {
	position: sticky; top: 0; z-index: 500;
	background: rgba(255, 255, 255, .85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border);
	transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.ahulearn-header.is-scrolled {
	background: var(--color-bg-primary);
	box-shadow: var(--shadow-sm);
}
.ahulearn-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-4) var(--space-6);
	gap: var(--space-6);
}
.ahulearn-logo__text { font-size: var(--text-xl); font-weight: 800; }
.ahulearn-nav__list { display: none; align-items: center; gap: var(--space-6); }
@media (min-width: 1024px) { .ahulearn-nav__list { display: flex; } }
.ahulearn-nav__list a { font-size: var(--text-sm); color: var(--color-text-secondary); transition: color var(--transition-fast); display: flex; align-items: center; }
.ahulearn-nav__list a:hover { color: var(--color-text-primary); }
.ahulearn-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.ahulearn-header__cart { position: relative; color: var(--color-text-primary); display: flex; align-items: center; }
.ahulearn-header__cart-count {
	position: absolute; top: -8px; inset-inline-end: -10px;
	background: var(--color-accent); color: #fff; font-size: 10px;
	border-radius: var(--radius-full); padding: 0 5px;
}
.ahulearn-nav-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; }
.ahulearn-nav-toggle span { width: 22px; height: 2px; background: var(--color-text-primary); border-radius: 2px; }
@media (min-width: 1024px) { .ahulearn-nav-toggle { display: none; } }

.ahulearn-nav.is-open .ahulearn-nav__list {
	display: flex; flex-direction: column; position: absolute; top: 100%; inset-inline-start: 0; inset-inline-end: 0;
	background: var(--color-bg-secondary); padding: var(--space-6); border-bottom: 1px solid var(--color-border);
}

/* Categories megamenu trigger + dropdown */
.ahulearn-categories-trigger-wrap { position: relative; display: none; }
@media (min-width: 1024px) { .ahulearn-categories-trigger-wrap { display: block; } }
.ahulearn-categories-trigger {
	display: flex; align-items: center; gap: var(--space-2);
	background: none; border: none; color: var(--color-text-primary);
	font-size: var(--text-sm); font-weight: 600; padding: var(--space-2) 0;
}
.ahulearn-categories-trigger .chevron { font-size: 10px; transition: transform var(--transition-fast); }
.ahulearn-categories-trigger-wrap.is-open .chevron,
.ahulearn-categories-trigger-wrap:hover .chevron { transform: rotate(180deg); }
.ahulearn-categories-dropdown {
	display: none; position: absolute; top: 100%; inset-inline-start: 0; z-index: 600;
	min-width: 220px; background: var(--color-bg-primary); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2);
}
.ahulearn-categories-trigger-wrap:hover .ahulearn-categories-dropdown,
.ahulearn-categories-trigger-wrap.is-open .ahulearn-categories-dropdown { display: block; }
.ahulearn-categories-dropdown__list { display: flex; flex-direction: column; }
.ahulearn-categories-dropdown__list a {
	padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
	font-size: var(--text-sm); color: var(--color-text-secondary);
}
.ahulearn-categories-dropdown__list a:hover { background: var(--color-bg-secondary); color: var(--color-accent-light); }

/* Header search box */
.ahulearn-header__search { display: none; align-items: center; position: relative; flex: 1; max-width: 280px; }
@media (min-width: 1024px) { .ahulearn-header__search { display: flex; } }
.ahulearn-header__search-input {
	width: 100%; padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
	border: 1px solid var(--color-border); border-radius: var(--radius-full);
	background: var(--color-bg-secondary); font-family: inherit; font-size: var(--text-sm);
}
.ahulearn-header__search-btn {
	position: absolute; inset-inline-end: var(--space-2); top: 50%; transform: translateY(-50%);
	background: none; border: none; color: var(--color-text-muted); display: flex; align-items: center;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ahulearn-hero {
	position: relative;
	padding: var(--space-32) 0 var(--space-24);
	overflow: hidden;
	text-align: center;
}
.ahulearn-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 0%, var(--color-accent-glow), transparent 60%);
	animation: heroGlow 8s ease-in-out infinite;
	pointer-events: none;
}
.ahulearn-hero__title { font-size: var(--text-6xl); max-width: 800px; margin: 0 auto var(--space-6); }
.ahulearn-hero__subtitle { font-size: var(--text-lg); max-width: 640px; margin: 0 auto var(--space-8); }
.ahulearn-hero__ctas { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-12); }
.ahulearn-hero__stats { display: flex; justify-content: center; gap: var(--space-12); flex-wrap: wrap; }
.ahulearn-hero__stat { text-align: center; }
.ahulearn-hero__stat strong { display: block; font-size: var(--text-3xl); }

.ahulearn-trustbar { padding: var(--space-8) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.ahulearn-trustbar__inner { display: flex; justify-content: center; align-items: center; gap: var(--space-12); flex-wrap: wrap; opacity: .7; }

/* ==========================================================================
   Home intro — below-header video slider + about copy
   ========================================================================== */
.ahulearn-home-intro { padding: var(--space-12) 0; background: var(--color-bg-secondary); }
.ahulearn-home-intro__layout { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 768px) { .ahulearn-home-intro__layout { grid-template-columns: 1fr 1fr; } }
.ahulearn-home-intro__about h2 { margin-top: 0; }
.ahulearn-home-intro__video { order: -1; }
@media (min-width: 768px) { .ahulearn-home-intro__video { order: 0; } }

.ahulearn-video-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-tertiary); }
.ahulearn-video-slider__track { position: relative; aspect-ratio: 16/9; }
.ahulearn-video-slider__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--transition-normal); }
.ahulearn-video-slider__slide.is-active { opacity: 1; visibility: visible; }
.ahulearn-video-slider__slide iframe,
.ahulearn-video-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ahulearn-video-slider__caption {
	position: absolute; bottom: 0; inset-inline: 0; margin: 0; padding: var(--space-3) var(--space-4);
	background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: var(--text-sm);
}
.ahulearn-video-slider__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 36px; height: 36px; border-radius: var(--radius-full); border: none;
	background: rgba(255,255,255,.85); color: var(--color-text-primary); font-size: var(--text-xl);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ahulearn-video-slider__nav--prev { inset-inline-start: var(--space-3); }
.ahulearn-video-slider__nav--next { inset-inline-end: var(--space-3); }

/* Course "brand logos" row under the three-step learning path */
.ahulearn-course-logos {
	display: flex; align-items: center; justify-content: center; gap: var(--space-6);
	flex-wrap: wrap; margin-top: var(--space-12);
}
.ahulearn-course-logos__item {
	display: block; width: 64px; height: 64px; border-radius: var(--radius-full);
	overflow: hidden; filter: grayscale(1); opacity: .7;
	transition: filter var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}
.ahulearn-course-logos__item:hover { filter: none; opacity: 1; transform: translateY(-3px); }
.ahulearn-course-logos__item img { width: 100%; height: 100%; object-fit: cover; }

/* Learning-path "choose your level/goal" cards */
.ahulearn-path-cards { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ahulearn-path-cards { grid-template-columns: repeat(3, 1fr); } }
.ahulearn-path-card { text-align: center; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.ahulearn-path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ahulearn-path-card__icon { font-size: var(--text-4xl); display: block; margin-bottom: var(--space-3); }

/* ==========================================================================
   Course card
   ========================================================================== */
.ahulearn-course-card {
	position: relative;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.ahulearn-course-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-border-accent);
}
.ahulearn-course-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 3/2; }
.ahulearn-course-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.ahulearn-course-card:hover .ahulearn-course-card__media img { transform: scale(1.08); }
.ahulearn-course-card__badges { position: absolute; top: var(--space-3); inset-inline-start: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ahulearn-badge { font-size: var(--text-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--radius-full); color: #fff; }
.ahulearn-badge--sale { background: var(--color-error); }
.ahulearn-badge--new { background: var(--color-success); }
.ahulearn-badge--popular { background: var(--color-accent); }
.ahulearn-badge--free { background: var(--color-warning); color: #1F2937; }

.ahulearn-course-card__body { padding: var(--space-6); }
.ahulearn-course-card__level { font-size: var(--text-xs); color: var(--color-accent-light); text-transform: uppercase; letter-spacing: .04em; }
.ahulearn-course-card__title { font-size: var(--text-lg); margin: var(--space-2) 0; }
.ahulearn-course-card__title a:hover { color: var(--color-accent-light); }
.ahulearn-course-card__instructor { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.ahulearn-course-card__meta { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }

/* Wishlist heart button — sits on top of the card's media corner */
.ahulearn-wishlist-btn {
	position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); z-index: 5;
	width: 34px; height: 34px; border-radius: var(--radius-full);
	background: rgba(10,14,26,.55); backdrop-filter: blur(4px);
	border: 1px solid var(--color-border); color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: all var(--transition-fast); font-size: var(--text-lg); line-height: 1;
}
.ahulearn-wishlist-btn:hover { background: rgba(10,14,26,.8); border-color: var(--color-error); }
.ahulearn-wishlist-btn.is-active { color: var(--color-error); }
.ahulearn-wishlist-btn.is-active .ahulearn-wishlist-btn__icon::before { content: '\2665'; }
.ahulearn-wishlist-btn__icon { font-style: normal; }
.ahulearn-wishlist-btn.is-loading { opacity: .6; pointer-events: none; }

/* Instructor profile hero */
.ahulearn-instructor-hero { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 768px) { .ahulearn-instructor-hero { grid-template-columns: 240px 1fr; } }
.ahulearn-instructor-hero__photo img { width: 200px; height: 200px; border-radius: var(--radius-full); object-fit: cover; margin: 0 auto; display: block; }
.ahulearn-instructor-hero__title { color: var(--color-accent-light); font-weight: 600; margin-top: var(--space-1); }
.ahulearn-instructor-hero__socials { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.ahulearn-instructor-hero__socials a { background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-primary); }
.ahulearn-instructor-hero__socials a:hover { border-color: var(--color-accent); color: var(--color-accent-light); }
.ahulearn-stars { color: var(--color-warning); font-size: var(--text-sm); }
.ahulearn-star--empty { color: var(--color-text-muted); }
.ahulearn-course-card__rating { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.ahulearn-course-card__rating-count { color: var(--color-text-muted); font-size: var(--text-xs); }
.ahulearn-course-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ahulearn-price { font-weight: 700; }
.ahulearn-price--old { text-decoration: line-through; color: var(--color-text-muted); font-weight: 400; font-size: var(--text-sm); margin-inline-end: var(--space-2); }
.ahulearn-price--new { color: var(--color-success); }
.ahulearn-price--free { color: var(--color-success); }

/* ==========================================================================
   Stat cards
   ========================================================================== */
.ahulearn-stat-card { text-align: center; padding: var(--space-8); }
.ahulearn-stat-card__number {
	font-size: var(--text-5xl); font-weight: 800;
	background: linear-gradient(90deg, var(--color-accent-light), var(--color-accent));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ahulearn-stat-card__label { color: var(--color-text-secondary); margin-top: var(--space-2); }

/* ==========================================================================
   Skeleton loaders
   ========================================================================== */
.ahulearn-skeleton {
	background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, rgba(255,255,255,.06) 37%, var(--color-bg-tertiary) 63%);
	background-size: 400% 100%;
	animation: skeleton 1.4s ease infinite;
	border-radius: var(--radius-md);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.ahulearn-form-group { margin-bottom: var(--space-6); }
.ahulearn-form-group label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.ahulearn-input, .ahulearn-select, .ahulearn-textarea {
	width: 100%;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	color: var(--color-text-primary);
	font-family: var(--font-primary);
	font-size: var(--text-base);
	transition: border-color var(--transition-fast);
}
.ahulearn-input:focus, .ahulearn-select:focus, .ahulearn-textarea:focus {
	outline: none; border-color: var(--color-accent);
}

/* ==========================================================================
   Progress ring
   ========================================================================== */
.ahulearn-progress-ring { display: inline-block; position: relative; }
.ahulearn-progress-ring circle.bg { stroke: var(--color-bg-tertiary); fill: none; }
.ahulearn-progress-ring circle.fg { stroke: var(--color-accent); fill: none; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.ahulearn-progress-ring__label {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	font-weight: 700; font-size: var(--text-sm);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ahulearn-footer { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); padding-top: var(--space-16); }
.ahulearn-footer__grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; padding-bottom: var(--space-12); }
@media (min-width: 768px) { .ahulearn-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.ahulearn-footer__col h4 { font-size: var(--text-base); margin-bottom: var(--space-4); }
.ahulearn-footer__list li { margin-bottom: var(--space-2); }
.ahulearn-footer__list a { color: var(--color-text-secondary); font-size: var(--text-sm); }
.ahulearn-footer__list a:hover { color: var(--color-accent-light); }
.ahulearn-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.ahulearn-footer__social a {
	width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--color-border); border-radius: var(--radius-full);
}
.ahulearn-footer__bottom { border-top: 1px solid var(--color-border); padding: var(--space-6) 0; }
.ahulearn-footer__bottom .ahulearn-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.ahulearn-footer__legal { display: flex; gap: var(--space-4); }
.ahulearn-footer__legal a { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ==========================================================================
   Blog grid / cards
   ========================================================================== */
.ahulearn-blog-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ahulearn-blog-grid { grid-template-columns: repeat(2, 1fr); } }
.ahulearn-post-card__thumb img { border-radius: var(--radius-md); margin-bottom: var(--space-4); aspect-ratio: 16/9; object-fit: cover; }
.ahulearn-post-card__title a:hover { color: var(--color-accent-light); }
.ahulearn-post-card__meta { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }

/* ==========================================================================
   [dir="rtl"] — primary direction rules
   ========================================================================== */
[dir="rtl"] body { direction: rtl; text-align: right; }
[dir="rtl"] .ahulearn-course-card__badges { inset-inline-start: var(--space-3); inset-inline-end: auto; }
[dir="rtl"] .ahulearn-header__cart-count { inset-inline-end: -10px; inset-inline-start: auto; }
[dir="rtl"] .ahulearn-icon-arrow { transform: scaleX(-1); }
[dir="rtl"] .ahulearn-price--old { margin-inline-end: 0; margin-inline-start: var(--space-2); }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ==========================================================================
   Mobile — lightweight, condensed layout, same white/light-blue palette
   ========================================================================== */
@media (max-width: 767px) {
	.ahulearn-section { padding: var(--space-12) 0; }
	.ahulearn-hero { padding: var(--space-16) 0 var(--space-12); }
	.ahulearn-hero__title { font-size: var(--text-4xl); }
	.ahulearn-hero__subtitle { font-size: var(--text-base); }
	.ahulearn-hero__stats { gap: var(--space-6); }
	.ahulearn-hero__stat strong { font-size: var(--text-2xl); }

	.ahulearn-promo-bar__inner { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
	.ahulearn-promo-bar .ahulearn-countdown { gap: var(--space-1); }

	.ahulearn-header__inner { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
	.ahulearn-header__search { display: none; }

	.ahulearn-home-intro { padding: var(--space-8) 0; }

	.ahulearn-course-logos { gap: var(--space-4); overflow-x: auto; justify-content: flex-start; padding-bottom: var(--space-2); flex-wrap: nowrap; }
	.ahulearn-course-logos__item { flex-shrink: 0; width: 52px; height: 52px; }

	.ahulearn-filter-bar { flex-direction: column; }
	.ahulearn-filter-bar select,
	.ahulearn-filter-bar input { width: 100%; }
}