/*
 * arcade-dark.css — MenuSpace Premium Arcade theme
 * Dark glossy panels, violet/cyan glow, rounded UI, more polished than raw neon.
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
    --bg:       #05050b;
    --surface:  rgba(10,10,18,.94);
    --card:     rgba(14,14,26,.96);
    --card-alt: rgba(20,20,35,.96);
    --border:   rgba(255,255,255,.09);
    --border2:  rgba(255,255,255,.16);
    --text:     #f8f7ff;
    --muted:    rgba(248,247,255,.58);
    --muted2:   rgba(248,247,255,.32);
    --shadow:   0 20px 70px rgba(0,0,0,.72);
    --radius:   20px;
    --font-body:    'Space Mono', monospace;
    --font-display: 'Barlow Condensed', sans-serif;

    --arcade-cyan:   #00e5ff;
    --arcade-violet: #a855f7;
    --arcade-pink:   #ff3df2;

    --hero-text:         #ffffff;
    --hero-border:       rgba(255,255,255,.12);
    --hero-featured-bg:  rgba(13,13,28,.92);
    --hero-ticker-bg:    rgba(5,5,11,.78);
    --hero-ticker-color: var(--accent);
}

html {
    background: var(--bg);
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(168,85,247,.17), transparent 30rem),
        radial-gradient(circle at top right, rgba(0,229,255,.13), transparent 30rem),
        radial-gradient(circle at bottom center, rgba(255,61,242,.09), transparent 28rem),
        linear-gradient(180deg, #05050b 0%, #070711 46%, #020205 100%);
    font-size: 13px;
    overflow-x: hidden;
}

/* ── Sidebar ── */
.sidebar-label {
    color: var(--accent);
    letter-spacing: .17em;
    font-size: .65rem;
    text-transform: uppercase;
    font-family: var(--font-body);
}

.sidebar-link {
    color: var(--muted);
    border-radius: 14px;
    letter-spacing: .04em;
    border-left: 2px solid transparent;
}

.sidebar-link:hover {
    color: var(--text);
    background: rgba(255,255,255,.055);
}

.sidebar-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent), rgba(0,229,255,.04));
    font-weight: 700;
    box-shadow:
        inset 0 0 24px color-mix(in srgb, var(--accent) 7%, transparent),
        0 0 22px color-mix(in srgb, var(--accent) 9%, transparent);
}

/* ── Search ── */
.search-wrap {
    background: linear-gradient(180deg, rgba(5,5,11,.96), rgba(5,5,11,.74));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.search-inner {
    background:
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        rgba(13,13,28,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    box-shadow:
        0 18px 46px rgba(0,0,0,.42),
        inset 0 0 0 1px rgba(255,255,255,.035);
}

.search-inner:focus-within {
    border-color: color-mix(in srgb, var(--accent) 70%, rgba(255,255,255,.18));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
        0 0 26px color-mix(in srgb, var(--accent) 22%, transparent);
}

.search-icon {
    color: var(--accent);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 48%, transparent);
}

.search-input {
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12px;
}

.search-input::placeholder { color: var(--muted2); }

.search-clear {
    color: var(--muted);
    border-radius: 10px;
}

.search-clear:hover {
    color: var(--accent);
    background: rgba(255,255,255,.07);
}

/* ── Pill bar ── */
.pill-bar {
    background: rgba(5,5,11,.94);
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pill-tab {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.045);
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s, transform .12s;
}

.pill-tab:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.12));
}

.pill-tab.active {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--arcade-cyan)));
    border-color: var(--accent);
    color: #060610;
    font-weight: 900;
    box-shadow:
        0 0 18px color-mix(in srgb, var(--accent) 42%, transparent),
        0 0 30px rgba(0,229,255,.11);
}

.pill-tab:active { transform: scale(.97); }

/* ── Section ── */
.section-title {
    font-family: var(--font-display);
    font-size: 1.48rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--text);
    text-shadow:
        0 0 18px color-mix(in srgb, var(--accent) 36%, transparent),
        0 0 30px rgba(0,229,255,.12);
}

.section-title::after {
    content: "";
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-left: .45em;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 65%, transparent);
    vertical-align: .08em;
}

.section-line {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 44%, transparent), rgba(0,229,255,.20), rgba(255,255,255,.04));
}

.section-count {
    font-size: 10px;
    color: color-mix(in srgb, var(--accent) 82%, #fff);
    font-family: var(--font-body);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 23%, transparent);
    border-radius: 999px;
}

/* ── Items list ── */
.items-list {
    background: transparent;
}

/* ── Item row ── */
.item-row {
    background:
        linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018) 42%, transparent),
        var(--card);
    border: 1px solid rgba(255,255,255,.09);
    border-left: 3px solid color-mix(in srgb, var(--accent) 36%, transparent);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        0 18px 48px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.04);
    transition: border-color .2s, box-shadow .2s, transform .18s, background .2s;
    animation: arcadeIn .25s ease both;
    margin-bottom: 12px;
}

