/* ============================================================
   REDESIGN OVERRIDES — rich-look UI pass (Tailwind CDN + Flowbite +
   Lucide layered onto the existing HTML/JS, no framework rewrite).

   Load order on every page: Tailwind CDN → style.css → THIS FILE.
   Tailwind sits first so its low-specificity preflight resets never win
   a tie against style.css's own base rules on markup this pass hasn't
   touched. This file sits LAST so it reliably wins cascade ties against
   style.css's original component rules (same selectors, same
   specificity — last one in wins) wherever this pass deliberately
   restyles an existing shared component (header, footer, modals, FAQ)
   instead of replacing it outright with fresh Tailwind-only markup.
   ============================================================ */

/* ---- Sitewide type — every existing rule already reads these two custom
   properties (var(--font-body) / var(--font-display)) rather than a
   hardcoded font name, so overriding them here updates typography
   everywhere at once, including pages/sections this pass hasn't
   individually redesigned yet. --font-display was already 'Space
   Grotesk' — only the body font actually changes, to DM Sans as
   requested. */
:root {
  --font-body: 'DM Sans', sans-serif;
  /* Was pure #FFFFFF — every existing section already alternates
     background:var(--paper-soft) with plain white via inline styles, but
     that made no visible difference since both were white. A soft slate
     tint here is what actually creates the alternating white/light-band
     rhythm across every page that uses this pattern, without touching
     each section individually. */
  --paper-soft: #f8fafc;
}

/* ---- Hero background — the same 3 brand/logo colors (teal, violet,
   amber) as a smooth, light left-to-right mix instead of the earlier
   radial-blob wash or moving particle animation — flat, still, and
   readable, per request. This exact gradient is also the site's
   "trademark" gradient — the same left-to-right teal->violet->amber mix
   is reused (at full saturation) on primary buttons and popup accents
   below, so it reads as one consistent brand color everywhere. */
