/*!
 * TATARR Glass Enhancements
 * Adăugă un sistem coerent de glassmorphism, fără să rescrie ce există deja.
 * Toate regulile sunt cu specificitate minimă și fără !important, ca să nu
 * suprascrie inline-ul salvat de Elementor.
 */

:root {
    --tatarr-glass-bg:           rgba(255, 255, 255, 0.08);
    --tatarr-glass-bg-strong:    rgba(255, 255, 255, 0.16);
    --tatarr-glass-border:       rgba(255, 255, 255, 0.20);
    --tatarr-glass-border-strong:rgba(255, 255, 255, 0.34);
    --tatarr-glass-blur:         16px;
    --tatarr-glass-saturate:     1.35;
    --tatarr-glass-radius:       18px;
    --tatarr-glass-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 10px 30px rgba(0, 0, 0, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.12);
    --tatarr-glass-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 18px 48px rgba(0, 0, 0, 0.28),
        0 4px 14px rgba(0, 0, 0, 0.18);
    --tatarr-ease:               cubic-bezier(.2, .8, .2, 1);
}

/* Light scheme: glass devine mai opac peste fundal luminos */
@media (prefers-color-scheme: light) {
    :root {
        --tatarr-glass-bg:            rgba(255, 255, 255, 0.55);
        --tatarr-glass-bg-strong:     rgba(255, 255, 255, 0.72);
        --tatarr-glass-border:        rgba(255, 255, 255, 0.55);
        --tatarr-glass-border-strong: rgba(255, 255, 255, 0.78);
        --tatarr-glass-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 10px 30px rgba(15, 23, 42, 0.10),
            0 2px 8px rgba(15, 23, 42, 0.06);
        --tatarr-glass-shadow-hover:
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            0 18px 48px rgba(15, 23, 42, 0.14),
            0 4px 14px rgba(15, 23, 42, 0.08);
    }
}

/* === Utility opt-in: pune .tatarr-glass pe orice container Elementor === */
.tatarr-glass {
    background: var(--tatarr-glass-bg);
    border: 1px solid var(--tatarr-glass-border);
    border-radius: var(--tatarr-glass-radius);
    box-shadow: var(--tatarr-glass-shadow);
    -webkit-backdrop-filter: blur(var(--tatarr-glass-blur)) saturate(var(--tatarr-glass-saturate));
    backdrop-filter:         blur(var(--tatarr-glass-blur)) saturate(var(--tatarr-glass-saturate));
    transition:
        transform .35s var(--tatarr-ease),
        box-shadow .35s var(--tatarr-ease),
        border-color .35s var(--tatarr-ease),
        background-color .35s var(--tatarr-ease);
}
.tatarr-glass:hover,
.tatarr-glass:focus-within {
    transform: translateY(-2px);
    border-color: var(--tatarr-glass-border-strong);
    background: var(--tatarr-glass-bg-strong);
    box-shadow: var(--tatarr-glass-shadow-hover);
}

/* Variante: ușor / puternic / pill */
.tatarr-glass--soft  { --tatarr-glass-blur: 10px; --tatarr-glass-saturate: 1.2; }
.tatarr-glass--heavy { --tatarr-glass-blur: 28px; --tatarr-glass-saturate: 1.6; }
.tatarr-glass--pill  { --tatarr-glass-radius: 999px; }

/* === Auto-enhance pe containere Elementor care au deja backdrop-filter ===
   Elementor pune blur-ul ca inline ::before pe .e-flex. Nu pot ataca ::before
   prin attribute selector pe stilul inline, dar pot adăuga un highlight subtil
   peste container ca să rezulte un efect "frosted" mai bogat. */
.elementor-element.e-flex[style*="backdrop-filter"],
.elementor-element.e-con[style*="backdrop-filter"],
.elementor-element[class*="backdrop"]:not(.tatarr-glass) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 12px 36px rgba(0, 0, 0, 0.20);
}

/* === Butoane: micro-interacțiune fluidă, fără să schimbe culorile temei === */
.elementor-button,
.ekit_icon_button,
a.elementor-button-link {
    transition:
        transform .25s var(--tatarr-ease),
        box-shadow .25s var(--tatarr-ease),
        filter .25s var(--tatarr-ease),
        background-color .25s var(--tatarr-ease) !important;
    will-change: transform;
}
.elementor-button:hover,
.ekit_icon_button:hover,
a.elementor-button-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    filter: saturate(1.08);
}
.elementor-button:active,
.ekit_icon_button:active {
    transform: translateY(0);
    filter: saturate(0.98);
    transition-duration: .08s;
}

