/* ============================================================================ 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} html{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%} html,body{margin:0;padding:0} /* ---- 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} .app-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;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 .eb{flex:1;min-width:0;padding:13px 15px;display:flex;flex-direction:column} .erow .ed{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} .erow .et{font-family:var(--font-display);font-weight:600;font-size:20px;margin:4px 0 2px;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} .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}