/* =========================================================
   Night in Lanka · checkout

   Same system as the marketing site: square corners, hairline
   rules, night black, pink reserved for interaction. Kept as
   its own stylesheet rather than importing styles.css because
   this page has none of the marketing furniture and every
   kilobyte here sits between someone and paying.

   The one place brand rules bend is inside the Payment
   Element, which Stripe renders in an iframe. It is themed
   through the Appearance API in assets/checkout.js. Keep the
   two files in step.
   ========================================================= */

:root{
  --bg:        #08080A;
  --bg-2:      #0D0D10;
  --bg-3:      #141418;
  --fg:        #F5F2F7;
  --fg-dim:    #918C9C;
  --fg-faint:  #565164;
  --border:    #23212B;
  --border-hi: #3A3648;

  --accent:    #FF2E88;
  --accent-d:  #D01A6B;
  --cyan:      #35DCEF;
  --amber:     #FFB020;
  --ok:        #17C08A;
  --hot:       #FF3B5C;
  --ink:       #08080A;

  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

/* The browser's own [hidden] rule is display:none at UA specificity, so any
   class here that sets display beats it and the element shows anyway. This
   caught the quantity row appearing before a release had been chosen. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; background:var(--bg); overflow-x:clip; }

body{
  margin:0;
  /* Draws native controls dark, including anything the Payment Element
     renders, instead of a white box on a black page. */
  color-scheme:dark;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(255,46,136,.10), transparent 62%),
    var(--bg);
  color:var(--fg);
  font-family:var(--f-body); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
h1,h2{ margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:-.035em; line-height:1.05; }
p{ margin:0; }

.mono{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim);
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10;
  padding:12px 18px; background:var(--accent); color:var(--ink); font-weight:600;
}
.skip:focus{ left:0; }

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--border); background:var(--bg-2);
}
.top__brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--fg);
}
.top__brand img{ width:auto; height:28px; filter:drop-shadow(0 0 10px rgba(255,46,136,.45)); }
.top__brand span{
  font-family:var(--f-display); font-weight:600; font-size:14px;
  letter-spacing:-.01em; text-transform:uppercase;
}
.top__brand b{ color:var(--accent); }
.top__when{ text-align:right; }
@media (max-width:420px){ .top__when{ display:none; } }

/* ---------------------------------------------------------
   Shell
   --------------------------------------------------------- */
.wrap{
  max-width:560px; margin:0 auto;
  padding:28px 20px calc(48px + env(safe-area-inset-bottom));
}

.title{ font-size:clamp(30px,8.5vw,42px); }
.lede{ margin-top:12px; color:var(--fg-dim); font-size:16px; }

.testbar{
  margin-bottom:22px; padding:12px 14px;
  border:1px solid var(--border-hi); border-left:3px solid var(--amber);
  background:rgba(255,176,32,.08);
  font-size:13.5px; line-height:1.55; color:#F0CE93;
}
.testbar b{ color:var(--amber); }
.testbar code{
  font-family:var(--f-mono); font-size:12.5px;
  color:var(--fg); background:var(--bg-3); padding:1px 5px;
}

/* ---------------------------------------------------------
   Steps
   --------------------------------------------------------- */
.step{ margin-top:38px; }
.step__h{
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px; color:var(--fg);
}
.step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex:0 0 auto;
  border:1px solid var(--accent); color:var(--accent);
  font-size:11px; letter-spacing:0;
}

.loading{ padding:18px 0; }

/* ---------- tier picker ---------- */
.tiers{ display:flex; flex-direction:column; gap:10px; }

.tier{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:16px 18px; text-align:left; cursor:pointer;
  background:var(--bg-2); color:var(--fg);
  border:1px solid var(--border-hi); border-radius:0;
  font-family:var(--f-body);
  transition:border-color 180ms ease, background 180ms ease;
}
.tier:hover:not([disabled]){ border-color:var(--fg-faint); }
.tier[aria-checked="true"]{ border-color:var(--accent); background:rgba(255,46,136,.07); }
.tier[disabled]{ cursor:default; opacity:.45; }

