/* ============================================================
   TEME DINAMICE — grupe de vârstă
   Aplicate via [data-theme="slug"] pe <html>
   Implicit (fără data-theme) = paleta neutru din main.css
   ============================================================ */

/* --- Copii 6–12 ani ---
   Verde pădure + Galben-portocaliu
   ------------------------------------------------------------ */
[data-theme="copii-6-12"] {
    --color-primary:      #4A8B3A;
    --color-primary-dark: #2A4A28;
    --color-accent:       #E8A020;
    --color-accent-dark:  #C07018;
    --color-bg-dark:      #2A4A28;
    --shadow:             0 2px 12px rgba(74,139,58,0.12);
    --shadow-lg:          0 8px 32px rgba(74,139,58,0.18);
}

/* --- Adolescenți 13–18 ani ---
   Indigo noapte + Violet electric + Teal cyber
   ------------------------------------------------------------ */
[data-theme="adolescenti-13-18"] {
    --color-primary:      #7C3AED;
    --color-primary-dark: #5B21B6;
    --color-accent:       #00C9A7;
    --color-accent-dark:  #00A88C;
    --color-bg-dark:      #1E1B4B;
    --shadow:             0 2px 12px rgba(124,58,237,0.12);
    --shadow-lg:          0 8px 32px rgba(124,58,237,0.18);
}

/* --- Tineri adulți 19–30 ani ---
   Emerald + Amber
   ------------------------------------------------------------ */
[data-theme="tineri-19-30"] {
    --color-primary:      #10B981;
    --color-primary-dark: #065F46;
    --color-accent:       #F59E0B;
    --color-accent-dark:  #D97706;
    --color-bg-dark:      #064E3B;
    --shadow:             0 2px 12px rgba(16,185,129,0.12);
    --shadow-lg:          0 8px 32px rgba(16,185,129,0.18);
}

/* --- Adulți 30–50 ani ---
   Navy solid + Ocean blue + Auriu
   ------------------------------------------------------------ */
[data-theme="adulti-30-50"] {
    --color-primary:      #1E6FA4;
    --color-primary-dark: #1E3A5F;
    --color-accent:       #B8860B;
    --color-accent-dark:  #9A6E00;
    --color-bg-dark:      #0F1B2D;
    --shadow:             0 2px 12px rgba(30,111,164,0.12);
    --shadow-lg:          0 8px 32px rgba(30,111,164,0.18);
}

/* --- Seniori 50+ ani ---
   Verde matur + Auriu cald
   ------------------------------------------------------------ */
[data-theme="seniori-50-plus"] {
    --color-primary:      #2C4A28;
    --color-primary-dark: #1A2E16;
    --color-accent:       #C9A74D;
    --color-accent-dark:  #A88530;
    --color-bg-dark:      #1C2A18;
    --shadow:             0 2px 12px rgba(44,74,40,0.12);
    --shadow-lg:          0 8px 32px rgba(44,74,40,0.18);
}

/* ============================================================
   THEME SWITCHER — componenta UI flotantă
   ============================================================ */
.theme-switcher {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    font-family: var(--font-primary, 'Inter', sans-serif);
}

/* Butonul principal */
.theme-switcher__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 10px;
    background: #fff;
    border: 1.5px solid var(--color-border, #e0e5ef);
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #2d2d2d);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}
.theme-switcher__btn:hover {
    border-color: var(--color-primary, #1a4b8c);
    box-shadow: 0 6px 20px rgba(0,0,0,0.16);
}
.theme-switcher__btn:focus-visible {
    outline: 2px solid var(--color-primary, #1a4b8c);
    outline-offset: 2px;
}

.theme-switcher__emoji {
    font-size: 16px;
    line-height: 1;
}
.theme-switcher__arrow {
    opacity: 0.5;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.theme-switcher__btn[aria-expanded="true"] .theme-switcher__arrow {
    transform: rotate(180deg);
}

/* Panoul cu opțiuni */
.theme-switcher__panel {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1.5px solid var(--color-border, #e0e5ef);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    padding: 6px;
    min-width: 200px;
    animation: theme-panel-in 0.15s ease;
}
.theme-switcher__panel[hidden] { display: none; }

@keyframes theme-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Opțiunile individuale */
.theme-switcher__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text, #2d2d2d);
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.3;
}
.theme-switcher__option:hover {
    background: var(--color-bg-alt, #f8f9fc);
    color: var(--color-primary, #1a4b8c);
}
.theme-switcher__option.is-active {
    background: var(--color-bg-alt, #f8f9fc);
    color: var(--color-primary, #1a4b8c);
    font-weight: 700;
}
.theme-switcher__option.is-active::after {
    content: '✓';
    margin-left: auto;
    font-size: 12px;
    color: var(--color-primary, #1a4b8c);
}
.theme-switcher__opt-emoji {
    font-size: 16px;
    flex-shrink: 0;
}

/* Separator după opțiunea "Toate vârstele" */
.theme-switcher__option:first-child {
    margin-bottom: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border, #e0e5ef);
}

/* Mobile: ascunde label-ul, afișează doar emoji + arrow */
@media (max-width: 480px) {
    .theme-switcher {
        bottom: 16px;
        right: 16px;
    }
    .theme-switcher__label {
        display: none;
    }
    .theme-switcher__btn {
        padding: 9px 10px;
        gap: 4px;
    }
    .theme-switcher__panel {
        min-width: 180px;
    }
}