/* Molly online ordering — the guest's pages. Light and calm: the restaurant's photo across the top, its
   logo and name under it, the categories as tabs that stay at the top while scrolling, the dishes as
   cards in two columns and the order beside them (a bar and a sheet from the bottom on a phone).
   --accent is the restaurant's colour (OnlineOrderSettings.AccentColor), --accent-ink the text on it. */

:root {
    --bg: #f6f5f0;
    --card: #ffffff;
    --ink: #17181a;
    --muted: #6b6d70;
    --faint: #a3a5a8;
    --line: #e8e7e1;
    --field: #f1f0eb;
    --accent: #1f2937;
    --accent-ink: #ffffff;
    /* Text straight on the page's background (not on the cards): the restaurant's TextColor, or dark or light
       for its BackgroundColor (_Layout.cshtml); muted, the same a little faded. */
    --page-ink: var(--ink);
    --page-muted: color-mix(in srgb, var(--page-ink) 62%, transparent);
    --accent-soft: color-mix(in srgb, var(--accent) 10%, white);
    --warn: #fdf3dc;
    --warn-ink: #6b4a00;
    --error: #fde5e3;
    --error-ink: #8a1f17;
    --ok: #e2f5e8;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 6px 24px rgba(20, 20, 20, 0.06);
    --wrap: 1280px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.sheet-open { overflow: hidden; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; margin-top: 1.25rem; }
p { margin: 0 0 0.75rem; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.875rem; }
.center { text-align: center; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 680px; }
.page { padding: 32px 24px; }

/* ── The photo at the top ─────────────────────────────────────────────── */

.hero {
    position: relative;
    height: 200px;
    background: var(--cover) center / cover no-repeat, color-mix(in srgb, var(--accent) 14%, #f1ecdf);
}
.hero.plain {
    background:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 22%, transparent) 0 60px, transparent 61px),
        radial-gradient(circle at 75% 80%, color-mix(in srgb, var(--accent) 16%, transparent) 0 90px, transparent 91px),
        color-mix(in srgb, var(--accent) 10%, #f1ecdf);
}
.hero.compact { height: 120px; }

.lang {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.72);
    backdrop-filter: blur(8px);
}
.lang a {
    padding: 4px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
}
.lang a.on { background: #fff; color: #17181a; }

/* ── The restaurant ───────────────────────────────────────────────────── */

.head { background: var(--card); }
.brand { padding: 0 0 20px; }
.logo {
    width: 124px;
    height: 124px;
    margin-top: -72px;
    margin-bottom: 18px;
    border-radius: 16px;
    border: 3px solid var(--card);
    background: var(--accent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: grid;
    place-items: center;
    position: relative;
}
.logo img { width: 100%; height: 100%; object-fit: contain; }
.logo span { color: var(--accent-ink); font-size: 2.4rem; font-weight: 800; }
.where { color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.intro { max-width: 60ch; color: var(--muted); }

.link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link.accent { color: var(--accent); text-decoration: none; font-weight: 600; }
.accent-text { color: var(--accent); }

/* The category tabs and the search, at the top while scrolling. */
.tabs-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.2s;
}
.tabs-bar.stuck { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); border-bottom-color: transparent; }
.tabs-row { display: flex; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.tabs {
    flex: 1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    flex: none;
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.tab:hover { background: var(--field); }
.tab.on { background: var(--accent); color: var(--accent-ink); }

.search {
    flex: 0 1 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    height: 48px;
    border-radius: 999px;
    background: var(--field);
}
.search svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; outline: none; color: var(--ink); }
.search:focus-within { box-shadow: 0 0 0 2px var(--accent); }

.banner {
    margin: 20px 0 0;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--warn);
    color: var(--warn-ink);
    font-weight: 500;
}
.banner.error { background: var(--error); color: var(--error-ink); }

/* ── The menu and the order ───────────────────────────────────────────── */

.menu-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 36px;
    align-items: start;
    padding-top: 32px;
    padding-bottom: 64px;
}