.hero.hero-light {
  background: linear-gradient(90deg, rgba(0,194,168,0.14) 0%, rgba(139,92,246,0.11) 50%, rgba(242,169,59,0.14) 100%), #fbfaf8;
}
:root {
  --brand-gradient: linear-gradient(90deg, #00c2a8 0%, #8b5cf6 50%, #f2a93b 100%);
}
/* Hero subtext emphasis — the phrases that matter (daily, 7am-11pm,
   what industry uses) get the trademark gradient as text color instead
   of a flat bold, so they read sharper against the plain slate body copy. */
.hero-highlight {
  font-weight: 700;
  color: transparent;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}
/* ---- Every inner-page intro bar (.page-banner) gets the same rich dark
   gradient + brand-color glow wash by default — pages that define their
   own -rich variant (track-banner-rich, booking-banner-rich, dashboard's
   own header bar, etc.) still win via source order below, since this is
   only the shared fallback for banners with no page-specific override
   (My Profile, Products). Keeps every intro bar consistent sitewide. */
.page-banner {
  background: linear-gradient(120deg, #0B1320 0%, #131c30 55%, #1a1030 100%);
  position: relative;
  overflow: hidden;
}
.page-banner::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 15% 0%, rgba(0,194,168,0.16), transparent 60%),
              radial-gradient(55% 80% at 100% 100%, rgba(139,92,246,0.18), transparent 60%),
              radial-gradient(40% 70% at 80% 0%, rgba(242,169,59,0.12), transparent 65%);
}
.page-banner .container, .page-banner .container-wide { position: relative; z-index: 1; }
.page-banner h1, .page-banner p { color: #fff; }
.page-banner p { color: rgba(255,255,255,0.65); }

.hero-headline-line { display: block; }

.hero-stats-row strong {
  min-width: 1.8em;
  display: inline-block;
  line-height: 1.35;
  padding-top: 3px;
}
/* Reveal animation for the one stat that isn't a rolling number (the
   booking-hours time range) — plays alongside the count-up numbers so
   the whole row feels like it animates in together. */
.hero-stat-reveal { animation: hero-stat-pop-in 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes hero-stat-pop-in {
  from { opacity: 0; transform: scale(0.7) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
/* At narrow widths, flex-wrap on 4 items + 3 divider pipes wraps
   unevenly (one stat per line here, two there, with a divider stranded
   on its own) since "Workshops Completed" alone is wide enough to force
   an early wrap. A plain 2-column grid with the dividers hidden lays out
   consistently regardless of label length. */
@media (max-width: 640px) {
  /* !important: fighting Tailwind's own .flex utility class (same
     source element, same specificity) — the CDN build's JIT compiler
     injects/updates its stylesheet at runtime, which can land after this
     one regardless of the two <link>/<script> tags' order in the HTML,
     so a plain override isn't reliably guaranteed to win. */
  .hero-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
    column-gap: 12px;
  }
  .hero-stats-row > span { display: none; }
}

/* ---- Header (white/light redesign) ---- */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #eef0f4;
}
/* #site-header starts as an empty <div>, filled in only once
   partials.js's fetch('partials/header.html') resolves and swaps it in
   via outerHTML — on a cold load that's a visible beat of blank space
   at the very top of the page before the real header "pops in". A
   placeholder matching the real header's own height+background removes
   that flash; :empty stops matching (and this rule stops applying) the
   moment the real content replaces the div, so it never needs cleanup. */
#site-header:empty {
  display: block; height: 76px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #eef0f4;
}
.site-header.scrolled { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); }
.main-nav a { color: #1e2430; font-size: 16px; font-weight: 600; }
.main-nav a:hover { color: #00c2a8; }
.main-nav a.nav-highlight { color: #8b5cf6; animation: none; }
.main-nav a.nav-highlight:hover { color: #00c2a8; }
.nav-toggle { color: #0b1320; }
.site-header .logo { margin-left: 34px; }
.site-header .logo-img { height: 56px; }
.site-header.scrolled .logo-img { height: 40px; }
@media (max-width: 640px) {
  .site-header .logo { margin-left: 14px; }
  .site-header .logo-img { height: 46px; }
}
body.nav-open #navToggle { background: #0b1320; }

/* "Go to My Journey" — the one CTA that means the exact same thing
   everywhere it shows up (track detail pages, homepage cards); gets its
   own class using the trademark gradient instead of inheriting whatever
   flat color (amber/teal) the surrounding button happened to have, so
   it reads as the same rich, deliberate action sitewide. */
.btn-journey-cta {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px -10px rgba(139,92,246,0.5);
}
.btn-journey-cta:hover:not(:disabled) {
  box-shadow: 0 14px 30px -10px rgba(139,92,246,0.6);
}

.academy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 24px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 194, 168, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.academy-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 26px rgba(139, 92, 246, 0.3);
  color: #fff;
}

/* Mobile full-screen nav panel — richer look to match the rest of the
   redesign (was a flat var(--ink) rectangle with plain white text links,
   the one place that still read as visually "old"): gradient background,
   an icon per link, hover/active states, a divider, and a prominent
   Academy CTA row at the bottom of the panel itself. */
@media (max-width: 920px) {
  .main-nav {
    background: linear-gradient(160deg, #0B1320 0%, #131c30 55%, #1a1030 100%);
  }
  .main-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 17px;
    border-radius: 14px;
    padding: 14px 12px !important;
    border-bottom: none !important;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .main-nav a:active, .main-nav a:hover { background: rgba(255, 255, 255, 0.06); transform: translateX(2px); }
  .main-nav a.nav-highlight { color: #c4b5fd; }
  .nav-mobile-academy {
    margin-top: 14px;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(90deg, rgba(0,194,168,0.14), rgba(139,92,246,0.14)) !important;
    font-weight: 700;
  }
  .academy-btn { padding: 9px 18px; font-size: 14px; }
}

/* ---- Footer (white redesign) ---- */
.site-footer {
  background: #fff;
  color: #64748b;
  padding: 0;
}
.footer-bottom {
  border-top-color: #eef0f4;
}

/* ---- Modals / popups (login, signup, purchase, quick-query) ----
   Structure/IDs are untouched (the login/signup flow especially is a lot
   of carefully-tuned JS state) — this is a pure visual upgrade layered
   on the exact same markup: softer entrance, deeper shadow, rounder
   corners, richer input focus state. */
.modal-overlay {
  background: rgba(11, 19, 32, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(11, 19, 32, 0.35), 0 0 0 1px rgba(11, 19, 32, 0.04);
  border: none;
  animation: modal-pop-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  /* NOT a plain `overflow: hidden` shorthand — that silently killed
     style.css's own overflow-y:auto (shorthand sets both axes at once),
     which is what let a modal's content scroll once it's taller than
     max-height:90vh. Without it, taller popups just clipped their lower
     content with no way to reach it. overflow-x:hidden alone is enough
     to keep the ::before gradient bar clipped to the rounded corners. */
  overflow-x: hidden;
  overflow-y: auto;
}
/* Trademark brand-gradient accent — every popup on the site gets the
   same teal->violet->amber sliver across its top, so modals read as
   one consistent, branded system rather than plain white boxes. */
.modal-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--brand-gradient);
}
@keyframes modal-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: #e2e8f0; color: #0b1320; }
.modal-box h3 { font-family: 'Space Grotesk', var(--heading-font, sans-serif); }

.form-field input,
.form-field select,
.form-field textarea {
  border-radius: 12px;
  border-color: #e5e7eb;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #00c2a8;
  box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.15);
}

.btn {
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-amber { box-shadow: 0 8px 20px -6px rgba(242, 169, 59, 0.5); }
.btn-amber:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -6px rgba(242, 169, 59, 0.55); }
.btn-teal { box-shadow: 0 8px 20px -6px rgba(0, 194, 168, 0.5); }
.btn-teal:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -6px rgba(0, 194, 168, 0.55); }
.btn-outline-dark:hover { transform: translateY(-1px); }

/* ---- FAQ (card-style accordion) ----
   Same .faq-item/.faq-q/.faq-a/.faq-plus structure & JS (initFaq in
   main.js just toggles .open) — purely a visual upgrade from a flat
   list to bordered, hoverable cards with a smoother chevron. */
.faq-item-card {
  border: 1px solid #eef0f4;
  border-radius: 16px;
  padding: 4px 22px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item-card:hover { border-color: #d6e8e5; box-shadow: 0 8px 24px -8px rgba(11, 19, 32, 0.08); }
.faq-item-card.open { border-color: #00c2a8; box-shadow: 0 8px 24px -8px rgba(0, 194, 168, 0.2); }
.faq-item-card .faq-q { font-family: 'Space Grotesk', sans-serif; font-size: 16.5px; padding: 18px 0; }
.faq-item-card .faq-plus {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; background: #f1f5f9;
  font-size: 18px; flex-shrink: 0;
}
.faq-item-card.open .faq-plus { background: #00c2a8; color: #fff; }

/* ---- Offerings carousel ("What We Provide") ----
   Custom-built (not Flowbite's carousel) so adjacent slides can peek at
   the edges — Flowbite's stock carousel doesn't support that. */
.offerings-viewport {
  position: relative;
  overflow: hidden;
  padding: 0 8%;
}
@media (max-width: 640px) { .offerings-viewport { padding: 0 5%; } }
.offerings-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.offering-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 10px;
  box-sizing: border-box;
}
.offering-slide-inner {
  --tint-1: #00c2a8;
  --tint-2: #00a892;
  --tint-3: #0b1320;
  position: relative;
  min-height: 460px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  background: linear-gradient(120deg, var(--tint-1), var(--tint-2) 60%, var(--tint-3));
  box-shadow: 0 30px 60px -22px rgba(11, 19, 32, 0.3);
  opacity: 0.4;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media (max-width: 480px) {
  .offering-slide-inner { min-height: 380px; padding: 28px 0; }
}
.offering-slide.is-active .offering-slide-inner { opacity: 1; transform: scale(1); }
.offering-tint-violet { --tint-1: #8b5cf6; --tint-2: #7c4de0; --tint-3: #0b1320; }
.offering-tint-amber { --tint-1: #f2a93b; --tint-2: #d99323; --tint-3: #0b1320; }
.offering-tint-ink { --tint-1: #0b1320; --tint-2: #3d2f66; --tint-3: #00c2a8; }

/* The photo fills the ENTIRE tile as a background; this overlay sits on
   top of it and fades solid tint (left, where the text sits) out to
   transparent (right, where the photo shows through clearly) so the
   text panel always reads clearly against the same photo regardless of
   what's actually in it. */
.offering-slide-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, var(--tint-1) 0%, var(--tint-1) 32%, transparent 78%);
}
.offering-slide-art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.offering-slide-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Title lives INSIDE the tile, centered across its full width at the
   very top, on its own translucent pill so it reads clearly against
   whichever illustration/tint sits behind it. */
.offering-slide-title {
  position: relative;
  z-index: 2;
  display: inline-block;
  align-self: center;
  text-align: center;
  margin: -28px auto 24px;
  padding: 11px 32px;
  border-radius: 999px;
  background: rgba(11, 19, 32, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) { .offering-slide-title { font-size: 21px; padding: 9px 22px; margin: -14px auto 16px; } }

.offering-slide-text { position: relative; z-index: 2; align-self: flex-start; max-width: 56%; padding: 0 44px; color: #fff; }
@media (max-width: 900px) { .offering-slide-text { max-width: 85%; padding: 0 26px; } }
@media (max-width: 480px) { .offering-slide-text { max-width: 92%; padding: 0 18px; } }
.offering-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.offering-slide-text p { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.92); margin: 0 0 22px; }
.offering-slide-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.offering-btn { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; padding: 11px 24px; border-radius: 999px; transition: transform 0.15s ease; }
.offering-btn:hover { transform: translateY(-1px) scale(1.03); }
.offering-btn-solid { background: #fff; color: #0b1320; }
.offering-btn-outline { border: 2px solid rgba(255, 255, 255, 0.6); color: #fff; }

.offerings-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0b1320;
  box-shadow: 0 10px 30px rgba(11, 19, 32, 0.18);
  z-index: 10;
  transition: transform 0.15s ease;
}
.offerings-nav:hover { transform: translateY(-50%) scale(1.08); }
.offerings-nav-prev { left: 1%; }
.offerings-nav-next { right: 1%; }
@media (max-width: 640px) { .offerings-nav { width: 36px; height: 36px; } }

.offerings-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.offerings-dot { width: 9px; height: 9px; border-radius: 999px; background: #e2e8f0; transition: background 0.2s ease, width 0.2s ease; border: none; padding: 0; }
.offerings-dot.is-active { background: #00c2a8; width: 26px; }

/* ---- Roadmap / Steps — scroll-driven STACKED CARDS ----
   Each card reveals with the SAME proven IntersectionObserver-driven
   data-animate system used everywhere else on this site (offerings
   fade-ins, Why Techorts tiles, etc.) — a normal stacked list, each
   card sliding in from the right ("fade-left") with a staggered delay
   as it scrolls into view, one after another. Earlier attempts pinned
   the section (position:sticky + a tall scroll wrapper + manual band
   math) to get a "one at a time" effect, but that mechanism is fragile
   (depends on viewport height, ancestor overflow/transform, browser
   sticky quirks) and repeatedly didn't render right — this trades a
   flashier scroll-jack effect for one that reliably works. */
/* ---- How It Works — horizontal side-by-side roadmap, widened up (was
   max-w-3xl, now max-w-5xl in the markup) and shortened per-card so it
   reads as a wide, low strip rather than 4 tall boxes. The connecting
   line and each stop's highlight are scroll-LINKED (roadmap-highway.js
   sets the line's width and toggles .is-active directly off scroll
   position, continuously, in both directions) rather than a one-time
   reveal — hence the short, snappy transition below instead of a slow
   one-shot animation duration. */
.roadmap-highway { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.roadmap-highway-line {
  position: absolute;
  top: 38px;
  left: calc(12.5% + 0px);
  right: calc(12.5% + 0px);
  height: 3px;
  background: #eef0f4;
  border-radius: 999px;
  z-index: 0;
}
.roadmap-highway-line-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--brand-gradient);
  transition: width 0.15s linear;
}
.roadmap-stop {
  position: relative;
  z-index: 1;
  padding: 20px 20px 18px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #eef0f4;
  box-shadow: 0 20px 44px -30px rgba(15, 23, 42, 0.2);
  opacity: 0.5;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.roadmap-stop.is-active {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(139, 92, 246, 0.25);
  box-shadow: 0 26px 55px -28px rgba(139, 92, 246, 0.28);
}
.roadmap-stop-num {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef0f4;
  color: #94a1b6;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.roadmap-stop.is-active .roadmap-stop-num {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 12px 26px -8px rgba(139, 92, 246, 0.45);
  transform: scale(1.08);
}
@media (max-width: 900px) {
  .roadmap-highway { grid-template-columns: 1fr; gap: 16px; }
  .roadmap-highway-line { display: none; }
}

/* ---- Why Techorts tiles (gapped, distinct color per tile) ---- */
.why-tile {
  border-radius: 20px;
  padding: 32px;
  background: #fff;
  border: 1px solid #eef0f4;
  box-shadow: 0 16px 40px -18px rgba(11, 19, 32, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.why-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -18px rgba(11, 19, 32, 0.2); }
.why-tile-teal:hover { background: rgba(0, 194, 168, 0.07); }
.why-tile-violet:hover { background: rgba(139, 92, 246, 0.07); }
.why-tile-amber:hover { background: rgba(242, 169, 59, 0.08); }
.why-tile-rose:hover { background: rgba(236, 72, 153, 0.07); }
.why-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.why-tile-teal { border-top: 3px solid #00c2a8; }
.why-tile-teal .why-tile-icon { background: rgba(0, 194, 168, 0.12); color: #00a892; }
.why-tile-violet { border-top: 3px solid #8b5cf6; }
.why-tile-violet .why-tile-icon { background: rgba(139, 92, 246, 0.12); color: #7c4de0; }
.why-tile-amber { border-top: 3px solid #f2a93b; }
.why-tile-amber .why-tile-icon { background: rgba(242, 169, 59, 0.15); color: #b9791b; }
.why-tile-rose { border-top: 3px solid #ec4899; }
.why-tile-rose .why-tile-icon { background: rgba(236, 72, 153, 0.12); color: #db2777; }

/* ---- Workshops (light, rich — was dark/glassmorphic; flipped to
   dark-on-light so it reads as a lighter band, matching the rest of the
   site, instead of a stark dark section) ---- */
.workshop-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px -12px rgba(15,23,42,0.2);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.workshop-card {
  position: relative;
  border-radius: 28px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px rgba(15,23,42,0.25);
}
.workshop-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 194, 168, 0.1);
  border: 1px solid rgba(0, 194, 168, 0.3);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-dark, #0a8a7a);
}
.workshop-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #4ee6cd;
  animation: workshop-pulse 1.6s ease-in-out infinite;
}
@keyframes workshop-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(78, 230, 205, 0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(78, 230, 205, 0); }
}
.workshop-batch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  padding: 16px;
}
.workshop-batch-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 194, 168, 0.25), rgba(139, 92, 246, 0.25));
  color: #4ee6cd;
}
/* Label fills the middle, pushing the (now bigger) time to the right edge. */
.workshop-batch-label { flex: 1; margin: 0; }
.workshop-batch-time {
  margin: 0; flex-shrink: 0; text-align: right;
  font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.workshop-batch-tz { font-size: 11px; font-weight: 600; color: var(--slate); margin-left: 2px; }

/* ---- "Live Workshops" badge (left column) — richer, more visible ---- */
.workshop-live-workshops-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(242,169,59,0.16), rgba(236,72,153,0.1));
  border: 1px solid rgba(242,169,59,0.45);
  box-shadow: 0 8px 20px -10px rgba(242,169,59,0.4);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: #b9791b;
}

/* ---- "What we'll cover" numbered list ---- */
.workshop-cover-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.workshop-cover-list li {
  display: flex; align-items: center; gap: 14px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink);
}
.workshop-cover-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.16), rgba(139,92,246,0.14));
  color: var(--teal-dark, #0a8a7a);
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
}

/* ---- Red "LIVE BATCHES" badge — attention-grabbing broadcast style ---- */
.workshop-live-badge-red {
  background: rgba(229, 62, 62, 0.1);
  border-color: rgba(229, 62, 62, 0.35);
  color: #d92d2d;
}
.workshop-live-dot-red {
  width: 7px; height: 7px; border-radius: 999px; background: #e53e3e;
  animation: workshop-pulse-red 1.4s ease-in-out infinite;
}
@keyframes workshop-pulse-red {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.55); }
  50% { opacity: 0.65; box-shadow: 0 0 0 5px rgba(229, 62, 62, 0); }
}
.workshop-live-wave-red span { background: #e53e3e; }

/* ---- Workshops — light rich background wash + live wave icon + countdown ---- */
.workshop-section-rich {
  background:
    radial-gradient(45% 70% at 85% 10%, rgba(0, 194, 168, 0.12), transparent 65%),
    radial-gradient(40% 65% at 8% 90%, rgba(139, 92, 246, 0.12), transparent 65%),
    radial-gradient(35% 55% at 50% 50%, rgba(242, 169, 59, 0.06), transparent 70%),
    linear-gradient(180deg, #fbfaf7 0%, #f5f4fb 55%, #fbfaf7 100%);
}
.workshop-chip-stat { background: #fff; border-color: rgba(0,194,168,0.3); }

/* Weekend date label — bumped up from a plain small caption to the
   loudest element in the card header (bigger than the LIVE BATCHES badge
   next to it) since it's the one piece of information ("which weekend")
   students actually need to scan for. */
.workshop-date-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: transparent;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -0.01em;
}
@media (max-width: 480px) { .workshop-date-label { font-size: 16px; } }

.workshop-countdown {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border-radius: 16px; padding: 12px 16px;
  background: linear-gradient(135deg, rgba(0,194,168,0.08), rgba(139,92,246,0.06));
  border: 1px solid rgba(0,194,168,0.25);
}
.workshop-countdown-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--slate);
}
/* Live boxed D/H/M/S segments — a proper little digital-clock look,
   seconds ticking every frame like the other three, not just tacked on
   for sub-day countdowns. */
.workshop-countdown-boxes { display: flex; align-items: center; gap: 6px; }
.cd-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 34px; padding: 4px 6px;
  border-radius: 8px;
  background: var(--ink); color: #fff;
  box-shadow: 0 4px 10px -4px rgba(11,19,32,0.4);
}
.cd-num {
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.cd-unit { font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,0.55); }
@media (max-width: 380px) { .cd-box { min-width: 28px; padding: 3px 4px; } .cd-num { font-size: 13px; } }

.workshop-urgency-banner {
  display: flex; align-items: center; gap: 9px;
  border-radius: 16px; padding: 13px 16px;
  background: linear-gradient(135deg, rgba(242,169,59,0.14), rgba(229,72,77,0.08));
  border: 1px solid rgba(242,169,59,0.35);
  color: #9a5b12; font-size: 13px; font-weight: 700;
}
.workshop-urgency-banner i { flex-shrink: 0; color: #d97706; }
.workshop-urgency-banner.hidden { display: none; }

/* ============================================================
   MY JOURNEY — rich "course teaching UI" pass. All markup/classes
   below (.journey-*, .material-viewer-*, .mentor-chat-*) are rendered
   dynamically by my-journey.js / mentor-chat.js — the JS logic and
   class names are untouched, only visual treatment changes here.
   ============================================================ */
.journey-banner-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 4px 12px; border-radius: 999px; background: rgba(0,194,168,0.16);
  border: 1px solid rgba(0,194,168,0.35); color: #4ee6cd;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.journey-empty-state {
  text-align: center; max-width: 420px; margin: 60px auto; padding: 44px 32px;
  border-radius: 24px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 50px -25px rgba(15,23,42,0.18);
}
.journey-empty-icon {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.14), rgba(139,92,246,0.14));
  color: var(--teal-dark, #0a8a7a);
}
.journey-empty-icon svg { width: 28px; height: 28px; }

/* ---- Rich header bar — shrunk further per request (was already reduced
   once from a tall page-banner; this pass trims vertical padding again
   and tightens title/icon sizing). ---- */
.journey-header-bar {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #0B1320 0%, #131c30 55%, #1a1030 100%);
  padding: 4px 0 5px;
}
.journey-back-link {
  display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 1;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65);
  margin-bottom: 5px; transition: color .15s ease;
}
.journey-back-link:hover { color: #fff; }
/* Title stays pinned left; the info tiles and the action icons cluster
   together on the right (margin-left:auto on the tiles pulls both of
   them over as one group), rather than space-between spreading the tiles
   out into the middle of the row. */
.journey-header-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.journey-header-title-group { display: flex; align-items: center; gap: 12px; }
.journey-overall-ring { transform: scale(0.82); transform-origin: left center; }
.journey-overall-ring .progress-ring-track { stroke: rgba(255,255,255,0.12); }
.journey-overall-ring .progress-ring-label { color: #fff; font-size: 14px; }
/* Thick stroke (set via renderProgressRing's strokeWidth) so it reads as
   a bold color fill proportional to exact % complete, same treatment as
   the per-stage pill rings — solid success-green once it hits 100%. */
.journey-overall-ring.is-complete .progress-ring-fill { stroke: #22c55e; }
.journey-header-title-group h1 { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 18px; margin: 0 0 3px; }
.journey-track-status-badge { border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 10.5px; }

/* Column so the "Mentor Online" text badge sits directly above the
   icon row (WhatsApp being the last icon in it), right-aligned together
   as one unit in the header's top-right corner. */
.journey-header-actions-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.journey-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.journey-header-icon-btn {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: #fff; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.journey-header-icon-btn svg { width: 16px; height: 16px; }
.journey-header-icon-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.14); }
/* Distinct trademark-color tint per icon, so the row reads as a set of
   deliberate actions rather than four identical gray tiles. */
.journey-header-icon-btn-teal { background: rgba(0,194,168,0.16); border-color: rgba(0,194,168,0.3); }
.journey-header-icon-btn-teal:hover { background: rgba(0,194,168,0.28); box-shadow: 0 8px 18px -10px rgba(0,194,168,0.5); }
.journey-header-icon-btn-violet { background: rgba(139,92,246,0.16); border-color: rgba(139,92,246,0.3); }
.journey-header-icon-btn-violet:hover { background: rgba(139,92,246,0.28); box-shadow: 0 8px 18px -10px rgba(139,92,246,0.5); }
.journey-header-icon-btn-amber { background: rgba(242,169,59,0.18); border-color: rgba(242,169,59,0.32); }
.journey-header-icon-btn-amber:hover { background: rgba(242,169,59,0.3); box-shadow: 0 8px 18px -10px rgba(242,169,59,0.5); }
.journey-header-icon-btn-wa { background: rgba(37, 211, 102, 0.14); border-color: rgba(37, 211, 102, 0.3); }
.journey-header-icon-btn-wa:hover { background: rgba(37, 211, 102, 0.28); box-shadow: 0 8px 18px -10px rgba(37,211,102,0.5); }

/* "Mentor Online" text badge — small, green-highlighted when the
   mentor's actually available, muted gray otherwise. Replaces the old
   icon-only mentor-status button (redundant now that this says it
   outright in words). */
.mentor-online-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.7); white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mentor-online-badge-dot {
  width: 6px; height: 6px; border-radius: 999px; background: #94a3b8; flex-shrink: 0;
}
.mentor-online-badge.is-online {
  background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.4); color: #86efac;
}
.mentor-online-badge.is-online .mentor-online-badge-dot {
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
  animation: mentor-badge-pulse 1.8s ease-in-out infinite;
}
.mentor-online-badge.is-offline .mentor-online-badge-dot { background: #64748b; }

/* ---- Set Alarm modal (My Journey — study reminders) ---- */
.alarm-add-row { display: flex; gap: 10px; align-items: center; }
.alarm-datetime-input {
  flex: 1; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); font-family: inherit; font-size: 14px; color: var(--ink);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.alarm-datetime-input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,194,168,0.15);
}
.alarm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-height: 260px; overflow-y: auto; }
.alarm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,194,168,0.06), rgba(139,92,246,0.05));
  border: 1px solid rgba(0,194,168,0.16);
}
.alarm-item-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-gradient); color: #fff;
}
.alarm-item-icon svg { width: 16px; height: 16px; }
.alarm-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alarm-item-text strong { font-size: 13px; color: var(--ink); }
.alarm-item-text span { font-size: 11.5px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm-item-remove {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; border: none;
  background: rgba(229,72,77,0.1); color: var(--danger, #e5484d); font-size: 16px; line-height: 1;
  cursor: pointer; transition: background 0.15s ease;
}
.alarm-item-remove:hover { background: rgba(229,72,77,0.2); }
@keyframes mentor-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
  50% { box-shadow: 0 0 0 5px rgba(34,197,94,0.1); }
}

/* "Last login" — top-right corner, stacked above the mentor-online badge
   in .journey-header-actions-col, rather than its own separate row below
   the whole header (which added extra header height for no real reason). */
.journey-last-login { font-size: 10.5px; color: rgba(255,255,255,0.45); white-space: nowrap; }

/* Started/Completed/Free Sessions/Available — moved into the SAME top
   banner row as the title (was a separate row below it), as small tile
   cards, so the banner doesn't need extra vertical space for them. */
.journey-header-meta-row {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px;
  margin-left: auto;
}
.journey-header-meta-row .journey-tile {
  border-radius: 10px; padding: 4px 10px; font-size: 11px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.journey-header-meta-row .journey-tile-label { color: rgba(255,255,255,0.5); font-size: 8.5px; }
.journey-header-meta-row .journey-tile-value { color: #fff; font-size: 11px; }
@media (max-width: 700px) { .journey-header-meta-row { order: 3; width: 100%; } }
.journey-header-meta-row .journey-tile-done { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.35); }
.journey-header-meta-row .journey-tile-used { background: rgba(229,72,77,0.1); border-color: rgba(229,72,77,0.3); }
.journey-header-meta-row .journey-tile-available { background: rgba(0,194,168,0.14); border-color: rgba(0,194,168,0.35); }

/* ---- Stage roadmap row — one single flex row: Prev pinned to the
   left, Next pinned to the right end of the row, stage pills flex and
   spread across the space between, connected by a roadmap line behind
   them (a thin track with a brand-gradient fill up to however far
   completed) so the whole row reads as one continuous path rather than
   a loose row of buttons. Pills show the FULL stage name (wrapping up
   to 2 lines) instead of a truncated ellipsis — kept compact by tight
   font-size/line-height, not by cutting the text off. Gap below the
   whole row trimmed so the stage-detail panel sits right under it. ---- */
.journey-stage-rail { margin-bottom: 0; }
/* .journey-stage-rail (base rule, style.css) is itself a flex row —
   this is its one and only child now, and a flex item defaults to
   shrink-to-content-width rather than filling the row, which was
   leaving Prev/pills/Next clumped together instead of spanning the
   full width. width:100% forces it to fill regardless. */
.journey-stage-rail-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.journey-nav-arrow-btn {
  flex-shrink: 0;
  border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
/* Prev/Next each eat a fixed chunk of the row's width no matter how
   narrow the viewport gets — on a phone that left almost nothing for the
   actual roadmap (one pill barely peeking through, everything else
   scrolled fully out of view with zero indication more existed, which is
   exactly what read as "collapsed"). Shrinking them to icon-only here
   gives the scrollable track most of the row back. */
@media (max-width: 640px) {
  .journey-nav-arrow-btn { padding: 5px 8px; font-size: 0; }
  .journey-nav-arrow-btn::before { font-size: 13px; }
  .journey-nav-arrow-btn-prev::before { content: '←'; }
  .journey-nav-arrow-btn-next::before { content: '→'; }
}
.journey-nav-arrow-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.journey-nav-arrow-btn-prev {
  background: #fff; border: 1px solid var(--line); color: var(--slate);
}
.journey-nav-arrow-btn-prev:hover:not(:disabled) { border-color: rgba(0,194,168,0.4); color: var(--ink); }
.journey-nav-arrow-btn-next {
  background: var(--brand-gradient); border: none; color: #fff;
  box-shadow: 0 10px 22px -10px rgba(139,92,246,0.5);
}
.journey-nav-arrow-btn-next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(139,92,246,0.6); }
/* Compact horizontal stepper track. Generous top/bottom padding here
   (not on the pills) is what actually fixes the long-standing "selected
   stage's top edge gets clipped" bug: overflow-x:auto on this element
   forces the browser to compute overflow-y as auto too (a CSS spec
   quirk — one axis scrollable implies both are "auto"), which clips
   anything a child renders above/below this box's own padding edges.
   Every pill below is styled with a plain border/background only (no
   box-shadow, no hover/selected transform) specifically so nothing ever
   needs room outside this padding to render correctly. */
.journey-stage-rail-track {
  flex: 1; min-width: 0;
  /* Centers the whole pill cluster as one unit (1 stage sits dead center,
     2 stages sit centered next to each other) instead of the old
     space-between, which pinned the first/last pill to the container's
     own edges — fine with many stages, but read as "one stuck in the
     far-left corner, the other in the far-right corner" with only 1-2.
     .journey-stage-rail-inner below is what actually holds the pills, and
     it stays shrink-to-content-width, so centering it (rather than the
     pills individually) still lets a many-stage row overflow and scroll
     normally instead of insisting everything fit. */
  display: flex; align-items: center; justify-content: center;
  overflow-x: auto; overflow-y: hidden; padding: 10px 2px;
  scrollbar-width: thin;
}
/* Shrink-to-content wrapper around just the pills (+ connector line) —
   NOT stretched to the track's full width — so justify-content:center
   above centers this as one cluster, and the connector line/fill below,
   positioned relative to THIS element rather than the track, still starts
   and ends exactly at the first/last pill regardless of how much (or how
   little) empty space surrounds the cluster. */
.journey-stage-rail-inner {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
/* A dotted connector line running through every pill at the row's
   vertical center — reads as a single continuous path linking every
   stage rather than a loose set of buttons. border-top (not a solid
   background block) is what actually renders as dots. Spans edge to edge
   (0%-100%) of .journey-stage-rail-inner, so it starts/ends exactly at
   the first/last pill no matter how the cluster is positioned. */
.journey-stage-rail-inner::before {
  content: '';
  position: absolute; top: 50%; left: 0; right: 0; height: 0;
  transform: translateY(-50%);
  border-top: 2.5px dotted rgba(0,194,168,0.45); z-index: 0;
}
/* Solid green "completed so far" fill, layered over the dotted base line
   — width set inline per render (see my-journey.js) to the fraction of
   stages actually done, so the path visually fills in left-to-right as
   the learner progresses, like a roadmap. */
.journey-stage-rail-fill {
  position: absolute; top: 50%; left: 0; height: 0;
  transform: translateY(-50%);
  border-top: 2.5px solid #22c55e; z-index: 0;
  transition: width .4s ease;
}
.journey-stage-pill {
  position: relative; z-index: 1;
  flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 8px;
  border-radius: 999px; padding: 7px 16px 7px 7px; font-weight: 600;
  min-width: 0; max-width: 220px;
  border: 1.5px solid var(--line); background: #fff;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
@media (max-width: 640px) {
  .journey-stage-pill { max-width: 168px; padding: 6px 12px 6px 6px; gap: 6px; }
  .journey-stage-pill-label { font-size: 11px; }
  .journey-stage-pill-badge { width: 20px; height: 20px; font-size: 10.5px; }
}
.journey-stage-pill-badge {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 11.5px; font-weight: 800; line-height: 1;
  background: rgba(11,19,32,0.06); color: var(--slate);
}
.journey-stage-pill.journey-stage-current .journey-stage-pill-badge { background: var(--amber); color: #fff; }
.journey-stage-pill.journey-stage-done .journey-stage-pill-badge { background: #22c55e; color: #fff; }
/* Opaque overrides for the older done/current pill-body tints
   (style.css, from before this rail had a connector line running behind
   every pill) — those were translucent rgba fills, which let the
   dotted/green line show faintly through and look like it was drawn
   across the stage name. Solid color underneath fully hides it, same
   fix as .selected below. */
.journey-stage-pill.journey-stage-done { background: #DCFCE7; }
.journey-stage-pill.journey-stage-current { background: #FEF3C7; }
/* The older per-pill 18px connector stub (style.css) is now redundant —
   this rail draws one continuous line the full width of the track
   instead (.journey-stage-rail-track::before / .journey-stage-rail-fill
   above) — so it's turned off here to avoid a second, shorter line
   doubling up right at each pill's edge. */
.journey-stage-rail-track .journey-stage-pill::before { display: none; }
/* Selected stage (the one currently open in the panel below) gets a
   plain, solid-tint highlight — deliberately no glow/shadow/scale, so
   there's nothing for the track's forced overflow-y:hidden (above) to
   ever clip. Opaque (not the translucent rgba this used to be) — a
   see-through background let the dotted/green connector line running
   behind every pill show faintly through the selected one, looking like
   the line was drawn over the stage name instead of stopping behind it. */
.journey-stage-pill.selected {
  border-color: var(--teal); background: #E3F8F4; color: var(--ink);
}
.journey-stage-pill:hover:not(:disabled):not(.selected) { border-color: rgba(0,194,168,0.35); }
.journey-stage-pill-label {
  font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Full title still available via the title="" attribute (hover
     tooltip) and by opening the stage itself — the rail's own
     horizontal scroll / Prev-Next buttons are how you move between
     stages regardless of label length. */
}
.journey-stage-pill:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Stage detail panel ---- */
.journey-stage-detail { position: relative; overflow: hidden; border-radius: 24px; }
.stage-detail-panel {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 24px; padding: 14px 32px 28px;
  box-shadow: 0 28px 60px -30px rgba(15,23,42,0.2);
  animation: stage-detail-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes stage-detail-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Directional variants — applied instead of the plain fade-up above when
   the panel change was caused by clicking Prev/Next specifically (a
   pill click, the default, keeps the plain fade since there's no
   inherent "direction" to a jump). Reinforces which way the learner is
   moving through the roadmap. */
.stage-detail-panel.nav-next {
  animation: stage-detail-enter-next 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage-detail-panel.nav-prev {
  animation: stage-detail-enter-prev 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes stage-detail-enter-next {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes stage-detail-enter-prev {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}
.stage-detail-corner-label {
  position: absolute; top: 14px; right: 32px; z-index: 2;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
}
.stage-started-label { font-size: 11.5px; color: var(--slate); font-weight: 600; }
.journey-topics-list { gap: 6px; }
.journey-topic-item label {
  border-radius: 10px; padding: 8px 10px; transition: background .15s ease;
}
.journey-materials { border-top-color: var(--line); }
.journey-material-item {
  border-radius: 12px; transition: transform .15s ease, background .15s ease;
}
.journey-material-item:hover { transform: translateX(3px); }
.journey-materials-general {
  border-radius: 16px; box-shadow: 0 12px 28px -20px rgba(15,23,42,0.2);
}
.journey-doubt-btn, .material-viewer-icon-btn { border-radius: 10px; transition: transform .15s ease; }
.journey-doubt-btn:hover:not(:disabled), .material-viewer-icon-btn:hover { transform: translateY(-1px); }
.journey-mark-done-btn {
  border-radius: 999px; box-shadow: 0 10px 22px -12px rgba(0,194,168,0.5);
}
.journey-mark-done-btn.is-already-done {
  background: rgba(34,197,94,0.12); color: #16a34a; border: 1px solid rgba(34,197,94,0.35);
  box-shadow: none; cursor: default; opacity: 1;
}

/* Material viewer — full "reader" overlay.
   No overflow declared here (deliberately) — style.css's .material-
   viewer-box is now a non-scrolling flex column (overflow: hidden); the
   actual scrolling lives in its .material-viewer-scroll child instead,
   which is what keeps the toolbar/close-button structurally outside the
   scrolled area so nothing can ever render over it. An earlier version
   of this rule set overflow-y:auto here specifically to avoid clipping
   tall content — that concern doesn't apply anymore since content no
   longer overflows the box itself, only .material-viewer-scroll, which
   handles its own scroll. */
.material-viewer-box {
  border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(11,19,32,0.55);
}

/* Mentor chat */
.mentor-chat-fab {
  border-radius: 999px; box-shadow: 0 16px 32px -14px rgba(11,19,32,0.5);
  animation: journey-fab-bounce 2.4s ease-in-out infinite;
}
@keyframes journey-fab-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.mentor-chat-widget {
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px -25px rgba(11,19,32,0.5);
}

/* ---- Topic/material window — neat, clean, rich look ---- */
.stage-topic-toolbar {
  border-radius: 12px; padding: 6px 14px; margin: 6px 0 10px;
  background: var(--paper-soft); border: 1px solid var(--line);
}
.stage-topic-layout {
  border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 16px 36px -24px rgba(15,23,42,0.18);
}
.stage-topic-list-item { border-radius: 0; }
.stage-topic-list-item.active { border-radius: 10px; margin: 0 6px; }
.material-inline-toolbar { border-radius: 12px 12px 0 0; padding: 12px 16px; background: var(--paper-soft); }
.material-tab { border-radius: 999px; }
.stage-complete-toggle { border-radius: 999px; padding: 6px 14px; background: var(--paper-soft); border: 1px solid var(--line); }
.stage-complete-toggle.is-complete { background: rgba(0,194,168,0.1); border-color: rgba(0,194,168,0.35); }

/* ============================================================
   BOOK A SESSION — rich look pass. Structure/IDs used by booking.js
   (durationGrid, calendarStrip, slotGrid, bookingDetails, etc.) are
   untouched; only visual treatment changes.
   ============================================================ */
.booking-banner-rich { background: linear-gradient(120deg, #0B1320 0%, #131c30 55%, #1a1030 100%); }
.booking-banner-rich .journey-banner-eyebrow { margin-bottom: 6px; }
/* Even tighter than .journey-banner-slim (already the site's slimmest
   variant) — this page's own content starts right below, so the info bar
   doesn't need to hold much visual weight. */
.booking-banner-rich.journey-banner-slim { padding: 9px 0 11px; }
.booking-banner-rich.journey-banner-slim h1 { margin: 0 0 2px; font-size: clamp(17px, 2.2vw, 22px); }
.booking-banner-rich.journey-banner-slim p { font-size: 12.5px; }

.booking-panel {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 20px 50px -28px rgba(15,23,42,0.25);
}
.booking-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand-gradient);
}
.booking-panel-icon {
  width: 60px; height: 60px; margin: 0 auto; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.14), rgba(139,92,246,0.14));
  color: var(--teal-dark, #0a8a7a);
}
.booking-panel-icon svg { width: 26px; height: 26px; }
.booking-panel-icon-success { background: linear-gradient(135deg, rgba(34,197,94,0.16), rgba(0,194,168,0.16)); color: #0a8a3f; }
.booking-confirmed-panel { animation: booking-pop-in .35s ease; }
@keyframes booking-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

.booking-step-title {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-display);
}
.booking-step-num {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--teal), #4ee6cd); color: #04241f;
  font-size: 13px; font-weight: 800;
}

/* ---- Booking step numbers — richer badge (soft glow ring) ---- */
.booking-step-num {
  box-shadow: 0 6px 16px -6px rgba(0,194,168,0.55), 0 0 0 4px rgba(0,194,168,0.12);
}

.duration-card {
  position: relative;
  border-radius: 16px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.dur-icon {
  width: 30px; height: 30px; padding: 7px; margin-bottom: 2px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,194,168,0.16), rgba(139,92,246,0.12)); color: var(--teal-dark, #0a8a7a);
  box-sizing: border-box;
}
.duration-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(15,23,42,0.28); }
.duration-card.selected {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(0,194,168,0.1), rgba(139,92,246,0.08));
  box-shadow: 0 0 0 2px var(--teal), 0 14px 30px -16px rgba(139,92,246,0.4);
}
.duration-card.selected .dur-icon { background: var(--brand-gradient); color: #fff; }
.duration-card.selected::after {
  content: '✓'; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--teal); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -2px rgba(0,194,168,0.55);
}

.day-pill { border-radius: 14px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; }
.day-pill:hover { transform: translateY(-2px); }
.day-pill.selected {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(0,194,168,0.09), rgba(139,92,246,0.07));
  box-shadow: 0 0 0 2px var(--teal), 0 10px 22px -14px rgba(139,92,246,0.35);
}

/* ---- Time slot buttons — same rich selected/hover language as the
   duration cards and date pills above, replacing the plain flat-teal
   selected fill this previously had. ---- */
.slot-btn {
  border-radius: 12px !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.slot-btn:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(15,23,42,0.3); border-color: rgba(0,194,168,0.4); }
.slot-btn.selected {
  border-color: transparent !important;
  background: var(--brand-gradient) !important; color: #fff !important;
  box-shadow: 0 0 0 2px var(--teal), 0 12px 24px -14px rgba(139,92,246,0.45);
}

/* Booking summary box — was a plain inline-styled var(--paper) block;
   now a proper card with the same trademark-gradient accent used across
   every other summary/panel this pass touched. */
#bookingSummary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(0,194,168,0.06), rgba(139,92,246,0.05)) !important;
  border: 1px solid rgba(0,194,168,0.18);
  border-radius: 16px !important;
  padding: 20px !important;
}
#bookingSummary::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-gradient);
}

.slot-btn { border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease; }
.slot-btn.selected {
  background: var(--brand-gradient) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 10px 22px -12px rgba(139,92,246,0.5);
}
.slot-btn:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(15,23,42,0.25); }
.slot-btn.selected { box-shadow: 0 10px 22px -14px rgba(0,194,168,0.45); }

/* ============================================================
   TRACK DETAIL PAGES — rich look + landing animation pass, applied
   to all four track-*.html pages via the shared .track-banner-rich /
   .roadmap-step / .ai-banner classes and new data-step attributes.
   Reveal-on-scroll is still driven by scroll-animate.js's existing
   data-animate attributes — this only changes the visual treatment.
   ============================================================ */
.track-banner-rich { background: linear-gradient(120deg, #0B1320 0%, #131c30 55%, #1a1030 100%); }
.track-banner-rich::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 15% 0%, rgba(0,194,168,0.16), transparent 60%),
              radial-gradient(50% 80% at 100% 100%, rgba(139,92,246,0.14), transparent 60%);
}
.track-banner-flex {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.track-banner-text { max-width: 640px; }
.track-enroll-btn-compact {
  flex-shrink: 0;
  padding: 10px 22px !important;
  font-size: 13px !important;
  box-shadow: 0 10px 26px -10px rgba(242,169,59,0.55);
}
@media (max-width: 640px) { .track-banner-flex { flex-direction: column; } .track-enroll-btn-compact { align-self: flex-start; } }

/* Phase tiles: .roadmap-step / .step-num's full visual design (gradient
   pill, watermark number, hover lift) now lives entirely in style.css —
   this older block used to duplicate/override it here too (a leftover
   from an earlier redesign pass, before that newer pass existed), and
   since this file loads AFTER style.css, its .step-num background won
   the cascade while style.css's white text color didn't get overridden
   here — white text on this rule's near-transparent wash is exactly
   what made the phase headers unreadable. Removed rather than merged,
   since style.css's version is the complete, current design. */

/* ---- Merged "What you'll walk away with" + "Ready when you are" — one
   rich card instead of two separate sections stacked with a big gap.
   Two-column on desktop (outcomes left, CTA right with its own dark
   panel), stacking on mobile. */
.track-merged-section {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  background: #fff;
  border: 1px solid rgba(0,194,168,0.16);
  box-shadow: 0 30px 60px -30px rgba(11,19,32,0.35);
}
.track-merged-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--brand-gradient);
}
@media (max-width: 800px) { .track-merged-section { grid-template-columns: 1fr; } }
.track-merged-outcome {
  padding: 40px 38px;
  background: linear-gradient(135deg, rgba(0,194,168,0.06), rgba(139,92,246,0.05));
}
.track-merged-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-dark);
  margin-bottom: 14px;
}
.track-outcome-list { font-size: 15px; color: var(--slate); line-height: 1.9; padding-left: 20px; margin: 0; }
.track-outcome-list li::marker { color: var(--teal); }

/* .ai-banner is kept alongside this class on the CTA panel purely for its
   text-color rules (h2/badge/sub) — its own background/border/radius are
   deliberately overridden here so it reads as one seamless half of the
   merged card instead of a rounded box nested inside a rounded box. */
.track-merged-cta.ai-banner {
  position: relative;
  padding: 40px 38px;
  background: linear-gradient(120deg, #0B1320 0%, #131c30 55%, #1a1030 100%);
  border: none;
  border-radius: 0;
  color: #fff;
}
.track-merged-cta::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 100% 0%, rgba(139,92,246,0.22), transparent 60%),
              radial-gradient(50% 80% at 0% 100%, rgba(0,194,168,0.18), transparent 60%);
}
.track-merged-cta > * { position: relative; z-index: 1; }
.track-merged-cta h2 { color: #fff; }
.ai-banner-badge { box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; }
.track-enroll-btn, .track-merged-cta .btn {
  transition: transform .15s ease, box-shadow .15s ease;
}
.track-enroll-btn:hover:not(:disabled), .track-merged-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(0,194,168,0.4);
}

