/* =========================================
   Activity Zone Bookings — Sales site
   Editorial design with navy/amber/teal
   ========================================= */

/* Fonts are loaded from the HTML head for better performance */

:root {
  /* Palette */
  --navy: #0E2B3D;
  --navy-deep: #07202F;
  --navy-soft: #1B3D52;
  --amber: #F2B431;
  --amber-deep: #D89A18;
  --amber-soft: #FFF4DC;
  --teal: #3DB5B0;
  --teal-deep: #278F8A;
  --teal-soft: #E0F4F2;

  /* Canvas & ink — pure white backgrounds */
  --paper: #FFFFFF;
  --paper-deep: #F4F2EC;
  --paper-line: #E3DFD4;
  --paper-line-soft: #F0ECE2;

  --ink: #0E2B3D;
  --ink-soft: #426073;
  --ink-faint: #7D93A3;

  /* Effects */
  --danger: #D9513A;
  --danger-soft: #FDECE8;
  --shadow-sm: 0 2px 8px -2px rgba(14,43,61,0.08);
  --shadow-md: 0 8px 24px -6px rgba(14,43,61,0.15);
  --shadow-lg: 0 20px 60px -20px rgba(14,43,61,0.25);
  --radius: 10px;
  --radius-lg: 18px;

  /* Typography — Montserrat for everything */
  --font-display: 'Montserrat', -apple-system, system-ui, sans-serif;
  --font-body: 'Montserrat', -apple-system, system-ui, sans-serif;
  --font-mono: 'Montserrat', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Typography primitives */
.mono  { font-family: var(--font-mono); font-weight: 500; }

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--amber-deep);
}

/* Hero display heading — uses weight + italic for emphasis */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-size: clamp(38px, 4vw, 50px);
  color: var(--ink);
  text-transform: uppercase;
}
.display em { font-style: italic; font-weight: 900; color: var(--amber-deep); text-transform: none; letter-spacing: -0.03em; }

/* Section heading pattern */
h2.section-head, .section-head {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 3.5vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  text-transform: uppercase;
}
.section-head em { font-style: italic; color: var(--amber-deep); font-weight: 900; text-transform: none; letter-spacing: -0.025em; }

h3.sub-head, .sub-head {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

p.lede, .lede {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 500;
  max-width: 65ch;
}
p.lede em { color: var(--ink); font-style: normal; font-weight: 800; }

/* Layout utilities */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}
.wrap-narrow { max-width: 960px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.wrap-narrower { max-width: 720px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  color: var(--ink);
}
.btn-primary {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}
.btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-dark {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}
.btn-dark:hover {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
/* Specificity bump: ensure the nav CTA stays crisp white regardless of anchor default styling */
.site-nav a.btn-dark,
.site-nav a.btn-dark:link,
.site-nav a.btn-dark:visited {
  color: #FFFFFF;
}
.site-nav a.btn-dark:hover {
  color: var(--ink);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--paper-line);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 18px 32px; font-size: 15px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--paper-line-soft);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-header .brand img { height: 36px; width: auto; display: block; }
.site-nav {
  display: flex; gap: 28px; align-items: center;
}
.site-nav a:not(.btn) {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  position: relative;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); }
.site-nav a.active::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--amber); border-radius: 2px;
}

