/*
 * Guest-shop additions on top of the shared kiosk design system
 * (_content/Shababs.Optimize.GuestOrdering.Ui/css/guest-ordering.css).
 *
 * Everything the guest shop has in common with the Self-Kiosk — the product grid, the
 * configurator, the cart, the buttons, the colour and radius tokens — comes from that
 * stylesheet and is deliberately NOT repeated here. This file only covers the screens that
 * exist solely in the cloud: the slug landing page, the checkout form and the confirmation.
 *
 * All colours are read from the operator's theme via the --kiosk-* custom properties, so a
 * design change made once in the Internal app repaints both surfaces.
 */

/* =============================================================================
   Phone viewport: undo the kiosk's "fixed-size screen" assumptions
   =============================================================================
   The shared stylesheet is written for a terminal whose screen never changes
   size: the document itself never scrolls (html, body { height: 100%;
   overflow: hidden }) and the inner panes (.menu-main, .category-sidebar,
   .product-dialog) are the scroll containers instead.

   A phone has no fixed size — the browser chrome alone changes the visible
   height while scrolling. Left as-is, the page grows past the locked-down
   document, and everything below the first screen is simply clipped away with
   no way to scroll to it. That was the "the bottom is cut off and slides over
   itself" report. So the guest shop hands scrolling back to the document and
   keeps the inner panes as plain, growing content.
   ============================================================================= */

html, body {
    height: auto;
    min-height: 100%;
    /* overflow-x stays hidden: a stray wide element must not create a sideways
       scroll on a phone, where it is nearly impossible to scroll back out of. */
    overflow-x: hidden;
    overflow-y: visible;
}

.guest-shell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    /* The document scrolls, not the shell. An `overflow` other than `visible`
       here would make the shell a scroll container again — and, worse, the
       containing block that `position: fixed` children resolve against. */
    overflow: visible;
    user-select: text;
}

/* .page-transition's entry animation ends on `transform: translateY(0)`, and
   `animation-fill-mode: both` keeps that transform applied forever. A transform
   — even an identity one — turns the element into the containing block for
   every `position: fixed` descendant. On the kiosk that is invisible, because
   the shell is exactly one viewport tall. On a phone the shell is as tall as
   the menu, so the bottom cart bar and the modal backdrop anchored themselves
   to the bottom of the *page* instead of the screen: the bar sat somewhere in
   the middle of the catalog, and opening a dish put its sheet thousands of
   pixels below the fold. The guest shop therefore fades in without moving. */
.guest-shell .page-transition {
    animation-name: guest-page-enter;
}

@keyframes guest-page-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Only the *page-level* panes stop being scroll containers. The modal sheets
   below must keep theirs: .product-dialog pairs `overflow-y: auto` with
   `max-height` and a `position: sticky` header, and switching it off let the
   configurator's content run straight out of the white sheet and under the
   sticky header — the overlap in the same report. */
.guest-shell .menu-main,
.guest-shell .category-sidebar,
.guest-shell .checkout-screen {
    overflow: visible;
}

/* A bottom sheet must fit the *visible* part of the screen. `vh` on a phone is
   the height with the browser chrome retracted, so a 95vh sheet hides its
   confirm button behind the URL bar until the guest scrolls the page instead
   of the sheet. `dvh` tracks the chrome; the vh line stays as the fallback. */