/* ============================================================
   ASK A QUERY POPUP — richer header treatment on top of the same
   #quickQueryModal / #quickQueryForm structure and field names
   the JS submit handler (initQuickQueryModal in main.js) reads.
   ============================================================ */
.query-modal-icon {
  width: 52px; height: 52px; margin-bottom: 10px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(242,169,59,0.16), rgba(0,194,168,0.14));
  color: #b5790f;
}
.query-modal-icon svg { width: 24px; height: 24px; }
.query-modal-box .form-grid-2 { gap: 14px 16px; }
.query-modal-box .form-field { margin-bottom: 4px; }
.query-modal-box textarea.auto-grow-textarea { border-radius: 12px; resize: none; }

/* Visible scrollbar — both the capped auto-grow textarea (once a long
   query exceeds its max height) and the modal box itself (once total
   content exceeds max-height:90vh) need an obviously-there scrollbar,
   not an OS-default thin/invisible-until-hover one. */
.auto-grow-textarea, .modal-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,194,168,0.55) transparent;
}
.auto-grow-textarea::-webkit-scrollbar, .modal-box::-webkit-scrollbar { width: 7px; }
.auto-grow-textarea::-webkit-scrollbar-thumb, .modal-box::-webkit-scrollbar-thumb {
  background: rgba(0,194,168,0.55); border-radius: 999px;
}
.auto-grow-textarea::-webkit-scrollbar-track, .modal-box::-webkit-scrollbar-track { background: transparent; }

