/* ==========================================
   Zorro's Pizza & Bakery — Self-Order Kiosk
   Premium warm kiosk design system
   Palette: Warm dark tones + fiery orange/red accents + cream/gold text
========================================== */

/* ─── DESIGN TOKENS (reuse POS variables, extend with kiosk-specific) ─── */
:root {
    /* Warm Dark Palette */
    --k-bg-1: #1a1008;
    --k-bg-2: #241508;
    --k-bg-3: #2d1b00;
    --k-bg-card: rgba(45, 27, 0, 0.6);
    --k-bg-glass: rgba(255, 255, 255, 0.04);

    /* Fiery Accents */
    --k-orange: #e8522a;
    --k-orange-2: #ff6b35;
    --k-orange-glow: rgba(232, 82, 42, 0.35);
    --k-red: #d93025;
    --k-gold: #d4a857;
    --k-gold-light: #f0c060;

    /* Text */
    --k-cream: #f5e6c8;
    --k-cream-muted: rgba(245, 230, 200, 0.65);
    --k-cream-dim: rgba(245, 230, 200, 0.35);
    --k-white: #ffffff;

    /* Borders */
    --k-border: rgba(255, 220, 150, 0.12);
    --k-border-glow: rgba(232, 82, 42, 0.3);

    /* Typography */
    --k-font: 'Outfit', sans-serif;

    /* Transitions */
    --k-transition: 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
    --k-transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Sizing */
    --k-radius: 20px;
    --k-radius-sm: 12px;
    --k-radius-pill: 50px;
    --k-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    --k-glow-orange: 0 0 20px rgba(232, 82, 42, 0.4), 0 0 60px rgba(232, 82, 42, 0.15);
}

/* ─── GLOBAL RESET ─── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--k-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--k-bg-1);
    color: var(--k-cream);
    font-size: 16px;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
}

input {
    outline: none;
    user-select: text;
}

/* Accessibility: restore a visible focus ring for keyboard/switch-access users
   (the blanket outline:none above removes it for mouse/touch). :focus-visible
   only shows for keyboard-style focus, so touch customers never see it. */
button:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--k-orange-2, #ff7a4d);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Accessibility: honor the OS "reduce motion" setting — disable the attract-loop
   particles, floating emojis, gradient orbs, and mic rings for customers who are
   motion-sensitive. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,220,150,0.15); border-radius: 4px; }

/* ─── KIOSK SCREENS ─── */
.kiosk-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: none;
    flex-direction: column;
    background: var(--k-bg-1);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.kiosk-screen.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.kiosk-screen.slide-out {
    opacity: 0;
    transform: translateY(-12px);
}


/* ══════════════════════════════════════════
   SCREEN 1: IDLE / ATTRACT
══════════════════════════════════════════ */
#screen-idle {
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at 50% 40%, #3d1f00 0%, #1a1008 60%, #0d0804 100%);
}

.idle-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.idle-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    animation: orb-float 12s ease-in-out infinite;
}

.orb1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(232,82,42,0.6), transparent 70%);
    top: -200px; left: -150px;
    animation-delay: 0s;
}
.orb2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212, 168, 87, 0.4), transparent 70%);
    bottom: -150px; right: -100px;
    animation-delay: 4s;
}
.orb3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.3), transparent 70%);
    top: 30%; left: 60%;
    animation-delay: 8s;
}

@keyframes orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(20px, -30px) scale(1.05); }
    66%       { transform: translate(-15px, 20px) scale(0.97); }
}

.idle-lang-toggle {
    position: absolute;
    top: 28px; right: 32px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.lang-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--k-border);
    color: var(--k-cream-muted);
    padding: 8px 16px;
    border-radius: var(--k-radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--k-transition);
}
.lang-btn:hover, .lang-btn.active {
    background: rgba(232, 82, 42, 0.2);
    border-color: var(--k-orange);
    color: var(--k-cream);
}

.idle-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    pointer-events: auto;
}

.idle-logo-icon {
    font-size: 5rem;
    filter: drop-shadow(0 0 20px rgba(232,82,42,0.6));
    animation: logo-pulse 3s ease-in-out infinite;
}

/* Real Zorro's logo on idle screen */
.idle-logo-img {
    width: 340px;
    max-width: 90vw;
    filter: drop-shadow(0 0 30px rgba(232,82,42,0.5));
    animation: logo-pulse 3s ease-in-out infinite;
}

/* Real Zorro's logo in header bar */
.kiosk-brand-logo-img {
    height: 52px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

@keyframes logo-pulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 20px rgba(232,82,42,0.5)); }
    50%       { transform: scale(1.04); filter: drop-shadow(0 0 40px rgba(232,82,42,0.8)); }
}

.idle-brand-name {
    font-size: 5.5rem;
    font-weight: 800;
    color: var(--k-cream);
    line-height: 1;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #f5e6c8 0%, #e8522a 50%, #d4a857 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.idle-brand-sub {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--k-cream-muted);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: -8px;
}

.idle-location {
    font-size: 0.95rem;
    color: var(--k-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Floating Emojis */
.floating-emojis {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.float-emoji {
    position: absolute;
    bottom: -60px;
    left: var(--x);
    font-size: 2.2rem;
    opacity: 0;
    animation: float-up var(--dur) var(--delay) ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

@keyframes float-up {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
    10%  { opacity: 0.8; }
    80%  { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-110vh) rotate(30deg); }
}

/* Tap to Order Button */
.tap-to-order-btn {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--k-orange), #ff4a1a);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    padding: 26px 64px;
    border-radius: var(--k-radius-pill);
    letter-spacing: 3px;
    text-transform: uppercase;
    box-shadow: 0 8px 40px rgba(232,82,42,0.5), 0 0 0 0 rgba(232,82,42,0.3);
    animation: cta-pulse 2.4s ease-in-out infinite;
    transition: all var(--k-transition-spring);
    border: 2px solid rgba(255,255,255,0.15);
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}
.tap-to-order-btn:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 16px 60px rgba(232,82,42,0.65), 0 0 0 12px rgba(232,82,42,0.08);
}
.tap-to-order-btn:active {
    transform: scale(0.97);
}

@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 8px 40px rgba(232,82,42,0.5), 0 0 0 0 rgba(232,82,42,0.3); }
    50%       { box-shadow: 0 8px 50px rgba(232,82,42,0.7), 0 0 0 20px rgba(232,82,42,0.0); }
}

.idle-tagline {
    font-size: 1.1rem;
    color: var(--k-cream-muted);
    letter-spacing: 2px;
    font-weight: 300;
}

.idle-payment-notice {
    margin-top: 18px;
    font-size: 1.05rem;
    color: var(--k-cream);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--k-border);
    padding: 10px 22px;
    border-radius: var(--k-radius-pill);
    letter-spacing: 0.5px;
}

