/**
 * SL Market Kiosk — kiosk.css  v2.1.3
 *
 * Brand tokens, two-column browse layout, checkout modal, success overlay.
 */

/* ═══════════════════════════════════════════════════════
   BRAND TOKENS
   ═══════════════════════════════════════════════════════ */
:root {
    --red:       #B61d22;
    --navy:      #122143;
    --teal:      #667d7b;
    --cream:     #f9ecc2;
    --orange:    #c1742a;
    --gold:      #ccb464;
    --white:     #FFFFFF;
    --border:    #e8dfc5;
    --light-bg:  #f7f4ee;
    --shadow:    0 4px 24px rgba(18,33,67,.11);

    --font-head: 'museo-sans', 'Museo', 'Trebuchet MS', sans-serif;
    --font-body: 'franklin-gothic-urw', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    /* JS-overridable primary colour */
    --sl-primary: var(--red);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body.sl-kiosk-body {
    height: 100%;
    font-family: var(--font-body);
    background: var(--light-bg);
    color: var(--navy);
    -webkit-font-smoothing: antialiased;

    /* iOS: prevent rubber-band / overscroll bounce on the root */
    overscroll-behavior: none;
    /* With viewport-fit=cover the body fills behind the notch/Dynamic Island.
       We do NOT add padding-top here — the header handles it so its background
       fills the status-bar region seamlessly. */
    padding-bottom: env(safe-area-inset-bottom);
}

/* Prevent double-tap zoom and long-press callout on all interactive elements */
button, a, input, select, textarea, [role="button"] {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* Prevent text selection across the whole kiosk UI */
body.sl-kiosk-body {
    -webkit-user-select: none;
    user-select: none;
}
/* Re-allow selection inside inputs so members can correct their typing */
body.sl-kiosk-body input,
body.sl-kiosk-body textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* ── Offline banner ── */
#sl-offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #1e1e1e;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    transform: translateY(-100%);
    transition: transform .3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
#sl-offline-banner.visible {
    transform: translateY(0);
}
.offline-icon { font-size: 22px; flex-shrink: 0; }
.offline-text strong { color: #fbbf24; }

/* Remove admin bar interference */
body.sl-kiosk-body { margin-top: 0 !important; }
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }

/* ═══════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════ */
.landing-page {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    transition: opacity .4s ease, visibility .4s ease;
}
.landing-page.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* Subtle accent rings */
.landing-page::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(182,29,34,.05);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}
.landing-page::after {
    content: '';
    position: absolute;
    width: 900px; height: 900px;
    border-radius: 50%;
    border: 1px solid rgba(182,29,34,.03);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}
.landing-logo {
    height: 90px;
    width: auto;
    margin-bottom: 36px;
    position: relative;
    z-index: 1;
}
.landing-logo-fallback {
    font-family: var(--font-head);
    font-size: 26px; font-weight: 900;
    color: var(--red);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 36px;
    position: relative; z-index: 1;
}
.landing-rule {
    width: 48px; height: 3px;
    background: var(--red);
    border-radius: 2px;
    margin: 0 auto 32px;
    position: relative; z-index: 1;
}
.landing-heading {
    font-family: var(--font-head);
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 900;
    color: var(--navy);
    line-height: 1.15;
    margin-bottom: 16px;
    max-width: 600px;
    position: relative; z-index: 1;
}
.landing-heading span { color: var(--red); }
.landing-sub {
    font-size: 15px;
    color: var(--teal);
    margin-bottom: 52px;
    max-width: 400px;
    line-height: 1.6;
    position: relative; z-index: 1;
}
.landing-cta {
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: 20px 52px;
    font-family: var(--font-body);
    font-size: 16px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 8px 32px rgba(182,29,34,.25);
    position: relative; z-index: 1;
    animation: pulse-cta 2.5s ease-in-out infinite;
}
.landing-cta:hover {
    background: #981820;
    transform: scale(1.04);
    box-shadow: 0 12px 40px rgba(182,29,34,.4);
}
@keyframes pulse-cta {
    0%, 100% { box-shadow: 0 8px 32px rgba(182,29,34,.25); transform: scale(1); }
    50%       { box-shadow: 0 12px 52px rgba(182,29,34,.55); transform: scale(1.05); }
}
.landing-footer {
    position: absolute;
    bottom: 20px;
    font-size: 11px;
    color: rgba(18,33,67,.25);
    letter-spacing: .5px;
}

