/* =============================================================
   PsyPlay API Popular Block — Styles
   Файл: css/psyplay-api-popular.css
   Версия: 1.5.0
   ============================================================= */

/* =============================================================
   0. Унификация шрифтов
      Montserrat — основной текст, Oswald — заголовки
   ============================================================= */
body,
p, ul, ol, li, dl, dt, dd,
span, blockquote, pre,
td, th, label,
input, select, textarea, button {
    font-family: 'Montserrat', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Oswald', 'Montserrat', sans-serif;
}


/* Только оформление контейнера.
   Карточки внутри рендерятся стандартным шаблоном includes/home/item.php
   и должны наследовать базовые стили листинга из main.css. */
.psyplay-api-popular-block {
    background: #DADADA;
    margin: 24px 0 28px;
    padding: 24px 0 28px;
    position: relative;
    clear: both;
    /* Full-width background is handled by scoped rules in custom.css/main.css to avoid horizontal scroll. */
    margin-left: 0;
    margin-right: 0;
}

.psyplay-api-popular-block::before {
    display: none;
}

@keyframes psyplay-api-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.psyplay-api-popular-inner {
    padding: 0 20px;
}

.page-category .movies-list-wrap .psyplay-api-popular-block .psyplay-api-popular-title {
    color: #333333;
    font-family: 'Oswald', 'Montserrat', sans-serif;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase !important;
    margin: 0 0 18px !important;
    padding: 0 0 10px;
    display: inline-block;
    line-height: 1.2;
    position: relative;
}

.psyplay-api-popular-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(108,221,215,0.95) 0%, rgba(108,221,215,0.2) 100%);
    box-shadow: 0 0 10px rgba(108, 221, 215, 0.45);
}

/* Никаких overrides для .ml-item/.mli-thumb/.ml-mask —
   оставляем поведение ровно как в обычных листингах. */
.psyplay-api-popular-grid {
    margin: 0 -1%;
}

/* Гарантируем корректное обтекание после popular-блока. */
.psyplay-api-popular-block + .searchadv_link_wrap,
.psyplay-api-popular-block + #filter {
    clear: both;
}

/* Подзаголовок основного листинга (блок New Movies). */
.page-category .movies-list-wrap h2.movies-list-subtitle {
    display: inline-block;
    margin: 0 0 14px !important;
    padding: 0 0 8px;
    font-family: 'Oswald', 'Montserrat', sans-serif;
    font-size: 2.2rem !important;
    line-height: 1.2;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #2f2f2f !important;
    border-bottom: 2px solid #6cddd7;
}

/* Верхняя панель: Filter + Advanced Search. */
.page-category .movies-list-wrap .filters-top-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 6px 0 10px;
}

.page-category .movies-list-wrap .filters-top-controls .filter-toggle {
    float: none !important;
    margin: 0;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 4px !important;
    line-height: 1 !important;
}

.page-category .movies-list-wrap .filters-top-controls .searchadv_link_wrap {
    margin: 0;
}

/* Mobile: Filter слева от Advanced Search (в одну линию). */
@media screen and (max-width: 1023px) {
    .page-category .movies-list-wrap .filters-top-controls {
        gap: 10px;
        flex-wrap: nowrap;
    }
}

/* =============================================================
   Single Page — уменьшаем зазор между шапкой и H1 (-40%: .pad 20px → 12px)
   ============================================================= */
.page-detail .pad {
    height: 8px !important;
}

/* =============================================================
   Single Page — Title above player + Trailer button + Overview H2
   ============================================================= */

/* Обёртка: заголовок слева, кнопка трейлера справа */
.single-page-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 14px;
}

/* H1 над плеером — стиль как у "Most popular movies" */
.single-page-title {
    font-family: 'Oswald', 'Montserrat', sans-serif;
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 0 8px;
    display: inline-block;
    line-height: 1.2;
    position: relative;
}

.single-page-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(108,221,215,0.95) 0%, rgba(108,221,215,0.2) 100%);
    box-shadow: 0 0 10px rgba(108, 221, 215, 0.45);
}