/* ---- Connect With Us — thank-you step swaps into the same modal box ---- */
.connect-modal-icon { background: linear-gradient(135deg, rgba(0,194,168,0.18), rgba(139,92,246,0.16)); color: #0a8a7a; }
.connect-thanks-step { text-align: center; padding: 12px 6px 6px; animation: booking-pop-in .35s ease; }
.connect-thanks-icon {
  width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(0,194,168,0.16));
  color: #0a8a3f;
}
.connect-thanks-icon svg { width: 30px; height: 30px; }
.connect-thanks-step h3 { margin: 0 0 6px; }

/* ============================================================
   RESERVE WORKSHOP SEAT — new no-login page.
   ============================================================ */
.workshop-reserve-banner { background: linear-gradient(120deg, #0B1320 0%, #131c30 55%, #1a1030 100%); }
/* Tighter than the base .page-banner-compact — this page's actual
   content (date/batch picker) starts right below, so the info bar
   doesn't need to hold much vertical weight. */
.workshop-reserve-banner.page-banner-compact { padding: 10px 0 12px; }
.workshop-reserve-banner.page-banner-compact h1 { margin: 4px 0 4px; font-size: clamp(18px, 2.4vw, 23px); }
.workshop-reserve-banner.page-banner-compact p { font-size: 12.5px; margin-bottom: 0; }

.reserve-workshop-grid {
  display: grid; grid-template-columns: 420px 1fr; gap: 34px;
  align-items: start;
}
@media (max-width: 960px) {
  .reserve-workshop-grid { grid-template-columns: 1fr; }
}

.reserve-workshop-info {
  background: linear-gradient(160deg, var(--paper-soft) 0%, #fff 100%);
  border: 1px solid var(--line); border-radius: 24px;
  padding: 30px 28px; position: sticky; top: 90px;
  box-shadow: 0 24px 55px -32px rgba(15,23,42,0.22);
}
/* Sticky only makes sense beside a taller sibling column — once the grid
   stacks to one column on mobile, a stuck info panel would sit fixed in
   place while the batch-timing/pay-button column beneath it scrolled
   right over it. This MUST come after the base rule above (same
   selector+specificity — later wins the cascade tie regardless of the
   media query), or the always-on sticky rule silently wins on mobile too. */
@media (max-width: 960px) {
  .reserve-workshop-info { position: static; top: auto; }
}
.reserve-workshop-info h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 17px; }
.reserve-workshop-info h3:not(:first-child) { margin-top: 26px; }
.reserve-workshop-info > p { font-size: 14.5px; line-height: 1.75; color: var(--slate); margin: 0; }
.reserve-workshop-facts, .reserve-workshop-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.reserve-workshop-facts li {
  display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.reserve-workshop-facts li svg {
  width: 34px; height: 34px; padding: 8px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,194,168,0.14), rgba(139,92,246,0.12)); color: var(--teal-dark, #0a8a7a);
  box-sizing: border-box;
}
.reserve-workshop-topics li {
  font-size: 14px; color: var(--slate); line-height: 1.65; padding-left: 18px; position: relative;
}
.reserve-workshop-topics li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 999px; background: var(--teal);
}
.reserve-workshop-price-chip {
  margin-top: 26px; display: flex; align-items: center; justify-content: space-between;
  border-radius: 16px; padding: 16px 18px;
  background: linear-gradient(135deg, rgba(0,194,168,0.14), rgba(139,92,246,0.12));
  border: 1px solid rgba(0,194,168,0.3);
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.reserve-workshop-price-chip strong { font-family: var(--font-display); font-size: 22px; color: var(--teal-dark, #0a8a7a); }

.reserve-workshop-form-card {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px;
  box-shadow: 0 24px 55px -30px rgba(15,23,42,0.25);
}
.reserve-date-tabs { display: flex; gap: 12px; }
.reserve-date-tab {
  position: relative; overflow: hidden;
  flex: 1; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 12px 12px; text-align: center;
  background: linear-gradient(160deg, rgba(0,194,168,0.05), rgba(139,92,246,0.04));
  cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.reserve-date-tab::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand-gradient); opacity: .55; transition: opacity .15s ease;
}
.reserve-date-tab:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(15,23,42,0.3); }
.reserve-date-tab.is-active {
  border-color: var(--teal); background: linear-gradient(160deg, rgba(0,194,168,0.12), rgba(139,92,246,0.08));
  box-shadow: 0 14px 28px -16px rgba(0,194,168,0.5), 0 0 0 3px rgba(0,194,168,0.12);
}
.reserve-date-tab.is-active::before { opacity: 1; }
.reserve-date-tab-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.reserve-date-tab-sub { display: block; font-size: 12px; color: var(--slate); margin-top: 2px; }

/* Batch picker — one row, 3 columns (morning/afternoon/evening), each a
   small vertical card rather than a stacked list. */
.reserve-batch-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 640px) { .reserve-batch-list { grid-template-columns: 1fr; } }
.reserve-batch-row {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 10px;
  background: var(--paper-soft); cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Default (unselected) rows get a soft per-time-of-day color wash — same
   rich-look language as the icon badges below — instead of sitting flat
   white/grey until clicked. Morning=amber, afternoon=teal, evening=violet. */
.reserve-batch-row:nth-child(1) { background: linear-gradient(160deg, rgba(242,169,59,0.08), rgba(242,169,59,0.02)); }
.reserve-batch-row:nth-child(2) { background: linear-gradient(160deg, rgba(0,194,168,0.08), rgba(0,194,168,0.02)); }
.reserve-batch-row:nth-child(3) { background: linear-gradient(160deg, rgba(139,92,246,0.08), rgba(139,92,246,0.02)); }
.reserve-batch-row[disabled] { background: var(--paper-soft) !important; }
.reserve-batch-row:hover:not([disabled]) { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(15,23,42,0.25); }
.reserve-batch-row.is-selected {
  border-color: var(--teal); background: linear-gradient(160deg, rgba(0,194,168,0.1), rgba(139,92,246,0.06));
  box-shadow: 0 14px 28px -14px rgba(0,194,168,0.45), 0 0 0 3px rgba(0,194,168,0.14);
}
.reserve-batch-row.is-selected::after {
  content: '✓'; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--teal); color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -2px rgba(0,194,168,0.55);
}
.reserve-batch-row.is-past { opacity: 0.5; cursor: not-allowed; }
.reserve-batch-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.16), rgba(139,92,246,0.12)); color: var(--teal-dark, #0a8a7a);
}
.reserve-batch-row:nth-child(1) .reserve-batch-icon { background: linear-gradient(135deg, rgba(242,169,59,0.28), rgba(242,169,59,0.14)); color: var(--amber-dark, #b3730f); }
.reserve-batch-row:nth-child(2) .reserve-batch-icon { background: linear-gradient(135deg, rgba(0,194,168,0.28), rgba(0,194,168,0.14)); color: var(--teal-dark, #0a8a7a); }
.reserve-batch-row:nth-child(3) .reserve-batch-icon { background: linear-gradient(135deg, rgba(139,92,246,0.28), rgba(139,92,246,0.14)); color: #7c3aed; }
.reserve-batch-icon svg { width: 18px; height: 18px; }
.reserve-batch-text { display: flex; flex-direction: column; align-items: center; }
.reserve-batch-text strong { font-size: 13px; color: var(--ink); }
.reserve-batch-text span { font-size: 11.5px; color: var(--slate); margin-top: 1px; }
.reserve-batch-slots {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 9px; border-radius: 999px; color: #0a7a3f; background: rgba(34,197,94,0.12);
}
.reserve-batch-slots.is-closed { color: var(--slate); background: var(--line); }

/* Step-number badges shared by both "1. Pick a date & batch" and
   "2. Your details" headings — small gradient circle instead of a plain
   "1."/"2." text prefix. */
.reserve-details-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-right: 8px;
  background: var(--brand-gradient); color: #fff; font-size: 13px; font-weight: 800;
  font-family: var(--font-body); vertical-align: middle;
  box-shadow: 0 6px 14px -6px rgba(139,92,246,0.5);
}
/* "Your details" gets its own soft-tinted card, matching the rich-look
   language used everywhere else on this page instead of sitting as a
   bare, unstyled form directly on the white card background. */
.reserve-details-section {
  margin-top: 28px; padding: 20px 22px;
  border-radius: 18px; border: 1px solid rgba(0,194,168,0.18);
  background: linear-gradient(160deg, rgba(0,194,168,0.05), rgba(139,92,246,0.04));
}
.reserve-details-section .form-field input { background: #fff; }

/* Payment button — deliberately smaller/compact, not a full-width bar. */
.reserve-pay-btn {
  display: block; margin: 0 auto; width: auto;
  padding: 11px 30px !important; font-size: 13.5px !important;
  box-shadow: 0 10px 24px -10px rgba(242,169,59,0.55);
}

.reserve-confirmed-state { text-align: center; padding: 20px 10px; animation: booking-pop-in .35s ease; }
.reserve-confirmed-state p { color: var(--slate); font-size: 14.5px; line-height: 1.7; }
.connect-thanks-step .btn { margin-top: 18px; }

/* ============================================================
   SHARED CIRCULAR PROGRESS RING (progress-ring.js) — used by the
   Student Dashboard course cards and the redesigned My Journey header
   ring + per-stage mini rings.
   ============================================================ */
.progress-ring { position: relative; flex-shrink: 0; }
.progress-ring svg { display: block; }
.progress-ring-track { stroke: rgba(11, 19, 32, 0.08); }
.progress-ring-fill {
  stroke: var(--teal);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-ring-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--ink);
}
/* ---- Course-completion feedback popup — star rating row ---- */
.feedback-star-row { display: flex; justify-content: center; gap: 6px; margin: 18px 0 14px; }
.feedback-star-btn {
  background: none; border: none; cursor: pointer; font-size: 32px; line-height: 1;
  color: rgba(11,19,32,0.15); transition: color .12s ease, transform .12s ease;
  padding: 0;
}
.feedback-star-btn:hover { transform: scale(1.15); }
.feedback-star-btn.is-filled { color: var(--amber); }

.progress-ring-complete-disc { fill: #22c55e; display: none; }
.progress-ring.is-complete .progress-ring-complete-disc { display: block; }
.progress-ring.is-complete .progress-ring-track,
.progress-ring.is-complete .progress-ring-fill { opacity: 0; }
.progress-ring.is-complete .progress-ring-label { color: #fff; }

/* ============================================================
   STUDENT DASHBOARD
   ============================================================ */
/* ---- Compact header bar (replaces the old tall page-banner) ---- */
.dashboard-header-bar {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #0B1320 0%, #131c30 55%, #1a1030 100%);
  padding: 20px 0 18px;
}
.dashboard-header-top {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
}
.dashboard-header-title-group { display: flex; align-items: center; gap: 14px; }
.dashboard-header-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.2), rgba(139,92,246,0.18)); color: #4ee6cd;
}
.dashboard-header-icon svg { width: 20px; height: 20px; }
.dashboard-header-title-group h1 { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 21px; margin: 0 0 2px; }
.dashboard-header-title-group p { color: rgba(255,255,255,0.55); font-size: 12.5px; margin: 0; }

/* Reg. ID + Last Login — rich right-end labels in the header top bar
   (moved up from a separate meta-chip row below the header). */
.dashboard-header-meta { display: flex; align-items: center; gap: 18px; }
.dashboard-header-meta-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dashboard-header-meta-item svg { width: 17px; height: 17px; color: #4ee6cd; flex-shrink: 0; }
.dashboard-header-meta-label {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45); margin-bottom: 2px;
}
.dashboard-header-meta-item strong {
  display: block; font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; color: #fff;
}
.dashboard-header-meta-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.14); }
@media (max-width: 640px) { .dashboard-header-meta { width: 100%; } .dashboard-header-meta-item { flex: 1; } }

/* The real dashboard shell (placeholder-shaped, always in the DOM) gets
   blurred and non-interactive while locked — NOT hidden behind a
   separate full-screen overlay. That distinction matters: the login
   modal from partials/footer.html is z-index:300, so this blur layer's
   own callout box is deliberately kept BELOW that (z-index:50) — it can
   never sit on top of and swallow clicks meant for the modal (or its
   reCAPTCHA widget) the way the old full-screen lock overlay did. */
/* Lighter than a plain uniform blur — the stats row and course carousel
   specifically stay legible enough to read as a "here's what's waiting
   for you" preview (numbers/course art still recognizable) rather than
   an unreadable smear, while the side panels (upcoming sessions/
   notifications) keep a heavier blur since they're less useful as a
   teaser. Still fully non-interactive either way.
   .dashboard-grid itself is deliberately excluded from the broad rule
   below and given no filter of its own — filters don't cascade through
   inheritance but DO compound when applied to both an element and its
   ancestor (each renders to its own buffer and blurs again on
   composite), so blurring .dashboard-grid AND its .dashboard-main-col
   child at different strengths would stack instead of the child's
   lighter value actually winning. Applying each filter directly to a
   leaf container avoids that. */
#dashboardContent.dashboard-locked > *:not(#dashboardLockedCallout):not(.dashboard-grid) {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.3s ease;
}
#dashboardContent.dashboard-locked .dashboard-stats-row,
#dashboardContent.dashboard-locked .dashboard-main-col {
  filter: blur(2.5px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.3s ease;
}
#dashboardContent.dashboard-locked .dashboard-side-col {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.3s ease;
}
.dashboard-locked-callout {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.35);
}
.dashboard-locked-callout:not(.hidden) { display: flex; }
.dashboard-locked-callout-box {
  text-align: center; max-width: 380px; padding: 40px 36px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 24px; box-shadow: 0 30px 70px -25px rgba(15,23,42,0.35);
}
.dashboard-lock-icon {
  width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.14), rgba(139,92,246,0.12)); color: var(--teal-dark, #0a8a7a);
}
.dashboard-lock-icon svg { width: 26px; height: 26px; }
.dashboard-locked-callout-box p { color: var(--slate); font-size: 14.5px; line-height: 1.6; margin: 0 0 22px; }

