/* RESERVE YOUR NAME — the App's Popit material (founder/534), shared by
   index.html and app.html. */
.rsv{position:relative;max-width:460px;margin:0 auto;padding:24px;border-radius:30px;text-align:left;color:#fff;
  --h:var(--ow-h1);--h2:var(--ow-h2);
  background:linear-gradient(180deg,rgba(var(--h),.30),rgba(var(--h),.08) 42%,rgba(var(--h2),.06)),linear-gradient(0deg,#0e0f1d,#0e0f1d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.07),0 34px 70px -34px rgba(0,0,0,.9),0 0 80px -30px rgba(var(--h),.7);
  transition:box-shadow .4s}
.rsv-t{font-family:var(--font-display);font-weight:850;font-size:clamp(24px,3vw,30px);letter-spacing:-.03em;line-height:1.1;margin:0}
.rsv form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.rsv form[hidden],.rsv .rsv-done[hidden]{display:none}
/* the kind of name — a segmented pill, the App's Feed / Scroll control */
.rsv-types{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rsv-type{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 10px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.7);font:650 14px/1 var(--font);transition:background .3s,color .3s,box-shadow .3s}
.rsv-type em{font-style:normal;font-weight:500;color:rgba(255,255,255,.45)}
.rsv-type.on{color:#fff;background:linear-gradient(120deg,rgba(var(--h),.95),rgba(var(--h2),.75));box-shadow:0 6px 18px -8px rgba(var(--h),.9),inset 0 1px 0 rgba(255,255,255,.35)}
.rsv-type.on em{color:rgba(255,255,255,.85)}
.rsv-handle{display:flex;align-items:center;min-height:56px;border-radius:20px;background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .25s}
.rsv-handle:focus-within{box-shadow:inset 0 0 0 1.5px rgba(var(--h2),.8)}
.rsv-glyph{flex:none;width:46px;text-align:center;font:800 22px/1 var(--font-display);color:rgb(var(--h2))}
.rsv-handle input{flex:1;min-width:0;height:56px;padding:0 8px 0 0;font:650 18px/1 var(--font);background:transparent;border:0;outline:none;color:#fff}
.rsv-state{flex:none;margin-right:14px;display:none;align-items:center;gap:6px;font-size:12.5px;font-weight:650}
.rsv-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.rsv[data-state="free"] .rsv-state{display:inline-flex;color:#7ce8ad}
.rsv[data-state="taken"] .rsv-state{display:inline-flex;color:#ffb3a6}
.rsv input[type=email]{height:50px;padding:0 18px;font:500 15px/1 var(--font);color:#fff;border:0;outline:none;border-radius:18px;
  background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.rsv input[type=email]:focus{box-shadow:inset 0 0 0 1.5px rgba(var(--h2),.8)}
.rsv input::placeholder{color:rgba(255,255,255,.36)}
.rsv-go{height:52px;border:0;border-radius:999px;cursor:pointer;font:750 15.5px/1 var(--font);color:#0b0b14;background:#fff;
  box-shadow:0 12px 30px -12px rgba(var(--h),.9);transition:transform .2s var(--ease),opacity .2s}
.rsv-go:hover{transform:translateY(-1px)}
.rsv-go:disabled{opacity:.55;cursor:default;transform:none}
.rsv-note{font-size:13px;line-height:1.5;color:rgba(255,255,255,.62);text-align:center;margin:2px 0 0;min-height:0}
.rsv-note:empty{display:none}
.rsv-note.err{color:#ffb3a6}
.rsv-done{text-align:center;padding:8px 0 2px}
.rsv-done-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;color:#7ce8ad;padding:6px 12px;border-radius:999px;background:rgba(53,208,127,.12)}
.rsv-done-handle{font:900 clamp(30px,5vw,40px)/1.1 var(--font-display);letter-spacing:-.03em;margin:14px 0 0;overflow-wrap:anywhere}
.rsv-done p{font-size:14px;color:rgba(255,255,255,.66);line-height:1.6;margin:10px 0 0}
.rsv-done .rsv-ref{font-variant-numeric:tabular-nums;color:#fff;font-weight:700}
.rsv-again{margin-top:18px}
/* a narrow phone: the kind reads by its word alone, so both fit on one row */
@media(max-width:420px){.rsv{padding:20px 16px}.rsv-type{font-size:13.5px;padding:0 6px}.rsv-type em{display:none}}
@media(max-width:360px){.rsv-type .sfx{display:none}}