/* ================================================================
   css-film-series-v9.css
   single film/series page (film.php, serie.php), tabs, download panel,
   cast, tags, and the player page (play.php) with a custom video.js
   skin. film-* classes are shared between film and series (explained
   inline). Depends on css-body.css (inherits .imdb-card/.btn-dl etc),
   so must load after it.
   ================================================================ */
/* ================================================================
   single film page (pages/film/film.php). Round icon action buttons +
   recommendations/cast/trailer/about tabs.
   ================================================================ */

body.page-film-detail {
    background: var(--bg-base) !important;
    min-height: 100vh;
    min-height: 100dvh; /* mobile: adjusts correctly as the browser address bar shows/hides (fixes the gray bar under the header) */
    font-family: var(--font-sans);
    color: #fff;
    padding-top: 0 !important;
    overflow-x: hidden;
}

/* on the film/series page, the header background must be fully opaque -
   not the site-wide --header-bg, which now already is opaque, but here
   with a bright/blurred backdrop image directly behind it, any leftover
   translucency would let the image bleed through the header. A fully
   opaque, fixed dark color (matching the header's default family)
   replaces the variable here. The header stays position:fixed (inherited
   from css-header.css/css-body.css) so it's still visible while
   scrolling through the tabs below the hero - only its background/
   border are overridden, not its position. */
body.page-film-detail .site-header,
body.page-film-detail .mobile-top-nav {
    background: rgb(20, 20, 22) !important;
    border-bottom: 1px solid var(--on-surface-06) !important;
}

.film-detail-wrapper {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

/* .film-hero-section: the actual hero container (backdrop+gradient+
   content). The backdrop/gradient used to be sized on .film-detail-wrapper
   (which wrapped both the hero and all tabs) with a fixed 100vh height;
   since hero content (long title/genre/summary) can exceed one screen,
   the backdrop got cut off right where that height ended, leaving the
   rest of the hero without an image - it looked clipped/too short. Now
   the backdrop/gradient are inset:0 on this new container instead, whose
   height grows automatically with the hero content (min-height:100vh or
   more) - it always covers the entire hero regardless of content length. */
.film-hero-section {
    position: relative;
    width: 100vw;
    margin-right: calc(-50vw + 50%);
    margin-left: calc(-50vw + 50%);
    /* blur(35px) on .film-backdrop-layer::before is not clipped by that
       element's own box - a blurred layer visually extends past its box
       edges by roughly the blur radius. Without overflow:hidden here, that
       spill bleeds ~35px+ upward onto the header sitting directly above
       this section in the DOM, showing up as an unwanted dark shadow/haze
       across the header on film/series pages. */
    overflow: hidden;
}

/* absolute (not fixed) - fixed made this layer stay on screen even
   after scrolling past the footer (outside .film-detail-wrapper),
   casting a blur/shadow over it. absolute means this layer scrolls out
   of view before reaching the footer.

   fixed, mild blur (not scroll-driven): the blur is present from the
   moment the page loads (not zero, growing with scroll) and kept low so
   the image stays recognizable, just soft enough for text on top to
   read clearly. */
/* fixes image cropping (same pattern as the slider): .film-backdrop-layer
   no longer has background-size:cover directly - two child layers are
   built inside it instead (::before ambient blur, ::after full
   uncropped image). The image is still set the same way (inline style on
   .film-backdrop-layer itself); the pseudo-elements pick it up via
   background-image: inherit. */
.film-backdrop-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scale(1.03);
}
.film-backdrop-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center 25%;
    filter: blur(35px) brightness(0.6);
    transform: scale(1.15);
    z-index: 0;
}
.film-backdrop-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: contain;
    background-position: center 25%;
    background-repeat: no-repeat;
    z-index: 1;
}

.film-overlay-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        to top,
        rgba(10, 10, 10, 0.97) 0%,
        rgba(10, 10, 10, 0.8) 40%,
        rgba(10, 10, 10, 0.45) 65%,
        rgba(10, 10, 10, 0.25) 100%
    );
    pointer-events: none;
}

