/* Kiosk-specific layout — large tap targets throughout, per the spec's
   "designed to be usable at a glance / with one hand" theme applied to
   the customer side too. */

.screen {
    display: none;
    flex-direction: column;
    height: 100vh;
    padding: 32px;
    /* Was overflow:hidden with an isolated scroll region inside .tile-grid.
       That's what forced grid rows to a fixed height in the first place —
       CSS Grid stretched every tile to fill exactly the row height that
       fit inside that fixed-size box, and content taller than that got
       hidden. Scrolling the *whole screen* instead (matching how the
       online ordering page behaves — content just sizes to itself and
       the container scrolls if there's more than fits) means nothing is
       ever squeezed to an artificial height. The kiosk still only shows
       one screen at a time and still scrolls in place — this doesn't
       turn it into a multi-page site, it just moves where the scrolling
       happens from "inside the grid" to "the screen as a whole".  */
    overflow-y: auto;
}

.screen.active {
    display: flex;
}

.screen-title {
    font-size: 2rem;
    margin: 0 0 4px;
    text-align: center;
}

.screen-sub {
    text-align: center;
    color: var(--ss-grey);
    margin-top: 0;
    margin-bottom: 20px;
}

.screen-logo {
    display: block;
    margin: 0 auto 12px;
    max-height: 140px;
    width: auto;
    border-radius: var(--ss-radius-sm);
}

.screen-logo-lg {
    max-height: 170px;
    margin-bottom: 16px;
    box-shadow: 0 0 40px rgba(216, 23, 105, 0.4);
}

/* Idle screen */
#screen-idle {
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, var(--ss-navy-light), var(--ss-navy));
}

.idle-wrap {
    text-align: center;
}

.logo-text {
    font-size: 4rem;
    margin: 0;
    color: var(--ss-cream);
    text-shadow: 0 0 30px rgba(216, 23, 105, 0.6);
}

.idle-logo {
    display: block;
    width: min(70vw, 520px);
    height: auto;
    margin: 0 auto 48px;
    border-radius: var(--ss-radius);
    box-shadow: 0 0 60px rgba(216, 23, 105, 0.45);
}

.idle-tag {
    color: var(--ss-pink);
    font-size: 1.4rem;
    letter-spacing: 2px;
    margin-top: 8px;
    margin-bottom: 60px;
}

.tap-to-start {
    font-size: 1.8rem;
    padding: 28px 60px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* Category grid */
.category-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;   /* older Safari spelling of gap */
    gap: 20px;
    align-items: start;
    align-content: center;
}

/* Only one category left (the other switched off): one column, so the
   single card sits in the middle instead of hanging off to the left. */
.category-grid.single {
    grid-template-columns: 1fr;
}

.category-card {
    background: var(--ss-pink);
    color: #fff;
    border: none;
    border-radius: var(--ss-radius);
    box-shadow: 0 4px 0 var(--ss-pink-dark);
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.05s ease;
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
}

.category-card:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--ss-pink-dark);
}

.category-card-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ss-radius-sm);
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.15);
}

.category-card-name {
    font-size: 1.4rem;
    font-weight: 700;
}

.category-card-desc {
    font-size: 0.85rem;
    font-weight: 400;
    margin-top: 6px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
    max-width: 34ch;
}

/* Product / extras tile grids */
.tile-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    /* align-items defaults to "stretch", which forces every tile to the
       same fixed height as the tallest tile in its row — regardless of
       how much content it actually holds. With overflow:visible on the
       tile, any content taller than that forced height (the description,
       the price) rendered *below* the tile's visible box, landing right
       on top of the next row and getting hidden underneath it. "start"
       lets each tile size to its own content instead, and grid rows size
       to fit whatever the tallest tile in that row actually needs. */
    align-items: start;
    grid-gap: 18px;   /* older Safari spelling of gap */
    gap: 18px;
    padding-bottom: 12px;
}

.tile {
    background: var(--ss-navy-light);
    /* The navy-light background alone was too close in tone to the page's
       navy background to read as a distinct card, especially on real
       screens/lighting. A visible border makes the box unmistakable. */
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ss-radius);
    padding: 14px;
    text-align: center;
    color: var(--ss-cream);
    display: flex;
    flex-direction: column;
    min-height: 140px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
    transition: transform 0.05s ease;
}

.tile:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

/* A photo on an extra (a flavour shot, cream, a topping) is a small,
   fixed-height picture rather than a drink's full portrait crop: several
   of them sit on one screen, and a tall photo each would turn the cream
   and toppings questions into a long scroll. A plain height works on
   every iPad here, old ones included. */
#extras-grid .tile-photo {
    height: 150px;
    aspect-ratio: auto;
    margin-bottom: 8px;
}

/* The empty stand-in used when only some of the options on a screen have
   a photo: it keeps every name, price and allergen line at the same
   height across the row instead of one tall tile beside two short ones. */
#extras-grid .tile-photo-blank {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--ss-radius-sm);
}

