/* Cinema theme — detail page (movie / series single view) */

/* ===== Body shell baseline (also applies to detail when cinema active) ===== */
body { background: var(--cinema-bg); color: var(--cinema-text); }
#content { background: var(--cinema-bg); }

/* When cinema is active, hide the legacy sidebars on detail too — use full width */
body.detail-cinema #content { display: block !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
body.detail-cinema .content-left,
body.detail-cinema .content-right,
body.detail-cinema #sidebar-left,
body.detail-cinema #sidebar-right { display: none !important; }
body.detail-cinema .notice { background: transparent; padding: 0; }

/* ===== Detail hero ===== */
.cn-detail-hero { position: relative; width: 100%; min-height: 520px; overflow: hidden; }
@media (max-width: 1024px) { .cn-detail-hero { min-height: 460px; } }
@media (max-width: 640px)  { .cn-detail-hero { min-height: 440px; } }

.cn-detail-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); }
.cn-detail-bg::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(to right, rgba(10,14,26,0.95) 0%, rgba(10,14,26,0.7) 40%, rgba(10,14,26,0.3) 75%, transparent 100%),
    linear-gradient(to top, rgba(10,14,26,1) 0%, rgba(10,14,26,0.5) 30%, transparent 60%); }

.cn-detail-hero-content { position: relative; z-index: 2; max-width: var(--content-max); margin: 0 auto; min-height: 520px; padding: 70px var(--section-px) 80px; display: flex; align-items: flex-end; }
@media (max-width: 1024px) { .cn-detail-hero-content { min-height: 460px; padding-top: 50px; padding-bottom: 60px; } }

.cn-detail-info { max-width: 720px; }
.cn-detail-breadcrumb { font-size: 12px; color: var(--cinema-text-muted); margin: 0 0 14px; letter-spacing: 0.04em; }
.cn-detail-breadcrumb a { color: var(--cinema-text-muted); transition: color 180ms ease; }
.cn-detail-breadcrumb a:hover { color: var(--cinema-text); }
.cn-detail-breadcrumb span { margin: 0 8px; opacity: 0.5; }
.cn-detail-breadcrumb span:last-child { color: var(--cinema-text); opacity: 1; margin-left: 0; }

.cn-detail-title { font-size: 52px; font-weight: 700; margin: 0 0 12px; line-height: 1.05; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.6); }
@media (max-width: 1024px) { .cn-detail-title { font-size: 40px; } }
@media (max-width: 640px)  { .cn-detail-title { font-size: 28px; } }

.cn-detail-meta { font-size: 12px; color: var(--cinema-text-muted); margin: 0 0 14px; letter-spacing: 0.04em; }
.cn-detail-meta span { display: inline-block; padding: 1px 8px; margin-right: 6px; margin-bottom: 6px; border: 1px solid var(--cinema-border); border-radius: 3px; }
.cn-detail-meta span.is-rating { background: rgba(255,255,255,0.12); border-color: transparent; font-weight: 600; color: #fff; }

.cn-detail-desc { font-size: 14px; color: var(--cinema-text); margin: 0 0 22px; max-width: 640px; line-height: 1.7; opacity: 0.92; }

/* ===== Detail body container ===== */
.cn-detail-body { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--section-px) 60px; }

.cn-detail-section { padding: 32px 0; border-bottom: 1px solid var(--cinema-border); }
.cn-detail-section:last-child { border-bottom: 0; }
.cn-detail-section .cn-section-head { padding: 0 0 14px; }