.film-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 100px 50px 50px;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-poster {
    flex-shrink: 0;
    width: 280px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7);
    border: 2px solid var(--on-surface-06);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    margin-right: 50px;
}

.hero-poster:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
}

.hero-poster img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-info {
    flex: 1;
    padding: 20px 0;
}

.hero-title {
    font-size: 3.2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 2px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    letter-spacing: -0.5px;
}

.hero-title-en {
    font-size: 1.2rem;
    color: var(--on-surface-45);
    margin-bottom: 14px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    font-weight: 300;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-bottom: 16px;
}

.hero-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-rating .rating-ring {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.hero-rating .rating-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hero-rating .rating-ring .ring-bg {
    fill: none;
    stroke: var(--on-surface-08);
    stroke-width: 3.5;
}

.hero-rating .rating-ring .ring-progress {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
}

.hero-rating .rating-ring .ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero-rating .rating-votes {
    font-size: 0.8rem;
    color: var(--on-surface-40);
}

.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--on-surface-70);
    font-size: 0.95rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.hero-meta-item a {
    color: var(--on-surface-70);
    text-decoration: none;
    transition: color 0.2s;
}

.hero-meta-item a:hover {
    color: var(--accent-text);
}

.hero-meta-item .rated-badge {
    background: var(--on-surface-08);
    padding: 3px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--on-surface-80);
    border: 1px solid var(--on-surface-05);
}

.hero-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.hero-genre {
    padding: 5px 20px;
    border-radius: 25px;
    background: var(--on-surface-07);
    border: 1px solid var(--on-surface-05);
    color: var(--on-surface-85);
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.25s;
    backdrop-filter: blur(8px);
}

.hero-genre:hover {
    background: rgba(250, 0, 63, 0.12);
    border-color: rgba(250, 0, 63, 0.2);
    color: var(--accent-text);
    transform: translateY(-2px);
}

.hero-subtags {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.hero-subtag {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--on-surface-50);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s;
}

.hero-subtag:hover {
    color: var(--accent-text);
}

.hero-subtag i {
    font-size: 0.8rem;
}

/* summary on the hero - below country/language, before the action buttons */
.hero-summary {
    color: var(--on-surface-75);
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 650px;
    margin: 0 0 24px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 767px) {
    .hero-summary {
        font-size: 0.85rem;
        line-height: 1.7;
        -webkit-line-clamp: 5;
        margin: 0 auto 20px;
    }
}

/* ===== action buttons: one primary button (play) + a few round icons ===== */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 35px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: inherit;
}

.btn-hero-primary {
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: 0 4px 25px rgba(250, 0, 63, 0.25);
}

.btn-hero-primary:hover {
    background: var(--accent-hover);
    transform: scale(1.04) translateY(-2px);
    box-shadow: 0 8px 40px rgba(250, 0, 63, 0.35);
}

.btn-hero-outline {
    background: var(--on-surface-06);
    color: var(--on-surface-85);
    border: 1px solid var(--on-surface-08);
    backdrop-filter: blur(8px);
}

.btn-hero-outline:hover {
    background: var(--on-surface-12);
    color: #fff;
    transform: translateY(-2px);
    border-color: var(--on-surface-15);
}

.btn-hero-outline i {
    color: var(--on-surface-50);
    transition: color 0.2s;
}

.btn-hero-outline:hover i {
    color: var(--accent-text);
}

/* round icon button - clean circle, no text, centered icon */
.btn-hero-icon {
    padding: 0;
    width: 50px;
    height: 50px;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
}

.btn-heart {
    background: var(--on-surface-06);
    color: var(--on-surface-70);
    border: 1px solid var(--on-surface-06);
    backdrop-filter: blur(8px);
}

.btn-heart:hover {
    border-color: rgba(250, 0, 63, 0.3);
    color: var(--danger);
    background: rgba(250, 0, 63, 0.08);
}

.btn-heart.active {
    color: var(--danger);
    border-color: rgba(250, 0, 63, 0.3);
    background: rgba(250, 0, 63, 0.1);
}

.btn-heart.active i {
    color: var(--danger);
}

