/* ─────────────────────────────────────────────────────────────────
   Lesson page — redesigned class selection.
   Self-contained: scoped under .lesson-shell so it cannot leak into
   the rest of the site CSS when this is dropped into lesson.jsp.
   ───────────────────────────────────────────────────────────────── */

:root {
  --rmx-red:        #dc1c2e;
  --rmx-red-deep:   #b21825;
  --rmx-ink:        #0a1530;
  --rmx-ink-2:      #0f1f4f;
  --rmx-cream:      #f3eee6;
  --rmx-line:       rgba(255,255,255,0.08);
  --rmx-line-2:     rgba(255,255,255,0.16);
  --rmx-mute:       rgba(243,238,230,0.62);
  --rmx-mute-2:     rgba(243,238,230,0.78);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--rmx-ink);
  color: var(--rmx-cream);
  -webkit-font-smoothing: antialiased;
}

/* Page shell + ambient background. The radial spotlight is steered
   by --spot-x / --spot-y which we update in JS as the user picks a tier;
   it gives the pretty "selected" affordance without being noisy. */
.lesson-shell {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(1100px 700px at var(--spot-x, 20%) var(--spot-y, 30%),
       rgba(220,28,46,0.16) 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 80%, rgba(15,31,79,0.7) 0%, transparent 70%),
    linear-gradient(180deg, #06102a 0%, #0a1530 40%, #0f1f4f 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Decorative grid — barely visible texture. Disabled when --bg-texture: 0 */
.lesson-shell::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  opacity: var(--bg-texture, 1);
  transition: opacity .4s;
}

/* ── Top nav ─────────────────────────────────────────────────── */
.lesson-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(14px);
  background: rgba(6,16,42,0.55);
  border-bottom: 1px solid var(--rmx-line);
}
.lesson-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lesson-nav .brand img { height: 30px; }
.lesson-nav .brand .brand-pipe { color: rgba(255,255,255,0.2); font-weight: 300; }
.lesson-nav .brand .brand-tag {
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: var(--rmx-cream); opacity: 0.78;
}
.quick-cta {
  background: var(--rmx-red); color: #fff; text-decoration: none;
  padding: 10px 22px; border-radius: 999px;
  font-weight: 700; font-size: 0.84rem;
  box-shadow: 0 8px 22px -10px rgba(220,28,46,0.7);
  transition: transform .15s, box-shadow .15s;
}
.quick-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(220,28,46,0.85); }

/* ── Hero block — full viewport, video-backed ──────────────────
   Mirrors home.jsp's .hero-block / .block-bg / .block-overlay so
   production can drop in <video class="block-bg scroll-play"> in
   place of our placeholder <img class="block-bg">. The video sits
   in .block-bg-wrap with pointer-events: none so the user can't
   click/scrub it; only the CTA + scroll hint are interactive. */
.hero-block {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 96px 24px 120px;
  overflow: hidden;
  isolation: isolate;
}
.hero-block .block-bg-wrap {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; /* video/image is purely decorative */
}
.hero-block .block-bg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* On mobile we want the portrait clip (admin uploads as heroMediaMob) to
   show in full — the source is already a phone-aspect stack, so cover
   would crop it. contain centers it with the hero gradient as backdrop. */
