/* Molly table booking — the guest's pages. The restaurant's photo (--cover, from its booking settings)
   behind everything, darkened, and one glass card in the middle per step; without a photo, a dark
   gradient. The same in a restaurant's widget (body.embed), only tighter. --accent is the site's colour
   when widget.js passes one (?accent=); otherwise white, as the rest of the page. */

:root {
    --ink: #ffffff;
    --muted: rgba(255, 255, 255, 0.66);
    --faint: rgba(255, 255, 255, 0.34);
    --line: rgba(255, 255, 255, 0.14);
    --glass: rgba(26, 28, 32, 0.56);
    --glass-strong: rgba(26, 28, 32, 0.72);
    --field: rgba(255, 255, 255, 0.07);
    --field-hover: rgba(255, 255, 255, 0.13);
    --accent: #ffffff;
    --accent-ink: #14161a;
    --free-dot: #7ee0a1;
    --full-dot: #f2b45a;
    --ok: rgba(84, 190, 120, 0.2);
    --ok-ink: #bdf2cf;
    --warn: rgba(240, 170, 60, 0.2);
    --warn-ink: #ffd99c;
    --error: rgba(235, 85, 85, 0.22);
    --error-ink: #ffc4c4;
    --radius: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }

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

/* Fixed behind the page (background-attachment: fixed does not work on phones). */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 15% -10%, rgba(255, 255, 255, 0.10), transparent 60%),
        radial-gradient(800px 600px at 100% 110%, rgba(255, 255, 255, 0.06), transparent 60%),
        linear-gradient(165deg, #2b3036 0%, #16181c 55%, #0f1113 100%);
}

.has-cover .backdrop {
    background:
        linear-gradient(180deg, rgba(10, 12, 14, 0.45) 0%, rgba(10, 12, 14, 0.25) 35%, rgba(10, 12, 14, 0.6) 100%),
        var(--cover) center / cover no-repeat;
}

/* The restaurant's video over the photo (body.has-video): the photo is its poster, darkened the same way, and the
   video fades in over it once it plays (body.video-on, the layout's script). The darkening is then a layer of
   its own on top, so it covers the video too. */
.has-video .backdrop { overflow: hidden; }
.has-video.has-cover .backdrop { background: var(--cover) center / cover no-repeat; }
.has-video.has-cover .backdrop::after,
.video-on .backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 14, 0.45) 0%, rgba(10, 12, 14, 0.25) 35%, rgba(10, 12, 14, 0.6) 100%);
}
.backdrop-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.video-on .backdrop-video { opacity: 1; }
/* Safari's big play button, on a video it won't start by itself. */
.backdrop-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.backdrop-video::-webkit-media-controls { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .backdrop-video { display: none; }
}

.page {
    max-width: 750px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

body.embed .page { padding: 12px 12px 20px; }

/* ── Header ───────────────────────────────────────────────────────── */

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

body.embed .top { margin-bottom: 14px; }

.brand { min-width: 0; }

.brand-name {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.lang {
    display: flex;
    flex-shrink: 0;
    padding: 4px;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.lang a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

.lang a.on { background: rgba(255, 255, 255, 0.16); color: var(--ink); }

.foot {
    text-align: center;
    color: var(--muted);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    font-size: 0.78rem;
    margin-top: 24px;
}

/* "Molly", to joinmolly.com: the footer's own colour, underlined so it reads as a link. */
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, 0.35); }
.foot a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ── Steps: back, progress, what is chosen ────────────────────────── */

.steps { margin-bottom: 14px; }

.steps-bar { display: flex; align-items: center; gap: 14px; }

.round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--glass-strong);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.round-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
a.round-btn:hover { background: var(--field-hover); }
.round-btn.disabled { opacity: 0.35; pointer-events: none; }

.progress {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.progress span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width 0.3s; }

