/* A dimmed date does not say it is a door. The grid says it, but only when one of its dates is sold out. */
.dates:has(.date-chip.full)::after { content: 'Sold out? Tap that date to join the waiting list and we will email you if a spot opens.'; grid-column: 1 / -1; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.45; margin-top: 2px; }

:root {
  --bg: #141414;
  --panel: #1c1c1c;
  --text: #f2efe9;
  --muted: #a9a49b;
  --orange: #E05A1A;
  --teal: #64ACAB;
  --line: #2a2a2a;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  position: relative;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
}
header.site {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
  position: relative; z-index: 1;
}
.brand { font-family: 'Satoshi', sans-serif; font-weight: 900; letter-spacing: 0.18em; color: #C3490F; font-size: 15px; }
.city-line { color: var(--muted); font-size: 14px; }
main { max-width: 960px; margin: 0 auto; padding: 40px 24px 80px; position: relative; z-index: 1; }
h1 { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: clamp(28px, 5vw, 44px); line-height: 1.1; }
.intro { color: var(--muted); margin: 14px 0 36px; max-width: 560px; line-height: 1.55; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
.card.lite { border-top: 3px solid var(--teal); }
.card.signature { border-top: 3px solid var(--orange); }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tag { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.tag.lite { color: var(--teal); }
.tag.signature { color: var(--orange); }
.low { font-size: 12px; color: var(--orange); font-weight: 600; }
.card h3 { font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: 20px; }
.detail { color: var(--muted); font-size: 14px; }
.price { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 24px; margin-top: 8px; }
.book {
  margin-top: 10px; padding: 13px; border: 0; border-radius: 10px;
  background: var(--orange); color: #fff; font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 15px; cursor: pointer;
}
.card.lite .book { background: var(--teal); color: #0E0E0E; }
.book:disabled { background: var(--line); color: var(--muted); cursor: default; }
.book:hover:not(:disabled) { filter: brightness(1.08); }
.cards-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }
.cards-note.center { margin-top: 10px; }

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.sheet {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 26px; width: 100%; max-width: 480px;
  padding: 28px 22px 34px; overflow-y: auto; position: relative;
  animation: rise .22s ease-out; -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - 20px);
}
/* Mobile: the sheet is a full-page pill, edge to edge with a small gap all round, scrollable, X floats on top. */
@media (max-width: 639px) {
  .sheet { height: calc(100dvh - 20px); max-width: none; }
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.close { position: sticky; top: 0; float: right; margin: -12px -6px 0 12px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(14,14,14,0.72); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.sheet h2 { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 22px; }
.sheet-sub { color: var(--muted); font-size: 14px; margin: 6px 0 18px; }
/* Anything the page marks as hidden must stay hidden. A plain rule like the one
   below sets display on every form label, and an author rule always beats the
   browser's own [hidden] rule, so rows meant to appear only when they are needed
   (the device code, the credit banner) were showing on every booking form. This
   restores hidden for good. More specific rules such as .focus-mode .overlay[hidden]
   still win where that is deliberate. */
[hidden] { display: none !important; }
form label { display: block; margin-bottom: 9px; font-size: 13px; color: var(--muted); }
form input:not([type=checkbox]) {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font-size: 15px; font-family: 'Inter', sans-serif;
}
form input:focus-visible { outline: 2px solid var(--orange); }
form select {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font-size: 15px; font-family: 'Inter', sans-serif;
}
form select:focus-visible { outline: 2px solid var(--orange); }
label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
label.check input { margin-top: 2px; }
.pay { width: 100%; }
.err { color: #e0684b; font-size: 13px; margin-top: 10px; min-height: 18px; }
.promo-msg { display: block; font-size: 12px; margin-top: 4px; }
.promo-msg:empty { display: none; }
.promo-msg.ok { color: var(--teal); }
.promo-msg.bad { color: #e0684b; }

.thanks h1 { margin-top: 12px; }
.thanks-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; margin: 24px 0; max-width: 420px;
  display: flex; flex-direction: column; gap: 8px;
}
.thanks-card h3 { font-family: 'Satoshi', sans-serif; font-weight: 700; }
.cta {
  display: block; max-width: 420px; text-align: center; padding: 14px;
  border-radius: 10px; text-decoration: none; font-weight: 600; margin-bottom: 12px;
}
.cta.whatsapp { background: #1f3d2e; color: #7fd6a1; }
.cta.app { background: var(--orange); color: #fff; }

.sheet-details { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 20px; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.sheet-price { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 20px; margin-top: 4px; }
.terms-link { background: none; border: 0; padding: 0; color: var(--orange); text-decoration: underline; cursor: pointer; font: inherit; }
.terms-sheet { max-width: 560px; }
.terms-body { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 14px 0 18px; }
.terms-body h3 { color: var(--text); font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: 16px; margin: 18px 0 6px; }
.terms-body p { margin-bottom: 10px; }
.terms-body strong { color: var(--text); }
.terms-body.standalone { max-width: 640px; }

/* hidden must always win over the overlay's display:flex */
.overlay[hidden] { display: none !important; }

.pick-label { font-family: 'Satoshi', sans-serif; font-weight: 700; margin: 4px 0 10px; }
.dates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.date-chip {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--text); cursor: pointer; font-family: 'Inter', sans-serif;
}
.date-chip:hover:not(:disabled) { border-color: var(--orange); }
.date-chip.selected { border-color: var(--orange); background: #241812; }
.date-chip.full { opacity: 0.4; cursor: default; }
.chip-day { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.chip-num { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 20px; }
.chip-month { font-size: 11px; color: var(--muted); }
.chip-left { font-size: 10px; color: var(--orange); font-weight: 600; margin-top: 2px; }
.chosen { color: var(--text); font-size: 14px; margin-bottom: 10px; font-weight: 600; }

.card-img { width: calc(100% + 44px); margin: -22px -22px 12px; border-radius: 11px 11px 0 0; display: block; aspect-ratio: 16 / 10; object-fit: cover; }

.packages { margin-top: 44px; }
.pkg-title { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 26px; margin-bottom: 16px; }
.credit-banner { background: #14231d; border: 1px solid #1f3d2e; border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.credit-banner span { color: #7fd6a1; font-size: 13px; }
.credit-banner .check { margin: 8px 0 0; }

/* Focus mode: the booking page IS the class they pressed */
.focus-mode main, .focus-mode header.site .city-line { display: none; }
.focus-mode header.site { display: none; }
.focus-mode .overlay { position: static; display: block !important; background: none; padding: 0; }
.focus-mode .overlay[hidden] { display: block !important; }
.focus-mode .sheet { max-width: 100%; margin: 0 auto 60px; max-height: none; border: none; border-radius: 0; }
.focus-mode .sheet-close { display: none; }
.sheet-img { width: calc(100% + 48px); margin: -24px -24px 16px; border-radius: 16px 16px 0 0; display: block; aspect-ratio: 16 / 10; object-fit: cover; }

/* Inline terms documents in the booking form */
.terms-inline { margin: 14px 0 4px; }
.terms-inline h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; opacity: .8; }
.terms-scroll { max-height: 150px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--muted); background: rgba(255,255,255,0.02); }
.terms-scroll h3 { font-size: 12.5px; margin: 10px 0 4px; color: var(--text); }
.terms-scroll p { margin: 0 0 8px; }

/* Popup titles and inline waiver: white on dark, no scroll cages */
.sheet h2 { color: #fff !important; }
.waiver-title { color: #fff !important; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin: 22px 0 8px; }
.waiver-body { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.waiver-body h3 { color: #fff; font-size: 13px; margin: 12px 0 4px; }
.waiver-body p { margin: 0 0 9px; }

/* The close button rides along as the sheet scrolls */
.sheet > .close { position: sticky; top: 6px; float: right; z-index: 8; background: rgba(20,20,20,0.85); border: 1px solid var(--line); border-radius: 50%; width: 34px; height: 34px; line-height: 1; }

/* Desktop: a lone class card must not stretch across the page */
@media (min-width: 761px) { .db-class-card { max-width: 470px; } .dates { grid-template-columns: repeat(6, 1fr); } }

#spotsSel { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: #1a1a1a; color: #fff; }


/* Sold out: the date dims and carries the word, no numbers anywhere. */
.date-chip.full { opacity: 0.5; }
.chip-soldout { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #E05A1A; margin-top: 3px; }

.brand .brand-img, header.site .brand-img { height: 24px; display: block; }

/* Shell header: logo, nav, Find a Class */
header.site.shell-head { display: flex; align-items: center; gap: 28px; padding: 18px 30px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.shell-nav { display: flex; gap: 22px; margin-left: 10px; }
.shell-nav a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; transition: color .15s ease; }
.shell-nav a:hover { color: #E05A1A; }
.shell-cta { margin-left: auto; background: linear-gradient(135deg, #C3490F, #E05A1A); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 12.5px; letter-spacing: 1.5px; border-radius: 999px; padding: 12px 22px; box-shadow: 0 6px 22px rgba(224,90,26,0.28); }
@media (max-width: 900px) { .shell-nav, .shell-cta { display: none; } }

/* The stacked mailing form: one column, one width, mobile-first */
.mail-signup.mail-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; margin: 18px auto 0; }
.mail-signup.mail-stack .pick-label { text-align: center; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.mail-signup.mail-stack input { width: 100%; box-sizing: border-box; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; color: #fff; padding: 13px 14px; font-size: 15px; }
.mail-signup.mail-stack button { width: 100%; }
.mail-signup.mail-stack .msg { text-align: center; }

/* Closed dates stay on the calendar, dimmed, wearing a quiet ribbon */
.date-chip.closed { opacity: 0.55; cursor: default; pointer-events: none; position: relative; overflow: hidden; }
.date-chip.closed .chip-day, .date-chip.closed .chip-num, .date-chip.closed .chip-month { opacity: 0.5; }
.chip-closed { position: absolute; left: -6%; right: -6%; top: 50%; transform: translateY(-50%) rotate(-8deg);
  background: rgba(100,172,171,0.92); color: #0E0E0E; font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase; text-align: center; padding: 3px 0; border-radius: 3px; }