/* Mobile nav button */
.mobile-nav-btn {
  display: none;
  background: transparent;
  border: 1.5px solid var(--ink);
  width: 44px; height: 44px;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  color: var(--ink);
  align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.mobile-nav-btn:hover { background: var(--ink); color: var(--paper); }
.mobile-nav-btn svg { width: 20px; height: 20px; }

/* Mobile drawer */
.mobile-drawer {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 80%;
  max-width: 420px;
  background: var(--navy);
  color: var(--paper);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  overflow-y: auto;
  box-shadow: -20px 0 60px -20px rgba(14,43,61,0.4);
  pointer-events: none;
}
.mobile-drawer.open { transform: translateX(0); pointer-events: auto; }
.mobile-drawer-inner {
  padding: 28px 28px 48px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.mobile-drawer-head img { height: 32px; width: auto; }
.mobile-drawer-close {
  background: transparent;
  border: 1.5px solid rgba(247, 244, 238, 0.2);
  width: 44px; height: 44px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.mobile-drawer-close:hover { background: rgba(247, 244, 238, 0.1); border-color: var(--amber); }
.mobile-drawer-close svg { width: 18px; height: 18px; }

.mobile-drawer-links {
  display: flex;
  flex-direction: column;
}
.mobile-drawer-links a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247, 244, 238, 0.08);
  transition: color 0.15s ease;
  text-transform: uppercase;
}
.mobile-drawer-links a:hover { color: var(--amber); }
.mobile-drawer-links a.active { color: var(--amber); }
.mobile-drawer-links a.external::after {
  content: '↗';
  margin-left: 8px;
  color: var(--teal);
}

.mobile-drawer-cta {
  margin-top: auto;
  padding-top: 32px;
}
.mobile-drawer-cta .btn-primary {
  width: 100%;
  justify-content: center;
}
.mobile-drawer-foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 244, 238, 0.08);
  font-size: 12px;
  color: rgba(247, 244, 238, 0.55);
  font-weight: 500;
}
.mobile-drawer-foot a {
  color: var(--amber);
  text-decoration: none;
  font-weight: 700;
}

/* Mobile drawer backdrop */
.mobile-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14, 43, 61, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Lock body scroll when drawer open */
body.no-scroll { overflow: hidden; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .mobile-nav-btn { display: inline-flex; }
  .mobile-drawer,
  .mobile-drawer-backdrop { display: block; }
}

/* Hero */
.hero {
  /*
    Padding was clamp(60px, 9vw, 140px) — that put ~130px above the content on a
    typical desktop, pushing important stuff below the fold. Halved across all
    three values so content climbs into view without scrolling, while still
    scaling responsively (30px min on mobile, ~4.5vw preferred, 70px cap on
    wide screens). Bottom padding left larger so the hero still breathes before
    the marquee band below.
  */
  padding: clamp(30px, 4.5vw, 70px) 0 clamp(60px, 9vw, 140px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(242, 180, 49, 0.16), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -15%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(61, 181, 176, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
/* On desktop, the mobile-only stats duplicate is hidden.
   The !important is defensive: .hero-stats has its own display rule
   that would otherwise win by virtue of coming later in the cascade. */
.hero-grid .hero-stats-mobile { display: none !important; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* On mobile, show the duplicate that sits below the demo card
     and hide the original that sits above the demo in the left column */
  .hero-grid .hero-stats-desktop { display: none !important; }
  .hero-grid .hero-stats-mobile  { display: grid !important; }
}

/* Decorative quote style */
.big-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.4;
  color: var(--ink);
  padding: 24px 32px;
  border-left: 4px solid var(--amber);
  background: var(--amber-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  max-width: 50ch;
}
.big-quote cite {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--amber-deep);
  font-family: var(--font-body);
}

/* Feature card */
.feature {
  padding: clamp(14px, 3vw, 32px);
  background: #FFFFFF;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Feature grid layout: two columns on mobile, three on larger screens */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
.feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 0;
  background: var(--amber);
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feature:hover::before { height: 100%; }
.feature-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
  margin-bottom: clamp(10px, 1.2vw, 14px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature:hover .feature-icon {
  background: var(--amber);
  color: var(--navy);
  transform: rotate(-5deg) scale(1.05);
}
.feature h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ink);
}
.feature p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
}

/* Section divider with numbered chapters */
.chapter {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
}
.chapter-num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 900;
  color: var(--amber-deep);
  letter-spacing: 0.1em;
  background: var(--amber-soft);
  padding: 4px 10px;
  border-radius: 4px;
}
.chapter-line {
  flex: 1;
  height: 1px;
  background: var(--paper-line);
}
.chapter-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--teal-deep);
}

/* Dark section */
.dark-section {
  background: var(--navy);
  color: var(--paper);
  padding: clamp(80px, 12vw, 160px) 0;
  position: relative;
  overflow: hidden;
}
.dark-section .section-head,
.dark-section h2 { color: var(--paper); }
.dark-section .section-head em { color: var(--amber); }
.dark-section .lede { color: rgba(247, 244, 238, 0.78); }
.dark-section .eyebrow { color: var(--amber); }