@media (max-width: 700px) {
  .hero-block .block-bg { object-fit: contain; }
}
.hero-block .block-bg-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(6,16,42,0.65) 75%),
    linear-gradient(180deg, rgba(6,16,42,0.45) 0%, rgba(6,16,42,0.7) 60%, rgba(6,16,42,0.95) 100%);
}
.hero-block .block-overlay {
  max-width: 920px; margin: 0 auto;
  position: relative; z-index: 1;
}
.hero-eyebrow {
  display: inline-block; padding: 6px 18px; border-radius: 999px;
  background: rgba(220,28,46,0.16); border: 1px solid rgba(220,28,46,0.4);
  color: #ffb4bc; font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700;
  backdrop-filter: blur(8px);
}
.hero-title {
  font-family: 'Playfair Display', 'Manrope', serif;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 22px 0 14px;
  line-height: 1.04;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.hero-sub {
  color: rgba(243,238,230,0.88);
  max-width: 640px; margin: 0 auto 36px;
  line-height: 1.6; font-size: clamp(1rem, 1.5vw, 1.12rem);
  text-wrap: pretty;
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; border-radius: 999px;
  background: var(--rmx-red); color: #fff;
  text-decoration: none; font-weight: 800; font-size: 0.96rem;
  letter-spacing: 0.04em;
  box-shadow: 0 18px 40px -14px rgba(220,28,46,0.7);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.hero-cta:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 24px 50px -16px rgba(220,28,46,0.85); }
.hero-cta .arrow { transition: transform .25s; }
.hero-cta:hover .arrow { transform: translateY(3px); }

.hero-scroll-hint {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  padding-bottom: 22px;
  animation: scrollHint 2s infinite;
}
.hero-scroll-hint::after {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  width: 1px; height: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
  transform: translateX(-50%);
}
@keyframes scrollHint {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────
   MAIN PICKER LAYOUT
   Desktop: 2-col grid — tier sidebar (left, 320px) + class panel
   Mobile  : tier carousel on top, classes stacked below
   ────────────────────────────────────────────────────────────── */
/* Add space above picker since hero is full-screen */
.picker-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 28px 96px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.picker-wrap[data-layout="vertical"] { grid-template-columns: 320px minmax(0, 1fr); }
.picker-wrap[data-layout="topbar"]   { grid-template-columns: minmax(0, 1fr); }

/* ── Tier sidebar ────────────────────────────────────────────── */
.tier-rail {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--rmx-line);
  border-radius: 22px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
.tier-rail::-webkit-scrollbar { width: 4px; }
.tier-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

.tier-rail-head {
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--rmx-line);
  margin-bottom: 4px;
}
.tier-rail-head .eyebrow {
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: rgba(243,238,230,0.5);
}
.tier-rail-head .h {
  font-size: 0.96rem; font-weight: 700; color: #fff;
  margin: 4px 0 0;
}

/* Each tier — a row card. */
.tier-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--rmx-line);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform var(--motion-fast, .18s) ease,
              border-color var(--motion-fast, .18s),
              background var(--motion-fast, .18s);
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  outline: none;
}
.tier-card:hover {
  border-color: rgba(220,28,46,0.45);
  background: rgba(220,28,46,0.06);
}
.tier-card:focus-visible {
  border-color: var(--rmx-red);
  box-shadow: 0 0 0 3px rgba(220,28,46,0.25);
}
.tier-card.selected {
  border-color: var(--rmx-red);
  background: linear-gradient(135deg, rgba(220,28,46,0.18), rgba(220,28,46,0.06));
  box-shadow: 0 18px 40px -22px rgba(220,28,46,0.7),
              inset 0 1px 0 rgba(255,255,255,0.08);
}
.tier-card.selected::before {
  /* a left-edge accent on selection */
  content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 4px; background: var(--rmx-red);
  box-shadow: 0 0 18px rgba(220,28,46,0.7);
}

.tier-card .tier-num {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--rmx-line-2);
  font-weight: 800; font-size: 0.86rem;
  color: var(--rmx-cream);
  font-feature-settings: 'tnum';
  transition: background var(--motion-fast, .18s);
}
.tier-card.selected .tier-num {
  background: var(--rmx-red); border-color: transparent; color: #fff;
}

.tier-card .tier-body { min-width: 0; }
.tier-card .tier-name {
  font-size: 0.88rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.2;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tier-card .tier-meta {
  font-size: 0.74rem; color: var(--rmx-mute);
  margin-top: 4px;
  display: flex; align-items: center; gap: 8px;
}
.tier-card .tier-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.3); }