.cat { scroll-margin-top: 90px; margin-bottom: 36px; }
.cat h2 { margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.item {
    display: flex;
    align-items: stretch;
    gap: 18px;
    min-height: 140px;
    padding: 20px;
    border: 0;
    border-radius: var(--radius);
    background: var(--card);
    text-align: left;
    box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03);
    transition: box-shadow 0.18s, transform 0.18s;
}
button.item:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
button.item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.item-name { font-size: 1.05rem; font-weight: 500; }
.item-desc {
    color: var(--muted);
    font-size: 0.92rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.item-price { font-weight: 700; margin-top: 4px; }
.item-img { flex: none; width: 104px; height: 104px; align-self: center; border-radius: 10px; object-fit: cover; background: var(--field); }

/* The order, beside the menu. */
.cart {
    position: sticky;
    top: 96px;
    padding: 26px;
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.cart.bump { animation: bump 0.35s ease; }
@keyframes bump { 40% { transform: scale(1.015); } }
.cart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cart-head h2 { margin: 0; }
.cart-head .sheet-close { display: none; }

.pickup-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.pickup-icon { width: 46px; height: 46px; border-radius: 10px; background: var(--field); display: grid; place-items: center; flex: none; }
.pickup-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pickup-icon circle { fill: var(--ink); }
.pickup-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pickup-text strong { font-weight: 500; }
.pickup-when { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.85rem; flex-wrap: wrap; }
.pickup-when svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.pickup-when svg + span + svg { margin-left: 8px; }

.cart-lines { margin: 8px 0; }
.cart-empty { color: var(--muted); text-align: center; padding: 48px 0 32px; margin: 0; }

.lines { list-style: none; margin: 0; padding: 0; }
.lines li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.lines li:last-child { border-bottom: 0; }
.line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.line-text small { font-size: 0.82rem; }
.line-price { font-weight: 600; white-space: nowrap; }
.qty { font-weight: 700; min-width: 2.2em; }

.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.cart-foot .button { width: 100%; }

.stepper {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--field);
    flex: none;
}
.stepper button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 1.25rem;
    line-height: 1;
}
.stepper button:hover:not(:disabled) { background: var(--line); }
.stepper button:disabled { color: var(--faint); cursor: default; }
.stepper output { min-width: 1.6em; text-align: center; font-weight: 700; }
.stepper.small button { width: 30px; height: 30px; font-size: 1rem; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    text-decoration: none;
    transition: filter 0.15s, opacity 0.15s;
}
.button:hover { filter: brightness(1.08); }
.button:disabled, .button.disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.button.ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.button.busy { opacity: 0.7; cursor: progress; }
.button.grow { flex: 1; }

/* The bar at the bottom of a phone's screen, to the order. */
.cart-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 30;
    display: none;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.cart-bar span:nth-child(2) { flex: 1; text-align: left; }
.cart-bar-count {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-ink) 22%, transparent);
    display: grid;
    place-items: center;
}
.cart-bar.bump { animation: bump 0.35s ease; }

/* ── Dialogs: the dish, the pickup time, more info ────────────────────── */

dialog.sheet {
    width: min(560px, calc(100% - 32px));
    max-height: min(88vh, 900px);
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
dialog.sheet[open] { display: flex; flex-direction: column; animation: rise 0.22s ease; }
dialog::backdrop { background: rgba(15, 15, 15, 0.5); backdrop-filter: blur(2px); }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.sheet-body { overflow-y: auto; padding: 24px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sheet-top h2 { margin: 0; }
.sheet-close {
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 999px;
    background: var(--field);
    font-size: 1.5rem;
    line-height: 1;
}
.sheet-close.floating { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }

.product .sheet-body { padding: 0; }
#product-img { width: 100%; height: 280px; object-fit: cover; background: var(--field); }
.product-info { padding: 24px 24px 8px; }
.product-info h2 { padding-right: 40px; }
#product-groups, .product .field { padding: 0 24px; }
.group { border: 0; margin: 0 0 8px; padding: 12px 0 0; }
.group legend {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: var(--field);
    font-weight: 700;
}
.badge { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.badge.required { color: var(--accent); }
.option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.option:last-child { border-bottom: 0; }
.option input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.option input:disabled + .option-name { color: var(--faint); }
.option-name { flex: 1; }
.product-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 12px;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
    margin-top: 12px;
    background: var(--card);
    border-top: 1px solid var(--line);
}

.field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-weight: 500; }
.field input, .field textarea, .field select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    font: inherit;
    font-weight: 400;
    color: var(--ink);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.field .hint { font-weight: 400; }

.pickup-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.chip {
    flex: none;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-weight: 500;
}
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pickup-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 8px 0 20px; }
.time { position: relative; }
.time.wide { grid-column: 1 / -1; }
.time input { position: absolute; opacity: 0; }
.time span {
    display: block;
    padding: 11px 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
}
.time input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.time input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours tr.today { font-weight: 700; }
.hours tr.today th, .hours tr.today td { font-weight: 700; }

