/* =====================================================================
   LUXURY BUSINESS THEME  (Black & Gold)
   Loaded by head24.php ONLY when theme_cfg('luxury_mode') === '1'.
   It layers on top of style.css and converts the cyberpunk / neon UI into
   an elegant, flat, gold-on-charcoal look: it remaps the palette + font
   tokens, neutralizes the neon (text glows, scanline / grid overlays,
   trippy animations, HUD corner brackets, button sheens), swaps the
   typefaces, and refines the core surfaces. Toggling the mode off simply
   stops loading this file - the cyberpunk theme is untouched (no data loss).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap');

/* ---- 1. Palette + font tokens (override head24's inline :root) ---- */
:root {
    --bg-color:      #0e0e10;
    --neon-blue:     #c8a45c;   /* primary accent  -> gold        */
    --neon-pink:     #b9854b;   /* secondary       -> bronze gold */
    --neon-green:    #43a86a;   /* positive / open -> emerald      */
    --neon-red:      #b56a5e;   /* negative/closed -> terracotta  */
    --neon-yellow:   #d6b362;
    --neon-orange:   #c79356;
    --terminal-green:#c8a45c;
    --bag-color:     #c8a45c;
    --text-main:     #ece6da;   /* cream     */
    --text-muted:    #9b9384;
    --heading-color: #f3ecdd;
    --link-color:    #c8a45c;
    --link-hover:    #e8d5a8;   /* champagne */
    --card-bg:       rgba(28, 22, 13, 0.88);
    --card-border:   rgba(200, 164, 92, 0.34);
    --glass-bg:      rgba(22, 18, 12, 0.90);
    --nav-bg:        rgba(14, 14, 16, 0.92);
    --nav-text:      #ece6da;
    --footer-bg:     transparent;
    --footer-text:   #9b9384;
    --input-bg:      rgba(255, 255, 255, 0.04);
    --input-text:    #ece6da;
    --input-border:  rgba(200, 164, 92, 0.30);
    --font-heading:  'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lux-gold:      #c8a45c;
    --lux-champagne: #e8d5a8;
    --lux-line:      rgba(200, 164, 92, 0.34);
    --lux-surface:   rgba(28, 22, 13, 0.88);
}

/* ---- 2. Backgrounds & overlays: flat charcoal, kill the neon atmosphere ---- */
html, body, body.matrix-theme { background: var(--bg-color) !important; color: var(--text-main); }
body::before, body::after,
body.matrix-theme::before, body.matrix-theme::after { display: none !important; }
#three-bg, .scanlines, .noise-overlay, .hero-grid, #hero::before { display: none !important; }

/* ---- 3. Kill neon motion + glows ---- */
*, *::before, *::after { animation: none !important; }
* { text-shadow: none !important; box-shadow: none !important; }
/* drop the legibility text-stroke (unneeded on a solid bg; bad on serif) */
[style*="text-shadow"], .biz-title, .footer-signal,
.sponsored-banner .sponsored-banner-text, span.tech-badge,
div.terminal-success, div.terminal-error, body.matrix-theme h1,
h1, h2, h3, h4, h5, h6 {
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
}

/* ---- 4. Typography: serif headings, clean sans body ---- */
/* Inter/Playfair have a much larger x-height than VT323/Space Mono, so the
   same size reads bigger. head24 sets `html, body { font-size:
   var(--font-base-size) }` from the theme's font_base_size, putting an
   ABSOLUTE size on body - so a root-only scale never touched body text.
   Scale the real base (html AND body, relative to the theme value) to ~85%
   so all rem- and inherited-size text shrinks to match the cyberpunk theme. */
html, body { font-size: calc(var(--font-base-size, 16px) * 0.95) !important; }
body, body * { font-family: var(--font-body) !important; }
body h1, body h2, body h3, body h4, body h5, body h6,
.biz-title, .psy-title, .mega-glitch, p.tagline, div.terminal-header {
    font-family: var(--font-heading) !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}
/* gradient-clip text (transparent fill) -> solid gold */
.psy-title.psychedelic-flow, h1.psy-title.psychedelic-flow, h2.psy-title.psychedelic-flow,
.biz-title.psychedelic-flow, a.autocomplete-item .biz-name, button.share-btn-trippy {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--lux-gold) !important;
    filter: none !important;
}
.biz-title { color: var(--lux-champagne) !important; }

/* ---- 5. Links ---- */
a { color: var(--link-color); }
a:hover { color: var(--link-hover); }

/* ---- 6. Cards: flat charcoal surface, gold hairline, soft shadow ---- */
.psy-card {
    background: var(--lux-surface) !important;
    border: 1px solid var(--lux-line) !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.psy-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--lux-champagne) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 225, 0.22),
        0 0 0 1px rgba(200, 164, 92, 0.55),
        0 0 30px rgba(200, 164, 92, 0.45),
        0 22px 44px rgba(0, 0, 0, 0.7) !important;
}
.psy-card img.card-img-top { border-bottom: 1px solid var(--lux-line) !important; }