@keyframes arcadeIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

.item-row:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,.15));
    box-shadow:
        0 22px 60px rgba(0,0,0,.55),
        0 0 30px color-mix(in srgb, var(--accent) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.055);
    transform: translateY(-2px);
}

.item-img-wrap {
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
        linear-gradient(135deg, rgba(0,229,255,.06), transparent),
        #0f1020;
    border-right: 1px solid rgba(255,255,255,.08);
}

.item-img {
    transition: transform .45s ease, filter .45s ease;
    filter: saturate(.98) contrast(1.05);
}

.item-row:hover .item-img {
    transform: scale(1.055);
    filter: saturate(1.16) contrast(1.07);
}

.item-no-img {
    color: var(--muted2);
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
        #0f1020;
}

.item-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: .055em;
    text-transform: uppercase;
}

.item-desc {
    font-size: .76rem;
    color: var(--muted);
    line-height: 1.55;
    font-family: var(--font-body);
}

.item-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255,255,255,.045);
}

.item-price {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: .035em;
    text-shadow:
        0 0 14px color-mix(in srgb, var(--accent) 52%, transparent),
        0 0 28px rgba(0,229,255,.12);
}

/* ── Qty picker ── */
.qty-picker {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 0 16px rgba(0,0,0,.18);
}

.qty-btn {
    color: var(--text);
    transition: color .1s, background .1s;
    border-radius: 10px;
}

.qty-btn:hover {
    background: rgba(255,255,255,.08);
    color: var(--accent);
}

.qty-val {
    font-weight: 900;
    font-size: 13px;
    font-family: var(--font-display);
    color: var(--accent);
}

/* ── Buttons ── */
.add-btn {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--arcade-cyan)));
    color: #060610;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: box-shadow .2s, transform .1s, filter .2s;
    box-shadow:
        0 0 15px color-mix(in srgb, var(--accent) 35%, transparent),
        inset 0 -2px 0 rgba(0,0,0,.18);
}

.add-btn:hover {
    filter: brightness(1.08);
    box-shadow:
        0 0 25px color-mix(in srgb, var(--accent) 55%, transparent),
        0 0 42px rgba(0,229,255,.14),
        inset 0 -2px 0 rgba(0,0,0,.20);
}

.add-btn:active { transform: scale(.97); }
.add-btn:disabled { opacity: .28; box-shadow: none; }

.customize-btn {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background .2s, box-shadow .2s, transform .1s;
}

