/* ===========================================================================
   Shared components: table plan, table picker panel, reservation forms and the
   language switch.
   ---------------------------------------------------------------------------
   Shared by the website (reservation form) and the administration - both have a
   dark background and the same palette, so one file is enough. The colours come
   from the variables in site.css (--brass, --surface, --border-strong, ...), so
   these components keep matching the rest of the site even if the palette is
   ever changed.
   =========================================================================== */

.plan {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.plan-column {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* The second column starts lower and the third one (bowling) lower still - just
   like on the floor plan of the venue. On narrow screens the offset is dropped
   (see the media query below). */
.plan-column:nth-child(2) { margin-top: 1.6rem; }
.plan-column-bowling { margin-top: 8rem; }

.plan-stack {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.plan-row {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.plan-label {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: .2rem;
}

.plan-table {
    position: relative;
    width: 112px;
    /* A fixed height so that a big table can be exactly as tall as two small ones with
       the gap between them. Compact on purpose: the whole plan (8 tables on the left)
       has to fit on a laptop screen without scrolling the panel. */
    height: var(--plan-table-height, 46px);
    padding: .3rem .6rem;
    /* Number on the left, seats and free/taken as two small lines next to it. */
    display: grid;
    grid-template-columns: auto auto;
    align-content: center;
    justify-content: center;
    align-items: center;
    column-gap: .55rem;
    row-gap: .1rem;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    color: var(--foreground);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s, opacity .2s;
}

.plan-table-number {
    grid-row: 1 / span 2;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1;
    min-width: 1.3em;
    text-align: center;
}

.plan-table-seats {
    grid-column: 2;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--muted-foreground);
}

.plan-table[aria-pressed="true"] .plan-table-seats { color: var(--primary-foreground); }

/* A table for 8 guests is drawn as tall as two small tables with the gap between them,
   so the right-hand column lines up with the left one like in the venue. */
.plan-table-large { height: calc(2 * var(--plan-table-height, 46px) + .5rem); }

.plan-table-status {
    grid-column: 2;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted-foreground);
    min-height: 11px;
}

/* A table without a seat count (bowling): the status sits level with the number. */
.plan-table:not(:has(.plan-table-seats)) .plan-table-status { grid-row: 1 / span 2; }

/* A free table - it can be clicked */
.plan-table:hover:not(:disabled) {
    border-color: var(--brass);
    background: var(--surface-2);
}

/* A selected table */
.plan-table[aria-pressed="true"] {
    border-color: var(--brass);
    background: var(--brass);
    color: var(--primary-foreground);
}

.plan-table[aria-pressed="true"] .plan-table-status { color: var(--primary-foreground); }

/* A selected table stays brass under the mouse too (the hover rule above is more specific). */
.plan-table[aria-pressed="true"]:hover:not(:disabled) {
    border-color: var(--brass);
    background: color-mix(in oklab, var(--brass) 88%, var(--foreground));
}

/* A table that is already taken - it cannot be selected */
.plan-table.is-taken,
.plan-table:disabled {
    cursor: not-allowed;
    opacity: .45;
    border-style: dashed;
}

.plan-table.is-taken:hover {
    border-color: var(--border-strong);
    background: var(--surface);
}

/* A table that does not belong to the chosen type of reservation (dining vs. bowling) */
.plan-table.is-wrong-type {
    opacity: .22;
    cursor: not-allowed;
    border-style: dotted;
}

/* ── The table picker panel (inside the page, not a pop-up window) ───────── */
.picker-panel {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in oklab, var(--background) 80%, transparent);
    backdrop-filter: blur(6px);
}

.picker-panel[hidden] { display: none; }

.picker-panel-content {
    position: relative;
    width: min(760px, 100%);
    /* As tall as the window allows; the plan is sized to fit, so the panel scrolls
       only on really small screens. */
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    padding: 1.4rem 1.75rem;
}

.picker-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.picker-panel-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0;
}

.picker-panel-subtitle {
    margin-top: .3rem;
    font-size: 13px;
    color: var(--muted-foreground);
}

.picker-panel-close {
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--foreground);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    padding: .4rem .7rem;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.picker-panel-close:hover { border-color: var(--brass); color: var(--brass); }

.picker-panel-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.picker-panel-summary {
    font-size: 13px;
    color: var(--muted-foreground);
}

.picker-panel-message {
    margin-bottom: 1rem;
    border: 1px solid #e08b80;
    color: #e08b80;
    padding: .75rem 1rem;
    font-size: 13px;
}

.picker-panel-message[hidden] { display: none; }

.picker-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 11px;
    color: var(--muted-foreground);
}

