/* --- ГЛОБАЛЬНЫЙ ШРИФТ MONTSERRAT --- */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .logo-link span, .sidebar a {
    font-family: 'Montserrat', sans-serif !important;
}

/* --- БАЗОВЫЕ НАСТРОЙКИ (DESKTOP FIRST) --- */

/* Скрываем мобильные элементы на ПК */
.burger-btn { display: none; }
.close-menu-btn { display: none; }
.overlay-bg { display: none; }
.mobile-menu-auth { display: none; } /* Скрываем блок профиля в меню на ПК */

/* --- АДАПТИВ ДЛЯ ПЛАНШЕТОВ И МОБИЛЬНЫХ (<= 1024px) --- */
@media (max-width: 1024px) {
    /* 1. ЛЕЙАУТ */
    .layout {
        display: block; /* Убираем грид сайдбар/мейн */
        position: relative;

    }

    /* 2. САЙДБАР (ВЫЕЗЖАЮЩЕЕ МЕНЮ) */
    .sidebar {
        position: fixed;
        top: 0;
        left: -280px; /* Спрятано */
        width: 270px;
        height: 100%;
        background: #151515;
        z-index: 1000;
        transition: left 0.3s ease-in-out;
        padding-top: 20px;
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
        overflow-y: auto; /* Прокрутка внутри меню */
    }

    .sidebar.active {
        left: 0; /* Показываем */
    }

    /* 3. КНОПКИ УПРАВЛЕНИЯ МЕНЮ */
    .burger-btn {
                display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #ddc5a3;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
        order: 2; /* Бургер справа от лого */
    }

    .close-menu-btn {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        color: #888;
        font-size: 22px;
        cursor: pointer;
    }

    /* 4. ЗАТЕМНЕНИЕ ФОНА */
    .overlay-bg {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.7);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .overlay-bg.active {
        display: block;
        opacity: 1;
    }

    /* 5. ШАПКА (HEADER) - ВАЖНО */
    .header {
        display: flex;
        flex-wrap: wrap; /* Разрешаем перенос строк */
        align-items: center;
        padding: 10px 15px;
        height: auto; /* Высота подстраивается */
    }

    /* Логотип */
    .logo-link {
        flex-grow: 1; /* Занимает все доступное место слева */
        order: 1;
    }

    /* Скрываем обычную авторизацию */
    .auth-icons.desktop-only {
        display: none !important;
    }

    /* Поиск (на всю ширину во второй строке) */
    .search-container {
        order: 3;
        width: 100%;
        margin: 10px 0 0 0;
        min-width: 100%;
    }
    .header-search-form input {
        width: 100%;
    }

    /* 6. АВТОРИЗАЦИЯ ВНУТРИ МЕНЮ */
    .mobile-menu-auth {
        display: block;
        padding: 0 20px 0px 20px;
    }
    
    .mobile-user-card {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .mobile-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #1d97f1;
    }
    
    .mobile-user-info {
        display: flex;
        flex-direction: column;
    }
    
    .mobile-level {
        font-size: 14px;
        color: #fff;
        font-weight: 700;
    }
    
    .mobile-points {
        font-size: 12px;
        color: #1d97f1;
    }
    
    .mobile-auth-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .mobile-btn {
        padding: 8px 12px;
        background: #222;
        color: #fff;
        border-radius: 6px;
        text-decoration: none;
        font-size: 13px;
        border: 1px solid #333;
        flex: 1;
        text-align: center;
    }
    
    .mobile-btn.btn-primary {
        background: #1d97f1;
        border-color: #1d97f1;
    }

    .mobile-btn.btn-logout {
        color: #ff4757;
        border-color: rgba(255, 71, 87, 0.3);
    }
    
    .mobile-guest-card p {
        color: #aaa;
        font-size: 13px;
        margin-bottom: 10px;
        text-align: center;
    }

    /* 7. КОНТЕНТ (Сетки фильмов) */
    .grid, .videos-grid, .grid-items {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 в ряд на планшете */
        gap: 15px !important;
    }
}