/* ═══════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════ */
.kiosk-header {
    background: var(--white);
    /* Extend into the status-bar / Dynamic Island region on iOS web apps.
       padding-top pushes header content below the notch; the extra height
       gives the header a solid background behind the status bar. */
    padding: env(safe-area-inset-top) 32px 0;
    height: calc(64px + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(18,33,67,.10);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.header-logo {
    height: 36px;
    width: auto;
}
.header-logo-fallback {
    color: var(--red);
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.header-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
}
.header-title {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: .5px;
    text-transform: uppercase;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.header-date,
.header-datetime {
    font-size: 12px;
    color: var(--teal);
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums; /* keeps clock width stable */
    white-space: nowrap;
}

/* ── Guide button ── */
.guide-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--teal);
    font-family: var(--font-head);
    font-size: 14px; font-weight: 800;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
    line-height: 1;
}
.guide-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ═══════════════════════════════════════════════════════
   SUBTITLE BAR
   ═══════════════════════════════════════════════════════ */
.subtitle-bar {
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    padding: 10px 32px;
    text-align: center;
    font-size: 13px;
    color: var(--teal);
    line-height: 1.5;
}
.subtitle-bar strong { color: var(--navy); }

/* ═══════════════════════════════════════════════════════
   CATEGORY TABS
   ═══════════════════════════════════════════════════════ */
.cat-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    display: flex;
    gap: 0;
    align-items: flex-end;
}
.cat-tab {
    padding: 14px 22px 12px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--teal);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    transition: all .18s;
    user-select: none;
    white-space: nowrap;
}
.cat-tab:hover { color: var(--navy); border-bottom-color: var(--border); }
.cat-tab.active { color: var(--red); border-bottom-color: var(--red); }

/* ═══════════════════════════════════════════════════════
   MAIN TWO-COLUMN LAYOUT
   ═══════════════════════════════════════════════════════ */
.main-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0;
    height: calc(100vh - 64px - 42px - 45px);
    overflow: hidden;
}

/* ── LEFT: Products Panel ── */
.products-panel {
    overflow-y: auto;
    padding: 24px 28px 32px;
    background: var(--light-bg);
}
.products-panel::-webkit-scrollbar { width: 6px; }
.products-panel::-webkit-scrollbar-track { background: transparent; }
.products-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.cat-section { margin-bottom: 28px; }
.cat-section.hidden { display: none; }
.cat-heading {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 900;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}

/* Product grid — 4 columns */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* ── Product Card ── */
.prod-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    user-select: none;
}
.prod-card:hover { border-color: var(--red); box-shadow: 0 2px 10px rgba(182,29,34,.12); }
.prod-card.in-cart { border-color: var(--red); }

.prod-img {
    height: 90px;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    position: relative;
    transition: background .15s;
    overflow: hidden;
}
.prod-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    background: var(--white);
}
/* Placeholder shown when no product image is available */
.prod-img-na {
    font-size: 9px;
    font-weight: 600;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: center;
    padding: 8px 6px;
    line-height: 1.4;
    opacity: .6;
}
.prod-card.in-cart .prod-img { background: #fce8e8; }

.prod-body {
    padding: 8px 8px 0;
    text-align: center;
    flex: 1;
}
.prod-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}
.prod-brand {
    font-size: 10px;
    font-weight: 400;
    color: var(--teal);
    margin-top: 2px;
    line-height: 1.2;
}
.prod-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--orange);
    margin-top: 3px;
}