.tier-card .tier-price {
  text-align: right;
  font-size: 0.86rem; font-weight: 800; color: #fff;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.tier-card .tier-price small {
  display: block;
  font-size: 0.62rem; font-weight: 500;
  color: var(--rmx-mute);
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.tier-card .tier-badge {
  position: absolute; top: -8px; right: 14px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--rmx-red); color: #fff;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* TOPBAR layout variant — horizontal tier strip on desktop */
.picker-wrap[data-layout="topbar"] .tier-rail {
  position: static; max-height: none; overflow: visible;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px;
}
.picker-wrap[data-layout="topbar"] .tier-rail-head { display: none; }
.picker-wrap[data-layout="topbar"] .tier-card { grid-template-columns: 32px 1fr auto; padding: 12px 14px; }

/* ── Class panel ─────────────────────────────────────────────── */
.class-panel { min-width: 0; }
.class-panel-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.class-panel-head .ph-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: var(--rmx-red);
  margin-bottom: 6px;
}
.class-panel-head h2 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800; letter-spacing: -0.015em;
  margin: 0; color: #fff;
}
.class-panel-head .ph-sub {
  color: var(--rmx-mute-2);
  font-size: 0.92rem; line-height: 1.6;
  margin: 6px 0 0;
}
.class-count-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--rmx-line);
  font-size: 0.78rem; font-weight: 600; color: var(--rmx-mute-2);
  font-feature-settings: 'tnum';
}
.class-count-pill .num { color: #fff; font-weight: 800; }

/* ── Tier showcase — one product image at top of class panel.
     Two stacked <img>s so swaps between tiers are flicker-free.
     The card is sized to wrap the image (4:5 portrait, matches the
     source artwork) and centered horizontally — no empty side space
     even when the right column is much wider than the picture. No
     overlay — the source artwork already contains program name +
     price banner + certificate. */
.tier-showcase {
  position: relative;
  margin: 4px auto 22px;
  max-width: 460px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1530 0%, #0f1f4f 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 26px 60px -28px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Frame aspect matches the source artwork (1080×1350 = 4:5) so
   object-fit: cover lands edge-to-edge with nothing cropped or
   letterboxed for the bundled tier images. */
.tier-showcase .ts-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.tier-showcase .ts-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .35s ease;
}
.tier-showcase .ts-img.on { opacity: 1; }

@media (max-width: 700px) {
  .tier-showcase { max-width: 100%; }
}

/* The grid that holds class cards. auto-fit so it adapts from 1 col on
   small screens up to 2 on a wide right pane. minmax min is 0 so the
   grid never demands more than the parent's width (prevents mobile overflow). */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 16px;
  min-width: 0;
}

/* Empty state */
.class-empty {
  padding: 40px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--rmx-line-2);
  border-radius: 18px;
  color: var(--rmx-mute);
}

/* ── Class card ──────────────────────────────────────────────── */
.class-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid var(--rmx-line-2);
  border-radius: 18px;
  padding: 20px 22px 22px;
  display: flex; flex-direction: column;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
  overflow: hidden;
}
.class-card::after {
  /* Hover sheen — animated shimmer when hovered */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .9s ease;
  pointer-events: none;
}
.class-card:hover {
  transform: translateY(-3px);
  border-color: rgba(220,28,46,0.4);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,0.6),
              0 1px 0 rgba(255,255,255,0.06) inset;
}
.class-card:hover::after { transform: translateX(100%); }

.class-card.full {
  opacity: 0.72;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
}
.class-card.full:hover { transform: none; box-shadow: none; }

