/* styles.css */
:root {
    interpolate-size: allow-keywords;
}

body {
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}

#app {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background-color: #f5f5f5;
}

/* ============================================================
   MAIN PAGE STYLES
   ============================================================ */

/* 1. Главная плашка-хедер:
   Иллюстрация сочная сверху, а её нижняя часть (60-100%)
   плавно уходит в цвет фона страницы #f5f5f5 */
.main-header {
    position: relative;
    z-index: 20;
    background-color: #f5f5f5;
    background-image: 
        linear-gradient(
            to bottom, 
            rgba(245, 245, 245, 0) 0%, 
            rgba(245, 245, 245, 0) 60%, 
            rgba(245, 245, 245, 1) 100%
        ), 
        url('img/voz_news__main.webp');
    background-size: cover;
    background-position: center;
}

/* 2. Липкая градиентная шторка внутри скролл-контейнера:
   Нависает над скроллящимися новостями, размывая их верхний край в #f5f5f5 */
.scroll-fade-top {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    margin-bottom: -36px; /* Чтобы шторка не сдвигала карточки вниз */
    background: linear-gradient(to bottom, #f5f5f5 0%, rgba(245, 245, 245, 0) 100%);
    pointer-events: none; /* Пропускает скролл и тапы */
    z-index: 30;
}

/* 3. Скроллящаяся лента новостей */
.main-content {
    position: relative;
    z-index: 10;
    background-color: #f5f5f5;
    padding-top: 16px;
    padding-bottom: 24px;
}

/* Отдвигаем первую карточку новостей из-под градиентной шторки */
#news-list {
    padding-top: 12px; 
}

/* Безопасная зона снизу устройства с градиентной "шторкой" вверх */
.main-footer {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    background-color: #f5f5f5; /* Фон совпадает с фоном страницы */
    padding-bottom: calc(var(--tg-content-safe-area-inset-bottom, 0px) + 12px);
}

/* Градиентный "туман", уходящий ВВЕРХ от футера на ленту новостей */
.main-footer::before {
    content: '';
    position: absolute;
    bottom: 100%;       /* Начинается ровно над верхней границей футера */
    left: 0;
    width: 100%;
    height: 36px;       /* Высота мягкого мягкого размытия */
    /* Градиент снизу вверх: от цвета фона #f5f5f5 к прозрачному */
    background: linear-gradient(to top, rgba(245, 245, 245, 1), rgba(245, 245, 245, 0));
    pointer-events: none; /* Пропускает тапы и скролл сквозь градиент */
}

/* Header – fiksiran (sticky) */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Scrollable content */
.flex-1 {
    flex: 1;
    overflow-y: auto;
}

/* Footer – fiksiran na dnu */
.flex-shrink-0 {
    flex-shrink: 0;
}