/* --- ТЕЛЕФОНЫ (<= 600px) --- */
@media (max-width: 600px) {

 

    .btn-shop-action{
        font-size: 15px;
    }

    .header{
        gap: 0px;
    }

    .auth-wrapper{
        min-height: fit-content;
    }

    .video-card{
    overflow: hidden;

    display: block;
    }

.header .auth-icons{
    display: none !important;
}

.sidebar {
    gap: 15px;
}

    /* 2 в ряд на телефоне */
    .grid, .videos-grid, .grid-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Уменьшаем шрифты */
    h1, .movie-title-h1 { 
        font-size: 18px !important;
        font-weight: 600;
    }
    
    /* Карточка фильма */
    .movie-card .info .title { font-size: 13px; }
    .movie-card .info .bottom { font-size: 11px; }

    /* Страница просмотра */
    .movie-header-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .comments-section{
        padding: 0 0px;
    }

    .comments-section h2{
font-size: 18px;
    margin-bottom: 0px;
    }

    .section-title{
        font-weight: 600;
    }

.movie-text-info{
    text-align: left;
}

.backdrop-img{
    filter: blur(30px);
}

    .movie-poster-block {
        width: 50%;
        min-width: 250px;
        margin-bottom: 20px;
    }
    .movie-meta-row {
        justify-content: center;
    }
    .movie-actions {
        justify-content: center;
    }
    
    /* Убираем правый промо-блок */
    .video-promo-col {
        display: none;
    }
    .video-top-grid {
        grid-template-columns: 1fr !important;
    }

    .shop-grid{
        margin: 15px !important;
    }
    
    /* Пагинация */
    .pagination {
        gap: 5px;
    }
    .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
        padding: 0 5px;
    }
}




/* --- АДАПТИВ СТРАНИЦЫ РЕЙТИНГА (Минималистичные полоски) --- */
@media (max-width: 768px) {

    .logo-img1 {
    height: 55px;
}
    
    /* Убираем "коробку" контейнера, чтобы полоски были сами по себе */
    .ranking-table-container {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Скрываем шапку таблицы (Заголовки: #, Никнейм...) */
    .table-ranking thead {
        display: none;
    }

    /* Превращаем каждую строку в отдельную карточку-полоску */
    .table-ranking tbody tr {
        display: grid;
        /* Сетка: [Номер] [Аватар+Имя] [Уровень] [Очки] */
        grid-template-columns: 30px 1fr auto auto; 
        align-items: center;
        gap: 10px;
        
        background: #181818; /* Цвет фона полоски */
        margin-bottom: 8px; /* Отступ между полосками */
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Сбрасываем стандартные отступы ячеек таблицы */
    .table-ranking td {
        display: block;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }

    /* 1. Номер места (#) */
    .table-ranking td:first-child {
        font-size: 14px;
        font-weight: 700;
        color: #666;
        text-align: center;
    }
    /* Цвета для топ-3 мест (если классы есть в HTML) */
    .rank-1 { color: #FFD700 !important; } 
    .rank-2 { color: #C0C0C0 !important; } 
    .rank-3 { color: #CD7F32 !important; }

    /* 2. Юзер (Аватар + Имя) */
    .table-ranking td:nth-child(2) {
        overflow: hidden; /* Чтобы длинное имя не ломало верстку */
    }
    
    .user-cell {
        display: flex;
        align-items: center;
        gap: 10px !important;
    }
    
    .user-ava {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px; /* Чтобы не сжималась */
        border-radius: 50%;
        border: none !important; /* Убираем лишние рамки */
    }
    
    .user-name {
        font-size: 14px !important;
        font-weight: 600;
        white-space: nowrap; /* Имя в одну строку */
        overflow: hidden;
        text-overflow: ellipsis; /* Троеточие, если не влезает */
    }

    /* 3. Уровень (Маленькая серая плашка) */
    .table-ranking td:nth-child(3) {
        font-size: 10px;
    }
    .table-ranking td:nth-child(3) span {
        background: #252525 !important;
        color: #888;
        padding: 4px 8px !important;
        border-radius: 6px;
        font-size: 11px !important;
        font-weight: 500;
    }

    /* 4. Очки (Синий жирный текст справа) */
    .table-ranking td:nth-child(4) {
        font-size: 14px;
        font-weight: 800;
        color: #1d97f1 !important;
        text-align: right;
        min-width: 50px; /* Фикс ширина, чтобы цифры стояли ровно */
    }

    /* Адаптация нижней плашки "Мое место" */
    .my-rank-bar {
        width: 94% !important;
        bottom: 15px !important;
        padding: 10px 20px !important;
        border-radius: 100px !important;
        font-size: 13px !important;
    }
}