.dashboard-stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 1100px) { .dashboard-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .dashboard-stats-row { grid-template-columns: repeat(2, 1fr); } }
.dashboard-stat-card {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; gap: 14px; padding: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 16px 36px -22px rgba(15,23,42,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-gradient); opacity: 0.9;
}
.dashboard-stat-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(15,23,42,0.24); }
.dashboard-stat-card strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 22px; color: var(--ink); }
.dashboard-stat-card span { font-size: 12px; color: var(--slate); font-weight: 600; }
.dashboard-stat-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.dashboard-stat-icon svg { width: 20px; height: 20px; }
.dashboard-stat-icon-teal { background: rgba(0,194,168,0.12); color: #00a892; }
.dashboard-stat-icon-violet { background: rgba(139,92,246,0.12); color: #7c4de0; }
.dashboard-stat-icon-amber { background: rgba(242,169,59,0.15); color: #b9791b; }
.dashboard-stat-icon-rose { background: rgba(236,72,153,0.12); color: #db2777; }
.dashboard-stat-icon-indigo { background: rgba(59,130,246,0.12); color: #2563eb; }

.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 960px) { .dashboard-grid { grid-template-columns: 1fr; } }
.dashboard-section-title { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 18px; }

/* ---- One-by-one course carousel — same peek/slide mechanics as the
   homepage offerings carousel (student-dashboard.js drives the
   transform + dots), shown one full slide-style card at a time instead
   of a static grid, since a full slide needs the room. ---- */
.dashboard-course-carousel { position: relative; }
.dashboard-course-viewport { position: relative; overflow: hidden; border-radius: 26px; }
.dashboard-course-track { display: flex; transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.dashboard-course-slide { flex: 0 0 100%; min-width: 0; }
.dashboard-course-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #0b1320;
  box-shadow: 0 10px 30px rgba(11, 19, 32, 0.2);
  z-index: 10; transition: transform 0.15s ease;
}
.dashboard-course-nav:hover { transform: translateY(-50%) scale(1.08); }
.dashboard-course-nav-prev { left: -18px; }
.dashboard-course-nav-next { right: -18px; }
@media (max-width: 560px) { .dashboard-course-nav-prev { left: -8px; } .dashboard-course-nav-next { right: -8px; } .dashboard-course-nav { width: 36px; height: 36px; } }
.dashboard-course-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.dashboard-course-dot { width: 9px; height: 9px; border-radius: 999px; background: #e2e8f0; transition: background 0.2s ease, width 0.2s ease; border: none; padding: 0; cursor: pointer; }
.dashboard-course-dot.is-active { background: #00c2a8; width: 26px; }

/* Course tiles — the same rich visual language as the homepage "What We
   Provide" offering slides (full-bleed track image + tint fade + title
   pill). The .offering-tint-* classes and .offering-slide-inner's
   gradient fade are shared via the SAME class names for visual
   consistency, layered under dashboard-specific structure (status
   badge, progress bar, CTA) instead of the Enroll/Know-More buttons
   those slides use. */
.dashboard-course-tile {
  --tint-1: #00c2a8; --tint-2: #00a892; --tint-3: #0b1320;
  position: relative; display: block; overflow: hidden;
  min-height: 340px; border-radius: 26px; padding: 30px;
  background: linear-gradient(120deg, var(--tint-1), var(--tint-2) 60%, var(--tint-3));
  box-shadow: 0 30px 60px -24px rgba(11,19,32,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-course-tile:hover { transform: translateY(-4px); box-shadow: 0 34px 66px -22px rgba(11,19,32,0.45); }
.dashboard-course-tile::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--tint-3) 0%, rgba(11,19,32,0.55) 45%, transparent 78%);
}
.dashboard-course-tile-art { position: absolute; inset: 0; z-index: 0; }
.dashboard-course-tile-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dashboard-course-tile-status {
  position: relative; z-index: 2; display: inline-block;
  padding: 6px 16px; border-radius: 999px; font-size: 12px; font-weight: 700;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dashboard-course-tile-status.is-progress { background: rgba(242,169,59,0.22); color: #ffd889; border: 1px solid rgba(242,169,59,0.4); }
.dashboard-course-tile-status.is-complete { background: rgba(34,197,94,0.22); color: #86efac; border: 1px solid rgba(34,197,94,0.4); }
.dashboard-course-tile-text { position: relative; z-index: 2; margin-top: 100px; max-width: 480px; }
.dashboard-course-tile-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; color: #fff;
  margin: 0 0 8px; text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.dashboard-course-tile-text p { font-size: 13.5px; color: rgba(255,255,255,0.78); margin: 0 0 16px; }
.dashboard-course-tile-progress { margin-bottom: 18px; max-width: 320px; }
.dashboard-course-tile-progress-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: hidden; margin-bottom: 6px; }
.dashboard-course-tile-progress-bar div { height: 100%; background: linear-gradient(90deg, #4ee6cd, #00c2a8); border-radius: 999px; }
.dashboard-course-tile-progress span { font-size: 11.5px; color: rgba(255,255,255,0.7); font-weight: 600; }
.dashboard-course-tile-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #0b1320;
  background: #fff; padding: 11px 24px; border-radius: 999px;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,0.35);
  transition: transform 0.15s ease;
}
.dashboard-course-tile-cta svg { width: 14px; height: 14px; transition: transform .15s ease; }
.dashboard-course-tile:hover .dashboard-course-tile-cta { transform: translateY(-2px); }
.dashboard-course-tile:hover .dashboard-course-tile-cta svg { transform: translateX(3px); }
@media (max-width: 640px) {
  .dashboard-course-tile { min-height: 300px; padding: 22px; }
  .dashboard-course-tile-text { margin-top: 70px; }
  .dashboard-course-tile-title { font-size: 21px; }
}

.dashboard-empty-state {
  text-align: center; padding: 50px 30px; background: var(--paper-soft); border: 1px solid var(--line);
  border-radius: 20px;
}
.dashboard-empty-icon {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.14), rgba(139,92,246,0.12)); color: var(--teal-dark, #0a8a7a);
}
.dashboard-empty-icon svg { width: 26px; height: 26px; }
.dashboard-empty-state p { color: var(--slate); font-size: 14px; margin: 0 0 18px; }

.dashboard-panel {
  position: relative;
  overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px;
  box-shadow: 0 20px 44px -26px rgba(15,23,42,0.22); margin-bottom: 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dashboard-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand-gradient);
}
.dashboard-panel:hover { transform: translateY(-2px); box-shadow: 0 26px 52px -24px rgba(15,23,42,0.28); }
.dashboard-panel h3 {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; margin: 0 0 18px; color: var(--ink);
}
.dashboard-panel h3 svg { width: 18px; height: 18px; padding: 5px; box-sizing: content-box; border-radius: 9px; background: rgba(0,194,168,0.12); color: var(--teal-dark, #0a8a7a); }
.dashboard-panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dashboard-panel-head-row h3 { margin: 0 0 18px; }
.dashboard-book-session-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: var(--brand-gradient); padding: 7px 14px; border-radius: 999px;
  margin-bottom: 14px; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(139,92,246,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-book-session-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(139,92,246,0.55); }
.dashboard-side-list { display: flex; flex-direction: column; gap: 10px; }
.dashboard-side-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: var(--paper-soft);
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dashboard-side-item:hover { transform: translateX(2px); border-color: rgba(0,194,168,0.25); box-shadow: 0 10px 22px -16px rgba(15,23,42,0.25); }
.dashboard-side-item.is-unread { background: rgba(0,194,168,0.06); border-color: rgba(0,194,168,0.2); }
.dashboard-side-item-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.16), rgba(139,92,246,0.12)); color: var(--teal-dark, #0a8a7a);
}
.dashboard-side-item-icon svg { width: 15px; height: 15px; }
.dashboard-side-item strong { display: block; font-size: 13px; color: var(--ink); }
.dashboard-side-item span { font-size: 11.5px; color: var(--slate); }
.dashboard-side-empty { font-size: 12.5px; color: var(--slate); text-align: center; padding: 10px 0; }
/* Per-notification dismiss ("×") — the dashboard's Notifications panel
   is the site's actual live notification surface (the older bell-
   dropdown markup this same button style was modeled on isn't present
   in the header at all), and had no way to clear a single item. */
.dashboard-notif-dismiss-btn {
  flex-shrink: 0; width: 24px; height: 24px; margin-left: auto;
  border-radius: 999px; border: none; background: rgba(15,23,42,0.06);
  color: var(--slate); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dashboard-notif-dismiss-btn:hover { background: rgba(229,72,77,0.15); color: var(--danger, #e5484d); }
.dashboard-notif-dismiss-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Upcoming-session rows render as <button>s (clickable, opens the
   details popup) — reset the native button chrome back to plain text so
   they still look identical to the notification rows beside them. */
.dashboard-side-item-clickable {
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
}

/* ---- Booking/session details popup (dashboard Upcoming Sessions) ---- */
.session-detail-box { max-width: 420px; text-align: center; padding-top: 36px; }
.session-detail-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.14), rgba(139,92,246,0.14)); color: var(--teal-dark, #0a8a7a);
}
.session-detail-icon svg { width: 24px; height: 24px; }
.session-detail-box h3 { margin: 0 0 18px; }
.session-detail-rows { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 6px; }
.session-detail-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px; background: var(--paper-soft);
  font-size: 13.5px; color: var(--ink); font-weight: 600;
}
.session-detail-row svg { flex-shrink: 0; color: var(--teal-dark, #0a8a7a); }
.session-detail-row-muted { color: var(--slate); font-weight: 500; }
.session-detail-row-muted svg { color: var(--slate); }
.session-detail-warning {
  text-align: left; margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: rgba(242,169,59,0.1); border: 1px solid rgba(242,169,59,0.35);
}
.session-detail-warning p { margin: 0 0 12px; font-size: 13px; color: var(--ink); line-height: 1.5; }
.session-detail-warning-actions { display: flex; gap: 8px; }
.session-detail-warning-actions .btn { flex: 1; }
.session-detail-actions { display: flex; gap: 10px; margin-top: 20px; }
.session-detail-actions .btn { flex: 1; }

/* ============================================================
   MY PROFILE (account.html) — profile photo upload, read-only
   Registration ID field, and the redesigned Security panel.
   ============================================================ */
.profile-photo-row {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.profile-photo-frame {
  position: relative; flex-shrink: 0;
  width: 84px; height: 84px; border-radius: 999px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.14), rgba(139,92,246,0.12));
  border: 2px solid rgba(0,194,168,0.3);
}
.profile-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-frame svg { width: 38px; height: 38px; color: var(--teal-dark, #0a8a7a); }
.profile-photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.profile-photo-actions .form-error { margin: 0; }

/* Read-only Registration ID field — same shape as an editable input so
   it lines up in the grid, but visibly non-interactive (muted fill, no
   focus ring, not-allowed cursor). */
.readonly-field {
  background: var(--paper-soft) !important;
  color: var(--slate) !important;
  cursor: not-allowed;
  font-weight: 600;
}

.security-panel {
  display: flex; align-items: flex-start; gap: 18px;
  background: linear-gradient(135deg, rgba(0,194,168,0.06), rgba(139,92,246,0.05));
  border: 1px solid rgba(0,194,168,0.16);
  border-radius: var(--radius-lg); padding: 28px 32px;
}
.security-panel-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,194,168,0.18), rgba(139,92,246,0.14)); color: var(--teal-dark, #0a8a7a);
}
.security-panel-icon svg { width: 22px; height: 22px; }
.security-panel-text p { color: var(--slate); margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; }

/* ============================================================
   ABOUT US PAGE
   ============================================================ */
.about-hero-rich { padding: 76px 0 92px; }
.about-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.about-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 7px 16px;
  background: rgba(0,194,168,0.14); border: 1px solid rgba(0,194,168,0.35);
  color: #5EEAD4; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.about-hero-rich h1 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(32px, 5vw, 48px); line-height: 1.15; margin: 20px 0 0;
}
.about-hero-highlight {
  background: linear-gradient(120deg, #00C2A8, #8B5CF6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-hero-lead { margin: 20px auto 0; max-width: 640px; font-size: 16px; line-height: 1.7; }
.about-hero-ctas { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-outline-light {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid rgba(255,255,255,0.35); color: #fff;
  border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 14.5px;
  transition: border-color .15s ease, background .15s ease;
}
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.about-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .about-compare-grid { grid-template-columns: 1fr; } }
.about-compare-card {
  border-radius: 20px; padding: 28px 26px;
  border: 1.5px solid var(--line);
}
.about-compare-card ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.about-compare-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.about-compare-tag { display: inline-block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.about-compare-old {
  background: rgba(148,163,184,0.06); border-color: rgba(148,163,184,0.25);
}
.about-compare-old .about-compare-tag { color: var(--slate); }
.about-compare-old li { color: var(--slate); }
.about-compare-old li i { color: #ef4444; flex-shrink: 0; margin-top: 2px; }
.about-compare-new {
  background: linear-gradient(160deg, rgba(0,194,168,0.08), rgba(139,92,246,0.05));
  border-color: rgba(0,194,168,0.35);
  box-shadow: 0 20px 45px -28px rgba(0,194,168,0.4);
}
.about-compare-new .about-compare-tag { color: var(--teal-dark, #0a8a7a); }
.about-compare-new li { color: var(--ink); font-weight: 500; }
.about-compare-new li i { color: var(--teal); flex-shrink: 0; margin-top: 2px; }

.about-section-alt { background: var(--paper-soft); }

.about-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-stat-tile {
  border-radius: 18px; padding: 22px 20px;
  background: linear-gradient(160deg, rgba(0,194,168,0.07), rgba(139,92,246,0.05));
  border: 1px solid rgba(0,194,168,0.2);
}
.about-stat-tile strong { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); }
.about-stat-tile span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--slate); line-height: 1.4; }

.about-impact-section { background: var(--paper-soft); }
.about-impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 780px; margin-left: auto; margin-right: auto; }
.about-impact-card {
  position: relative; overflow: hidden;
  text-align: center; border-radius: 22px; padding: 34px 24px 28px;
  background: linear-gradient(160deg, rgba(0,194,168,0.09), rgba(139,92,246,0.06));
  border: 1.5px solid rgba(0,194,168,0.22);
  box-shadow: 0 24px 50px -30px rgba(0,194,168,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.about-impact-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -28px rgba(0,194,168,0.45); }
.about-impact-icon.about-impact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 14px;
  background: linear-gradient(120deg, #00C2A8, #8B5CF6); color: #fff; padding: 11px;
}
.about-impact-number {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 6vw, 52px); line-height: 1.1;
  background: linear-gradient(120deg, #00C2A8, #8B5CF6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-impact-label { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.about-impact-sub { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--slate); }
@media (max-width: 640px) { .about-impact-grid { grid-template-columns: 1fr; max-width: 320px; } }

@media (max-width: 560px) { .security-panel { flex-direction: column; } }