/*
 * trice-ice-baby.css — MenuSpace full storefront theme
 * Neon graffiti lemonade theme for Trice Ice Baby.
 * Drop into /themes and select it from Admin > Appearance.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bangers&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    color-scheme: dark;

    --accent:   #ff1493;
    --bg:       #060608;
    --surface:  rgba(14,15,24,.96);
    --card:     rgba(255,255,255,.075);
    --card-alt: rgba(0,194,255,.14);
    --border:   rgba(255,255,255,.13);
    --border2:  rgba(255,255,255,.24);
    --text:     #fff9fb;
    --muted:    rgba(255,249,251,.70);
    --muted2:   rgba(255,249,251,.42);
    --shadow:   0 18px 52px rgba(0,0,0,.42), 0 0 32px rgba(255,20,147,.10);
    --radius:   18px;
    --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Archivo Black', 'Bangers', Impact, system-ui, sans-serif;

    --theme-primary: #00bfff;
    --theme-secondary: #ffd400;
    --theme-hot: #ff1493;
    --theme-purple: #8c2cff;
    --theme-lime: #40ff4f;
    --theme-orange: #ff8a00;
    --theme-ink: #050507;
    --theme-soft: #fff9fb;
    --on-accent: #ffffff;

    --input-bg: rgba(255,255,255,.09);
    --btn-subtle-bg: rgba(255,20,147,.13);
    --btn-subtle-hover: rgba(0,191,255,.18);
    --overlay-bg: rgba(2,2,5,.78);
    --build-header-bg: rgba(10,11,18,.96);

    --hero-text: #ffffff;
    --hero-border: rgba(255,255,255,.16);
    --hero-featured-bg: rgba(9,10,17,.90);
    --hero-ticker-bg: rgba(255,20,147,.17);
    --hero-ticker-color: #ffffff;

    --footer-bg: #08080d;
    --footer-border: rgba(255,255,255,.12);
    --footer-text: rgba(255,255,255,.60);
    --footer-heading: #ffffff;
}

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

body {
    font-family: var(--font-body);
    color: var(--text);
    background:
        radial-gradient(circle at 12% 4%, rgba(255,20,147,.36), transparent 22rem),
        radial-gradient(circle at 88% 8%, rgba(255,212,0,.28), transparent 20rem),
        radial-gradient(circle at 78% 42%, rgba(0,191,255,.26), transparent 22rem),
        radial-gradient(circle at 12% 70%, rgba(140,44,255,.28), transparent 22rem),
        linear-gradient(180deg, #050507 0%, #090916 48%, #050507 100%);
    font-size: 14px;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .58;
    background:
        radial-gradient(circle at 8% 18%, rgba(255,20,147,.95) 0 3px, transparent 4px),
        radial-gradient(circle at 92% 21%, rgba(255,212,0,.92) 0 4px, transparent 5px),
        radial-gradient(circle at 19% 83%, rgba(140,44,255,.90) 0 5px, transparent 6px),
        radial-gradient(circle at 72% 78%, rgba(0,191,255,.92) 0 4px, transparent 5px),
        linear-gradient(115deg, transparent 0 34%, rgba(255,212,0,.15) 34% 35%, transparent 35% 100%);
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
.sidebar-label {
    color: var(--theme-primary);
    letter-spacing: .15em;
    font-size: .68rem;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-weight: 900;
}

.sidebar-link {
    color: var(--muted);
    border-radius: 12px;
    letter-spacing: .01em;
    border-left: 3px solid transparent;
    font-weight: 700;
}

.sidebar-link:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--theme-primary) 12%, transparent);
}

.sidebar-link.active {
    color: var(--theme-ink);
    border-left-color: var(--accent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--theme-secondary) 8%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

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

.search-inner {
    background: linear-gradient(135deg, rgba(12,13,22,.94), rgba(0,191,255,.10));
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.09);
}

.search-inner:focus-within {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border2));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent),
        var(--shadow);
}

.search-icon {
    color: var(--accent);
}

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

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

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

.search-clear:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ── Category pills ────────────────────────────────────────────────── */
.pill-bar {
    background: rgba(8,9,16,.94);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

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

.pill-tab:hover {
    color: var(--theme-ink);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
}

.pill-tab.active {
    color: var(--on-accent);
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--theme-secondary)));
    border-color: color-mix(in srgb, var(--accent) 78%, var(--theme-secondary));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 26%, transparent);
}

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

