/* Shared styling for the two standalone action pages — register.html and book.html.
   Deliberately small and self-contained: these pages exist to be SHARED as direct links
   (WhatsApp, Instagram bio, Google Business), so they load fast and do exactly one job. */
:root{
  --bg0:#070806; --bg2:#12170F;
  --brass:#C9A35C; --gold:#E3BE7A; --candle:#F6DFAE;
  --ink:#F3EBDC; --ink70:rgba(243,235,220,.7); --ink55:rgba(243,235,220,.55); --ink35:rgba(243,235,220,.35);
  --gbrd:rgba(201,163,92,.25); --danger:#E39B7A;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --read:'Montserrat',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.26,.99);
}
/* When & where on the success card. A guest who has just registered needs two facts —
   the hour the drink is live, and how to actually find a place called The Secret Room
   down a shortcut. Neither was on this screen before. Mirrored in index.html. */
.whenWhere{margin:16px 0 12px;padding:6px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--gbrd);text-align:left}
.whenWhere .wwRow{display:flex;gap:14px;align-items:baseline;font-size:13.5px;padding:10px 0;margin:0}
.whenWhere .wwRow + .wwRow{border-top:1px solid rgba(201,163,92,.14)}
.whenWhere .wwK{flex:0 0 48px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink35)}
.whenWhere .wwV{color:var(--ink)}
.whenWhere .wwV b{color:var(--candle)}

/* Inbound-WhatsApp step on the success card. Mirrors .waBlock in index.html — keep the two
   in step. It is the loudest element there on purpose: a guest who messages US opens the
   thread from their side, which is the only way we can message them later without it being
   cold outreach. The reason sits ABOVE the button because that is where it gets read. */
.waBlock{margin:18px 0 6px;padding:18px;border-radius:16px;
  background:linear-gradient(160deg,rgba(227,190,122,.11),rgba(201,163,92,.04));
  border:1px solid rgba(227,190,122,.45)}
.waBlock .waEyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.waBlock .waWhy{font-size:13.5px;color:var(--ink70);line-height:1.55;margin:0 0 14px}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100svh;background:radial-gradient(1100px 700px at 50% 0%,var(--bg2),transparent 65%),var(--bg0);
  color:var(--ink);font-family:var(--sans);font-weight:300;padding:28px 20px 56px;
  display:flex;flex-direction:column;align-items:center}

.brandBar{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}
.brandBar a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink70);
  font-family:var(--serif);font-size:19px;letter-spacing:.18em;text-transform:uppercase;transition:color .35s}
.brandBar a:hover{color:var(--gold)}
.brandBar img{width:34px;height:34px;object-fit:contain;mix-blend-mode:screen}

.wrap{width:100%;max-width:480px}
.card{position:relative;border:1px solid rgba(201,163,92,.44);border-radius:18px;overflow:hidden;
  padding:32px 26px 26px;text-align:center;
  background:
    radial-gradient(160% 130% at 50% -18%,rgba(246,223,174,.13),transparent 52%),
    radial-gradient(130% 108% at 50% 122%,rgba(0,0,0,.36),transparent 58%),
    linear-gradient(158deg,#18462f,#0e3020 54%,#134132);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 60px rgba(0,0,0,.38),0 26px 70px rgba(0,0,0,.5)}
.eyebrow{font-family:var(--read);font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,7vw,44px);line-height:1.04;color:var(--candle);margin:9px 0 0}
.lede{font-family:var(--read);font-weight:300;font-size:13.5px;line-height:1.65;color:var(--ink70);margin:11px auto 0;max-width:32ch}
.lede b{color:var(--candle);font-weight:500}

form{display:flex;flex-direction:column;gap:10px;text-align:left;margin-top:20px}
.field label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink55);display:block;margin-bottom:5px}
.field label .opt{text-transform:none;letter-spacing:.04em;color:var(--ink35);font-size:10px;margin-left:5px}
.field input,.field select{width:100%;padding:13px 14px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid var(--gbrd);color:var(--ink);font-family:var(--sans);font-size:16px;font-weight:300;
  transition:border-color .3s,background .3s}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:#10281b;color:var(--ink)}
.field input::placeholder{color:var(--ink35)}
.field input:focus,.field select:focus{outline:none;border-color:rgba(227,190,122,.6);background:rgba(255,255,255,.09)}
.field input.bad{border-color:rgba(227,155,122,.7)}
.row3{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:9px}
@media(max-width:440px){.row3{grid-template-columns:1fr 1fr}.row3 .field:first-child{grid-column:1 / -1}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--ink55);line-height:1.55;cursor:pointer;margin-top:2px}
.consent input{margin-top:2px;width:15px;height:15px;accent-color:var(--brass);flex:none}
.consent a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(227,190,122,.3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formErr{color:var(--danger);font-size:12.5px;min-height:0}
.formErr:empty{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:999px;
  font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;cursor:pointer;border:1px solid var(--gbrd);
  background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.05) 55%,rgba(255,255,255,.08));
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.btn:hover{border-color:rgba(227,190,122,.55);transform:translateY(-2px)}
.btn.solid{background:linear-gradient(150deg,rgba(227,190,122,.26),rgba(201,163,92,.13));
  border-color:rgba(227,190,122,.6);color:var(--candle)}
.btn.full{width:100%;margin-top:4px}
button.btn{font-weight:400}

.note{font-family:var(--read);font-size:11px;letter-spacing:.05em;color:var(--ink35);margin-top:14px;line-height:1.6}
.codebox{margin:18px auto;padding:16px 22px;border:1px dashed rgba(227,190,122,.5);border-radius:14px;display:inline-block}
.codebox .cl{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink35)}
.codebox .cv{font-family:var(--serif);font-size:30px;letter-spacing:.14em;color:var(--candle);margin-top:4px}
[hidden]{display:none!important}

.foot{margin-top:26px;text-align:center;font-size:11px;letter-spacing:.14em;color:var(--ink35)}
.foot a{color:var(--ink55);text-decoration:none;margin:0 8px}
.foot a:hover{color:var(--gold)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}