/* + / − controls */
.prod-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px;
}
.pctrl-btn {
    width: 28px; height: 28px;
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.pctrl-btn:hover { background: #981820; }
.pctrl-btn.minus { background: var(--teal); }
.pctrl-btn.minus:hover { background: var(--navy); }
.pctrl-qty {
    min-width: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    display: none;
}
.prod-card.in-cart .pctrl-qty { display: block; }
.prod-card:not(.in-cart) .pctrl-btn.minus { display: none; }
.prod-card:not(.in-cart) .pctrl-qty { display: none; }

/* ═══════════════════════════════════════════════════════
   RIGHT: CART PANEL
   ═══════════════════════════════════════════════════════ */
.cart-panel {
    background: var(--white);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cart-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.cart-summary-label {
    font-size: 11px;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.cart-summary-total {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
}
.reset-btn {
    background: none;
    border: 1.5px solid var(--red);
    color: var(--red);
    border-radius: 6px;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.reset-btn:hover { background: var(--red); color: var(--white); }

/* Cart item list */
.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}
.cart-items::-webkit-scrollbar { width: 4px; }
.cart-items::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--border);
    font-size: 13px;
    text-align: center;
    gap: 10px;
    padding: 20px;
}
.cart-empty-icon { font-size: 36px; opacity: .4; }

.cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.cart-row:last-child { border-bottom: none; }
.cart-row-left { flex: 1; min-width: 0; }
.cart-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-row-sub {
    font-size: 11px;
    color: var(--teal);
    margin-top: 2px;
}
.cart-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cart-row-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    min-width: 44px;
    text-align: right;
}
.cart-thumb {
    width: 32px; height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--light-bg);
    flex-shrink: 0;
}
.cart-del {
    background: none;
    border: none;
    color: var(--border);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all .15s;
    line-height: 1;
}
.cart-del:hover { color: var(--red); background: #fce8e8; }

/* Cart row inline qty controls */
.cart-row-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.cart-qty-btn {
    background: var(--light-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--navy);
    padding: 0;
    transition: background .15s;
    flex-shrink: 0;
}
.cart-qty-btn:hover { background: var(--border); }
.cart-qty-num {
    font-size: 12px;
    color: var(--teal);
    min-width: 50px;
    text-align: center;
}
/* Confirm-pending state for reset button */
.reset-btn.confirm-pending {
    background: var(--red);
    color: #fff;
}

/* Cart footer */
.cart-footer {
    padding: 16px 20px 20px;
    border-top: 2px solid var(--cream);
    flex-shrink: 0;
    background: var(--white);
}
.cart-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.cart-total-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--teal);
}
.cart-total-amount {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 900;
    color: var(--navy);
}
.charge-btn {
    width: 100%;
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
    margin-bottom: 10px;
}
.charge-btn:hover { background: #981820; }
.charge-btn:disabled { opacity: .4; cursor: not-allowed; }
.billing-note {
    font-size: 11px;
    color: var(--teal);
    text-align: center;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   CHECKOUT MODAL
   ═══════════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(18,33,67,.65);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal {
    background: var(--white);
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(18,33,67,.3);
    border-top: 5px solid var(--red);
}
.modal-head {
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--border);
}
.modal-step-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
}
.modal h2 {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 800;
    color: var(--navy);
}
.modal-body { padding: 24px 32px 28px; }

/* Lookup inputs */
.lookup-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.lookup-input {
    flex: 1;
    padding: 13px 16px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
    outline: none;
    transition: border-color .2s;
    min-width: 0;
}
.lookup-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18,33,67,.08); }
.lookup-input::placeholder { font-weight: 400; color: var(--teal); }
.lookup-input.is-card {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
}
.lookup-mode-btn {
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 12px; font-weight: 700;
    color: var(--teal);
    cursor: pointer;
    transition: all .15s;
    letter-spacing: .3px;
}
.lookup-mode-btn:hover { border-color: var(--navy); color: var(--navy); }
.lookup-mode-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

.lookup-btn {
    padding: 13px 18px;
    background: var(--navy);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.lookup-btn:hover { background: #0e1a33; }
.lookup-btn:disabled { opacity: .5; cursor: not-allowed; }

.lookup-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.lookup-spinner.active { display: block; }

.lookup-error {
    color: var(--red);
    font-size: 13px;
    margin-bottom: 12px;
    display: none;
}
.lookup-error.visible { display: block; }

/* Member picker (multiple accounts) */
.member-picker {
    display: none;
    margin: 8px 0 12px;
    padding: 12px 14px;
    background: var(--light-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.member-picker.visible { display: block; }
.picker-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}
.member-pick-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 6px;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.member-pick-btn:last-child { margin-bottom: 0; }
.member-pick-btn:hover,
.member-pick-btn:focus {
    border-color: var(--red);
    background: #fff5f5;
    outline: none;
}
.pick-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}
.pick-sub {
    font-size: 12px;
    color: var(--teal);
    margin-top: 2px;
}

/* Member card */
.member-card {
    background: var(--cream);
    border-left: 4px solid var(--red);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: none;
}
.member-card.visible { display: block; }
.member-card .m-name {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
}
.member-card .m-company {
    font-size: 13px;
    color: var(--teal);
    margin-top: 2px;
}

/* Order review in modal */
.modal-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.modal-order-table thead th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--teal);
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
}
.modal-order-table thead th:last-child { text-align: right; }
.modal-order-table tbody td {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.modal-order-table tbody tr:last-child td { border-bottom: none; }
.modal-order-table .col-name { color: var(--navy); font-weight: 600; }
.modal-order-table .col-qty  { color: var(--teal); text-align: center; }
.modal-order-table .col-price { font-weight: 700; color: var(--navy); text-align: right; }
.modal-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 20px;
    border-top: 2px solid var(--cream);
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
}

