/* ==========================================================================
   WORLD-TV Кинотеатр v6.1
   TVIP ABSOLUTE LAYOUT
   --------------------------------------------------------------------------
   - фиксированная ТВ-сцена 1280x720
   - новый фирменный красно-чёрный фон /assets/img/kino-bg.jpg
   - карточки постеров НЕ изменены
   - категории крупнее
   - фильтр и клавиатура сохранены
========================================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    color: #fff;
    font-family: Arial, "Segoe UI", sans-serif;
}

button,
input,
select {
    font-family: Arial, "Segoe UI", sans-serif;
}

button {
    border: 0;
    cursor: pointer;
}

/* ==========================================================================
   STAGE / CANVAS
========================================================================== */

.tvip-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.tvip-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    transform-origin: 0 0;

    background-color: #050207;
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.16) 0%,
            rgba(0, 0, 0, 0.24) 48%,
            rgba(0, 0, 0, 0.34) 100%
        ),
        url('/assets/img/kino-bg.jpg');

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* ==========================================================================
   BACKGROUND LAYER
   Старые декоративные градиенты отключены,
   фон теперь берётся из готовой картинки.
========================================================================== */

.kino-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    pointer-events: none;
}

.kino-bg::before,
.kino-bg::after,
.kino-glow,
.kino-line {
    display: none;
}

/* ==========================================================================
   HEADER
========================================================================== */

.kino-title {
    position: absolute;
    left: 28px;
    top: 20px;
    height: 44px;
    line-height: 44px;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -1px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.72);
}

.top-button {
    position: absolute;
    top: 20px;
    width: 144px;
    height: 46px;
    border-radius: 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    background: rgba(12,12,13,0.78);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
        0 14px 34px rgba(0,0,0,0.46),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

.top-button-search {
    left: 950px;
}

.top-button-filter {
    left: 1104px;
    background:
        linear-gradient(
            180deg,
            rgba(255,100,110,0.34),
            rgba(150,0,12,0.24)
        ),
        linear-gradient(135deg, #e71420, #930009);
    border-color: rgba(255,84,95,0.96);
    box-shadow:
        0 0 22px rgba(255,32,46,0.28),
        0 14px 34px rgba(0,0,0,0.46),
        inset 0 1px 0 rgba(255,255,255,0.12);
}

.top-button-icon {
    position: absolute;
    left: 20px;
    top: 13px;
    width: 20px;
    height: 20px;
}

.top-button-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.top-button-text {
    position: absolute;
    left: 50px;
    top: 0;
    height: 46px;
    line-height: 46px;
    white-space: nowrap;
}

/* ==========================================================================
   SIDEBAR — КАТЕГОРИИ С ВНУТРЕННЕЙ ПРОКРУТКОЙ
========================================================================== */

.sidebar-title {
    position: absolute;
    left: 28px;
    top: 92px;
    width: 204px;
    height: 38px;
    line-height: 38px;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.20);
    text-shadow: 0 2px 12px rgba(0,0,0,0.70);
    z-index: 6;
}

.category-list {
    position: absolute;
    left: 28px;
    top: 146px;
    width: 218px;
    height: 500px;
    overflow: hidden;
    z-index: 6;
    padding-right: 8px;
}

/*
|--------------------------------------------------------------------------
| Внутренний слой. Его двигает JS через translateY.
|--------------------------------------------------------------------------
*/
.category-list-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 204px;
    min-height: 500px;
    transition: transform 0.18s ease;
    will-change: transform;
}

.category-button {
    position: absolute;
    left: 0;
    width: 204px;
    min-height: 52px;
    height: 52px;
    padding: 6px 15px;
    border-radius: 16px;
    text-align: left;
    color: rgba(255,255,255,0.96);
    font-size: 18px;
    line-height: 20px;
    font-weight: 700;
    background: rgba(0,0,0,0.10);
    border: 1px solid transparent;
    text-shadow: 0 2px 10px rgba(0,0,0,0.76);
    white-space: normal;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.category-button span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| Для очень длинных категорий чуть меньше шрифт.
|--------------------------------------------------------------------------
*/
.category-button.is-long {
    font-size: 16px;
    line-height: 18px;
}

/*
|--------------------------------------------------------------------------
| Активная категория
|--------------------------------------------------------------------------
*/
.category-button.is-active {
    color: #fff;
    background:
        linear-gradient(
            180deg,
            rgba(255,101,110,0.34),
            rgba(146,0,11,0.24)
        ),
        linear-gradient(135deg, #e71420, #930009);
    border-color: rgba(255,84,95,0.96);
    box-shadow:
        0 0 0 1px rgba(255,80,90,0.44),
        0 0 20px rgba(255,36,49,0.62);
}

/*
|--------------------------------------------------------------------------
| Верхнее/нижнее затемнение списка
|--------------------------------------------------------------------------
*/
.category-list::before,
.category-list::after {
    content: '';
    position: absolute;
    left: 0;
    width: 218px;
    height: 34px;
    z-index: 8;
    pointer-events: none;
}

.category-list::before {
    top: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.76),
            rgba(0,0,0,0)
        );
}