.btn-imdb i {
    font-size: 1.6rem;
    color: #f5f5f1; /* rating star: neutral light, keeps single red palette */
    transition: transform 0.3s;
}

.btn-imdb:hover i {
    transform: scale(1.1);
}

/* ===== lower sections (fully black background so the footer reads well) =====
   the dark background must span the full viewport width (100vw), not
   just the constrained inner container width - otherwise it looks like a
   narrow strip in the middle of the page, clearly cut off. The tabs'
   actual content (text/buttons) still stays within its normal width,
   only the dark background goes full-bleed. */
.film-main-content {
    position: relative;
    z-index: 50;
    padding: 20px 24px;
    margin-top: -50px;
    /* this section's width/spacing (downloads/plans/description) must
       exactly match .film-hero-content (max-width:1400px + centered) - it
       previously had no max-width, so this section sat a different
       distance from the edge than the hero above it (a misalignment/
       "indented" feel). */
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
}
.film-main-content::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    left: 50%;
    margin-right: -50vw;
    margin-left: -50vw;
    width: 100vw;
    background: var(--bg-base);
    z-index: -1;
}

@media (min-width: 992px) {
    .film-main-content {
        padding: 40px 50px;
    }
}

.poster-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(24px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.poster-lightbox.show {
    display: flex;
}

.poster-lightbox img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 16px;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--on-surface-05);
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
}

.lightbox-close:hover {
    background: var(--on-surface-10);
    transform: rotate(90deg);
}

.copy-notification {
    position: fixed;
    bottom: 40px;
    right: 50%;
    transform: translateX(50%);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    color: #fff;
    padding: 14px 32px;
    border-radius: 14px;
    font-size: 0.9rem;
    z-index: 99999;
    border: 1px solid var(--on-surface-05);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: notifSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.copy-notification i {
    color: var(--btn-green);
    font-size: 1.2rem;
}

.copy-notification.error i {
    color: var(--btn-red);
}

@keyframes notifSlide {
    from {
        opacity: 0;
        transform: translateX(50%) translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(50%) translateY(0) scale(1);
    }
}

.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--on-surface-25);
}

.empty-state i {
    font-size: 48px;
    display: block;
    margin-bottom: 14px;
}

.film-section {
    margin-bottom: 40px;
    border-bottom: 1px solid var(--on-surface-04);
    padding-bottom: 30px;
}

.film-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.film-section-title i {
    color: var(--accent-text);
}

.film-summary {
    color: var(--on-surface-70);
    line-height: 2;
    font-size: 1rem;
    max-width: 820px;
}

/* tags (genre/year/title) - now their own tab within the tab system
   (tab-tags), not a separate section below the tabs; .film-tags-section
   is no longer used, the classes below serve as that tab's body directly. */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-item {
    padding: 5px 18px;
    border-radius: 25px;
    background: var(--on-surface-03);
    border: 1px solid var(--on-surface-03);
    color: var(--on-surface-45);
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.2s;
}

.tag-item:hover {
    background: rgba(250, 0, 63, 0.06);
    border-color: rgba(250, 0, 63, 0.12);
    color: var(--accent-text);
}

.cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 18px;
}

.cast-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    background: var(--on-surface-02);
    border-radius: 14px;
    padding: 10px 10px 14px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.cast-card:hover {
    background: var(--on-surface-05);
    border-color: var(--on-surface-04);
    transform: translateY(-4px);
}

.cast-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 12px;
    background: var(--on-surface-04);
}

.cast-card .cast-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-top: 8px;
    text-align: center;
}

.cast-card .cast-role {
    font-size: 0.7rem;
    color: var(--on-surface-35);
}

.cast-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.cast-load-more-wrap .btn-dl {
    min-width: 160px;
    justify-content: center;
}
.cast-load-more-wrap .btn-dl:disabled {
    opacity: 0.6;
    cursor: default;
}

.download-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.download-item {
    background: var(--on-surface-02);
    border: 1px solid var(--on-surface-04);
    border-radius: 12px;
    padding: 16px 18px;
    transition: background 0.2s;
}

.download-item:hover {
    background: var(--on-surface-04);
}

.dl-top {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    margin-bottom: 8px;
}