.picker-legend span { display: inline-flex; align-items: center; gap: .4rem; }

.picker-legend i {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    display: inline-block;
}

.picker-legend i.is-selected { border-color: var(--brass); background: var(--brass); }
.picker-legend i.is-taken { border-style: dashed; opacity: .45; }

/* ── The selected tables shown in the form ──────────────────────────────── */
.selected-tables {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-height: 1.5rem;
}

.selected-tables-chip {
    border: 1px solid var(--brass);
    color: var(--brass);
    padding: .25rem .6rem;
    font-size: 12px;
}

.selected-tables-empty {
    font-size: 13px;
    color: var(--muted-foreground);
}

@media (max-width: 640px) {
    .plan { gap: 1rem; }
    .plan-column:nth-child(2),
    .plan-column-bowling { margin-top: 0; }
    .plan-table { width: 100px; padding: .3rem .45rem; column-gap: .45rem; }
    .picker-panel-content { padding: 1.25rem; }
}

/* Low windows (a small laptop, a browser with toolbars): smaller tables and no subtitle,
   so the whole plan still fits without scrolling the panel. */
@media (min-width: 641px) and (max-height: 720px) {
    .plan-table { --plan-table-height: 40px; }
    .picker-panel-subtitle { display: none; }
    .picker-panel-content { padding-block: 1.1rem; }
}

/* ── Choosing the type of reservation (website and administration) ───────── */
.res-type { display: flex; flex-wrap: wrap; gap: .75rem; }

.res-type-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid var(--border-strong);
    padding: .7rem 1rem;
    cursor: pointer;
    font-size: 14px;
    transition: border-color .2s;
}

.res-type-option:hover { border-color: var(--brass); }
.res-type-option em { display: block; font-style: normal; font-size: 11px; color: var(--muted-foreground); }
.res-type-option:has(input:checked) { border-color: var(--brass); }


/* ── Buttons inside the panel ────────────────────────────────────────────
   Classes of their own on purpose: the panel is used on the public website
   too, where admin.css (and with it .ed-btn / .admin-btn) is never loaded. */
.plan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--foreground);
    font-family: inherit;
    padding: .7rem 1.4rem;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s, color .2s, background-color .2s, opacity .2s;
}

.plan-btn:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); }

.plan-btn-primary {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--primary-foreground);
}

.plan-btn-primary:hover:not(:disabled) {
    background: color-mix(in oklab, var(--brass) 90%, transparent);
    color: var(--primary-foreground);
    border-color: var(--brass);
}

.plan-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Tick boxes in the brass colour instead of the browser default blue. */
.res-type-option input[type="radio"],
.res-table input[type="checkbox"],
.venue-day input[type="checkbox"] {
    accent-color: var(--brass);
    width: 16px;
    height: 16px;
}

/* ── The two forms in the Reservations section share one frame height ─────
   The enquiry form has fewer fields, so it would end up shorter. Instead of a
   fixed height (which would fall apart at another window width or after the
   texts are edited), the difference is swallowed by the message field - the
   only one that grows. This applies only where the forms sit side by side;
   below 1024 px they are stacked and each keeps its own height. */
@media (min-width: 1024px) {
    /* Both columns share the same two rows of the outer grid (heading, form).
       Because of that the frames start and end at the same height even when the
       paragraph above one of the forms is longer and wraps onto more lines. */
    .form-columns {
        grid-template-rows: auto 1fr;
    }

    .form-column {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }

    /* The enquiry form: chips, fields, message, footer - the message is the one that grows. */
    .form-box:has(.form-message) {
        grid-template-rows: auto auto 1fr auto;
    }

    .form-message {
        grid-template-rows: auto 1fr;
    }

    .form-message textarea {
        height: 100%;
        min-height: 8rem;
    }
}

/* Dragging the textarea bigger with the mouse is off, so the form frame cannot fall apart. */
.form-box textarea {
    resize: none;
}

/* ── Language switch (website header and administration header) ───────────
   A quiet two item pill: the same uppercase 11px lettering as the rest of the
   header, muted by default, brass for the language that is currently on, with
   a hairline between the two. It sits in a flex header, so it must never be
   squeezed or wrap - hence the fixed shrink and the tighter padding on very
   narrow phones. */
.lang-switch {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    background: color-mix(in oklab, var(--surface) 55%, transparent);
}

.lang-switch-item {
    display: inline-flex;
    align-items: center;
    padding: .4rem .6rem .4rem .68rem;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s, background-color .2s, border-color .2s;
}

.lang-switch-item + .lang-switch-item {
    border-left: 1px solid var(--border-strong);
}