/* ── Sections ──────────────────────────────────────────────────────── */
.section-title {
    font-family: var(--font-display);
    font-size: 1.42rem;
    font-weight: 900;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: var(--theme-ink);
}

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

.section-line {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--theme-secondary) 22%, transparent), transparent);
}

.section-count {
    font-size: 10px;
    color: var(--theme-ink);
    font-weight: 900;
    background: color-mix(in srgb, var(--accent) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

.items-list { background: transparent; }

/* ── Menu item rows ────────────────────────────────────────────────── */
.item-row {
    background: linear-gradient(135deg, rgba(14,15,24,.98), rgba(9,10,17,.92));
    border: 1px solid var(--border);
    border-left: 4px solid color-mix(in srgb, var(--accent) 60%, var(--theme-primary));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 13px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.item-row:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: 0 22px 54px rgba(22,55,94,.15);
}

.item-img-wrap {
    background: rgba(0,191,255,.14);
}

.item-img {
    transition: transform .35s ease, filter .35s ease;
    filter: saturate(.94) contrast(1.03);
}

.item-row:hover .item-img {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.04);
}

.item-no-img {
    color: var(--muted2);
    background: linear-gradient(135deg, rgba(0,191,255,.14), rgba(255,212,0,.18));
}

.item-name {
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 900;
    letter-spacing: .025em;
    color: var(--text);
}

.item-desc {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
}

.item-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--theme-ink);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.item-price {
    font-family: var(--font-display);
    color: var(--theme-ink);
    font-weight: 900;
    font-size: 1.12rem;
    letter-spacing: .02em;
}

/* ── Quantity and action buttons ───────────────────────────────────── */
.qty-picker {
    border: 1px solid var(--border2);
    border-radius: 12px;
    background: var(--input-bg);
}

.qty-btn { color: var(--text); }
.qty-btn:hover {
    color: var(--theme-ink);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.qty-val {
    color: var(--theme-ink);
    font-family: var(--font-display);
    font-weight: 900;
}

.add-btn,
.item-view-add-btn {
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 76%, var(--theme-secondary)));
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent);
    transition: transform .13s ease, box-shadow .15s ease, opacity .15s ease;
}

.add-btn:hover,
.item-view-add-btn:hover {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 32%, transparent);
}

.add-btn:active,
.item-view-add-btn:active { transform: scale(.97); }
.add-btn:disabled { opacity: .36; box-shadow: none; }
.add-btn.added { background: #40ff4f !important; color: #050507 !important; }

.customize-btn,
.item-view-customize {
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--accent) 9%, var(--card));
    color: var(--theme-ink);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.customize-btn:hover,
.item-view-customize:hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--card));
}

