/* Page shell: header, navigation, progress, containers, footer, embedded mode. */

/* DEV only: a thin line at the very top of the page. It scrolls away with the page (fixed it lay over the content, and
   Safari took its green for the colour of its bars). */
.environment-bar {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: #00ffa9;
    z-index: 10000;
    pointer-events: none;
}

/* ---- loader ------------------------------------------------------------------------------------------------------ */
/* Visible from the very first paint (the original loading circle: 60 px ring, dark segment) while the page is loading
   (html.is-loading): until the page script has its first content, or a load error is shown. */
#loader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: color-mix(in srgb, var(--bg-page) 70%, transparent);
    align-items: center;
    justify-content: center;
}

#loader::after,
#inline-loader {
    content: "";
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 6px solid var(--loader-ring);
    border-top-color: var(--loader-head);
    animation: spin 1s linear infinite;
}

html.is-loading #loader {
    display: flex;
}

#inline-loader {
    margin: var(--s-6) auto var(--s-5);
}

/* Page change in place (js/core/page-swap.js): the current page stays where it is, locked and slightly faded; the spinner only
   appears when the next page takes a moment. The next page is laid out invisibly until its script shows it. */
html.is-navigating #wrapper:not(.is-incoming) {
    pointer-events: none;
}

html.is-navigating #wrapper:not(.is-incoming) #main {
    opacity: .55;
    transition: opacity .2s ease .12s;
}

html.is-navigating #loader {
    display: flex;
    background: transparent;
    pointer-events: none;
    animation: loader-in .2s ease .4s both;
}

#wrapper.is-incoming {
    position: absolute;
    inset: 0 0 auto 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes loader-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html.is-navigating #wrapper:not(.is-incoming) #main {
        transition: none;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.blur {
    pointer-events: none;
    opacity: .6;
}

/* ---- app column ---------------------------------------------------------------------------------------------------- */
/* The page frame is hidden while the page loads (no flash of untranslated texts), see html.is-loading. */
html.is-loading #wrapper,
html.is-loading #footer {
    visibility: hidden;
}

#wrapper {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-4) var(--s-4) var(--s-7);
}

#wrapper.with-topbar {
    margin-top: 0;
}

html.is-widget #wrapper {
    padding-top: var(--s-2);
    padding-bottom: var(--s-4);
}

.topbar {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4);
    padding: 0 var(--s-4);
    background: var(--op-accent) var(--op-gradient);
    color: var(--op-on-accent);
    font-weight: 650;
    font-size: var(--fs-lg);
    letter-spacing: .005em;
    box-shadow: 0 6px 18px -10px var(--op-glow);
}

#location {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the signed-in customer: user icon and e-mail address, small, at the right (components/account.js) */
.account {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    min-width: 0;
    max-width: 55%;
    margin-left: auto;
    padding-left: var(--s-3);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0;
}

.account__icon {
    flex: none;
}

.account__mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* sign out: a quiet icon beside the address, in its colour; a round field on hover */
.account__logout {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: var(--s-1);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .85;
}

.account__logout:hover {
    background: color-mix(in srgb, currentColor 16%, transparent);
    opacity: 1;
}

/* without header bar and menu (a closed event link in a widget): the signed-in customer in a row of its own */
.account-strip {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--s-3);
    color: var(--ink-muted);
}

#navigation .account {
    order: 2;
    max-width: 40%;
    color: var(--ink-muted);
}

/* ---- navigation: one line, the entries with their icons, what does not fit in "Mehr" (js/components/nav-overflow.js),
   the language with its globe always on the right ---------------------------------------------------------------------- */
#navigation {
    position: relative; /* "Mehr" opens below its button at the right edge, outside the clipped line */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

#navigation .nav__list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    overflow: hidden;
}

/* a box of its own, no line of text: the pill sits in the middle of the line, level with the language */
#navigation .nav__list > li {
    display: flex;
    flex: none;
}

