/* Основной контейнер для Liquid Glass */
.uc-liquid-glass {
    /* CSS переменные с фоллбеками */
    --uc-lg-border-radius: 50px;
    --uc-lg-blur-intensity: 3px;
    --uc-lg-tint-opacity: 0.25;
    --uc-lg-shadow-opacity: 0.2;
    --uc-lg-shine-intensity: 0.5;
    --uc-lg-fallback-bg: rgba(255, 255, 255, 0.8); /* Фоллбек для старых браузеров */

    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--uc-lg-border-radius, 50px) !important;

    /* Фоллбек фон для браузеров без backdrop-filter */
    background: var(--uc-lg-fallback-bg) !important;
    
    /* Тень контейнера */
    box-shadow:
        0 6px 6px rgba(0, 0, 0, var(--uc-lg-shadow-opacity, 0.2)),
        0 0 20px rgba(0, 0, 0, calc(var(--uc-lg-shadow-opacity, 0.2) * 0.5)) !important;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2) !important;
    
    /* Фоллбек переходы для IE */
    -ms-transition: all 0.4s ease !important;
    -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2) !important;
    -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2) !important;
    -o-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2) !important;
}

/* Фоллбек для браузеров без поддержки backdrop-filter */
.uc-liquid-glass.no-backdrop-filter {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Слой размытия фона — только для поддерживающих браузеров */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .uc-liquid-glass {
        background: rgba(255, 255, 255, var(--uc-lg-tint-opacity, 0.25)) !important;
    }
    
    .uc-liquid-glass::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;

        /* Кроссбраузерный backdrop-filter */
        -webkit-backdrop-filter: blur(var(--uc-lg-blur-intensity, 3px)) !important;
        backdrop-filter: blur(var(--uc-lg-blur-intensity, 3px)) !important;
        filter: url(#uc-glass-distortion) !important;

        border-radius: inherit !important;
        pointer-events: none !important;
    }

    .uc-liquid-glass::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;

        background: rgba(255, 255, 255, var(--uc-lg-tint-opacity, 0.25)) !important;
        border-radius: inherit !important;
        pointer-events: none !important;
    }
}

/* Слой с бликами */
.uc-liquid-glass .tn-atom {
    position: relative !important;
    z-index: 3 !important;
    background: transparent !important;
}

.uc-liquid-glass .tn-atom::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;

    box-shadow:
        inset 2px 2px 1px 0 rgba(255, 255, 255, var(--uc-lg-shine-intensity, 0.5)),
        inset -1px -1px 1px 1px rgba(255, 255, 255, var(--uc-lg-shine-intensity, 0.5)) !important;

    border-radius: inherit !important;
    pointer-events: none !important;
}

/* Интерактивные эффекты — кроссбраузерные */
/*
.uc-liquid-glass:hover {
    transform: translateY(-2px) !important;
    -webkit-transform: translateY(-2px) !important;
    -moz-transform: translateY(-2px) !important;
    -ms-transform: translateY(-2px) !important;
    -o-transform: translateY(-2px) !important;
    
    box-shadow:
        0 8px 12px rgba(0, 0, 0, calc(var(--uc-lg-shadow-opacity, 0.2) * 1.2)),
        0 0 30px rgba(0, 0, 0, calc(var(--uc-lg-shadow-opacity, 0.2) * 0.7)) !important;
}

.uc-liquid-glass:active {
    transform: translateY(0px) scale(0.98) !important;
    -webkit-transform: translateY(0px) scale(0.98) !important;
    -moz-transform: translateY(0px) scale(0.98) !important;
    -ms-transform: translateY(0px) scale(0.98) !important;
    -o-transform: translateY(0px) scale(0.98) !important;
}
*/

/* Фоллбек hover эффекты для старых браузеров без calc() */
/*
.no-css-calc .uc-liquid-glass:hover {
    box-shadow:
        0 8px 12px rgba(0, 0, 0, 0.24),
        0 0 30px rgba(0, 0, 0, 0.14) !important;
}
*/

/* Фоллбек для браузеров без transform */
/*
.no-transforms .uc-liquid-glass:hover {
    margin-top: -2px !important;
}

.no-transforms .uc-liquid-glass:active {
    margin-top: 0px !important;
    transform: none !important;
}
*/

/* SVG фильтр */
.uc-svg-filter {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}