/* Posto Cafe v2 — shared design system.
   Retro diner feel: warm cream paper, light orange, ink outlines with a hard
   offset shadow, a soft serif display face. One primary action per screen.
   Light by default, dark via prefers-color-scheme. */

:root{
  --bg:#FFF6EC; --paper:#FFFDF9; --surface:#FFFFFF; --sunken:#FBEBDA;
  --ink:#2A1D14; --muted:#7A6656; --line:#EBD8C3;
  --brand:#F58A3C; --brand-strong:#E26E1C; --brand-ink:#2A1D14; --brand-soft:#FFE4CC;
  --mustard:#F3B648; --green:#2F8A57; --green-soft:#DDF1E4; --red:#BF4136; --red-soft:#FBE3E0;
  --blue:#2F6FB5; --blue-soft:#E0ECF8;
  --edge:2px solid var(--ink);
  --pop:3px 3px 0 var(--ink);
  --pop-lg:5px 5px 0 var(--ink);
  --glass:rgba(255,250,243,.72);
  --r:18px; --r-lg:24px;
  --display:"Fraunces", Georgia, serif;
  --body:"Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17110C; --paper:#1F1711; --surface:#261C15; --sunken:#2E231A;
    --ink:#F6E7D6; --muted:#BBA48F; --line:#3D2E22;
    --brand:#FF9A50; --brand-strong:#FFB176; --brand-ink:#1B120C; --brand-soft:#4A2D17;
    --mustard:#F5C25E; --green:#5CC08A; --green-soft:#1E3A2A; --red:#F07A6E; --red-soft:#43211D;
    --blue:#7DB2EC; --blue-soft:#1D2D40;
    --edge:2px solid #0A0603;
    --pop:3px 3px 0 #0A0603;
    --pop-lg:5px 5px 0 #0A0603;
    --glass:rgba(31,23,17,.72);
    color-scheme:dark;
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased}
button, input, select, textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--brand-strong)}
img{max-width:100%; display:block}
.hidden{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-.01em; margin:0; font-variation-settings:"SOFT" 100, "WONK" 0}
.eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.muted{color:var(--muted)}
.money{font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:560px; margin:0 auto; padding:0 16px}
.stack > * + *{margin-top:12px}
.row{display:flex; align-items:center; gap:10px}
.between{display:flex; align-items:center; justify-content:space-between; gap:10px}
.grow{flex:1; min-width:0}

/* ---------- cards & buttons ---------- */
.card{background:var(--surface); border:var(--edge); border-radius:var(--r); box-shadow:var(--pop); padding:16px}
.card.flat{box-shadow:none; border-color:var(--line); border-width:1.5px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 20px; border-radius:16px; border:var(--edge); background:var(--surface); box-shadow:var(--pop); font-weight:800; font-size:15.5px; text-decoration:none; color:var(--ink); transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s}
.btn:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--brand); color:var(--brand-ink)}
.btn.wa{background:#25A35A; color:#fff}
.btn.green{background:var(--green); color:#fff}
.btn.block{width:100%}
.btn.small{min-height:40px; padding:0 14px; font-size:13.5px; border-radius:12px}
.btn:disabled{opacity:.45; pointer-events:none}
.link{background:none; border:none; padding:6px 0; font-weight:700; color:var(--muted); text-decoration:underline; font-size:14px}
.link.danger{color:var(--red)}

.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:800; border:1.5px solid currentColor}
.pill.open{color:var(--green); background:var(--green-soft)}
.pill.closed{color:var(--red); background:var(--red-soft)}
.pill.wait{color:var(--brand-strong); background:var(--brand-soft)}
.pill.info{color:var(--blue); background:var(--blue-soft)}

/* ---------- inputs ---------- */
.field{display:block}
.field > span{display:block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 6px 2px}
.input{width:100%; min-height:50px; padding:12px 14px; border-radius:14px; border:1.5px solid var(--line); background:var(--paper); font-size:16px; transition:border-color .15s, box-shadow .15s}
.input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft)}
textarea.input{min-height:72px; resize:vertical}

/* segmented choice */
.choice{display:grid; gap:10px}
.choice.two{grid-template-columns:1fr 1fr}
.choice.many{grid-template-columns:repeat(auto-fit, minmax(72px,1fr))}
.opt{position:relative; text-align:left; padding:14px; border-radius:16px; border:1.5px solid var(--line); background:var(--paper); transition:all .18s var(--ease); font-weight:700}
.opt small{display:block; font-weight:600; color:var(--muted); font-size:12.5px; margin-top:2px}
.opt .ico{font-size:26px; display:block; margin-bottom:6px}
.opt[aria-pressed="true"]{border:var(--edge); background:var(--brand-soft); box-shadow:var(--pop)}
.opt.center{text-align:center; padding:12px 6px}
.opt:disabled{opacity:.5; cursor:not-allowed}

/* ---------- glass bars (floating) ---------- */
.glass{background:var(--glass); -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px)}

/* ---------- bottom sheet ---------- */
.scrim{position:fixed; inset:0; background:rgba(20,12,6,.42); z-index:40; opacity:0; pointer-events:none; transition:opacity .25s}
.scrim.open{opacity:1; pointer-events:auto}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:41; max-height:92vh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg); border-top:var(--edge); border-radius:26px 26px 0 0; padding:10px 16px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .38s var(--ease), visibility 0s linear .38s;
  /* hidden when closed: no flash on page load, and closed sheets can't be tabbed into */
  visibility:hidden}
.sheet.open{transform:none; visibility:visible; transition-delay:0s}
.sheet .grab{width:44px; height:5px; border-radius:5px; background:var(--line); margin:4px auto 14px}
.sheet-inner{max-width:560px; margin:0 auto}
@media (min-width:760px){
  .sheet{left:50%; right:auto; width:560px; bottom:auto; top:50%; border:var(--edge); border-radius:26px; box-shadow:var(--pop-lg);
    transform:translate(-50%,-46%) scale(.97); opacity:0; pointer-events:none; transition:transform .3s var(--ease), opacity .2s, visibility 0s linear .3s}
  .sheet.open{transform:translate(-50%,-50%); opacity:1; pointer-events:auto; transition-delay:0s}
  .sheet .grab{display:none}
}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:calc(110px + env(safe-area-inset-bottom)); transform:translate(-50%,12px); z-index:60; opacity:0; pointer-events:none;
  background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:14px; font-weight:700; font-size:14px; max-width:88vw; text-align:center; transition:all .25s var(--ease)}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes bump{40%{transform:scale(1.18)}}
@keyframes pulse{50%{box-shadow:0 0 0 8px transparent}}
.rise{animation:rise .45s var(--ease) both}
.bump{animation:bump .3s var(--ease)}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}