#navigation li a,
#navigation .nav__moreButton {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--s-4);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    border-radius: var(--r-pill);
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

#navigation .nav__moreButton {
    border-radius: var(--r-pill);
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}

#navigation li a svg,
#navigation .nav__moreButton svg {
    flex: none;
    opacity: .85;
}

#navigation li a:hover,
#navigation .nav__moreButton:hover,
#navigation .nav__moreButton[aria-expanded="true"] {
    border-color: var(--op-accent);
}

/* "Mehr": the entries that did not fit, right below its button - placed by js/components/nav-overflow.js against the
   navigation (the list itself clips, so the pool hangs on the navigation) */
#navigation .nav__more {
    position: static;
}

#navigation .nav__pool {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 12rem;
    margin-top: var(--s-2);
    padding: var(--s-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md, 12px);
    background: var(--bg-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

#navigation .nav__pool[hidden] {
    display: none;
}

/* narrow (js/components/nav-overflow.js): "Mehr" only its dots, narrower still the entry of the page only its icon - the
   words stay for screen readers */
#navigation.is-compact .nav__moreButton .nav__label,
#navigation.is-icons .nav__list > li:not(.nav__more) > a .nav__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#navigation.is-compact .nav__moreButton,
#navigation.is-icons .nav__list > li:not(.nav__more) > a {
    padding: 0 var(--s-3);
}

#navigation .nav__pool li a {
    width: 100%;
    box-sizing: border-box;
    border-color: transparent;
    border-radius: var(--r-sm, 8px);
}

#navigation .nav__lang {
    position: relative;
    display: inline-flex;
    flex: none;
    align-self: center;
    align-items: center;
    color: var(--ink-muted);
}

/* the globe in the middle of the field, before the language */
#navigation .nav__lang svg {
    position: absolute;
    top: 50%;
    left: var(--s-3);
    transform: translateY(-50%);
    pointer-events: none;
}

#navigation .nav__lang:has(select[hidden]) {
    display: none;
}

#navigation .nav__lang #languageSwitcher {
    margin: 0;
    padding-left: calc(var(--s-3) + 22px);
}

#navigation li a.active {
    background: var(--op-accent) var(--op-gradient);
    border-color: var(--op-accent);
    color: var(--op-on-accent);
}

#languageSwitcher {
    min-height: var(--control-h-sm);
    padding: 0 var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-card);
    color: var(--ink);
    font-size: var(--fs-sm);
    max-width: 9rem;
}

#description {
    display: none;
}

/* ---- progress indicator ------------------------------------------------------------------------------------------------ */
.progress {
    display: flex;
    gap: var(--s-2);
    margin: 0 0 var(--s-4);
    counter-reset: step;
}

.progress__step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    position: relative;
}

.progress__step::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: calc(-50% + 1.25rem);
    right: calc(50% + 1.25rem);
    height: 2px;
    background: var(--line);
}

.progress__step:first-child::before {
    display: none;
}

.progress__step.is-done::before,
.progress__step.is-current::before {
    background: var(--op-accent);
}

.progress__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    background: var(--bg-card);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

.progress__step.is-current .progress__dot {
    background: var(--op-accent) var(--op-gradient);
    border-color: var(--op-accent);
    color: var(--op-on-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--op-accent) 16%, transparent);
}

.progress__step.is-done .progress__dot {
    border-color: var(--op-accent);
    color: var(--op-accent-ink);
}

.progress__step.is-current .progress__label {
    color: var(--ink);
    font-weight: 650;
}

/* ---- containers ------------------------------------------------------------------------------------------------------------ */
/* the content area takes the focus after a page change and from the skip link, so screen readers start there; it is no
   control: no focus ring (WCAG 2.4.7 asks it for controls - the next Tab reaches the first one, which shows it) */
#main,
#main:focus-visible {
    outline: none;
    box-shadow: none;
}

