/* Fanzzo — Dark/Light Theme Variables */

:root {
    /* Drives UA-rendered chrome: scrollbars, form controls, caret. */
    color-scheme: dark;
    --bg: #0a0a0a;
    --bg-card: rgba(255,255,255,0.05);
    --bg-card-hover: rgba(255,255,255,0.08);
    --bg-elevated: rgba(255,255,255,0.07);
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.15);
    --text: #f5f5f5;
    --text-secondary: rgba(255,255,255,0.6);
    --text-muted: rgba(255,255,255,0.35);
    --accent: #f5f5f5;
    --accent-hover: #ffffff;
    --accent-glow: rgba(255,255,255,0.12);
    --accent-soft: rgba(255,255,255,0.08); /* gray wash, never pink */
    --hover-bg: rgba(255,255,255,0.08);
    --hover-bg-strong: rgba(255,255,255,0.14);
    --accent-fg: #0a0a0a; /* text/icons on accent fill */
    --pink: #d4d4d4;
    --cyan: #a3a3a3;
    --green: #34D399;
    --green-soft: rgba(52,211,153,0.12);
    --orange: #FBBF24;
    --red: #F87171;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Surfaces with opacity (nav, filters, mobile menu) */
    --nav-bg: rgba(0,0,0,0.75);
    --nav-bg-solid: rgba(0,0,0,0.96);
    --filter-bg: rgba(0,0,0,0.85);
    --orb-opacity: 0.1;
    --backdrop-blur: blur(24px) saturate(1);
    --selection-bg: var(--accent);
    --selection-color: #0a0a0a;

    /* Form elements */
    --input-bg: var(--bg-elevated);
    --select-option-bg: #111111;

    /* Scrollbar */
    --scrollbar-thumb: rgba(255,255,255,0.08);
    --scrollbar-thumb-hover: rgba(255,255,255,0.15);

    /* Skeleton */
    --skeleton-bg: rgba(255,255,255,0.04);

    /* Search icon (encoded for dark bg) */
    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.35)' stroke-width='2'%3E%3Cpath stroke-linecap='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");

    /* Logo gradient text — always visible in both modes */
    --logo-color: #f5f5f5;

    /* Card shadows */
    --card-hover-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px var(--accent-glow);

    /* Category border */
    --accent-border: rgba(255,255,255,0.18);

    /* Ambient orb colors */
    --orb-accent: var(--accent);
    --orb-pink: var(--pink);
}

[data-theme="light"] {
    color-scheme: light;
    /* Near-white base. Cards are pure #fff and separate by shadow, not by
       darkening the page behind them. */
    --bg: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f0f0;
    --bg-elevated: #f4f4f4;
    --border: rgba(0,0,0,0.07);
    --border-hover: rgba(0,0,0,0.25);
    --text: #0a0a0a;
    --text-secondary: #404040;
    --text-muted: #737373;
    --accent: #111111;
    --accent-hover: #000000;
    --accent-glow: rgba(0,0,0,0.10);
    --accent-soft: rgba(0,0,0,0.06);
    --hover-bg: rgba(0,0,0,0.05);
    --hover-bg-strong: rgba(0,0,0,0.09);
    --accent-fg: #ffffff;
    --pink: #525252;
    --cyan: #737373;
    --green: #059669;
    --green-soft: rgba(5,150,105,0.07);
    --orange: #D97706;
    --red: #DC2626;

    /* Frosted nav */
    --nav-bg: rgba(255,255,255,0.75);
    --nav-bg-solid: rgba(255,255,255,0.96);
    --filter-bg: rgba(255,255,255,0.8);
    --orb-opacity: 0.08;
    --backdrop-blur: blur(20px) saturate(1);
    --selection-bg: var(--accent);
    --selection-color: #ffffff;

    --input-bg: #ffffff;
    --select-option-bg: #ffffff;

    --scrollbar-thumb: rgba(0,0,0,0.12);
    --scrollbar-thumb-hover: rgba(0,0,0,0.22);

    --skeleton-bg: rgba(0,0,0,0.05);

    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='rgba(0,0,0,0.3)' stroke-width='2'%3E%3Cpath stroke-linecap='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");

    --logo-color: #0a0a0a;

    --card-hover-shadow:
        0 8px 24px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.05);

    --accent-border: rgba(0,0,0,0.15);

    --orb-accent: rgba(0,0,0,0.15);
    --orb-pink: rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════
   LIGHT MODE — Component overrides
   ═══════════════════════════════════════════ */