.category-list::after {
    bottom: 0;
    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,0.82),
            rgba(0,0,0,0)
        );
}

/*
|--------------------------------------------------------------------------
| Маленький индикатор, что список можно листать
|--------------------------------------------------------------------------
*/
.category-list-scroll-hint {
    position: absolute;
    right: 0;
    top: 36px;
    width: 3px;
    height: 430px;
    border-radius: 99px;
    background: rgba(255,255,255,0.08);
    z-index: 9;
    overflow: hidden;
}

.category-list-scroll-hint::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--category-scroll-percent, 0%);
    width: 3px;
    height: 70px;
    border-radius: 99px;
    background: rgba(255,44,70,0.82);
    box-shadow: 0 0 12px rgba(255,44,70,0.64);
}

/* ==========================================================================
   SECTION TITLES
========================================================================== */

.section-title {
    position: absolute;
    left: 242px;
    width: 960px;
    height: 34px;
    line-height: 34px;
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.6px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.78);
}

.section-title-new {
    top: 92px;
}

.section-title-catalog {
    top: 390px;
}

/* ==========================================================================
   MOVIE ROWS — НЕ МЕНЯЛ
========================================================================== */

.movie-row {
    position: absolute;
    left: 242px;
    width: 980px;
    height: 252px;
}

.movie-row-new {
    top: 132px;
}

.movie-row-catalog {
    top: 430px;
}

.movie-card {
    position: absolute;
    top: 0;
    width: 160px;
    height: 252px;
    cursor: pointer;
}

.movie-poster {
    position: absolute;
    left: 0;
    top: 0;
    width: 160px;
    height: 224px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow:
        0 18px 38px rgba(0,0,0,0.58);
}

.movie-poster img {
    display: block;
    width: 160px;
    height: 224px;
    object-fit: cover;
}

.movie-info {
    position: absolute;
    left: 0;
    top: 230px;
    width: 160px;
    height: 22px;
}

.movie-title {
    width: 160px;
    height: 15px;
    line-height: 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 10px rgba(0,0,0,0.86);
}

.movie-year {
    width: 160px;
    height: 13px;
    line-height: 13px;
    margin-top: 3px;
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.86);
}

/* ==========================================================================
   TV FOCUS
========================================================================== */

.tv-focused,
.top-button.tv-focused,
.category-button.tv-focused,
.movie-card.tv-focused,
.panel-button.tv-focused,
.modal-action.tv-focused,
.modal-close.tv-focused,
.keyboard-key.tv-focused,
.filter-focused {
    outline: none;
}

.top-button.tv-focused {
    box-shadow:
        0 0 0 2px rgba(255,94,104,0.88),
        0 0 26px rgba(255,36,49,0.76);
}

.category-button.tv-focused {
    border-color: rgba(255,84,95,0.96);
}

.movie-card.tv-focused .movie-poster {
    border-color: rgba(255,84,95,1);
    box-shadow:
        0 0 0 2px rgba(255,84,95,0.78),
        0 0 28px rgba(255,36,49,0.76),
        0 24px 56px rgba(0,0,0,0.74);
}

.panel-button.tv-focused,
.modal-action.tv-focused,
.modal-close.tv-focused {
    box-shadow:
        0 0 0 2px rgba(255,94,104,0.86),
        0 0 24px rgba(255,36,49,0.72);
}

/* ==========================================================================
   EMPTY
========================================================================== */

.empty-state {
    display: none;
    position: absolute;
    left: 242px;
    top: 160px;
    width: 700px;
    height: 120px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(12,12,13,0.92);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 24px 70px rgba(0,0,0,0.62);
}