.container {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin: 0 0 var(--s-5);
}

/* a page in cards of its own on the page background (route setting "bare", the success page): no card around them */
.container.is-bare {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.container.is-bare .content {
    padding: 0;
}

/* a note below the card, on the page background (route setting "below"): close to the card it belongs to */
.below-page {
    margin: calc(var(--s-3) * -1) 0 var(--s-5);
}

/* Head of a booking step: the title ("Your booking") on the accent gradient, the countdown of the reservation as a pill.
   A container: the pill drops its text when the head itself is narrow (also beside a column, not only on a phone). */
.page-head {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
    background: var(--op-accent) var(--op-gradient);
    color: var(--op-on-accent);
}

.page-head .banner {
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: .005em;
}

.container .banner:empty {
    display: none;
}

/* The hold timer bar ("please complete your reservation" + countdown) is only shown while a reservation is open: the
   timer adds .is-running when it starts and removes it when it ends (js/core/timer.js). */
.container .status {
    display: none;
}

.container .status.is-running {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
    background: var(--warning-bg);
    border-bottom: 1px solid var(--warning-line);
    color: var(--warning);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* the last two minutes (js/core/timer.js ENDING_SECONDS): the countdown stands out in red and pulses softly (not with reduced
   motion, see base.css) */
.container .status.is-ending {
    border-color: var(--danger-line);
    background: var(--danger-bg);
    color: var(--danger);
}

.status.is-ending #Counter {
    background: var(--danger-strong);
    color: #ffffff;
    animation: counter-ending 1s ease-in-out infinite;
}

@keyframes counter-ending {
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-strong) 35%, transparent); }
}

/* in the head of a step: a light pill with the clock and the countdown; the request to finish stays for screen readers */
.page-head .status.is-running.is-ending {
    border-color: color-mix(in srgb, var(--op-on-accent) 45%, transparent);
    background: color-mix(in srgb, var(--op-on-accent) 22%, transparent);
    color: inherit;
}

.page-head .status.is-running {
    gap: var(--s-2);
    padding: .3rem .3rem .3rem .8rem;
    border: 1px solid color-mix(in srgb, var(--op-on-accent) 22%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--op-on-accent) 12%, transparent);
    color: inherit;
}

.page-head .status__text {
    font-size: var(--fs-xs);
    font-weight: 600;
    opacity: .92;
}

.page-head .counter,
.page-head #Counter {
    min-width: 4rem;
    padding: .2rem var(--s-3);
    background: var(--bg-card);
    color: var(--ink);
    font-weight: 700;
}

.page-head .status.is-ending #Counter {
    background: var(--danger-strong);
    color: #ffffff;
}

@media (max-width: 30rem) {
    .page-head {
        padding: var(--s-3) var(--s-4);
    }

    .page-head .status__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* without the text only the countdown: the same space on every side */
    .page-head .status.is-running {
        padding: .3rem;
    }
}

/* a narrow head (the narrow page, the narrow layout): only the countdown beside the title, as on a phone - the request to
   finish stays for screen readers */
@container (max-width: 36rem) {
    .page-head .status__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .page-head .status.is-running {
        padding: .3rem;
    }
}

.container .status:empty {
    display: none;
}

/* The search page only shows the hold timer while a further booking is being added (multibooking). */

.counter,
#Counter,
#CounterSearch {
    flex: none;
    min-width: 4.25rem;
    padding: .15rem var(--s-3);
    border-radius: 8px;
    background: var(--warning);
    color: var(--bg-card);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    letter-spacing: .05em;
}

.top-content {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border-bottom: 1px solid var(--line);
    background: var(--bg-subtle);
}

.top-content #logo {
    flex: none;
}

#logo-img {
    display: block;
    max-height: 3.5rem;
    max-width: 10rem;
}

