/* ============================================================
   Dải Lụa Thời Gian — Season Page Contract retrofit
   Drop-in override. Add AFTER the page's own /styles.css:

     <link rel="stylesheet" href="/styles.css">
     <link rel="stylesheet" href="dltg-retrofit.css">   <!-- add this -->

   It brings the live page under the You Wonder Show season-page
   contract WITHOUT touching the silk styles:
     1. The primary CTA becomes CORAL (the one booking action).
     2. Adds the shared gold FOOTLIGHT device.
     3. Sharpens the "back to series" link.
   The silk palette, Cormorant titles, ribbons & lotuses stay.
   ============================================================ */

:root {
  --yws-coral: #ff5a7a;
  --yws-coral-hover: #e83f62;
  --yws-gold: #d4af6e;
  --yws-stage: #0a1228;
}

/* ---- 1 · Coral primary CTA -------------------------------------
   Every `.btn--solid` on the page is the booking/primary action
   (hero "Đặt vé ngay", ticket "Chọn ghế", featured tier, the
   seat-summary "Đặt chỗ", and the booking-modal submit). The
   contract makes that ONE action coral everywhere.            */
.btn--solid,
.seat-summary__btn,
.booking-modal__submit {
  background: var(--yws-coral) !important;
  border-color: var(--yws-coral) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px -12px rgba(255, 90, 122, .5) !important;
  transition: background .18s ease, transform .2s ease, box-shadow .2s ease;
}
.btn--solid:hover,
.seat-summary__btn:hover:not(:disabled),
.booking-modal__submit:hover {
  background: var(--yws-coral-hover) !important;
  border-color: var(--yws-coral-hover) !important;
  transform: translateY(-2px);
}
.seat-summary__btn:disabled { opacity: .5; }

/* keep the success/“thanks” checkmark gold, not coral (it’s a state, not the action) */
.booking-modal__thanks-mark { color: var(--yws-gold) !important; }

/* ---- 2 · Shared footlight device --------------------------------
   Paste this snippet into index.html immediately BEFORE <footer>:

     <div class="yws-footlights" aria-hidden="true">
       <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
     </div>

   It is the recurring stage element that appears on every You
   Wonder Show surface — the visual “same theatre” signal.      */
.yws-footlights {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 30px 24px;
  background: var(--yws-stage);
}
.yws-footlights i {
  width: 30px;
  height: 6px;
  border-radius: 6px;
  background: var(--yws-gold);
  box-shadow: 0 -8px 18px -2px rgba(212, 175, 110, .7);
}

/* ---- 3 · Back-to-series link ------------------------------------
   Make the “← You Wonder Show · Mùa 3” link a touch clearer so the
   page reads as part of the series, not a standalone microsite.  */
.nav__series-back {
  opacity: 1 !important;
  font-weight: 600;
}
.nav__series-back:hover { color: var(--yws-coral) !important; }

/* ---- 4 · Dark theatrical header ---------------------------------
   Reskin the silk page's own .nav into the shared You Wonder Show
   stage header — navy bar, cream/gold text, gold language pill,
   coral booking button. The silk body below is left untouched.   */
:root {
  --yws-cream:     #fff6e6;
  --yws-cream-dim: #d7c8b2;
  --yws-gold-200:  #ffe6a3;
  --yws-gold-500:  #f6c453;
}
.nav {
  background: rgba(10, 18, 40, .92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(246, 196, 83, .18) !important;
}
.nav.scrolled {
  background: rgba(10, 18, 40, .95) !important;
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
}
.nav__brand        { color: var(--yws-cream) !important; }
.nav__brand-mark   { border-radius: 8px; }
.nav__links,
.nav__links a      { color: var(--yws-cream-dim) !important; }
.nav__links a:hover { color: var(--yws-gold-200) !important; }
.nav__series-back  { color: var(--yws-gold-500) !important; }

/* language pill — gold-outline glass; both VI / EN always visible */
.lang-toggle {
  background: rgba(246, 196, 83, .08) !important;
  border-color: rgba(246, 196, 83, .40) !important;
}
.lang-toggle button              { color: var(--yws-gold-200) !important; }
.lang-toggle button.active       { background: var(--yws-gold-500) !important; color: #0a1228 !important; }
body .lang-toggle button[data-lang] { display: inline-flex !important; }

/* keep the header booking button on one line */
.nav .btn--solid { white-space: nowrap; }