/* Pricing */
.price-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1.5px solid var(--paper-line-soft);
  position: relative;
}
.price-card.featured {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft), var(--shadow-md);
}
.price-amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--navy);
}
.price-cadence {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 600;
}
.price-list {
  list-style: none;
  margin: 28px 0;
}
.price-list li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--paper-line-soft);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.price-list li::before {
  content: '✓';
  color: var(--teal-deep);
  font-weight: 800;
  flex-shrink: 0;
}

/* Forms */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.form-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--ink);
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.form-field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Flash messages */
.flash {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-weight: 500;
  font-size: 14px;
}
.flash-error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }
.flash-success { background: var(--teal-soft); color: var(--teal-deep); border: 1px solid var(--teal); }

/* Footer */
.site-footer {
  background: var(--navy-deep);
  color: var(--paper);
  padding: 80px 0 40px;
  border-top: 1px solid rgba(247, 244, 238, 0.08);
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
@media (max-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.site-footer h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--amber);
  margin-bottom: 18px;
  font-weight: 700;
}
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer a {
  color: rgba(247, 244, 238, 0.72);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s ease;
}
.site-footer a:hover { color: var(--paper); }
.site-footer .footer-base {
  padding-top: 32px;
  border-top: 1px solid rgba(247, 244, 238, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(247, 244, 238, 0.55);
}

/* Stat chip */
.stat {
  padding: 18px 24px;
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius);
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  border: 2px solid var(--navy);
  transition: all 0.2s ease;
}
.stat:hover {
  border-color: var(--amber);
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.04em;
  color: var(--amber);
  line-height: 1;
}
.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(247, 244, 238, 0.7);
  font-weight: 700;
}

/* Hero stats: three-in-a-row on desktop, stacked full-width on mobile */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hero-stats .stat {
  display: flex;
}
@media (max-width: 860px) {
  .hero-stats {
    grid-template-columns: 1fr;
  }
  .hero-stats .stat {
    align-items: center;
    text-align: center;
    padding: 22px 24px;
  }
}

/* Subtle texture background */
.paper-bg {
  background-image:
    linear-gradient(to right, rgba(14, 43, 61, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 43, 61, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Scroll marquee */
.marquee {
  overflow: hidden;
  padding: 22px 0;
  background: var(--navy);
  color: var(--paper);
  border-top: 1.5px solid var(--navy-deep);
  border-bottom: 1.5px solid var(--navy-deep);
}
.marquee-inner {
  display: flex;
  gap: 64px;
  animation: scroll 30s linear infinite;
  white-space: nowrap;
}
.marquee-inner span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.marquee-inner span::before {
  content: '✦';
  color: var(--amber);
  margin-right: 64px;
  font-size: 22px;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Image-less product "screenshot" cards */
.device-frame {
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid var(--paper-line);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  overflow: hidden;
}
.device-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.device-bar span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper-deep);
}

/* Tag pills for sectors */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--amber-soft);
  color: var(--amber-deep);
  border: 1px solid var(--amber);
  border-radius: 100px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.005em;
}

/* Reveal on scroll - prepared but works via CSS only */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Utility */
.amber { color: var(--amber-deep); }
.teal { color: var(--teal-deep); }
.italic { font-style: italic; }

/* ============================================
   Animated booking demo state machine
   ============================================ */

#booking-demo {
  position: relative;
  overflow: hidden;
  min-height: 640px;
}

/* Ensure the device-frame within the demo is also positioned so
   absolute children anchor correctly */
#booking-demo.device-frame {
  position: relative;
}

/* Base pill styling — what every pill looks like in its unselected state */
#booking-demo .demo-pill {
  padding: 10px 6px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
#booking-demo .demo-pill-round {
  padding: 8px 14px;
  border-radius: 100px;
  font-weight: 700;
}
#booking-demo .demo-pill-meta,
#booking-demo .demo-pill-label {
  transition: color 0.35s ease;
}

/* Which pills get the selected treatment, based on current state.
   As the demo moves through its sequence, each earlier selection
   stays lit up, building toward the complete booking. */