/* ===== Episode picker (seasons + adaptive grid) ===== */
.cn-eppicker { padding-top: 10px; }
.cn-season-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 14px; border-bottom: 1px solid var(--cinema-border); margin-bottom: 14px; }
.cn-season-tab { background: rgba(255,255,255,0.04); border: 1px solid var(--cinema-border); color: var(--cinema-text-muted); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 180ms ease; }
.cn-season-tab:hover { background: rgba(255,255,255,0.08); color: var(--cinema-text); }
.cn-season-tab.is-active { background: var(--cinema-accent); color: #fff; border-color: var(--cinema-accent); }
.cn-season-count { display: inline-block; margin-left: 6px; padding: 1px 7px; background: rgba(0,0,0,0.25); border-radius: 999px; font-size: 11px; font-weight: 600; }

.cn-season-pane { display: none; }
.cn-season-pane.is-active { display: block; }

.cn-eprow { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.cn-ranges { display: flex; gap: 6px; flex-wrap: wrap; }
.cn-range-pill { background: rgba(255,255,255,0.04); border: 1px solid var(--cinema-border); color: var(--cinema-text-muted); padding: 5px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; transition: all 160ms ease; }
.cn-range-pill:hover { background: rgba(255,255,255,0.1); color: var(--cinema-text); }
.cn-range-pill.is-active { background: rgba(255,46,99,0.18); color: var(--cinema-accent); border-color: var(--cinema-accent); }
.cn-ep-search { background: rgba(255,255,255,0.06); border: 1px solid var(--cinema-border); color: var(--cinema-text); border-radius: 999px; padding: 6px 14px; font-size: 12px; outline: none; min-width: 160px; margin-left: auto; }
.cn-ep-search::placeholder { color: var(--cinema-text-muted); }
.cn-ep-search:focus { border-color: rgba(255,46,99,0.5); background: rgba(255,255,255,0.1); }

.cn-ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; padding: 4px 0 12px; }
.cn-ep-cell { background: rgba(255,255,255,0.05); border: 1px solid var(--cinema-border); color: var(--cinema-text); padding: 10px 6px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 160ms ease; aspect-ratio: 1.2 / 1; display: flex; align-items: center; justify-content: center; }
.cn-ep-cell:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.cn-ep-cell.is-active { background: var(--cinema-accent); border-color: var(--cinema-accent); color: #fff; box-shadow: 0 4px 16px rgba(255,46,99,0.3); }

.cn-ep-sources { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--cinema-border); border-radius: 8px; margin-bottom: 12px; }
.cn-ep-sources .ep-source { background: rgba(255,255,255,0.08); border: 1px solid var(--cinema-border); color: var(--cinema-text); padding: 5px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 160ms ease; text-decoration: none; }
.cn-ep-sources .ep-source:hover { background: rgba(255,255,255,0.16); color: var(--cinema-text); }
.cn-ep-sources .ep-source.is-active { background: var(--cinema-accent); border-color: var(--cinema-accent); color: #fff; }

.cn-continue { display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, rgba(255,46,99,0.15), rgba(255,46,99,0.05)); border: 1px solid rgba(255,46,99,0.3); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
.cn-continue i { color: var(--cinema-accent); font-size: 18px; }
.cn-continue span { flex: 1; color: var(--cinema-text); font-size: 13px; }
.cn-continue strong { color: #fff; font-weight: 600; }
.cn-continue-clear { background: transparent; border: 0; color: var(--cinema-text-muted); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; transition: all 160ms ease; }
.cn-continue-clear:hover { background: rgba(255,255,255,0.08); color: var(--cinema-text); }

@media (max-width: 540px) {
    .cn-ep-search { width: 100%; margin-left: 0; }
    .cn-ep-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; }
    .cn-ep-cell { padding: 8px 4px; font-size: 12px; }
    .cn-continue { flex-wrap: wrap; }
}

/* ===== Player wrap ===== */
.cn-player-wrap { background: var(--cinema-bg-elevated); border-radius: 12px; padding: 16px; box-shadow: var(--cinema-shadow); }
@media (max-width: 540px) { .cn-player-wrap { padding: 8px; border-radius: 8px; } .cn-player-wrap .episode_path { padding: 10px 12px !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px; } }
.cn-player-wrap .player_container { background: transparent !important; border-radius: 8px; overflow: hidden; }
.cn-player-wrap iframe { background: #000; border-radius: 8px; width: 100%; }

/* Episode rows under the player — restyle to fit cinema look */
.cn-player-wrap .episode { padding: 0 !important; margin: 6px 0; text-align: left !important; }
.cn-player-wrap .episode_path {
    width: 100% !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--cinema-border) !important;
    color: var(--cinema-text) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.cn-player-wrap .episode_path:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.15) !important; transform: translateY(-1px); }
.cn-player-wrap .episode_path[style*="#127ba3"], .cn-player-wrap .episode_path.is-active { background: rgba(255,46,99,0.15) !important; border-color: var(--cinema-accent) !important; }

.cn-player-wrap .ep-source {
    background: rgba(255,255,255,0.08) !important;
    color: var(--cinema-text) !important;
    border: 1px solid var(--cinema-border);
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 12px;
    transition: all 180ms ease;
}
.cn-player-wrap .ep-source:hover { background: rgba(255,255,255,0.16) !important; }

/* Trailer wrap */
.cn-trailer-wrap { background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; }
.cn-trailer-wrap iframe { width: 100%; height: 100%; border: 0; }

/* Comments wrap */
.cn-comments-wrap { background: var(--cinema-bg-elevated); border-radius: 12px; padding: 16px; min-height: 100px; color-scheme: dark; }

/* ===== Tone down legacy bits when cinema is active on detail page ===== */
body.detail-cinema .box-header,
body.detail-cinema .box h3,
body.detail-cinema .nav,
body.detail-cinema .sidebar-header,
body.detail-cinema .movie-footer,
body.detail-cinema .nav li a {
    background: var(--cinema-bg-elevated) !important;
    color: var(--cinema-text) !important;
}
body.detail-cinema .box { background: transparent !important; border: 0 !important; }
body.detail-cinema .imdb-rating { display: none; }
body.detail-cinema .description { background: var(--cinema-bg-elevated) !important; color: var(--cinema-text) !important; }
body.detail-cinema .actions { background: transparent !important; }

/* Tag links restyle */
body.detail-cinema .content-tags { padding: 12px 16px; background: var(--cinema-bg-elevated); border-radius: 12px; margin: 0; color: var(--cinema-text-muted); font-size: 13px; }
body.detail-cinema .content-tags a {
    background: rgba(255,255,255,0.06);
    color: var(--cinema-text);
    border: 1px solid var(--cinema-border);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    margin: 4px 4px 4px 0;
    display: inline-block;
    transition: all 180ms ease;
}
body.detail-cinema .content-tags a:hover {
    background: var(--cinema-accent);
    border-color: var(--cinema-accent);
    color: #fff;
}

/* Source chip active (override legacy inline jQuery styles) */
.cn-player-wrap .ep-source.is-active,
.cn-eppicker .ep-source.is-active { background: var(--cinema-accent) !important; border-color: var(--cinema-accent) !important; color: #fff !important; }