/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --crimson:#7A0C2E; --crimson-dk:#4A0819; --violet:#3D0F5F;
  --gold:#C8860A; --gold-lt:#E9A825; --saffron:#E05C18;
  --cream:#FFF8EE; --cream-dk:#F5EDE0; --white:#fff;
  --text:#1C0A08; --muted:#7A5A50; --border:rgba(124,67,42,.14);
  --green:#1B7A43; --red:#C0392B;
  --shadow:0 4px 20px rgba(60,10,8,.09); --shadow-lg:0 12px 48px rgba(60,10,8,.13);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --tamil:'Noto Serif Tamil',serif;
  --r-sm:7px; --r-md:12px; --r-lg:20px;
  --safe:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--sans); background:var(--cream); color:var(--text);
  line-height:1.6; min-height:100vh; padding-bottom:13rem;
  background-image:
    repeating-linear-gradient(45deg,transparent,transparent 28px,rgba(200,134,10,.025) 28px,rgba(200,134,10,.025) 29px),
    repeating-linear-gradient(-45deg,transparent,transparent 28px,rgba(200,134,10,.025) 28px,rgba(200,134,10,.025) 29px);
}
.page { min-height:100vh; display:flex; flex-direction:column; }
.hidden { display:none !important; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position:relative; overflow:hidden; text-align:center; color:#fff;
  padding:2.5rem 1.25rem 3.25rem;
  background:linear-gradient(140deg,var(--crimson-dk) 0%,var(--crimson) 45%,var(--violet) 100%);
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 18% 60%,rgba(233,168,37,.28) 0%,transparent 55%),
             radial-gradient(ellipse at 82% 20%,rgba(232,93,26,.16) 0%,transparent 50%);
}
.hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-lt) 50%,var(--gold) 70%,transparent);
}
.hero__kolam { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.1; pointer-events:none; }
.hero__kolam svg { width:min(480px,95vw); height:min(480px,95vw); color:var(--gold-lt); }
.kolam-outer { animation:spin 80s linear infinite; transform-origin:200px 200px; }
.kolam-inner { animation:spin-r 50s linear infinite; transform-origin:200px 200px; }
@keyframes spin   { to { transform:rotate(360deg); } }
@keyframes spin-r { to { transform:rotate(-360deg); } }