/* Красивая кнопка Trailer */
.btn-trailer-styled {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #6cddd7 0%, #3bbab4 100%);
    color: #fff !important;
    font-family: 'Oswald', 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: background 0.25s, box-shadow 0.25s, transform 0.15s;
    box-shadow: 0 3px 14px rgba(108, 221, 215, 0.45);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-trailer-styled:hover {
    background: linear-gradient(135deg, #3bbab4 0%, #28a19b 100%);
    color: #fff !important;
    box-shadow: 0 5px 20px rgba(108, 221, 215, 0.65);
    transform: translateY(-2px);
}

.btn-trailer-styled .fa {
    font-size: 1rem;
}

/* H2 Overview — стиль как у "Most popular movies/TV shows" */
.single-overview-h2 {
    font-family: 'Oswald', 'Montserrat', sans-serif;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase !important;
    color: #333333 !important;
    margin: 0 0 14px !important;
    padding: 0 0 8px;
    display: inline-block;
    line-height: 1.2;
    position: relative;
}

.single-overview-h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(108,221,215,0.95) 0%, rgba(108,221,215,0.2) 100%);
    box-shadow: 0 0 10px rgba(108, 221, 215, 0.45);
}

/* QR-код на десктопе: по центру колонки mv-rating */
.mv-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mv-rating .star-rating {
    align-self: flex-start;
}

.mv-rating .kaya-qrcode,
.mv-rating canvas,
.mv-rating img[src*="qr"] {
    display: block;
    margin: 10px auto 0;
}

/* QR-код на мобайле: скрываем десктопный, показываем мобильный */
.qr-code-mobile {
    display: none;
    text-align: center;
    margin: 10px 0;
}

.qr-code-mobile .kaya-qrcode,
.qr-code-mobile canvas {
    margin: 0 auto;
    display: block;
}

/* =============================================================
   8. Скрываем EPS бейдж на постерах сериалов в листингах
   ============================================================= */
.movies-list .ml-item .mli-eps {
    display: none !important;
}

/* =============================================================
   #aisimilar_btn — фирменный тиловый стиль
   ============================================================= */
#aisimilar_btn,
a#aisimilar_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Центрирование в колонке .mv-rating (flex-column) */
    align-self: center !important;
    /* Центрирование в не-flex контексте */
    margin: 8px auto 0 !important;
    width: fit-content !important;
    width: -moz-fit-content !important;
    gap: 8px !important;
    padding: 10px 28px !important;
    background: linear-gradient(135deg, #6cddd7 0%, #3bbab4 100%) !important;
    color: #fff !important;
    font-family: 'Oswald', 'Montserrat', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.25s, box-shadow 0.25s, transform 0.15s !important;
    box-shadow: 0 3px 12px rgba(108, 221, 215, 0.4) !important;
    white-space: nowrap !important;
}

#aisimilar_btn:hover,
a#aisimilar_btn:hover {
    background: linear-gradient(135deg, #3bbab4 0%, #28a19b 100%) !important;
    box-shadow: 0 5px 18px rgba(108, 221, 215, 0.6) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

/* =============================================================
   Листинги — H1 в стиле "Most popular movies/TV shows"
   ============================================================= */
.page-category .movies-list-wrap h1.ml-title,
.page-category .movies-list-wrap h1,
.page-archive h1.entry-title,
.page-archive h1 {
    font-family: 'Oswald', 'Montserrat', sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: #333333 !important;
    display: inline-block !important;
    padding: 0 0 10px !important;
    position: relative !important;
    line-height: 1.2 !important;
    background: none !important;
    border-bottom: none !important;
    margin: 0 0 18px !important;
}

.page-category .movies-list-wrap h1.ml-title::after,
.page-category .movies-list-wrap h1::after,
.page-archive h1.entry-title::after,
.page-archive h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(108,221,215,0.95) 0%, rgba(108,221,215,0.2) 100%);
    box-shadow: 0 0 10px rgba(108, 221, 215, 0.45);
}

/* =============================================================
   Мобильный постер: на десктопе poster масштаб, на мобайле full-width
   ============================================================= */

/* Постер на странице фильма/сериала — чуть крупнее */
.mvic-thumb img,
.mvic-thumb {
    width: 155px !important;
    min-width: 155px !important;
}

/* Хлебные крошки — видимы только на десктопе */
@media screen and (min-width: 768px) {
    #bread,
    #bread .breadcrumb {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =============================================================
   Mobile overrides (≤767px)
   ============================================================= */

/* =============================================================
   3. Night mode switch
   ============================================================= */

/*
   Switcher positioning and visual states are handled globally in css/main.css.
   This file must not pin #switch-mode to the page edge, otherwise mobile header
   placement gets overridden after wp_head() enqueues this stylesheet.
*/

/* =============================================================
   4. Filter block — light theme (clean, no flex override)
   ============================================================= */

/* 1а. Скрываем кнопку "Filter results" — она не нужна */
#filter .filter-btn {
    display: none !important;
}