/* AI Badge */
.ai-badge {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--k-border);
    padding: 8px 20px;
    border-radius: var(--k-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--k-cream-dim);
    text-transform: uppercase;
}


/* ══════════════════════════════════════════
   KIOSK HEADER (Screens 2–5)
══════════════════════════════════════════ */
.kiosk-header {
    height: 80px;
    min-height: 80px;
    background: linear-gradient(180deg, rgba(26,16,8,0.98) 0%, rgba(36,21,8,0.95) 100%);
    border-bottom: 1px solid var(--k-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    gap: 16px;
    z-index: 20;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.kiosk-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.kiosk-header-center {
    flex: 1;
    text-align: center;
    overflow: hidden;
}

.kiosk-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Brand in header */
.kiosk-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.kiosk-brand-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 8px rgba(232,82,42,0.5));
}
.kiosk-brand-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--k-cream);
    line-height: 1;
}
.kiosk-brand-sub {
    font-size: 0.7rem;
    color: var(--k-cream-muted);
    letter-spacing: 1px;
    font-weight: 400;
}

/* Home greeting */
.home-greeting {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--k-cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Back button */
.back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--k-border);
    color: var(--k-cream);
    padding: 10px 20px;
    border-radius: var(--k-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    transition: all var(--k-transition);
    min-height: 52px;
}
.back-btn:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,220,150,0.25);
}

/* Items screen title */
.items-screen-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--k-cream);
}

/* Lang toggle in header */
.lang-toggle-header {
    display: flex;
    background: rgba(0,0,0,0.3);
    border-radius: var(--k-radius-pill);
    padding: 3px;
    gap: 2px;
}
.lang-btn-sm {
    background: transparent;
    border: none;
    color: var(--k-cream-muted);
    padding: 6px 12px;
    border-radius: var(--k-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all var(--k-transition);
}
.lang-btn-sm.active {
    background: var(--k-orange);
    color: #fff;
}

/* Mic button */
.header-mic-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(232,82,42,0.12);
    border: 1px solid rgba(232,82,42,0.3);
    color: var(--k-orange-2);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--k-transition);
}
.header-mic-btn:hover {
    background: rgba(232,82,42,0.25);
    box-shadow: 0 0 15px rgba(232,82,42,0.3);
}
.header-mic-btn.listening {
    background: rgba(220,50,50,0.25);
    border-color: rgba(220,50,50,0.5);
    color: #ff4444;
    animation: mic-listening-pulse 1s ease-in-out infinite;
}
@keyframes mic-listening-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,50,50,0.4); }
    50%       { box-shadow: 0 0 0 12px rgba(220,50,50,0.0); }
}

/* Cart button */
.header-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 52px; height: 52px;
    border-radius: var(--k-radius-sm);
    background: rgba(212,168,87,0.12);
    border: 1px solid rgba(212,168,87,0.3);
    color: var(--k-gold);
    font-size: 1.3rem;
    transition: all var(--k-transition);
}
.header-cart-btn:hover {
    background: rgba(212,168,87,0.22);
    transform: scale(1.05);
}
.cart-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--k-orange);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    min-width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--k-bg-1);
    animation: badge-pop 0.3s var(--k-transition-spring);
}
@keyframes badge-pop {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Add More button */
.add-more-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(232,82,42,0.12);
    border: 1px solid rgba(232,82,42,0.3);
    color: var(--k-orange-2);
    padding: 10px 20px;
    border-radius: var(--k-radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all var(--k-transition);
    min-height: 52px;
}
.add-more-btn:hover {
    background: rgba(232,82,42,0.22);
}


/* ══════════════════════════════════════════
   SCREEN 2: CATEGORY GRID
══════════════════════════════════════════ */
.home-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 28px 120px;
    background: linear-gradient(180deg, #1a1008 0%, #1f1408 100%);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.category-card {
    background: linear-gradient(145deg, rgba(45,27,0,0.8) 0%, rgba(36,21,8,0.9) 100%);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all var(--k-transition-spring);
    position: relative;
    overflow: hidden;
}
.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(232,82,42,0.08), transparent 70%);
    opacity: 0;
    transition: opacity var(--k-transition);
}
.category-card:hover {
    transform: scale(1.04) translateY(-4px);
    border-color: rgba(232,82,42,0.4);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,82,42,0.2);
}
.category-card:hover::before {
    opacity: 1;
}
.category-card:active {
    transform: scale(0.98);
}

.category-card.has-photo {
    padding-top: 18px;
}

.featured-card {
    background: linear-gradient(145deg, rgba(50,30,5,0.9) 0%, rgba(40,25,5,0.95) 100%);
    border-color: rgba(212,168,87,0.2);
}
.featured-card:hover {
    border-color: rgba(212,168,87,0.5);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(212,168,87,0.1);
}

.cat-emoji {
    font-size: 3rem;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
    transition: transform var(--k-transition-spring);
}
.category-card:hover .cat-emoji {
    transform: scale(1.15) rotate(-5deg);
}

.cat-photo-wrap {
    width: 100%;
    height: 120px;
    border-radius: calc(var(--k-radius) - 4px);
    overflow: hidden;
    background: rgba(0,0,0,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cat-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.category-card:hover .cat-photo {
    transform: scale(1.06);
}

.cat-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--k-cream);
    text-align: center;
}

.cat-desc {
    font-size: 0.8rem;
    color: var(--k-cream-muted);
    text-align: center;
    line-height: 1.4;
    font-weight: 300;
}


/* ══════════════════════════════════════════
   SCREEN 3: ITEMS GRID
══════════════════════════════════════════ */
.items-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 24px 120px;
    background: linear-gradient(180deg, #1a1008 0%, #1f1408 100%);
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Item Card */
.item-card {
    background: linear-gradient(145deg, rgba(45,27,0,0.85) 0%, rgba(36,21,8,0.95) 100%);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
    transition: all var(--k-transition-spring);
    position: relative;
    overflow: hidden;
}
.item-card:hover {
    transform: scale(1.03) translateY(-3px);
    border-color: rgba(232,82,42,0.35);
    box-shadow: 0 10px 35px rgba(0,0,0,0.5);
}
.item-card:active {
    transform: scale(0.97);
}

/* Text content area below the photo */
.item-card-name,
.item-card-desc,
.item-card-footer {
    padding-left: 16px;
    padding-right: 16px;
}
.item-card-name { padding-top: 14px; }
.item-card-footer { padding-bottom: 14px; }

.item-card-img-wrap {
    width: 100%;
    height: 170px;
    border-radius: calc(var(--k-radius) - 4px);
    overflow: hidden;
    position: relative;
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
}

.item-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
    display: block;
}

.item-card:hover .item-card-img {
    transform: scale(1.07);
}