/* Background: a whisper of warmth, not a grey wash. The old midpoint
   (#f0eef8) darkened the centre of the page enough to read as grey. */
[data-theme="light"] body {
    background: #ffffff;
}

/* Ambient orbs: barely-there tint. At the old opacity they tinted the whole
   page lavender on wide viewports. */
[data-theme="light"] .ambient .orb {
    opacity: 0.03;
    filter: blur(160px);
}
[data-theme="light"] body::before {
    background: rgba(0,0,0,0.022);
    opacity: 1;
}
[data-theme="light"] body::after {
    background: rgba(0,0,0,0.016);
    opacity: 1;
}

/* Nav: white frosted glass with a proper shadow */
[data-theme="light"] nav:not(.sidebar-nav) {
    border-bottom-color: rgba(0,0,0,0.04);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.03);
}
[data-theme="light"] .sidebar-nav {
    box-shadow: none !important;
    border: none !important;
}

/* Cards: white with colored shadows for depth */
[data-theme="light"] .consultant-card,
[data-theme="light"] .profile-header,
[data-theme="light"] .profile-section,
[data-theme="light"] .booking-widget,
[data-theme="light"] .form-card,
[data-theme="light"] .support-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .success-card,
[data-theme="light"] .content-card,
[data-theme="light"] .legal-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 16px rgba(0,0,0,0.04),
        0 0 0 1px rgba(0,0,0,0.02);
    backdrop-filter: none;
}
[data-theme="light"] .consultant-card:hover,
[data-theme="light"] .legal-card:hover,
[data-theme="light"] .support-card:hover {
    border-color: rgba(0,0,0,0.2);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05),
        0 0 0 1px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}

/* Filter pills: white cards with tinted hover */
[data-theme="light"] .filter-pill {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    color: #555566;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
[data-theme="light"] .filter-pill:hover {
    border-color: rgba(0,0,0,0.35);
    color: var(--accent);
    background: rgba(0,0,0,0.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme="light"] .filter-pill.active {
    background: linear-gradient(135deg, #111111, #262626);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(0,0,0,0.30);
}

/* Search input */
[data-theme="light"] .search-input {
    background-color: #ffffff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) inset;
}
[data-theme="light"] .search-input:focus {
    background-color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.10);
}

/* Form inputs */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: #ffffff;
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) inset;
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.10);
}