/* Ta med / Upphämtning. */
.segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--field);
}
.segmented button {
    flex: 1;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-weight: 600;
    color: var(--muted);
}
.segmented button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.cart-fee { display: flex; justify-content: space-between; color: var(--muted); margin: 8px 0 0; }
.field-row { display: flex; gap: 12px; }
.field-row .field:first-child { flex: 0 0 140px; }
.field.grow { flex: 1; }
#quote-status.error { color: var(--error-ink); }
#delivery-section .button.ghost { width: 100%; margin: 4px 0 8px; min-height: 44px; }

/* ── Checkout ─────────────────────────────────────────────────────────── */

.card { background: var(--card); border-radius: 22px; padding: 28px; box-shadow: var(--shadow); margin-bottom: 20px; }
.checkout { padding-top: 28px; padding-bottom: 64px; }
.back { display: inline-block; margin-bottom: 16px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: start; margin-top: 20px; }
.checkout-form h2 { margin-top: 12px; }
.checkout-form h2:first-child { margin-top: 0; }
.checkout-form .button { width: 100%; margin-top: 12px; }
.cf-turnstile { margin: 12px 0; }
.summary { position: sticky; top: 24px; }

/* ── The order ────────────────────────────────────────────────────────── */

.order-page { padding-top: 32px; padding-bottom: 64px; }
.order-card { text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.reference {
    font-size: clamp(3rem, 12vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 4px 0 16px;
    color: var(--accent);
}
.lead { font-size: 1.35rem; }
.stepper-track { display: flex; list-style: none; margin: 24px 0; padding: 0; }
.stepper-track li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--faint); font-size: 0.9rem; font-weight: 500; }
.stepper-track li::before {
    content: "";
    position: absolute;
    top: 9px;
    right: 50%;
    width: 100%;
    height: 3px;
    background: var(--line);
    z-index: 0;
}
.stepper-track li:first-child::before { display: none; }
.stepper-track .dot { width: 21px; height: 21px; border-radius: 999px; background: var(--line); position: relative; z-index: 1; }
.stepper-track li.done, .stepper-track li.current { color: var(--ink); }
.stepper-track li.done .dot, .stepper-track li.current .dot, .stepper-track li.done::before, .stepper-track li.current::before { background: var(--accent); }
.stepper-track li.current .dot { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent); } }
.facts { display: grid; gap: 10px; margin: 20px 0; text-align: left; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }

.spinner {
    width: 40px;
    height: 40px;
    margin: 8px auto 20px;
    border: 4px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 999px;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.foot { text-align: center; color: var(--faint); font-size: 0.85rem; padding: 24px 16px 96px; }
.foot a { color: var(--muted); }

/* Text on the page's background rather than on a card: the restaurant's text colour. */
.cat > h2,
#no-match,
.menu-layout > .sections > .muted,
.checkout > h1,
.back,
.back:hover { color: var(--page-ink); }
.checkout > h1 .muted,
.foot,
.foot a { color: var(--page-muted); }

/* ── Narrower screens ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .menu-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
    .grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .wrap { padding: 0 16px; }
    .hero { height: 150px; }
    .hero.compact { height: 90px; }
    .logo { width: 96px; height: 96px; margin-top: -56px; }
    .tabs-row { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    .search { flex: none; height: 44px; }
    .menu-layout { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
    .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .item { min-height: 0; padding: 16px; }
    .item-img { width: 88px; height: 88px; }
    .cat { scroll-margin-top: 130px; }

    /* The order: a bar at the bottom, and a sheet from the bottom when opened. */
    .cart-bar { display: flex; }
    .cart-bar[hidden] { display: none !important; }
    .cart {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        z-index: 40;
        max-height: 85vh;
        border-radius: 22px 22px 0 0;
        padding-bottom: calc(26px + env(safe-area-inset-bottom));
        transform: translateY(110%);
        transition: transform 0.28s ease;
        visibility: hidden;
    }
    .cart.open { transform: none; visibility: visible; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.3); }
    .cart.bump { animation: none; }
    .cart-head .sheet-close { display: block; }
    body.sheet-open::after { content: ""; position: fixed; inset: 0; background: rgba(15, 15, 15, 0.5); z-index: 35; }

    dialog.sheet {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        margin: auto 0 0;
        border-radius: 22px 22px 0 0;
    }
    @keyframes rise { from { transform: translateY(40px); opacity: 0.4; } }
    #product-img { height: 220px; }

    .checkout-layout { grid-template-columns: minmax(0, 1fr); }
    .summary { position: static; order: -1; }
    .card { padding: 20px; border-radius: 18px; }
}