.tile-photo {
    display: block;
    width: 100%;
    /* Drink photos are shot portrait (phone held upright), so the crop
       box needs to be portrait-shaped too — a landscape (4:3) box was
       forcing every photo, however it was actually oriented on disk,
       to be cropped into a wide/short shape. */
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--ss-radius-sm);
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.1);
}

.tile.selected {
    border-color: var(--ss-pink);
    background: rgba(216, 23, 105, 0.22);
}

.tile-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
    /* Clamped to a fixed 2 lines so a short name and a long one take up
       the same amount of space — that's what makes every card end up the
       same height with their tops AND bottoms lining up, instead of each
       card being exactly as tall as its own text happens to need. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.tile-desc {
    font-size: 0.85rem;
    color: var(--ss-grey);
    margin-bottom: 10px;
    /* Same reasoning as .tile-name above. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
}

.tile-allergens {
    font-size: 0.78rem;
    color: var(--ss-grey);
    margin-bottom: 10px;
    /* Reserved even when a drink has no allergens set (see app.js) so
       cards without one don't end up shorter than cards with one. */
    min-height: 1.2em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tile-allergens strong { color: var(--ss-cream); }

.tile-price {
    /* Pushes just the price to the bottom of the tile without forcing
       space-between across name/desc/price too (which is what spread
       them out to the point of overflowing in the first place). */
    margin-top: auto;
    padding-top: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ss-pink);
}

.bottom-bar {
    display: flex;
    /* Spacing comes from the margin rule further down, not "gap" — older
       Safari ignores gap on a flex row entirely. Having both doubled it. */
    justify-content: space-between;
    margin-top: 16px;
    /* The screen scrolls now, so without this the Back/View order buttons
       would scroll out of view along with the product list — bad on a
       kiosk where "how do I check out" should never require hunting.
       Sticking it to the bottom of the screen keeps it reachable no
       matter how far down the list someone's scrolled. */
    position: sticky;
    bottom: 0;
    background: var(--ss-navy);
    padding-top: 12px;
}

.bottom-bar .ss-btn {
    flex: 1;
}

/* Review screen */
.review-list {
    flex: 1;
    overflow-y: auto;
}

.review-line {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.review-line .name {
    font-weight: 700;
}

.review-line .extra-line {
    font-size: 0.85rem;
    color: var(--ss-grey);
    padding-left: 16px;
}

.review-total {
    text-align: right;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 12px 0;
    color: var(--ss-pink);
}

.ref-field {
    margin: 8px 0 16px;
}

.ref-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.ref-field input {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    border-radius: var(--ss-radius-sm);
    border: none;
}

/* The order name is required. The field is marked, and if someone tries to
   pay without one the box turns red and says why, rather than the payment
   just failing with nothing to explain it. */
.ref-field .req {
    color: var(--ss-pink);
    font-weight: 700;
}

.ref-field input.needs-input {
    box-shadow: 0 0 0 3px var(--ss-danger-light);
}

.ref-error {
    color: var(--ss-danger-light);
    margin: 8px 0 0;
    font-size: 0.95rem;
}

.payment-buttons {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

.free-btn {
    background: var(--ss-success) !important;
    box-shadow: 0 4px 0 #157a41 !important;
}

/* Center message screens (card wait / failed / receipt / confirmation) */
.center-message {
    margin: auto;
    text-align: center;
    max-width: 520px;
}

.center-message h2 {
    font-size: 1.8rem;
}

.center-message .ss-btn {
    margin: 8px;
    min-width: 220px;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255,255,255,0.2);
    border-top-color: var(--ss-pink);
    border-radius: 50%;
    margin: 0 auto 24px;
    animation: spin 1s linear infinite;
}

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

.confirm-remember {
    color: var(--ss-grey);
    margin-bottom: 0;
}

.confirm-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--ss-pink);
    margin: 8px 0 20px;
}

/* Cash still owed. Deliberately loud — with no printed ticket this is the
   only thing that tells a customer they haven't paid yet, and it's the one
   message that costs money if it goes unread. */
.confirm-owed {
    background: var(--ss-pink);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.35;
    border-radius: var(--ss-radius);
    padding: 18px 20px;
    margin: 0 0 20px;
}

.confirm-hint {
    color: var(--ss-grey);
}

.back-btn {
    margin-top: 16px;
}

/* Cancel order — narrower than the buttons either side of it, so the two
   things a customer normally wants (go back, carry on) stay the big
   targets and cancelling is a deliberate act rather than a fat-finger. */
.bottom-bar .ss-btn.danger {
    flex: 0 1 auto;
}

/* "Are you sure?" overlay ------------------------------------------------ */
.cancel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 26, 64, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}

.cancel-box {
    background: var(--ss-navy-light);
    border-radius: var(--ss-radius);
    padding: 36px 30px;
    text-align: center;
    max-width: 460px;
    width: 100%;
}

.cancel-box h2 {
    margin: 0 0 10px;
    font-size: 1.6rem;
}

.cancel-box p {
    color: var(--ss-grey);
    margin: 0 0 26px;
}