.customize-btn:hover {
    background: color-mix(in srgb, var(--accent) 17%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.customize-btn:active { transform: scale(.97); }

/* ── Closed banner ── */
.closed-banner {
    background: linear-gradient(135deg, rgba(255,30,30,.13), rgba(255,30,30,.04));
    border: 1px solid rgba(255,80,80,.30);
    border-radius: var(--radius);
    color: #ff9b9b;
    box-shadow: 0 16px 40px rgba(0,0,0,.34);
}

/* ── No results ── */
.no-results {
    color: var(--muted);
    font-family: var(--font-body);
}

/* ── Brand strip ── */
.brand-strip {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 42%, rgba(0,229,255,.04)),
        rgba(5,5,11,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 18%, transparent);
}

.brand-strip-title {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hours-tag.open {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: color-mix(in srgb, var(--accent) 85%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 999px;
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 42%, transparent);
}

.hours-tag.soon {
    background: rgba(255,200,0,.09);
    color: #ffc800;
    border: 1px solid rgba(255,200,0,.28);
    border-radius: 999px;
}

.brand-action-btn {
    color: var(--text);
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.brand-action-btn.call {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
    color: color-mix(in srgb, var(--accent) 85%, #fff);
}

.brand-action-btn.nav {
    background: rgba(0,229,255,.09);
    border-color: rgba(0,229,255,.28);
    color: var(--arcade-cyan);
}

.brand-action-btn.locs {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    color: color-mix(in srgb, var(--accent) 85%, #fff);
}

/* ── Food truck ── */
.ft-card {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    box-shadow:
        0 24px 80px rgba(0,0,0,.60),
        0 0 38px color-mix(in srgb, var(--accent) 8%, transparent);
    background: var(--card);
}

.ft-header {
    background: rgba(12,12,24,.88);
}

.ft-title {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ft-address {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: .78rem;
}

.ft-status-badge {
    border-radius: 999px;
}

.ft-distance-bar {
    background: rgba(0,0,0,.40);
    color: var(--text);
    border-color: rgba(255,255,255,.08);
}

.ft-actions {
    background: rgba(0,0,0,.28);
    border-color: rgba(255,255,255,.08);
}

.ft-btn-locate {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--arcade-cyan)));
    color: #060610;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ft-btn-navigate {
    background: rgba(0,229,255,.09);
    color: var(--arcade-cyan);
    border-color: rgba(0,229,255,.26);
    border-radius: 14px;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ft-manual {
    background: rgba(0,0,0,.36);
    border-color: rgba(255,255,255,.08);
}

.ft-input {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    color: var(--text);
    font-family: var(--font-body);
    border-radius: 14px;
}

.ft-go-btn {
    border-radius: 14px;
    background: var(--accent);
    color: #060610;
    font-family: var(--font-display);
    font-weight: 900;
}

.ft-no-loc {
    background: rgba(12,12,24,.86);
    color: var(--muted2);
}

/* ── Mobile store bar ── */
.store-mobile-bar {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
        rgba(5,5,11,.96);
    border-bottom: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.store-mobile-title {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── Hero ── */
.hero-banner {
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.hero-banner-inner {
    background:
        radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30rem),
        radial-gradient(circle at 86% 18%, rgba(0,229,255,.10), transparent 28rem),
        linear-gradient(135deg, rgba(255,255,255,.04), transparent 45%);
}

.hero-announcement {
    font-family: var(--font-display);
    letter-spacing: .055em;
    text-transform: uppercase;
    text-shadow:
        0 0 22px color-mix(in srgb, var(--accent) 25%, transparent),
        0 0 36px rgba(0,0,0,.75);
}

.hero-cta,
.hero-featured-btn {
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--arcade-cyan)));
    color: #060610;
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}

.hero-content-image,
.hero-featured {
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.11);
}

.hero-featured {
    box-shadow:
        0 22px 60px rgba(0,0,0,.50),
        0 0 34px color-mix(in srgb, var(--accent) 8%, transparent);
}

.hero-featured-name {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.hero-featured-price {
    color: var(--accent);
    text-shadow:
        0 0 14px color-mix(in srgb, var(--accent) 55%, transparent),
        0 0 28px rgba(0,229,255,.10);
}

.hero-ticker {
    font-family: var(--font-body);
    font-size: .8rem;
    letter-spacing: .11em;
    text-transform: uppercase;
}

/* ── Modal helpers from base.php inline modal ── */
#itemModal > div {
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--accent) 8%, transparent), transparent 18rem),
        #0f1020 !important;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -20px 70px rgba(0,0,0,.68);
}

/* ── Mobile ── */
@media (max-width: 800px) {
    body {
        font-size: 13px;
        background:
            radial-gradient(circle at top, color-mix(in srgb, var(--accent) 13%, transparent), transparent 20rem),
            radial-gradient(circle at bottom, rgba(0,229,255,.08), transparent 22rem),
            #05050b;
    }

    .section-header {
        background: rgba(12,12,24,.88);
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .section-title {
        font-size: 1.14rem;
    }

    .item-row {
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 45%),
            rgba(12,12,24,.96);
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid rgba(255,255,255,.08);
        box-shadow: none;
        margin-bottom: 0;
        animation: none;
        transform: none;
    }

    .item-row:hover {
        transform: none;
        box-shadow: inset 3px 0 0 var(--accent);
    }

    .item-img-wrap {
        border-right: 1px solid rgba(255,255,255,.07);
        border-radius: 0;
    }

    .item-name {
        font-size: 1rem;
        letter-spacing: .04em;
    }

    .item-desc {
        font-size: .76rem;
    }

    .item-price {
        font-size: 1.1rem;
    }

    .qty-picker,
    .add-btn,
    .customize-btn {
        border-radius: 14px;
    }
}

/* ─────────────────────────────────────────────
   Brand Strip Action Buttons
   Locations / Call / Directions
───────────────────────────────────────────── */

.brand-strip-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.brand-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 8px 14px;

    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);

    background: rgba(255,255,255,.07);
    color: var(--text, #fff);

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.14);
    transition:
        transform .15s ease,
        opacity .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.brand-action-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
    text-decoration: none;
}

.brand-action-btn:active {
    transform: translateY(0);
}

/* Locations button */
.brand-action-btn.locs {
    background: var(--accent, #ff6a00);
    border-color: var(--accent, #ff6a00);
    color: #fff;
}

/* Call button */
.brand-action-btn.call {
    background: rgba(0, 210, 106, .12);
    border-color: rgba(0, 210, 106, .32);
    color: #00d26a;
}

/* Directions button */
.brand-action-btn.nav {
    background: rgba(59, 139, 255, .12);
    border-color: rgba(59, 139, 255, .32);
    color: #7ab8ff;
}

/* Mobile */
@media (max-width: 640px) {
    .brand-strip-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
        gap: 8px;
    }

    .brand-action-btn {
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        font-size: 13px;
    }
}