/**
 * GlassSurface CSS Styles
 * Стили для эффекта стекла из @react-bits/GlassSurface-JS-CSS
 */

.glass-surface {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity .26s ease-out;
    transform-origin: center center !important;
}

.glass-surface__filter {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
}

.glass-surface__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    position: relative;
    z-index: 1;
}

/* Для sticky bar - убираем лишний padding */
.product-sticky-glass .glass-surface__content {
    padding: 0;
    justify-content: space-between;
}

.glass-surface--svg {
    background: hsl(0 0% 100% / var(--glass-frost, 0));
    /* backdrop-filter будет применен через inline стили в JavaScript для правильной работы с SVG фильтрами */
    /* Тени переопределяются для конкретных элементов (navbar, sticky bar) */
}

/* Специальные стили для PC версии sticky bar */
.mobile-product-sticky-bar.desktop-version .product-sticky-glass.glass-surface--svg {
    background: hsl(0 0% 100% / 0.15) !important;
    /* Тени применяются через mobile-navbar.css */
}

@media (prefers-color-scheme: dark) {
    .glass-surface--svg {
        background: hsl(0 0% 0% / var(--glass-frost, 0));
        /* Тени переопределяются для конкретных элементов (navbar, sticky bar) */
    }
    
    /* Специальные стили для PC версии sticky bar в темной теме */
    .mobile-product-sticky-bar.desktop-version .product-sticky-glass.glass-surface--svg {
        background: hsl(0 0% 100% / 0.1) !important;
        /* Тени применяются через mobile-navbar.css */
    }
}

.glass-surface--fallback {
    background: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturation, 1));
    backdrop-filter: blur(10px) saturate(var(--glass-saturation, 1));
    box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),  0 2px 16px 0 rgba(31, 38, 135, 0.1);
    
}

@media (prefers-color-scheme: dark) {
    .glass-surface--fallback {
        background: rgba(255, 255, 255, 0.1);
        -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturation, 1));
        backdrop-filter: blur(10px) saturate(var(--glass-saturation, 1));
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow:
            inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
            inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
    }
}

@supports not (backdrop-filter: blur(10px)) {
    .glass-surface--fallback {
        background: rgba(255, 255, 255, 0.4);
        box-shadow:
            inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
            inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
    }
    
    .glass-surface--fallback::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.15);
        border-radius: inherit;
        z-index: -1;
    }
}

@supports not (backdrop-filter: blur(10px)) {
    @media (prefers-color-scheme: dark) {
        .glass-surface--fallback {
            background: rgba(0, 0, 0, 0.4);
        }
        
        .glass-surface--fallback::before {
            background: rgba(255, 255, 255, 0.05);
        }
    }
}

.glass-surface:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    .glass-surface:focus-visible {
        outline-color: #0a84ff;
    }
}
#mobile-navbar-glass {
    transform-origin: center center !important;
}