.item-photo-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 5px 9px;
    border-radius: var(--k-radius-pill);
    background: rgba(18, 13, 8, 0.78);
    color: var(--k-gold);
    border: 1px solid rgba(212,168,87,0.35);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.24);
}

.item-card-emoji {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}

/* Cash lives at the register — friendly pointer under the payment options */
.cash-notice {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(212,168,87,0.08);
    border: 1px dashed rgba(212,168,87,0.35);
    border-radius: var(--k-radius);
    font-size: 0.92rem;
    color: var(--k-gold);
}

/* Staff-facing device-provisioning warning on the attract screen */
.provisioning-banner {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    max-width: 90%;
    padding: 14px 24px;
    background: rgba(120, 20, 10, 0.92);
    color: #fff;
    border: 2px solid #ff6b4a;
    border-radius: var(--k-radius);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}
.provisioning-banner code {
    background: rgba(0,0,0,0.35);
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
}

/* Sold-out (86'd) items stay visible but can't be added */
.item-card.sold-out {
    cursor: not-allowed;
    opacity: 0.55;
}
.item-card.sold-out:hover {
    transform: none;
    border-color: var(--k-border);
    box-shadow: none;
}
.item-card.sold-out .item-card-img {
    filter: grayscale(1);
}
.sold-out-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    z-index: 2;
    background: rgba(18, 13, 8, 0.88);
    color: #ff6b4a;
    border: 2px solid #ff6b4a;
    font-size: 0.95rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--k-radius-pill);
    backdrop-filter: blur(6px);
}

/* "Popular" / "NEW" badge on photos */
.item-card-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, var(--k-orange), #ff3a10);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: var(--k-radius-pill);
    text-transform: uppercase;
}

.item-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--k-cream);
    line-height: 1.3;
}

.item-card-desc {
    font-size: 0.78rem;
    color: var(--k-cream-muted);
    line-height: 1.4;
    flex: 1;
    font-weight: 300;
}

.item-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.item-card-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--k-gold);
}
.item-card-price.has-plus::after {
    content: '+';
    font-size: 0.75rem;
    color: var(--k-cream-muted);
}

.item-add-btn {
    background: linear-gradient(135deg, var(--k-orange), #ff4a1a);
    color: #fff;
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--k-transition-spring);
    box-shadow: 0 4px 12px rgba(232,82,42,0.35);
    flex-shrink: 0;
}
.item-add-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(232,82,42,0.5);
}
.item-add-btn:active {
    transform: scale(0.9);
}
.item-add-btn.pizza-customize-btn {
    width: auto;
    min-width: 116px;
    padding: 0 16px;
    border-radius: 999px;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 800;
}


/* ══════════════════════════════════════════
   FLOATING MIC BUTTON
══════════════════════════════════════════ */
.floating-mic {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d93025, #e8522a);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(217,48,37,0.4);
    transition: all var(--k-transition-spring);
    border: 2px solid rgba(255,255,255,0.15);
}
.floating-mic:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(217,48,37,0.55);
}
.floating-mic:active {
    transform: scale(0.92);
}
.floating-mic.listening {
    animation: floating-mic-pulse 1s ease-in-out infinite;
    background: linear-gradient(135deg, #ff2020, #ff5520);
}
@keyframes floating-mic-pulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(255,32,32,0.5), 0 0 0 0 rgba(255,32,32,0.3); }
    50%       { box-shadow: 0 8px 24px rgba(255,32,32,0.7), 0 0 0 18px rgba(255,32,32,0.0); }
}

.mic-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(217,48,37,0.3);
    animation: mic-ring-expand 2s ease-out infinite;
}
.mic-ring.ring2 {
    inset: -16px;
    animation-delay: 0.7s;
    border-color: rgba(217,48,37,0.15);
}
@keyframes mic-ring-expand {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}


/* ══════════════════════════════════════════
   SCREEN 4: CART
══════════════════════════════════════════ */
.cart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1008 0%, #1f1408 100%);
}

.cart-items-list {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
}

.cart-item-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(45,27,0,0.8) 0%, rgba(36,21,8,0.9) 100%);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    margin-bottom: 14px;
    animation: cart-item-appear 0.3s var(--k-transition-spring);
}
@keyframes cart-item-appear {
    0%   { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.cart-item-emoji {
    font-size: 2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.cart-item-info {
    flex: 1;
}
.cart-item-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--k-cream);
}
.cart-item-mods {
    font-size: 0.78rem;
    color: var(--k-cream-muted);
    margin-top: 4px;
    line-height: 1.4;
}

.cart-item-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.cart-item-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--k-gold);
}
.cart-qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.3);
    border-radius: var(--k-radius-pill);
    padding: 4px 6px;
}
.cart-qty-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--k-border);
    color: var(--k-cream);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--k-transition);
}
.cart-qty-btn:hover {
    background: rgba(232,82,42,0.2);
    border-color: rgba(232,82,42,0.4);
    color: var(--k-orange-2);
}
.cart-qty-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--k-cream);
    min-width: 24px;
    text-align: center;
}
.cart-remove-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(217,48,37,0.1);
    border: 1px solid rgba(217,48,37,0.2);
    color: #ff6b6b;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--k-transition);
    /* Separate the destructive control from the + button to avoid mis-taps. */
    margin-left: 10px;
}
.cart-remove-btn:hover {
    background: rgba(217,48,37,0.25);
    color: #ff3333;
}

.cart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--k-cream-muted);
    text-align: center;
    padding: 60px;
}
.cart-empty-icon { font-size: 5rem; opacity: 0.3; }
.cart-empty p { font-size: 1.4rem; font-weight: 600; color: var(--k-cream); }
.cart-empty-sub { font-size: 0.9rem; color: var(--k-cream-muted); }

.cart-summary {
    background: linear-gradient(0deg, rgba(26,16,8,0.98) 0%, rgba(26,16,8,0.9) 100%);
    border-top: 1px solid var(--k-border);
    padding: 24px 28px;
}

.cart-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--k-cream-muted);
}
.cart-total-row.grand {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--k-cream);
    padding-top: 12px;
    border-top: 1px dashed var(--k-border);
    margin-top: 4px;
}

/* ══ Kitchen tip (walk-up kiosk — NOT a driver tip) ══
   Owner-approved 2026-08-07. Targets are larger than the web page's 44px
   because this is a standing guest on a wall-mounted touchscreen.
   NOTE: the kiosk loads THIS stylesheet (website/kiosk.css), not
   frontend/kiosk.css — that one is a different, unloaded copy. */
