/* Self-hostad Fraunces (web/fonts/, serveras på /fonts/). Ladda ALDRIG Google Fonts här igen: ett till fonts.googleapis.com hämtas vid sidladdning, alltså INNAN gästen rört cookie-bannern, och skickar hens IP och User-Agent till Google. Ingen cookie sätts — lindrigare än ett GA-anrop — men det är ändå ett tredjepartsanrop före samtycke, på en sida där gästen ska beställa mat. (Walters mätning, ärende #158.) Filerna uppdateras med tools/fetch_fonts.py, inte för hand. */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/Fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/Fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* MobilMeny — mobil beställningssida för små svenska krögare. Fyra kurerade teman (Färskt kök, Trattoria, Natt, Hav) via [data-theme] på . Varje tema = komplett token-set. Mörka ytor (header/cartbar/hero) har EGNA text-tokens (--on-header*) så inget mörkt-på-mörkt kan uppstå. Mobil-först 390px. */ /* ═══════════════════════ TEMA-TOKENS ═══════════════════════ Tema 1 · Färskt kök (default): djup tallgrön + frisk lime. */ :root, [data-theme="fresh"]{ --paper:#F1F4EF; --card:#FFFFFF; --ink:#14201B; --soft-ink:#2C3A33; --muted:#5F6C64; --line:#E4E9E3; --hair:#EAEEE8; --sand:#EDF1EA; /* brand + accent */ --herb:#123A2E; --herb-deep:#0E1F19; --herb-soft:#E4EFE7; --accent:#CBF25C; --accent-hover:#BCE84A; --accent-ink:#0E1F19; --focus:#CBF25C; /* mörka ytor (header, cartbar, hero) */ --header:#0E1F19; --on-header:#F1F4EF; --on-header-dim:#9FB0A7; --on-header-line:#ffffff2e; --hero-a:#0E1F19; --hero-b:#123A2E; --hero-glow:#CBF25C33; /* status */ --danger:#C0392B; --amber:#7C6B3A; --swish:#6B4462; --card-sh:0 18px 44px -30px rgba(18,58,46,.30); --soft-sh:0 8px 24px -18px rgba(18,58,46,.24); } /* Tema 2 · Trattoria: varm tegel/vinröd + smörgul, mörk varm neutral. */ [data-theme="trattoria"]{ --paper:#EFE7DD; --card:#FBF6EF; --ink:#2A1A16; --soft-ink:#4A3229; --muted:#75604F; --line:#E2D4C6; --hair:#E9DDD0; --sand:#EDE2D4; --herb:#7C1F2B; --herb-deep:#5C141E; --herb-soft:#F1DEDB; --accent:#E8C25A; --accent-hover:#DDB544; --accent-ink:#3A2408; --focus:#E8C25A; --header:#5C141E; --on-header:#F7EDDE; --on-header-dim:#D9AFA6; --on-header-line:#ffffff2e; --hero-a:#5C141E; --hero-b:#7C1F2B; --hero-glow:#E8C25A3d; --danger:#B23A2E; --amber:#9A6B2E; --swish:#6B4462; --card-sh:0 18px 44px -30px rgba(92,20,30,.32); --soft-sh:0 8px 24px -18px rgba(92,20,30,.26); } /* Tema 3 · Natt: nästan-svart canvas, ljus text, mint-accent. */ [data-theme="night"]{ --paper:#14181A; --card:#1E2427; --ink:#ECF2F1; --soft-ink:#C4D0CE; --muted:#8697A0; --line:#2C353A; --hair:#262F33; --sand:#222A2E; --herb:#7BE0C6; --herb-deep:#0E1315; --herb-soft:#1C302C; --accent:#7BE0C6; --accent-hover:#63D2B5; --accent-ink:#0B1815; --focus:#7BE0C6; --header:#0E1315; --on-header:#ECF2F1; --on-header-dim:#8697A0; --on-header-line:#ffffff24; --hero-a:#0E1315; --hero-b:#1E2A2C; --hero-glow:#7BE0C63d; --danger:#F0776B; --amber:#E0B75A; --swish:#B08AD0; --card-sh:0 18px 44px -28px rgba(0,0,0,.7); --soft-sh:0 8px 24px -16px rgba(0,0,0,.6); } /* Tema 4 · Hav: djup petrol/marin + varm korall, sval ljus canvas. */ [data-theme="ocean"]{ --paper:#EDF2F3; --card:#FFFFFF; --ink:#122229; --soft-ink:#2C4249; --muted:#586C73; --line:#DAE4E6; --hair:#E2EBED; --sand:#E4EDEE; --herb:#0E3A46; --herb-deep:#0A2A33; --herb-soft:#DCEBEC; --accent:#FF8A6B; --accent-hover:#FA7754; --accent-ink:#3A140A; --focus:#FF8A6B; --header:#0A2A33; --on-header:#EAF3F4; --on-header-dim:#8FB0B6; --on-header-line:#ffffff2e; --hero-a:#0A2A33; --hero-b:#0E3A46; --hero-glow:#FF8A6B40; /* #D0503A gav 4,29:1 mot vitt kort och 3,87:1 i .err-act-rutan — under AA (4,5:1) för all text som bär --danger: .err, .btn.danger, .oact button.cancel, .hiv-x:hover. #BE4430 håller ocean-temats varmare rödton men landar på 5,17:1 respektive 4,62:1. (Dessis kontroll-punkt i #340: dämpad bakgrund + röd text är exakt där kontrasten faller utan att någon märker det, för färgen SER stark ut.) */ --danger:#BE4430; --amber:#B67A2E; --swish:#6B4462; --card-sh:0 18px 44px -30px rgba(10,42,51,.32); --soft-sh:0 8px 24px -18px rgba(10,42,51,.26); } /* Legacy alias — tidigare hårdkodade var(--lime*) i inline-styles/JS mappas till accent. */ :root{ --lime:var(--accent); --lime-hover:var(--accent-hover); --lime-ink:var(--accent-ink); --herb-soft:var(--herb-soft); --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --serif:"Fraunces",Georgia,"Times New Roman",serif; --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; --radius:14px; } *{box-sizing:border-box} html,body{overflow-x:hidden} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55; -webkit-font-smoothing:antialiased;letter-spacing:-.005em;transition:background .25s,color .25s} a{color:var(--herb)} img{max-width:100%} button{font-family:inherit} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} .wrap{max-width:760px;margin:0 auto;padding:20px 16px 100px} .wide{max-width:1000px} /* ── knappar/inputs ── */ /* Primär = accent-fyllning + accent-ink-text. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--accent-ink); font-weight:700;font-size:.95rem;border:0;border-radius:999px;padding:13px 20px;cursor:pointer;text-decoration:none; box-shadow:none;width:100%;text-align:center;letter-spacing:-.01em;transition:background .15s,transform .05s,box-shadow .15s} .btn:hover{background:var(--accent-hover)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.45;cursor:default} .btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 45%,transparent)} /* Fyllda sekundärer. */ .btn.dark{background:var(--herb-deep);color:#fff} .btn.dark:hover{filter:brightness(1.15)} .btn.herb{background:var(--herb);color:var(--card)} .btn.herb:hover{filter:brightness(1.1)} /* Ghost på LJUS botten: mörk (herb) ram + text. */ .btn.ghost{background:transparent;color:var(--herb);border:1.5px solid var(--line)} .btn.ghost:hover{border-color:var(--herb);background:var(--herb-soft)} .btn.sm{width:auto;padding:9px 16px;font-size:.85rem} .btn.danger{background:transparent;color:var(--danger);border:1.5px solid color-mix(in srgb,var(--danger) 34%,transparent)} .btn.danger:hover{background:color-mix(in srgb,var(--danger) 8%,transparent)} /* Ghost på MÖRK botten (inuti .on-dark): ljus ram + ljus text — aldrig mörk-på-mörk. */ .on-dark .btn.ghost{color:var(--on-header);border-color:var(--on-header-line)} .on-dark .btn.ghost:hover{border-color:var(--on-header);background:#ffffff18} label{display:block;font-size:.82rem;font-weight:600;color:var(--soft-ink);margin:14px 0 6px} input,select,textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--card); border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;line-height:1.4} textarea{resize:vertical;min-height:70px} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--herb); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 40%,transparent)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:520px){.row2{grid-template-columns:1fr}} /* ── kort/paneler ── */ .card{background:var(--card);border:0;border-radius:16px;padding:22px;box-shadow:var(--card-sh);margin-bottom:16px} .card h2{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;font-size:1.4rem;margin:0 0 4px;line-height:1.15} .card .lead{color:var(--soft-ink);font-size:.94rem;margin:0 0 16px} /* ── topbar (mörk yta → .on-dark används på wrappern i JS-oberoende CSS) ── */ .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px -2px 18px; padding:12px 16px;background:var(--header);color:var(--on-header);border-radius:14px;position:relative} .topbar,.cartbar,.rhero,.consent,.toast{} /* Alla mörka ytor ärver ljus text + ljusa ghost-knappar. */ .topbar .btn.ghost,.cartbar .btn.ghost,.consent .btn.ghost,.lhero .btn.ghost{color:var(--on-header);border-color:var(--on-header-line)} .topbar .btn.ghost:hover,.cartbar .btn.ghost:hover,.consent .btn.ghost:hover,.lhero .btn.ghost:hover{border-color:var(--on-header);background:#ffffff18} /* Wordmark — Fraunces, signatur "point" (tallriks-prick) i accent. */ .brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;letter-spacing:-.02em; font-size:1.2rem;color:var(--on-header)} /* Brand-mark (favicon-ikonen) som ersätter den dekorativa accent-pricken i wordmarks/eyebrows. Självständig badge (mörk platta + lime) → funkar mot både ljus och mörk botten i alla fyra teman. Storleken styrs per plats nedan. */ .brand .dot,.kicker .dot,.land-brand .dot,.lhero-eyebrow .dot{ background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Crect%20width%3D%22512%22%20height%3D%22512%22%20rx%3D%22110%22%20fill%3D%22%230E1F19%22%2F%3E%3Cpath%20d%3D%22M120%20200%20a136%20136%200%200%201%20272%200%20z%22%20fill%3D%22%23CBF25C%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22230%22%20width%3D%22212%22%20height%3D%2228%22%20rx%3D%2214%22%20fill%3D%22%23CBF25C%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%22300%22%20width%3D%22272%22%20height%3D%2224%22%20rx%3D%2212%22%20fill%3D%22%23F1F4EF%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E"); border-radius:4px} .brand .dot{width:18px;height:18px;flex:0 0 18px} .topbar .who{font-size:.82rem;color:var(--on-header-dim);display:flex;align-items:center;gap:10px} .topbar .who a{color:var(--accent)} .topbar .who b,.topbar .who strong{color:var(--on-header);font-weight:600} /* ── admin: tre direkta ikon-knappar i topbaren (Inställningar/Konto/Logga ut) ── */ .navicons{display:inline-flex;align-items:center;gap:6px} .iconbtn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px; background:#ffffff14;color:var(--on-header);border:1.5px solid var(--on-header-line);cursor:pointer; font-family:inherit;transition:background .15s,border-color .15s,transform .05s} .iconbtn:hover{background:#ffffff26;border-color:var(--on-header)} .iconbtn:active{transform:translateY(1px)} .iconbtn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 55%,transparent)} .iconbtn svg{display:block} /* Premium-markör på konto-ikonen. */ .iconbtn .premdot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 2px var(--header)} /* Logga ut subtilt varnande (röd-ton) men fortfarande ljus/läsbar på mörk topbar. */ .iconbtn#logout{color:#FFC9BE} .iconbtn#logout:hover{background:#ffffff26;border-color:#FFC9BE;color:#FFE0D9} /* ── modal / guide-panel ── */ .modal-overlay{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--herb-deep) 55%,transparent); backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fadein .18s ease} @media(min-width:600px){.modal-overlay{align-items:center;padding:24px}} @keyframes fadein{from{opacity:0}to{opacity:1}} .modal{background:var(--card);width:100%;max-width:600px;max-height:92vh;display:flex;flex-direction:column; border-radius:20px 20px 0 0;box-shadow:0 -20px 60px -20px rgba(0,0,0,.5);overflow:hidden;animation:slideup .22s ease} @media(min-width:600px){.modal{border-radius:20px}} @keyframes slideup{from{transform:translateY(24px)}to{transform:translateY(0)}} .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 14px; border-bottom:1px solid var(--hair)} .modal-head h2{font-family:var(--serif);font-weight:600;font-size:1.45rem;letter-spacing:-.01em;line-height:1.1} .modal-x{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line); background:var(--card);color:var(--soft-ink);cursor:pointer;transition:.15s} .modal-x:hover{border-color:var(--herb);background:var(--sand)} .modal-x:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 45%,transparent)} .modal-scroll{overflow-y:auto;padding:18px 20px 8px;-webkit-overflow-scrolling:touch} .modal-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--hair)} .modal-foot .btn{width:100%} /* inbäddad Stripe-checkout (Premium-abonnemang, in-app) */ .modal.checkout-modal{max-width:480px} #ec-mount{min-height:180px} /* guide-innehåll */ .guide-lead{color:var(--soft-ink);font-size:.95rem;margin:0 0 20px} .guide-sec{display:flex;gap:14px;margin-bottom:20px} .guide-num{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--herb-soft);color:var(--herb); display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1rem} .guide-body{flex:1;min-width:0} .guide-body h3{font-family:var(--serif);font-weight:600;font-size:1.08rem;letter-spacing:-.01em;margin:2px 0 5px;color:var(--ink)} .guide-body p{margin:0 0 6px;font-size:.92rem;color:var(--soft-ink);line-height:1.5} .guide-tip{background:var(--sand);border-radius:10px;padding:9px 12px;font-size:.86rem!important;color:var(--soft-ink)!important;margin-top:8px!important} .guide-ul{margin:6px 0 0;padding:0;list-style:none} .guide-ul li{position:relative;padding:5px 0 5px 18px;font-size:.9rem;color:var(--soft-ink);line-height:1.45} .guide-ul li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--herb)} .guide-foot{font-size:.86rem;color:var(--muted);border-top:1px solid var(--hair);padding-top:14px;margin:4px 0 8px} /* ── segmented control (admin vy-växlare Order/Meny) ── */ .seg{display:flex;gap:4px;background:var(--sand);border-radius:13px;padding:4px;margin-bottom:16px; box-shadow:inset 0 0 0 1px var(--line)} .seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:11px 10px;font-size:.9rem; font-weight:700;color:var(--soft-ink);cursor:pointer;font-family:inherit;letter-spacing:-.01em;transition:.15s; display:inline-flex;align-items:center;justify-content:center;gap:7px} .seg button .si{font-size:1rem;line-height:1} .seg button:hover{color:var(--soft-ink)} .seg button.on{background:var(--card);color:var(--herb);box-shadow:var(--soft-sh)} .seg button.on .si{color:var(--accent-ink)} /* Kicker */ .kicker{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--herb); margin:0 0 12px;font-variant:small-caps;letter-spacing:.04em} .kicker .dot{width:15px;height:15px;flex:0 0 15px} h1{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.06; margin:0 0 12px;text-wrap:balance} .muted{color:var(--muted)} .err{color:var(--danger);font-size:.86rem;margin-top:10px;font-weight:600} /* Varning som kräver en ÅTGÄRD, till skillnad från .err som bara upplyser. Skillnaden finns för att två varningar i granskningsvyn har olika konsekvens: fel valuta ger en siffra krögaren SER, 0 kr ger bort mat i storefronten. Såg de likadana ut lärde sig ögat att båda var "sånt där rött". (Dessis fråga i #340.) */ .err-act{color:var(--danger);font-size:.9rem;line-height:1.45;font-weight:600; background:color-mix(in srgb,var(--danger) 8%,var(--card)); border:1px solid color-mix(in srgb,var(--danger) 30%,var(--card)); border-left:4px solid var(--danger);border-radius:10px;padding:10px 12px} .ok{color:var(--herb);font-size:.86rem;margin-top:10px;font-weight:600} /* ── restaurang-hero (kund) — signatur: cut-corner + kökshanddukstextur ── */ .rhero{background:linear-gradient(135deg,var(--hero-a),var(--hero-b) 70%);border-radius:16px;padding:24px 22px; color:var(--on-header);box-shadow:var(--card-sh);margin-bottom:16px;position:relative;overflow:hidden} .rhero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:repeating-linear-gradient(90deg,#ffffff0c 0 1px,transparent 1px 22px)} .rhero::after{content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%; background:radial-gradient(circle,var(--hero-glow),transparent 70%)} .rhero .rname{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:1.65rem;margin:0;line-height:1.1;position:relative} .rhero .rmeta{margin-top:6px;font-size:.86rem;color:var(--on-header-dim);position:relative} .rhero .rpill{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.72rem;font-weight:700; color:var(--on-header);background:#ffffff1a;border:1px solid var(--on-header-line); border-radius:999px;padding:5px 13px;position:relative} .rhero .rpill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--on-header);opacity:.55} /* ── meny ── */ .cat{font-family:var(--serif);font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--herb); margin:24px 2px 4px;display:flex;align-items:center;gap:10px} .cat::after{content:"";flex:1;height:1px;background:var(--line)} .dish{display:flex;gap:12px;align-items:center;padding:13px 0;border-top:1px solid var(--hair)} .dish:first-of-type{border-top:0} .dish .dn{flex:1;min-width:0} .dish .dn b{font-size:.98rem;display:block;line-height:1.25;font-weight:600} .dish .dn span{font-size:.8rem;color:var(--muted)} .dish .pr{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:600; color:var(--soft-ink);white-space:nowrap} /* Gästens primära åtgärd, på en yta som per definition alltid används i telefon. Den grafiska cirkeln är kvar på 36px, men träffytan är 44px via transparent border (box-sizing:content-box gör att border ligger UTANFÖR de 36px, så utseendet är oförändrat). 44px är minimum för touch — 36 var för snålt. Dessi 2026-08-22. */ .dish .add{position:relative;width:36px;height:36px;border-radius:50%;background:var(--accent);border:0;color:var(--accent-ink); font-family:inherit;padding:0;appearance:none;-webkit-appearance:none; display:grid;place-items:center;font-size:1.4rem;line-height:1;flex:0 0 36px;cursor:pointer; box-shadow:0 4px 12px -6px color-mix(in srgb,var(--herb) 50%,transparent);transition:background .15s,transform .05s} .dish .add:hover{background:var(--accent-hover)} /* Träffytan, inte cirkeln. Gästens primära åtgärd på en yta som alltid används i telefon — 36px är under minimum för touch (44px). Pseudo-elementet förstorar bara det som går att träffa; cirkeln, skuggan och layouten är exakt som förut. (Löste det först med transparent border, men box-shadow följer border-boxen och la sig då som en lös halo 4px utanför cirkeln — syntes bara i skärmdumpen.) */ .dish .add::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:44px;height:44px;border-radius:50%} .dish .add:active{transform:scale(.92)} .dish .qtybox{display:flex;align-items:center;gap:10px} .dish .qtybox .q{min-width:20px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums} .dish .qtybox button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:var(--card); color:var(--herb);font-size:1.15rem;line-height:1;cursor:pointer} .dish .qtybox button:hover{border-color:var(--herb);background:var(--herb-soft)} /* ── cart / sticky bar (mörk yta) ── */ .cartbar{position:fixed;left:0;right:0;bottom:0;background:var(--header);border-top:0; padding:14px 16px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -14px 34px -22px rgba(0,0,0,.55);z-index:20; /* Cookie-bannern ar ocksa fixed bottom:0 med hogre z-index och lag darfor OVANPA "Till kassan" — en forstagangsbesokare kunde inte slutfora sin bestallning forran hen svarat pa cookiefragan. --consent-h satts i JS medan bannern visas (matt hojd, for den wrappar pa smala skarmar) och nollas nar den stangs. */ bottom:var(--consent-h,0px);transition:bottom .2s ease} .cartbar .inner{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:14px} .cartbar .sum{flex:1} .cartbar .sum .l{font-size:.72rem;color:var(--on-header-dim);display:block} .cartbar .sum .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.3rem;font-weight:600; letter-spacing:-.01em;color:var(--on-header)} .cartbar .btn{width:auto;flex:0 0 auto} .rowline{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;padding:9px 0;border-top:1px solid var(--hair)} .rowline:first-child{border-top:0} .rowline .pr{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--soft-ink)} .tot{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 4px} .tot .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:600;letter-spacing:-.01em} /* ── chips ── */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0} .chip{font-size:.82rem;font-weight:600;border:1.5px solid var(--line);border-radius:999px;padding:8px 15px; color:var(--soft-ink);background:var(--card);cursor:pointer;transition:.12s} .chip:hover{border-color:var(--herb)} .chip.on{color:var(--on-header);background:var(--herb);border-color:var(--herb)} /* ── betalval ── */ .payopt{border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;display:flex;align-items:center;gap:12px; margin-bottom:10px;background:var(--card);cursor:pointer;transition:.12s} .payopt:hover{border-color:var(--herb)} .payopt.on{border-color:var(--herb);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 40%,transparent)} .payopt .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 38px;color:#fff;font-weight:700;font-size:.9rem} .payopt .pt{flex:1} .payopt .pt b{font-size:.92rem;display:block;font-weight:600} .payopt .pt span{font-size:.76rem;color:var(--muted)} .payopt .rad{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 20px} .payopt.on .rad{border-color:var(--herb);background:radial-gradient(circle,var(--herb) 0 44%,transparent 46%)} /* ── QR ── */ .qrbox{background:var(--sand);border:0;border-radius:14px;padding:20px;text-align:center;margin-top:8px} .qrbox .qr{width:172px;height:172px;margin:0 auto 10px;display:grid;place-items:center} .qrbox .qr img,.qrbox .qr canvas{border-radius:10px;background:#fff;padding:6px} .qr-amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:1.1rem} .qrbox .qh{font-size:.76rem;color:var(--muted);margin-top:4px} .qrbox .qh b{color:var(--herb)} /* ── bekräftelse ── */ .confirm-ill{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 12px;gap:6px} .checkc{width:74px;height:74px;border-radius:50%;background:var(--herb);color:var(--on-header);display:grid;place-items:center} .confirm-ill h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:12px 0 0;letter-spacing:-.01em} .ordno{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;background:var(--herb-soft);color:var(--herb); border-radius:8px;padding:4px 12px;font-size:.9rem} .statusrow{display:inline-flex;gap:8px;align-items:center;font-size:.82rem;color:var(--muted);margin-top:14px; background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:6px 14px} .statusrow .d{width:8px;height:8px;border-radius:50%;background:var(--amber)} .statusrow.done .d{background:var(--herb)} .statusrow.cancel .d{background:var(--danger)} /* ── admin: order-kö ── */ .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .tab{font-size:.85rem;font-weight:600;border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--card);color:var(--muted);cursor:pointer;transition:.12s} .tab:hover{border-color:var(--herb)} .tab.on{color:var(--on-header);background:var(--herb);border-color:var(--herb)} .order{border:0;border-radius:14px;padding:16px;margin-bottom:12px;background:var(--card);box-shadow:var(--soft-sh)} .order.new{box-shadow:0 0 0 2px var(--accent),var(--soft-sh)} .order .oh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px} .order .oid{font-weight:700;font-size:.92rem} .order .otime{font-size:.78rem;color:var(--muted);white-space:nowrap} .order .oitems{font-size:.86rem;color:var(--soft-ink);margin-bottom:11px} .paychip{font-size:.7rem;font-weight:700;border-radius:999px;padding:4px 11px;display:inline-flex;align-items:center;gap:6px} .paychip.swish{background:color-mix(in srgb,var(--swish) 14%,transparent);color:var(--swish)} .paychip.pickup{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)} .paychip.paid{background:var(--herb-soft);color:var(--herb)} .paychip .d{width:8px;height:8px;border-radius:50%;background:currentColor} .oact{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap} .oact button{flex:1;min-width:120px;border:1.5px solid var(--line);border-radius:999px;padding:10px;font-weight:600;font-size:.82rem;background:var(--card);color:var(--ink);cursor:pointer} .oact button.ok{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .oact button.mark{color:var(--swish);border-color:color-mix(in srgb,var(--swish) 40%,transparent)} .oact button.cancel{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)} /* ── AI-import ── */ .import-drop{border:1.5px dashed var(--line);border-radius:14px;padding:22px;text-align:center;background:var(--sand)} .import-drop b{display:block;font-weight:600;margin-bottom:4px} /* Egna knappar i stället för native file-input: systemets "Choose File" är engelsk och spiller ut ur kortet på smal skärm. Inputen är hidden och triggas av knapparna. */ .import-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px} .import-actions .btn{width:auto} .import-filename{margin-top:10px;font-size:.82rem;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Bekräfta-raden-läget (Dessi 2026-08-22): varje rad börjar obekräftad, Spara låses tills alla gåtts igenom. Bekräftad rad tonas ned — det som ÅTERSTÅR ska dra blicken, inte det som är avklarat. */ .sic.ok{background:var(--herb);border-color:var(--herb);color:var(--on-header)} .srow.confirmed .sn{opacity:.62} .ai-foot{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;margin-top:14px} .ai-count{font-size:.85rem;color:var(--muted)} .ai-foot-btns{display:flex;gap:10px;flex-wrap:wrap} .ai-foot-btns .btn{width:auto} .btn[disabled]{opacity:.45;cursor:not-allowed} .import-drop span{font-size:.84rem;color:var(--muted)} .suggest{display:flex;justify-content:space-between;align-items:center;background:var(--herb-soft);border-radius:11px; padding:10px 13px;font-size:.9rem;margin-bottom:8px;gap:10px} .suggest .sn b{font-weight:600} .suggest .sn span{font-size:.76rem;color:var(--soft-ink)} .suggest .sp{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--herb);font-weight:600;white-space:nowrap} /* AI-import granskningsrad: kolumn-layout (rad-topp + ev. inline-editor/kategorifråga). */ .suggest{flex-direction:column;align-items:stretch} .suggest .srow{display:flex;justify-content:space-between;align-items:center;gap:10px} .suggest .sn{flex:1;min-width:0} .suggest .sright{display:flex;align-items:center;gap:8px;flex:0 0 auto} /* Ikon-knappar (redigera / ta bort) — appens ghost-ikon-språk, ej native checkbox. */ .suggest .sic{width:32px;height:32px;border:0;border-radius:9px;background:#0000000d;color:var(--soft-ink); display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 32px} .suggest .sic:hover{background:#00000016;color:var(--ink)} .suggest .sic.on{background:var(--danger);color:#fff} /* Utelämnad rad: överstruken text, dämpad. */ .suggest.removed{opacity:.6} .suggest.removed .sn,.suggest.removed .sp{text-decoration:line-through} .suggest.removed .sp{color:var(--muted)} /* Inline-editor för en rad. */ .suggest .sedit{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} .suggest .sedit .full{grid-column:1 / -1} .suggest .sedit label{font-size:.72rem;font-weight:600;color:var(--soft-ink);display:block;margin:0 0 3px} .suggest .sedit input{width:100%;font-size:16px;padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink)} .suggest .sedit-act{grid-column:1 / -1;display:flex;gap:8px;margin-top:2px} /* Kategori-omfattnings-fråga (bara denna / alla i kategorin) — ingen native confirm. */ .suggest .scat{grid-column:1 / -1;background:var(--herb-soft);border-radius:10px;padding:10px 12px;margin-top:4px} .suggest .scat p{margin:0 0 8px;font-size:.82rem;color:var(--ink);font-weight:600} .suggest .scat .scat-btns{display:flex;gap:8px;flex-wrap:wrap} /* ── admin meny-editor rad ── */ .medit{border:0;border-radius:14px;padding:15px;margin-bottom:12px;background:var(--card);box-shadow:var(--soft-sh)} .medit .mtop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start} .medit .mname{font-weight:600} .medit .mmeta{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--muted)} .medit .macts{display:flex;gap:8px;margin-top:10px} .pill-off{font-size:.68rem;font-weight:600;color:var(--muted);background:var(--sand);border-radius:999px;padding:2px 9px} /* ── delningslänk / QR-share ── */ .share-link{display:flex;gap:8px;align-items:center;background:var(--sand);border:0;border-radius:12px;padding:11px 13px;font-family:var(--mono);font-size:.82rem;word-break:break-all} .toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none; background:var(--header);color:var(--on-header);padding:11px 18px;border-radius:12px;font-size:.88rem;font-weight:600;transition:.25s;z-index:50} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ── tomt läge: egen "tallriks"-illustration, ej emoji ── */ .empty{text-align:center;color:var(--muted);padding:36px 12px;font-size:.92rem} .empty .emptymark{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;border:2px dashed var(--line); display:grid;place-items:center;position:relative} .empty .emptymark::after{content:"";width:26px;height:26px;border-radius:50%;border:2px solid var(--line)} .spin{text-align:center;color:var(--muted);padding:30px;font-size:.9rem} footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;text-align:center} footer .fmark{font-family:var(--serif);font-weight:600;color:var(--soft-ink);letter-spacing:-.02em} /* ── Consent-bar (GA) — mörk yta ── */ .consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--header);color:var(--on-header); display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:12px 16px;font-size:.86rem} .consent-lead{color:var(--on-header-dim)} .consent-btns{display:flex;gap:8px} .consent .btn{width:auto} /* ── Premium / upgrade ── */ .plan-badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.02em; text-transform:uppercase;background:var(--sand);color:var(--soft-ink);border-radius:999px;padding:3px 11px} .plan-badge.premium{background:var(--herb);color:var(--on-header)} .plan-badge.sm{font-size:.62rem;padding:2px 8px;vertical-align:middle;margin-left:6px} .upgrade-card{box-shadow:0 0 0 2px var(--herb),var(--card-sh)} .perks{list-style:none;padding:0;margin:12px 0 0} .perks li{position:relative;padding:5px 0 5px 24px;color:var(--soft-ink);font-size:.92rem} .perks li::before{content:"✓";position:absolute;left:0;color:var(--herb);font-weight:700} /* ── tema-väljare (settings) ── */ .themegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 2px} .themecard{position:relative;border:1.5px solid var(--line);border-radius:14px;padding:0;overflow:hidden; cursor:pointer;background:var(--card);text-align:left;font-family:inherit;transition:.15s;display:block} .themecard:hover{border-color:var(--herb)} .themecard.on{border-color:var(--herb);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 38%,transparent)} .themecard .swatch{height:60px;display:flex;position:relative} .themecard .swatch .sw{flex:1} .themecard .swatch .chip-demo{position:absolute;left:10px;bottom:8px;width:34px;height:14px;border-radius:999px; box-shadow:0 2px 6px -2px rgba(0,0,0,.4)} .themecard .tlabel{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px} .themecard .tlabel b{font-size:.88rem;font-weight:600;color:var(--ink)} .themecard .tlabel .tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 18px; display:grid;place-items:center;font-size:.7rem;color:transparent} .themecard.on .tlabel .tick{background:var(--herb);border-color:var(--herb);color:var(--card)} /* ── egen accentfärg-väljare (settings, Premium) ── */ .accentgrid{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 2px} .accsw{position:relative;width:38px;height:38px;border-radius:11px;border:2px solid var(--line); cursor:pointer;padding:0;transition:.15s;box-shadow:0 2px 6px -3px rgba(0,0,0,.35)} .accsw:hover{transform:translateY(-1px)} .accsw.on{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 22%,transparent)} .accsw .acctick{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.9rem; font-weight:800;opacity:0;text-shadow:0 1px 3px rgba(0,0,0,.55)} .accsw.on .acctick{opacity:1} .accsw.locked{width:30px;height:30px;cursor:default;opacity:.7;box-shadow:none} .accentrow{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap} .accenthex{flex:1;min-width:150px;text-transform:lowercase;font-family:var(--mono);letter-spacing:.02em} .accprev{width:38px;height:38px;border-radius:11px;border:2px solid var(--line);flex:0 0 38px; background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%); background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0} .accent-locked{border:1.5px dashed var(--line);border-radius:14px;padding:14px 16px;background:var(--sand)} .accent-locked-swatches{display:flex;gap:8px} /* ── betalsätt-toggles (settings) ── */ .paytoggle{display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--line);border-radius:13px; padding:12px 14px;margin:0 0 10px;cursor:pointer;background:var(--card);transition:.12s} .paytoggle:hover{border-color:var(--herb)} .paytoggle:has(input:checked){border-color:var(--herb);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 34%,transparent)} .paytoggle input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--herb)} .paytoggle .ptx b{display:block;font-size:.92rem;font-weight:600;color:var(--ink)} .paytoggle .ptx span{font-size:.78rem;color:var(--muted)} /* ── kategori-combobox (egen, ingen extern lib) ── */ .combo{position:relative} .combo-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:inherit; font-size:16px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px; padding:12px 13px;cursor:pointer;text-align:left;transition:.12s} .combo-btn:hover{border-color:var(--herb)} .combo.open .combo-btn{border-color:var(--herb);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 38%,transparent)} .combo-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .combo-val.placeholder{color:var(--muted)} .combo-chev{font-size:.7rem;color:var(--muted);transition:transform .15s} .combo.open .combo-chev{transform:rotate(180deg)} .combo-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border-radius:13px; box-shadow:var(--card-sh),0 0 0 1px var(--line);padding:8px;z-index:45;display:none} .combo.open .combo-pop{display:block} .combo-search{width:100%;font-size:16px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px;background:var(--paper)} .combo-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px} .combo-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0; border-radius:9px;padding:10px 11px;font-size:.92rem;font-family:inherit;color:var(--soft-ink);cursor:pointer} .combo-opt:hover,.combo-opt.act{background:var(--sand);color:var(--ink)} .combo-opt.sel{color:var(--herb);font-weight:600} .combo-opt.sel::after{content:"✓";margin-left:auto;color:var(--herb);font-weight:700} .combo-opt.is-new{color:var(--herb);font-weight:600} .combo-opt .combo-plus{display:grid;place-items:center;width:20px;height:20px;border-radius:50%; background:var(--herb-soft);color:var(--herb);font-size:.85rem;flex:0 0 20px} .combo-none{padding:10px 11px;color:var(--muted);font-size:.9rem} /* ── öppettider: publik status (hero) ── */ .rpills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:relative} .rhero .rpill.open{background:var(--herb);color:var(--on-header)} .rhero .rpill.closed{background:#ffffff1f;color:var(--on-header);border:1px solid var(--on-header-line)} .rhero .rpill .sdot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px} .rhero .rpill.open .sdot{background:var(--accent-ink)} .rhours-toggle{background:none;border:0;color:var(--on-header);text-decoration:underline;text-underline-offset:2px; font:inherit;font-size:.86rem;cursor:pointer;padding:0} .rweek{margin-top:14px;background:#00000024;border-radius:12px;padding:10px 12px;position:relative} .rweek-row{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;color:var(--on-header);padding:4px 0} .rweek-row.today{font-weight:700} .rweek-row.today .rweek-d::before{content:"• ";color:var(--herb)} .rweek-d{color:var(--on-header-dim)} .rweek-row.today .rweek-d{color:var(--on-header)} .rweek-exhead{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--on-header-dim); margin:8px 0 2px;padding-top:8px;border-top:1px solid var(--on-header-line)} .rweek-row.ex .rweek-d{color:var(--accent)} /* ── öppettider-editor (admin) ── */ .hours-editor{display:flex;flex-direction:column;gap:8px} .hrow{border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--card)} .hrow.is-closed{background:var(--sand)} .hrow-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .hday{font-weight:600;font-size:.92rem;color:var(--ink)} .hclosed{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--muted);margin:0;cursor:pointer} .hclosed input{width:16px;height:16px;accent-color:var(--herb);margin:0} .hivs{display:flex;flex-direction:column;gap:8px;margin-top:10px} .hiv{display:flex;align-items:center;gap:8px} .timesel{width:auto;flex:1;min-width:0;font-size:16px;padding:9px 10px} .hdash{color:var(--muted);flex:0 0 auto} .hiv-x{flex:0 0 auto;width:32px;height:32px;border-radius:9px;border:1.5px solid var(--line);background:var(--card); color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer} .hiv-x:hover{border-color:var(--danger);color:var(--danger)} .hadd{align-self:flex-start;background:transparent;border:1.5px dashed var(--line);border-radius:9px;padding:8px 14px; font-size:.84rem;font-weight:600;color:var(--herb);cursor:pointer;font-family:inherit} .hadd:hover{border-color:var(--herb);background:var(--herb-soft)} .hours-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} /* kompakt läs-vy i inställningar (första-läget) */ .hours-summary{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)} .hsum-list{display:flex;flex-direction:column} .hsum-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 0;font-size:.86rem} .hsum-row.today{font-weight:700} .hsum-row.today .hsum-d::before{content:"• ";color:var(--herb)} .hsum-d{color:var(--muted);flex:0 0 auto} .hsum-row.today .hsum-d{color:var(--ink)} .hsum-t{color:var(--ink);text-align:right} .hsum-t.closed{color:var(--muted)} .hsum-exhead{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted); margin:10px 0 2px;padding-top:8px;border-top:1px solid var(--hair)} .hsum-row.ex .hsum-d{color:var(--herb);font-weight:600} .hsum-row.ex.active .hsum-d{color:var(--accent)} .hsum-empty{color:var(--muted);font-size:.86rem;padding:2px 0 6px} .hsum-edit{margin-top:12px;display:inline-flex;align-items:center;gap:7px} .hsum-edit svg{flex:0 0 auto} .hsec-head{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 10px} /* undantag-lista i popup */ .exc-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--line); border-radius:11px;padding:11px 13px;margin-bottom:8px;background:var(--card)} .exc-info b{display:block;font-size:.9rem;font-weight:600;color:var(--ink)} .exc-info span{font-size:.8rem;color:var(--muted)} /* egen datumväljare */ .datepick{position:relative} .dp-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:inherit; font-size:16px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px; padding:11px 13px;cursor:pointer;text-align:left} .dp-btn:hover{border-color:var(--herb)} .dp-val.ph{color:var(--muted)} .dp-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:80;background:var(--card);border-radius:14px; box-shadow:var(--card-sh),0 0 0 1px var(--line);padding:12px;width:min(320px,92vw)} .dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .dp-nav button{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--line);background:var(--card); color:var(--herb);font-size:1.1rem;cursor:pointer;line-height:1} .dp-nav button:hover{border-color:var(--herb);background:var(--herb-soft)} .dp-title{font-weight:600;font-size:.92rem;color:var(--ink)} .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .dp-dow{text-align:center;font-size:.7rem;font-weight:700;color:var(--muted);padding:4px 0} .dp-empty{aspect-ratio:1} .dp-day{aspect-ratio:1;border:0;border-radius:8px;background:transparent;color:var(--soft-ink);font-size:.86rem; font-family:inherit;cursor:pointer;display:grid;place-items:center} .dp-day:hover{background:var(--sand)} .dp-day.today{box-shadow:inset 0 0 0 1.5px var(--line)} .dp-day.sel{background:var(--herb);color:var(--card);font-weight:700} /* ── Stats-vy (operatör) ── */ .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:8px} .stat{background:var(--card);border:0;border-radius:14px;padding:16px 14px;box-shadow:var(--soft-sh)} .stat-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.7rem;font-weight:700;letter-spacing:-.01em;color:var(--herb)} .stat-l{font-size:.78rem;color:var(--muted);margin-top:2px} .stats-h{font-family:var(--serif);font-size:1.15rem;font-weight:600;margin:26px 0 8px} .stats-sub{font-size:.82rem;color:var(--muted);margin-bottom:10px} .stats-t{width:100%;border-collapse:collapse;font-size:.85rem;display:block;overflow-x:auto} .stats-t th{text-align:left;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .stats-t td{padding:8px 10px;border-bottom:1px solid var(--hair);white-space:nowrap} .stats-t .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} .pill{display:inline-block;font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--sand);color:var(--soft-ink)} .pill-account{background:var(--herb-soft);color:var(--herb)} .pill-order{background:var(--herb);color:var(--on-header)} .daybars{display:flex;gap:6px;align-items:flex-end;height:120px;padding:10px 0 0} .daycol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%} .daycol-bars{flex:1;display:flex;gap:2px;align-items:flex-end;width:100%;justify-content:center} .db{width:8px;border-radius:3px 3px 0 0} .db-acc{background:var(--herb)} .db-ord{background:var(--accent)} .daycol-x{font-size:.62rem;color:var(--muted)} /* ═══════════════════════ PUBLIK LANDNINGSSIDA ═══════════════════════ Mobil-först. Använder befintliga tema-tokens (Färskt kök). Inget horisontellt scroll. */ .land-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 6px} .land-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600; font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none} .land-brand .dot{width:18px;height:18px;flex:0 0 18px} .land-nav-r{display:flex;align-items:center;gap:12px} .linkbtn{background:none;border:0;color:var(--soft-ink);cursor:pointer;font:inherit;font-size:.9rem; font-weight:700;text-decoration:none;padding:6px 2px} .linkbtn:hover{color:var(--ink)} /* Hero — mörk gradient som kundsidans .rhero, ljus text via --on-header* */ .lhero{position:relative;overflow:hidden;border-radius:22px;margin:14px 0 clamp(34px,6vw,54px); background:linear-gradient(135deg,var(--hero-a),var(--hero-b) 74%);color:var(--on-header); padding:clamp(30px,6vw,54px) clamp(22px,5vw,44px) clamp(34px,6vw,52px);box-shadow:var(--card-sh)} .lhero-glow{position:absolute;top:-90px;right:-70px;width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,var(--hero-glow),transparent 68%);pointer-events:none} /* Ingen max-width HÄR. 34ch löses mot behållarens egen fontstorlek (16px) och blev 343px — ett bra mått för brödtext, men en spärr för en 51px display: 343px rymmer ~13 tecken, så "Din meny, snygg på mobil." bröts i tre rader för fyra ord. Radlängdsmåttet hör hemma på stycket, där ch faktiskt syftar på styckets text. (Dessi 2026-08-22: rubrikhöjd 269px -> 215px, brödtexten behåller sin radlängd.) */ .lhero-in{position:relative;flex:1 1 auto;min-width:0} /* Hero-mockup: telefonen till höger om texten. Tjänsten säljer "Din meny, snygg på mobil" — då måste den visa hur det ser ut. Byggd av samma former som storefronten faktiskt renderar (.dish-raden, lime-knappen), helt i CSS: inga bilder, inget som kan bli inaktuellt mot en skärmdump. Texten behåller sin 34ch-radlängd; mockupen lägger sig BREDVID, inte istället. */ .lhero-wrap{display:flex;gap:clamp(24px,4vw,56px);align-items:center;justify-content:space-between} .lhero-art{position:relative;flex:0 0 auto;display:none} /* visas först när det finns plats */ .lphone{width:212px;border-radius:30px;padding:10px;background:#0B1512; border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -24px rgba(0,0,0,.65);transform:rotate(-2deg)} .lphone-screen{background:var(--card);border-radius:22px;overflow:hidden;color:var(--ink)} .lphone-top{background:linear-gradient(135deg,var(--hero-a),var(--hero-b) 74%);color:var(--on-header); padding:14px 14px 12px;position:relative} .lphone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%); width:52px;height:4px;border-radius:3px;background:rgba(255,255,255,.28)} .lphone-top b{display:block;font-family:var(--serif);font-weight:600;font-size:.98rem;margin-top:8px;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lphone-top span{display:block;font-size:.68rem;opacity:.8;margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lphone-body{padding:4px 14px 12px} .lphone-cat{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--herb);margin:12px 0 2px} .lphone-dish{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--hair)} .lphone-dish:first-of-type{border-top:0} .lphone-dish i{flex:1;min-width:0;font-style:normal;font-size:.76rem;font-weight:600;line-height:1.2} .lphone-dish em{font-style:normal;font-size:.72rem;color:var(--muted);white-space:nowrap} .lphone-dish u{flex:0 0 20px;width:20px;height:20px;border-radius:50%;text-decoration:none; display:grid;place-items:center;background:var(--accent);color:var(--accent-ink,#0E1F19); font-size:.8rem;font-weight:700;line-height:1} .lphone-bar{margin:12px -14px -12px;padding:11px 14px;background:var(--herb-soft); display:flex;align-items:center;justify-content:space-between;gap:10px} .lphone-bar span{font-size:.7rem;color:var(--herb);font-weight:600} .lphone-bar b{font-size:.7rem;font-weight:700;background:var(--accent);color:var(--accent-ink,#0E1F19); padding:7px 12px;border-radius:999px;white-space:nowrap} /* Först vid gott om plats — under det är heron redan fylld av texten, och en halv telefon är sämre än ingen. */ @media (min-width:900px){ .lhero-art{display:block} } @media (prefers-reduced-motion:no-preference){ .lphone{transition:transform .4s ease} } .lhero:hover .lphone{transform:rotate(0deg)} .lhero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700; color:var(--on-header);opacity:.85;letter-spacing:.01em} .lhero-eyebrow .dot{width:15px;height:15px;flex:0 0 15px} .lhero h1{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;color:var(--on-header); font-size:clamp(2rem,7vw,3.2rem);line-height:1.05;margin:.4em 0 .35em;overflow-wrap:anywhere} .lhero h1 em{font-style:normal;color:var(--accent)} .lhero p{font-size:clamp(16px,1.9vw,18.5px);color:var(--on-header);opacity:.9;margin:0;max-width:34ch} .lhero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .lhero-cta .btn{width:auto;padding:14px 26px} .lhero-micro{font-size:14px;color:var(--on-header);opacity:.7;margin:16px 0 0} /* Accentfärgen (lime) är reserverad för ÅTGÄRDER och aktiva tillstånd — knappar, lägg-till, valda filter, aktiv flik, ny order. Rent dekorativa ytor (punktlistors bullets, etikettlinjer, bockar i prislistan) bär --herb i stället. Dessi räknade 16 lime-element i en enda vy 2026-08-22: när allt skriker lime betyder inget det. Lägg INTE till nya var(--accent) på något som inte går att klicka eller som inte signalerar ett tillstånd. Tredje ledet (Dessi 2026-08-22, efter utvärdering): information på MÖRK botten bär varken lime eller herb — ljus text på svagt genomskinlig platta (#ffffff1a). Herb syns knappt mot hero-gradienten, och lime gör informationen till en falsk åtgärd. Full regel: lime = den ENA åtgärden i vyn · herb = struktur och tillstånd · ljus text på mörk botten = information. */ /* Sektioner */ .lsec{margin:clamp(40px,8vw,72px) 0} .leyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--herb); font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px} .leyebrow .ll{width:24px;height:2px;background:var(--herb);border-radius:2px} .lsec-h{text-align:center;max-width:46ch;margin:0 auto 30px} .lsec-h h2{font-family:var(--serif);font-weight:600;letter-spacing:-.01em; font-size:clamp(1.6rem,4.5vw,2.3rem);line-height:1.12;margin:0;color:var(--ink)} .lsec-h p{color:var(--muted);margin:12px 0 0;font-size:1.02rem} /* Så funkar det — numrerade steg */ .lsteps{display:grid;gap:14px;max-width:640px;margin:0 auto} .lstep{display:flex;gap:16px;align-items:flex-start;background:var(--card);border-radius:16px; padding:20px 20px;box-shadow:var(--soft-sh)} .lstep-n{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center; font-family:var(--serif);font-weight:600;font-size:1.1rem;background:var(--herb-soft);color:var(--herb)} .lstep h3{font-family:var(--serif);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;margin:4px 0 5px;color:var(--ink)} .lstep p{margin:0;color:var(--soft-ink);font-size:.95rem;line-height:1.5} /* Betalnings-banner */ .lpay{background:var(--herb-soft);border-radius:20px;padding:clamp(26px,5vw,40px);text-align:center;max-width:640px;margin:0 auto} .lpay h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-.01em;margin:6px 0 10px;color:var(--herb)} .lpay p{margin:0 auto;color:var(--soft-ink);font-size:1rem;max-width:44ch} .lpay .leyebrow{justify-content:center} /* Pris */ .lplans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:660px;margin:0 auto} @media(max-width:560px){.lplans{grid-template-columns:1fr}} .lplan{position:relative;background:var(--card);border-radius:20px;padding:26px 24px;box-shadow:var(--soft-sh); display:flex;flex-direction:column} .lplan h3{font-family:var(--serif);font-weight:600;font-size:1.2rem;margin:0;color:var(--ink)} .lplan.pro{background:var(--herb-deep);color:var(--on-header)} .lplan.pro h3{color:var(--on-header)} .lplan-badge{position:absolute;top:16px;right:16px;font-size:.68rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:4px 10px;border-radius:999px} .lprice{font-family:var(--serif);font-weight:600;font-size:2rem;letter-spacing:-.02em;margin:10px 0 2px} .lplan.pro .lprice{color:var(--accent)} .lprice-sub{font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--muted)} .lplan.pro .lprice-sub{color:var(--on-header-dim)} .lprice-alt{font-size:.9rem;color:var(--muted);margin-bottom:6px} .lplan.pro .lprice-alt{color:var(--on-header-dim)} .lfeat{list-style:none;padding:0;margin:16px 0 22px;display:flex;flex-direction:column;gap:11px;font-size:.94rem} .lplan.pro .lfeat li{color:var(--on-header)} /* Bock-ikon: rund bricka (::before) + skarp checkmark ritad med CSS-borders (::after, roterad L). Ingen SVG ⇒ inga skalnings-/encoding-artefakter, pixel-skarp i alla webbläsare. Färg per kort: Gratis (ljust kort) = mörk grön bricka+bock; Premium (mörkt kort) = tonad bricka + ljusgrön bock. Konsekvent på BÅDA korten. */ .lfeat li{position:relative;padding-left:30px;color:var(--soft-ink);line-height:1.45} .lfeat li::before{content:"";position:absolute;left:0;top:.08em;width:20px;height:20px;border-radius:50%; background:var(--herb-soft)} .lfeat li::after{content:"";position:absolute;left:6px;top:calc(.08em + 6px);width:8px;height:4.5px; border-left:2px solid var(--herb);border-bottom:2px solid var(--herb);border-radius:0 0 0 1px; transform:rotate(-45deg)} .lplan.pro .lfeat li::before{background:rgba(203,242,92,.20)} .lplan.pro .lfeat li::after{border-color:var(--herb)} .lsister{text-align:center;max-width:46ch;margin:28px auto 0;font-size:.94rem;color:var(--muted)} /* Avslutande CTA */ .lcta{text-align:center;background:var(--card);border-radius:22px;padding:clamp(32px,6vw,48px);box-shadow:var(--soft-sh);margin:clamp(30px,6vw,52px) 0} .lcta h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:-.01em;margin:0 0 20px;color:var(--ink)} .lcta .btn{width:auto;padding:14px 30px}