.empty-state.is-visible {
    display: block;
}

.empty-title {
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
}

.empty-text {
    margin-top: 8px;
    color: rgba(255,255,255,0.76);
    font-size: 16px;
}

/* ==========================================================================
   ТВ-КЛАВИАТУРА
========================================================================== */

.keyboard-panel {
    display: none;
    position: absolute;
    left: 250px;
    top: 88px;
    width: 790px;
    height: 548px;
    border-radius: 30px;
    background: rgba(13, 10, 14, 0.985);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 0 42px rgba(180, 0, 24, 0.26),
        0 34px 110px rgba(0,0,0,0.86);
    z-index: 35;
}

.keyboard-panel.is-open {
    display: block;
}

.keyboard-title {
    position: absolute;
    left: 28px;
    top: 22px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
}

.keyboard-query-box {
    position: absolute;
    left: 28px;
    top: 70px;
    width: 734px;
    height: 54px;
    border-radius: 18px;
    background: rgba(0,0,0,0.46);
    border: 1px solid rgba(255,255,255,0.18);
    overflow: hidden;
}

.keyboard-query-placeholder,
.keyboard-query-text {
    position: absolute;
    left: 18px;
    top: 0;
    width: 690px;
    height: 54px;
    line-height: 54px;
    font-size: 21px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keyboard-query-placeholder {
    color: rgba(255,255,255,0.42);
}

.keyboard-query-text {
    color: #fff;
}

.keyboard-grid {
    position: absolute;
    left: 28px;
    top: 150px;
    width: 734px;
    height: 360px;
}

.keyboard-key {
    position: absolute;
    height: 48px;
    border-radius: 16px;
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
}

.keyboard-key.keyboard-key-action {
    font-size: 18px;
    background: rgba(255,255,255,0.08);
}

.keyboard-key.keyboard-key-done {
    background:
        linear-gradient(
            180deg,
            rgba(255,100,110,0.28),
            rgba(150,0,12,0.20)
        ),
        linear-gradient(135deg, #e71420, #930009);
    border-color: rgba(255,84,95,0.92);
}

.keyboard-key.tv-focused {
    border-color: rgba(255,84,95,0.98);
    box-shadow:
        0 0 0 2px rgba(255,84,95,0.72),
        0 0 24px rgba(255,36,49,0.72);
}

/* ==========================================================================
   FILTER PANEL
========================================================================== */

.filter-panel {
    display: none;
    position: absolute;
    left: 872px;
    top: 82px;
    width: 360px;
    height: 318px;
    padding: 16px;
    border-radius: 26px;
    background: rgba(15,15,16,0.98);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 28px 86px rgba(0,0,0,0.74),
        0 0 30px rgba(180,0,24,0.14);
    z-index: 30;
}

.filter-panel.is-open {
    display: block;
}

.filter-panel-title {
    position: absolute;
    left: 18px;
    top: 14px;
    height: 26px;
    line-height: 26px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.filter-row {
    position: absolute;
    left: 18px;
    width: 324px;
    height: 42px;
    border-radius: 16px;
    background: rgba(0,0,0,0.28);
    border: 1px solid transparent;
}

.filter-row.filter-focused {
    border-color: rgba(255,84,95,0.96);
    box-shadow:
        0 0 0 1px rgba(255,80,90,0.42),
        0 0 18px rgba(255,36,49,0.58);
}

.filter-row-genre {
    top: 52px;
}

.filter-row-year {
    top: 100px;
}

.filter-row-country {
    top: 148px;
}

.filter-row-sort {
    top: 196px;
}

.filter-label {
    position: absolute;
    left: 12px;
    top: 0;
    height: 42px;
    line-height: 42px;
    color: rgba(255,255,255,0.84);
    font-size: 14px;
}

.filter-select {
    position: absolute;
    left: 164px;
    top: 5px;
    width: 148px;
    height: 32px;
    border-radius: 16px;
    padding: 0 10px;
    color: #fff;
    font-size: 14px;
    background: rgba(0,0,0,0.52);
    border: 1px solid rgba(255,255,255,0.18);
    outline: none;
}

.panel-button {
    position: absolute;
    height: 50px;
    border-radius: 24px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background: rgba(0,0,0,0.46);
    border: 1px solid rgba(255,255,255,0.18);
}

.panel-button-apply {
    left: 18px;
    top: 252px;
    width: 152px;
    background:
        linear-gradient(
            180deg,
            rgba(255,100,110,0.28),
            rgba(150,0,12,0.20)
        ),
        linear-gradient(135deg, #e71420, #930009);
    border-color: rgba(255,84,95,0.92);
}

.panel-button-reset {
    left: 188px;
    top: 252px;
    width: 152px;
}

/* ==========================================================================
   MODAL OVERLAY
========================================================================== */

.modal-overlay {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
    background: rgba(0,0,0,0.76);
    z-index: 40;
}

.modal-overlay.is-visible {
    display: block;
}

/* ==========================================================================
   MOVIE MODAL
========================================================================== */

.movie-modal {
    display: none;
    position: absolute;
    left: 110px;
    top: 78px;
    width: 1060px;
    height: 560px;
    border-radius: 34px;
    background: rgba(12,12,13,0.98);
    border: 1px solid rgba(255,94,104,0.36);
    box-shadow:
        0 0 42px rgba(255,20,34,0.18),
        0 36px 130px rgba(0,0,0,0.86);
    z-index: 50;
}

.movie-modal.is-open {
    display: block;
}

.modal-close {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 46px;
    height: 46px;
    border-radius: 23px;
    color: #fff;
    font-size: 30px;
    line-height: 42px;
    background: rgba(0,0,0,0.48);
    border: 1px solid rgba(255,255,255,0.18);
}

.modal-poster-box {
    position: absolute;
    left: 28px;
    top: 28px;
    width: 300px;
    height: 500px;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255,255,255,0.04);
}

.modal-poster {
    display: block;
    width: 300px;
    height: 500px;
    object-fit: cover;
}

.modal-content {
    position: absolute;
    left: 360px;
    top: 34px;
    width: 650px;
    height: 488px;
}

.modal-title {
    width: 600px;
    min-height: 58px;
    color: #fff;
    font-size: 46px;
    line-height: 52px;
    font-weight: 600;
    letter-spacing: -1px;
}

.modal-meta {
    margin-top: 10px;
    width: 620px;
    color: rgba(255,255,255,0.82);
    font-size: 16px;
    line-height: 24px;
}

.modal-meta-highlight {
    color: #ff4653;
}

.modal-line {
    margin-top: 16px;
    width: 620px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255,42,56,0.92),
        rgba(255,255,255,0.12),
        transparent
    );
}

.modal-description {
    margin-top: 18px;
    width: 620px;
    height: 180px;
    overflow: hidden;
    color: rgba(255,255,255,0.88);
    font-size: 17px;
    line-height: 25px;
}

.modal-action {
    position: absolute;
    top: 414px;
    height: 64px;
    border-radius: 32px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.modal-action-watch {
    left: 0;
    width: 240px;
    background:
        linear-gradient(
            180deg,
            rgba(255,100,110,0.28),
            rgba(150,0,12,0.20)
        ),
        linear-gradient(135deg, #e71420, #930009);
    border: 1px solid rgba(255,84,95,0.92);
}

.modal-action-favorite {
    left: 258px;
    width: 250px;
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.18);
}

.modal-action-icon {
    position: relative;
    top: 5px;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.modal-action-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ==========================================================================
   CATEGORY FOCUS FIX
   Активная категория и фокус больше не выглядят как две разные подсветки.
========================================================================== */

.category-button.tv-focused:not(.is-active) {
    color: rgba(255,255,255,0.98);
    background: rgba(0,0,0,0.34);
    border-color: rgba(255,84,95,0.44);
    box-shadow:
        inset 0 0 0 1px rgba(255,84,95,0.18),
        0 0 12px rgba(255,36,49,0.20);
}

.category-button.is-active,
.category-button.is-active.tv-focused {
    color: #fff;
    background:
        linear-gradient(
            180deg,
            rgba(255,101,110,0.36),
            rgba(146,0,11,0.26)
        ),
        linear-gradient(135deg, #e71420, #930009);
    border-color: rgba(255,84,95,0.96);
    box-shadow:
        0 0 0 1px rgba(255,80,90,0.44),
        0 0 18px rgba(255,36,49,0.52),
        inset 0 1px 0 rgba(255,255,255,0.14);
}

.category-button.is-active.tv-focused {
    transform: scale(1.01);
}