.kiosk-tip {
    margin: 14px 0 10px;
    padding-top: 14px;
    border-top: 1px dashed var(--k-border);
}
.kiosk-tip-head {
    font-size: 1rem;
    font-weight: 800;
    color: var(--k-cream);
    margin-bottom: 10px;
}
.kiosk-tip-options { display: flex; flex-wrap: wrap; gap: 8px; }
.kiosk-tip-btn {
    flex: 1 1 76px;
    min-width: 76px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    border: 1.5px solid var(--k-border);
    background: var(--k-bg-glass);
    color: var(--k-cream);
    font-family: var(--k-font);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.15;
}
/* Selected chip. The foreground is deliberately DARK, not white: --k-orange
   resolves to the decorative brand coral #ff4e50 at runtime, and white on that
   measures 3.25:1 — under the 4.5:1 WCAG AA floor (a11y audit 2026-07-26, the
   same finding that produced the --red-cta-* tokens on the order page). Dark
   ink on the coral measures ~6.6:1. Do not "fix" this back to white. */
.kiosk-tip-btn[aria-pressed="true"] {
    background: var(--k-orange);
    border-color: var(--k-orange);
    color: #15110e;
    box-shadow: 0 0 18px var(--k-orange-glow);
}
.kiosk-tip-btn:focus-visible { outline: 3px solid var(--k-gold); outline-offset: 3px; }
.kiosk-tip-amt { font-size: 0.75rem; font-weight: 600; opacity: 0.85; }
.kiosk-tip-amt:empty { display: none; }
.kiosk-tip-custom-wrap { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
/* A class-level display beats the UA's [hidden]{display:none} — without this
   the custom field renders open before anyone taps "Custom". */
.kiosk-tip-custom-wrap[hidden] { display: none; }
.kiosk-tip-custom-wrap label {
    font-size: 0.9rem; font-weight: 700; color: var(--k-cream-muted); white-space: nowrap;
}
.kiosk-tip-custom-wrap input {
    flex: 1; min-width: 0; min-height: 60px;
    padding: 10px 14px; border-radius: 12px;
    border: 1.5px solid var(--k-border);
    background: var(--k-bg-card); color: var(--k-cream);
    font-family: var(--k-font); font-size: 1.05rem;
}
.kiosk-tip-note {
    font-size: 0.8rem; color: var(--k-cream-dim); margin: 10px 0 0; line-height: 1.4;
}
.cart-total-row.grand span:last-child {
    color: var(--k-gold);
}

.btn-checkout-kiosk {
    width: 100%;
    background: linear-gradient(135deg, var(--k-orange), #ff3a10);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    padding: 22px;
    border-radius: var(--k-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(232,82,42,0.4);
    transition: all var(--k-transition-spring);
    letter-spacing: 0.5px;
    min-height: 68px;
}
.btn-checkout-kiosk:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(232,82,42,0.55);
}
.btn-checkout-kiosk:active {
    transform: translateY(1px);
}


/* ══════════════════════════════════════════
   SCREEN 5: CHECKOUT
══════════════════════════════════════════ */
.checkout-body {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px 60px;
    background: linear-gradient(180deg, #1a1008 0%, #1f1408 100%);
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.checkout-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.checkout-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--k-cream-muted);
}

.checkout-name-input {
    width: 100%;
    background: rgba(45,27,0,0.6);
    border: 2px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    padding: 20px 24px;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--k-cream);
    transition: all var(--k-transition);
}
.checkout-name-input::placeholder {
    color: var(--k-cream-dim);
    font-weight: 300;
}
.checkout-name-input:focus {
    border-color: var(--k-orange);
    background: rgba(55,30,0,0.7);
    box-shadow: 0 0 0 3px rgba(232,82,42,0.15);
}

.checkout-help-box {
    border: 2px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    padding: 18px 20px;
    background: rgba(45,27,0,0.42);
    color: var(--k-cream-muted);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.checkout-alert {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--k-radius-sm);
    padding: 16px 18px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.checkout-alert.info {
    background: rgba(45, 117, 255, 0.12);
    color: #b9d3ff;
    border-color: rgba(45, 117, 255, 0.35);
}

.checkout-alert.error {
    background: rgba(255, 58, 16, 0.14);
    color: #ffd2c6;
    border-color: rgba(255, 58, 16, 0.42);
}

/* Order Type Toggle */
.order-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.order-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px;
    border-radius: var(--k-radius);
    background: rgba(45,27,0,0.6);
    border: 2px solid var(--k-border);
    color: var(--k-cream-muted);
    font-size: 1.1rem;
    font-weight: 700;
    transition: all var(--k-transition-spring);
    min-height: 100px;
}
.order-type-btn i {
    font-size: 1.8rem;
}
.order-type-btn:hover {
    border-color: rgba(232,82,42,0.3);
    color: var(--k-cream);
}
.order-type-btn.active {
    background: linear-gradient(145deg, rgba(232,82,42,0.2), rgba(255,75,30,0.1));
    border-color: var(--k-orange);
    color: var(--k-orange-2);
    box-shadow: 0 0 20px rgba(232,82,42,0.15);
}

/* Table Grid */
.table-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.table-btn {
    padding: 16px 8px;
    border-radius: var(--k-radius-sm);
    background: rgba(45,27,0,0.6);
    border: 1px solid var(--k-border);
    color: var(--k-cream-muted);
    font-size: 1rem;
    font-weight: 700;
    transition: all var(--k-transition);
    min-height: 56px;
}
.table-btn:hover {
    border-color: rgba(232,82,42,0.3);
    color: var(--k-cream);
}
.table-btn.active {
    background: linear-gradient(135deg, rgba(232,82,42,0.25), rgba(232,82,42,0.1));
    border-color: var(--k-orange);
    color: var(--k-orange-2);
    font-weight: 800;
}

/* Payment Options */
.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.payment-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 20px;
    border-radius: var(--k-radius);
    background: rgba(45,27,0,0.6);
    border: 2px solid var(--k-border);
    color: var(--k-cream-muted);
    font-size: 1.1rem;
    font-weight: 700;
    transition: all var(--k-transition-spring);
    position: relative;
    min-height: 140px;
}
.payment-btn i { font-size: 2rem; }
.payment-btn small {
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--k-cream-dim);
}
.payment-btn:hover {
    border-color: rgba(232,82,42,0.3);
    color: var(--k-cream);
}
.payment-btn.active {
    background: linear-gradient(145deg, rgba(232,82,42,0.2), rgba(255,75,30,0.1));
    border-color: var(--k-orange);
    color: var(--k-orange-2);
}
.payment-badge {
    position: absolute;
    top: -12px;
    background: linear-gradient(135deg, var(--k-gold), var(--k-gold-light));
    color: #1a1008;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--k-radius-pill);
    letter-spacing: 1px;
}

/* Place Order Button */
.btn-place-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--k-orange), #ff3a10);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    padding: 26px;
    border-radius: var(--k-radius);
    box-shadow: 0 8px 32px rgba(232,82,42,0.4);
    transition: all var(--k-transition-spring);
    min-height: 76px;
    letter-spacing: 0.5px;
}
.btn-place-order:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 44px rgba(232,82,42,0.55);
}
.btn-place-order:active {
    transform: translateY(1px);
}
.btn-place-order:disabled,
.btn-place-order.is-loading {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}


