/* ============================================================================ Store app - "After Dark / Gold Leaf" design system. All colour comes from CSS custom properties set per-store in (AppTheme): --bg --card --ink --muted --accent --accent-soft --gold --line --navbg --hero-a --hero-b --on-accent --on-gold ========================================================================== */ *,*::before,*::after{box-sizing:border-box} .hidden{display:none !important} html{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%} html,body{margin:0;padding:0} /* Kill sideways scroll from the 100vw hero breakout. clip (not hidden!) - hidden makes mobile Safari/Chrome treat body as a scroll container and breaks vertical touch scrolling; clip just crops, no scroll side effects. */ html,body{overflow-x:clip} /* ---- Boot splash: store logo on the brand background (home page, every load) ---- */ html.splash-on{overflow:hidden} html.splash-on::before{content:'';position:fixed;inset:0;z-index:9998;background:var(--bg);transition:opacity .45s ease} html.splash-on::after{content:'';position:fixed;top:50%;left:50%;width:132px;height:132px;z-index:9999;background:var(--splash-logo) center/contain no-repeat;transform:translate(-50%,-50%);animation:splashIn .55s cubic-bezier(.2,.8,.2,1),splashPulse 2.4s ease-in-out .55s infinite;transition:opacity .45s ease} html.splash-off::before,html.splash-off::after{opacity:0;pointer-events:none} @keyframes splashIn{from{opacity:0;transform:translate(-50%,-50%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} @keyframes splashPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}} @media (prefers-reduced-motion:reduce){html.splash-on::after{animation:none}} body{ background:var(--bg);color:var(--ink); font-family:var(--font-ui); font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none; -webkit-user-select:none;user-select:none;overscroll-behavior:none; min-height:100vh; } input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} a,button,select,label,[role="button"],.tab,.btn,.qa,.pill,.chip{touch-action:manipulation} :active{transition:opacity 0s} /* ---- Type ---- */ .serif{font-family:var(--font-display);font-weight:600;letter-spacing:.01em} .ml{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .muted{color:var(--muted)} /* ---- Screen shell ---- */ .app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative} /* NOT a scroll container (no overflow) - pages scroll the BODY; an inner overflow-y:auto here traps position:sticky (month/category tabs) and never actually scrolls since nothing constrains the shell's height. */ .app-scroll{flex:1;padding:calc(14px + env(safe-area-inset-top)) 20px calc(86px + env(safe-area-inset-bottom));} .csh + .app-scroll,.appbar + .app-scroll{padding-top:14px} .app-pad{padding-left:20px;padding-right:20px} .section-gap{margin-top:18px} /* ---- App top bar (Back / account) reused on inner pages ---- */ .appbar{display:flex;align-items:center;gap:12px;padding:max(14px,env(safe-area-inset-top)) 20px 8px} .appbar .back{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:700;font-size:14px;opacity:.9} .appbar .back i{font-size:20px;margin-top:-1px} .appbar .spacer{margin-left:auto} /* ---- Greeting row ---- */ .greet{display:flex;align-items:center;justify-content:space-between;margin:6px 0 20px} .greet .name{font-size:31px;margin-top:2px;color:var(--ink)} .avatar{ width:44px;height:44px;border-radius:50%;flex:0 0 auto; border:1px solid var(--accent);background:var(--accent-soft) center/cover no-repeat;color:var(--accent); display:flex;align-items:center;justify-content:center;overflow:hidden; font-family:var(--font-display);font-weight:600;font-size:19px; } /* My Details: profile photo picker */ .dt-photo{display:flex;align-items:center;gap:14px} .dt-photo-pic{width:66px;height:66px;border-radius:50%;flex:0 0 auto;background:var(--accent-soft) center/cover no-repeat;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:30px;overflow:hidden} .dt-photo input[type=file]{flex:1;min-width:0;color:var(--muted);font-size:13px} /* ---- Cards / surfaces ---- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px} /* ---- Rewards hero ---- */ .rewards{ background:linear-gradient(135deg,var(--hero-a),var(--hero-b)); border:1px solid var(--line);border-radius:var(--r-hero);padding:16px 16px 14px; } .rewards .top{display:flex;align-items:center;justify-content:space-between} .rewards .stars{color:var(--gold);font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:4px} .rewards .line{font-size:22px;margin:10px 0 14px;color:var(--ink);line-height:1.15} .bar{height:5px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden} .bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--gold))} .rewards .foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase} .rewards.signedout{display:flex;flex-direction:column;align-items:flex-start;gap:14px} /* ---- Tonight / venue hero ---- */ /* Featured home cards: tall swipeable carousel (brand banner replacement) */ .feat-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab} .feat-cards.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none} .feat-cards::-webkit-scrollbar{display:none} .feat-cards.solo .feat-card{flex:0 0 100%} .feat-card{position:relative;flex:0 0 86%;scroll-snap-align:center;height:400px;border-radius:var(--r-hero);overflow:hidden;border:1px solid var(--line);background:var(--card) center/cover no-repeat;display:flex;align-items:flex-end} .feat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,4,0) 42%,rgba(8,6,4,.78))} .feat-body{position:relative;z-index:1;padding:20px;width:100%} .feat-t{font-size:25px;color:#fff;line-height:1.1} .feat-s{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:4px} .feat-cta{display:inline-flex;align-items:center;gap:4px;margin-top:14px;background:#fff;color:#141414;font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:var(--r-pill)} /* Dots: 24px tap targets around an 8px visual dot, clickable to jump */ .feat-dots{display:flex;justify-content:center;gap:2px;margin-top:8px} .feat-dots span{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer} .feat-dots span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.25;transition:opacity .15s ease} .feat-dots span.on::before{opacity:.9} /* Custom per-store home cards (image + title + link), above Contact */ .app-cards{display:flex;flex-direction:column;gap:12px} .app-card{position:relative;display:block;height:140px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--card) center/cover no-repeat;text-decoration:none} .app-card::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,6,4,.05),rgba(8,6,4,.82))} .app-card-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:14px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .app-card-t{font-size:21px;color:#fff;line-height:1.1} .app-card-s{font-size:12px;color:rgba(255,255,255,.85);margin-top:4px} .app-card-go{flex:0 0 auto;color:#fff;opacity:.8;font-size:22px;line-height:1} /* ---- Quick actions ---- */ .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px} .qa{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;color:var(--ink)} .qa .tile{width:38px;height:38px;border-radius:var(--r-tile);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:21px} .qa .t{font-size:14.5px;font-weight:700} .qa .s{font-size:12px;color:var(--muted);margin-top:-4px} .qa.disabled{opacity:.5} .home-contact{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-btn);color:var(--muted);font-size:13.5px;font-weight:600;text-decoration:none} .home-contact i{font-size:18px;color:var(--accent)} .home-contact:active{transform:scale(.99)} /* ---- Buttons / pills ---- */ .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:none;border-radius:var(--r-btn);padding:15px;font-family:inherit;font-weight:700;font-size:15px;background:var(--accent);color:var(--on-accent);cursor:pointer} .btn-outline{background:transparent;color:var(--ink);border:1px solid var(--line)} .pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:6px 13px;font-size:11.5px;font-weight:700;background:var(--accent);color:var(--on-accent)} .pill-outline{background:transparent;color:var(--ink);border:1px solid var(--line)} .chip{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:7px 14px;font-size:12px;font-weight:700;border:1px solid var(--line);color:var(--ink)} .chip.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} /* ---- Inputs ---- */ .field{margin-bottom:14px;text-align:left} .field label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px} .input{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-input);padding:13px 14px} .input i{font-size:18px;color:var(--accent)} .input input{flex:1;border:none;outline:none;background:transparent;color:var(--ink);font-family:inherit;font-size:14px} .divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted)} .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)} .divider span{font-size:10px;letter-spacing:.16em} /* ---- Bottom tab bar: styles live in the self-contained _tabbar partial ---- */ /* ---- Page header (tab screens) ---- */ .phead{padding:6px 0 16px} .phead .ml{display:block;margin-bottom:4px} .phead h1{font-family:var(--font-display);font-weight:600;font-size:32px;margin:0;color:var(--ink)} /* ---- Auth (sign in / register / forgot / reset) ---- */ /* Auth hero replaced by the shared _apphero partial (with logo + fade). */ .auth-body{padding:24px 22px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;flex:1} .auth-body > h1{font-family:var(--font-display);font-weight:600;font-size:27px;margin:0 0 5px;line-height:1.05} .auth-body > p{margin:0 0 22px;font-size:12.5px;color:var(--muted)} .auth-error{background:rgba(220,80,60,.12);color:#e7a99c;border:1px solid rgba(220,80,60,.3);border-radius:var(--r-input);padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:14px} .auth-ok{background:rgba(120,180,120,.12);color:#a9d8a9;border:1px solid rgba(120,180,120,.3);border-radius:var(--r-input);padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:14px} .auth-link{color:var(--accent);font-weight:600;font-size:12px} .auth-foot{margin-top:auto;padding-top:22px;text-align:center;font-size:12.5px;color:var(--muted)} .auth-foot a{color:var(--accent);font-weight:700} .auth-note{font-size:12px;color:var(--muted);margin-top:8px} /* ---- List rows (account hub, get-a-card, etc.) ---- */ .rows{display:flex;flex-direction:column;gap:10px} .rowlink{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:15px 16px;color:var(--ink)} .rowlink .tile{width:38px;height:38px;flex:0 0 auto;border-radius:var(--r-tile);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px} .rowlink .rl-main{flex:1;min-width:0} .rowlink .rl-t{font-size:14.5px;font-weight:700} .rowlink .rl-s{font-size:12px;color:var(--muted);margin-top:1px} .rowlink .mdi-chevron-right{color:var(--muted);font-size:22px} .rowlink.danger .rl-t{color:#e7a99c} .rowlink.disabled{opacity:.5} /* ---- Team: holiday requests ---- */ .hreq-head{display:block;margin:24px 0 10px} .hreq{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;margin-bottom:8px} .hreq-main{flex:1;min-width:0} .hreq-dates{font-size:13.5px;font-weight:700} .hreq-days{font-size:11.5px;color:var(--muted);margin-top:1px} .hreq-status{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 10px;border:1px solid var(--line);color:var(--muted)} .hreq-status.approved,.hreq-status.signed{background:rgba(120,180,120,.12);color:#a9d8a9;border-color:rgba(120,180,120,.3)} .hreq-status.tosign{background:rgba(230,170,70,.12);color:#e3c08b;border-color:rgba(230,170,70,.3)} .hreq-status.denied{background:rgba(220,80,60,.12);color:#e7a99c;border-color:rgba(220,80,60,.3)} .field input[type=number]::-webkit-inner-spin-button,.field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .field input[type=number]{-moz-appearance:textfield;appearance:textfield} /* ---- Wallet ---- */ .stars-hero{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));border:1px solid var(--line);border-radius:var(--r-hero);padding:24px 16px;text-align:center} .stars-hero .num{font-family:var(--font-display);font-weight:600;font-size:60px;line-height:1;color:var(--gold);margin-top:14px} .stars-hero .row{display:flex;gap:7px;justify-content:center;margin-top:14px;color:var(--gold);font-size:18px} .stars-hero .row .off{opacity:.18;color:var(--ink)} .wcards{display:flex;flex-direction:column;gap:13px} .wcard{position:relative;height:112px;border-radius:var(--r-card);padding:15px 16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:var(--ink);background:var(--card);border:1px solid var(--line)} .wcard.gold{background:linear-gradient(135deg,var(--gold),var(--accent));color:var(--on-gold);border:none} .wcard .wc-top{display:flex;align-items:flex-start;justify-content:space-between} .wcard .wc-name{font-family:var(--font-display);font-weight:600;font-size:21px} .wcard .wc-tag{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .wcard .wc-foot{display:flex;align-items:flex-end;justify-content:space-between;font-size:12px} .wcard .wc-view{font-weight:700;display:inline-flex;align-items:center;gap:2px} .wcard .wc-logo{position:absolute;right:-8px;top:50%;transform:translateY(-50%) rotate(-10deg);max-height:120px;opacity:.14;pointer-events:none} .wcard.pending{opacity:.55;filter:grayscale(.4)} /* ---- Events / what's on ---- */ .chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:4px} .chips::-webkit-scrollbar{display:none} .chips .chip{flex:0 0 auto;white-space:nowrap} .erow{display:flex;align-items:stretch;flex-shrink:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} .erow .ph{width:114px;flex:0 0 auto;background:var(--accent-soft) center/cover no-repeat} .erow .eday{flex:0 0 auto;width:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding-left:6px} .erow .edow{font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--muted)} .erow .enum{font-family:var(--font-display);font-weight:600;font-size:26px;color:var(--gold);line-height:1} .erow .enum small{font-size:13px;font-weight:600} .erow .emon{font-size:8.5px;font-weight:700;letter-spacing:.14em;color:var(--muted);opacity:.75} .erow .eb{flex:1;min-width:0;padding:13px 12px 13px 10px;display:flex;flex-direction:column} .erow .ed{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} .enew{display:inline-block;background:#23a55a;color:#fff;font-family:var(--font-ui);font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:1px;line-height:1.4} .app-card-t .enew{font-size:10px;vertical-align:4px;margin-left:8px} /* Featured event: full-width photo banner + highlighted border */ .erow.featured{flex-wrap:wrap;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .erow.featured .ph{width:100%;flex-basis:100%;height:172px} .erow.featured .et{font-size:24px} .erow .et{font-family:var(--font-display);font-weight:600;font-size:20px;margin:4px 0 7px;line-height:1.05} .erow .em{font-size:11.5px;color:var(--muted)} .erow .ecta{margin-top:auto;align-self:flex-start;color:var(--accent);font-weight:700;font-size:12.5px;padding-top:10px} .evlist{display:flex;flex-direction:column;gap:14px} .empty{text-align:center;color:var(--muted);font-size:14px;padding:48px 24px} /* Events reuse the order page header (.tabs); full-bleed inside the app shell */ .app-scroll > .tabs{margin:0 -20px} .app-scroll > .tabs .tabs-inner{padding-left:20px;padding-right:20px} .month-sec{scroll-margin-top:62px} .month-title{font-family:var(--font-display);font-weight:600;font-size:26px;margin:8px 0 12px;color:var(--ink)} /* ---- Call service (table picker + QR scanner) ---- */ .scan-or{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:12.5px;font-weight:600;margin:14px 0;cursor:pointer;background:none;border:none;font-family:inherit} .scan-or::before,.scan-or::after{content:"";flex:1;height:1px;background:var(--line)} .scan-or i{font-size:18px} .table-list.collapsed{display:none} .scanner{position:fixed;inset:0;z-index:95;background:#000;display:none} .scanner.open{display:block} .scanner video{width:100%;height:100%;object-fit:cover} .scanner canvas{display:none} .scan-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66vw;max-width:300px;aspect-ratio:1;border:3px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)} .scan-status{position:absolute;left:0;right:0;bottom:calc(40px + env(safe-area-inset-bottom));text-align:center;color:#fff;font-size:14px;font-weight:600;padding:0 28px;line-height:1.4;text-shadow:0 1px 4px rgba(0,0,0,.7)} .scan-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px} /* ---- Order confirmation ---- */ .confirm{text-align:center;max-width:400px;margin:0 auto} .confirm-icon{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:36px} .confirm h1{font-size:28px;margin:0 0 6px} .collect{margin-top:18px} .collect-when{font-size:34px;color:var(--gold);margin-top:2px} .sum-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13.5px;border-bottom:1px solid var(--line)} .sum-row:last-child{border-bottom:none} .sum-big{font-weight:800;font-size:15px} /* ============================================================================ Order page (collection menu) - re-themed onto the app tokens. All ids/classes are kept exactly as storeapp.js expects; only the look changes. ========================================================================== */ body.order-page{padding-bottom:120px} .wrap{max-width:520px;margin:0 auto} .tabs{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)} .tabs-inner{max-width:520px;margin:0 auto;display:flex;gap:6px;overflow-x:auto;padding:10px 16px;scrollbar-width:none} .tabs-inner::-webkit-scrollbar{display:none} .tabs .tab{white-space:nowrap;font-size:13px;font-weight:700;color:var(--muted);padding:8px 14px;border-radius:var(--r-pill);background:transparent;border:1px solid var(--line);transition:.15s;cursor:pointer} .tabs .tab.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .section{padding:18px 16px 4px} .section h2{font-family:var(--font-display);font-weight:600;font-size:24px;margin:0 0 12px;color:var(--ink)} .item{display:flex;gap:12px;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px;margin-bottom:12px;text-align:left;width:100%;color:var(--ink)} .item:active{transform:scale(.99)} .item-main{flex:1;min-width:0} .item-name{font-size:15.5px;font-weight:700;margin:0 0 4px} .item-desc{font-size:13px;color:var(--muted);margin:0 0 8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .item-price{font-size:14px;font-weight:700;color:var(--accent)} .cs-unpublish{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:#e7a99c;background:rgba(220,80,60,.14);padding:4px 9px;border-radius:999px} .item-thumb{width:96px;height:96px;border-radius:var(--r-tile);flex:0 0 auto;overflow:hidden;background:var(--line);position:relative} .item-thumb img{width:100%;height:100%;object-fit:cover} .item-thumb.placeholder{display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--muted)} .item-thumb.placeholder i{font-size:34px} .item-add{position:absolute;right:6px;bottom:6px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700} .item.no-thumb .item-add{position:static;margin-left:auto;align-self:center} .scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s} .scrim.open{opacity:1;pointer-events:auto} .sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.45);max-width:520px;margin:0 auto;transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);max-height:92vh;display:flex;flex-direction:column} .sheet.open{transform:translateY(0)} .sheet-head{position:relative;padding:16px 16px 10px;border-bottom:1px solid var(--line)} .sheet-head h3{font-family:var(--font-display);font-weight:600;margin:0;font-size:20px;padding-right:34px} .sheet-head p{margin:4px 0 0;font-size:13px;color:var(--muted)} .sheet-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:20px} .sheet-body{overflow-y:auto;padding:14px 16px;-webkit-overflow-scrolling:touch} .sheet-foot{padding:12px 16px;border-top:1px solid var(--line);padding-bottom:calc(12px + env(safe-area-inset-bottom))} .opt-hero{width:100%;height:170px;object-fit:cover;border-radius:var(--r-tile);margin-bottom:8px;background:var(--line)} .opt-group-title{font-size:14px;font-weight:800;margin:14px 0 8px;display:flex;justify-content:space-between;align-items:center} .opt-group-title small{font-size:11px;font-weight:700;color:var(--on-accent);background:var(--accent);padding:3px 8px;border-radius:999px} .opt-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)} .opt-row label{flex:1;font-size:14.5px;font-weight:600} .opt-row .opt-price{font-size:13px;color:var(--muted);font-weight:700;margin-right:4px} .opt-row input{width:20px;height:20px;accent-color:var(--accent)} .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden} .qty button{width:38px;height:38px;font-size:22px;font-weight:600;color:var(--accent);background:var(--card)} .qty span{min-width:30px;text-align:center;font-weight:800;font-size:15px} /* checkout uses the shared .field + .field label (micro-label); these style the bare inputs */ .field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-input);font-size:15px;background:var(--card);color:var(--ink);font-family:inherit} .field select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px} .field textarea{min-height:64px;resize:vertical} .field.two{display:flex;gap:10px} .field.two > div{flex:1} .field input:disabled{opacity:.5} .btn-primary{width:100%;background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:700;padding:15px;border-radius:var(--r-btn);display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:inherit} .btn-primary:disabled{opacity:.5} .btn-primary .b-total{font-variant-numeric:tabular-nums} .btn-primary.center{justify-content:center} .bline{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .bline-qty{font-weight:800;color:var(--accent)} .bline-main{flex:1;min-width:0} .bline-name{font-size:14.5px;font-weight:700;margin:0 0 2px} .bline-opts{font-size:12.5px;color:var(--muted);line-height:1.4} .bline-price{font-weight:700;font-size:14px;white-space:nowrap} .bline-remove{font-size:12px;color:#e7a99c;font-weight:700;margin-top:6px;display:inline-block} .basket-empty{text-align:center;color:var(--muted);padding:30px 0;font-size:14px} .cartbar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;transform:translateY(140%);transition:transform .25s cubic-bezier(.2,.8,.2,1)} .cartbar.show{transform:translateY(0)} .cartbar button{width:100%;background:var(--accent);color:var(--on-accent);border-radius:var(--r-btn);padding:15px 18px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:16px;box-shadow:0 6px 20px rgba(0,0,0,.35);font-family:inherit} .cartbar .c-count{background:rgba(0,0,0,.16);border-radius:999px;padding:3px 10px;font-size:13px} .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:999px;z-index:90;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---- Loading overlay (app-shell.js) ---- */ .app-loading{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 70%,transparent);opacity:0;visibility:hidden;transition:opacity .12s ease} .app-loading.show{opacity:1;visibility:visible} .app-spinner{width:40px;height:40px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:app-spin .7s linear infinite} @keyframes app-spin{to{transform:rotate(360deg)}} /* ---- Card join confirm (rules/terms step before creating a card) ---- */ .rules-box{max-height:320px;overflow-y:auto;font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:8px} .rules-box p{margin:0 0 10px} .rules-box :first-child{margin-top:0} .rules-box :last-child{margin-bottom:0} .terms-note{font-size:13px;line-height:1.6;margin:12px 0 0} .terms-note:first-child{margin-top:0} .join-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px} /* ---- Booking ticket page (my-bookings/{id} + /booking/{token}) ---- */ .bk-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 18px;text-align:center} .bk-when{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--ink)} .bk-sub{font-size:14px;color:var(--muted);margin-top:3px} .bk-items{margin-top:12px;display:flex;flex-direction:column;gap:4px} .bk-item{font-size:14px;font-weight:700;color:var(--accent)} .bk-item .mdi{margin-right:3px} .bk-qr{margin-top:16px} .bk-qr-code{width:184px;height:184px;margin:0 auto;background:#fff;border-radius:12px;padding:8px;display:flex;align-items:center;justify-content:center} .bk-qr-code img,.bk-qr-code canvas{width:168px!important;height:168px!important} .bk-qr-ref{font-size:12px;color:var(--muted);margin-top:10px} .bk-tickets{display:flex;flex-direction:column;gap:10px} .bk-ticket{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px} .bk-ticket-name{font-size:14.5px;font-weight:700;color:var(--ink)} .bk-ticket-state{font-size:12.5px;color:var(--muted);margin-top:2px} .bk-ticket-bar{height:6px;border-radius:999px;background:var(--line);margin-top:10px;overflow:hidden} .bk-ticket-next{font-size:12.5px;font-weight:700;color:var(--gold);margin-top:9px} .bk-ticket-next .mdi{margin-right:3px} .bk-ticket-fill{display:block;height:100%;background:var(--accent);border-radius:999px;width:0;transition:width .4s ease} .bk-wallet{display:flex;flex-direction:column;gap:10px} /* ---- Allergens: home card + guide page ---- */ .alg-mini{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 7px;line-height:1.3} .allergen-card{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;color:var(--ink)} .allergen-card .tile{width:40px;height:40px;border-radius:var(--r-tile);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto} .allergen-card .ac-t{font-size:17px} .allergen-card .ac-s{font-size:12px;color:var(--muted);margin-top:1px} .allergen-card > .mdi-chevron-right{margin-left:auto;color:var(--muted);font-size:20px} .alg-advisory{font-size:12.5px;line-height:1.6;color:var(--muted)} .alg-advisory .mdi{color:var(--gold)} .alg-legend{margin-top:10px;display:flex;flex-direction:column;gap:7px} .alg-def{display:flex;align-items:baseline;gap:8px} .alg-def .alg-mini{flex:0 0 auto} .alg-def-txt{font-size:11.5px;color:var(--muted);line-height:1.5} .alg-sec-title{font-size:20px;margin:0 0 10px;color:var(--ink)} .alg-list{display:flex;flex-direction:column;gap:0;padding:4px 16px} .alg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)} .alg-row:last-child{border-bottom:0} .alg-row-name{font-size:13.5px;color:var(--ink)} .alg-row-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end} .alg-none{font-size:11px;color:var(--muted);opacity:.7} .alg-foot{font-size:11.5px;line-height:1.6;margin-top:16px;text-align:center} .alg-mini.alg-diet{color:#5aa86a;border-color:rgba(90,168,106,.5);font-weight:800} /* ---- Allergen guide: guest filter + suitability marking + detail ---- */ .alg-mini.alg-may{opacity:.55;font-style:italic} .algf-label{font-size:11px;font-weight:700;color:var(--muted);margin:10px 0 5px;text-transform:uppercase;letter-spacing:.08em} .algf-chips{display:flex;flex-wrap:wrap;gap:5px} .algf-chips .alg-mini{background:transparent;font-family:inherit;cursor:pointer} .algf-chips .alg-mini.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .algf-chips .alg-diet.on{background:#3f8f4f;color:#fff;border-color:#3f8f4f} .algf-may{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:12px;cursor:pointer} .algf-note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5} .alg-row{display:block;padding:10px 0;border-bottom:1px solid var(--line)} .alg-row:last-child{border-bottom:0} .alg-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer} .alg-row.alg-unsuitable .alg-row-name{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;opacity:.7} .alg-tag{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px;white-space:nowrap} .alg-row.alg-unsuitable .alg-tag{background:rgba(220,80,60,.15);color:#e07b63;border:1px solid rgba(220,80,60,.35)} .alg-row.alg-maybe .alg-tag{background:rgba(230,170,60,.14);color:#d9a441;border:1px solid rgba(230,170,60,.35)} .alg-detail{padding:8px 0 2px;display:flex;flex-direction:column;gap:6px} .alg-det-line{display:flex;align-items:baseline;gap:8px} .alg-det-line .alg-mini{flex:0 0 auto} .alg-det-txt{font-size:11.5px;color:var(--muted);line-height:1.5} /* ---- Order page: menu chips (these pages load app.css, not storeapp.css) ---- */ .item-alg{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 0} .sheet-alg-row{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 2px} .sheet-alg-row .alg-mini,.opt-alg .alg-mini{cursor:pointer} .sheet-alg-desc{font-size:12px;line-height:1.5;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:6px 0 2px} .sheet-alg-may{font-size:11px;color:var(--muted);margin:4px 0 2px;font-style:italic} .opt-alg{display:inline-flex;flex-wrap:wrap;gap:3px;margin-left:6px;vertical-align:middle} /* ---- Order page: guest allergy filter ---- */ .algf-bar{display:flex;align-items:center;gap:10px;padding:10px 20px 0;max-width:520px;margin:0 auto} .algf-open{cursor:pointer;background:transparent;font-family:inherit} .algf-open .mdi{margin-right:2px} .algf-open.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .algf-summary{font-size:11px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .item-tag{display:inline-block;margin-left:6px;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:1px 7px;vertical-align:2px;background:rgba(220,80,60,.15);color:#e07b63;border:1px solid rgba(220,80,60,.35);text-decoration:none} .item-maybe .item-tag{background:rgba(230,170,60,.14);color:#d9a441;border-color:rgba(230,170,60,.35)} .item-avoid{opacity:.55} .item-avoid .item-name{text-decoration:line-through;text-decoration-thickness:1px} .opt-avoid label{color:#e07b63} .opt-maybe label{color:#d9a441} .sheet-avoid-note{font-size:12px;font-weight:600;color:#e07b63;background:rgba(220,80,60,.1);border:1px solid rgba(220,80,60,.3);border-radius:10px;padding:8px 12px;margin:10px 0 2px} .sheet-avoid-note.maybe{color:#d9a441;background:rgba(230,170,60,.1);border-color:rgba(230,170,60,.3)} .alg-mini.alg-prop{color:#5b8fc7;border-color:rgba(91,143,199,.5);font-weight:800} .algf-chips .alg-prop.on{background:#5b8fc7;color:#fff;border-color:#5b8fc7} .preorder-bar{position:sticky;top:54px;z-index:35;display:flex;align-items:center;gap:9px;width:calc(100% - 40px);max-width:480px;margin:12px auto 0;padding:11px 14px;font-size:13px;color:var(--ink);font-weight:600;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 4px 14px rgba(0,0,0,.25)} .preorder-bar .mdi{color:var(--accent)} .preorder-bar .pob-date{color:var(--accent)} .preorder-bar .pob-chev{margin-left:auto;color:var(--muted)} .bk-preorder .bk-pre-lines{margin:10px 0 4px;display:flex;flex-direction:column;gap:6px} .bk-pre-line{display:flex;gap:8px;font-size:13.5px;color:var(--ink)} .bk-pre-qty{color:var(--accent);font-weight:700;flex:0 0 auto} .bk-pre-opts{color:var(--muted);font-size:12px} .bk-pre-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin:8px 0 4px} .bk-pre-btn{margin-top:10px} #party-so-far:not(:empty){border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px} .party-title{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:7px} .party-guest{display:flex;gap:8px;font-size:12.5px;padding:3px 0} .party-name{font-weight:700;color:var(--ink);flex:0 0 auto} .party-items{color:var(--muted)} #guest-sheet .sheet-body input{width:100%;height:48px;font-size:16px;padding:11px 13px;border-radius:var(--r-input);border:1px solid var(--line);background:var(--bg);color:var(--ink)} .bk-pre-guest{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:8px 0 2px} .for-row{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px} .for-chip{cursor:pointer;background:transparent;font-family:inherit} .for-chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .for-new{width:100%;height:44px;font-size:15px;padding:10px 12px;margin-top:8px;border-radius:var(--r-input);border:1px solid var(--line);background:var(--bg);color:var(--ink)} .bline-for{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:2px} /* Jukebox (guest request queue) */ .jb-np{position:relative;display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;margin-bottom:14px;background:linear-gradient(135deg,var(--accent-soft),var(--card));overflow:hidden} .jb-np::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold))} .jb-np-track{font-size:17px;font-weight:700;color:var(--ink);margin-top:4px} .jb-np-thumb{width:96px;height:72px;object-fit:cover;border-radius:10px;flex:0 0 auto;box-shadow:0 4px 14px rgba(0,0,0,.25)} .jb-np-meta{min-width:0;flex:1} .jb-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px;margin-left:7px;vertical-align:-1px} .jb-eq span{width:3px;background:var(--accent);border-radius:1px;animation:jbeq 1s ease-in-out infinite} .jb-eq span:nth-child(2){animation-delay:.25s} .jb-eq span:nth-child(3){animation-delay:.5s} @keyframes jbeq{0%,100%{height:4px}50%{height:11px}} .jb-request{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap} .jb-request input{flex:1 1 120px;height:48px;font-size:15px;padding:10px 12px;border-radius:var(--r-input);border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit} .jb-request .btn{flex:0 0 auto;width:auto;padding:0 20px} .jb-votesleft{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);border-radius:var(--r-pill);padding:6px 13px;font-size:12px;font-weight:700;margin-bottom:12px} .jb-votesleft b{font-size:14px;font-weight:800} .jb-artists{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .jb-artists::-webkit-scrollbar{display:none} .jb-artist-chip{flex:0 0 auto;width:72px;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent} .jb-artist-chip .ph{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--line);background:var(--card);display:block} .jb-artist-chip .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.36);display:block} .jb-artist-chip .nm{font-size:11px;font-weight:600;color:var(--muted);max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jb-artist-chip.on .ph{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .jb-artist-chip.on .nm{color:var(--accent)} .jb-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--card);margin-bottom:8px} .jb-rank{flex:0 0 auto;min-width:20px;text-align:center;font-size:13px;font-weight:800;color:var(--muted)} .jb-row.next{border-color:var(--accent)} .jb-row.next .jb-rank{color:var(--accent)} .jb-meta{flex:1;min-width:0} .jb-title{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jb-artist{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jb-votes{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;background:var(--accent-soft);color:var(--accent);border:none;border-radius:var(--r-pill);padding:5px 11px;font-size:13px;font-weight:800} .jb-votes::before{content:'\25B2';font-size:8px} .jb-votes.pop{animation:jbpop .4s ease} @keyframes jbpop{40%{transform:scale(1.4)}} .jb-vote{flex:0 0 auto;width:52px;height:44px;border:none;border-radius:var(--r-btn);background:var(--accent);color:var(--on-accent);font-weight:800;font-size:15px;font-family:inherit;cursor:pointer;transition:transform .1s} .jb-vote:active{transform:scale(.9)} .jb-vote:disabled{opacity:.4} .jb-paid{display:inline-flex;align-items:center;flex:0 0 auto;background:linear-gradient(90deg,var(--accent),var(--gold));color:var(--on-accent);border-radius:var(--r-pill);padding:5px 11px;font-size:10.5px;font-weight:800;letter-spacing:.06em} .jb-row.paid{border-color:var(--gold)} .jb-playnow{flex:0 0 auto;height:44px;padding:0 12px;border:1px solid var(--gold);border-radius:var(--r-btn);background:transparent;color:var(--gold);font-weight:800;font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap;transition:transform .1s} .jb-playnow:active{transform:scale(.94)} .jb-playnow:disabled{opacity:.4} .jb-live .jb-playnow{display:none} .jb-wait{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .jb-paid-banner{background:var(--accent-soft);color:var(--accent);border-radius:var(--r-btn);padding:12px 14px;font-weight:700;font-size:13px;margin-bottom:12px} .jb-recent-tag{display:none;flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .jb-cat-row.jb-recent .jb-vote{display:none} .jb-cat-row.jb-recent .jb-recent-tag{display:inline} .jb-cat-row.jb-recent .jb-title, .jb-cat-row.jb-recent .jb-artist{opacity:.55} .jb-cat{margin-top:22px} .jb-search{position:relative;margin:8px 0 4px} .jb-search svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--accent);pointer-events:none} .jb-cat-search{width:100%;height:52px;font-size:16px;padding:10px 14px 10px 46px;border-radius:var(--r-pill);border:1.5px solid var(--accent);background:var(--card);color:var(--ink);font-family:inherit;box-shadow:0 2px 10px rgba(0,0,0,0.12)} .jb-cat-search::placeholder{color:var(--muted)} .jb-cat-search:focus{outline:none;box-shadow:0 0 0 3px var(--accent-soft)} .jb-cat-list{max-height:420px;overflow-y:auto} .jb-cat-row{border:none;border-bottom:1px solid var(--line);border-radius:0;background:transparent;margin-bottom:0;padding:12px 4px} .jb-cat-row .jb-vote{width:44px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:19px}