/* Оформление контейнера — только визуал */
#filter {
    background: #f7f8fa !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin-top: 6px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
    /* display управляется JS-тоглом на мобайле — НЕ форсируем здесь */
}

/* Десктоп: flex-центрирование содержимого. На мобайле тема сама скрывает и показывает #filter */
@media screen and (min-width: 768px) {
    #filter {
        display: flex !important;
        align-items: center !important;
        min-height: 56px !important;
    }
    /* Дочерние обёртки — тоже flex, только десктоп */
    #filter > form,
    #filter > fieldset,
    #filter > div {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px 14px !important;
        width: 100% !important;
        padding: 8px 20px !important;
    }
    /* Кнопка Filter — только на мобайле нужна, на десктопе скрываем.
       Используем полный селектор чтобы перебить глобальное inline-flex */
    .page-category .movies-list-wrap .filters-top-controls .filter-toggle,
    .filter-toggle {
        display: none !important;
    }
}

/* Заголовки колонок (Sort by, IMDB Rating, etc.) */
#filter .fc-title {
    color: #444 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin-bottom: 0 !important;   /* убираем — иначе сдвигает содержимое вниз */
}

/* Кнопки-чекбоксы (IMDB Rating 1-9) */
#filter ul.fc-main-list li a {
    background: #fff !important;
    color: #444 !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
#filter ul.fc-main-list li a:hover,
#filter ul.fc-main-list li a.active,
#filter ul.fc-main-list li a:focus {
    background: #6cddd7 !important;
    color: #fff !important;
    border-color: #6cddd7 !important;
}

/* Кастомные дропдауны из filters.js (.select_div) */
#filter .select_div {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    color: #333 !important;
    font-size: 13px !important;
    min-width: 110px !important;
    transition: border-color 0.2s !important;
}
#filter .select_div:hover {
    border-color: #6cddd7 !important;
}
#filter .select_div .select_options {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 999 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    min-width: 140px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
    display: none !important;
    overflow: hidden !important;
}
#filter .select_div.active .select_options {
    display: block !important;
}
#filter .select_div .select_options div {
    padding: 7px 12px !important;
    cursor: pointer !important;
    color: #333 !important;
    font-size: 13px !important;
    transition: background 0.15s !important;
}
#filter .select_div .select_options div:hover,
#filter .select_div .select_options div.active {
    background: #e8fafa !important;
    color: #3bbab4 !important;
}

/* Иконка сортировки направления */
#filter .orderdir_div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    color: #555 !important;
    transition: border-color 0.2s, color 0.2s !important;
}
#filter .orderdir_div:hover {
    border-color: #6cddd7 !important;
    color: #3bbab4 !important;
}

/* =============================================================
   6. Breadcrumbs — hover effects (light)
   ============================================================= */
#bread .breadcrumb {
    padding: 4px 0 !important;
}
#bread .breadcrumb li a {
    color: #555 !important;
    text-decoration: none !important;
    transition: color 0.2s, border-bottom-color 0.2s !important;
    padding-bottom: 1px !important;
    border-bottom: 1px solid transparent !important;
}
#bread .breadcrumb li a:hover,
#bread .breadcrumb li a:focus,
#bread .breadcrumb li a:active {
    color: #3bbab4 !important;
    border-bottom-color: #3bbab4 !important;
    text-decoration: none !important;
}

/* =============================================================
   7. Dropdown menu — teal instead of blue + readable hover
   ============================================================= */

/* Верхнее меню — Oswald, крупный, лёгкий */
#menu ul.top-menu li a,
#menu ul.top-menu > li > a,
header #menu ul li a {
    font-family: 'Oswald', 'Montserrat', sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

#menu .sub-container {
    border-top: 2px solid #6cddd7 !important;
}

/* Sub-menu items base — обычный вид (без uppercase, без жирности) */
#menu .sub-container ul.sub-menu li a {
    display: block !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
    color: #333 !important;
    font-weight: 100 !important;        /* обычный вес */
    text-transform: none !important;    /* без uppercase */
    letter-spacing: 0 !important;
    font-size: 1.33rem !important;
    transition: background 0.18s ease, color 0.18s ease, border-radius 0.18s ease !important;
}

