@import url('../../css/menu-drilldown.css');
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   NEON BAR (2026-08-09) — cocktail bars, night venues, clubs.
   Ink-blue glass, cyan glow, geometric display. Frosted surfaces
   instead of solid cards; the glow does the elevation work.
   ============================================================ */

:root {
    --ym-primary: #00e0d0;
    --ym-primary-dark: #00b3a6;
    --ym-ink: #eaf0ff;
    --ym-muted: #8b93ae;
    --ym-bg: #08090f;
    --ym-card: #14172a;
    --ym-border: #262c47;
    --ym-radius: 18px;
    --ym-radius-sm: 14px;
    --ym-shadow: 0 0 0 1px rgba(0, 224, 208, .10), 0 10px 30px rgba(0, 0, 0, .55);
    --ym-shadow-lg: 0 -14px 50px rgba(0, 0, 0, .75);

    --cg-font-body: 'Space Grotesk', -apple-system, sans-serif;
    --cg-font-display: 'Syne', 'Space Grotesk', sans-serif;

    --cg-hero-min: 240px;
    --cg-hero-pad: 22px 18px 26px;
    --cg-scrim: linear-gradient(to bottom, rgba(8, 9, 15, .25) 0%, rgba(8, 9, 15, .88) 100%);
    --cg-hero-name-size: 30px;
    --cg-hero-name-weight: 800;
    --cg-hero-name-spacing: -.03em;
    --cg-logo-size: 52px;
    --cg-logo-radius: 14px;

    --cg-gap: 12px;
    --cg-cat-ratio: 1 / 1;
    --cg-cat-radius: 18px;
    --cg-cat-name-size: 14px;
    --cg-cat-name-weight: 700;
    --cg-cat-name-align: center;
    --cg-cat-name-transform: uppercase;
    --cg-cat-name-spacing: .1em;
    --cg-cat-overlay: linear-gradient(to top, rgba(8, 9, 15, .70), rgba(8, 9, 15, .05));

    --cg-card-radius: 16px;
    --cg-card-pad: 12px;
    --cg-card-gap: 10px;
    --cg-thumb: 88px;
    --cg-thumb-radius: 12px;
    --cg-name-size: 16px;
    --cg-name-weight: 700;
    --cg-name-spacing: -.01em;
    --cg-price-size: 16px;
    --cg-price-color: var(--ym-primary);

    --cg-pill-radius: 999px;
    --cg-pill-bg: rgba(255, 255, 255, .04);
    --cg-pill-active-bg: var(--ym-primary);
    --cg-pill-active-ink: #08090f;
    --cg-search-radius: 999px;
    --cg-badge-radius: 999px;
    --cg-section-title-size: 19px;
    --cg-section-title-weight: 700;
}

/* Frosted glass instead of solid fills. backdrop-filter is progressive:
   without it the rgba background alone still reads correctly. */
.ym-card, .ym-search, .ym-cg-back, .ym-icon-btn.ym-lang-toggle, .ym-lang-menu {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--ym-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.ym-sticky-head { background: rgba(8, 9, 15, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ym-cg-cat-img { box-shadow: 0 0 0 1px rgba(0, 224, 208, .16), 0 12px 30px rgba(0, 0, 0, .55); }
.ym-cg-cat-count { background: rgba(0, 224, 208, .16); border: 1px solid rgba(0, 224, 208, .40); color: var(--ym-primary); }
.ym-cg-title, .ym-cg-crumb { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ym-hero-name { text-shadow: 0 0 26px rgba(0, 224, 208, .35); }
.ym-badge { background: rgba(0, 224, 208, .12); color: var(--ym-primary); }
.ym-diet-chip { background: rgba(255, 255, 255, .04); }
.ym-diet-chip.active { color: #08090f; }
.ym-cat-pill.active { box-shadow: 0 0 18px rgba(0, 224, 208, .45); }
.ym-fab.ym-fab-primary { box-shadow: 0 0 24px rgba(0, 224, 208, .45); color: #08090f; }
.ym-sheet { border-top: 1px solid var(--ym-border); }
.ym-sheet-title { font-size: 21px; font-weight: 800; }
.ym-allergen-chip, .ym-nutri { background: rgba(255, 255, 255, .05); border-color: var(--ym-border); }

/* Same reason as Street Food: white on this cyan fails contrast. The shared
   menu-actions.css / ordering.css hardcode #fff, so re-ink here only. */
.ym-actions-fab,
.ym-ord-add,
.ym-actions-btn,
.ym-act-ic-waiter { color: #08090f; }
.ym-badge.sold-out { background: #ff4d6d; color: #fff; }