#booking-demo[data-demo-state="date"]     [data-pill="date-wed"],
#booking-demo[data-demo-state="session"]  [data-pill="date-wed"],
#booking-demo[data-demo-state="children"] [data-pill="date-wed"],
#booking-demo[data-demo-state="session"]  [data-pill="session-9"],
#booking-demo[data-demo-state="children"] [data-pill="session-9"],
#booking-demo[data-demo-state="children"] [data-pill="children-2"] {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--amber);
}
#booking-demo[data-demo-state="date"]     [data-pill="date-wed"] .demo-pill-label,
#booking-demo[data-demo-state="session"]  [data-pill="date-wed"] .demo-pill-label,
#booking-demo[data-demo-state="children"] [data-pill="date-wed"] .demo-pill-label,
#booking-demo[data-demo-state="session"]  [data-pill="session-9"] .demo-pill-meta,
#booking-demo[data-demo-state="children"] [data-pill="session-9"] .demo-pill-meta {
  color: var(--amber);
}

/* Waiver block only appears once children have been chosen */
#booking-demo .demo-waiver {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#booking-demo[data-demo-state="children"] .demo-waiver {
  opacity: 1;
  transform: translateY(0);
}

/* Total shows £0.00 until a session is selected, then jumps to £24.00
   when children have been chosen. Using text swap via content property
   keeps the transition simple while avoiding any flash of wrong value. */
#booking-demo[data-demo-state="empty"] .demo-total,
#booking-demo[data-demo-state="date"]  .demo-total {
  color: var(--ink-faint);
}
#booking-demo[data-demo-state="children"] .demo-total {
  color: var(--ink);
}

/* CTA button pulses when the "paying" state kicks in */
#booking-demo .demo-cta {
  cursor: default;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#booking-demo[data-demo-state="paying"] .demo-cta {
  transform: scale(0.96);
  opacity: 0.7;
}

/* View swapping: three views stacked, cross-fade between them */
#booking-demo .demo-booking-view,
#booking-demo .demo-payment-view,
#booking-demo .demo-confirmation-view {
  transition: opacity 0.4s ease;
}

/* Payment and confirmation views overlay on top of the booking view
   and fade in when their state is active. The !important flags ensure
   that inline styles or other CSS cannot accidentally break the
   stacking behaviour, which is core to the whole animation working */
#booking-demo .demo-payment-view,
#booking-demo .demo-confirmation-view {
  position: absolute !important;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
}

#booking-demo[data-demo-state="paying"] .demo-payment-view {
  opacity: 1;
}
#booking-demo[data-demo-state="confirmed"] .demo-confirmation-view {
  opacity: 1;
}

/* Fade the underlying booking view during paying/confirmed so any content
   that might peek through the overlay disappears cleanly */
#booking-demo[data-demo-state="paying"] .demo-booking-view,
#booking-demo[data-demo-state="confirmed"] .demo-booking-view {
  opacity: 0;
}

/* Payment button spinner */
#booking-demo .demo-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(247, 244, 238, 0.35);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: demo-spin 0.7s linear infinite;
}
#booking-demo[data-demo-state="paying"] .demo-spinner {
  display: inline-block;
}
#booking-demo[data-demo-state="paying"] .demo-pay-text {
  opacity: 0.7;
}

@keyframes demo-spin {
  to { transform: rotate(360deg); }
}

/* Respect reduced motion: no transitions or animations */
@media (prefers-reduced-motion: reduce) {
  #booking-demo * {
    transition: none !important;
    animation: none !important;
  }
}

/* Progress indicator dots in the device bar.
   The three dots have always been decorative (like macOS window chrome),
   but during the demo animation we repurpose them as a phase indicator.
   Dot 1 lights up during the booking selection phase (date/session/children),
   dot 2 during payment, dot 3 when confirmed. Transitions are smooth so
   the lit dot feels like it's traveling along the strip rather than
   popping on and off. */

#booking-demo .device-bar span {
  transition: background 0.4s ease;
}

/* Dot 1 lit during booking selection phases */
#booking-demo[data-demo-state="date"]     .device-bar span:nth-child(1),
#booking-demo[data-demo-state="session"]  .device-bar span:nth-child(1),
#booking-demo[data-demo-state="children"] .device-bar span:nth-child(1),
#booking-demo[data-demo-state="paying"]   .device-bar span:nth-child(2),
#booking-demo[data-demo-state="confirmed"] .device-bar span:nth-child(3) {
  background: var(--navy);
}