/* Sub-menu hover — тиловый фон + ТЁМНЫЙ текст для читаемости */
#menu .sub-container ul.sub-menu li a:hover,
#menu .sub-container ul.sub-menu li a:focus {
    background: #6cddd7 !important;
    color: #111111 !important;   /* тёмный текст контрастен на тиловом фоне */
    border-radius: 4px !important;
    text-decoration: none !important;
}

/* Current item highlight */
#menu .sub-container ul.sub-menu li.current-menu-item > a {
    color: #3bbab4 !important;
    font-weight: 600 !important;
}

/* Top-level menu item hover */
#menu ul.top-menu > li > a:hover,
#menu ul.top-menu > li.active > a,
#menu ul.top-menu > li.current-menu-item > a {
    border-bottom-color: #6cddd7 !important;
    color: #6cddd7 !important;
}

/* =============================================================
   4. Advanced Search link — hover + click animation
   ============================================================= */
.searchadv_link_wrap {
    /* Всегда прижата к правому краю — во всех шаблонах */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    width: 100% !important;
}
.searchadv_link_wrap a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s !important;
}
.searchadv_link_wrap a:hover {
    color: #3bbab4 !important;
    border-color: rgba(108,221,215,0.5) !important;
    background: rgba(108,221,215,0.07) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}
.searchadv_link_wrap a:active {
    transform: scale(0.96) !important;
    background: rgba(108,221,215,0.15) !important;
    color: #3bbab4 !important;
}
.searchadv_link_wrap a .fa {
    transition: transform 0.2s !important;
}
.searchadv_link_wrap a:hover .fa {
    transform: rotate(-10deg) scale(1.15) !important;
}

/* =============================================================
   6. Player nav — .player_nav ul.idTabs — ПОЛНАЯ ПЕРЕРИСОВКА
   ============================================================= */

/* Контейнер */
.player_nav {
    padding: 0 !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
}

/* Список серверов */
.player_nav ul.idTabs {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Строка каждого сервера */
.player_nav ul.idTabs li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    /* Светлая тема — видимая полосочка разделитель */
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    vertical-align: unset !important;
    transition: background 0.15s ease !important;
    background: transparent !important;
}
.player_nav ul.idTabs li:hover {
    background: rgba(0,0,0,0.04) !important;
}
.player_nav ul.idTabs li:last-child {
    border-bottom: none !important;
}

/* Название сервера */
.player_nav ul.idTabs li .les-title {
    flex: 1 !important;
    color: #333333 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;   /* "Server 1" всегда в одну строку */
}
.player_nav ul.idTabs li .les-title .fa {
    color: #555555 !important;
    font-size: 1.25rem !important;
}
.player_nav ul.idTabs li .les-title strong {
    font-weight: 600 !important;
    color: #333333 !important;
}

/* Обёртка кнопки */
.player_nav ul.idTabs li .les-content {
    flex-shrink: 0 !important;
}

/* Кнопка — НЕАКТИВНОЕ состояние */
.player_nav ul.idTabs li .les-content a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 110px !important;
    height: 42px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    /* Типографика */
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-decoration: none !important;
    /* Внешний вид — неактивное */
    background: #404040 !important;
    color: #999999 !important;
    border: 1.5px solid #585858 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover — неактивной кнопки */
.player_nav ul.idTabs li .les-content a:hover {
    background: rgba(108,221,215,0.12) !important;
    color: #6cddd7 !important;
    border-color: #6cddd7 !important;
    box-shadow: 0 0 8px rgba(108,221,215,0.3) !important;
    text-decoration: none !important;
}

/* АКТИВНАЯ кнопка — class="selected" — ОДИНАКОВЫЙ РАЗМЕР с неактивной */
.player_nav ul.idTabs li .les-content a.selected,
.player_nav ul.idTabs li .les-content a.current,
.player_nav ul.idTabs li .les-content a.active {
    /* Те же размеры — только цвет иной */
    min-width: 110px !important;     /* = неактивная */
    height: 42px !important;         /* = неактивная */
    padding: 0 18px !important;      /* = неактивная */
    margin: 0 !important;
    font-size: 1.1rem !important;    /* = неактивная */
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    /* Тиловый градиент */
    background: linear-gradient(135deg, #6cddd7 0%, #3bbab4 100%) !important;
    color: #0d2e2c !important;
    border: 1.5px solid #3bbab4 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 14px rgba(108,221,215,0.5),
                0 2px 6px rgba(0,0,0,0.35) !important;
    text-decoration: none !important;
}

/* Hover на активной — чуть ярче */
.player_nav ul.idTabs li .les-content a.selected:hover,
.player_nav ul.idTabs li .les-content a.current:hover,
.player_nav ul.idTabs li .les-content a.active:hover {
    background: linear-gradient(135deg, #7ee8e3 0%, #45c9c2 100%) !important;
    color: #0d2e2c !important;
    box-shadow: 0 0 20px rgba(108,221,215,0.7),
                0 3px 8px rgba(0,0,0,0.35) !important;
    text-decoration: none !important;
}

/* =============================================================
   btn-eps REDESIGN — красивые таблетки, фиксированный размер
   ============================================================= */

/* Сброс базовых стилей темы для блока серверов */
#list-eps .le-server {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    transition: background 0.15s !important;
}
#list-eps .le-server:hover {
    background: rgba(255,255,255,0.03) !important;
}
#list-eps .le-server .les-title {
    flex: 1 !important;
    font-size: 0.85rem !important;
    color: #ccc !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}