.shadow-sm {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.shadow-inner {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.news-card {
    background-color: #fff;
}

#settingsContainer {
    background-color: #f5f5f5;
}

/* Overlay fullscreen — covers entire screen */
.settings-overlay {
    position: fixed;
    width: 100vw;      
    height: 100vh;
    inset: 0;
    background: #fff; /* Делаем сплошной белый фон во весь экран */
    display: none;
    z-index: 1000;
    padding: 0;
    margin: 0;
}

.settings-overlay.active {
    display: block;
}

.settings-panel {
    display: flex;
    flex-direction: column;
    width: 100vw;      
    height: 100vh;
    background-color: #fff;
    padding: calc(var(--tg-content-safe-area-inset-top, 0px) + 48px) 0 20px; /* Боковые паддинги убираем, переносим внутрь */
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* Ограничиваем контент внутри секций по ширине max-w-2xl (42rem) */
.settings-header,
.settings-content,
.settings-footer {
    width: 100%;
    max-width: 42rem; /* Эквивалент max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.settings-header {
    position: relative; /* Чтобы псевдоэлемент позиционировался относительно хедера */
    z-index: 10;        /* Хедер и его градиент должны быть ВЫШЕ скроллящегося списка */
    background-color: #fff; /* Задник самого хедера, чтобы маршруты не просвечивали сквозь текст Status */
}

/* Градиентная "шторка", уходящая вниз на список маршрутов */
.settings-header::after {
    content: '';
    position: absolute;
    top: 100%;          /* Начинается строго под нижним краем хедера */
    left: 0;
    width: 100%;
    height: 40px;       /* Высота мягкого перехода (можно сделать 30px-40px) */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    pointer-events: none; /* Чтобы градиент не мешал кликать/скроллить под ним */
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    /* Паддинги сверху и снизу нужны, чтобы первые и последние маршруты */
    /* не перекрывались градиентными "шторками" при максимальном скролле */
    padding-top: 16px;
    padding-bottom: 24px; 
}

.settings-footer {
    flex-shrink: 0;
    position: relative; /* Чтобы псевдоэлемент позиционировался относительно футера */
    z-index: 10;
    background-color: #fff; /* Белый сплошной фон под кнопками */
    padding-top: 12px;
    padding-bottom: calc(var(--tg-content-safe-area-inset-bottom, 0px) + 12px); /* Защита от шторки iOS */
}

/* 3. Градиентная "шторка", уходящая ВВЕРХ от футера на список маршрутов */
.settings-footer::before {
    content: '';
    position: absolute;
    bottom: 100%;       /* Начинается строго над верхней границей футера */
    left: 0;
    width: 100%;
    height: 40px;       /* Высота плавного размытия */
    /* Градиент идет СНИЗУ ВВЕРХ: от белого у футера к прозрачному наверх */
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    pointer-events: none; /* Чтобы скролл пальцем работал прямо сквозь градиент */
}

.route-checkbox {
    margin-right: 8px;
}

.share-btn {
    cursor: pointer;
}

.route-item {
    /* padding: 8px 2px;
    background-color: #f0f0f0; */
    padding: 4px 2px;
}

.route-item:last-child {
    border-bottom: none;
}

/* Clickable title */
.news-title {
    cursor: pointer;
}

.news-title:hover {
    color: #3b82f6;
}

/* Popup */
.premium-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}
.premium-popup.hidden {
    display: none;
}
.premium-popup-content {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    max-width: 360px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.premium-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
}
.premium-popup-close:hover {
    color: #000;
}
.premium-plans label {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.premium-plans label:last-child {
    border-bottom: none;
}
.premium-plans input[type="radio"] {
    margin-right: 10px;
}

#confirm-premium-btn:disabled {
    background: #b0b0b0;
    cursor: not-allowed;
}
#confirm-premium-btn:not(:disabled):hover {
    background: #1f7ad4;
}

/* Help Tooltip */

#status-help {
    transition: opacity 0.3s ease, max-height 0.3s ease;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    cursor: pointer;
}

#closeSettingsBtn.text-4xl {
    line-height: 1.4rem !important;
}

.glass-pill {
    position: relative;
    /* 1. Базовая прозрачная подложка (всего 15% белого!) */
    /* background-color: rgba(255, 255, 255, 0.05) !important; */
    
    /* 2. Тонкая светлая грань */
    border: 2px solid rgba(255, 255, 255, 0.65) !important;

    /* 3. Внешняя мягкая тень (определяет объём и объём кнопки над небом) */
    box-shadow: 
        0 8px 20px -4px rgba(0, 0, 0, 0.02),
         0 2px 6px -1px rgba(0, 0, 0, 0.06) !important; 

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
    color: rgba(242,70,95,1);
}

/* Верхний стеклянный блик (создает физический объем линзы) */
.glass-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    padding: 15px; /* Толщина блика */
    
    /* Градиентный блик: сверху светящаяся полоса, снизу 100% прозрачно */
    background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.85) 0%, 
        rgba(255, 255, 255, 0.05) 40%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    /* Маска, чтобы блик остался только по верхнему внутреннему контуру */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.blue-bg {
    background-color: rgba(61,119,224,1);
}
.red-bg {
    background-color: rgba(242,70,95,1);
}
.green-bg {
    background-color: rgba(7,160,109,1);
}
.neutral-bg {
    background-color: rgba(232,231,242,1);
}

/* ===== Раскрывающийся список станций ===== */
.stations-list {
    /* transition: opacity 0.2s ease, max-height 0.3s ease; */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1em 1em 3.1em;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}