/* Focus accesibil */
.elementor-button:focus-visible,
.ekit_icon_button:focus-visible,
.ekit_navsearch-button:focus-visible,
.ekit_search-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* === Imagini: lift subtil la hover === */
.elementor-widget-image .elementor-animation-grow,
.elementor-widget-image > .elementor-widget-container > a > img,
.elementor-widget-image > .elementor-widget-container > img {
    transition:
        transform .5s var(--tatarr-ease),
        filter .5s var(--tatarr-ease),
        box-shadow .5s var(--tatarr-ease);
}
.elementor-widget-image:hover .elementor-animation-grow,
.elementor-widget-image:hover img {
    filter: saturate(1.05) contrast(1.02);
}

/* === Counters: aliniere optică mai bună === */
.elementor-counter-number-wrapper {
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}
.elementor-counter-title {
    opacity: 0.92;
}

/* === Search / popup-uri ekit: glass pentru câmpul de căutare === */
.ekit_search-field,
.ekit-search-panel input[type="search"] {
    background: var(--tatarr-glass-bg);
    border: 1px solid var(--tatarr-glass-border);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter:         blur(10px) saturate(1.2);
    transition: border-color .2s var(--tatarr-ease), background-color .2s var(--tatarr-ease);
}
.ekit_search-field:focus,
.ekit-search-panel input[type="search"]:focus {
    border-color: var(--tatarr-glass-border-strong);
    background: var(--tatarr-glass-bg-strong);
    outline: none;
}

/* === Bottom-nav / panel-uri mobile: aspect frosted === */
.bottom-menu-panel,
.ekit-search-panel,
.bottom-nav {
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter:         blur(20px) saturate(1.4);
}

/* === Plugin TATARR Artists: card-uri și grid-uri primesc glass implicit === */
.tatarr-card,
.tatarr-artist-card,
.tatarr-grid .tatarr-item,
.tatarr-trending-card,
.tatarr-link-bio-card {
    background: var(--tatarr-glass-bg);
    border: 1px solid var(--tatarr-glass-border);
    border-radius: var(--tatarr-glass-radius);
    -webkit-backdrop-filter: blur(var(--tatarr-glass-blur)) saturate(var(--tatarr-glass-saturate));
    backdrop-filter:         blur(var(--tatarr-glass-blur)) saturate(var(--tatarr-glass-saturate));
    box-shadow: var(--tatarr-glass-shadow);
    transition:
        transform .35s var(--tatarr-ease),
        box-shadow .35s var(--tatarr-ease),
        border-color .35s var(--tatarr-ease);
}
.tatarr-card:hover,
.tatarr-artist-card:hover,
.tatarr-grid .tatarr-item:hover,
.tatarr-trending-card:hover,
.tatarr-link-bio-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tatarr-glass-shadow-hover);
    border-color: var(--tatarr-glass-border-strong);
}

/* === Respect prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
    .tatarr-glass,
    .tatarr-card,
    .tatarr-artist-card,
    .tatarr-grid .tatarr-item,
    .tatarr-trending-card,
    .tatarr-link-bio-card,
    .elementor-button,
    .ekit_icon_button,
    .elementor-widget-image img {
        transition: none;
    }
    .tatarr-glass:hover,
    .tatarr-card:hover,
    .tatarr-artist-card:hover,
    .tatarr-grid .tatarr-item:hover,
    .tatarr-trending-card:hover,
    .tatarr-link-bio-card:hover,
    .elementor-button:hover,
    .ekit_icon_button:hover,
    .elementor-widget-image:hover img {
        transform: none;
    }
}

/* === Respect prefers-contrast: scade transparența ca textul să rămână lizibil === */
@media (prefers-contrast: more) {
    :root {
        --tatarr-glass-bg:            rgba(255, 255, 255, 0.22);
        --tatarr-glass-bg-strong:     rgba(255, 255, 255, 0.36);
        --tatarr-glass-border:        rgba(255, 255, 255, 0.5);
        --tatarr-glass-border-strong: rgba(255, 255, 255, 0.75);
    }
}

/* === Fallback browsere fără backdrop-filter (Firefox sub flag etc.) === */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .tatarr-glass,
    .tatarr-card,
    .tatarr-artist-card,
    .tatarr-grid .tatarr-item,
    .tatarr-trending-card,
    .tatarr-link-bio-card,
    .ekit_search-field {
        background: rgba(22, 24, 32, 0.82);
    }
    @media (prefers-color-scheme: light) {
        .tatarr-glass,
        .tatarr-card,
        .tatarr-artist-card,
        .tatarr-grid .tatarr-item,
        .tatarr-trending-card,
        .tatarr-link-bio-card,
        .ekit_search-field {
            background: rgba(255, 255, 255, 0.88);
        }
    }
}

/* === Print: elimină efectele costisitoare === */
@media print {
    .tatarr-glass,
    .tatarr-card,
    .tatarr-artist-card,
    .ekit_search-field {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: transparent;
        box-shadow: none;
        border-color: #ccc;
    }
}