.dl-quality {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
}

.dl-size {
    font-size: 0.75rem;
    color: var(--on-surface-35);
}

.dl-badge {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 12px;
    background: var(--on-surface-04);
    color: var(--on-surface-40);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dl-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-dl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 24px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--on-surface-04);
    color: var(--on-surface-65);
    font-family: inherit;
}

.btn-dl:hover {
    background: var(--on-surface-10);
    color: #fff;
}

.btn-dl-gold {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
    font-size: 1.05em;
}

.btn-dl-gold:hover {
    background: var(--accent-hover);
    color: var(--accent-contrast);
    font-weight: 700;
}

.btn-dl-play {
    background: rgba(250, 0, 63, 0.14);
    color: var(--btn-blue);
}

.btn-dl-play:hover {
    background: rgba(250, 0, 63, 0.22);
    color: var(--btn-blue);
}

.btn-dl-outline {
    border: 1px solid var(--on-surface-06);
}

.download-gate {
    background: var(--on-surface-02);
    border: 2px dashed var(--on-surface-04);
    border-radius: 18px;
    padding: 50px 20px;
    text-align: center;
}

.download-gate i {
    font-size: 48px;
    color: #fff;
    margin-bottom: 14px;
    display: block;
}

.download-gate p {
    color: var(--on-surface-40);
    margin-bottom: 18px;
    font-size: 0.95rem;
}

.download-gate-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== plans (download tab, only shown to users without access) ===== */
.film-plans-section {
    margin-top: 32px;
}

.film-plans-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--on-surface-85);
    margin-bottom: 16px;
    text-align: center;
}

.film-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* "view all plans" link - below the shared plans widget in the film/
   series download tab (the plan cards themselves come from
   _plans-widget.php and are styled by panel.css, not this file) */
.film-plans-see-all-wrap {
    text-align: center;
    margin-top: 8px;
}

.film-plans-see-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--accent-text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}
.film-plans-see-all:hover {
    gap: 12px;
    color: var(--accent-text-hover);
}
.film-plans-see-all i {
    font-size: 0.75rem;
}

.film-plan-card {
    position: relative;
    background: var(--on-surface-03);
    border: 1px solid var(--on-surface-06);
    border-top: 3px solid var(--plan-color, var(--accent));
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.film-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--plan-color, var(--accent)) 45%, transparent);
}

.film-plan-card.popular {
    border-color: var(--plan-color, var(--accent));
    background: linear-gradient(-180deg, color-mix(in srgb, var(--plan-color, var(--accent)) 10%, transparent), var(--on-surface-03) 60%);
    transform: scale(1.03);
}

.film-plan-badge {
    position: absolute;
    top: -10px;
    right: 50%;
    transform: translateX(50%);
    background: var(--plan-color, var(--accent));
    color: var(--accent-contrast);
    font-weight: 700;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.film-plan-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-top: 6px;
}

.film-plan-duration {
    font-size: 0.8rem;
    color: var(--on-surface-45);
}

.film-plan-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--plan-color, var(--accent));
    margin: 8px 0 4px;
}

.film-plan-price span {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--on-surface-40);
}

.film-plan-buy {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    background: linear-gradient(-135deg, var(--plan-color, var(--accent)), var(--plan-color-2, var(--btn-blue)));
    color: var(--accent-contrast);
    font-weight: 700;
}

.film-plan-buy:hover {
    filter: brightness(1.1);
    color: var(--accent-contrast);
}

@media (max-width: 767px) {
    .film-plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .film-plan-card {
        padding: 18px 10px;
    }
    .film-plan-name {
        font-size: 0.9rem;
    }
    .film-plan-price {
        font-size: 1rem;
    }
}

.top250-tooltip {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.top250-tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 220px;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(250, 0, 63, 0.3);
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.75rem;
    line-height: 1.5;
    position: absolute;
    z-index: 10;
    bottom: 130%;
    right: 50%;
    transform: translateX(50%) translateY(10px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    white-space: nowrap;
}

.top250-tooltip .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    margin-right: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: rgba(250, 0, 63, 0.3) transparent transparent transparent;
}