/* PIN field */
.pin-wrap {
    position: relative;
    margin-bottom: 8px;
}
.pin-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    opacity: .5;
}
.pin-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 10px;
    color: var(--navy);
    outline: none;
    transition: border-color .2s;
    background: var(--white);
}
.pin-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18,33,67,.08); }
.pin-input::placeholder { letter-spacing: 4px; font-size: 16px; font-weight: 400; color: var(--border); }
.pin-input.error { border-color: var(--red); animation: shake .3s; }

.pin-error {
    color: var(--red);
    font-size: 12px;
    margin-bottom: 8px;
    margin-top: 6px;
    display: none;
}
.pin-error.visible { display: block; }

/* Terminal (non-retryable) order error */
.order-error {
    background: rgba(220,38,38,.12);
    border: 1px solid rgba(220,38,38,.35);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: none;
}
.order-error.visible { display: block; }

/* PIN visibility toggle */
.pin-toggle-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-size: 18px;
    opacity: .65;
    transition: opacity .15s;
}
.pin-toggle-btn:hover { opacity: 1; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60%  { transform: translateX(-6px); }
    40%, 80%  { transform: translateX(6px); }
}

.field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    display: block;
}

/* Account type */
.account-type-section {
    margin-bottom: 16px;
    display: none;
}
.account-type-section.visible { display: block; }
.account-type-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.account-type-btn {
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all .18s;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: left;
}
.account-type-btn:hover { border-color: var(--navy); }
.account-type-btn.selected { border-color: var(--red); background: #fef2f2; }
.account-type-btn .at-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.account-type-btn .at-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.account-type-btn .at-label {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--navy); white-space: nowrap;
}
.account-type-btn .at-sub {
    font-size: 10px; color: var(--teal);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-type-btn.selected .at-label { color: var(--red); }
.account-error {
    color: var(--red);
    font-size: 12px;
    margin-top: 6px;
    display: none;
}
.account-error.visible { display: block; }

/* Modal buttons */
.modal-btn-row {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}
.modal-btn-row button { flex: 1; }
.btn-modal-cancel {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--teal);
    border-radius: 8px;
    padding: 14px;
    font-family: var(--font-body);
    font-size: 14px; font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
}
.btn-modal-cancel:hover { border-color: var(--navy); color: var(--navy); }
.btn-modal-submit {
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-family: var(--font-body);
    font-size: 14px; font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
}
.btn-modal-submit:hover { background: #981820; }
.btn-modal-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════
   SUCCESS OVERLAY
   ═══════════════════════════════════════════════════════ */
.success-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--navy);
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}
.success-overlay.open { display: flex; }
.success-check {
    width: 80px; height: 80px;
    background: var(--cream);
    border: 3px solid var(--gold);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}