.stations-list:not(.hidden) {
    /* max-height: 1000px;  */
    max-height: max-content; /* Smoothly animates! */
    opacity: 1;
}


/* Premium Launch Popup */
.premium-banner {
    background-image: url('/img/tech_background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Убеждаемся, что контент не обрезает выходящие за края элементы */
.premium-popup-content {
    position: relative; 
    overflow: visible !important; /* Гарантируем, что обрезки не будет */
}

/* Общий класс для выносных элементов */
.pop-out-element {
    position: absolute;
    z-index: 20; /* Должны быть поверх подложки попапа */
    pointer-events: none; /* Чтобы они не перекрывали клики по кнопке закрытия */
    animation: float-spark 3s ease-in-out infinite alternate;
}

/* Расставляем элементы за границы попапа с помощью отрицательных значений */
.star-1 {
    top: -25px;
    left: -20px;
    font-size: 3rem;
    /* transform: rotate(-15deg); */
    animation-delay: 0s;
}

.star-2 {
    top: -35px;
    right: 10px;
    font-size: 2.5rem;
    /* transform: rotate(20deg); */
    animation-delay: 0.3s;
}

.star-3 {
    bottom: -50px; /* -20px */
    left: 30px;
    font-size: 3rem;
    transform: rotate(-15deg);
    animation-delay: 0.7s;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.star-4 {
    bottom: 30px;
    right: -30px;
    font-size: 2.5rem;
    animation-delay: 0.9s;
}

/* Анимация пульсации и легкого парения для эффекта фейерверка */
@keyframes float-spark {
    0% {
        transform: translateY(0) scale(1) rotate(-15deg);
        /* opacity: 0.8; */
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    }
    100% {
        transform: translateY(-8px) scale(1.2) rotate(-5deg);
        /* opacity: 1; */
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
    }
}

/* Золотая кнопка в стиле Premium / Casino */
.gold-casino-btn {
    position: relative;
    overflow: hidden; /* Чтобы блик не вылетал за скруглённые углы */

    filter: brightness(1.1);
    
    /* Сочный золотой градиент */
    background: linear-gradient(180deg, 
        #FFF2A1 0%, 
        #F1C40F 35%, 
        #E67E22 80%, 
        #D35400 100%
    );
    
    /* Тёмно-коричневый цвет текста даёт дорогой контраст, как на золотых монетах */
    color: #2D1200 !important;
    /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); */
    
    border: 1px solid rgba(255, 234, 167, 0.5);
    
    /* Тройная тень: внешнее свечение + внутренний объём */
    /* box-shadow: 
        0 4px 15px rgba(211, 84, 0, 0.5), 
        0 0 20px rgba(241, 196, 15, 0.6),
        inset 0 2px 2px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(0, 0, 0, 0.25); */

    box-shadow: 
        0 6px 20px rgba(211, 84, 0, 0.6), 
        0 0 30px rgba(255, 212, 59, 0.9),
        inset 0 2px 3px rgba(255, 255, 255, 1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.05);
    
    cursor: pointer;
}

/* Бегущий блик (перелив) */
.gold-casino-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 70%
    );
    transform: rotate(25deg) translateX(-100%);
    animation: casino-shimmer 3s infinite ease-in-out;
    pointer-events: none;
}

/* Ховер и клик (для активного состояния) */
.gold-casino-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.01);
    filter: brightness(1.2);
    box-shadow: 
        0 6px 20px rgba(211, 84, 0, 0.6), 
        0 0 30px rgba(255, 212, 59, 0.9),
        inset 0 2px 3px rgba(255, 255, 255, 1);
}

.gold-casino-btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.99);
    box-shadow: 
        0 2px 8px rgba(211, 84, 0, 0.4), 
        inset 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Стили, если кнопка заблокирована (disabled) */
.gold-casino-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Анимация пролетающего блика */
@keyframes casino-shimmer {
    0% {
        transform: rotate(25deg) translateX(-130%);
    }
    25%, 100% {
        transform: rotate(25deg) translateX(130%);
    }
}

/* Стили для фона с поездом */
.train-bg {
    background-image: url('/img/SVBN__TG_popup_bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 180px; 
    padding: 24px; 
}

.train-bg .premium-popup-close {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 16px;
    right: 16px;
    color: #333;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}