.top250-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(50%) translateY(0);
}

/* ===== tabs below the hero: recommendations / cast / trailer / tags ===== */
.film-tabs-wrapper {
    margin-top: 8px;
    scroll-margin-top: 90px;
}

.film-tabs-nav {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--on-surface-06);
    margin-bottom: 28px;
    overflow-x: auto;
    scrollbar-width: none;
}

.film-tabs-nav::-webkit-scrollbar {
    display: none;
}

.film-tab-btn {
    background: none;
    border: none;
    color: var(--on-surface-50);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 14px 22px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
}

.film-tab-btn::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.film-tab-btn:hover {
    color: var(--on-surface-80);
}

.film-tab-btn.active {
    color: var(--accent-text);
}

.film-tab-btn.active::after {
    transform: scaleX(1);
}

.film-tab-panel {
    display: none;
    scroll-margin-top: 90px;
}

.film-tab-panel.active {
    display: block;
}

/* recommendations grid - reuses the imdb-featured-grid/imdb-card classes */
.film-recommend-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

@media (max-width: 767px) {
    .film-recommend-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .film-recommend-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1025px) and (max-width: 1400px) {
    .film-recommend-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ===== lazy trailer: thumbnail + play button only, iframe built after click ===== */
.trailer-lazy-box {
    position: relative;
    width: 100%;
    max-width: 920px;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-black);
    cursor: pointer;
}

.trailer-lazy-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.trailer-lazy-play {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(250, 0, 63, 0.95);
    color: var(--accent-contrast);
    border: none;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trailer-lazy-play:hover {
    transform: translate(50%, -50%) scale(1.08);
}

.trailer-lazy-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.trailer-lazy-note {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--on-surface-35);
}

@media (max-width: 992px) {
    .film-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* used to be 120px - since the mobile header is position:static (not
           fixed/sticky) and sits in normal document flow, there's no need
           for a large gap to "clear the header"; that gap just created an
           ugly empty space between the header and the poster. */
        padding: 24px 24px 60px;
        gap: 24px;
    }
    .hero-poster {
        width: 220px;
        margin-right: 0;
    }
    .hero-title {
        font-size: 2.4rem;
    }
    .hero-meta, .hero-genres, .hero-subtags, .hero-actions {
        justify-content: center;
    }
    .download-list {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .cast-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .film-tabs-nav {
        gap: 4px;
    }
    .film-tab-btn {
        padding: 12px 16px;
        font-size: 0.85rem;
    }
}

/* ================================================================
   player page (pages/film/play.php) - deliberately minimal info (just
   title/year/quality), a custom skin on video.js instead of its default
   look.
   ================================================================ */
:root {
    --player-bg: var(--bg-base);
    --player-text: var(--text-primary);
    --player-text-muted: var(--text-secondary);
    --player-gold: var(--accent);
}

body.page-player {
    background: var(--player-bg);
}

.player-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 90px 16px 40px;
}

.player-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--player-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 8px 0;
    margin-bottom: 12px;
    transition: color 0.2s;
}
.player-back-btn:hover {
    color: var(--player-gold);
}

.player-container {
    position: relative;
    background: var(--bg-black);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--on-surface-04);
}

.loading-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none;
}
.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--on-surface-10);
    border-top-color: var(--player-gold);
    border-radius: 50%;
    animation: player-spin 0.8s linear infinite;
}
@keyframes player-spin {
    to { transform: rotate(360deg); }
}

#player {
    width: 100%;
    height: auto;
    max-height: 82vh;
}

/* ---- minimal info below the player ---- */
.player-info {
    margin-top: 16px;
    padding: 16px 20px;
    background: var(--on-surface-03);
    border: 1px solid var(--on-surface-06);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.player-info-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.player-info-name {
    display: inline;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--player-text);
}
.player-info-year {
    color: var(--player-text-muted);
    font-size: 0.9rem;
    font-weight: 400;
}
.player-info-title .quality-tag {
    background: var(--player-gold);
    color: var(--accent-contrast);
    font-weight: 700;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 5px;
}