/* ══════════════════════════════════════════
   SCREEN 6: CONFIRMATION
══════════════════════════════════════════ */
#screen-confirm {
    background: radial-gradient(ellipse at 50% 30%, #2d1b00 0%, #1a1008 70%);
}

.confirm-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    padding: 40px;
}

.confirm-checkmark {
    width: 120px; height: 120px;
}
.checkmark-svg {
    width: 100%; height: 100%;
}
.checkmark-circle {
    stroke: var(--k-orange);
    stroke-width: 2;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: circle-draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards;
}
.checkmark-check {
    stroke: var(--k-orange-2);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: check-draw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes circle-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes check-draw {
    to { stroke-dashoffset: 0; }
}

.confirm-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--k-cream);
    animation: confirm-appear 0.5s ease 0.6s both;
}
@keyframes confirm-appear {
    0%   { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

.confirm-ticket {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--k-gold);
    background: rgba(212,168,87,0.1);
    border: 1px solid rgba(212,168,87,0.3);
    padding: 12px 40px;
    border-radius: var(--k-radius-pill);
    animation: confirm-appear 0.5s ease 0.8s both;
}

.confirm-customer {
    font-size: 1.1rem;
    color: var(--k-cream-muted);
    animation: confirm-appear 0.5s ease 1s both;
}

.confirm-message {
    font-size: 1.4rem;
    color: var(--k-cream);
    font-weight: 600;
    animation: confirm-appear 0.5s ease 1.1s both;
}

.confirm-countdown {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--k-cream-muted);
    font-size: 0.9rem;
    animation: confirm-appear 0.5s ease 1.3s both;
}
.countdown-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--k-orange-2);
    min-width: 40px;
    text-align: center;
}

.btn-new-order {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(232,82,42,0.12);
    border: 1px solid rgba(232,82,42,0.3);
    color: var(--k-orange-2);
    font-size: 1rem;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: var(--k-radius-pill);
    transition: all var(--k-transition-spring);
    animation: confirm-appear 0.5s ease 1.4s both;
}
.btn-new-order:hover {
    background: rgba(232,82,42,0.22);
    transform: scale(1.04);
}

/* Itemized on-screen receipt + text-receipt button on the confirm screen */
.confirm-receipt {
    list-style: none;
    margin: 10px auto 0;
    padding: 14px 22px;
    max-width: 420px;
    max-height: 180px;
    overflow-y: auto;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    font-size: 0.95rem;
    text-align: left;
}
.confirm-receipt li { padding: 3px 0; }
.confirm-receipt .confirm-receipt-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--k-border);
    font-weight: 800;
    color: var(--k-gold);
}
.btn-text-receipt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    background: rgba(212,168,87,0.12);
    border: 1px solid rgba(212,168,87,0.35);
    color: var(--k-gold);
    font-size: 1rem;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: var(--k-radius-pill);
    transition: all var(--k-transition-spring);
}
.btn-text-receipt:hover { background: rgba(212,168,87,0.22); }
.btn-text-receipt:disabled { opacity: 0.5; cursor: default; }
.receipt-status {
    min-height: 1.3em;
    margin-top: 8px;
    font-size: 0.95rem;
    color: var(--k-gold);
}


/* ══════════════════════════════════════════
   VOICE OVERLAY
══════════════════════════════════════════ */
.voice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 60px;
}

.voice-modal {
    background: linear-gradient(180deg, rgba(36,21,8,0.98), rgba(26,16,8,0.99));
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius) var(--k-radius) 0 0;
    padding: 40px 40px 32px;
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: voice-slide-up 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes voice-slide-up {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

.voice-wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 60px;
}
.voice-bar {
    width: 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--k-orange), var(--k-orange-2));
    animation: voice-bar-dance 0.8s ease-in-out infinite;
    transform-origin: bottom;
}
.voice-bar:nth-child(1) { animation-delay: 0s;    height: 20px; }
.voice-bar:nth-child(2) { animation-delay: 0.1s;  height: 35px; }
.voice-bar:nth-child(3) { animation-delay: 0.2s;  height: 50px; }
.voice-bar:nth-child(4) { animation-delay: 0.05s; height: 45px; }
.voice-bar:nth-child(5) { animation-delay: 0.15s; height: 55px; }
.voice-bar:nth-child(6) { animation-delay: 0.25s; height: 30px; }
.voice-bar:nth-child(7) { animation-delay: 0.1s;  height: 20px; }

@keyframes voice-bar-dance {
    0%, 100% { transform: scaleY(0.3); }
    50%       { transform: scaleY(1); }
}

.voice-listening-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--k-orange-2);
    letter-spacing: 1px;
}

.voice-transcript {
    min-height: 60px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    padding: 16px 20px;
    width: 100%;
    font-size: 1.1rem;
    color: var(--k-cream);
    font-weight: 300;
    font-style: italic;
    text-align: center;
}

.voice-status {
    font-size: 0.85rem;
    color: var(--k-cream-muted);
    min-height: 20px;
}

.voice-cancel-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--k-border);
    color: var(--k-cream-muted);
    padding: 12px 32px;
    border-radius: var(--k-radius-pill);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all var(--k-transition);
}
.voice-cancel-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--k-cream);
}


/* ══════════════════════════════════════════
   BUILDER MODALS
══════════════════════════════════════════ */
.builder-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.builder-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
}

.builder-panel {
    position: relative;
    z-index: 1;
    width: 660px;
    max-width: 100%;
    background: linear-gradient(180deg, #231408 0%, #1a1008 100%);
    border-left: 1px solid var(--k-border);
    display: flex;
    flex-direction: column;
    animation: builder-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes builder-slide-in {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

.builder-header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--k-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.builder-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--k-cream);
}
.builder-close {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--k-border);
    color: var(--k-cream-muted);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--k-transition);
}
.builder-close:hover {
    background: rgba(220,50,50,0.15);
    color: #ff6b6b;
    border-color: rgba(220,50,50,0.3);
}

/* Steps Indicator */
.builder-steps-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    border-bottom: 1px solid var(--k-border);
    flex-shrink: 0;
    overflow-x: auto;
}
.step-dot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--k-cream-dim);
    white-space: nowrap;
}
.step-dot.active { color: var(--k-orange-2); }
.step-dot.done { color: var(--k-gold); }
.step-dot-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}
.step-dot.active .step-dot-num {
    background: rgba(232,82,42,0.2);
    border-color: var(--k-orange);
    color: var(--k-orange-2);
}
.step-dot.done .step-dot-num {
    background: rgba(212,168,87,0.15);
    border-color: var(--k-gold);
    color: var(--k-gold);
}
.step-divider {
    height: 1px;
    flex: 1;
    min-width: 12px;
    background: var(--k-border);
}