.cancel-box .ss-btn {
    display: block;
    width: 100%;
    margin-bottom: 12px;
}

.cancel-box .ss-btn:last-child {
    margin-bottom: 0;
}

.hidden {
    display: none !important;
}

.free-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--ss-success);
    color: #fff;
    text-align: center;
    font-weight: 700;
    padding: 8px;
    z-index: 999;
    letter-spacing: 1px;
}

/* Narrower screens (an iPad held upright, a phone): three buttons will not fit on one row without squeezing
   "Add to order" into three cramped lines, so Cancel drops onto its own
   row underneath as a plain text link — still there, still obvious, but
   out of the way of the two buttons that do the ordering. */
@media (max-width: 700px) {
    .bottom-bar {
        flex-wrap: wrap;
        gap: 10px;
    }
    .bottom-bar .ss-btn {
        padding: 16px 12px;
        font-size: 1rem;
    }
    .bottom-bar .ss-btn.danger {
        order: 3;
        flex: 1 0 100%;
        padding: 8px;
        font-size: 0.95rem;
        border: none;
        text-decoration: underline;
    }
}

/* =====================================================================
   OLDER iPAD SUPPORT
   These screens run on iPads whose Safari predates several things that
   are now normal CSS. Each block below is a plain-CSS equivalent of
   something the newer property does, so the layout is identical on a new
   device and correct on the old ones.
   ===================================================================== */

/* Spacing inside the flex rows below. Older Safari ignores "gap" on a
   flex container completely, which collapsed these buttons together;
   margins do the same job on every version. */
.bottom-bar > * + * { margin-left: 16px; }
.payment-buttons > * + * { margin-top: 12px; }

/* Photo shapes. aspect-ratio is far newer than these iPads, and without
   it every photo fell back to its own natural shape — which is exactly
   what made the tiles different heights with their bottoms not lining
   up. A fixed height plus object-fit crops identically. Any browser new
   enough for aspect-ratio uses that instead and stays fully fluid. */
.tile-photo { height: 260px; }
.category-card-photo { height: 210px; }

@supports (aspect-ratio: 3 / 4) {
    .tile-photo { height: auto; }
    .category-card-photo { height: auto; }
    /* except an extra's, which is a fixed 150px everywhere — see above */
    #extras-grid .tile-photo { height: 150px; }
}

/* Safari 10 needs the prefix, and silently drops the rule without it. */
.review-total { position: -webkit-sticky; }

/* ---------------------------------------------------------------------
   Review screen layout
   The name box sits at the top of the screen, above the order itself, and
   the four action buttons run down the page one per line rather than two
   of them sharing a row. Four full-width buttons are easier to hit than
   two half-width ones, and there is no ambiguity about what each does.
   --------------------------------------------------------------------- */

#screen-review .ref-field {
    margin: 0 0 20px;
}

#screen-review .screen-title {
    /* Now sits over the list it describes rather than over the whole page. */
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

#screen-review .bottom-bar {
    display: block;
    /* Not sticky here: this screen's buttons are the end of the page, and
       pinning half of them over the other half looks broken. */
    position: static;
    margin-top: 20px;
    padding: 0;
}

#screen-review .bottom-bar > * {
    display: block;
    width: 100%;
    /* Cancels the side-by-side spacing used on the other screens. */
    margin-left: 0;
    margin-bottom: 12px;
}

#screen-review .bottom-bar > *:last-child {
    margin-bottom: 0;
}

#screen-review .payment-buttons {
    margin-top: 12px;
}

#screen-review .review-list {
    /* Sized to the drinks actually in the order, rather than stretched to
       fill the screen — with the name box moved to the top, a stretched
       list left a big empty gap between one drink and the total. The whole
       screen scrolls if the order is a long one. */
    flex: 0 0 auto;
    overflow: visible;
}

#screen-review .review-total {
    margin-top: 14px;
}

#screen-review .payment-buttons .ss-btn {
    width: 100%;
}

/* "Step 2 of 4" under the question, so a run of questions doesn't feel
   open-ended. Deliberately quiet — it's orientation, not instruction. */
.step-dots {
    text-align: center;
    color: var(--ss-grey);
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin: 0 0 12px;
    min-height: 18px;
}

/* Removing a drink from the order.
   This used to be the whole row, which meant a stray tap — most easily the
   one that closes the on-screen keyboard, after which the page has shifted
   under your finger — deleted a drink. It is now a deliberate button, set
   apart from the price and big enough to hit on purpose but small enough
   not to be hit by accident. */
.review-line {
    align-items: center;
}

.review-line-right {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.review-line-price {
    margin-right: 12px;
}

.review-remove {
    background: transparent;
    border: 2px solid var(--ss-danger-light);
    color: var(--ss-danger-light);
    border-radius: 8px;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
}

.review-remove:active {
    background: rgba(216, 52, 26, 0.25);
}

/* "No cream, thanks" sits with the cream options as an equal choice, but
   it isn't something being added, so it reads a shade quieter than the
   things that cost money. */
.tile.tile-plain .tile-price {
    color: var(--ss-grey);
}