.player-quality-switch {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.quality-switch-btn {
    padding: 6px 16px;
    border-radius: 20px;
    background: var(--on-surface-05);
    border: 1px solid var(--on-surface-08);
    color: var(--player-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
}
.quality-switch-btn:hover {
    background: var(--on-surface-10);
    color: #fff;
}
.quality-switch-btn.active {
    background: var(--player-gold);
    border-color: var(--player-gold);
    color: var(--accent-contrast);
    font-weight: 700;
}

@media (max-width: 767px) {
    .player-wrapper {
        padding: 74px 8px 24px;
    }
    .player-info {
        padding: 12px 14px;
    }
    .player-info-name {
        font-size: 0.95rem;
    }
}

/* ================================================================
   custom video.js skin - replaces the default gray/blue look with the
   site's gold/dark palette. The vjs-default-skin class is deliberately
   removed from the <video> tag in play.php so these styles apply instead
   of the default skin.
   ================================================================ */
.video-js {
    font-family: var(--font-sans);
    background-color: var(--bg-black);
}

/* big centered play button */
.video-js .vjs-big-play-button {
    width: 74px;
    height: 74px;
    line-height: 70px;
    border-radius: 50%;
    background: rgba(250, 0, 63, 0.92);
    border: none;
    font-size: 30px;
    color: var(--accent-contrast);
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    margin: 0;
    transition: all 0.2s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:hover,
.video-js .vjs-big-play-button:focus {
    background: var(--accent);
    transform: translate(50%, -50%) scale(1.06);
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    line-height: 70px;
}

/* bottom control bar */
.video-js .vjs-control-bar {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    height: 3.8em;
    align-items: center;
}

/* progress bar */
.video-js .vjs-progress-control .vjs-play-progress {
    background: var(--player-gold);
}
.video-js .vjs-progress-control .vjs-play-progress:before {
    color: var(--player-gold);
    font-size: 1.3em;
    top: -0.28em;
}
.video-js .vjs-slider {
    background: var(--on-surface-20);
}
.video-js .vjs-load-progress div {
    background: var(--on-surface-25);
}

/* control buttons (play/pause/volume/fullscreen etc) */
.video-js .vjs-control:hover,
.video-js .vjs-button:hover {
    color: var(--player-gold);
}
.video-js .vjs-volume-level,
.video-js .vjs-volume-bar .vjs-volume-level {
    background: var(--player-gold);
}

/* playback rate and subtitles menu */
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background: rgba(20, 20, 20, 0.95);
    border-radius: 8px;
    border: 1px solid var(--on-surface-08);
}
.video-js .vjs-menu-item:hover,
.video-js .vjs-menu-item.vjs-selected {
    background: rgba(250, 0, 63, 0.15);
    color: var(--player-gold);
}

/* 10-second skip forward/backward buttons */
.video-js .vjs-skip-forward-10,
.video-js .vjs-skip-backward-10 {
    font-size: 1.4em;
}

/* timing display */
.video-js .vjs-time-control {
    color: var(--on-surface-75);
    font-size: 0.85em;
}

/* video.js's built-in buffering spinner */
.video-js .vjs-loading-spinner {
    border-color: var(--player-gold);
}
.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {
    display: block;
}

/* ================================================================
   replacing video.js's icons with Material Icons
   ================================================================
   video.js's own icon font (the .woff/.ttf files that normally sit next
   to video-js.min.css) was never uploaded to the server - only its CSS
   and JS. Without those font files, every icon video.js builds (play/
   pause/volume/fullscreen/...) shows as an empty box.

   Instead of approximating with Font Awesome (which lacks exact icons
   for some player controls, e.g. no real skip-10, redo was used as a
   stand-in), Google's Material Icons is used here since it has an exact,
   dedicated glyph for every player button (replay_10, forward_10,
   volume_up, etc, not an approximation). Unlike Font Awesome, Material
   Icons doesn't work via unicode codes; each icon has a "ligature" (plain
   English text) that its font renders as a glyph - so content here is a
   text string like "play_arrow", not a \fXXX code.
   ================================================================ */
.video-js .vjs-icon-placeholder:before,
.video-js .vjs-play-control .vjs-icon-placeholder:before,
.video-js .vjs-mute-control .vjs-icon-placeholder:before,
.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,
.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before,
.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before,
.video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before,
.video-js .vjs-menu-button .vjs-icon-placeholder:before {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 1.4em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* play */
.video-js .vjs-play-control.vjs-paused .vjs-icon-placeholder:before,
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "play_arrow";
}
/* pause */
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
    content: "pause";
}
/* volume - different levels */
.video-js .vjs-mute-control .vjs-icon-placeholder:before {
    content: "volume_up";
}
.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
    content: "volume_off";
}
.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before,
.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
    content: "volume_down";
}
/* fullscreen */
.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: "fullscreen";
}
.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: "fullscreen_exit";
}
/* picture-in-picture */
.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
    content: "picture_in_picture_alt";
}
/* subtitles/quality */
.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before {
    content: "closed_caption";
}
/* 10-second skip forward/backward - a real, exact icon (not an approximation like redo/undo) */
.video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before {
    content: "forward_10";
}
.video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before {
    content: "replay_10";
}
/* menu button (playback rate/quality) */
.video-js .vjs-menu-button .vjs-icon-placeholder:before {
    content: "settings";
}

