<xf:css>
.widget-new-year-countdown {
    text-align: center;
    padding: 25px;
    background: linear-gradient(135deg, 
        #0a1931 0%, 
        #1a2980 30%, 
        #1e3c72 50%, 
        #2a5298 100%);
    border-radius: 20px;
    color: #fff;
    font-family: 'Segoe UI', 'Montserrat', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 
        0 15px 35px rgba(0, 0, 50, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin: 15px 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.widget-new-year-countdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(30, 144, 255, 0.1) 0%, transparent 50%);
    z-index: 0;
}

.widget-new-year-countdown::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: 
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.4;
    animation: stars 120s linear infinite;
    z-index: 0;
}

.widget-new-year-countdown .widget-header {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
}

.widget-new-year-countdown .countdown-title {
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FF8C00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

.widget-new-year-countdown .countdown-title::before,
.widget-new-year-countdown .countdown-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD700);
}

.widget-new-year-countdown .countdown-title::before {
    left: -20px;
}

.widget-new-year-countdown .countdown-title::after {
    right: -20px;
    background: linear-gradient(90deg, #FFD700, transparent);
}

.widget-new-year-countdown .countdown-subtitle {
    font-size: 1.1em;
    font-weight: 300;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 25px;
    line-height: 1.6;
    position: relative;
    z-index: 2;
    color: #e6f7ff;
}

.widget-new-year-countdown .countdown-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin-bottom: 40px;
    perspective: 1000px;
}

.widget-new-year-countdown .countdown-item {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
    border-radius: 15px;
    padding: 25px 15px;
    min-width: 110px;
    backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.widget-new-year-countdown .countdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.7s ease;
}

.widget-new-year-countdown .countdown-item:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 215, 0, 0.2),
        inset 0 0 30px rgba(255, 215, 0, 0.1);
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
}

.widget-new-year-countdown .countdown-item:hover::before {
    left: 100%;
}

.widget-new-year-countdown .countdown-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 2px;
    background: linear-gradient(45deg, 
        rgba(255, 215, 0, 0.3), 
        rgba(30, 144, 255, 0.3), 
        rgba(255, 215, 0, 0.3));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.widget-new-year-countdown .countdown-item:hover::after {
    opacity: 1;
}

.widget-new-year-countdown .countdown-value {
    font-size: 3.5em;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(45deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    position: relative;
    text-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
    font-variant-numeric: tabular-nums;
}

.widget-new-year-countdown .countdown-label {
    font-size: 0.95em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #a3d5ff;
    position: relative;
    padding-top: 10px;
}

.widget-new-year-countdown .countdown-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.widget-new-year-countdown .new-year-message {
    margin: 30px auto 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #FFD700;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    max-width: 800px;
    min-height: 80px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
}

.widget-new-year-countdown .new-year-message:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}

.widget-new-year-countdown .message-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
    transition: transform 0.3s ease;
}

.widget-new-year-countdown .new-year-message:hover .message-icon {
    transform: scale(1.1) rotate(10deg);
}

.widget-new-year-countdown .fact-text {
    flex: 1;
    text-align: left;
    line-height: 1.5;
    padding: 0 10px;
}

.widget-new-year-countdown .fact-refresh {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #FFD700;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.widget-new-year-countdown .fact-refresh:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.05);
}

@keyframes stars {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(100px, 100px) rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: scale(0.98);
    }
}

