/* ============================================
   НОВОГОДНЕЕ ОФОРМЛЕНИЕ
   Переменная для включения/отключения: --new-year-theme
   Установите в 0 для отключения новогоднего оформления
   ============================================ */

:root {
    /* 1 = новогоднее оформление включено, 0 = отключено */
    --new-year-theme: 1;
    
    /* Новогодние цвета (используются только когда тема включена) */
    --frost-white: rgba(255, 255, 255, 0.08);
    --frost-border: rgba(255, 255, 255, 0.15);
    --frost-glow: rgba(200, 220, 255, 0.1);
    --snow-white: #ffffff;
    --ice-blue: rgba(173, 216, 255, 0.15);
    --frost-crystal: rgba(220, 240, 255, 0.1);
}

/* ============================================
   КОНТЕЙНЕР ДЛЯ СНЕЖИНОК
   ============================================ */

.snowfall-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Снежинки за контентом */
.snowfall-back {
    z-index: -1;
}

/* Снежинки перед контентом (для эффекта глубины) */
.snowfall-front {
    z-index: 9999;
}

/* ============================================
   СТИЛИ СНЕЖИНОК
   ============================================ */

.snowflake {
    position: absolute;
    color: var(--snow-white);
    opacity: 0;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    filter: blur(0px);
}

/* Снежинки на заднем плане - более размытые и прозрачные */
.snowfall-back .snowflake {
    filter: blur(0.5px);
}

/* Снежинки, которые "упали" и лежат на карточках */
.snowflake.settled {
    animation: none !important;
    opacity: 0.9;
    filter: blur(0px);
    transition: opacity 8s ease-out;
}

.snowflake.settled.melting {
    opacity: 0;
}

/* ============================================
   ЭФФЕКТ ИНЕЯ НА КАРТОЧКАХ (FROST GLASS)
   ============================================ */

body.new-year-theme .form-card {
    background: linear-gradient(
        145deg,
        rgba(31, 36, 47, 0.7) 0%,
        rgba(35, 42, 55, 0.6) 25%,
        rgba(31, 36, 47, 0.65) 50%,
        rgba(28, 33, 43, 0.7) 75%,
        rgba(31, 36, 47, 0.75) 100%
    );
    backdrop-filter: blur(25px) saturate(120%);
    -webkit-backdrop-filter: blur(25px) saturate(120%);
    border: 1px solid var(--frost-border);
    box-shadow: 
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 60px rgba(255, 255, 255, 0.02),
        0 0 40px rgba(100, 150, 200, 0.05);
    position: relative;
    overflow: visible;
}

/* Морозные узоры на стекле - имитация кристаллов льда */
/* body.new-year-theme .form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Основные морозные пятна */ /*
        radial-gradient(ellipse 80px 60px at 5% 5%, rgba(255, 255, 255, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 100px 80px at 95% 10%, rgba(220, 240, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60px 90px at 90% 85%, rgba(255, 255, 255, 0.1) 0%, transparent 65%),
        radial-gradient(ellipse 70px 50px at 8% 92%, rgba(200, 230, 255, 0.07) 0%, transparent 55%),
        /* Дополнительные кристаллические блики */ /*
        radial-gradient(ellipse 40px 40px at 15% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 50px 35px at 85% 45%, rgba(255, 255, 255, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 35px 55px at 50% 5%, rgba(200, 220, 255, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 45px 30px at 70% 95%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
    animation: frostBreath 12s ease-in-out infinite;
}

@keyframes frostBreath {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
} */

/* Контент поверх морозного эффекта */
body.new-year-theme .form-card > * {
    position: relative;
    z-index: 1;
}

/* Эффект изморози по краям карточки с мерцанием */
body.new-year-theme .form-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 20%,
        transparent 40%,
        rgba(200, 230, 255, 0.08) 50%,
        transparent 60%,
        transparent 80%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-size: 400% 400%;
    animation: frostShimmer 15s ease-in-out infinite;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    padding: 1px;
}

