/* Bestillingsapp — app-styles. Konsolideret: grøn #5b886b gennemgående + serveringer + Bemærk. */ /* ---------- Grund ---------- */ /* Højde på den sticky mobil-minibar. 0 som standard (og på desktop, hvor der ingen minibar er). JS overskriver den til minibarens faktiske højde via en inline-style på (:root), så de sticky kategori-piller kan forskydes med top: var(--bapp-header-h). VIGTIGT: variablen SKAL ligge på :root og IKKE på #bapp-app — ellers ville #bapp-app's egen erklæring skygge for JS-værdien for alt inde i appen, og pillerne ville lægge sig i toppen (top:0) under minibaren. */ :root { --bapp-header-h: 0px; } #bapp-app { box-sizing: border-box; max-width: 1500px; margin: 0 auto; padding: 0 12px 64px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1c1c1c; line-height: 1.5; } #bapp-app *, #bapp-app *::before, #bapp-app *::after { box-sizing: inherit; } /* ---------- Header — FJERNET 12. juli 2026 (§25.5) ---------- Appen har ikke længere sin egen header. Temaets bærer logo og navigation for både appen og portalen. */ /* ---------- Shell: tre kolonner (venstre hugger teksten) ---------- */ .bapp-shell { display: grid; grid-template-columns: max-content minmax(0, 1fr) 360px; gap: 14px; align-items: start; } /* ---------- Venstre: sticky rail ---------- */ .bapp-rail { position: sticky; top: 24px; align-self: start; } .bapp-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; position: relative; } .bapp-rail__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #6b6a64; transition: background 0.15s ease, color 0.15s ease; } .bapp-rail__item:hover { background: #f3f2ec; color: #1c1c1c; } .bapp-rail__num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #c9c8c0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #6b6a64; background: #fff; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .bapp-rail__label { font-size: 14px; font-weight: 500; white-space: nowrap; } .bapp-rail__item.is-active { color: #5b886b; } .bapp-rail__item.is-active .bapp-rail__num { background: #5b886b; border-color: #5b886b; color: #fff; } /* ---------- Midten: det scrollende flow ---------- */ .bapp-flow { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .bapp-section { border: 1px solid #e6e5df; border-radius: 14px; padding: 24px; background: #fff; scroll-margin-top: 24px; } .bapp-section--dato { background: #faf9f5; } .bapp-section__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .bapp-section__num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #5b886b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; } .bapp-section__headings { min-width: 0; } .bapp-section__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; } .bapp-section__sub { margin: 4px 0 0; font-size: 14px; color: #6b6a64; } .bapp-section__body { min-width: 0; } /* ---------- Felter (dato + antal) ---------- */ .bapp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .bapp-field { display: flex; flex-direction: column; gap: 6px; } .bapp-field__label { font-size: 14px; font-weight: 600; color: #1c1c1c; } .bapp-input, .bapp-textarea { width: 100%; padding: 11px 12px; border: 1px solid #d8d6cc; border-radius: 8px; background: #faf9f5; font-size: 15px; font-family: inherit; color: #1c1c1c; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bapp-input:focus { outline: none; border-color: #5b886b; box-shadow: 0 0 0 2px rgba(91, 136, 107, 0.15); background: #fff; } .bapp-field__help { margin: 2px 0 0; font-size: 13px; color: #6b6a64; } /* ---------- Pladsholdere (midlertidige — erstattes fase for fase) ---------- */ .bapp-ph { border: 1px dashed #cbcabf; border-radius: 8px; color: #8a8980; font-size: 14px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; min-height: 44px; } .bapp-ph-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bapp-ph-stack { display: flex; flex-direction: column; gap: 10px; } .bapp-ph-grid--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .bapp-ph--card { min-height: 96px; } .bapp-ph--price { min-height: 72px; margin-bottom: 16px; } /* ---------- Menukort (titel under billedet, bundlåst pris-linje) ---------- */ .bapp-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } /* Desktop-bånd: menu falder til 1 kolonne når sidebaren gør flowet trangt. Kun 981px+ — mobil (≤980) er urørt. HÆVET fra 1040 til 1250 den 25. august 2026: menubilledet er nu låst til 2:1, så et smalt kort giver en strimmel (188 px bredt kort = 94 px højt billede). 1250 er samme sted som .bapp-serveringer__grid og .bapp-tilvalg-grid deler — ét tal, ikke to. */ @media (min-width: 981px) and (max-width: 1250px) { .bapp-menu-grid { grid-template-columns: 1fr; } } .bapp-menu-card { position: relative; border: 1px solid #e6e5df; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: #fff; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bapp-menu-card:hover { border-color: #b9cbbe; } #bapp-app .bapp-menu-card:focus { outline: none; } #bapp-app .bapp-menu-card:focus-visible { outline: 2px solid #5b886b; outline-offset: 2px; } .bapp-menu-card.is-selected { border-color: #5b886b; box-shadow: 0 0 0 2px rgba(91, 136, 107, 0.18); } /* Billede (landscape) + Læs mere */ .bapp-menu-card__media { position: relative; } #bapp-app .bapp-menu-card__img, #bapp-app .bapp-menu-card__img--placeholder { width: 100% !important; aspect-ratio: 2 / 1 !important; height: auto !important; object-fit: cover !important; display: block !important; background: #f3f2ec; } #bapp-app .bapp-menu-card__img--placeholder { display: flex !important; align-items: center; justify-content: center; color: #8a8980; font-size: 13px; } .bapp-menu-card__readmore { position: absolute; top: 12px; right: 12px; padding: 7px 14px; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #1c1c1c; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: background 0.15s ease; } .bapp-menu-card__readmore:hover { background: #fff; } /* Krop: flex-kolonne så bundlåsen kan skubbes ned */ .bapp-menu-card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px 18px; } /* Titel (grøn overskrift under billedet — ubegrænset plads, ingen forkortelse) */ .bapp-menu-card__title { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: #5b886b; margin-bottom: 6px; } /* Beskrivelse: plads til op til to linjer (men må gerne være én) */ .bapp-menu-card__desc { font-size: 14px; color: #4a4a45; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Bundlås: serveringer-linje + pris/flueben, altid i bunden */ .bapp-menu-card__footer { margin-top: auto; padding-top: 12px; } .bapp-menu-card__servings { font-size: 13px; color: #6b6a64; margin-bottom: 6px; } .bapp-menu-card__priceline { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bapp-menu-card__price { font-size: 16px; color: #1c1c1c; } /* Flueben på pris-linjen (nederst til højre), kun synligt når valgt */ .bapp-menu-card__check { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #5b886b; color: #fff; font-size: 15px; line-height: 28px; text-align: center; opacity: 0; transform: scale(0.7); transition: opacity 0.15s ease, transform 0.15s ease; } .bapp-menu-card.is-selected .bapp-menu-card__check { opacity: 1; transform: scale(1); } .bapp-empty { color: #8a8980; font-size: 14px; } /* ---------- Serveringer: frostet glas indtil oplåsning ---------- */ .bapp-serveringer { position: relative; } .bapp-serveringer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* Desktop-bånd: serveringer 3 → 2 kolonner når sidebaren gør flowet trangt. Kun 981px+ — mobil (≤980) er urørt. Justér max-width efter smag. */ @media (min-width: 981px) and (max-width: 1250px) { .bapp-serveringer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bapp-ph--serv { min-height: 120px; border-style: solid; } .bapp-serveringer.is-locked .bapp-serveringer__pills { filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; } .bapp-serveringer.is-locked .bapp-serveringer__grid { filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; max-height: 360px; overflow: hidden; } .bapp-serveringer__lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; } .bapp-serveringer.is-locked .bapp-serveringer__lock { display: flex; } .bapp-serveringer:not(.is-locked) .bapp-serveringer__lock { display: none; } .bapp-serveringer__lock-text { margin: 0; max-width: 320px; text-align: center; font-size: 15px; font-weight: 500; color: #5b886b; background: rgba(255, 255, 255, 0.85); padding: 14px 18px; border-radius: 10px; border: 1px solid #dcdbd2; } /* ---------- Serveringer: piller ---------- */ .bapp-serveringer__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; position: sticky; top: 0; z-index: 5; background: #fff; padding: 36px 0 12px; margin-top: -36px; } .bapp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid #d8d6cc; border-radius: 999px; background: #fff; color: #1c1c1c; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .bapp-pill:hover { border-color: #5b886b; } .bapp-pill.is-active { background: #5b886b; border-color: #5b886b; color: #fff; } .bapp-pill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.62); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; } .bapp-pill.is-active .bapp-pill__count { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.95); } .bapp-pill__count--done, .bapp-pill__count--over { background: rgba(91, 136, 107, 0.1); color: #5b886b; font-size: 13px; } .bapp-pill.is-active .bapp-pill__count--done, .bapp-pill.is-active .bapp-pill__count--over { background: rgba(255, 255, 255, 0.2); color: #fff; } .bapp-pill__count--optional { min-width: 0; padding: 0 6px; background: transparent; color: rgba(0, 0, 0, 0.5); font-weight: 500; } .bapp-pill.is-active .bapp-pill__count--optional { color: rgba(255, 255, 255, 0.8); } /* ---------- Serveringskort ---------- */ .bapp-serv-card { position: relative; border: 1px solid #e6e5df; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; cursor: pointer; } #bapp-app .bapp-serv-card:focus { outline: none; } #bapp-app .bapp-serv-card:focus-visible { outline: 2px solid #5b886b; outline-offset: 2px; } .bapp-serv-card.is-selected { border-color: #5b886b; box-shadow: 0 10px 24px rgba(91, 136, 107, 0.12); } #bapp-app .bapp-serv-card__img, #bapp-app .bapp-serv-card__img--placeholder { width: 100% !important; height: 200px !important; object-fit: cover !important; display: block !important; background: #f3f2ec; transform: scale(var(--serv-zoom, 1.12)); } #bapp-app .bapp-serv-card__img--placeholder { display: flex !important; align-items: center; justify-content: center; color: #8a8980; font-size: 13px; } .bapp-serv-card__title { margin: 12px 14px 2px; font-size: 15px; font-weight: 600; } .bapp-serv-card__cat { margin: 0 14px 10px; font-size: 13px; color: #6b6a64; } .bapp-serv-card__bemaerk { margin: 0 14px 10px; font-size: 13px; font-style: italic; line-height: 1.35; color: #6b6a64; } .bapp-serv-card__bemaerk strong { font-style: normal; font-weight: 600; color: #4a4a45; } .bapp-serv-card__note { margin: auto 14px 14px; padding-right: 36px; font-size: 13px; line-height: 1.4; color: #6b6a64; } .bapp-serv-price-inline { display: inline-block; font-weight: 800; color: #1c1c1c; } /* Flueben nederst til højre (kun synligt når valgt) */ #bapp-app .bapp-serv-card::after { content: "✓"; position: absolute; bottom: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: #5b886b; color: #fff; font-size: 16px; line-height: 30px; text-align: center; opacity: 0; transform: scale(0.7); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; } #bapp-app .bapp-serv-card.is-selected::after { opacity: 1; transform: scale(1); } /* ---------- CTA + hint ---------- */ .bapp-cta { display: block; width: 100%; padding: 14px 20px; border: none; border-radius: 10px; background: #5b886b; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .bapp-cta:hover { background: #4a7058; } .bapp-cta-hint { margin: 10px 0 0; text-align: center; font-size: 14px; color: #8a8980; } /* ---------- Højre: sticky stak (guide + overblik) ---------- */ .bapp-side { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 16px; /* Hvis guide + overblik er højere end skærmen: scroll inde i spalten, så man kan nå bunden af overblikket. */ max-height: calc(100vh - 48px); overflow-y: auto; } .bapp-guide { border: 1px solid #cfe0d4; border-radius: 12px; background: #f1f7f2; padding: 16px; } .bapp-guide__eyebrow { margin: 0 0 12px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b6a64; } .bapp-guide__row { display: flex; gap: 12px; align-items: flex-start; } .bapp-guide__icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #5b886b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; margin-top: 1px; } .bapp-guide__text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; color: #2b3a30; line-height: 1.55; overflow-wrap: anywhere; } .bapp-guide__sub { display: block; margin-top: 6px; font-size: 13px; color: #5d6f63; line-height: 1.45; } .bapp-guide__term { font-style: italic; } /* ---------- Guide: statisk forklaringslag (kun i zonerne) ---------- */ .bapp-guide__static { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-size: 13px; line-height: 1.45; color: #5d6f63; } /* ---------- Guide: zone-farvning (matcher bannerne, afdæmpet) ---------- */ .bapp-guide--zone2 { background: #fdeeb8; border-color: #ecca64; } .bapp-guide--zone3 { background: #fbe1c4; border-color: #e89c4f; } .bapp-guide--zone4 { background: #efe7f3; border-color: #c2a3cd; } /* Pil + tekst følger zonens mørkere nuance for kontrast */ .bapp-guide--zone2 .bapp-guide__icon { background: #b8902f; } .bapp-guide--zone3 .bapp-guide__icon { background: #c0742a; } .bapp-guide--zone4 .bapp-guide__icon { background: #8a6aa0; } .bapp-guide--zone2 .bapp-guide__text { color: #5a4410; } .bapp-guide--zone3 .bapp-guide__text { color: #7a3d12; } .bapp-guide--zone4 .bapp-guide__text { color: #4a3557; } .bapp-guide--zone2 .bapp-guide__sub { color: #7a6428; } .bapp-guide--zone3 .bapp-guide__sub { color: #9a5a2a; } .bapp-guide--zone4 .bapp-guide__sub { color: #6a557a; } /* Blød puls på pilen når guide-teksten skifter */ @keyframes bapp-guide-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } } .bapp-guide__icon--pulse { animation: bapp-guide-pulse 0.45s ease; } /* Klikbar guide-række (kun når der er et spring-mål): blød hover-affordance. Scoped til --jump, så en målløs række aldrig ser klikbar ud. Desktop-signal; mobil bruger en chevron (ingen hover på touch). */ .bapp-guide__row--jump { cursor: pointer; border-radius: 8px; margin: -6px; padding: 6px; transition: background 0.15s ease; } .bapp-guide__row--jump:hover { background: rgba(91, 136, 107, 0.08); } .bapp-guide__row--jump:hover .bapp-guide__icon { transform: translateX(3px); } .bapp-guide__row--jump:focus-visible { outline: 2px solid #5b886b; outline-offset: 2px; } .bapp-overblik { border: 1px solid #e6e5df; border-radius: 12px; background: #fff; padding: 16px; } .bapp-overblik__eyebrow { margin: 0 0 12px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b6a64; } .bapp-overblik__body { font-size: 14px; color: #8a8980; } .bapp-overblik__line { margin: 0 0 6px; color: #1c1c1c; } .bapp-overblik__line:last-child { margin-bottom: 0; } /* ---------- Mobil-sikkerhed (grov — den rigtige mobil bygges senere) ---------- */ @media (max-width: 980px) { .bapp-shell { grid-template-columns: 1fr; gap: 24px; padding-bottom: 80px; } .bapp-side { display: none; } /* Den gamle rail erstattes af den sticky minibar på mobil. */ .bapp-rail { display: none; } /* Kategori-piller (Serveringer): forskyd under den sticky minibar i stedet for top:0, så de to sticky-lag ikke kolliderer. Negativ-margin- hacket fra desktop neutraliseres her. */ .bapp-serveringer__pills { top: var(--bapp-header-h); margin-top: 0; padding-top: 12px; } /* Pille-boksen er nu det sticky lag under minibaren (flyttet hertil fra selve pille-rækken, så den klistrer til skærmen og ikke kun til forælderen). */ .bapp-serveringer__pillbox { position: sticky; top: var(--bapp-header-h); z-index: 5; background: #fff; margin-top: 0; padding-top: 12px; padding-bottom: 12px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px; } /* Fade i højre kant af pille-linjen — signalerer at man kan swipe videre. Ligger lige til venstre for fold-knappen. Bundet til pille-linjens højde (align-items: stretch på boksen giver ::after fuld højde minus top-padding). Skjules når boksen er åben (ingen vandret scroll at hinte om). */ .bapp-serveringer__pillbox::after { content: ""; position: absolute; top: 12px; bottom: 12px; right: 36px; width: 32px; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 80%); } .bapp-serveringer--pills-open .bapp-serveringer__pillbox::after { display: none; } .bapp-serveringer--pills-open .bapp-serveringer__pillbox::after { display: none; } /* Lukket tilstand: pillerne ligger på ÉN vandret linje man kan swipe i. Nulstiller eksplicit desktop-pillernes top:0/margin-top:-36px/padding, så de ikke lækker ind i boks-layoutet. */ .bapp-serveringer__pills { flex: 1 1 auto; min-width: 0; /* tillader at linjen krymper og scroller */ display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: 0; /* nulstil margin-top:-36px fra desktop */ padding: 0; /* nulstil padding:36px 0 12px fra desktop */ position: static; /* sticky er flyttet op på boksen */ top: auto; /* nulstil top:0 fra desktop */ scrollbar-width: none; /* Firefox: skjul scrollbar */ -webkit-overflow-scrolling: touch; /* blød swipe på iOS */ } .bapp-serveringer__pills::-webkit-scrollbar { display: none; /* Safari/Chrome: skjul scrollbar */ } .bapp-serveringer__pills .bapp-pill { flex: 0 0 auto; /* pillerne krymper ikke — de beholder bredde og scroller */ padding: 5px 10px; font-size: 13px; gap: 4px; } /* Fold-knap: samme look som minibarens chevron — ingen ring, bare ikonet. Sidder ØVERST og flugter med den første pille-række (også når boksen er åben og pillerne wrapper nedad). Højden matcher én pille-rækkes højde. */ .bapp-serveringer__pilltoggle { flex: 0 0 auto; align-self: flex-start; display: flex; align-items: center; justify-content: center; width: 28px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; } .bapp-serveringer__pilltoggle-icon { font-size: 18px; color: #8a8980; line-height: 1; display: block; width: 18px; height: 18px; text-align: center; transform-origin: 50% 50%; /* roter om eget centrum — ingen akse-vandring */ transition: transform 0.2s ease; /* blød animation (bevidst beholdt) */ } /* SVG-chevron i stedet for glyfen ⌄: glyfens blæk sad under boksens midte, så rotate(180deg) flyttede den synlige pil lodret (skæv geometri). SVG'ens streg er centreret i viewBox'en, så den roterer rent om sit eget centrum. display:block fjerner inline-SVG'ens baseline-mellemrum. */ .bapp-serveringer__pilltoggle-icon svg { display: block; } /* Åben tilstand: pillerne wrapper over flere rækker (fuldt overblik). */ .bapp-serveringer--pills-open .bapp-serveringer__pills { flex-wrap: wrap; overflow-x: visible; } /* Åben: pilen vender opad. Roterer om sit eget centrum (transform-origin 50% 50% + fast 18×18 boks), så den brede pil ⌄ ikke vandrer op/ned. */ .bapp-serveringer--pills-open .bapp-serveringer__pilltoggle-icon { transform: rotate(180deg); } .bapp-serveringer__pills .bapp-pill__count { min-width: 18px; height: 18px; padding: 0 6px; font-size: 11px; } .bapp-ph-grid--cards, .bapp-menu-grid { grid-template-columns: 1fr 1fr; } .bapp-serveringer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { #bapp-app { padding: 0 8px 48px; } .bapp-section { padding: 10px; } .bapp-ph-row, .bapp-field-row { grid-template-columns: 1fr; } .bapp-ph-grid--cards, .bapp-menu-grid { grid-template-columns: 1fr; } .bapp-serveringer__grid { grid-template-columns: 1fr; } /* Tilvalg-kort er smalle i 2 spalter på telefon (bevidst 2, ikke 1). Stabl footer'en lodret, så vælge-knappen lander nederst og er i syne/ tap-bar i stedet for at flyde ud over højre kant. Pris må wrappe. */ .bapp-tilvalg-card__footer { flex-direction: column; align-items: flex-start; gap: 10px; } .bapp-tilvalg-card__price { white-space: normal; } } /* ---------- Mobil: sticky top-minibar (kun < 980px) ---------- */ .bapp-mobilbar { display: none; } /* Fold-knappen til pille-boksen giver kun mening på mobil (vandret swipe). På desktop vises alle piller frit, så knappen skjules. VIGTIGT: skal være min-width (kun desktop). Ellers vinder denne regel — der står EFTER mobil-reglen (display:flex) — også på mobil pga. kildeorden og skjuler chevronen dér. */ @media (min-width: 981px) { .bapp-serveringer__pilltoggle { display: none; } /* Desktop: gør v6.5-pille-boksen layout-transparent, så de sticky kategori-piller igen ligger direkte i .bapp-serveringer (det høje element) og kan klistre. Den tætte pille-boks indespærrede ellers sticky-pillerne til sin egen højde, så de aldrig klistrede. Mobil urørt — der er pille-boksen SELV sticky under minibaren. */ .bapp-serveringer__pillbox { display: contents; } } @media (max-width: 980px) { .bapp-mobilbar { display: block; position: sticky; top: 0; z-index: 20; /* Flugter med #bapp-app's mobil-gutter (10px, se @media 560), så baren står i samme lodrette linje som sektions-kortene og dækker deres kant. 100vw-udbrud + 10px margin i hver side = ingen streg bagved. */ width: calc(100vw - 16px); margin-left: calc(50% - 50vw + 8px); margin-bottom: 14px; padding: 10px 16px 6px; background: #fff; } .bapp-mobilbar__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 0 10px; border: none; background: none; font-family: inherit; text-align: left; cursor: pointer; } .bapp-mobilbar__num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #5b886b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; } .bapp-mobilbar__labels { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bapp-mobilbar__eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8980; } .bapp-mobilbar__step { font-size: 16px; font-weight: 700; color: #1c1c1c; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bapp-mobilbar__chevron { flex: 0 0 auto; font-size: 18px; color: #8a8980; transition: transform 0.2s ease; } /* Samme SVG-chevron som pille-boksen — streg centreret i viewBox'en, så den roterer rent. Chevron-spanet er flex-barn (≈18×18), så default transform-origin (centrum) rammer SVG'ens centrum. */ .bapp-mobilbar__chevron svg { display: block; } .bapp-mobilbar.is-open .bapp-mobilbar__chevron { transform: rotate(180deg); } .bapp-mobilbar__dots { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; } .bapp-mobilbar__dots[hidden] { display: none; } .bapp-mobilbar__dot { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d8d6cc; border-radius: 999px; background: #fff; font-family: inherit; cursor: pointer; } .bapp-mobilbar__dot-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #f3f2ec; color: #6b6a64; font-size: 11px; font-weight: 600; } .bapp-mobilbar__dot-label { font-size: 13px; font-weight: 500; color: #4a4a45; } .bapp-mobilbar__dot.is-active { border-color: #5b886b; background: #f1f7f2; } .bapp-mobilbar__dot.is-active .bapp-mobilbar__dot-num { background: #5b886b; color: #fff; } .bapp-mobilbar__dot.is-active .bapp-mobilbar__dot-label { color: #5b886b; } .bapp-mobilbar__next { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 10px 12px; background: #f1f7f2; border-radius: 8px; font-size: 14px; line-height: 1.45; color: #2b3a30; } .bapp-mobilbar__next-icon { flex: 0 0 auto; color: #5b886b; font-weight: 700; } /* Zone-farvning — samme palette som .bapp-guide--zone2/3/4 på desktop. */ .bapp-mobilbar__next--zone2 { background: #fdeeb8; color: #5a4410; } .bapp-mobilbar__next--zone3 { background: #fbe1c4; color: #7a3d12; } .bapp-mobilbar__next--zone4 { background: #efe7f3; color: #4a3557; } .bapp-mobilbar__next--zone2 .bapp-mobilbar__next-icon { color: #b8902f; } .bapp-mobilbar__next--zone3 .bapp-mobilbar__next-icon { color: #c0742a; } .bapp-mobilbar__next--zone4 .bapp-mobilbar__next-icon { color: #8a6aa0; } .bapp-mobilbar__next-text { flex: 1 1 auto; min-width: 0; } /* Klikbar næste-skridt-boks (kun når der er et spring-mål): diskret chevron i højre kant som "tap for at springe"-signal. Touch har ingen hover, så chevronen bærer affordancen; den venstre → bliver stående. Ren CSS-form. */ .bapp-mobilbar__next--jump { position: relative; padding-right: 30px; cursor: pointer; } .bapp-mobilbar__next--jump::after { content: ""; position: absolute; top: 50%; right: 14px; width: 8px; height: 8px; margin-top: -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0.5; } .bapp-mobilbar__progress { height: 3px; margin: 0 -16px; background: #efece4; } .bapp-mobilbar__progress-fill { display: block; height: 100%; width: 0; background: #5b886b; transition: width 0.3s ease; } } /* ---------- Læs mere-modal ---------- */ .bapp-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; } .bapp-modal.is-open { display: flex; } /* Sikkerhed: en modal der ikke er åben må ALDRIG fylde eller fange klik, uanset hvad der ellers påvirker den. */ .bapp-modal:not(.is-open) { display: none !important; } .bapp-modal[aria-hidden="true"] { display: none !important; } .bapp-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .bapp-modal__card { position: relative; z-index: 1; width: min(820px, 100%); max-height: 88vh; overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26); } /* Indholdet scroller — kortet selv gør ikke, så krydset bliver stående */ .bapp-modal__content { max-height: 88vh; overflow-y: auto; padding: 22px; } /* Kryds i det rene hvide hjørne (som i den gamle app) */ .bapp-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #1c1c1c; font-size: 22px; line-height: 1; cursor: pointer; z-index: 3; } .bapp-modal__close:hover { background: #f3f2ec; } /* Billede sidder INDE i kortet (afrundet rektangel), ikke kant-til-kant */ #bapp-app .bapp-modal__img, #bapp-app .bapp-modal__img--placeholder { width: 100% !important; aspect-ratio: 2 / 1 !important; object-fit: cover !important; display: block !important; border-radius: 14px; margin-bottom: 16px; background: #f3f2ec; } #bapp-app .bapp-modal__img--placeholder { display: flex !important; align-items: center; justify-content: center; color: #8a8980; font-size: 13px; } /* Teksten sidder direkte i kortets polstring — ingen ekstra indrykning */ .bapp-modal__pad { padding: 0; } .bapp-modal__title { margin: 0 0 8px; font-size: 21px; font-weight: 700; color: #5b886b; line-height: 1.25; } .bapp-modal__title--menu { letter-spacing: 0.02em; text-transform: uppercase; } .bapp-modal__desc { font-size: 15px; color: #4a4a45; line-height: 1.5; } .bapp-modal__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 18px; } .bapp-modal__row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; color: #1c1c1c; } .bapp-modal__total { margin-top: 16px; font-size: 14px; color: #4a4a45; line-height: 1.5; } .bapp-modal__price { margin-top: 14px; font-size: 16px; color: #1c1c1c; } /* ---------- Betingelser-modal: læsevenlig prosa fra /betingelser-siden ---------- */ .bapp-modal__betingelser { font-size: 15px; line-height: 1.6; color: #4a4a45; } .bapp-modal__betingelser h1, .bapp-modal__betingelser h2 { margin: 22px 0 8px; font-size: 19px; font-weight: 700; color: #5b886b; line-height: 1.3; } .bapp-modal__betingelser h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 700; color: #3a3a38; line-height: 1.3; } .bapp-modal__betingelser h1:first-child, .bapp-modal__betingelser h2:first-child, .bapp-modal__betingelser h3:first-child, .bapp-modal__betingelser p:first-child { margin-top: 0; } .bapp-modal__betingelser p { margin: 0 0 12px; } .bapp-modal__betingelser ul, .bapp-modal__betingelser ol { margin: 0 0 12px; padding-left: 20px; } .bapp-modal__betingelser li { margin: 0 0 6px; } .bapp-modal__betingelser strong { color: #3a3a38; } .bapp-modal__betingelser a { color: #5b886b; text-underline-offset: 2px; } .bapp-modal__betingelser a:hover { color: #4a7058; } .bapp-modal__note { margin-top: 14px; font-size: 14px; font-style: italic; color: #4a4a45; line-height: 1.5; } .bapp-modal__note strong { font-style: normal; color: #1c1c1c; } .bapp-modal__meta { margin-top: 10px; font-size: 14px; color: #4a4a45; line-height: 1.5; } .bapp-modal__meta strong { color: #1c1c1c; } /* Læs mere på serveringskort */ .bapp-serv-card__media { position: relative; overflow: hidden; } .bapp-serv-card__readmore { position: absolute; top: 10px; right: 10px; padding: 6px 12px; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #1c1c1c; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: background 0.15s ease; z-index: 2; } .bapp-serv-card__readmore:hover { background: #fff; } /* Modal: to-kolonne bund (allergener + fødevarehensyn) */ .bapp-modal__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; } .bapp-modal__bottom-head { font-size: 14px; font-weight: 600; color: #1c1c1c; margin-bottom: 10px; } .bapp-modal__bottom-text { font-size: 14px; color: #4a4a45; line-height: 1.5; } .bapp-modal__iconrow { display: flex; flex-wrap: wrap; gap: 10px; } .bapp-modal__icon { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #e6e5df; background: #faf9f5; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; } /* ---------- Prisboks i overblik ---------- */ .bapp-price { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6e5df; } .bapp-price__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; color: #1c1c1c; } .bapp-price__label { display: flex; flex-direction: column; } .bapp-price__sub { margin-top: 2px; font-size: 12px; color: #8a8980; } .bapp-price__row--total { margin-bottom: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e6e5df; font-size: 15px; } .bapp-price__row--subtotal { margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #efede6; border-bottom: 1px solid #efede6; font-size: 14px; } .bapp-price__row--subtotal strong { font-weight: 600; } .bapp-overblik__hint { margin: 6px 0 0; font-size: 13px; color: #8a8980; } /* ---------- Tilvalg ---------- */ .bapp-tilvalg-group { margin-bottom: 28px; } .bapp-tilvalg-group:last-child { margin-bottom: 0; } .bapp-tilvalg-group__title { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: #1c1c1c; } .bapp-tilvalg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* Desktop-bånd: tilvalg 3 → 2 kolonner når sidebaren gør flowet trangt. Kun 981px+ — mobil (≤980) er urørt. Justér max-width efter smag. */ @media (min-width: 981px) and (max-width: 1250px) { .bapp-tilvalg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobil: 2 spalter (ikke 3). Bevidst IKKE i ≤560-blokken, så tilvalg bliver på 2 på telefon — modsat serveringer/menu der falder til 1. VIGTIGT: skal stå EFTER grundreglen ovenfor. Den tidligere placering i den tidlige ≤980-blok virkede ikke, fordi grundreglen (repeat(3)) står længere nede i filen og dermed vandt på kildeorden ved samme specificitet. */ @media (max-width: 980px) { .bapp-tilvalg-grid { grid-template-columns: 1fr 1fr; } } .bapp-tilvalg-card { position: relative; border: 1px solid #e6e5df; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bapp-tilvalg-card.is-active { border-color: #5b886b; box-shadow: 0 8px 22px rgba(91, 136, 107, 0.12); } .bapp-tilvalg-card__media { position: relative; } #bapp-app .bapp-tilvalg-card__img, #bapp-app .bapp-tilvalg-card__img--placeholder { width: 100% !important; height: 150px !important; object-fit: cover !important; display: block !important; background: #f3f2ec; } #bapp-app .bapp-tilvalg-card__img--placeholder { display: flex !important; align-items: center; justify-content: center; color: #8a8980; font-size: 13px; } .bapp-tilvalg-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1 1 auto; } .bapp-tilvalg-card__title { font-size: 15px; font-weight: 600; } .bapp-tilvalg-card__price { font-size: 13px; color: #6b6a64; } .bapp-tilvalg-card__desc { font-size: 13px; color: #4a4a45; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bapp-tilvalg-card__bemaerk { font-size: 13px; font-style: italic; color: #6b6a64; line-height: 1.35; } .bapp-tilvalg-card__bemaerk strong { font-style: normal; font-weight: 600; color: #4a4a45; } .bapp-tilvalg-card__bottom { margin-top: auto; } .bapp-tilvalg-card__footer { padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .bapp-tilvalg-card__price { white-space: nowrap; position: relative; top: 2px; } .bapp-tilvalg-card__control { flex: 0 0 auto; } /* Stepper (børn / drikkevarer) */ .bapp-stepper { display: inline-flex; align-items: center; gap: 4px; } .bapp-stepper__btn { width: 28px; height: 28px; border: 1px solid #d8d6cc; border-radius: 50%; background: #fff; color: #5b886b; font-size: 16px; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .bapp-stepper__btn:hover { background: #f1f7f2; border-color: #5b886b; } .bapp-stepper__val { min-width: 22px; text-align: center; font-size: 14px; font-weight: 600; } /* Natmad-knap */ .bapp-tilvalg-toggle { padding: 9px 18px; border: 1px solid #5b886b; border-radius: 999px; background: #fff; color: #5b886b; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .bapp-tilvalg-toggle:hover { background: #f1f7f2; } .bapp-tilvalg-toggle.is-added { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: #5b886b; color: #fff; font-size: 16px; line-height: 1; } .bapp-price__servings { margin-top: 2px; font-size: 13px; font-weight: 600; color: #8a6d1b; line-height: 1.35; } /* Praktisk — blokke */ .bapp-praktisk-block { display: flex; flex-direction: column; gap: 14px; } .bapp-praktisk-block__title { margin: 0; font-size: 18px; font-weight: 600; color: #1c1c1c; } .bapp-praktisk-block__hint { margin: -6px 0 0; font-size: 14px; color: #6b6a64; line-height: 1.4; } .bapp-praktisk-fields { display: flex; flex-wrap: wrap; gap: 14px; } .bapp-praktisk-fields .bapp-field { flex: 1 1 200px; min-width: 0; } .bapp-praktisk-fields .bapp-field:nth-child(1) { flex: 2 1 220px; } .bapp-praktisk-fields .bapp-field:nth-child(2) { flex: 1 1 130px; } .bapp-praktisk-fields .bapp-field:nth-child(3) { flex: 1.6 1 190px; } /* Gentag e-mail. Samme flex som feltet over den: de to skal læses som ET par, og et gentagelsesfelt, der er bredere end det, det gentager, ligner et nyt spørgsmål. Findes kun ved nye bestillinger — i redigering udsendes feltet slet ikke, og reglen står blot ubrugt. */ .bapp-praktisk-fields .bapp-field:nth-child(4) { flex: 1.6 1 190px; } .bapp-praktisk-col { display: flex; flex-direction: column; gap: 26px; } .bapp-textarea { height: auto; min-height: 52px; resize: vertical; line-height: 1.5; font-family: inherit; } .bapp-required { color: #c0392b; font-weight: 700; } .bapp-input--invalid { border-color: #c0392b; background: #fdf3f2; } /* Levering & afhentning */ .bapp-levering { display: flex; flex-direction: column; gap: 12px; } .bapp-section-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b6a64; } select.bapp-input { cursor: pointer; } .bapp-input--readonly { background: #f6f5f1; color: #6b6a64; cursor: default; } .bapp-pickup-address { padding: 14px 16px; background: #f6f5f1; border-radius: 10px; font-size: 15px; } .bapp-pickup-address p { margin: 0; line-height: 1.45; } .bapp-pickup-address__label { font-size: 13px; color: #6b6a64; margin-bottom: 4px !important; } .bapp-levering-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 6px; } .bapp-help-text { margin: 4px 0 0; font-size: 13px; color: #6b6a64; line-height: 1.45; } .bapp-radio { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; } .bapp-radio input { width: 16px; height: 16px; accent-color: #5b886b; } .bapp-delivery-price-notice { margin-top: 6px; } .bapp-delivery-price-fine { display: block; margin-top: 6px; font-size: 12px; color: #8a8980; font-style: italic; } @media (max-width: 700px) { .bapp-levering-grid { grid-template-columns: 1fr; gap: 20px; } } .bapp-postcode-error { margin-top: -4px; } .bapp-postcode-error__msg { margin: 0; font-size: 13px; color: #c0392b; line-height: 1.45; } .bapp-postcode-error__toggle { background: none; border: none; padding: 0; margin-left: 2px; color: #5b886b; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; } .bapp-area-list { margin-top: 8px; } .bapp-area-list__loading { margin: 0; font-size: 13px; color: #6b6a64; } .bapp-area-list__ul { margin: 0; padding-left: 18px; columns: 2; font-size: 13px; color: #4a4a45; line-height: 1.6; } .bapp-price__divider { height: 1px; background: #e7e5dd; margin: 14px 0; } .bapp-price__row--grand strong { font-size: 17px; font-weight: 500; } .bapp-dev-reset { display: block; margin: 14px 0 0; padding: 0; border: 0; background: transparent; font-size: 12px; font-weight: 500; line-height: 1.2; color: #666; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .bapp-dev-reset:hover { color: #111; } .bapp-serveringer__lock-text--zone2 { color: #6b4e12; background: #fdeeb8; border-color: #ecca64; } .bapp-serveringer__lock-text--zone3 { color: #7a3d12; background: #fbe1c4; border-color: #e89c4f; } .bapp-serveringer__lock-text--zone4 { color: #5a4467; background: #efe7f3; border-color: #c2a3cd; } /* Bekræftelses-dialog (dato → kort frist) */ .bapp-confirm-overlay { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.38); opacity: 0; transition: opacity 0.18s ease; } .bapp-confirm-overlay.is-open { opacity: 1; } .bapp-confirm-dialog { width: min(440px, 100%); background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26); } .bapp-confirm-title { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: #1c1c1c; } .bapp-confirm-text { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: #4a4a45; } .bapp-confirm-actions { display: flex; flex-direction: column; gap: 10px; } .bapp-confirm-btn { width: 100%; padding: 14px 20px; border-radius: 12px; font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.15s ease; } .bapp-confirm-btn--yes { border: none; background: #5b886b; color: #fff; } .bapp-confirm-btn--yes:hover { background: #4a7058; } .bapp-confirm-btn--no { border: 1px solid #cfcdc2; background: #fff; color: #5b886b; } .bapp-confirm-btn--no:hover { background: #f3f2ec; } .bapp-serveringer__lock-sub { display: block; margin-top: 6px; font-size: 0.92em; font-weight: 400; opacity: 0.85; } .bapp-serveringer__date-note { font-weight: 400; font-size: 0.7em; color: #6b6b63; } /* Tilvalg — slør-gate (kun uden dato) */ .bapp-tilvalg-wrap { position: relative; } .bapp-tilvalg-lock { display: none; } .bapp-tilvalg-wrap.is-locked .bapp-tilvalg-groups { filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; max-height: 360px; overflow: hidden; } .bapp-tilvalg-wrap.is-locked .bapp-tilvalg-lock { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 16px; pointer-events: none; } /* ---------- Gennemse (trin 6) ---------- */ .bapp-gennemse { display: flex; flex-direction: column; gap: 24px; } .bapp-gennemse__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; padding: 18px; background: #faf9f5; border: 1px solid #e6e5df; border-radius: 12px; } .bapp-gennemse__fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .bapp-gennemse__fact-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b6a64; } .bapp-gennemse__fact-value { font-size: 15px; color: #1c1c1c; line-height: 1.4; word-break: break-word; } .bapp-review-group { margin-bottom: 18px; } .bapp-review-group:last-child { margin-bottom: 0; } .bapp-review-group__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #1c1c1c; } .bapp-review-group__body { margin: 0; font-size: 14px; color: #4a4a45; line-height: 1.5; } .bapp-review-group__slots { display: inline-block; margin-top: 4px; font-size: 13px; color: #6b6a64; } .bapp-review-line { font-size: 14px; color: #4a4a45; line-height: 1.6; } .bapp-review-line strong { color: #1c1c1c; font-weight: 600; } .bapp-cta:disabled { background: #c9c8c0; cursor: not-allowed; } @media (max-width: 560px) { .bapp-gennemse__facts { grid-template-columns: 1fr; } } .bapp-overblik__title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #1c1c1c; line-height: 1.3; } .bapp-gennemse__heading { margin: 0; font-size: 22px; font-weight: 700; color: #5b886b; line-height: 1.2; } /* Når anledningen ligger inde i facts-griddet, skal den spænde begge kolonner og stå øverst — så Dato/Antal beholder deres to-kolonne-række under. */ .bapp-gennemse__facts .bapp-gennemse__heading { grid-column: 1 / -1; } /* Anledning som overskrift — versaler begge steder */ .bapp-overblik__title, .bapp-gennemse__heading { text-transform: uppercase; letter-spacing: 0.01em; } .bapp-review-dishes { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 7px 14px; align-items: center; justify-items: start; } /* Mobil: gør navne-kolonnen fleksibel, så lange serveringsnavne ombrydes i stedet for at flyde ud over siden. justify-self:stretch + min-width:0 lader navne-spanet fylde kolonnen og dermed wrappe. Desktop urørt (har plads til max-content). */ .bapp-review-dish__actions { display: inline-flex; align-items: center; gap: 8px; justify-self: end; } .bapp-review-dish__stepper { display: inline-flex; align-items: center; gap: 4px; } .bapp-review-dish__step { width: 24px; height: 24px; border: 1px solid #d8d6cc; border-radius: 50%; background: #fff; color: #5b886b; font-size: 15px; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .bapp-review-dish__step:hover { background: #f1f7f2; border-color: #5b886b; } .bapp-review-dish__qty { min-width: 18px; text-align: center; font-size: 13px; font-weight: 600; } .bapp-review-dish__remove { width: 24px; height: 24px; border: 1px solid #e2e0d8; border-radius: 50%; background: #fff; color: #8a8980; font-size: 16px; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .bapp-review-dish__remove:hover { background: #fbecec; border-color: #efc4c4; color: #7a2222; } .bapp-review-dish__tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #5b886b; background: rgba(91, 136, 107, 0.08); padding: 3px 9px; border-radius: 999px; line-height: 1.4; white-space: nowrap; } .bapp-review-dish__name { font-size: 14px; color: #1c1c1c; line-height: 1.45; justify-self: stretch; min-width: 0; } .bapp-review-dish__price { color: #6b6a64; font-size: 13px; white-space: nowrap; } /* Gennemse — praktisk i to faste kolonner */ .bapp-gennemse__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; padding: 18px; background: #faf9f5; border: 1px solid #e6e5df; border-radius: 12px; } .bapp-gennemse__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (max-width: 560px) { .bapp-gennemse__cols { grid-template-columns: 1fr; } } .bapp-price__deposit-note { display: flex; flex-direction: column; gap: 2px; margin: -4px 0 6px; } /* ===== Gennemse: send-zone (status over · knap · depositum under) ===== */ .bapp-gennemse__send { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; } /* Status-linje */ .bapp-status { margin: 0; text-align: center; font-size: 15px; line-height: 1.4; } .bapp-status--success { color: #5b886b; font-weight: 600; } .bapp-status--error { color: #c0392b; } .bapp-status__link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .bapp-status__link:hover { opacity: 0.8; } /* Ryst når man trykker send med manglende felter */ .bapp-status--shake { animation: bapp-shake 0.4s ease; } @keyframes bapp-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* Send-knap når noget mangler (dæmpet grøn, stadig klikbar) */ .bapp-cta--pending { background: #9bb0a3; } .bapp-cta--pending:hover { background: #8fa597; } /* §29.12 pkt. 3: accept-flueben i send-zonen */ .bapp-accept { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin: 0; cursor: pointer; font-size: 15px; line-height: 1.4; } .bapp-accept__box { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: #5b886b; cursor: pointer; } .bapp-accept__text { text-align: left; } .bapp-accept__link { color: #5b886b; text-underline-offset: 2px; } /* Depositum under knappen */ .bapp-deposit { text-align: center; } .bapp-deposit__amount { margin: 0; font-size: 15px; color: #2b2a26; } .bapp-deposit__note { margin: 4px 0 0; font-size: 13px; color: #6b6a64; line-height: 1.4; } /* ===== Send-bekræftelse (overlay ved success) ===== */ .bapp-send-overlay { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.42); opacity: 0; transition: opacity 0.2s ease; } .bapp-send-overlay.is-open { opacity: 1; } .bapp-send-dialog { position: relative; width: min(460px, 100%); background: #fff; border-radius: 18px; padding: 36px 32px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26); transform: translateY(8px); transition: transform 0.2s ease; } .bapp-send-dialog__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #1c1c1c; font-size: 22px; line-height: 1; cursor: pointer; } .bapp-send-dialog__close:hover { background: #f3f2ec; } .bapp-send-overlay.is-open .bapp-send-dialog { transform: translateY(0); } .bapp-send-dialog__check { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: #5b886b; color: #fff; font-size: 30px; line-height: 56px; text-align: center; } .bapp-send-dialog__title { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: #1c1c1c; line-height: 1.25; } .bapp-send-dialog__text { margin: 0; font-size: 15px; line-height: 1.5; color: #4a4a45; } /* Depositum i overblikket (vises når Gennemse er nået) */ .bapp-overblik-deposit { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6e5df; text-align: center; } /* Undgå dobbeltstreg: hvis depositum følger direkte efter en subtotal (som allerede har bundstreg), fjernes depositummets egen topstreg. */ .bapp-price__row--subtotal + .bapp-overblik-deposit { margin-top: 0; padding-top: 14px; border-top: none; } .bapp-overblik-deposit__amount { margin: 0; font-size: 15px; color: #2b2a26; } .bapp-overblik-deposit__note { margin: 4px 0 0; font-size: 12px; color: #6b6a64; line-height: 1.4; } .bapp-overblik-deposit__terms { margin: 8px 0 0; font-size: 13px; } .bapp-overblik-deposit__terms-link { color: #5b886b; text-underline-offset: 2px; } /* Kompakt prissummering i Gennemse (kun mobil — indsættes kun af JS på mobil). */ .bapp-gennemse-pris { margin: 0; padding: 0 0 14px; } .bapp-gennemse-pris__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; color: #1c1c1c; } .bapp-gennemse-pris__row:last-child { margin-bottom: 0; } .bapp-gennemse-pris__row--total { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e6e5df; font-size: 15px; } /* Tæller-pop når en kategori ændrer antal */ @keyframes bapp-pill-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .bapp-pill__count--pulse { animation: bapp-pill-pop 0.3s ease; } /* Fejring når en kategori netop er blevet fuld (hop + grønt glimt) */ @keyframes bapp-pill-celebrate { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(91, 136, 107, 0.65); } 30% { transform: scale(1.28); box-shadow: 0 0 0 10px rgba(91, 136, 107, 0); } 55% { transform: scale(0.96); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(91, 136, 107, 0); } } .bapp-pill--celebrate { animation: bapp-pill-celebrate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ===== Flatpickr: zone-farvede dage ===== */ .flatpickr-day.bapp-fp-zone1 { background: #e4efe8; border-color: #aecdbb; color: #38684e; } .flatpickr-day.bapp-fp-zone2 { background: #fdeeb8; border-color: #ecca64; color: #6b4e12; } .flatpickr-day.bapp-fp-zone3 { background: #fbe1c4; border-color: #e89c4f; color: #7a3d12; } .flatpickr-day.bapp-fp-zone4 { background: #efe7f3; border-color: #c2a3cd; color: #5a4467; } .flatpickr-day.bapp-fp-lukket, .flatpickr-day.flatpickr-disabled.bapp-fp-lukket { background: #f6d6d6; border-color: #e0a0a0; color: #7a2222; text-decoration: line-through; cursor: not-allowed; opacity: 0.85; } .flatpickr-day.bapp-fp-zone1:hover, .flatpickr-day.bapp-fp-zone2:hover, .flatpickr-day.bapp-fp-zone3:hover, .flatpickr-day.bapp-fp-zone4:hover { filter: brightness(0.97); } /* Valgt dato slår zone-farven (grøn vinder) */ .flatpickr-day.selected, .flatpickr-day.selected:hover { background: #5b886b; border-color: #5b886b; color: #fff; } /* ===== Flatpickr: forklarings-legende under kalenderen ===== */ .bapp-fp-legend { padding: 12px 14px; border-top: 1px solid #e6e5df; display: flex; flex-direction: column; gap: 8px; } .bapp-fp-legend__row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4; color: #4a4a45; text-align: left; } /* Enkel grå ring om dags dato (som i den gamle kalender) */ #bapp-app ~ .flatpickr-calendar .flatpickr-day.today, .flatpickr-calendar .flatpickr-day.today { border: 1px solid #c9c8c0 !important; background: transparent; color: #1c1c1c; } .flatpickr-calendar .flatpickr-day.today:hover { background: #f3f2ec; border-color: #c9c8c0 !important; } .flatpickr-calendar .flatpickr-day.today.flatpickr-disabled { opacity: 1; color: #b0afa8; } .bapp-fp-legend__dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; margin-top: 1px; border: 1px solid transparent; } .bapp-fp-legend__dot--lukket { background: #f6d6d6; border-color: #e0a0a0; } .bapp-fp-legend__dot--zone3 { background: #fbe1c4; border-color: #e89c4f; } .bapp-fp-legend__dot--zone1 { background: #e4efe8; border-color: #aecdbb; } .bapp-fp-legend__dot--zone2 { background: #fdeeb8; border-color: #ecca64; } .bapp-fp-legend__dot--zone4 { background: #efe7f3; border-color: #c2a3cd; } /* ============================================================ TEMA-UAFHÆNGIGT LAYOUT ------------------------------------------------------------ Appen styrer SELV sin bredde, sidekant og top-afstand — uanset hvilket tema eller hvilke wrappere den ligger inde i. Reglerne nævner BEVIDST ingen tema-klassenavne (.entry-content, .has-global-padding, .is-layout-constrained osv.), så en fremtidig tema-opdatering ikke kan vælte layoutet. Virker kun på den side hvor appen findes: :has(#bapp-app) matcher ingenting på sider uden appen, så resten af sitet berøres ikke. Vil du have luft mellem appen og skærmkanten på mobil, så er det #bapp-app's egen padding der styrer det (sættes i @media 560px ovenfor) — det er nu 100% din kode, ikke temaets. ============================================================ */ /* Nulstil sidepadding, bredde-loft og top-afstand på alle wrappere mellem og appen. Det bryder appen fri af temaets container- system, både vandret (kant) og lodret (luft i toppen). */ :where(body) :is(div, main, section, article):has(#bapp-app) { max-width: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; padding-top: 0 !important; } /* Appen genindfører sin egen ramme: centreret, med eget bredde-loft. ID-selektoren vinder over temaets layout-regler. */ #bapp-app { max-width: 1500px; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ MOBIL-BUNDBAR (kun < 980px) — fast bar i bunden med pris pr. person. ============================================================ */ .bapp-mobil-bundbar { display: none; } @media (max-width: 980px) { .bapp-mobil-bundbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid #e6e5df; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); } .bapp-mobil-bundbar__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border: none; background: none; font-family: inherit; text-align: left; cursor: pointer; } .bapp-mobil-bundbar__amount { font-size: 16px; font-weight: 700; color: #1c1c1c; } .bapp-mobil-bundbar--tom .bapp-mobil-bundbar__amount { font-weight: 500; color: #6b6a64; } .bapp-mobil-bundbar__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: #5b886b; } .bapp-mobil-bundbar__cta svg { display: block; transition: transform 0.2s ease; } /* Accordion-panel: folder op OVER baren (baren er fast i bunden, så hele baren vokser opad). Indeholder det flyttede Dit Overblik. */ .bapp-mobil-bundbar__panel { max-height: 70vh; overflow-y: auto; padding: 16px 16px 8px; border-bottom: 1px solid #e6e5df; background: #fff; } .bapp-mobil-bundbar__panel[hidden] { display: none; } /* Åben: chevron vender (peg ned = luk). */ .bapp-mobil-bundbar.is-open .bapp-mobil-bundbar__cta svg { transform: rotate(180deg); } }