/* СТИЛИ ДЛЯ КНОПОК И МОДАЛКИ */
        /* Контейнер кнопок */
        .trailers-grid {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 15px 0;
            flex-wrap: wrap;
        }

        /* Общий стиль кнопок */
        .trailer-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 15px;
            border-radius: 8px;
            text-decoration: none !important;
            color: #fff !important;
            font-weight: bold;
            font-size: 13px;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            min-width: 120px;
        }

        .trailer-btn:hover {
            transform: translateY(-2px);
            filter: brightness(1.2);
            box-shadow: 0 6px 12px rgba(0,0,0,0.5);
        }

.trailer-btn svg {
    width: 20px;
    height: 20px;
    fill: #fff !important; /* Принудительно белый цвет */
    flex-shrink: 0;        /* Запрещаем сжатие иконки */
    display: block;
}

/* Цвета платформ */
.btn-yt { background: linear-gradient(135deg, #cc0000, #ff0000); }
.btn-rt { background: linear-gradient(135deg, #1a1a1a, #00cba0); border: 1px solid #00cba0; }

.btn-vk { 
    background: #222 !important; /* Темный фон, чтобы лого было видно */
    border: 1px solid #333 !important;
    padding: 8px 14px; /* Чуть поменьше паддинг, так как лого широкое */
}

.btn-vk:hover {
    background: #333 !important;
    border-color: #444 !important;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.2) !important; /* Синее свечение при наведении */
}

/* Перебиваем общие стили svg для этой кнопки, так как тут svg большой */
.btn-vk svg {
    width: 100px !important;  /* Ширина логотипа */
    height: 22px !important;  /* Высота логотипа */
    fill: none !important;    /* Убираем глобальную заливку */
}

        /* Модальное окно */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(5px);
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-content {
            position: relative;
            width: 90%;
            max-width: 800px;
            background: #111;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(45, 194, 107, 0.3); /* Зеленое свечение под стиль сайта */
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .modal-close {
            position: absolute;
            top: 10px;
            right: 15px;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            z-index: 2;
            text-shadow: 0 0 5px #000;
        }
        
        .modal-close:hover { color: #2dc26b; }

        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
        }

        .video-container iframe {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            border: 0;
        }

        /* Анимация открытия */
        .modal-overlay.active { display: flex; opacity: 1; }
        .modal-overlay.active .modal-content { transform: scale(1); }