#list-eps .le-server .les-content {
    flex-shrink: 0 !important;
}

/* Базовая кнопка — НЕАКТИВНОЕ состояние */
#list-eps .le-server .les-content .btn-eps {
    /* Фиксированные размеры одинаковые для всех состояний */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 88px !important;
    height: 30px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    /* Типографика */
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-decoration: none !important;
    /* Внешний вид — неактивное */
    background: #404040 !important;
    color: #999 !important;
    border: 1.5px solid #585858 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover — неактивной кнопки */
#list-eps .le-server .les-content .btn-eps:hover {
    background: rgba(108,221,215,0.12) !important;
    color: #6cddd7 !important;
    border-color: #6cddd7 !important;
    box-shadow: 0 0 8px rgba(108,221,215,0.25) !important;
}

/* АКТИВНОЕ состояние — тиловый градиент, ТЕ ЖЕ размеры */
#list-eps .le-server .les-content .btn-eps.active {
    /* Размеры — идентичны неактивному */
    min-width: 88px !important;
    height: 30px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    /* Внешний вид — активное */
    background: linear-gradient(135deg, #6cddd7 0%, #3bbab4 100%) !important;
    color: #0d2e2c !important;
    border: 1.5px solid #3bbab4 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 14px rgba(108,221,215,0.5),
                0 2px 6px rgba(0,0,0,0.3) !important;
}
/* Hover на активной — чуть ярче */
#list-eps .le-server .les-content .btn-eps.active:hover {
    background: linear-gradient(135deg, #7ee8e3 0%, #45c9c2 100%) !important;
    box-shadow: 0 0 20px rgba(108,221,215,0.7),
                0 3px 8px rgba(0,0,0,0.3) !important;
}

/* =============================================================
   8-9. Страница /advanced-search/ — кнопка + H1
   ============================================================= */

/* H1 на странице searchadv.php — .ml-title-page h1 */
.ml-title-page h1,
.ml-title.ml-title-page h1 {
    font-family: 'Oswald', 'Montserrat', sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: #333333 !important;
    display: inline-block !important;
    padding: 0 0 10px !important;
    position: relative !important;
    line-height: 1.2 !important;
    background: none !important;
    border-bottom: none !important;
    margin: 0 0 18px !important;
}
.ml-title-page h1::after,
.ml-title.ml-title-page h1::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, rgba(108,221,215,0.95) 0%, rgba(108,221,215,0.2) 100%) !important;
    box-shadow: 0 0 10px rgba(108,221,215,0.45) !important;
}

/* Кнопка Search — searchadv_form() рендерит внутри .searchadv_form */
.searchadv_form [type="submit"],
.searchadv_form button[type="submit"],
.searchadv_form input[type="submit"],
/* WP Advanced Search submit */
#wpas-submit input[type="submit"],
.wpas-submit input[type="submit"],
.wpas-submit button[type="submit"],
.page-search-advanced #searchform [type="submit"],
[id*="wpas"] [type="submit"],
[class*="wpas"] [type="submit"] {
    background: linear-gradient(135deg, #6cddd7 0%, #3bbab4 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Oswald', 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 12px 32px !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s, transform 0.15s, background 0.2s !important;
    box-shadow: 0 3px 14px rgba(108,221,215,0.4) !important;
}
#wpas-submit input[type="submit"]:hover,
.wpas-submit input[type="submit"]:hover,
.wpas-submit button[type="submit"]:hover {
    background: linear-gradient(135deg, #3bbab4 0%, #28a19b 100%) !important;
    box-shadow: 0 5px 20px rgba(108,221,215,0.6) !important;
    transform: translateY(-2px) !important;
}

/* H1 на странице /advanced-search/ */
.page .entry-title,
.page h1.entry-title {
    font-family: 'Oswald', 'Montserrat', sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: #333333 !important;
    display: inline-block !important;
    padding: 0 0 10px !important;
    position: relative !important;
    line-height: 1.2 !important;
    background: none !important;
    border-bottom: none !important;
    margin: 0 0 24px !important;
}
.page .entry-title::after,
.page h1.entry-title::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, rgba(108,221,215,0.95) 0%, rgba(108,221,215,0.2) 100%) !important;
    box-shadow: 0 0 10px rgba(108,221,215,0.45) !important;
}