/* Header row: batch + status pill */
.cls-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 12px;
}
.cls-batch {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rmx-red);
  background: rgba(220,28,46,0.12); border: 1px solid rgba(220,28,46,0.28);
  padding: 4px 10px; border-radius: 6px;
}
.cls-status {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.cls-status .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulseRing 1.8s infinite;
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.cls-status.open    { background: rgba(34,197,94,0.12);  color: #4ade80; border:1px solid rgba(34,197,94,0.3); }
.cls-status.low     { background: rgba(251,191,36,0.12); color: #fbbf24; border:1px solid rgba(251,191,36,0.32); }
.cls-status.full    { background: rgba(220,28,46,0.14);  color: #ff8a96; border:1px solid rgba(220,28,46,0.4); }

.cls-name {
  font-size: 1rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 4px; color: #fff;
}
.cls-time {
  font-size: 0.86rem; color: var(--rmx-mute-2);
  font-feature-settings: 'tnum';
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.cls-time .ico {
  width: 14px; height: 14px; flex: none;
  stroke: rgba(243,238,230,0.5); fill: none; stroke-width: 1.6;
}
.cls-time .sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.cls-time .dates { color: var(--rmx-mute); }

/* ── Week strip — the visual schedule. 7 columns Mon..Sun.
     Each cell is a tall column; the active days draw a vertical
     time-slot bar so the user can read the schedule at a glance. */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 10px 0 18px;
  background: rgba(0,0,0,0.22);
  border-radius: 12px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.04);
}
.week-day {
  position: relative;
  aspect-ratio: 1 / 1.4;
  min-height: 56px;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 7px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243,238,230,0.4);
  overflow: hidden;
  transition: background .25s, color .25s, transform .25s;
}
.week-day.weekend { background: rgba(255,255,255,0.015); color: rgba(243,238,230,0.28); }
.week-day.active {
  background: linear-gradient(180deg, rgba(220,28,46,0.22), rgba(220,28,46,0.05));
  color: #ffd5d9;
  box-shadow: inset 0 0 0 1px rgba(220,28,46,0.4);
}
.week-day.active::before {
  /* The time-slot bar — a vertical sliver positioned by --slot-top/--slot-bot
     (computed in JS as percentages of a 8h..21h window). */
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: var(--slot-top, 30%);
  height: var(--slot-height, 30%);
  width: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ff5765, var(--rmx-red));
  box-shadow: 0 0 16px rgba(220,28,46,0.85), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ── Capacity — day-by-day seats grid (24 dots) ─────────────── */
.cap-block { margin-top: auto; }
.cap-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; margin-bottom: 8px;
}
.cap-head .label { color: var(--rmx-mute); letter-spacing: 0.04em; }
.cap-head .count {
  font-weight: 800; color: #fff;
  font-feature-settings: 'tnum';
}
.cap-head .count .total { color: var(--rmx-mute); font-weight: 600; }

.seats-grid {
  display: grid;
  /* dynamic column count via inline --cols (defaults to 12 when capacity = 24) */
  grid-template-columns: repeat(var(--cols, 12), 1fr);
  gap: 4px;
  margin-bottom: 14px;
}
.seat {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.04);
  transition: transform .25s ease, background .25s, box-shadow .25s;
  transform: scale(0.6);
  opacity: 0;
}
.seat.in {
  transform: scale(1);
  opacity: 1;
}
.seat.taken {
  background: linear-gradient(135deg, var(--rmx-red), #ff5765);
  box-shadow: 0 2px 8px -2px rgba(220,28,46,0.6);
  border-color: transparent;
}
.seat.taken.you {
  /* The would-be-you seat — pulses softly. We don't know which one,
     but we can highlight the next free seat. */
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 0 2px rgba(251,191,36,0.4), 0 0 14px rgba(251,191,36,0.5);
  animation: seatPulse 1.4s infinite ease-in-out;
}
@keyframes seatPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.cls-pick {
  width: 100%; padding: 14px;
  border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--rmx-red), var(--rmx-red-deep));
  color: #fff; font-weight: 800; font-size: 0.94rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s, box-shadow .15s, filter .15s;
  box-shadow: 0 10px 28px -12px rgba(220,28,46,0.6);
}
.cls-pick:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 36px -14px rgba(220,28,46,0.7); }
.cls-pick:disabled {
  background: rgba(255,255,255,0.06);
  color: rgba(243,238,230,0.4);
  cursor: not-allowed; box-shadow: none; transform: none;
}
.cls-pick .arrow { transition: transform .2s; }
.cls-pick:hover .arrow { transform: translateX(4px); }

