/* ── FONTS ──────────────────────────────────────────────
   Display: Oswald (Google Fonts) — condensed sans-serif with full Cyrillic +
   Latin coverage so RU and UZ-Latin look identical. Bebas Neue only covers
   Latin, which is why language switching looked uneven before.
   Body:    Manrope.
   Mono:    JetBrains Mono.
*/
@font-face {
  font-family: 'Zuume';
  src: local('Zuume'), local('Zuume Bold'), local('Oswald');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-zuume: 'Zuume', 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-manrope: 'Manrope', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html, body { font-family: var(--font-manrope); -webkit-font-smoothing: antialiased; }
.font-zuume { font-family: var(--font-zuume); letter-spacing: 0.005em; }
.font-manrope { font-family: var(--font-manrope); }
.font-mono { font-family: var(--font-mono); }

/* ── STEP TRANSITIONS ───────────────────────────────────
   !important guards against Tailwind preflight / utility classes that
   could otherwise force a step to be visible if their rule wins by source
   order. Without this, when style.css doesn't apply for any reason
   (stale cache, network blip, CDN ordering) all screens render at once. */
.step { display: none !important; }
.step.active {
  display: block !important;
  animation: stepIn 0.4s ease-out forwards;
}
[hidden] { display: none !important; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(15px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── LANGUAGE SWITCHER (top-right pill) ───────────────── */
.lang-switch {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgb(229 231 235);
  flex-shrink: 0;
}
.lang-switch button {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  background: transparent;
  color: rgb(107 114 128);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 30px;
  letter-spacing: 0.05em;
}
.lang-switch button.active { background: var(--brand); color: #fff; }
.lang-switch button:not(.active):hover { background: var(--brand-soft); color: var(--brand-dark); }

/* ── BANNER SLIDER (16:9, admin-managed) ──────────────── */
.banner-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgb(243 244 246);
  background: linear-gradient(180deg, #fafbfc 0%, #f1f3f6 100%);
  box-shadow: 0 8px 24px -10px rgba(11, 18, 32, 0.15);
}
.banner-slider[hidden] { display: none; }
.banner-track {
  position: absolute; inset: 0;
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.banner-track img {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.banner-dots {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  padding: 4px 8px;
  background: rgba(11, 18, 32, 0.4);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}
.banner-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: all 0.25s ease;
  cursor: pointer;
}
.banner-dots span.on {
  background: #fff;
  width: 18px;
  border-radius: 3px;
}

/* prev/next arrows — only visible while hovering the slider on desktop,
   always visible on touch devices (so mobile users discover them). */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  z-index: 2;
}
.banner-arrow:hover { background: rgba(11, 18, 32, 0.65); }
.banner-arrow--prev { left: 8px; }
.banner-arrow--next { right: 8px; }
.banner-arrow[hidden] { display: none; }
.banner-slider:hover .banner-arrow { opacity: 1; }
@media (hover: none) {
  /* touch devices have no hover — keep arrows visible at lower opacity */
  .banner-arrow { opacity: 0.85; }
}

/* ── BRAND COLOR PALETTE ────────────────────────────────
   Override Tailwind blue-* utilities so all primary CTAs / accents use our
   brand cyan #1ca5d1 from the original prototype, without touching markup. */
:root {
  --brand: #1ca5d1;
  --brand-dark: #0d8db5;
  --brand-darker: #0a6e8c;
  --brand-soft: #e6f4fa;
}

.bg-blue-600          { background-color: var(--brand) !important; }
.hover\:bg-blue-700:hover { background-color: var(--brand-dark) !important; }
.bg-blue-50           { background-color: var(--brand-soft) !important; }
.hover\:bg-blue-50:hover { background-color: var(--brand-soft) !important; }

.text-blue-600        { color: var(--brand) !important; }
.text-blue-700        { color: var(--brand-dark) !important; }
.text-blue-800        { color: var(--brand-darker) !important; }
.group:hover .group-hover\:text-blue-600 { color: var(--brand) !important; }
.group:hover .group-hover\:text-blue-700 { color: var(--brand-dark) !important; }

.border-blue-100      { border-color: var(--brand-soft) !important; }
.border-blue-600      { border-color: var(--brand) !important; }
.hover\:border-blue-600:hover { border-color: var(--brand) !important; }

.focus\:border-blue-500:focus { border-color: var(--brand) !important; }
.focus\:ring-blue-200:focus   { --tw-ring-color: rgba(28, 165, 209, 0.30) !important; }
.shadow-blue-200      { --tw-shadow-color: rgba(28, 165, 209, 0.30); --tw-shadow: var(--tw-shadow-colored); }

/* ── iOS Safari focus-zoom fix ──────────────────────────
   Safari on iOS zooms into the page when a focused <input>/<textarea>/<select>
   has a font-size smaller than 16px. Pin every form control to ≥16px so the
   viewport stays put. !important is intentional — overrides Tailwind text-xs/sm
   utilities we use on labels-adjacent inputs. */
input, textarea, select {
  font-size: 16px !important;
}

/* ── OTP cell filled state ─────────────────────────────── */
#otp input.filled {
  background: rgb(239 246 255);   /* bg-blue-50 */
  border-color: rgb(59 130 246);  /* border-blue-500 */
}

/* ── CITY CARD (region step) ──────────────────────────── */
.city-card {
  background: var(--brand-soft);
  border: 2px solid var(--brand-soft);
  color: rgb(55 65 81);          /* gray-700 */
  cursor: pointer;
}
.city-card:hover {
  border-color: var(--brand);
  background: #d8edf6;
}
.city-card:hover span { color: var(--brand-dark); }
.city-card i { color: rgb(156 163 175); }   /* gray-400 */
.city-card:hover i { color: var(--brand); }
/* Primary choice (Ташкент): solid brand fill to stand out from the secondary */
.city-card--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.city-card--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.city-card--primary span,
.city-card--primary:hover span { color: #fff; }
.city-card--primary i,
.city-card--primary:hover i { color: #fff; }

/* ── COURSE CARD (rendered from API) ───────────────────── */
.course-card {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--brand-soft);
  border-radius: 0.75rem;
  background: var(--brand-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  transition: all 0.15s;
}
.course-card:hover {
  border-color: var(--brand);
  background: #d8edf6;
}
.course-card__badge {
  width: 36px; height: 36px;
  margin-right: 0.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-zuume);
  font-size: 1rem;
  color: var(--brand-dark);
  transition: all 0.15s;
  text-transform: uppercase;
}
.course-card:hover .course-card__badge {
  background: var(--brand);
  color: #fff;
}
.course-card__title {
  font-family: var(--font-zuume);
  font-size: 1.125rem;
  text-transform: uppercase;
  color: rgb(17 24 39);
  margin: 0;
  letter-spacing: 1px;
}
.course-card:hover .course-card__title { color: var(--brand-dark); }
.course-card__text {
  font-size: 0.75rem;
  color: rgb(107 114 128);
  margin: 0;
  line-height: 1.2;
}

/* ── PROGRESS COMPLETED LINE COLOR ─────────────────────── */
.pb-line.on { background: rgb(37 99 235); }

/* ════════════════════════════════════════════════════════
   PER-COURSE THEME — body[data-theme=…] swaps the accent
   palette + reveals the matching decoration set.
   ──────────────────────────────────────────────────────── */
body[data-theme="ielts"] {
  --brand: #1ca5d1;
  --brand-dark: #0d8db5;
  --brand-darker: #0a6e8c;
  --brand-soft: #e6f4fa;
  background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 100%);
}
body[data-theme="general"] {
  --brand: #f59e0b;
  --brand-dark: #d97706;
  --brand-darker: #b45309;
  --brand-soft: #fef3c7;
  background: linear-gradient(180deg, #fffbeb 0%, #fefce8 100%);
}
body[data-theme="kids"] {
  --brand: #ec4899;
  --brand-dark: #db2777;
  --brand-darker: #be185d;
  --brand-soft: #fce7f3;
  background: linear-gradient(180deg, #fdf2f8 0%, #fff7ed 100%);
}
body[data-theme="speaking"] {
  --brand: #8b5cf6;
  --brand-dark: #7c3aed;
  --brand-darker: #6d28d9;
  --brand-soft: #ede9fe;
  background: linear-gradient(180deg, #faf5ff 0%, #f5f3ff 100%);
}

/* ── DECORATION LAYER ──────────────────────────────────
   Sits behind everything (z-index 0). Card has its own
   stacking context (z-index 1) by virtue of border-radius
   + box-shadow on a `position: relative` wrapper. */
.bg-decor {
  /* Classic design: background decorations disabled. Re-enable together
     with THEME_ENABLED in app.js by removing this `display: none`. */
  display: none;
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
body > *:not(.bg-decor) { position: relative; z-index: 1; }

.bg-decor__set { display: none; position: absolute; inset: 0; }
body[data-theme="ielts"]    .bg-decor__set--ielts,
body[data-theme="general"]  .bg-decor__set--general,
body[data-theme="kids"]     .bg-decor__set--kids,
body[data-theme="speaking"] .bg-decor__set--speaking,
.bg-decor__set--default { display: block; }
/* Hide the always-on default decor when a real theme is active */
body[data-theme]:not([data-theme="default"]) .bg-decor__set--default { display: none; }

.bd-shape {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0.55;
  filter: drop-shadow(0 8px 14px rgba(11,18,32,0.10));
  animation: bdFloat 8s ease-in-out infinite;
}

/* Position helpers — corners + side-mid */
.bd--tl { top: 6%;  left: 4%;  }
.bd--tr { top: 8%;  right: 6%; animation-delay: -2s; }
.bd--bl { bottom: 8%; left: 6%; animation-delay: -4s; }
.bd--br { bottom: 6%; right: 5%; animation-delay: -6s; }
.bd--ml { top: 50%; left: 3%;   transform: translateY(-50%); animation-delay: -3s; }
.bd--mr { top: 45%; right: 4%;  transform: translateY(-50%); animation-delay: -5s; }

@keyframes bdFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}
.bd--ml { animation-name: bdFloatMid; }
.bd--mr { animation-name: bdFloatMid; }
@keyframes bdFloatMid {
  0%, 100% { transform: translateY(-50%) rotate(0); }
  50%      { transform: translateY(calc(-50% - 12px)) rotate(-3deg); }
}

/* ── Shape primitives (pure CSS, no images) ─────────── */
/* IELTS — open book */
.bd-book {
  width: 80px; height: 56px;
  background:
    linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: 4px 4px 8px 8px;
  position: relative;
}
.bd-book::before, .bd-book::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: 1px;
  background: rgba(255,255,255,0.7);
}
.bd-book::before { left: 50%; }
.bd-book::after  { left: 25%; box-shadow: 30px 0 0 rgba(255,255,255,0.4); }
/* Mortar-board cap */
.bd-cap {
  width: 70px; height: 22px;
  background: linear-gradient(180deg, #2a323f, #0b1220);
  transform: skewX(-15deg);
  border-radius: 3px;
}
.bd-cap::before {
  content: ""; position: absolute; bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 12px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: 0 0 4px 4px;
}
/* Score badge ("9.0" / "IELTS") */
.bd-badge {
  padding: 8px 14px;
  background: #fff;
  border: 2px solid var(--brand);
  border-radius: 999px;
  font-family: var(--font-zuume);
  font-size: 22px;
  color: var(--brand-dark);
  letter-spacing: 0.05em;
}

/* KIDS — balloon + star + pencil */
.bd-balloon {
  width: 60px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  position: relative;
}
.bd-balloon::after {
  content: ""; position: absolute;
  bottom: -22px; left: 50%; width: 1px; height: 22px;
  background: rgba(11,18,32,0.4);
}
.bd-balloon--pink   { background: linear-gradient(160deg, #f472b6, #db2777); }
.bd-balloon--yellow { background: linear-gradient(160deg, #fcd34d, #f59e0b); }
.bd-balloon--cyan   { background: linear-gradient(160deg, #67e8f9, #06b6d4); }
.bd-star {
  width: 0; height: 0;
  color: #fbbf24;
  font-size: 56px;
  filter: drop-shadow(0 8px 14px rgba(11,18,32,0.10));
}
.bd-star::before {
  content: "★"; position: absolute; top: 0; left: 0;
  line-height: 1;
}
.bd-star--sm::before { font-size: 36px; color: #ec4899; }
.bd-pencil {
  width: 14px; height: 90px;
  background: linear-gradient(180deg, #fbbf24 0%, #fbbf24 70%, #ec4899 70%, #ec4899 100%);
  border-radius: 4px 4px 0 0;
  transform: rotate(20deg);
}
.bd-pencil::before {
  content: ""; position: absolute; top: -10px; left: -2px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 14px solid #f59e0b;
}

/* SPEAKING — mic + sound waves + bubble */
.bd-mic {
  width: 36px; height: 56px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: 18px;
  position: relative;
}
.bd-mic::after {
  content: ""; position: absolute;
  bottom: -18px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 14px; border: 3px solid var(--brand-dark);
  border-top: none; border-radius: 0 0 18px 18px;
}
.bd-wave {
  width: 60px; height: 60px;
  border-right: 4px solid var(--brand);
  border-top: 4px solid var(--brand);
  border-radius: 0 50% 0 0;
  opacity: 0.8;
}
.bd-wave--sm { width: 36px; height: 36px; border-width: 3px; }
.bd-bubble {
  width: 70px; height: 50px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: 20px 20px 20px 4px;
  position: relative;
}
.bd-bubble--lg { width: 90px; height: 64px; }

/* GENERAL — globe */
.bd-globe {
  width: 64px; height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fef3c7 0%, var(--brand) 70%);
  position: relative;
  box-shadow: inset -6px -8px 16px rgba(0,0,0,0.18);
}
.bd-globe::before, .bd-globe::after {
  content: ""; position: absolute; inset: 8px;
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 50%;
}
.bd-globe::after { inset: 14px 4px; }
.bd-globe--sm { width: 42px; height: 42px; }

/* DEFAULT — tiny dots */
.bd-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.35;
}

/* Disable decorations / animation for users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .bd-shape { animation: none; }
}
@media (max-width: 420px) {
  /* Mobile: subtler, fewer decoration calories */
  .bd-shape { opacity: 0.32; transform: scale(0.7); }
  .bd--ml, .bd--mr { display: none; }
}

/* ── SURVEY mini-progress (dots inside the survey card) ── */
#survey-dots span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgb(229 231 235);
  transition: background 0.3s;
}
#survey-dots span.on { background: var(--brand); }

/* ── RESPONSIVE ─────────────────────────────────────────
   With 6 OTP cells we need slightly tighter sizing on small phones to keep
   the row inside the card. flex-1 on each cell stretches them to fill the
   available width evenly. */
@media (max-width: 420px) {
  #otp { gap: 4px; }
  #otp input { width: auto; flex: 1; min-width: 0; height: 3.25rem; font-size: 1.5rem; }
}