.tier__mark{
  width:18px; height:18px; flex:0 0 auto;
  border:1px solid var(--border-hi); position:relative;
}
.tier[aria-checked="true"] .tier__mark{ border-color:var(--accent); }
.tier[aria-checked="true"] .tier__mark::after{
  content:''; position:absolute; inset:3px; background:var(--accent);
}

.tier__body{ flex:1 1 auto; min-width:0; }
/* Both are spans, so they need to be told to stack. Without this the
   name and the meta run together: "Early Bird8 left". */
.tier__name{ display:block; font-family:var(--f-display); font-size:18px; font-weight:700; letter-spacing:-.02em; }
.tier__meta{ display:block; margin-top:3px; font-size:12.5px; color:var(--fg-dim); }
.tier__meta[data-tone="low"]{ color:var(--amber); }
.tier__meta[data-tone="gone"]{ color:var(--hot); }
.tier__price{
  font-family:var(--f-display); font-size:20px; font-weight:700;
  letter-spacing:-.02em; flex:0 0 auto;
}

/* ---------- quantity ---------- */
.qty{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:18px; padding:14px 18px;
  border:1px solid var(--border); background:var(--bg-2);
}
.qty__ctl{ display:flex; align-items:center; gap:4px; }
.qty__btn{
  width:44px; height:44px; flex:0 0 auto; cursor:pointer;
  background:none; color:var(--fg); border:1px solid var(--border-hi); border-radius:0;
  font-size:20px; line-height:1; font-family:var(--f-body);
}
.qty__btn:hover:not([disabled]){ border-color:var(--fg); }
.qty__btn[disabled]{ opacity:.35; cursor:default; }
.qty__n{
  min-width:46px; text-align:center;
  font-family:var(--f-display); font-size:20px; font-weight:700;
}

/* ---------- fields ---------- */
.note{
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom:20px; padding:14px 16px;
  border:1px solid var(--border-hi); border-left:3px solid var(--amber);
  background:rgba(255,176,32,.06);
}
.note svg{ width:22px; height:22px; color:var(--amber); flex:0 0 auto; margin-top:1px; }
.note p{ font-size:13.5px; line-height:1.55; color:var(--fg-dim); }
.note b{ color:var(--fg); }

.field{ margin-bottom:18px; }
label{
  display:block; margin-bottom:7px;
  font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim);
}
.opt{ color:var(--fg-faint); }
input{
  width:100%; min-height:50px; padding:0 14px;
  font-family:var(--f-body); font-size:16px;   /* 16px exactly, or iOS zooms in on focus */
  color:var(--fg); background:var(--bg-2);
  border:1px solid var(--border-hi); border-radius:0;
  transition:border-color 160ms ease;
}
input::placeholder{ color:var(--fg-faint); }
input:focus-visible{ border-color:var(--accent); outline:none; }
input[aria-invalid="true"]{ border-color:var(--hot); }

.hint{ margin-top:6px; font-size:12.5px; color:var(--fg-faint); }
.err{ margin-top:6px; font-size:13px; color:var(--hot); }
.err:empty{ display:none; }

select{
  width:100%; min-height:50px; padding:0 14px;
  font-family:var(--f-body); font-size:16px;
  color:var(--fg); background:var(--bg-2);
  border:1px solid var(--border-hi); border-radius:0;
  appearance:none;
  /* The arrow is drawn rather than left to the OS, which renders a rounded
     control on macOS and breaks the square-corner rule. */
  background-image:linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%),
                   linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
select:focus-visible{ border-color:var(--accent); outline:none; }

.attendees{ margin-top:26px; }
.attendees__h{ margin-bottom:14px; }
.attendee{
  margin-bottom:20px; padding:16px 16px 4px;
  border:1px solid var(--border); background:var(--bg-2);
}
.attendee__h{ margin-bottom:14px; }
.attendee__n{ color:var(--accent); }