/* Running Price */
.builder-running-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 28px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--k-border);
    flex-shrink: 0;
    font-size: 0.9rem;
    color: var(--k-cream-muted);
}
.running-price-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--k-gold);
}

/* Builder Body (scrollable step content) */
.builder-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
}

.builder-step {
    animation: step-in 0.3s ease;
}
@keyframes step-in {
    0%   { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.builder-step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--k-cream);
    margin-bottom: 16px;
}

/* Option Cards inside builder */
.builder-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.builder-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: rgba(45,27,0,0.6);
    border: 2px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    cursor: pointer;
    transition: all var(--k-transition);
    color: var(--k-cream);
    text-align: left;
}
.builder-option:hover {
    border-color: rgba(232,82,42,0.35);
    background: rgba(55,30,0,0.7);
}
.builder-option.active {
    border-color: var(--k-orange);
    background: linear-gradient(135deg, rgba(232,82,42,0.18), rgba(232,82,42,0.06));
    box-shadow: 0 0 16px rgba(232,82,42,0.12);
}
.builder-option .opt-name {
    font-weight: 700;
    font-size: 1rem;
}
.builder-option .opt-sub {
    font-size: 0.78rem;
    color: var(--k-cream-muted);
    margin-top: 2px;
    font-weight: 300;
}
.builder-option .opt-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--k-gold);
    flex-shrink: 0;
    margin-left: 12px;
}
.builder-option .opt-check {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--k-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: transparent;
    flex-shrink: 0;
    margin-left: 12px;
    transition: all var(--k-transition);
}
.builder-option.active .opt-check {
    background: var(--k-orange);
    border-color: var(--k-orange);
    color: #fff;
}
.popular-badge {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--k-gold), var(--k-gold-light));
    color: #1a1008;
    padding: 3px 8px;
    border-radius: var(--k-radius-pill);
    margin-left: 8px;
    vertical-align: middle;
}

/* Multi-select grid (toppings, addons) */
.builder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.builder-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(45,27,0,0.6);
    border: 1.5px solid var(--k-border);
    border-radius: var(--k-radius-pill);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--k-cream-muted);
    transition: all var(--k-transition);
}
.builder-chip:hover {
    border-color: rgba(232,82,42,0.3);
    color: var(--k-cream);
}
.builder-chip.active {
    border-color: var(--k-orange);
    background: rgba(232,82,42,0.15);
    color: var(--k-orange-2);
}
.chip-price {
    font-size: 0.75rem;
    color: var(--k-gold);
    font-weight: 600;
}

/* Pizza topping coverage buttons */
.topping-coverage {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.cov-btn {
    padding: 4px 10px;
    border-radius: var(--k-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    border: 1.5px solid var(--k-border);
    color: var(--k-cream-dim);
    background: transparent;
    transition: all var(--k-transition);
}
.cov-btn.active {
    border-color: var(--k-orange);
    background: rgba(232,82,42,0.15);
    color: var(--k-orange-2);
}

/* Builder Footer */
.builder-footer {
    padding: 20px 28px;
    border-top: 1px solid var(--k-border);
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-builder-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    color: var(--k-cream-muted);
    font-size: 1rem;
    font-weight: 600;
    transition: all var(--k-transition);
    min-height: 60px;
}
.btn-builder-back:hover {
    background: rgba(255,255,255,0.08);
    color: var(--k-cream);
}

.btn-builder-next, .btn-builder-add {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(135deg, var(--k-orange), #ff3a10);
    border: none;
    border-radius: var(--k-radius-sm);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    transition: all var(--k-transition-spring);
    min-height: 60px;
    box-shadow: 0 4px 16px rgba(232,82,42,0.3);
}
.btn-builder-next:hover, .btn-builder-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232,82,42,0.45);
}
.btn-builder-add {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 4px 16px rgba(46,204,113,0.3);
}
.btn-builder-add:hover {
    box-shadow: 0 8px 24px rgba(46,204,113,0.45);
}

/* Review step */
.review-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--k-border);
    font-size: 0.95rem;
}
.review-row:last-child { border-bottom: none; }
.review-label { color: var(--k-cream-muted); }
.review-value { color: var(--k-cream); font-weight: 600; }
.review-total {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--k-gold);
}


/* ══════════════════════════════════════════
   MODIFIER MODAL GROUP STYLES
══════════════════════════════════════════ */
.modifier-group {
    margin-bottom: 24px;
}
.modifier-group:last-child {
    margin-bottom: 0;
}
.modifier-group-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--k-cream);
    margin-bottom: 12px;
}
.modifier-required {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--k-orange), #ff3a10);
    color: #fff;
    padding: 3px 8px;
    border-radius: var(--k-radius-pill);
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
}
.modifier-hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--k-cream-muted);
    margin-left: 4px;
}
/* Full-width add button when it's the only button in footer */
#modifier-modal .builder-footer {
    padding: 20px 28px;
}
#modifier-modal .btn-builder-add {
    width: 100%;
}


/* ══════════════════════════════════════════
   QTY PICKER MODAL
══════════════════════════════════════════ */
.qty-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-picker-panel {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #2d1b00 0%, #1a1008 100%);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    min-width: 340px;
    box-shadow: var(--k-shadow);
    animation: builder-panel-pop 0.35s var(--k-transition-spring);
}
@keyframes builder-panel-pop {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.qty-picker-item-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--k-cream);
    text-align: center;
}
.qty-picker-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--k-gold);
}

.qty-picker-controls {
    display: flex;
    align-items: center;
    gap: 24px;
}
.qty-big-btn {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(232,82,42,0.12);
    border: 1.5px solid rgba(232,82,42,0.35);
    color: var(--k-orange-2);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--k-transition-spring);
}
.qty-big-btn:hover {
    background: rgba(232,82,42,0.25);
    transform: scale(1.1);
}
.qty-big-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--k-cream);
    min-width: 50px;
    text-align: center;
}

/* Generic primary button */
.btn-primary {
    background: linear-gradient(135deg, var(--k-orange), #ff3a10);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    padding: 16px 36px;
    border-radius: var(--k-radius-sm);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--k-transition-spring);
    box-shadow: 0 4px 16px rgba(232,82,42,0.3);
    width: 100%;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232,82,42,0.45);
}


