/* ==================================================
   PR1MELAB — Premium liquid glass UI
   Values: main.css :root (PREMIUM GLASS + SCROLL GLASS)
================================================== */

body:not(.dashboard-app-body) .premium-glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--premium-glass-bg) !important;
    border: 1px solid color-mix(in srgb, var(--premium-glass-border-color) calc(var(--premium-glass-border-opacity) * 100%), transparent) !important;
    border-radius: var(--premium-glass-border-radius);
    box-shadow: var(--premium-glass-shadow);
    backdrop-filter: blur(var(--scroll-glass-blur-idle)) saturate(var(--premium-glass-blur-saturate));
    -webkit-backdrop-filter: blur(var(--scroll-glass-blur-idle)) saturate(var(--premium-glass-blur-saturate));
    transition:
        background var(--scroll-glass-duration) var(--scroll-glass-ease),
        border-color var(--scroll-glass-duration) var(--scroll-glass-ease),
        box-shadow var(--scroll-glass-duration) var(--scroll-glass-ease),
        backdrop-filter var(--scroll-glass-duration) var(--scroll-glass-ease),
        -webkit-backdrop-filter var(--scroll-glass-duration) var(--scroll-glass-ease);
}

body:not(.dashboard-app-body) .premium-glass::before,
body:not(.dashboard-app-body) .premium-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

body:not(.dashboard-app-body) .premium-glass::before {
    z-index: 0;
    background: var(--premium-glass-inner-highlight);
    opacity: var(--premium-glass-shine-opacity);
}

body:not(.dashboard-app-body) .premium-glass::after {
    z-index: 0;
    background: var(--premium-glass-reflection);
    opacity: 0.7;
}

body:not(.dashboard-app-body) .premium-glass > * {
    position: relative;
    z-index: 1;
}

/* Scroll / in-viewport enhancement (no layout shift) */
body:not(.dashboard-app-body) .premium-glass--scroll.is-glass-visible,
body:not(.dashboard-app-body) .premium-glass--scroll.is-glass-enhanced {
    background: var(--premium-glass-bg-scroll) !important;
    border-color: color-mix(
        in srgb,
        var(--color-red) calc(var(--scroll-glass-border-intensity-active, 0.48) * 100%),
        var(--premium-glass-border-color) calc((1 - var(--scroll-glass-border-intensity-active, 0.48)) * 100%)
    ) !important;
    box-shadow: var(--scroll-glass-shadow-active);
    backdrop-filter: blur(var(--scroll-glass-blur-active)) saturate(var(--premium-glass-blur-saturate));
    -webkit-backdrop-filter: blur(var(--scroll-glass-blur-active)) saturate(var(--premium-glass-blur-saturate));
}

body:not(.dashboard-app-body) .premium-glass--scroll.is-glass-visible::before,
body:not(.dashboard-app-body) .premium-glass--scroll.is-glass-enhanced::before {
    opacity: calc(var(--premium-glass-shine-opacity) * 1.15);
}

/* Panel variant */
body:not(.dashboard-app-body) .premium-glass--panel {
    border-radius: var(--site-faq-radius, 20px);
}

body:not(.dashboard-app-body) .booking-step-panel.premium-glass--panel {
    border-radius: 32px !important;
}

/* Card variant */
body:not(.dashboard-app-body) .premium-glass--card.membership-card.is-active:not(.membership-card--gold) {
    border-color: var(--premium-glass-featured-border) !important;
    box-shadow: var(--site-glass-shadow-featured) !important;
    transform: translateY(-4px);
}

body:not(.dashboard-app-body) .premium-glass--card.membership-card--gold.is-active {
    transform: translateY(-4px);
}

body:not(.dashboard-app-body) .premium-glass--card.membership-card--gold.is-active {
    box-shadow: var(--site-glass-shadow-gold) !important;
}

/* FAQ open state */
body:not(.dashboard-app-body) .faq-item.premium-glass.is-open {
    border-color: var(--premium-glass-featured-border) !important;
    box-shadow: var(--site-glass-shadow-featured) !important;
}

/* Reduced motion / disabled */
body.site-scroll-glass-disabled .premium-glass--scroll,
body.site-scroll-glass-disabled .premium-glass--scroll.is-glass-visible,
body.site-scroll-glass-disabled .premium-glass--scroll.is-glass-enhanced {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body:not(.dashboard-app-body) .premium-glass {
        transition: none !important;
    }

    body:not(.dashboard-app-body) .premium-glass--scroll.is-glass-visible,
    body:not(.dashboard-app-body) .premium-glass--scroll.is-glass-enhanced {
        background: var(--premium-glass-bg-scroll) !important;
    }
}