.step-count { font-size: 0.82rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Guests · date · time (or sitting): three cells, each a link back to change it. */
.summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
    border-radius: 14px;
    background: var(--glass-strong);
    border: 1px solid var(--line);
    overflow: hidden;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.summary-cell {
    display: block;
    min-width: 0;
    padding: 8px 14px;
    color: var(--ink);
    text-decoration: none;
}
.summary-cell + .summary-cell { border-left: 1px solid var(--line); }
.summary-cell small { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.summary-cell strong { display: block; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.summary-cell:hover { background: var(--field-hover); }
.summary-cell.current strong { color: var(--muted); font-weight: 500; }

/* ── The card ─────────────────────────────────────────────────────── */

.sheet {
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 36px 40px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
}

body.embed .sheet { padding: 24px 18px; border-radius: 20px; }

@media (max-width: 520px) {
    .sheet { padding: 28px 20px; border-radius: 22px; }
}

/* The sittings: their own cards on the photo, so no card around them. */
body .sheet.bare {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.sheet.bare .contact { color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }

h1, h2 { line-height: 1.2; margin: 0 0 14px; letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; text-align: center; }
h2 { font-size: 1.1rem; }

.step-title { font-size: 1.75rem; text-align: center; margin-bottom: 18px; }
body.embed .step-title, body.embed h1 { font-size: 1.4rem; }
.step-sub { text-align: center; color: var(--muted); margin: -8px 0 22px; }
.step-sub::first-letter { text-transform: uppercase; }

.kicker {
    text-align: center;
    margin: 0 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.intro { color: var(--muted); margin: 0 0 24px; white-space: pre-line; line-height: 1.65; }

/* A long intro: its beginning, and the rest behind "Läs mer" (a <details>). Open, the whole text takes
   the beginning's place and the button goes. */
.intro-box { margin: 0 0 24px; }
.intro-box .intro { margin-bottom: 12px; }
.intro-box details .intro { margin-bottom: 0; }
.intro-box:has(details[open]) .intro-cut { display: none; }
.intro-box summary { list-style: none; cursor: pointer; }
.intro-box summary::-webkit-details-marker { display: none; }
.intro-box details[open] > summary { display: none; }

.read-more {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 10px;
    background: var(--field);
    border: 1px solid var(--line);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.intro-box summary:hover .read-more { background: var(--field-hover); }
.intro-box summary:focus-visible { outline: none; }
.intro-box summary:focus-visible .read-more { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }

/* "Läs mer" (_Layout's script): a sitting's words over how many kept to two lines, the occasions and diets
   to two rows of chips; the button opens and closes the rest. Without the script everything shows. */
.clamp { margin: 0 0 24px; }
.clamp .intro { margin-bottom: 0; }
.clamp.clamped[data-clamp="lines"] .clamp-body { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.clamped[data-clamp="rows"] .clamp-body { overflow: hidden; }
/* Collapsed, the last of what shows fades out (a mask, so whatever is behind shows through). */
.clamp.clamped .clamp-body {
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade-from, 45%), transparent);
    mask-image: linear-gradient(to bottom, #000 var(--fade-from, 45%), transparent);
}
.clamp.clamped[data-clamp="rows"] .clamp-body { --fade-from: 55%; }
/* Room for a chip's focus ring inside the clipped list. */
.clamp-rows { margin: 0; }
.clamp-rows .clamp-body { padding: 3px; margin: -3px; }
.clamp-rows .clamp-toggle { margin-top: 10px; padding: 6px 16px; font-size: 0.72rem; }
.clamp-toggle[hidden] { display: none; }
.clamp-toggle { display: block; width: fit-content; margin: 12px auto 0; color: var(--ink); font-family: inherit; cursor: pointer; }
.clamp-toggle:hover { background: var(--field-hover); }
.clamp-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }

/* ── The landing: the restaurant's name, its words and a card per sitting ── */

.wordmark {
    font-size: clamp(2.4rem, 10vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 4px 0 18px;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
body.embed .wordmark { font-size: 2.2rem; margin-bottom: 12px; }
/* The restaurant's logo in the name's place: as wide as the column allows, kept to a wordmark's height. */
.wordmark.logo { display: flex; justify-content: center; text-shadow: none; }
.wordmark.logo img { display: block; max-width: min(100%, 520px); max-height: clamp(80px, 22vw, 160px); width: auto; height: auto; filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.35)); }
body.embed .wordmark.logo img { max-height: 90px; }

.sittings-step .intro, .sittings-step .intro-box { text-align: center; color: var(--ink); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
.sittings-step .read-more { background: var(--glass-strong); text-shadow: none; }

.sittings { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

/* Back to the group's restaurants, at the top beside the language switch on a restaurant's first screen
   when it was chosen there. */
.group-back {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; white-space: nowrap;
    border-radius: 999px; background: var(--glass-strong); color: var(--ink); font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.group-back:hover { background: var(--field-hover); }
/* A restaurant's logo in its card on the group's page, in its name's place. */
.group-logo { display: block; max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; object-position: left; }
.group-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sitting-card {
    display: flex;
    min-height: 176px;
    border-radius: 22px;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    background: var(--glass-strong);
    border: 1px solid var(--line);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
    transition: border-color 0.15s;
}
.sitting-card:hover { border-color: rgba(255, 255, 255, 0.34); }
.sitting-card:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }

.sitting-photo { position: relative; flex: 0 0 42%; background: rgba(255, 255, 255, 0.06); }
.sitting-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.sitting-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; }
.sitting-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.sitting-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.55; white-space: pre-line; }
.sitting-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 12px; }
.sitting-hours { font-size: 0.88rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.round-btn.go { width: 44px; height: 44px; background: var(--accent); color: var(--accent-ink); border: 0; transition: transform 0.15s; }
.sitting-card:hover .round-btn.go { transform: translateX(3px); }

/* A phone or the widget's panel: a narrower photo, and the card about a quarter lower than on a computer
   (less room around the text, a smaller arrow, the description kept to three lines). */
@media (max-width: 480px) {
    .sitting-card { min-height: 132px; border-radius: 18px; }
    .sitting-photo { flex-basis: 36%; }
    .sitting-text { padding: 12px 14px; gap: 6px; }
    .sitting-name { font-size: 1.15rem; }
    .sitting-desc { font-size: 0.85rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .sitting-foot { padding-top: 0; gap: 10px; }
    .sitting-foot .round-btn.go { width: 38px; height: 38px; }
}
body.embed .sitting-card { min-height: 132px; border-radius: 18px; }
body.embed .sitting-photo { flex-basis: 36%; }
body.embed .sitting-text { padding: 12px 14px; gap: 6px; }
body.embed .sitting-name { font-size: 1.15rem; }
body.embed .sitting-desc { font-size: 0.85rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.embed .sitting-foot { padding-top: 0; gap: 10px; }
body.embed .sitting-foot .round-btn.go { width: 38px; height: 38px; }

.all-times { text-align: center; margin: 18px 0 0; font-size: 0.88rem; }
.all-times a { color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); text-underline-offset: 3px; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.step { margin-bottom: 24px; }
.step:last-child { margin-bottom: 0; }

/* ── Choices: party sizes and times ───────────────────────────────── */

.chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}

.chips.times { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }

/* All times on a day with more than one sitting: each sitting's under its name. */
.times-group { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
.times-group:first-of-type { margin-top: 0; }

.chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--field);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.15s, border-color 0.15s;
}

a.chip:hover, button.chip:hover { background: var(--field-hover); border-color: rgba(255, 255, 255, 0.28); }
/* The times as buttons, when picking another carries the guest's details along (_Picker). */
button.chip { font: inherit; font-weight: 600; cursor: pointer; width: 100%; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.full { color: var(--muted); font-weight: 500; }
.chip.full small { font-size: 0.68rem; font-weight: 700; color: var(--warn-ink); }
.chip.off { color: var(--faint); text-decoration: line-through; pointer-events: none; background: transparent; }

/* ── The months ───────────────────────────────────────────────────── */

.month-nav-row { display: flex; justify-content: space-between; margin-bottom: -28px; position: relative; z-index: 1; }

.month-title { text-align: center; margin: 6px 0 12px; line-height: 24px; }
.month-title strong { text-transform: capitalize; }
.month-title span { color: var(--faint); font-weight: 500; }

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.calendar .wd { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; color: var(--faint); padding: 4px 0 6px; text-transform: uppercase; }

.calendar .day {
    position: relative;
    aspect-ratio: 1;
    max-width: 44px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.28);
    font-variant-numeric: tabular-nums;
}

.calendar a.day { color: var(--ink); }
.calendar .day.free { font-weight: 700; }
.calendar .day.full { color: var(--muted); }
.calendar .day.full::after {
    content: "";
    position: absolute;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--full-dot);
}
.calendar .day.today { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
/* A special day (BookingSpecialEvent): a small star in the corner. */
.calendar .day.event::before {
    content: "★";
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 0.55rem;
    line-height: 1;
    color: var(--event, #f5c542);
}
.calendar a.day:hover { background: var(--field-hover); }
.calendar .day.on { background: var(--accent); color: var(--accent-ink); }

.legend { display: flex; justify-content: center; gap: 18px; margin-top: 16px; font-size: 0.8rem; color: var(--muted); }
.legend span::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    margin-right: 7px;
    vertical-align: 1px;
}
.legend .l-free::before { background: var(--ink); }
.legend .l-full::before { background: var(--full-dot); }

/* ── Several days at once ─────────────────────────────────────────── */

/* One day or several, on the date step: two links in a pill, the one in use lit. */
.day-mode {
    display: flex;
    width: fit-content;
    margin: -4px auto 18px;
    padding: 4px;
    border-radius: 999px;
    background: var(--field);
    border: 1px solid var(--line);
}
.day-mode a, .day-mode span { padding: 6px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.day-mode a:hover { color: var(--ink); background: var(--field-hover); }
.day-mode .on { background: var(--accent); color: var(--accent-ink); }

/* The days the last can be, once the first is chosen. */
.calendar .day.reach { background: rgba(255, 255, 255, 0.08); }

/* A row a day: its date, then the nearest free time before, the time asked for and the nearest after. A
   table on a computer; on a phone (or a narrow widget) the date above its three times. */
.range-head, .range-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 84px);
    gap: 8px;
    align-items: center;
}
.range-head { padding-bottom: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.range-days { list-style: none; margin: 0 0 16px; padding: 0; }
.range-day { padding: 10px 0; border-top: 1px solid var(--line); }
.range-date { min-width: 0; font-weight: 600; font-size: 0.92rem; }
.range-date .cap { display: block; }
.range-date small { display: block; font-weight: 500; font-size: 0.78rem; color: var(--muted); }
.range-day.closed .range-date { color: var(--muted); }
.range-day .chip { min-height: 44px; }
a.chip.on:hover { background: var(--accent); border-color: var(--accent); filter: brightness(0.92); }
/* No free time that side of it. */
.chip.none { color: var(--faint); background: transparent; border-style: dashed; }
.range-again { margin-top: 18px; }

@media (max-width: 560px) {
    .range-head, .range-day { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .range-head span:first-child { display: none; }
    .range-date { grid-column: 1 / -1; }
}

/* ── Forms ────────────────────────────────────────────────────────── */

label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
label .opt { font-weight: 400; color: var(--muted); }

.field { margin-bottom: 14px; }

input[type=text], input[type=email], input[type=tel], textarea, select {
    width: 100%;
    font: inherit;
    color: var(--ink);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--field);
}

input::placeholder, textarea::placeholder { color: var(--faint); }
select option { color: #14161a; background: #fff; }

input:focus, textarea:focus, select:focus { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 1px; border-color: transparent; }

textarea { min-height: 84px; resize: vertical; }

.hint { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.hint a { color: inherit; }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-button:hover { color: var(--ink); }

/* The restaurant's phone and email (a popover, from "Kontakta restaurangen"): a card in the middle, the page dimmed. */
.contact-dialog {
    width: min(400px, calc(100vw - 32px));
    padding: 28px 24px 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #1c1e22;
    color: var(--ink);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.contact-dialog::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); }
.contact-dialog h3 { margin: 0 0 8px; font-size: 1.25rem; letter-spacing: -0.01em; }
.contact-dialog .muted { margin: 0 0 18px; font-size: 0.92rem; }
.contact-ways { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.contact-ways li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); }
.contact-ways small { display: block; color: var(--muted); font-size: 0.78rem; margin-bottom: 2px; }
.contact-ways a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.contact-dialog .button { width: 100%; }

/* The details step: what is being booked, above the form. */
.summary-card {
    margin: 0 0 26px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--field);
    border: 1px solid var(--line);
}
.summary-name { display: block; font-size: 1.1rem; margin-bottom: 10px; }
.summary-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.summary-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; }
.summary-card li > span { display: block; min-width: 0; overflow-wrap: anywhere; }
.summary-card small { display: block; color: var(--muted); font-size: 0.82rem; }
.summary-card svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.cap::first-letter { text-transform: uppercase; }

/* The occasion (one) and the diets (any) as chips: the radio or checkbox is there, only not seen. */
.option-chips { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.option-chips legend { padding: 0; font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; }
.option-list { display: flex; flex-wrap: wrap; gap: 8px; }
.option-chip { position: relative; display: inline-flex; margin: 0; font-weight: 500; cursor: pointer; }
.option-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.option-chip span {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--field);
    font-size: 0.88rem;
    transition: background 0.15s, border-color 0.15s;
}
.option-chip:hover span { background: var(--field-hover); }
.option-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.option-chip input:focus-visible + span { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .row { grid-template-columns: 1fr; } }

.button {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 14px 20px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s;
}

.button:hover { filter: brightness(0.92); }
.button.secondary { background: var(--field); color: var(--ink); border: 1px solid var(--line); }
.button.secondary:hover { background: var(--field-hover); filter: none; }
.button.danger { background: #d64545; color: #fff; }
.button + .button, .actions .button + .button { margin-top: 10px; }

.cf-turnstile { margin: 6px 0 14px; min-height: 65px; }

/* ── Messages and the booking ─────────────────────────────────────── */

/* What is special on the chosen day, above its times. */
.event-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--field);
    border: 1px solid var(--line);
}
.event-note img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.event-note strong { display: block; }
.event-note small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.event-note p { margin: 6px 0 0; font-size: 0.9rem; }
.sitting-event { display: block; margin-top: 6px; font-size: 0.82rem; font-weight: 600; color: var(--event, #f5c542); }
.legend .l-event::before { content: "★"; width: auto; height: auto; background: none; color: var(--event, #f5c542); font-size: 0.7rem; }

.notice {
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--field);
    border: 1px solid var(--line);
}

.notice.ok { background: var(--ok); color: var(--ok-ink); border-color: transparent; }
.notice.warn { background: var(--warn); color: var(--warn-ink); border-color: transparent; }
.notice.error { background: var(--error); color: var(--error-ink); border-color: transparent; }
.notice strong { display: block; margin-bottom: 2px; }

.policy {
    border-left: 2px solid var(--line);
    padding: 4px 0 4px 12px;
    color: var(--muted);
    font-size: 0.9rem;
    margin: 4px 0 18px;
    white-space: pre-line;
}

.facts { width: 100%; border-collapse: collapse; margin: 4px 0 20px; }
.facts th, .facts td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { color: var(--muted); font-weight: 500; width: 40%; padding-right: 12px; }
.facts td { font-weight: 600; overflow-wrap: anywhere; }
.facts .sub { display: block; color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.facts .ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; }

.big-when { font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; text-align: center; }
.big-when::first-letter { text-transform: uppercase; }
.big-when + .muted { text-align: center; }

.contact { margin-top: 22px; font-size: 0.85rem; color: var(--muted); text-align: center; }
.contact a { color: inherit; }

/* Adding the booking to the guest's phone wallet (Manage). */
.wallet { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 20px; }
.wallet a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.wallet a:hover { border-color: rgba(255, 255, 255, 0.5); }

/* ── Paying when booking: a deposit or a card guarantee ───────────── */

.hint.center, .lead { text-align: center; }
.lead { color: var(--muted); margin: 0 0 16px; }

/* Under the party sizes, and on the waitlist form: what applies. */
.pay-hint {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--muted);
    margin: 10px 0 0;
}
.pay-hint::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--muted);
    transform: translateY(-1px);
}

/* The details step: what the guest pays, or guarantees, for their party. */
.pay-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 6px 0 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--field);
    border: 1px solid var(--line);
}
.pay-box strong { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.45; }
.pay-box p { margin: 4px 0 0; font-size: 0.86rem; color: var(--muted); }

.pay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
}
.pay-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 16px;
    font-weight: 500;
    font-size: 0.88rem;
    line-height: 1.5;
    cursor: pointer;
}
.consent input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* A line in a notice about the money ("Förskott 400 kr betalt."). */
.paid-line { display: block; margin-top: 6px; font-weight: 600; }

/* Waiting for Stripe. */
.waiting { text-align: center; margin-bottom: 22px; }
.waiting .button { margin-top: 14px; }

.waiting-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 18px 0 4px;
    color: var(--muted);
    font-size: 0.9rem;
}
.waiting-line a { color: var(--ink); font-weight: 600; }

.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--ink);
    animation: spin 0.9s linear infinite;
}
.spinner.small { width: 16px; height: 16px; margin: 0; border-width: 2px; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

form + form .button.secondary, .waiting-line + form, .hint.center + form { margin-top: 14px; }