/* Duration options */
[data-theme="light"] .duration-option {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
[data-theme="light"] .duration-option.active {
    background: rgba(0,0,0,0.05);
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Tags: tinted pills */
[data-theme="light"] .card-tag,
[data-theme="light"] .tag {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
    color: #555566;
}

/* Social links */
[data-theme="light"] .social-link {
    background: #ffffff;
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
[data-theme="light"] .social-link:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Category badge: tinted with gradient */
[data-theme="light"] .card-category,
[data-theme="light"] .profile-category {
    background: rgba(0,0,0,0.07);
    border-color: rgba(0,0,0,0.15);
    color: #6D28D9;
}

/* Step dots */
[data-theme="light"] .step-dot {
    background: rgba(0,0,0,0.12);
}
[data-theme="light"] .step-dot.active {
    background: var(--accent);
}
[data-theme="light"] .step-dot.done {
    background: var(--green);
}

/* File drop area */
[data-theme="light"] .file-drop {
    border-color: rgba(0,0,0,0.15);
    background: rgba(0,0,0,0.02);
}
[data-theme="light"] .file-drop:hover,
[data-theme="light"] .file-drop.dragover {
    background: rgba(0,0,0,0.05);
    border-color: var(--accent);
}

/* CTA / primary buttons: gradient with glow */
[data-theme="light"] .nav-cta {
    background: linear-gradient(135deg, #111111, #262626) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.35) !important;
}
[data-theme="light"] .btn-book,
[data-theme="light"] .btn-primary,
[data-theme="light"] .success-link {
    background: linear-gradient(135deg, #111111, #262626);
    box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* Sticky filter bar */
[data-theme="light"] .filters {
    border-bottom-color: rgba(0,0,0,0.03);
    box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.02);
}

/* Index/legal hub: pill bar */
[data-theme="light"] .top-nav,
[data-theme="light"] .res-shell-nav {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
}

/* Sidebar: no shadow */
[data-theme="light"] .doc-sidebar,
[data-theme="light"] .res-shell-sidebar {
    box-shadow: none;
    background: transparent;
    border: none;
}

/* Dashboard sidebar - no shadows in any theme */
.sidebar,
.sidebar *,
.sidebar-content,
.sidebar-nav,
.sidebar-footer,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar *,
[data-theme="light"] .sidebar,
[data-theme="light"] .sidebar * {
    box-shadow: none !important;
    border: none !important;
    filter: none !important;
    -webkit-box-shadow: none !important;
}
[data-theme="light"] .sidebar-links a,
[data-theme="light"] .res-sb-links a {
    border-left-color: rgba(0,0,0,0.08);
}

/* Footer */
[data-theme="light"] footer,
[data-theme="light"] .footer {
    border-top-color: rgba(0,0,0,0.05);
}

/* Card bottoms / dividers */
[data-theme="light"] .card-bottom {
    border-top-color: rgba(0,0,0,0.05);
}

/* FAQ items */
[data-theme="light"] .faq-question:hover {
    background: rgba(0,0,0,0.03);
}

/* Booking widget sticky */
[data-theme="light"] .booking-widget {
    box-shadow:
        0 2px 8px rgba(0,0,0,0.04),
        0 8px 32px rgba(0,0,0,0.06);
}

/* Page headers — add subtle accent */
[data-theme="light"] .page-header h1 {
    color: #1a1a2e;
}

/* Card rate pricing text */
[data-theme="light"] .card-rate {
    color: #1a1a2e;
}
[data-theme="light"] .widget-price {
    color: #1a1a2e;
}

/* Smooth transition when toggling (added by JS after first paint) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}


/* Theme-aware brand logos */
img.logo-light { display: none !important; }
img.logo-dark { display: block !important; }
[data-theme="light"] img.logo-light { display: block !important; }
[data-theme="light"] img.logo-dark { display: none !important; }

/* Compact brand mark — wordmarks get max-width so they never dominate the nav */
.logo img, .nav-logo img, .loader-logo img,
.sidebar-brand img {
    height: 18px !important;
    max-height: 18px !important;
    width: auto !important;
    max-width: 96px !important;
    object-fit: contain;
    /* display is controlled by .logo-light / .logo-dark only */
}
.loader-logo img {
    height: 22px !important;
    max-height: 22px !important;
    max-width: 110px !important;
}
.logo, .nav-logo, .loader-logo, .sidebar-brand a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.theme-toggle svg {
    width: 16px;
    height: 16px;
}
/* Show moon in dark mode, sun in light mode */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }


/* Text/icons painted on accent fills — works for both B&W themes */
.btn-primary,
.auth-signup,
.form-submit,
.nav-cta,
.nav-item.primary:hover,
.link-copy:hover,
.ppv-submit,
.ppv-submit-circle,
.vault-upload-btn,
.btn-book,
.success-link {
    color: var(--accent-fg) !important;
}
/* Spinners on accent-filled controls */
.form-submit .spinner,
.btn-primary .spinner,
.ppv-submit-circle .spinner {
    border-color: color-mix(in srgb, var(--accent-fg) 35%, transparent) !important;
    border-top-color: var(--accent-fg) !important;
}
/* Gray hover washes (never pink/purple) */
.nav-item:hover {
    background: var(--hover-bg) !important;
}
.nav-item.active {
    background: var(--hover-bg-strong) !important;
}
.nav-item.primary {
    background: var(--hover-bg) !important;
    color: var(--text) !important;
}
.nav-item.primary:hover {
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
}

/* Generic interactive row/button hovers → gray */
.menu-dropdown button:hover,
.settings-item-btn:hover:not(:disabled),
.chart-toggle-btn:not(.active):hover,
.back-btn:hover,
.view-more-btn:hover,
.view-all-link:hover,
.upload-close-btn:hover,
.agreement-close:hover,
.agreement-cancel:hover,
.dropzone:hover,
.link-card:hover,
.theme-toggle:hover {
    background: var(--hover-bg) !important;
}
.dropzone:hover {
    border-color: var(--border-hover) !important;
}
.theme-toggle:hover {
    color: var(--text) !important;
    border-color: var(--border-hover) !important;
}