.guest-shell .product-dialog {
    min-height: 85vh;
    min-height: 85dvh;
    max-height: 95vh;
    max-height: 95dvh;
    /* Clears the iPhone home indicator — the page declares viewport-fit=cover. */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.guest-shell .kiosk-bottom-bar {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* While a sheet is open the document behind it must hold still, otherwise a
   swipe inside the sheet scrolls the menu underneath once the sheet reaches
   its end. Set on <html> rather than <body>, because a body-only lock takes
   effect merely by propagation to the viewport — which does not happen once
   <html> has an overflow of its own. */
html:has(.product-dialog-backdrop),
html:has(.language-menu-backdrop) {
    overflow: hidden;
}

/* -----------------------------------------------------------------------
   Phone widths
   -----------------------------------------------------------------------
   The shared stylesheet sizes everything for a terminal roughly ten times
   wider than a phone: three "most popular" tiles side by side, two-column
   option grids, a configurator hero image the operator sized for a 32"
   screen. The tokens, colours and component shapes stay exactly as they are —
   the guest shop is meant to look like the terminal — only the column counts
   and the few absolute sizes that do not fit 390 px are adjusted, because
   below that the cards simply ran out past the right edge and were clipped.
----------------------------------------------------------------------- */

@media (max-width: 640px) {
    .guest-shell .menu-main {
        /* The bottom bar stacks its cart button over two text links, which makes
           it noticeably taller than the 12vh the token assumes. Reserving a flat,
           generous strip is what keeps the last row of dishes reachable. */
        padding: 1.25rem 1rem calc(12rem + env(safe-area-inset-bottom, 0px));
    }

    .guest-shell .popular-row {
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        gap: 0.75rem;
    }

    .guest-shell .popular-tile,
    .guest-shell .product-tile {
        min-height: 0;
        padding: 1rem;
    }

    .guest-shell .product-dialog {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .guest-shell .product-dialog-customize-header {
        /* Still clears the close button, which keeps its 1rem inset. */
        padding-left: 3.25rem;
        padding-right: 3.25rem;
    }

    /* One option per row. Two columns leave ~90 px next to the thumbnail, which
       is not enough for a name like "Grüner Salat" — it overflowed the sheet. */
    .guest-shell .option-card-grid,
    .guest-shell .ingredient-grid,
    .guest-shell .menu-slot-options {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Sized by the operator for the in-store terminal; at that size it would
       take up most of a phone screen before a single option is visible. */
    .guest-shell .product-dialog-sticky-image {
        width: min(32vw, 120px);
        height: min(32vw, 120px);
    }

    .guest-shell .product-dialog-image {
        max-height: min(45vw, 200px);
    }

    .guest-shell .kiosk-bottom-bar-cart-btn {
        min-width: 0;
    }
}

/* ---------- landing ---------- */

.shop-home {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.25rem 3rem;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.shop-header h1 {
    margin: 0.5rem 0 0;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
}

.shop-logo {
    width: var(--kiosk-logo-size, 56px);
    height: var(--kiosk-logo-size, 56px);
    object-fit: contain;
    border-radius: var(--kiosk-radius-card, 18px);
}

.shop-subtitle,
.shop-address {
    color: var(--kiosk-muted);
    margin: 0.25rem 0 0;
}

.shop-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    font-weight: 600;
}

.shop-status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--kiosk-danger);
}

.shop-status-open .shop-status-dot {
    background: var(--kiosk-success);
}

.shop-status-detail {
    font-weight: 400;
    color: var(--kiosk-muted);
}

.shop-message {
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius-card, 18px);
    padding: 0.9rem 1rem;
    margin: 0;
}

.shop-start-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

.shop-footer {
    color: var(--kiosk-muted);
    font-size: 0.9rem;
}

.shop-closed,
.shop-loading {
    padding: 3rem 1.25rem;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.skeleton-bar {
    height: 1.4rem;
    margin: 0.6rem 0;
    border-radius: 999px;
    background: var(--kiosk-surface);
    animation: guest-pulse 1.2s ease-in-out infinite;
}

@keyframes guest-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ---------- checkout ---------- */

.checkout-screen {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 1.25rem 3rem;
    max-width: 40rem;
    margin: 0 auto;
}

.checkout-back {
    align-self: flex-start;
}

.checkout-lines {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.checkout-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius-card, 18px);
}

.checkout-line-name {
    font-weight: 600;
}

.checkout-line-price {
    font-weight: 700;
    white-space: nowrap;
}

/* LMIV declarations sit directly on the article, never behind a link or a tab. */
.checkout-line-labels {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.label-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--kiosk-bg);
    border: 1px solid var(--kiosk-border);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--kiosk-muted);
}

.label-chip-additive {
    border-style: dashed;
}

.label-legend {
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius-card, 18px);
    padding: 0.75rem 1rem;
}

.label-legend ul {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    color: var(--kiosk-muted);
    font-size: 0.9rem;
}

.checkout-section h2 {
    font-size: 1.05rem;
    margin: 0 0 0.6rem;
}

.checkout-radio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
}

.checkout-input,
.checkout-select {
    width: 100%;
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius-btn, 14px);
    background: var(--kiosk-surface);
    color: var(--kiosk-text);
    font: inherit;
    /* 16px minimum stops iOS Safari from zooming the viewport on focus. */
    font-size: max(1rem, 16px);
}

.checkout-input:focus-visible,
.checkout-select:focus-visible {
    outline: 2px solid var(--kiosk-primary);
    outline-offset: 2px;
}

textarea.checkout-input {
    min-height: 5rem;
    resize: vertical;
}

.checkout-coupon {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.checkout-coupon .checkout-input {
    flex: 1;
}

.checkout-hint {
    color: var(--kiosk-success);
    margin: 0;
}

.checkout-warning {
    color: var(--kiosk-danger);
    margin: 0;
}

.checkout-total {
    border-top: 1px solid var(--kiosk-border);
    padding-top: 0.75rem;
}

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    color: var(--kiosk-muted);
}

.checkout-total-sum {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--kiosk-text);
}

.checkout-payment-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.checkout-pay-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
}

/* ---------- confirmation ---------- */

.confirmation-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.25rem;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.confirmation-check {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--kiosk-success);
    color: var(--kiosk-primary-text, #fff);
    font-size: 2rem;
}

.confirmation-label {
    color: var(--kiosk-muted);
    margin: 0;
}

.confirmation-number {
    font-size: clamp(2.5rem, 14vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.confirmation-number-pending {
    opacity: 0.5;
}

.confirmation-hint,
.confirmation-total {
    color: var(--kiosk-muted);
    margin: 0;
}

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

/* Trenner zwischen den Wallet-Knöpfen und der Kartenzahlung. Ein Strich mit Wort in der
   Mitte, damit "oder" als Alternative liest und nicht als Überschrift der Knöpfe darunter. */
.checkout-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--kiosk-muted);
    font-size: 0.9rem;
}

.checkout-separator::before,
.checkout-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--kiosk-border);
}

#wallet-element {
    margin-bottom: 0.5rem;
}