@media (max-width: 768px) {
    .widget-new-year-countdown {
        padding: 20px 15px;
    }
    
    .widget-new-year-countdown .countdown-title {
        font-size: 1.8em;
        letter-spacing: 1px;
    }
    
    .widget-new-year-countdown .countdown-container {
        gap: 12px;
    }
    
    .widget-new-year-countdown .countdown-item {
        min-width: 85px;
        padding: 20px 10px;
    }
    
    .widget-new-year-countdown .countdown-value {
        font-size: 2.8em;
    }
    
    .widget-new-year-countdown .new-year-message {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 15px;
    }
    
    .widget-new-year-countdown .fact-text {
        text-align: center;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .widget-new-year-countdown .countdown-container {
        gap: 8px;
    }
    
    .widget-new-year-countdown .countdown-item {
        min-width: 70px;
        padding: 15px 8px;
    }
    
    .widget-new-year-countdown .countdown-value {
        font-size: 2.2em;
    }
    
    .widget-new-year-countdown .countdown-label {
        font-size: 0.85em;
    }
}
</xf:css>

<div class="widget-new-year-countdown">
    <div class="widget-header">
        <div class="countdown-title">Обратный отсчёт до Нового Года</div>
        <div class="countdown-subtitle">Каждая секунда приближает к волшебству, мечтам и новым начинаниям</div>
    </div>
    
    <div class="countdown-container">
        <div class="countdown-item">
            <div class="countdown-value" id="countdown-days">--</div>
            <div class="countdown-label">Дней</div>
        </div>
        <div class="countdown-item">
            <div class="countdown-value" id="countdown-hours">--</div>
            <div class="countdown-label">Часов</div>
        </div>
        <div class="countdown-item">
            <div class="countdown-value" id="countdown-minutes">--</div>
            <div class="countdown-label">Минут</div>
        </div>
        <div class="countdown-item">
            <div class="countdown-value" id="countdown-seconds">--</div>
            <div class="countdown-label">Секунд</div>
        </div>
    </div>
    
    <div class="new-year-message" id="new-year-message">
        <div id="message-icon"></div>
        <div class="fact-text" id="fact-text"></div>
        <button class="fact-refresh" id="fact-refresh">Новый факт</button>
    </div>
</div>

<xf:js>
(function() {
    const now = new Date();
    const currentYear = now.getFullYear();
    const nextYear = currentYear + 1;
    const newYearDate = new Date(`January 1, ${nextYear} 00:00:00 GMT+0300`);
    
    const daysEl = document.getElementById('countdown-days');
    const hoursEl = document.getElementById('countdown-hours');
    const minutesEl = document.getElementById('countdown-minutes');
    const secondsEl = document.getElementById('countdown-seconds');
    const messageEl = document.getElementById('new-year-message');
    const factTextEl = document.getElementById('fact-text');
    const messageIconEl = document.getElementById('message-icon');
    const factRefreshBtn = document.getElementById('fact-refresh');
    
    const svgIcons = {
        fireworks: `<svg class="message-icon" viewBox="0 0 32 32"><path fill="url(#fireworks-gold)" d="M16 2l2 5h4l2-5 2 5h4l2-5v8a3 3 0 0 1-3 3h-2v9l-2 4h-6l-2-4v-9h-2a3 3 0 0 1-3-3V2l2 5h4l2-5z"/><path fill="#FF6B6B" d="M20 20l3 3m-3-3l3-3m-3 3l-3 3m3-3l-3-3m6 8l3 3m-3-3l3-3m-3 3l-3 3m3-3l-3-3M10 20l3 3m-3-3l3-3m-3 3l-3 3m3-3l-3-3m6 8l3 3m-3-3l3-3m-3 3l-3 3m3-3l-3-3"/><defs><linearGradient id="fireworks-gold" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FFD700"/><stop offset="100%" stop-color="#FFA500"/></linearGradient></defs></svg>`,
        tree: `<svg class="message-icon" viewBox="0 0 32 32"><path fill="#2E8B57" d="M16 2l4 7h7l-5 6h4l-9 13-9-13h4l-5-6h7l4-7z"/><path fill="#8B4513" d="M14 30h4v-3h-4z"/><circle fill="#FFD700" cx="16" cy="10" r="2"/><circle fill="#FF4500" cx="12" cy="15" r="1.5"/><circle fill="#FF4500" cx="20" cy="15" r="1.5"/></svg>`,
        snowflake: `<svg class="message-icon" viewBox="0 0 32 32"><path fill="#87CEEB" d="M16 2l2 6h-4l2-6zm0 28l-2-6h4l-2 6zm12-12l-6-2v4l6-2zm-24 0l6 2v-4l-6 2zm14-12l2 6v-4l-2-6v4zm-4 0l-2 6v4l2-6v-4zm12 12l6-2v4l-6-2v4zm-24 0l-6 2v-4l6 2v-4zm14 12l2-6v4l-2 6v-4zm-4 0l-2-6v-4l2 6v4z"/><circle fill="#B0E0E6" cx="16" cy="16" r="3"/></svg>`,
        champagne: `<svg class="message-icon" viewBox="0 0 32 32"><path fill="url(#champagne-gold)" d="M8 4h16v4H8zm3 6h10v18H11zm2 3h6v12h-6z"/><path fill="#FFF" d="M13 13h6v12h-6z"/><path fill="#FF6B6B" d="M14 9h4v2h-4z"/><path fill="#4ECDC4" d="M10 28h12v2H10z"/><defs><linearGradient id="champagne-gold" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FFD700"/><stop offset="50%" stop-color="#FFEC8B"/><stop offset="100%" stop-color="#FFD700"/></linearGradient></defs></svg>`,
        gift: `<svg class="message-icon" viewBox="0 0 32 32"><path fill="#FF6B6B" d="M6 8h20v6H6zm3 8h14v12H9z"/><path fill="#4ECDC4" d="M16 8l2-4 2 4h-4z"/><path fill="#FFD700" d="M10 14h4v2h-4zm8 0h4v2h-4z"/><path fill="#45B7D1" d="M12 20h2v6h-2zm6 0h2v6h-2z"/></svg>`,
        bell: `<svg class="message-icon" viewBox="0 0 32 32"><path fill="#FFD700" d="M16 2a10 10 0 0 0-10 10v6l-2 4h24l-2-4v-6a10 10 0 0 0-10-10z"/><path fill="#FFA500" d="M16 26a4 4 0 0 1-4-4h8a4 4 0 0 1-4 4z"/><circle fill="#FFF" cx="16" cy="12" r="2"/></svg>`,
        star: `<svg class="message-icon" viewBox="0 0 32 32"><path fill="url(#star-gold)" d="M16 2l4 10h10l-8 7 3 10-9-7-9 7 3-10-8-7h10z"/><defs><radialGradient id="star-gold" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#FFD700"/><stop offset="100%" stop-color="#FF8C00"/></radialGradient></defs></svg>`,
        clock: `<svg class="message-icon" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="none" stroke="#FFD700" stroke-width="3"/><path fill="#4ECDC4" d="M16 8v8l6 4"/><circle cx="16" cy="16" r="2" fill="#FF6B6B"/></svg>`
    };
    
    const facts = [
        {text: "Традиция праздновать Новый год 1 января была введена Петром I в 1700 году", icon: "clock"},
        {text: "В России новогодние праздники длятся целых 10 дней — с 31 декабря по 8 января", icon: "gift"},
        {text: "Самый дорогой новогодний подарок в истории — статуя Свободы, подаренная Францией США", icon: "gift"},
        {text: "Первая новогодняя ёлка в России была установлена в Петербурге в 1852 году", icon: "tree"},
        {text: "Шампанское стало новогодним напитком благодаря русским аристократам в XIX веке", icon: "champagne"},
        {text: "Самая большая новогодняя ёлка в мире достигала 67 метров и была установлена в Мехико", icon: "tree"},
        {text: "Традиция запускать фейерверки на Новый год пришла из Китая более 2000 лет назад", icon: "fireworks"},
        {text: "В России Дед Мороз отмечает день рождения 18 ноября", icon: "bell"},
        {text: "Первая поздравительная открытка была отправлена в Англии в 1843 году", icon: "star"},
        {text: "Снежинки имеют шестиугольную форму из-за молекулярного строения воды", icon: "snowflake"},
        {text: "Новый год — самый древний праздник, его отмечали ещё в Месопотамии 4000 лет назад", icon: "clock"},
        {text: "В разных странах Деда Мороза называют по-разному: Санта-Клаус, Йоулупукки, Пер Ноэль", icon: "bell"},
        {text: "Самый популярный новогодний фильм в России — «Ирония судьбы, или С лёгким паром!»", icon: "star"},
        {text: "Главная ёлка страны устанавливается на Соборной площади Кремля с 1996 года", icon: "tree"},
        {text: "Традиция загадывать желание под бой курантов появилась в советское время", icon: "star"}
    ];
    
    let currentFactIndex = -1;
    
    function getRandomFact() {
        let newIndex;
        do {
            newIndex = Math.floor(Math.random() * facts.length);
        } while (newIndex === currentFactIndex && facts.length > 1);
        
        currentFactIndex = newIndex;
        const fact = facts[currentFactIndex];
        factTextEl.textContent = fact.text;
        messageIconEl.innerHTML = svgIcons[fact.icon];
    }
    
    function updateCountdown() {
        const now = new Date();
        const diff = newYearDate - now;
        
        if (diff <= 0) {
            daysEl.textContent = '00';
            hoursEl.textContent = '00';
            minutesEl.textContent = '00';
            secondsEl.textContent = '00';
            factTextEl.textContent = 'С Новым ' + nextYear + ' годом! Пусть он будет самым счастливым!';
            messageIconEl.innerHTML = svgIcons.fireworks + svgIcons.fireworks;
            messageEl.style.animation = 'pulse 1s infinite';
            factRefreshBtn.style.display = 'none';
            return;
        }
        
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
        
        daysEl.textContent = days.toString().padStart(2, '0');
        hoursEl.textContent = hours.toString().padStart(2, '0');
        minutesEl.textContent = minutes.toString().padStart(2, '0');
        secondsEl.textContent = seconds.toString().padStart(2, '0');
        
        if (days === 0 && hours < 24) {
            if (hours < 1) {
                factTextEl.textContent = 'Менее часа до Нового года! Приготовьте бокалы!';
                messageIconEl.innerHTML = svgIcons.champagne;
            } else {
                factTextEl.textContent = 'Последние часы уходящего года. Время для самых важных мыслей!';
                messageIconEl.innerHTML = svgIcons.clock;
            }
        } else if (days < 3) {
            factTextEl.textContent = 'Совсем скоро! Проверьте, всё ли готово к празднику?';
            messageIconEl.innerHTML = svgIcons.bell;
        } else {
            if (!factTextEl.textContent || factTextEl.textContent.includes('Совсем скоро')) {
                getRandomFact();
            }
        }
        
        if (days > 100) {
            messageEl.style.display = 'none';
        } else {
            messageEl.style.display = 'flex';
        }
    }
    
    factRefreshBtn.addEventListener('click', getRandomFact);
    
    getRandomFact();
    updateCountdown();
    const timer = setInterval(updateCountdown, 1000);
    
    setInterval(() => {
        if (Math.random() > 0.7) {
            getRandomFact();
        }
    }, 30000);
})();
</xf:js>

<xf:include template="ng" />