.lang-switch-item:hover {
    color: var(--foreground);
    background: color-mix(in oklab, var(--surface-2) 70%, transparent);
}

.lang-switch-item.is-active {
    color: var(--brass);
}

.lang-switch-item.is-active:hover {
    color: var(--brass);
    background: transparent;
}

@media (max-width: 380px) {
    .lang-switch-item {
        padding: .35rem .4rem .35rem .48rem;
        letter-spacing: .12em;
    }
}

/* ---------------------------------------------------------------------------
   Utility classes the markup uses but the generated Tailwind build in site.css
   does not contain. site.css comes from the original design and is never edited
   (nor regenerated), so the few missing ones live here instead. Both the website
   and the administration load this file.
   --------------------------------------------------------------------------- */

.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2rem; }
.gap-5 { gap: 1.25rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-\[62ch\] { max-width: 62ch; }
.max-w-\[70ch\] { max-width: 70ch; }
.bottom-4 { bottom: 1rem; }
.inset-x-4 { left: 1rem; right: 1rem; }
.min-h-\[calc\(100vh-13rem\)\] { min-height: calc(100vh - 13rem); }
.whitespace-pre-line { white-space: pre-line; }
/* The page titles of the whole administration (and of the error page) use text-3xl,
   which the build never contained - they silently fell back to the body size. The
   token itself is in site.css (md:text-3xl uses it), so this matches Tailwind exactly. */
.text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); }
/* Found by the class audit of the final revision - used in the markup, missing from the
   build: the "open in Google Maps" label over the map (bg-surface/90, backdrop-blur),
   the links in admin notices (underline), the Book button (sm:px-6), the map frame and
   the reset helpers. Values as Tailwind v4 would generate them. */
.underline { text-decoration-line: underline; }
.bg-surface\/90 { background-color: color-mix(in oklab, var(--surface) 90%, transparent); }
.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.m-0 { margin: 0; }
.border-0 { border-width: 0; }
@media (min-width: 40rem) {
    .sm\:px-6 { padding-inline: 1.5rem; }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Starts a new row in the first column - used in the enquiry form so that the name
       and the phone sit next to each other even though the field above them is alone. */
    .md\:col-start-1 { grid-column-start: 1; }
}

@media (min-width: 1024px) {
    .lg\:gap-12 { gap: 3rem; }
}

/* The header holds six navigation items, the language switch and the booking button.
   Between 1024px (where the desktop navigation appears) and roughly 1180px that is tight
   for the Czech labels, which are the longer ones - so the spacing tightens a little
   instead of the header being squeezed. */
@media (min-width: 1024px) and (max-width: 1200px) {
    .site-header-inner { gap: 1rem; }
    .site-nav { gap: .9rem; }
    .site-nav a { letter-spacing: .11em; }
}

/* ---------------------------------------------------------------------------
   Bottom of the two forms in the Reservations section.

   The button sits on its own line and the sentence under it has a fixed slot, so
   both forms end the same way and their buttons line up (the boxes themselves are
   already the same height - see the subgrid rule above). When the form is sent,
   the status message takes the place of that sentence instead of being added next
   to it, so nothing below moves and the box does not change height.
   --------------------------------------------------------------------------- */

.form-actions {
    display: grid;
    gap: .9rem;
    justify-items: start;
}

.form-actions-note {
    min-height: 2.9em;
    max-width: 46ch;
}

.form-actions-note p {
    margin: 0;
}

/* While a status is showing, the standing sentence steps aside. */
.form-actions-note:has(.form-status:not([hidden])) .form-note {
    display: none;
}

/* ---------------------------------------------------------------------------
   Satisfaction survey (Pages/Survey.cshtml, layout _SurveyLayout.cshtml)

   One narrow column, built for a phone held in one hand at the table: the stars
   first and big enough for a thumb, the name, the visit, the optional contact and
   the comment. The fields reuse the classes of the website forms; only what the
   survey has on its own is here. The materials (foil on the title, the glow of
   the stars) are in the theme, section 18.
   --------------------------------------------------------------------------- */

.survey-header { border-bottom: 1px solid var(--border); }

.survey-header-inner {
    margin-inline: auto;
    width: min(720px, 100% - 40px);
    height: 4.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.survey { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }

/* The heading sits on the dining room photo, faded well back - a hint of the place,
   not a picture to look at. */
.survey-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
}

.survey-hero-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
    opacity: .55;
}

.survey-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, var(--background) 0%, color-mix(in oklab, var(--background) 45%, transparent) 70%, color-mix(in oklab, var(--background) 20%, transparent) 100%),
        linear-gradient(180deg, color-mix(in oklab, var(--background) 30%, transparent) 0%, color-mix(in oklab, var(--background) 55%, transparent) 60%, var(--background) 100%);
}