/* the notice of the operator ("Hinweise vor dem Buchungsvorgang", setting api_message): free text up to formatted HTML of the
   center (sanitised, js/components/safe-html.js) - shown as a clear notice in the reading size, whatever markup it brings */
.top-message {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--s-4);
    border: 1px solid var(--info-line);
    border-radius: var(--r-md);
    background: var(--info-bg);
    color: var(--ink);
    font-size: var(--fs-md);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.top-message > :first-child {
    margin-top: 0;
}

.top-message > :last-child {
    margin-bottom: 0;
}

.top-message img {
    max-width: 100%;
    height: auto;
}

/* the padding of the page content (also read by the navigation at the end of a page, .page-nav in components.css) */
.container .content {
    --content-pad-y: var(--s-5);
    --content-pad-x: var(--s-4);
    padding: var(--content-pad-y) var(--content-pad-x);
}

html[data-layout="lola"] .container .content {
    --content-pad-bottom: var(--content-pad-x);
    padding-bottom: var(--content-pad-bottom);
}

@media (min-width: 36rem) {
    .container .content {
        --content-pad-x: var(--s-5);
    }
}

.view-wrapper {
    margin: 0;
}


/* ---- footer ------------------------------------------------------------------------------------------------------------------ */
/* the footer stays at the bottom of the window, also below a short page (not in the widget: there is none, and the frame
   takes the height of the page) */
html:not(.is-widget) body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* The colour of the center behind the bars of the browser: Safari colours its bars (and the overscroll above and below
   the page) from what lies behind the page; the page itself keeps its background (body fills the window, see above).
   Browsers that read <meta name="theme-color"> get it from there (js/core/shell.js). Never embedded: there the site
   behind shows through. */
html:not(.is-widget):not(.is-framed) {
    background-color: var(--op-accent);
}

html:not(.is-widget) #wrapper {
    width: 100%;
}

#footer {
    max-width: var(--content-max);
    margin: auto auto 0;
    padding: var(--s-4) var(--s-4) var(--s-5);
    text-align: center;
    font-size: var(--fs-xs);
}

#footer a {
    color: var(--ink-faint);
}

/* "Powered by <brand>": an outlined badge with the brand name in its colour - 4bowl always in #f29400 (the brand name is a
   logotype: WCAG 1.4.3 sets no contrast for it; "POWERED BY" keeps the contrast of the footer text) */
#footer .powered {
    display: inline-flex;
    align-items: baseline;
    gap: .45em;
    padding: .05rem .85rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    text-decoration: none;
    transition: border-color var(--t) var(--ease);
}

#footer .powered:hover {
    border-color: var(--ink-faint);
}

/* the terms and the privacy policy of the platform below "powered by" */
.footer__legal {
    display: flex;
    justify-content: center;
    gap: var(--s-2);
    margin: var(--s-2) 0 0;
    color: var(--ink-muted);
}

#footer .footer__legal a {
    color: var(--ink-muted);
    text-decoration: none;
}

#footer .footer__legal a:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.powered__by {
    font-size: .6875rem; /* the faint colour of the links of the footer: lighter on purpose */
    font-weight: 300;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.powered__brand {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -0.05em;
}

.powered[data-brand="4bowl"] .powered__brand {
    color: #f29400;
}

@media (min-width: 40.01rem) {
    #wrapper {
        padding-top: var(--s-5);
    }

    .topbar {
        margin: calc(var(--s-5) * -1) 0 var(--s-5);
        border-radius: 0 0 var(--r-lg) var(--r-lg);
    }
}

@media (max-width: 26rem) {
    #wrapper {
        padding-left: var(--s-3);
        padding-right: var(--s-3);
    }

    .topbar {
        margin-left: calc(var(--s-3) * -1);
        margin-right: calc(var(--s-3) * -1);
    }

    .container .content {
        --content-pad-y: var(--s-3);
        --content-pad-x: var(--s-3);
    }

    .top-content {
        padding: var(--s-3);
    }
}