@keyframes frostShimmer {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* ============================================
   НОВОГОДНЕЕ ОФОРМЛЕНИЕ ЗАГОЛОВКА
   ============================================ */

body.new-year-theme .header {
    position: relative;
}

/* Легкое свечение заголовка */
body.new-year-theme .header h1 {
    text-shadow: 
        0 0 30px rgba(255, 255, 255, 0.1),
        0 0 60px rgba(100, 150, 200, 0.05);
}

/* ============================================
   ОБЛАСТЬ ДЛЯ СНЕГА НА КАРТОЧКАХ
   ============================================ */

/* .snow-pile {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 25px;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
} 

/* Базовая линия снега на карточке - более реалистичная */
/* body.new-year-theme .form-card .snow-pile::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 3%;
    right: 3%;
    height: 6px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(245, 250, 255, 0.9) 40%,
        rgba(235, 245, 255, 0.8) 100%
    );
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    filter: blur(0.3px);
    box-shadow: 
        0 -2px 4px rgba(255, 255, 255, 0.6),
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 -2px 4px rgba(200, 220, 240, 0.3);
}

/* Дополнительные сугробики 
body.new-year-theme .form-card .snow-pile::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 10%;
    width: 25%;
    height: 4px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(240, 248, 255, 0.7) 100%
    );
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: 
        60vw 0 0 rgba(255, 255, 255, 0.85),
        30vw -1px 0 rgba(255, 255, 255, 0.8);
} */

/* ============================================
   ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ - ФОНОВОЕ СВЕЧЕНИЕ
   ============================================ */

/* Мягкое свечение вокруг body - имитация северного сияния */
body.new-year-theme {
    background: 
        radial-gradient(ellipse 600px 400px at 15% -10%, rgba(100, 150, 200, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 500px 500px at 85% 110%, rgba(120, 180, 220, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 800px 300px at 50% 50%, rgba(80, 120, 180, 0.02) 0%, transparent 70%),
        var(--bg-primary);
}

/* ============================================
   ЗИМНЯЯ АТМОСФЕРА НА ИНПУТАХ
   ============================================ */

body.new-year-theme input[type="text"],
body.new-year-theme input[type="email"],
body.new-year-theme input[type="number"],
body.new-year-theme select,
body.new-year-theme textarea {
    background: rgba(36, 42, 56, 0.75);
    border-color: rgba(60, 75, 95, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.new-year-theme input[type="text"]:hover,
body.new-year-theme input[type="email"]:hover,
body.new-year-theme input[type="number"]:hover,
body.new-year-theme select:hover,
body.new-year-theme textarea:hover {
    background: rgba(32, 38, 50, 0.8);
    border-color: rgba(80, 100, 130, 0.5);
}

body.new-year-theme input[type="text"]:focus,
body.new-year-theme input[type="email"]:focus,
body.new-year-theme input[type="number"]:focus,
body.new-year-theme select:focus,
body.new-year-theme textarea:focus {
    background: rgba(20, 25, 33, 0.9);
    box-shadow: 
        inset 0 0 0 1px var(--accent-blue),
        0 0 20px rgba(59, 130, 246, 0.12),
        inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================
   RADIO/CHECKBOX С ЗИМНИМ ЭФФЕКТОМ
   ============================================ */

body.new-year-theme .radio-label,
body.new-year-theme .checkbox-label {
    border-left-color: rgba(52, 61, 77, 0.6);
}

body.new-year-theme .radio-option input:checked + .radio-label,
body.new-year-theme .checkbox-option input:checked + .checkbox-label {
    background: rgba(36, 42, 56, 0.7);
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.05);
}

/* ============================================
   КНОПКИ С ЗИМНИМ ЭФФЕКТОМ
   ============================================ */

body.new-year-theme .btn-primary:hover {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.2);
}

body.new-year-theme .btn-secondary:hover {
    background: rgba(36, 42, 56, 0.6);
}

/* ============================================
   АДАПТАЦИЯ ДЛЯ STEP INDICATOR
   ============================================ */

body.new-year-theme .step.active .step-number {
    box-shadow: 
        0 0 12px rgba(59, 130, 246, 0.6),
        0 0 30px rgba(59, 130, 246, 0.25);
}

/* ============================================
   PROGRESS BAR С ЗИМНИМ ЭФФЕКТОМ
   ============================================ */

body.new-year-theme .progress-bar {
    box-shadow: 
        0 0 10px rgba(59, 130, 246, 0.5),
        0 0 20px rgba(59, 130, 246, 0.2);
}

/* ============================================
   SUCCESS/ERROR SCREEN С ЗИМНИМ ЭФФЕКТОМ
   ============================================ */

body.new-year-theme .success-icon {
    box-shadow: 
        0 8px 24px rgba(34, 197, 94, 0.4), 
        0 0 40px rgba(34, 197, 94, 0.2),
        0 0 80px rgba(255, 255, 255, 0.08);
}

body.new-year-theme .error-icon {
    box-shadow: 
        0 8px 24px rgba(239, 68, 68, 0.4), 
        0 0 40px rgba(239, 68, 68, 0.2),
        0 0 80px rgba(255, 255, 255, 0.08);
}

/* ============================================
   ALERTS С ЗИМНИМ ЭФФЕКТОМ
   ============================================ */

body.new-year-theme .alert {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ============================================
   МЕДИА ЗАПРОСЫ
   ============================================ */

@media (max-width: 768px) {
    body.new-year-theme .form-card::before {
        background: 
            radial-gradient(ellipse 60px 50px at 5% 5%, rgba(255, 255, 255, 0.1) 0%, transparent 70%),
            radial-gradient(ellipse 50px 60px at 95% 95%, rgba(220, 240, 255, 0.08) 0%, transparent 65%);
    }
    
    body.new-year-theme .form-card .snow-pile::before {
        height: 4px;
        left: 5%;
        right: 5%;
    }
    
    body.new-year-theme .form-card .snow-pile::after {
        display: none;
    }
}

/* Отключаем тяжелые эффекты при reduced motion */
@media (prefers-reduced-motion: reduce) {
    .snowflake,
    body.new-year-theme .form-card::before,
    body.new-year-theme .form-card::after {
        animation: none !important;
    }
    
    .snowfall-container {
        display: none;
    }
}

/* ============================================
   ОТКЛЮЧЕНИЕ ТЕМЫ (когда new-year-theme не на body)
   ============================================ */

body:not(.new-year-theme) .snowfall-container,
body:not(.new-year-theme) .snow-pile {
    display: none;
}