.survey-hero-copy,
.survey-body {
    margin-inline: auto;
    width: min(720px, 100% - 40px);
}

.survey-title {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem);
    line-height: 1.04;
    text-wrap: balance;
}

.survey-lead {
    margin-top: .9rem;
    max-width: 40ch;
    color: var(--muted-foreground);
    line-height: 1.6;
}

.survey-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted-foreground);
}

.survey-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-foreground);
}

/* The name is the one required field besides the stars, so it is the one that stands out. */
.survey-form .survey-name {
    padding-block: 1rem;
    font-size: 1.15rem;
}

/* Native date and hour pickers open in the dark, like the page. */
.survey-form input[type="date"],
.survey-form select {
    color-scheme: dark;
}

/* iOS Safari gives the native date and time fields an intrinsic width of their own that
   ignores width: 100%, so on a narrow phone the field sticks out of the form on the right
   (survey, enquiry form on the home page). Without the native appearance the field obeys
   the width like any other; min-height keeps an empty one from collapsing, which iOS
   does otherwise. The grid items around it must be allowed to shrink too (min-width). */
.form-box label { min-width: 0; }

.form-box input:is([type="date"], [type="time"]) {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    min-height: 3.05rem;
    text-align: left;
    /* The calendar and clock icons and the native pickers in the dark, like the page. */
    color-scheme: dark;
}

.form-box input:is([type="date"], [type="time"])::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
}

.survey-errors {
    border: 1px solid color-mix(in oklab, var(--destructive) 60%, transparent);
    background: color-mix(in oklab, var(--destructive) 12%, transparent);
    padding: .9rem 1.1rem;
    font-size: 14px;
}

/* A message right under the field it is about (server or survey.js). */
.survey-error {
    display: block;
    margin: .55rem 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: color-mix(in oklab, var(--destructive) 55%, var(--foreground));
}

.survey-error[hidden] { display: none; }

.survey-form [aria-invalid="true"] {
    border-color: color-mix(in oklab, var(--destructive) 75%, transparent);
}

/* No star chosen: the empty outlines turn the same colour as the message. */
.survey-rating:has(.survey-error:not([hidden])) .rating-star svg {
    stroke: color-mix(in oklab, var(--destructive) 75%, transparent);
}

.survey-actions {
    display: grid;
    gap: .9rem;
    justify-items: start;
}

.survey-thanks-title {
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1.1;
}

/* ── The stars ───────────────────────────────────────────────────────────
   Five radio buttons in the natural order 1-5 (keyboard and screen readers work
   as with any radio group). The radios themselves are invisible; their labels
   are the stars. "Light up to the chosen star" is done with :has():
     - a checked radio lights its star and every star before it,
     - on devices with a mouse, hovering previews the same thing and takes
       precedence over the choice until the pointer leaves.
   The checked rules are wrapped in :where() so they stay weaker than the hover
   rules - otherwise hovering a lower star could not dim the ones above it. */