/* ── Store status / empty states ───────────────────────────────────── */
.closed-banner {
    background: #fff4db;
    color: #96640a;
    border: 1px solid rgba(242,182,64,.34);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.no-results {
    color: var(--muted);
}

/* ── Reservation CTA ───────────────────────────────────────────────── */
.reservation-cta {
    font-family: var(--font-display);
    letter-spacing: .035em;
    box-shadow: var(--shadow);
}

.reservation-cta.primary {
    color: var(--on-accent);
}

.reservation-cta.secondary {
    background: var(--btn-subtle-bg);
    color: var(--text);
}

/* ── Brand strip ───────────────────────────────────────────────────── */
.brand-strip,
.store-mobile-bar {
    background: rgba(248,251,255,.96);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(22,55,94,.08);
}

.brand-strip-title,
.store-mobile-title {
    color: var(--text);
    font-family: var(--font-display);
    letter-spacing: .035em;
    text-transform: uppercase;
}

.hours-tag {
    color: var(--theme-ink);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.brand-action-btn {
    border-radius: 10px;
    border: 1px solid var(--border2);
    background: var(--btn-subtle-bg);
    color: var(--text);
}

.brand-action-btn.locs {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.brand-action-btn.call {
    background: color-mix(in srgb, #40ff4f 13%, transparent);
    color: #40ff4f;
    border-color: color-mix(in srgb, #40ff4f 28%, transparent);
}

.brand-action-btn.nav {
    background: color-mix(in srgb, var(--theme-secondary) 13%, transparent);
    color: var(--theme-secondary);
    border-color: color-mix(in srgb, var(--theme-secondary) 28%, transparent);
}

/* ── Food truck widget ─────────────────────────────────────────────── */
.ft-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.ft-header {
    background: linear-gradient(135deg, rgba(0,191,255,.12), rgba(14,15,24,.88));
    border-bottom: 1px solid var(--border);
}

.ft-icon,
.ft-title {
    color: var(--theme-ink);
}

.ft-address { color: var(--muted); }
.ft-status-badge {
    color: var(--theme-ink);
    background: color-mix(in srgb, var(--accent) 11%, transparent);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.ft-map,
.ft-no-loc { background: var(--card-alt); color: var(--muted); }
.ft-distance-bar,
.ft-actions,
.ft-manual { border-color: var(--border); }
.ft-btn-locate,
.ft-go-btn { background: var(--accent); color: var(--on-accent); }
.ft-btn-navigate { color: var(--theme-ink); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.ft-input {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--border2);
}
.ft-input:focus {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--border2));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}

/* ── Hero banner ───────────────────────────────────────────────────── */
.hero-banner {
    background: linear-gradient(135deg, rgba(0,191,255,.10), rgba(255,255,255,.70), rgba(255,230,166,.55));
    border-bottom: 1px solid var(--hero-border);
}

.hero-announcement {
    font-family: var(--font-display);
    letter-spacing: .025em;
}

.hero-cta,
.hero-featured-btn {
    color: var(--on-accent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 24%, transparent);
}

.hero-featured {
    background: var(--hero-featured-bg);
    border-color: var(--hero-border);
    box-shadow: var(--shadow);
}

.hero-featured-name {
    font-family: var(--font-display);
    color: var(--text);
    letter-spacing: .025em;
}

.hero-featured-desc { color: var(--muted); }
.hero-featured-price { color: var(--theme-ink); }
.hero-featured-img-ph { background: var(--card-alt); color: var(--muted2); }
.carousel-prev,
.carousel-next {
    background: rgba(22,55,94,.76);
    border: 1px solid var(--border2);
    color: #ffffff;
}
.carousel-dot { background: color-mix(in srgb, var(--theme-ink) 24%, transparent); }
.carousel-dot.active { background: var(--accent); }
.hero-ticker-wrap { border-top-color: var(--hero-border); }

/* ── Item view modal ───────────────────────────────────────────────── */
.item-zoom-btn {
    background: rgba(22,55,94,.72);
    color: #fff;
    border-color: rgba(255,255,255,.22);
    font-family: var(--font-display);
    font-weight: 900;
}

.item-view-backdrop {
    background: var(--overlay-bg);
}

.item-view-dialog {
    background: var(--surface);
    border-color: var(--border2);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: 0 32px 100px rgba(22,55,94,.32);
}

.item-view-close {
    background: rgba(22,55,94,.72);
    color: #fff;
    border-color: var(--border2);
}

.item-view-media,
.item-view-no-img {
    background: var(--card-alt);
    color: var(--muted2);
}

.item-view-name {
    font-family: var(--font-display);
    color: var(--text);
}

.item-view-desc { color: var(--muted); }
.item-view-price { color: var(--theme-ink); }

/* ── Mobile tuning ─────────────────────────────────────────────────── */
@media (max-width: 800px) {
    .store-mobile-bar {
        background: rgba(248,251,255,.98);
        border-bottom-color: var(--border);
    }

    .search-wrap {
        background: rgba(8,9,16,.98);
        border-bottom-color: var(--border);
    }

    .search-inner {
        border-radius: 0;
        box-shadow: none;
    }

    .pill-bar {
        background: rgba(8,9,16,.98);
        border-bottom-color: var(--border);
    }

    .pill-tab {
        border-radius: 999px;
        font-size: 12px;
    }

    .section-header {
        background: rgba(0,191,255,.10);
        border-top: 1px solid var(--border);
    }

    .section-title {
        font-size: 1rem;
        letter-spacing: .045em;
    }

    .section-title::after { display: none; }

    .item-row {
        margin-bottom: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        transform: none !important;
        background: #ffffff;
    }

    .item-row:hover {
        box-shadow: none;
    }

    .item-name { font-size: .96rem; }
    .item-price { font-size: .98rem; }

    .closed-banner {
        border-radius: 0;
        box-shadow: none;
    }

    .hero-banner {
        margin-bottom: 0;
    }
}


/* ── Trice Ice Baby neon/graffiti overrides ─────────────────────────── */
.brand-strip,
.store-mobile-bar,
.search-wrap,
.pill-bar {
    background:
        linear-gradient(90deg, rgba(255,20,147,.18), rgba(0,191,255,.12), rgba(140,44,255,.14)),
        rgba(5,5,7,.94);
    border-color: rgba(255,255,255,.14);
}

.brand-strip-title,
.store-mobile-title,
.section-title,
.item-name,
.hero-announcement {
    text-shadow: 2px 2px 0 rgba(255,20,147,.55), -1px -1px 0 rgba(0,191,255,.38);
}

.brand-strip-title,
.store-mobile-title {
    color: #ffffff;
}

.search-inner,
.item-row,
.hero-featured,
.ft-card,
.item-view-dialog {
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 18px 52px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,20,147,.10),
        0 0 34px rgba(0,191,255,.08);
}

.search-inner {
    background:
        linear-gradient(135deg, rgba(255,255,255,.09), rgba(0,191,255,.09)),
        rgba(8,9,16,.92);
}

.search-input::placeholder {
    color: rgba(255,255,255,.46);
}

.pill-tab {
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.14);
    text-shadow: 1px 1px 0 rgba(0,0,0,.55);
}

.pill-tab.active,
.add-btn,
.item-view-add-btn,
.hero-cta,
.hero-featured-btn,
.ft-btn-locate,
.ft-go-btn,
.brand-action-btn.locs {
    color: #ffffff;
    background: linear-gradient(135deg, #ff1493 0%, #8c2cff 52%, #00bfff 100%);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 10px 26px rgba(255,20,147,.30), 0 0 26px rgba(0,191,255,.16);
}

.add-btn:hover,
.item-view-add-btn:hover,
.hero-cta:hover,
.hero-featured-btn:hover {
    filter: saturate(1.15) brightness(1.05);
}

.customize-btn,
.item-view-customize,
.brand-action-btn,
.ft-btn-navigate {
    background: rgba(255,212,0,.12);
    color: #ffd400;
    border-color: rgba(255,212,0,.34);
}

.item-row {
    background:
        linear-gradient(135deg, rgba(255,255,255,.085), rgba(0,191,255,.075)),
        rgba(8,9,16,.96);
    border-left: 5px solid #ff1493;
    position: relative;
}

.item-row::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,20,147,.16), transparent 28%, rgba(0,191,255,.10));
    opacity: .55;
}