/* Card 3D pop (all viewports). On the near-black luxury bg (#0e0e10) black drop
   shadows are invisible, so cards are separated with LIGHT: a slightly lighter
   surface, a wide bright gold border, a gold ring + glow, and a warm top
   highlight. Hover (desktop) is handled by .psy-card:hover above; tap/click
   presses via :active. !important beats the base .psy-card and the global
   `* { box-shadow:none }` reset. Closed cards swap to a red ring/glow. */
.psy-card {
    border-width: 2px !important;
    border-color: rgba(200, 164, 92, 0.9) !important;
    background: rgba(40, 33, 20, 0.97) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 225, 0.18),
        0 0 0 1px rgba(200, 164, 92, 0.4),
        0 0 22px rgba(200, 164, 92, 0.32),
        0 16px 34px rgba(0, 0, 0, 0.7) !important;
    transform: translateZ(0) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.psy-card:active {
    transform: translateY(2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 225, 0.14),
        0 0 0 1px rgba(200, 164, 92, 0.4),
        0 0 14px rgba(200, 164, 92, 0.26),
        0 7px 16px rgba(0, 0, 0, 0.6) !important;
}
.card-closed, .card-expired {
    border-color: #c00000 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 225, 0.12),
        0 0 0 1px rgba(192, 0, 0, 0.5),
        0 0 22px rgba(192, 0, 0, 0.32),
        0 16px 34px rgba(0, 0, 0, 0.7) !important;
}
/* remove HUD brackets / scan lines / animated gradient rings everywhere */
.psy-card::before, .psy-card::after,
.profile-container::before, .profile-container::after,
.profile-img-frame::before, .profile-img-frame::after,
.dir-banner-frame::after, .legal-container::before,
#map-search-container::before { display: none !important; }

/* ---- 7. Framed surfaces (banner / profile / hero image): solid gold hairline ---- */
.dir-banner-frame, .profile-img-frame, .profile-container, #hero .hero-container {
    background: var(--lux-surface) !important;
    border: 1px solid var(--lux-line) !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40) !important;
}
.dir-banner-frame img, .profile-img-frame .profile-img { border-radius: 0 !important; }

/* ---- 8. Buttons: elegant gold (outline + filled primaries) ---- */
a.cta-btn, button.cta-btn, a.events-btn, a.events-hero-btn, a.map-hero-btn,
a.map-pulse-override, button.map-pulse-override, a.trippy-map-btn,
a.footer-contact, button.sys-toggle-btn, a.psy-btn, button.psy-btn {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--lux-gold) !important;
    color: var(--lux-gold) !important;
    border-radius: 3px !important;
    letter-spacing: 1px !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}
a.cta-btn:hover, button.cta-btn:hover, a.events-btn:hover, a.events-hero-btn:hover,
a.map-hero-btn:hover, a.map-pulse-override:hover, button.map-pulse-override:hover,
a.trippy-map-btn:hover, a.footer-contact:hover, button.sys-toggle-btn:hover,
a.psy-btn:hover, button.psy-btn:hover {
    background: var(--lux-gold) !important;
    color: #14110d !important;
    -webkit-text-fill-color: #14110d !important;
}
/* Map HUD buttons ([ ALL ] [ OPEN NOW ] [ SAT. VIEW ] [ MY LOCATION ]) float
   over the map, so a transparent fill was unreadable. Drop them from the
   transparent group above so they keep the base dark backing; gold outline +
   text come from the variable remap and the active-state colours from JS. Just
   flatten the neon glow and match the luxury corner radius here. */
.map-hud-btn { box-shadow: none !important; border-radius: 3px !important; }

/* filled primary actions */
button.search-btn, .modal-submit-btn {
    background: var(--lux-gold) !important; background-image: none !important;
    color: #14110d !important; -webkit-text-fill-color: #14110d !important;
    border: 1px solid var(--lux-gold) !important; border-radius: 3px !important;
}
button.search-btn:hover, .modal-submit-btn:hover { background: var(--lux-champagne) !important; }
/* keep EXPLORE pill-shaped so it nests inside the rounded search bar (square corners poked out) */
button.search-btn { border-radius: 50px !important; }
/* active filter pills */
button.sys-toggle-btn.active-all, button.sys-toggle-btn.active-open {
    background: var(--lux-gold) !important; color: #14110d !important; border-color: var(--lux-gold) !important;
}
/* small text buttons */
button.psy-btn-small { color: var(--lux-gold) !important; -webkit-text-fill-color: var(--lux-gold) !important; }
/* ...except the prominent RATE CTA, which is filled with the accent and needs
   dark text (the gold psy-btn-small text above would be gold-on-gold). */