/* ---------- optional extras ---------- */
.more{ margin-top:8px; margin-bottom:22px; border:1px solid var(--border-hi); }
.more > summary{
  padding:15px 16px; cursor:pointer; list-style:none;
  font-size:15px; font-weight:600; color:var(--fg);
}
.more > summary::-webkit-details-marker{ display:none; }
.more > summary::after{ content:'+'; float:right; color:var(--fg-dim); font-weight:400; }
.more[open] > summary::after{ content:'−'; }
.more__body{ padding:4px 16px 2px; border-top:1px solid var(--border); }

.promo__row{ display:flex; gap:10px; }
.promo__row input{ text-transform:uppercase; letter-spacing:.06em; }

.summary__row[data-kind="off"] span:last-child{ color:var(--ok); }

/* ---------- pay ---------- */
.summary{
  padding:16px 18px; margin-bottom:20px;
  border:1px solid var(--border-hi); background:var(--bg-2);
}
.summary__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:7px 0; font-size:15px;
}
.summary__row span:first-child{ color:var(--fg-dim); }
.summary__row--total{
  margin-top:8px; padding-top:14px; border-top:1px solid var(--border);
  font-family:var(--f-display); font-size:19px; font-weight:700; letter-spacing:-.02em;
}
.summary__row--total span:first-child{ color:var(--fg); }

/* The payment panel. Enclosing the card fields, naming them, and saying who
   handles them is the difference between a payment form and a text box asking
   for a card number. */
.paybox{
  border:1px solid var(--border-hi);
  background:var(--bg-2);
  padding:0 18px 18px;
}
.paybox__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 -18px 18px;
  padding:13px 18px;
  border-bottom:1px solid var(--border);
  background:var(--bg-3);
}
.paybox__title{ font-size:11px; color:var(--fg); }
.paybox__secure{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:var(--fg-dim); white-space:nowrap;
}
.paybox__secure svg{ width:14px; height:14px; flex:0 0 auto; color:var(--ok); }

/* Reserve the height the Payment Element will take. Without this the panel
   collapses to nothing and then jumps, which looks broken at the exact moment
   somebody is deciding whether to trust it. */
.pe{ min-height:210px; }

.paybox__assure{
  list-style:none; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:7px;
}
.paybox__assure li{
  position:relative; padding-left:18px;
  font-size:12.5px; line-height:1.5; color:var(--fg-dim);
}
.paybox__assure li::before{
  content:''; position:absolute; left:0; top:6px;
  width:7px; height:4px; border:solid var(--ok);
  border-width:0 0 1.5px 1.5px; transform:rotate(-45deg);
}

.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:54px; padding:0 20px; margin-top:20px;
  font-family:var(--f-body); font-size:16px; font-weight:600;
  cursor:pointer; border:1px solid transparent; border-radius:0;
  transition:background 180ms ease, color 180ms ease;
}
.btn--pay{ background:var(--accent); color:var(--ink); }
.btn--pay:hover:not([disabled]){ background:var(--fg); }
.btn[disabled]{ opacity:.45; cursor:default; }

.btn .spin{
  width:16px; height:16px; flex:0 0 auto;
  border:2px solid rgba(8,8,10,.3); border-top-color:var(--ink); border-radius:50%;
  animation:spin 720ms linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.fine{ margin-top:14px; font-size:12.5px; line-height:1.6; color:var(--fg-faint); }

/* ---------- sold out ---------- */
.soldout{
  margin-top:38px; padding:24px 20px;
  border:1px solid var(--hot); background:rgba(255,59,92,.07);
}
.soldout h2{ font-size:26px; color:var(--hot); margin-bottom:12px; }
.soldout p{ color:var(--fg-dim); font-size:15px; margin-bottom:10px; }
.soldout p:last-child{ margin-bottom:0; }

/* ---------- footer ---------- */
.foot{
  padding:22px 20px calc(28px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
}
.foot .mono{
  max-width:560px; margin:0 auto;
  font-size:9.5px; letter-spacing:.1em; line-height:1.7; color:var(--fg-faint);
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; }
  .spin{ animation:none; }
}