.item-content,
.item-action {
    position: relative;
    z-index: 1;
}

.item-row:nth-child(3n+2) { border-left-color: #00bfff; }
.item-row:nth-child(3n+3) { border-left-color: #ffd400; }

.item-price,
.hero-featured-price {
    color: #ffd400;
    text-shadow: 0 0 12px rgba(255,212,0,.32);
}

.item-badge,
.hours-tag,
.section-count,
.ft-status-badge {
    color: #050507;
    background: linear-gradient(135deg, #ffd400, #40ff4f);
    border-color: rgba(255,255,255,.22);
}

.item-img-wrap,
.item-no-img,
.item-view-media,
.item-view-no-img,
.ft-map,
.ft-no-loc {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,20,147,.32), transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(0,191,255,.32), transparent 40%),
        #090916;
}

.closed-banner {
    background: rgba(255,212,0,.15);
    color: #ffd400;
    border-color: rgba(255,212,0,.34);
}

.hero-banner {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,20,147,.42), transparent 22rem),
        radial-gradient(circle at 84% 20%, rgba(255,212,0,.28), transparent 20rem),
        linear-gradient(135deg, rgba(5,5,7,.96), rgba(14,10,38,.90));
}

.hero-ticker-wrap {
    background: linear-gradient(90deg, rgba(255,20,147,.28), rgba(0,191,255,.22), rgba(140,44,255,.28));
}

.hero-ticker {
    color: #ffffff;
    text-shadow: 1px 1px 0 rgba(0,0,0,.65);
}

.footer,
.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    border-top: 1px solid var(--footer-border);
}

@media (max-width: 800px) {
    .item-row {
        background: rgba(8,9,16,.98);
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .section-header {
        background: linear-gradient(90deg, rgba(255,20,147,.20), rgba(0,191,255,.13)), rgba(5,5,7,.96);
    }

    .pill-tab {
        border-radius: 999px;
    }
}