button.psy-btn-small.ad-rate-btn { color: #14110d !important; -webkit-text-fill-color: #14110d !important; }
/* kill the light-sweep sheen pseudo on every button */
a.cta-btn::after, button.cta-btn::after, a.events-btn::after, a.events-hero-btn::after,
a.map-hero-btn::after, a.map-pulse-override::after, button.map-pulse-override::after,
a.trippy-map-btn::after, a.psy-btn::after, button.psy-btn::after,
.modal-submit-btn::after, a.footer-contact::after { display: none !important; }

/* ---- 9. Search bar pill ---- */
/* Keep the pill background OPAQUE. The autocomplete dropdown is a child of the
   form with margin-top:-25px, so its sharp-cornered top tucks UP into the pill;
   it's z-index:5 while this pill is z-index:10, so the pill is meant to mask
   that overlap. Cyberpunk's solid #000 hides it; a translucent luxury bg let
   the dropdown's square show through (the reported "square behind the pill").
   An opaque fill restores the mask. Backdrop-filter is pointless on a solid
   fill (and its blur fails to clip to border-radius under the form's
   translateZ ancestor), so drop it. */
div.search-container form::after {
    background: #14110d !important;
    border: 1px solid var(--lux-line) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
}
div.search-container form:focus-within::after { border-color: var(--lux-gold) !important; }
/* EXPLORE renders wider in luxury (Inter vs the condensed VT323), so its left
   edge crowds the clear "x" that's anchored for the narrower cyberpunk button.
   Nudge the x left and shift the input's right padding the same 20px so typed
   text keeps clear of it. */
form span.clear-btn { right: 155px !important; }
form input.search-input { padding-right: 185px !important; }
#filter-hud { background: rgba(0, 0, 0, 0.35) !important; border: 1px solid var(--lux-line) !important; }
/* Mobile search focus turns the wrapper into an opaque purple top bar (square)
   behind the rounded pill - it clashes in luxury. Hide that bar so only the
   pill shows. Higher specificity (body ...) beats the inline rule that
   get_top_tags_html emits after this file. */
@media (max-width: 768px) {
    body .search-wrapper-flex.mobile-focus-active {
        background: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
}

/* ---- 10. Nav + footer ---- */
nav.glass-nav { background: var(--nav-bg) !important; border-bottom: 1px solid var(--lux-line) !important; }
nav.glass-nav a.nav-link { color: var(--text-main) !important; }
nav.glass-nav a.nav-link:hover { color: var(--lux-gold) !important; }
footer.footer-wrapper { border-top: 1px solid var(--lux-line) !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent) !important; }
.footer-signal { color: var(--lux-gold) !important; }

/* ---- 11. Modals + forms ---- */
div.terminal-window { background: #14120d !important; border: 1px solid var(--lux-line) !important; }
div.terminal-header { background: var(--lux-gold) !important; color: #14110d !important; }
input.form-psy, textarea.form-psy, select.form-psy {
    background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--input-text) !important;
}
input.form-psy:focus, textarea.form-psy:focus, select.form-psy:focus { border-color: var(--lux-gold) !important; }

/* ---- 12. Hours / panels / map placeholder ---- */
div.info-panel { background: rgba(0, 0, 0, 0.35) !important; border-left: 2px solid var(--lux-gold) !important; }
.card-hours { border-left: 2px solid var(--lux-gold) !important; }
.card-map-link { background: rgba(200, 164, 92, 0.06) !important; }

/* ---- 13. Legal document ---- */
div.legal-container { border: 1px solid var(--lux-line) !important; border-top: 3px solid var(--lux-gold) !important; }
div.legal-container::after { background: var(--lux-gold) !important; }
div.legal-container h2, div.legal-container h3 { color: var(--lux-gold) !important; }
div.legal-container h2::before, div.legal-container h3::before { content: none !important; }

/* ---- 14. Hero + scroll arrows ---- */
a.section-arrow { color: var(--lux-gold) !important; }

/* ---- 15. Sponsored accents toned to gold ---- */
span.ad-badge, span.organic-sponsor-badge { background: var(--lux-gold) !important; color: #14110d !important; }
div.sponsored-card { border: 1px solid var(--lux-gold) !important; background: rgba(200, 164, 92, 0.05) !important; }

/* ---- 16. Keyboard focus ring -> gold ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--lux-gold) !important; }
/* but NOT the main search input: it sits inside the rounded pill and shows
   focus via the pill border (form:focus-within::after), so the global ring
   above would draw a sharp gold box inside the pill. !important is needed to
   beat the global ring above (style.css suppresses it without !important). */
input.search-input:focus, input.search-input:focus-visible {
    outline: none !important; box-shadow: none !important;
}