@font-face { font-family:"bp Sans"; src:url(/static/bpSansTT-Regular.ttf) format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"bp Sans"; src:url(/static/bpSansTT-Bold.ttf) format("truetype"); font-weight:700 900; font-display:swap; }
:root { --green:#009900; --lime:#7AC143; --ink:#0B3A1C; --soft:#4A6B53; --bg:#F3F6F1; --line:#DCE5D8; --warn:#8A1C12; --warnbg:#FCE8E6; --yellow:#FFE600; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; font-family:"bp Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink); }
.bar { background:linear-gradient(135deg,var(--green),var(--lime)); color:#fff; padding:14px 16px calc(14px) 16px; padding-top:max(14px, env(safe-area-inset-top)); display:flex; align-items:center; gap:12px; }
.bar img { width:40px; height:40px; flex:none; }
.bar > div { flex:1; min-width:0; }
.site { font-size:14px; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.point { font-size:22px; font-weight:800; }
.pill { background:#fff; color:var(--ink); border-radius:999px; padding:6px 12px; font-weight:800; font-size:14px; white-space:nowrap; }
.pill.busy { background:var(--yellow); }
.pill.off { background:var(--warnbg); color:var(--warn); }
main { padding:16px; max-width:480px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.card { background:#fff; border-radius:18px; padding:20px; box-shadow:0 2px 10px rgba(11,58,28,.08); }
h1 { font-size:26px; margin:0 0 6px; line-height:1.15; }
h2 { font-size:18px; margin:0 0 12px; }
p { margin:6px 0; line-height:1.4; }
.muted { color:var(--soft); font-size:15px; }
.big { font-size:52px; font-weight:900; letter-spacing:-.01em; margin:4px 0; }
.big.clock { font-variant-numeric:tabular-nums; }
.choices { display:grid; gap:10px; }
.choice { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left; padding:18px; border-radius:14px; border:2px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-size:18px; font-weight:700; min-height:64px; }
.choice small { display:block; font-weight:400; color:var(--soft); font-size:14px; margin-top:2px; }
.choice .price { font-size:20px; font-weight:900; white-space:nowrap; }
.choice:active { border-color:var(--green); background:#F0F8EC; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.grid .choice { padding:18px 6px; }
.grid .choice { justify-content:center; text-align:center; font-size:20px; }
.btn { display:block; width:100%; text-align:center; text-decoration:none; padding:17px; border-radius:999px; border:0; font:inherit; font-size:18px; font-weight:800; background:var(--green); color:#fff; min-height:56px; }
.btn.dark { background:#000; }
.btn.ghost { background:transparent; color:var(--green); border:2px solid var(--green); }
.btn.link { background:transparent; color:var(--soft); text-decoration:underline; font-weight:700; padding:10px; min-height:0; }
.member { display:flex; align-items:center; gap:12px; }
/* BPme lock-up: always white, on the BP Green to BP Light Green gradient,
   with a cap-B's width of clear space (BPme brand guidelines). */
.member .dot { width:72px; height:48px; border-radius:12px; background:linear-gradient(135deg,#009900,#99CC00); display:grid; place-items:center; flex:none; }
.member .dot img { width:44px; height:auto; display:block; }
.member div { flex:1; }
.member button { flex:none; }
.notice.warn { border:3px solid var(--warn); }
.notice.warn h1 { color:var(--warn); }
.error { background:var(--warnbg); color:var(--warn); border-radius:12px; padding:12px 14px; font-weight:700; }
.row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:0; }
.spin { width:44px; height:44px; border-radius:50%; border:5px solid var(--line); border-top-color:var(--green); animation:spin 0.9s linear infinite; margin:8px 0 12px; }
@keyframes spin { to { transform:rotate(360deg); } }
video { width:100%; border-radius:14px; background:#000; aspect-ratio:4/3; object-fit:cover; }
input { width:100%; font:inherit; font-size:20px; padding:14px; border-radius:12px; border:2px solid var(--line); }
#pay { min-height:56px; }
footer { text-align:center; color:var(--soft); font-size:13px; padding:8px 16px calc(24px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .spin { animation:none; } }
.saved { margin:0; text-align:center; color:var(--green); font-weight:700; }
.saved a { color:var(--green); }
.receipt .rhead { display:flex; justify-content:space-between; gap:12px; }
.receipt .r { text-align:right; }
.receipt .lines { margin:12px 0 4px; border-top:1px solid var(--line); }
.receipt .row { font-size:16px; }
.receipt .row.muted { font-size:14px; border-bottom:0; padding:4px 0; }
.receipt .total { font-size:22px; font-weight:900; border-top:2px solid var(--ink); border-bottom:0; margin-top:4px; }
.list { padding:6px 0; }
.list .item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.list .item:last-child { border-bottom:0; }
.list small { display:block; color:var(--soft); font-size:13px; margin-top:2px; }
.list .price { font-weight:900; font-size:18px; white-space:nowrap; }