/* ══════════════════════════════════════════
   IDLE TIMEOUT TOAST
══════════════════════════════════════════ */
.timeout-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(36,21,8,0.97);
    border: 1px solid rgba(232,82,42,0.4);
    border-radius: var(--k-radius-pill);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 300;
    color: var(--k-cream);
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    animation: toast-appear 0.3s ease;
}
@keyframes toast-appear {
    0%   { transform: translateX(-50%) translateY(20px); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.timeout-toast i { color: var(--k-orange-2); }
.timeout-toast button {
    background: var(--k-orange);
    color: #fff;
    padding: 6px 18px;
    border-radius: var(--k-radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    transition: all var(--k-transition);
}
.timeout-toast button:hover {
    background: var(--k-orange-2);
}


/* ══════════════════════════════════════════
   CART FLASH NOTIFICATION
══════════════════════════════════════════ */
/* Generic notice toast (sold-out taps, menu reconnecting, builder errors) */
.kiosk-toast {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 13, 8, 0.94);
    color: #fff;
    border: 1px solid #ff6b4a;
    padding: 14px 26px;
    border-radius: var(--k-radius-pill);
    font-size: 0.98rem;
    font-weight: 700;
    z-index: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    max-width: 86%;
    text-align: center;
}

.cart-flash {
    position: fixed;
    top: 96px;
    right: 24px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
    padding: 14px 24px;
    border-radius: var(--k-radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 500;
    box-shadow: 0 8px 24px rgba(46,204,113,0.35);
    animation: flash-in 0.3s var(--k-transition-spring), flash-out 0.3s ease 2.2s forwards;
}
@keyframes flash-in {
    0%   { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes flash-out {
    0%   { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   Coastal Zorro's Theme Override
   Keeps the RM menu/modifier engine while restoring the public brand.
══════════════════════════════════════════════════════════════════ */
:root {
    --k-bg-1: #fdfbf7;
    --k-bg-2: #f0f7f7;
    --k-bg-3: #ffffff;
    --k-bg-card: #ffffff;
    --k-bg-glass: rgba(255, 255, 255, 0.78);
    --k-orange: #ff4e50;
    --k-orange-2: #e63946;
    --k-orange-glow: rgba(255, 78, 80, 0.22);
    --k-red: #e63946;
    /* Brand accents only (owner 2026-07-24: no blue/teal/mint on the kiosk —
       coral + sunny-gold must match /order and the website). --k-gold is the
       readable price/total accent on white, so it uses the darker coral. */
    --k-gold: #e63946;
    --k-gold-light: #ff6b6d;
    --k-cream: #2b3a42;
    --k-cream-muted: #657780;
    --k-cream-dim: rgba(101, 119, 128, 0.62);
    --k-white: #ffffff;
    --k-border: #e9e4db;
    --k-border-glow: rgba(255, 78, 80, 0.25);
    --k-radius: 12px;
    --k-radius-sm: 10px;
    --k-shadow: 0 18px 42px rgba(43, 58, 66, 0.10);
    --k-glow-orange: 0 12px 28px rgba(255, 78, 80, 0.18);
}

html,
body,
.kiosk-screen {
    background: #fdfbf7;
    color: #2b3a42;
}

#screen-idle {
    background:
        linear-gradient(180deg, rgba(240, 247, 247, 0.92), rgba(253, 251, 247, 0.96)),
        url("assets/hero-coastal-kitchen.svg") center bottom / min(1100px, 120vw) auto no-repeat;
}

.idle-bg {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 78, 80, 0.12), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(255, 209, 102, 0.30), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(253, 251, 247, 0.76));
}

.idle-gradient-orb {
    display: none;
}

.idle-content {
    gap: 24px;
    background: rgba(253, 251, 247, 0.78);
    border: 1px solid rgba(233, 228, 219, 0.86);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(43, 58, 66, 0.12);
    padding: clamp(24px, 4vw, 44px);
    max-width: min(760px, calc(100vw - 32px));
}

.idle-logo-img {
    width: min(420px, 82vw);
    filter: drop-shadow(0 12px 26px rgba(43, 58, 66, 0.10));
    animation: none;
}

.kiosk-brand-logo-img {
    height: 58px;
    filter: none;
}

@keyframes logo-pulse {
    0%, 100% { transform: none; filter: none; }
    50% { transform: none; filter: none; }
}

.idle-location,
.idle-tagline {
    color: #657780;
    letter-spacing: 0;
    font-weight: 700;
}

.idle-location {
    margin-top: 12px;
    color: #e63946;
}

.float-emoji,
.cat-emoji,
.item-card-emoji {
    filter: none;
}

.tap-to-order-btn,
.btn-primary,
.primary-btn,
.checkout-btn,
.confirm-btn,
.cart-checkout-btn,
.btn-builder-add {
    background: linear-gradient(135deg, #ff4e50, #e63946);
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(255, 78, 80, 0.25);
    letter-spacing: 0;
}

@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 14px 30px rgba(255, 78, 80, 0.25); }
    50% { box-shadow: 0 18px 42px rgba(255, 78, 80, 0.34); }
}

.ai-badge {
    background: rgba(255, 255, 255, 0.78);
    border-color: #e9e4db;
    color: #e63946;
    letter-spacing: 0;
    box-shadow: 0 8px 22px rgba(43, 58, 66, 0.08);
}

.idle-lang-toggle,
.lang-toggle-header {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #e9e4db;
    border-radius: 999px;
    padding: 4px;
}

.lang-btn,
.lang-btn-sm {
    color: #657780;
    border-color: transparent;
    border-radius: 999px;
    letter-spacing: 0;
}

.lang-btn:hover,
.lang-btn.active,
.lang-btn-sm.active {
    background: #ff4e50;
    color: #ffffff;
    border-color: #ff4e50;
}

.kiosk-header {
    background: rgba(253, 251, 247, 0.94);
    border-bottom: 1px solid #e9e4db;
    box-shadow: 0 8px 24px rgba(43, 58, 66, 0.06);
}

.home-body,
.items-body,
.cart-body,
.checkout-body,
.builder-body {
    background: linear-gradient(180deg, #fdfbf7 0%, #f0f7f7 100%);
}

.category-card,
.item-card,
.cart-panel,
.checkout-panel,
.confirmation-card,
.modal-content,
.builder-panel {
    background: #ffffff;
    border: 1px solid #e9e4db;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(43, 58, 66, 0.08);
}

.category-card:hover,
.item-card:hover,
.builder-chip:hover,
.builder-chip.selected {
    border-color: #ffd166;
    box-shadow: 0 18px 36px rgba(43, 58, 66, 0.12);
}

.featured-card {
    border-color: rgba(255, 209, 102, 0.78);
    background: linear-gradient(180deg, #ffffff, #fffaf0);
}

.home-greeting,
.items-screen-title,
.kiosk-brand-name,
.cat-name,
.item-card-name,
.cart-item-name,
.checkout-title,
.confirmation-title,
.builder-title,
.modifier-group-header h3 {
    color: #2b3a42;
    letter-spacing: 0;
}

.kiosk-brand-sub,
.cat-desc,
.item-card-desc,
.modifier-hint {
    color: #657780;
    letter-spacing: 0;
}

.item-card-price,
.cart-total-amount,
.checkout-total,
.confirmation-total,
.builder-running-price {
    color: #e63946;
}

.back-btn,
.add-more-btn,
.header-cart-btn,
.header-mic-btn,
.builder-nav-btn,
.builder-close {
    background: #ffffff;
    border-color: #e9e4db;
    color: #ff4e50;
    border-radius: 10px;
}

.header-cart-btn,
.add-more-btn {
    color: #ff4e50;
}

.cart-badge,
.item-card-tag,
.cat-count,
.modifier-required {
    background: #ff4e50;
    color: #ffffff;
    border-color: #ffffff;
}

.secondary-btn,
.cancel-btn {
    background: #ffffff;
    color: #e63946;
    border: 2px solid #ff4e50;
    border-radius: 12px;
}

/* Badges stay true sunny-gold (the coral --k-gold above would turn them red) */
.payment-badge,
.popular-badge {
    background: linear-gradient(135deg, #ffd166, #ffdd88);
    color: #2b3a42;
}

/* .checkout-alert.info kept its dark-theme pale-blue text — unreadable and
   off-brand on the light reskin. */
.checkout-alert.info {
    background: rgba(255, 209, 102, 0.18);
    color: #2b3a42;
    border-color: rgba(255, 209, 102, 0.65);
}

.timeout-toast {
    background: rgba(253, 251, 247, 0.96);
    border-color: #e9e4db;
    color: #2b3a42;
    box-shadow: 0 12px 28px rgba(43, 58, 66, 0.12);
}

@media (max-width: 768px) {
    #screen-idle {
        background-size: 900px auto;
        background-position: center bottom;
    }

    .idle-content {
        padding: 22px;
        gap: 18px;
    }

    .tap-to-order-btn {
        width: min(460px, calc(100vw - 48px));
        justify-content: center;
        padding: 22px 24px;
        font-size: 1.35rem;
    }
}

/* ── Customize modal readability (2026-07-12) ──────────────────────────
   The coastal-light reskin above overrides theme variables but
   .builder-chip kept its hardcoded dark background from the original
   warm-dark palette, leaving topping names dark-on-dark and unreadable
   on the white builder panel. Owner report: "names are not very
   visible / not very clean". */
.builder-chip {
    background: #ffffff;
    border: 1.5px solid #d8d2c6;
    color: #2b3a42;
    font-size: 1rem;
    padding: 14px 20px;
}
.builder-chip:hover {
    color: #2b3a42;
    border-color: #ffd166;
}
.builder-chip.active {
    background: rgba(255, 78, 80, 0.10);
    border-color: #ff4e50;
    color: #2b3a42;
    box-shadow: 0 0 0 1px #ff4e50 inset;
}
.builder-chip.active::before {
    content: "✓ ";
    color: #ff4e50;
    font-weight: 900;
}
.builder-chip .chip-price,
.chip-price {
    color: #e63946;
    font-weight: 700;
    font-size: 0.85rem;
}
.builder-running-price {
    background: #f0f7f7;
    border-bottom: 1px solid #e9e4db;
    color: #2b3a42;
    font-weight: 600;
}
.running-price-value {
    color: #e63946;
}
.modifier-group-header h3 {
    color: #2b3a42;
    font-size: 1.05rem;
}
.modifier-hint {
    color: #657780;
    font-weight: 500;
}
.modifier-required {
    color: #ffffff;
    background: #e63946;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 700;
}

/* ── Dietary filter pills + calorie estimates (append-only: keep AFTER
      the light-theme overrides above) ─────────────────────────────── */
.diet-pills {
    display: flex;
    flex-wrap: wrap;   /* five pills (incl. egg-free / dairy-free) overflow 1 row */
    gap: 10px;
    padding: 4px 2px 10px;
}
.diet-pills:empty { display: none; }
.diet-pill {
    padding: 10px 20px;
    border-radius: 999px;
    border: 2px solid rgba(46, 125, 50, 0.4);
    background: transparent;
    color: inherit;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.diet-pill.active {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    border-color: transparent;
    color: #fff;
}
.item-card-facts {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 2px;
}
/* Shared-kitchen advisory shown with the egg-free / dairy-free pills. Full-row
   so it wraps under them instead of squeezing between pills. */
.diet-advisory {
    flex-basis: 100%;
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.85;
}
.diet-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 16px;
    font-size: 16px;
    opacity: 0.8;
}
.cart-cal-row span { font-size: 14px; opacity: 0.8; }
.cart-cal-disclaimer {
    font-size: 11px;
    opacity: 0.65;
    margin-top: 4px;
}

/* ══════════════════════════════════════════════════════
   WAWA-MIRROR STEP WIZARD (owner gold standard 2026-07-19)
   One option group per screen: round back/close, step
   subtitle, big tap cards with check / ✕, Next footer.
   Coastal-light skin to match the reskin above.
══════════════════════════════════════════════════════ */
.builder-header {
    background: linear-gradient(180deg, #ffe3a1 0%, #fff4d9 100%);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}
.builder-title {
    color: #a5772a;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(255,255,255,0.85);
    text-align: center;
    flex: 1;
}
.builder-back,
.builder-close {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #2b3a42;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(43,58,66,0.2);
    transition: all var(--k-transition);
}
.builder-back:hover,
.builder-close:hover { background: #f0f7f7; color: #2b3a42; }

.wiz-step-sub {
    text-align: center;
    color: #657780;
    font-size: 1.05rem;
    margin: 4px 0 18px;
}

.wiz-opt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding-bottom: 8px;
}
.wiz-opt-card {
    position: relative;
    min-height: 130px;
    background: #ffffff;
    border: 2px solid #e9e4db;
    border-radius: 14px;
    color: #2b3a42;
    font-family: var(--k-font);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 14px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(43,58,66,0.08);
    transition: all var(--k-transition);
}
.wiz-opt-card:hover {
    border-color: #ffd166;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(43,58,66,0.14);
}
.wiz-opt-card.selected {
    border-color: #ff4e50;
    background: #fff6f4;
    box-shadow: 0 6px 18px rgba(255,78,80,0.18);
}
.wiz-opt-name { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.wiz-opt-price { font-size: 0.95rem; color: #e63946; font-weight: 600; }
.wiz-opt-check {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ff4e50;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
}
.wiz-opt-card.selected .wiz-opt-check { display: flex; }
.wiz-opt-x { font-size: 2rem; font-weight: 800; color: #b9c2c7; line-height: 1; }

/* Wawa mirror: the builder takes over the FULL kiosk screen (the Wawa
   steps are whole screens, not a side sheet). */
.builder-panel { width: 100%; }
.wiz-opt-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ── Wawa-style daypart lens pills on the home screen (append-only:
      keep AFTER everything above) ───────────────────────────────── */
.lens-pills {
    justify-content: center;
    padding: 0 0 16px;
}
.lens-pills .diet-pill {
    font-size: 17px;
    padding: 12px 26px;
}