/* ── Stagger reveal for class cards on tier change ──────────── */
.class-card {
  opacity: 0; transform: translateY(12px);
  animation: cardIn .5s var(--idx-delay, 0s) cubic-bezier(.2,.7,.2,1) forwards;
}
.no-motion .class-card { opacity: 1; transform: none; animation: none; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Tier change — blanket fade so the panel doesn't pop */
.class-panel.changing { animation: panelFade .25s ease; }
@keyframes panelFade { from { opacity: .3; } to { opacity: 1; } }

/* ── Mobile: tier rail stacks vertically, classes underneath ─── */
@media (max-width: 900px) {
  .picker-wrap {
    grid-template-columns: minmax(0, 1fr);
    padding: 40px 16px 80px;
    gap: 18px;
  }
  .picker-wrap[data-layout="vertical"],
  .picker-wrap[data-layout="topbar"] { grid-template-columns: minmax(0, 1fr); }

  /* Tier rail keeps its sidebar look but is no longer sticky and
     sits at the top of the page on mobile. Cards stack vertically. */
  .tier-rail {
    position: static;
    max-height: none;
    overflow: visible;
    flex-direction: column;
    padding: 18px;
  }
  .tier-rail-head { display: block; }
  .tier-card {
    flex: none; max-width: none; width: 100%;
    grid-template-columns: 36px 1fr auto;
  }
  /* Hide the carousel dots — no longer a carousel */
  .tier-dots { display: none !important; }

  .class-panel { min-width: 0; max-width: 100%; }
  .class-panel-head h2 { font-size: 1.4rem; }
  .class-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .class-card { padding: 18px 18px 20px; }
  .week-day { font-size: 0.56rem; min-height: 44px; }
  .seats-grid { grid-template-columns: repeat(var(--cols-mobile, 8), 1fr); }

  .hero-block { padding: 80px 20px 100px; }
  .hero-scroll-hint { bottom: 18px; }
  .lesson-nav { padding: 14px 18px; }
  .quick-cta { padding: 8px 16px; font-size: 0.78rem; }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .lesson-nav .brand img { height: 24px; }
  .lesson-nav .brand .brand-tag { font-size: 0.6rem; }
  .tier-card { padding: 12px 14px; grid-template-columns: 32px 1fr auto; }
  .tier-card .tier-name { font-size: 0.82rem; }
  .tier-card .tier-price { font-size: 0.82rem; }
}

/* ── Carousel scroll dots indicator (mobile only) ──────────── */
.tier-dots {
  display: none;
  justify-content: center; gap: 6px; margin: -6px 0 0;
}
@media (max-width: 900px) {
  .tier-dots { display: flex; }
}
.tier-dots .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: width .25s, background .25s;
}
.tier-dots .dot.on { width: 22px; border-radius: 4px; background: var(--rmx-red); }

/* ── Footer ─────────────────────────────────────────────────── */
.lesson-foot {
  border-top: 1px solid var(--rmx-line);
  padding: 32px 28px;
  text-align: center;
  color: var(--rmx-mute);
  font-size: 0.82rem;
  background: rgba(0,0,0,0.18);
}
.lesson-foot strong { color: var(--rmx-cream); font-weight: 700; }
.lesson-foot .foot-row {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.lesson-foot img { height: 22px; opacity: 0.78; }
.lesson-foot .foot-links { display: flex; gap: 18px; }
.lesson-foot .foot-links a { color: var(--rmx-mute); text-decoration: none; }
.lesson-foot .foot-links a:hover { color: #fff; }

/* ── Modal — kept compatible with the existing JSP modal ────── */
.reg-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.reg-modal.open { display: flex; align-items: center; justify-content: center; padding: 16px; }
.reg-modal .backdrop { position: absolute; inset: 0; background: rgba(5,10,30,0.78); backdrop-filter: blur(6px); animation: fadeIn .2s ease; }
.reg-modal .card {
  position: relative; background: #fff; color: #1b1b1b;
  border-radius: 18px;
  padding: 32px 36px; width: 100%; max-width: 540px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.5);
  max-height: 90vh; overflow-y: auto;
  animation: cardIn .25s cubic-bezier(.2,.7,.2,1);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.reg-modal .close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 0; font-size: 1.6rem; cursor: pointer; color: #94a3b8;
}
.reg-modal h2 { margin: 0 0 4px; font-size: 1.4rem; color: #0f172a; text-align: center; }
.reg-modal .reg-context { text-align: center; font-size: 0.86rem; color: #64748b; margin-bottom: 22px; }
.reg-modal label { display: block; margin-bottom: 12px; }
.reg-modal label > span { display: block; font-size: 0.78rem; font-weight: 600; color: #475569; margin-bottom: 4px; }
.reg-modal input, .reg-modal select {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid #e2e8f0; border-radius: 9px; font-size: 0.94rem; font-family: inherit;
}
.reg-modal input:focus, .reg-modal select:focus {
  outline: none; border-color: var(--rmx-red); box-shadow: 0 0 0 3px rgba(220,28,46,0.12);
}
.reg-modal .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg-modal .submit {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--rmx-red), var(--rmx-red-deep));
  color: #fff; border: 0; border-radius: 12px;
  font-weight: 800; font-size: 1rem; cursor: pointer; margin-top: 8px;
  font-family: inherit;
}
.reg-modal .submit:hover { filter: brightness(1.04); }
.reg-modal .err {
  background: #fef2f2; color: #b91c1c;
  padding: 10px 12px; border-radius: 8px;
  font-size: 0.86rem; margin-bottom: 12px; display: none;
}
.reg-modal .err.show { display: block; }
@media (max-width: 600px) { .reg-modal .grid2 { grid-template-columns: 1fr; } }