.hero__diyas { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.diya {
  position:absolute; width:10px; height:10px; border-radius:50%; opacity:.75;
  background:radial-gradient(circle,#FFF2C2 0%,var(--gold-lt) 35%,rgba(224,92,24,.6) 70%,transparent 100%);
  box-shadow:0 0 18px 6px rgba(233,168,37,.35),0 0 40px 14px rgba(233,168,37,.12);
  animation:flicker 3.2s ease-in-out infinite, drift 14s ease-in-out infinite;
}
.d1{left:8%;top:22%;animation-delay:0s,-2s;transform:scale(.8)}
.d2{left:18%;top:70%;animation-delay:-.7s,-6s}
.d3{left:36%;top:14%;animation-delay:-1.4s,-9s;transform:scale(.6)}
.d4{left:66%;top:18%;animation-delay:-2.1s,-3s}
.d5{left:82%;top:64%;animation-delay:-1s,-11s;transform:scale(.9)}
.d6{left:92%;top:30%;animation-delay:-2.6s,-5s;transform:scale(.65)}
@keyframes flicker { 0%,100%{opacity:.75;filter:brightness(1)} 40%{opacity:.95;filter:brightness(1.25)} 60%{opacity:.6;filter:brightness(.9)} }
@keyframes drift   { 0%,100%{margin-top:0} 50%{margin-top:-14px} }

.hero__content { position:relative; z-index:1; max-width:660px; margin:0 auto; animation:rise .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.hero__org { display:flex; flex-direction:column; gap:.2rem; font-size:.72rem; font-weight:500;
             letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:.6rem; }
.hero__org span { font-family:var(--tamil); font-size:.9rem; letter-spacing:.04em; text-transform:none; color:var(--gold-lt); }
.hero__rule { display:flex; align-items:center; justify-content:center; gap:.75rem; margin-bottom:.8rem; font-size:.95rem; }
.hero__rule span { flex:1; max-width:60px; height:1px; background:linear-gradient(90deg,transparent,rgba(200,134,10,.55)); }
.hero__rule span:last-child { background:linear-gradient(270deg,transparent,rgba(200,134,10,.55)); }
.hero__title { font-family:var(--serif); font-weight:300; display:flex; flex-direction:column; margin-bottom:1.25rem; }
.hero__title em { font-size:clamp(2.8rem,15vw,6.5rem); font-style:italic; color:rgba(255,255,255,.92); line-height:.92; letter-spacing:-.02em; }
.hero__title strong { font-size:clamp(2.3rem,12vw,5.4rem); font-weight:700; color:var(--gold-lt); line-height:.95; letter-spacing:-.015em; }
.hero__tamil { font-family:var(--tamil); font-size:clamp(1rem,4vw,1.5rem); font-weight:300; color:rgba(255,255,255,.62); margin-top:.3rem; }
.hero__year { font-family:var(--sans); font-size:clamp(.75rem,3vw,.95rem); font-weight:300; letter-spacing:.45em; color:rgba(255,255,255,.45); margin-top:.3rem; }
.hero__meta { list-style:none; display:flex; flex-direction:column; align-items:center; gap:.35rem; font-size:.8125rem; color:rgba(255,255,255,.82); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.main { flex:1; padding:0 0 2rem; }
.card { background:var(--white); box-shadow:var(--shadow); overflow:hidden; border-radius:0 0 var(--r-lg) var(--r-lg);
        animation:slide .55s .25s cubic-bezier(.16,1,.3,1) backwards; }
/* No transform here on purpose: a transformed ancestor would make the fixed
   pay bar position against this card instead of the viewport. */
@keyframes slide { from{opacity:0} to{opacity:1} }
.card__head { padding:1.5rem 1.25rem 1.25rem; border-bottom:1px solid var(--border); }
.card__head h2 { font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--crimson); }
.tamil { font-family:var(--tamil); font-size:.85rem; color:var(--muted); margin-top:.2rem; }
.form { padding:1.5rem 1.25rem; }
fieldset { border:none; margin-bottom:1.75rem; }
legend {
  display:block; width:100%; font-size:.67rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--crimson); padding-bottom:.5rem; margin-bottom:1rem;
  border-bottom:2px solid var(--cream-dk); position:relative;
}
legend::after { content:''; position:absolute; bottom:-2px; left:0; width:2rem; height:2px; background:var(--gold); }
.legend-note { float:right; font-size:.6rem; font-weight:600; letter-spacing:.08em;
               background:rgba(200,134,10,.14); color:var(--gold); padding:.12rem .4rem; border-radius:4px; text-transform:none; }

/* ── Ticket rows ─────────────────────────────────────────────────────────── */
.combo {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.85rem 1rem; margin-bottom:.6rem; background:var(--cream);
  border:1.5px solid var(--border); border-radius:var(--r-md);
  transition:border-color .2s, background .2s;
}
.combo.is-chosen { border-color:rgba(200,134,10,.55); background:#FFFDF8; }
.combo__info { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.combo__name { font-weight:600; font-size:.9375rem; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.combo__detail { font-size:.78rem; color:var(--muted); }
.combo__save { font-size:.68rem; font-weight:600; color:var(--green); }
.tag { font-size:.6rem; font-weight:600; background:rgba(200,134,10,.12); color:var(--gold); padding:.1rem .3rem; border-radius:4px; }
.tag--free { background:rgba(27,122,67,.12); color:var(--green); }
.combo__price--free { font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--green); }
.combo__right { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; flex-shrink:0; }
.combo__price { font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--crimson); line-height:1; }

.stepper { display:flex; align-items:center; gap:.3rem; }
.step {
  width:2.1rem; height:2.1rem; border-radius:50%; border:1.5px solid var(--border);
  background:var(--white); color:var(--text); font-size:1.2rem; font-weight:300; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition:all .15s; -webkit-tap-highlight-color:transparent;
}
.step:active:not(:disabled) { background:rgba(122,12,46,.06); border-color:var(--crimson); color:var(--crimson); transform:scale(.93); }
.step:disabled { opacity:.3; cursor:not-allowed; }
.step__count { font-family:var(--serif); font-size:1.45rem; font-weight:700; min-width:1.6rem; text-align:center;
               transition:transform .15s cubic-bezier(.34,1.56,.64,1); }
.step__count.bump { transform:scale(1.25); }
.ticket-error { font-size:.8rem; color:var(--red); min-height:1em; margin-top:.4rem; }

/* ── Order summary ───────────────────────────────────────────────────────── */
.summary {
  background:linear-gradient(140deg,var(--crimson-dk) 0%,var(--crimson) 55%,var(--violet) 100%);
  color:#fff; border-radius:var(--r-md); padding:1.1rem 1.25rem; margin-bottom:1.75rem;
  position:relative; overflow:hidden;
}
.summary::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 0% 100%,rgba(200,134,10,.2),transparent 60%); }
.summary__head { font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
                 color:rgba(255,255,255,.55); margin-bottom:.6rem; position:relative; }
.summary__empty { font-size:.85rem; color:rgba(255,255,255,.55); font-style:italic; position:relative; }
.sline { display:flex; justify-content:space-between; gap:.5rem; font-size:.875rem;
         color:rgba(255,255,255,.8); padding:.18rem 0; position:relative; }
.sline span:last-child { white-space:nowrap; }
.summary__total {
  display:flex; justify-content:space-between; align-items:center; position:relative;
  border-top:1px solid rgba(255,255,255,.18); margin-top:.6rem; padding-top:.6rem;
  font-size:.875rem; color:rgba(255,255,255,.8);
}
.amount { font-family:var(--serif); font-size:1.9rem; font-weight:700; color:var(--gold-lt);
          display:inline-block; white-space:nowrap; transition:transform .22s cubic-bezier(.34,1.56,.64,1), color .2s; }
.amount.flash { transform:scale(1.1); color:#fff; }

/* ── Fields ──────────────────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:.3rem; margin-bottom:1.1rem; }
.field label { font-size:.8125rem; font-weight:500; }
.req { color:var(--crimson); }
.field input {
  font-family:var(--sans); font-size:1rem; padding:.8125rem 1rem; width:100%; min-height:3rem;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--cream); color:var(--text); outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input::placeholder { color:rgba(122,90,80,.42); }
.field input:focus { border-color:var(--crimson); background:var(--white); box-shadow:0 0 0 3px rgba(122,12,46,.08); }
.field input.bad { border-color:var(--red); background:#FEF9F9; box-shadow:0 0 0 3px rgba(192,57,43,.07); }
.field input { scroll-margin-bottom:13rem; }
.hint { font-size:.75rem; color:var(--muted); }
.err { font-size:.75rem; color:var(--red); min-height:1em; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── Submit ──────────────────────────────────────────────────────────────── */
.submit {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  display:flex; flex-direction:column; gap:.3rem;
  padding:.6rem 1rem calc(.6rem + var(--safe));
  background:rgba(255,248,238,.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
}
.submit__total { display:flex; justify-content:space-between; align-items:center; }
.submit__total span { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.submit__total .amount { color:var(--crimson); font-size:1.5rem; }
.btn-pay {
  width:100%; min-height:3.25rem; padding:.9rem 1.5rem; border:none; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--saffron) 0%,var(--gold) 55%,#B8730A 100%);
  color:#fff; font-family:var(--sans); font-size:1.0625rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  box-shadow:0 4px 18px rgba(200,134,10,.38), inset 0 1px 0 rgba(255,255,255,.18);
  transition:opacity .15s, transform .15s; -webkit-tap-highlight-color:transparent;
}
.btn-pay:active:not(:disabled) { opacity:.85; transform:scale(.985); }
.btn-pay:disabled { opacity:.65; cursor:not-allowed; }
.submit__note { display:none; font-size:.72rem; color:var(--muted); text-align:center; line-height:1.4; }
.form-error { font-size:.8rem; color:var(--red); text-align:center; min-height:1em; }

/* ── Confirmation ────────────────────────────────────────────────────────── */
.done { padding:2rem 1.25rem; text-align:center; }
.done__tick { width:4.5rem; height:4.5rem; margin:0 auto 1.25rem; color:var(--green); }
.done__tick svg { width:100%; height:100%; }
.draw-c { stroke-dasharray:239; stroke-dashoffset:239; animation:draw .8s .25s cubic-bezier(.4,0,.2,1) forwards; }
.draw-t { stroke-dasharray:80;  stroke-dashoffset:80;  animation:draw .5s .85s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.done h2 { font-family:var(--serif); font-size:2rem; font-weight:600; color:var(--crimson); margin-bottom:.35rem; }
.done__sub { font-size:.9rem; color:var(--muted); margin-bottom:1.5rem; }

.refbox {
  background:linear-gradient(140deg,var(--crimson-dk),var(--crimson) 55%,var(--violet));
  color:#fff; border-radius:var(--r-md); padding:1.1rem 1.25rem; margin-bottom:1.25rem;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
}
.refbox__label { font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.refbox__value { font-family:var(--serif); font-size:1.9rem; font-weight:700; color:var(--gold-lt); letter-spacing:.05em; }
.pill-pending { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
                background:#FFF3D6; color:#8A6200; padding:.22rem .6rem; border-radius:999px; margin-top:.2rem; }

.refbox__meta { font-size:.78rem; color:rgba(255,255,255,.6); margin-top:.15rem; }

/* Earlier bookings from this browser */
.bk-list { text-align:left; margin-bottom:1.25rem; }
.bk-list__head { font-size:.67rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
                 color:var(--muted); margin-bottom:.5rem; }
.bk { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
      padding:.6rem .85rem; margin-bottom:.4rem; background:var(--cream);
      border:1px solid var(--border); border-radius:var(--r-sm); font-size:.85rem; }
.bk__left { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.bk__ref { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700;
           color:var(--crimson); letter-spacing:.03em; }
.bk__meta { font-size:.75rem; color:var(--muted); }
.bk__right { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.bk__amount { font-weight:700; white-space:nowrap; }
.bk.is-cancelled { opacity:.55; }
.bk.is-cancelled .bk__amount { text-decoration:line-through; }
.pill-sm { font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
           padding:.18rem .45rem; border-radius:999px; white-space:nowrap; }
.pill-sm--pending   { background:#FFF3D6; color:#8A6200; }
.pill-sm--paid      { background:#DEF5E5; color:var(--green); }
.pill-sm--cancelled { background:#F1EDEA; color:var(--muted); }
.pill-pending.is-paid      { background:#DEF5E5; color:var(--green); }
.pill-pending.is-cancelled { background:#F1EDEA; color:var(--muted); }

.paybox__multi { background:rgba(200,134,10,.1); border-radius:var(--r-sm); padding:.6rem .75rem; }
.all-paid { background:#DEF5E5; color:var(--green); font-size:.9rem; font-weight:600;
            border-radius:var(--r-md); padding:.9rem 1rem; margin-bottom:1.5rem; }

.paybox { background:var(--cream); border:1.5px solid rgba(200,134,10,.3); border-radius:var(--r-md);
          padding:1.25rem; margin-bottom:1.5rem; text-align:left; }
.paybox__head { font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
                color:var(--crimson); margin-bottom:.75rem; }
.paybox__list > div { display:flex; align-items:center; justify-content:space-between; gap:.75rem;
                      padding:.45rem 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.paybox__list > div:last-child { border-bottom:none; }
.paybox__list dt { color:var(--muted); font-size:.82rem; flex-shrink:0; }
.paybox__list dd { display:flex; align-items:center; justify-content:flex-end; gap:.5rem;
                   text-align:right; font-weight:500; min-width:0; }
.paybox__list dd > span { overflow-wrap:anywhere; }

.icon-copy {
  flex-shrink:0; width:2.1rem; height:2.1rem; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:7px; background:var(--white);
  color:var(--muted); cursor:pointer; transition:border-color .15s, color .15s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.icon-copy:active { transform:scale(.9); }
.icon-copy.done { border-color:var(--green); color:var(--green); }
.icon-copy:focus-visible { outline:2px solid var(--crimson); outline-offset:2px; }
@media (min-width:600px) { .icon-copy:hover { border-color:var(--crimson); color:var(--crimson); } }
.paybox__amount { font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--crimson); line-height:1.2; }
.strong { font-weight:700; color:var(--crimson); }
.btn-copy { width:100%; margin-top:.9rem; padding:.7rem 1rem; font:inherit; font-size:.875rem; font-weight:600;
            border:1.5px solid var(--crimson); border-radius:var(--r-sm); background:var(--white);
            color:var(--crimson); cursor:pointer; transition:background .15s; }
.btn-copy:active { background:rgba(122,12,46,.06); }
.paybox__warn { font-size:.78rem; color:var(--muted); margin-top:.8rem; line-height:1.5; }

.done__next { text-align:left; border-top:1px solid var(--border); padding-top:1.25rem; margin-bottom:1.5rem; }
.done__next h3 { font-family:var(--serif); font-size:1.2rem; font-weight:600; margin-bottom:.85rem; }
.done__next ul { list-style:none; display:flex; flex-direction:column; gap:.85rem; }
.done__next li { display:flex; gap:.75rem; align-items:flex-start; }
.done__next li > span { font-size:1.2rem; flex-shrink:0; }
.done__next strong { display:block; font-size:.875rem; margin-bottom:.1rem; }
.done__next p { font-size:.8125rem; color:var(--muted); line-height:1.5; }
.done__contact { font-size:.82rem; color:var(--muted); margin-bottom:1rem; }
.done__contact a, .footer a { color:var(--crimson); text-decoration:none; }
.btn-again { padding:.7rem 1.25rem; font:inherit; font-size:.875rem; border:1.5px solid var(--border);
             border-radius:var(--r-sm); background:transparent; color:var(--muted); cursor:pointer; }
.btn-again:active { border-color:var(--crimson); color:var(--crimson); }

.footer { text-align:center; padding:1.5rem 1.25rem; font-size:.78rem; color:var(--muted);
          border-top:1px solid var(--border); margin-top:auto; }

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width:600px) {
  body { padding-bottom:0 !important; }
  .field input { scroll-margin-bottom:1rem; }
  .hero { padding:3.5rem 1.5rem 4.5rem; }
  .hero__meta { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:.4rem 1.5rem; font-size:.875rem; }
  .main { padding:0 1rem 3rem; }
  /* Safe on desktop only: .submit is static here, so this transform has no
     effect on it. Never apply a transform to .card at mobile widths. */
  .card { max-width:620px; margin:0 auto; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); transform:translateY(-2.25rem); }
  .card__head { padding:2rem 2rem 1.5rem; }
  .card__head h2 { font-size:1.75rem; }
  .form { padding:1.75rem 2rem 2rem; }
  .field input { font-size:.9375rem; padding:.7rem .875rem; min-height:auto; }
  .step:hover:not(:disabled) { border-color:var(--crimson); color:var(--crimson); background:rgba(122,12,46,.04); }
  .submit { position:static; padding:0; background:transparent; backdrop-filter:none;
            -webkit-backdrop-filter:none; border-top:none; gap:.75rem; }
  .submit__total { display:none; }
  .submit__note { display:block; }
  .btn-pay { min-height:auto; }
  .btn-pay:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 7px 26px rgba(200,134,10,.48), inset 0 1px 0 rgba(255,255,255,.18); }
  .done { padding:2.5rem 2rem; }
  .btn-copy:hover { background:rgba(122,12,46,.06); }
}

@media (prefers-reduced-motion:reduce) {
  .diya,.kolam-outer,.kolam-inner,.draw-c,.draw-t,.amount,.step__count { animation:none; transition:none; }
}