/*
 * ember.css — MenuSpace "Ember" theme
 * Upscale dark dining. Warm charcoal, amber glow, Playfair serif headers.
 * Fine dining · Steakhouse · Wine bar · Craft cocktail lounge
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
    --bg:       #0a0806;
    --surface:  #110d09;
    --card:     #18120c;
    --card-alt: #1d1610;
    --border:   rgba(196,142,72,.12);
    --border2:  rgba(196,142,72,.22);
    --text:     #f2ead8;
    --muted:    rgba(242,234,216,.45);
    --muted2:   rgba(242,234,216,.28);
    --shadow:   0 8px 40px rgba(0,0,0,.7);
    --radius:   6px;
    --font-body:    'DM Sans', sans-serif;
    --font-display: 'Playfair Display', serif;
    /* hero */
    --hero-text:        #f2ead8;
    --hero-border:      rgba(196,142,72,.2);
    --hero-featured-bg: #1d1610;
    --hero-ticker-bg:   rgba(0,0,0,.5);
    --hero-ticker-color:#c48e48;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    /* Subtle warm grain */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}

/* ── Sidebar ── */
.sidebar-label { color: rgba(196,142,72,.5); letter-spacing: .1em; font-size: .68rem; text-transform: uppercase; }

.sidebar-link { color: var(--muted); border-radius: 4px; }
.sidebar-link:hover  { color: var(--text); background: rgba(196,142,72,.06); }
.sidebar-link.active {
    color: #c48e48;
    border-left-color: #c48e48;
    background: rgba(196,142,72,.08);
    font-weight: 600;
}

/* ── Search ── */
.search-inner {
    background: rgba(196,142,72,.04);
    border: 1px solid rgba(196,142,72,.15);
    border-radius: 4px;
}
.search-icon  { color: rgba(196,142,72,.5); }
.search-input { color: var(--text); font-family: var(--font-body); }
.search-input::placeholder { color: var(--muted2); }
.search-clear { color: var(--muted2); }
.search-clear:hover { color: var(--text); }

/* ── Pill bar ── */
.pill-bar { background: var(--surface); border-bottom: 1px solid var(--border); }

.pill-tab {
    border-radius: 2px;
    border: 1px solid rgba(196,142,72,.2);
    background: transparent;
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: .04em;
    transition: background .15s, color .15s;
}
.pill-tab.active {
    background: #c48e48;
    border-color: #c48e48;
    color: #0a0806;
    font-weight: 600;
}

/* ── Section ── */
.section-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--text);
}
.section-line  { background: rgba(196,142,72,.15); }
.section-count { font-size: 11px; color: var(--muted2); }

@media (max-width: 800px) {
    .section-header { background: #100c08; border-top: 1px solid rgba(196,142,72,.1); }
}

/* ── Items list ── */
.items-list { background: #0d0a07; }

/* ── Item row ── */
.item-row {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
    animation: rowIn .35s ease both;
}

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

.item-row:hover {
    border-color: rgba(196,142,72,.35);
    box-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(196,142,72,.08);
}

.item-img-wrap { background: var(--card-alt); }
.item-img { transition: transform .5s ease; filter: brightness(.95) saturate(.9); }
.item-row:hover .item-img { transform: scale(1.04); filter: brightness(1) saturate(1); }
.item-no-img { color: var(--muted2); background: var(--card-alt); }

.item-name  {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .01em;
}
.item-desc  { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.item-badge { padding: 1px 8px; border-radius: 2px; font-size: .66rem; font-weight: 600; letter-spacing: .06em; }
.item-price {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: #c48e48;
}

@media (max-width: 800px) {
    .item-row {
        background: #110d09;
        border-color: transparent;
        border-bottom: 1px solid rgba(196,142,72,.08);
        animation: none;
    }
    .item-price { color: #c48e48; }
}

/* ── Qty picker ── */
.qty-picker {
    border: 1px solid rgba(196,142,72,.25);
    border-radius: 2px;
    background: rgba(196,142,72,.05);
}
.qty-btn { color: var(--text); transition: background .15s; }
.qty-btn:hover { background: rgba(196,142,72,.1); }
.qty-val { font-weight: 700; font-size: 13px; }

@media (max-width: 800px) {
    .qty-picker { border-radius: 4px; }
}

/* ── Buttons ── */
.add-btn {
    border-radius: 2px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: opacity .2s, transform .1s;
}
.add-btn:hover  { opacity: .88; }
.add-btn:active { transform: scale(.97); }
.add-btn:disabled { opacity: .3; }

@media (max-width: 800px) {
    .add-btn { border-radius: 4px; }
}

.customize-btn {
    border-radius: 2px;
    border: 1px solid rgba(196,142,72,.4);
    background: rgba(196,142,72,.08);
    color: #c48e48;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .2s, border-color .2s;
}
.customize-btn:hover { background: rgba(196,142,72,.14); border-color: #c48e48; }
.customize-btn:active { transform: scale(.97); }

/* ── Closed banner ── */
.closed-banner {
    background: rgba(180,40,40,.08);
    border: 1px solid rgba(180,40,40,.25);
    border-radius: var(--radius);
    color: #e09090;
}

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

/* ── Brand strip ── */
.brand-strip {
    background: rgba(10,8,6,.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(196,142,72,.15);
}
.brand-strip-title { color: var(--text); font-family: var(--font-display); letter-spacing: .02em; }
.hours-tag.open { background: rgba(196,142,72,.1); color: #c48e48; border: 1px solid rgba(196,142,72,.3); }
.hours-tag.soon { background: rgba(196,142,72,.07); color: rgba(196,142,72,.7); border: 1px solid rgba(196,142,72,.2); }
.brand-action-btn { color: var(--text); background: rgba(196,142,72,.06); border: 1px solid rgba(196,142,72,.2); }
.brand-action-btn.call { background: rgba(196,142,72,.1); border-color: rgba(196,142,72,.35); color: #c48e48; }
.brand-action-btn.nav  { background: rgba(100,150,255,.08); border-color: rgba(100,150,255,.25); color: #8ab4ff; }
.brand-action-btn.locs { background: rgba(196,142,72,.08); border-color: rgba(196,142,72,.3); color: #c48e48; }

.search-wrap { background: var(--bg); }

/* ── Food truck ── */
.ft-card         { border: 1px solid rgba(196,142,72,.15); box-shadow: 0 12px 40px rgba(0,0,0,.7); }
.ft-header       { background: rgba(0,0,0,.6); }
.ft-title        { color: var(--text); font-family: var(--font-display); }
.ft-address      { color: var(--muted); }
.ft-distance-bar { background: rgba(0,0,0,.5); color: var(--text); border-color: rgba(196,142,72,.1); }
.ft-actions      { background: rgba(0,0,0,.4); border-color: rgba(196,142,72,.1); }
.ft-btn-navigate { background: rgba(196,142,72,.08); color: #c48e48; border-color: rgba(196,142,72,.25); }
.ft-manual       { background: rgba(0,0,0,.4); border-color: rgba(196,142,72,.1); }
.ft-input        { background: rgba(196,142,72,.05); border-color: rgba(196,142,72,.2); color: var(--text); }
.ft-no-loc       { background: #110d09; color: var(--muted2); }

/* ── Mobile store bar ── */
.store-mobile-bar   { background: rgba(10,8,6,.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(196,142,72,.12); }
.store-mobile-title { color: var(--text); font-family: var(--font-display); }
.section-count      { background: rgba(196,142,72,.08); color: rgba(196,142,72,.6); }

/* ── Gold divider accent on hero ── */
.hero-banner { border-bottom: 1px solid rgba(196,142,72,.15); }