/* =============================================================
   Mobile overrides (≤767px)
   ============================================================= */
@media screen and (max-width: 767px) {

    .single-page-title {
        font-size: 1.4rem !important;
    }

    .single-overview-h2 {
        font-size: 1.2rem !important;
    }

    .single-page-title-wrap {
        gap: 10px;
        margin-bottom: 10px;
    }

    /* 7. Mobile poster +30% = 140px * 1.3 = 182px */
    .mvic-thumb {
        width: 182px !important;
        min-width: 182px !important;
    }
    /* Перебиваем инлайн-стиль width:140px через !important */
    .mvic-thumb img,
    .mvic-thumb img.hiddenz,
    .mvic-thumb img.lazy {
        width: 182px !important;
        height: auto !important;
        min-height: unset !important;
        border-radius: 8px !important;
        box-shadow: 0 0 24px rgba(108, 221, 215, 0.5), 0 0 8px rgba(108, 221, 215, 0.25) !important;
    }

    /* 5. Mobile: Filter — левый край, Advanced Search — правый */
    .page-category .movies-list-wrap .filters-top-controls {
        justify-content: space-between !important;
    }

    /* Mobile filter: фон от края до края, контент с паддингом как у постеров */
    #filter {
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        padding-top: 12px !important;
        padding-left: 15px !important;   /* отступ = ширина постерной колонки */
        padding-right: 15px !important;
        margin-left: -15px !important;   /* фон выходит за контейнер */
        margin-right: -15px !important;
    }

    /* ================================================================
       "Find 5 Similar" — выделенный блок между Seasons и постером
       ================================================================ */
    .aisimilar_trigger {
        display: block !important;
        width: 100% !important;
        background: #f0fafa !important;
        padding: 20px 15px !important;
        margin: 0 0 16px !important;      /* отступ снизу — чтобы не прилипал к постеру */
        text-align: center !important;
        border-top: 2px solid rgba(59, 186, 180, 0.45) !important;
        border-bottom: 2px solid rgba(59, 186, 180, 0.45) !important;
        box-sizing: border-box !important;
        position: relative !important;    /* содержим абсолютное позиционирование */
        overflow: hidden !important;      /* скрываем #movie-mark и другие вылезающие элементы */
    }

    .aisimilar_desc {
        margin-top: 8px !important;
        font-size: 11px !important;
        color: #888 !important;
        text-align: center !important;
        letter-spacing: 0.04em !important;
    }

    /* Скрываем весь блок рейтинга/QR на мобайле (рейтинг, звёзды, QR-код) */
    .mv-rating,
    #movie-mark,
    #movie-rating,
    .post-ratings,
    [id^="post-ratings-"],
    .mv-rating .wpkqcg_qrcode_wrapper,
    .mv-rating [class*="wpkqcg"] {
        display: none !important;
    }
    #aisimilar_btn,
    a#aisimilar_btn {
        font-size: 1rem !important;
        padding: 10px 24px !important;
        justify-content: center !important;
        min-width: 200px !important;
    }

    /* Мобильный sub-menu светлой темы — фон тёмный, текст должен быть светлым */
    #menu .sub-container ul.sub-menu li a {
        color: #dddddd !important;
    }
    #menu .sub-container ul.sub-menu li.current-menu-item > a {
        color: #6cddd7 !important;
    }

    /* Скрываем хлебные крошки на мобайле */
    #bread {
        display: none !important;
    }


    /* На мобайле QR прячем из mv-rating (десктопная колонка скрыта)
       и показываем .qr-code-mobile внутри mvic-info */
    .mv-rating .kaya-qrcode,
    .mv-rating canvas,
    .mv-rating img[src*="qr"] {
        display: none !important;
    }

    .qr-code-mobile {
        display: block;
    }
}