.success-check svg {
    width: 38px; height: 38px;
    stroke: var(--navy); stroke-width: 3;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.success-overlay h2 {
    font-family: var(--font-head);
    font-size: 32px; font-weight: 900;
    color: var(--white); margin-bottom: 10px;
}
.success-overlay p {
    color: rgba(255,255,255,.65);
    font-size: 15px; line-height: 1.6;
    margin-bottom: 32px; max-width: 400px;
}
.success-billing {
    color: rgba(255,255,255,.90) !important;
    font-size: 16px !important;
    margin-top: -20px !important;
    margin-bottom: 20px !important;
}
.success-billing strong { color: #fff; }
.success-receipt {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 18px 24px;
    margin-bottom: 32px;
    text-align: left;
    width: 100%;
    max-width: 340px;
}
.success-receipt .sr-row {
    display: flex; justify-content: space-between;
    font-size: 13px; color: rgba(255,255,255,.75);
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.success-receipt .sr-row:last-child { border-bottom: none; }
.success-receipt .sr-total {
    font-family: var(--font-head);
    font-size: 17px; font-weight: 800;
    color: var(--white); margin-top: 8px;
}
.new-checkout-btn {
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 16px 36px;
    font-family: var(--font-body);
    font-size: 15px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer;
    transition: background .2s;
}
.new-checkout-btn:hover { background: #981820; }
.success-countdown {
    margin-top: 16px;
    font-size: 12px;
    color: rgba(255,255,255,.4);
}

/* Partial-order warning on success screen */
.success-warning {
    background: rgba(234,179,8,.15);
    border: 1px solid rgba(234,179,8,.4);
    border-radius: 10px;
    color: #fef08a;
    font-size: 13px;
    line-height: 1.55;
    padding: 12px 16px;
    margin: 12px 0;
    max-width: 340px;
    text-align: left;
    display: none;
}
.success-warning.visible { display: block; }

/* Global toast notification */
#sl-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30,30,30,.92);
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    max-width: 380px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 9999;
}
#sl-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════
   MOBILE CART PILL
   ═══════════════════════════════════════════════════════ */
.mobile-cart-pill {
    display: none;
    position: fixed;
    /* Stay below the Dynamic Island / notch / status bar.
       env(safe-area-inset-top) is 59px on Dynamic Island devices,
       47px on notch devices, ~20px on older iPhones, 0 on iPad. */
    top: calc(env(safe-area-inset-top) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    z-index: 300;
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 24px;
    padding: 9px 16px;
    font-family: var(--font-body);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(182,29,34,.4);
    align-items: center;
    gap: 8px;
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.mobile-cart-pill:hover { transform: scale(1.04); }
.mobile-cart-pill .pill-icon { font-size: 15px; }
.mobile-cart-pill .pill-count {
    background: rgba(255,255,255,.25);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 12px;
}
.mobile-cart-pill.has-items { display: flex; }

/* ═══════════════════════════════════════════════════════
   GUIDE MODAL
   ═══════════════════════════════════════════════════════ */
.guide-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(18,33,67,.6);
    z-index: 400;
    align-items: center; justify-content: center;
    padding: 20px;
}
.guide-overlay.open { display: flex; }
.guide-modal {
    background: var(--white);
    border-radius: 14px;
    width: 100%; max-width: 520px;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(18,33,67,.3);
    border-top: 4px solid var(--navy);
}
.guide-head {
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 16px;
}
.guide-head h3 { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--navy); }
.guide-head p { font-size: 12px; color: var(--teal); margin-top: 2px; }
.guide-close {
    background: none; border: none;
    font-size: 20px; color: var(--teal);
    cursor: pointer; padding: 0 4px; line-height: 1;
    flex-shrink: 0; margin-top: 2px;
}
.guide-close:hover { color: var(--red); }
.guide-body { padding: 20px 28px 28px; }
.guide-section { margin-bottom: 22px; }
.guide-section:last-child { margin-bottom: 0; }
.guide-section-title {
    font-family: var(--font-head);
    font-size: 10px; font-weight: 900; color: var(--teal);
    text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.guide-steps { display: flex; flex-direction: column; gap: 8px; }
.guide-step { display: flex; gap: 12px; align-items: flex-start; }
.guide-step-num {
    width: 22px; height: 22px;
    background: var(--navy); color: var(--white);
    border-radius: 50%; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}
.guide-step-text { font-size: 13px; color: var(--navy); line-height: 1.5; }
.guide-step-text span { color: var(--teal); }
.guide-note {
    background: #fef9ec;
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    font-size: 12px; color: var(--navy); line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════ */
.sl-loading-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}
.sl-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.sl-catalog-error {
    color: var(--red);
    font-size: 13px;
    padding: 20px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .main-layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
    .cart-panel {
        border-left: none;
        border-top: 1px solid var(--border);
        max-height: 360px;
    }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .header-date, .header-datetime { display: none; }
}
@media (max-width: 540px) {
    /* Preserve safe-area-inset-top so header background fills the Dynamic Island /
       notch region on iOS web apps; only shrink the horizontal padding. */
    .kiosk-header {
        padding: env(safe-area-inset-top) 16px 0;
        /* height already inherits calc(64px + env(safe-area-inset-top)) */
    }
    .products-panel { padding: 16px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-bar { padding: 0 16px; }
    .modal-body { padding: 20px; }
    .modal-head { padding: 20px 20px 16px; }
}