.survey-rating {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.survey-rating legend {
    padding: 0;
    margin-bottom: .9rem;
}

.rating {
    display: flex;
    gap: clamp(.35rem, 1.6vw, .8rem);
}

.rating-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rating-star {
    display: inline-flex;
    width: clamp(2.9rem, 12vw, 3.5rem);
    height: clamp(2.9rem, 12vw, 3.5rem);
    cursor: pointer;
}

.rating-star svg {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: var(--border-strong);
    stroke-width: 1.1;
    stroke-linejoin: round;
    transition: fill .16s, stroke .16s, filter .3s, transform .16s;
}

.rating:has(:where(.rating-input[value="1"]:checked)) :where(.rating-star:nth-of-type(-n+1)) svg,
.rating:has(:where(.rating-input[value="2"]:checked)) :where(.rating-star:nth-of-type(-n+2)) svg,
.rating:has(:where(.rating-input[value="3"]:checked)) :where(.rating-star:nth-of-type(-n+3)) svg,
.rating:has(:where(.rating-input[value="4"]:checked)) :where(.rating-star:nth-of-type(-n+4)) svg,
.rating:has(:where(.rating-input[value="5"]:checked)) :where(.rating-star:nth-of-type(-n+5)) svg {
    fill: var(--brass);
    stroke: var(--brass);
    filter: var(--star-glow, none);
}

@media (hover: hover) and (pointer: fine) {
    .rating:has(.rating-star:hover) .rating-star svg {
        fill: transparent;
        stroke: var(--border-strong);
        filter: none;
    }

    .rating:has(.rating-star:nth-of-type(1):hover) .rating-star:nth-of-type(-n+1) svg,
    .rating:has(.rating-star:nth-of-type(2):hover) .rating-star:nth-of-type(-n+2) svg,
    .rating:has(.rating-star:nth-of-type(3):hover) .rating-star:nth-of-type(-n+3) svg,
    .rating:has(.rating-star:nth-of-type(4):hover) .rating-star:nth-of-type(-n+4) svg,
    .rating:has(.rating-star:nth-of-type(5):hover) .rating-star:nth-of-type(-n+5) svg {
        fill: color-mix(in oklab, var(--brass) 70%, transparent);
        stroke: var(--brass);
    }
}

/* The radios are invisible, so keyboard focus is drawn on the star instead. */
.rating-input:focus-visible + .rating-star {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
}

/* One word under the stars says what the choice means; before a choice, a hint. */
.rating-caption {
    margin: .7rem 0 0;
    min-height: 1.5em;
    font-size: 13px;
    color: var(--muted-foreground);
}

.rating-caption span { display: none; }
.rating-caption [data-for="0"] { display: inline; }

.survey-rating:has(:where(.rating-input:checked)) .rating-caption [data-for="0"] { display: none; }

.survey-rating:has(:where(.rating-input[value="1"]:checked)) .rating-caption [data-for="1"],
.survey-rating:has(:where(.rating-input[value="2"]:checked)) .rating-caption [data-for="2"],
.survey-rating:has(:where(.rating-input[value="3"]:checked)) .rating-caption [data-for="3"],
.survey-rating:has(:where(.rating-input[value="4"]:checked)) .rating-caption [data-for="4"],
.survey-rating:has(:where(.rating-input[value="5"]:checked)) .rating-caption [data-for="5"] {
    display: inline;
    color: var(--brass);
}

/* ── Footer: the author's credit ─────────────────────────────────────────
   A line of its own under the footer, centred and quieter than the footer
   itself - there, but not competing with the venue. */
.footer-credit {
    width: min(1180px, 100% - 40px);
    margin: 2rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--muted-foreground) 72%, transparent);
}

.footer-credit a {
    color: var(--muted-foreground);
    letter-spacing: .08em;
    text-transform: none;
    transition: color .2s;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
    color: var(--brass);
}

/* ── Cookie notice (Pages/Shared/_CookieNotice.cshtml) ───────────────────
   A small card in the bottom left corner: it covers nothing important, blocks
   nothing and goes away for good after "Got it". It slides in a moment after
   the page, so the first look belongs to the page. Only the position moves -
   the card is never invisible, whatever the browser does with the animation. */
.cookie-notice {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 40;
    display: grid;
    gap: .75rem;
    width: min(22rem, calc(100% - 2rem));
    padding: .9rem 1rem;
    border: 1px solid var(--border-strong);
    background: color-mix(in oklab, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px -20px rgb(0 0 0 / .8);
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-foreground);
    animation: cookie-notice-in .5s ease-out .8s both;
}

.cookie-notice[hidden] { display: none; }

.cookie-notice-text { margin: 0; }

/* "Which cookies" on the left, "Got it" on the right - one row, so the card stays low. */
.cookie-notice-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-notice-details { padding-top: .45rem; }

.cookie-notice-details summary {
    width: fit-content;
    cursor: pointer;
    font-size: 12px;
    color: var(--foreground);
}

.cookie-notice-details summary:hover { color: var(--brass); }

.cookie-notice-details ul {
    display: grid;
    gap: .35rem;
    margin: .5rem 0 0;
    padding-left: 1rem;
    list-style: disc;
}

.cookie-notice-details strong {
    font-weight: 500;
    color: var(--foreground);
}

.cookie-notice-ok {
    flex-shrink: 0;
    padding: .55rem 1.1rem;
    border: 0;
    background: var(--brass);
    color: var(--primary-foreground);
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s;
}

.cookie-notice-ok:hover { background: color-mix(in oklab, var(--brass) 88%, white); }

.cookie-notice-ok:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
}

@keyframes cookie-notice-in {
    from { transform: translateY(1.25rem); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-notice { animation: none; }
}

/* ── Contact: the coming exceptions under the opening hours ───────────────
   The same rows as the hours table above them, the state in brass so a
   closed day or Christmas hours catch the eye, the guest text under it. */
.venue-exceptions { margin-top: 1.75rem; }

.venue-exception-state {
    color: var(--brass);
    text-align: right;
    white-space: nowrap;
}

.venue-exception-text {
    margin: .3rem 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted-foreground);
}