/* fullscreen mode */
.video-js.vjs-fullscreen {
    border-radius: 0;
}

/* ================================================================
   single series page (pages/series/serie.php) - extra elements specific
   to series that films don't have: season selector, downloads grouped by
   episode, "next episode" button on the player page.
   ================================================================ */

/* ---- season selector (download tab) ---- */
.season-select-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--on-surface-06);
}
.season-select-btn {
    padding: 8px 20px;
    border-radius: 20px;
    background: var(--on-surface-04);
    border: 1px solid var(--on-surface-06);
    color: var(--on-surface-60);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}
.season-select-btn:hover {
    background: var(--on-surface-08);
    color: #fff;
}
.season-select-btn.active {
    background: var(--accent);
    border-color: var(--accent-text);
    color: var(--accent-contrast);
    font-weight: 700;
}

/* ---- downloads grouped by episode ---- */
.episode-download-group {
    margin-bottom: 28px;
}
.episode-download-group:last-child {
    margin-bottom: 0;
}
.episode-download-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--on-surface-80);
    margin-bottom: 12px;
    padding-left: 4px;
    border-left: 3px solid var(--accent);
    padding-left: 10px;
}

@media (max-width: 767px) {
    .season-select-bar {
        gap: 6px;
    }
    .season-select-btn {
        padding: 6px 14px;
        font-size: 0.8rem;
    }
}

/* ---- "next episode" button on the player page ---- */
.player-next-episode {
    position: absolute;
    bottom: 70px;
    right: 20px;
    z-index: 10;
    animation: player-next-fade-in 0.3s ease;
}
.player-next-episode .btn-dl {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
@keyframes player-next-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 767px) {
    .player-next-episode {
        bottom: 60px;
        right: 10px;
    }
}

/* ---- film/series SEO sections (heading hierarchy) ---- */
.film-panel-title{margin:0 0 16px;font-size:20px;font-weight:700;color:var(--text-primary);padding-inline-start:12px;border-inline-start:4px solid var(--accent);line-height:1.5}
.hero-title-year{font-weight:400;color:var(--text-secondary);font-size:.7em}
.film-about{margin-top:32px;padding:24px 28px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:12px}
.film-about-text{color:var(--text-secondary);line-height:2;margin:0 0 12px;font-size:14px}
.film-about-sub{margin:20px 0 10px;font-size:16px;font-weight:700;color:var(--text-primary)}
.film-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 24px;margin:0}
.film-facts div{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-subtle)}
.film-facts dt{color:var(--text-muted);font-size:13px}
.film-facts dd{margin:0;color:var(--text-primary);font-size:13px}
.film-facts a{color:var(--accent-text)}.film-facts a:hover{color:var(--accent-text-hover)}
h3.dl-quality,h5.dl-quality{margin:0}
.season-current-title{margin:0 0 14px;font-size:18px;font-weight:700;color:var(--text-primary)}