/* ══════════════════════════════════════════════════════════════════
   CINEHUB PREMIUM — style-additions.css
   Drop in AFTER your main style.css link in index.html
   <link rel="stylesheet" href="css/style-additions.css">
══════════════════════════════════════════════════════════════════ */

/* Fix fonts — use the Outfit font that's already loaded in index.html */
:root {
    --font-display: 'Outfit', sans-serif;
    --font-body:    'Outfit', sans-serif;
}

/* ─────────────────────────────────────────────────────────────────
   1. NAV — Transparent at top → dark glass on scroll
───────────────────────────────────────────────────────────────── */
.top-nav {
    transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.top-nav.nav-scrolled {
    background:         rgba(7, 10, 18, 0.97) !important;
    border-bottom-color: rgba(0, 210, 245, 0.12) !important;
    box-shadow:         0 2px 24px rgba(0, 0, 0, 0.55);
}

/* ─────────────────────────────────────────────────────────────────
   2. HERO — Full-bleed cinematic upgrade
───────────────────────────────────────────────────────────────── */
.hero-slider {
    height:       650px !important;
    border-radius: 0 !important;          /* full-bleed: no rounded corners */
    margin-left:  -1.5rem !important;
    margin-right: -1.5rem !important;
    margin-top:   -3rem  !important;      /* bleed under sticky nav */
}

/* Richer gradient — heavier on left + full bottom fade */
.hero-slide .hero-overlay {
    background:
        linear-gradient(to right,
            rgba(7, 10, 18, 0.88) 0%,
            rgba(7, 10, 18, 0.20) 52%,
            rgba(7, 10, 18, 0.52) 100%),
        linear-gradient(to top,
            rgba(7, 10, 18, 1.00) 0%,
            rgba(7, 10, 18, 0.45) 38%,
            transparent           62%),
        linear-gradient(to bottom,
            rgba(7, 10, 18, 0.60) 0%,
            transparent           20%) !important;
}

/* Bigger, bolder title */
.hero-title {
    font-size:     4.5rem !important;
    font-weight:   900   !important;
    letter-spacing: -0.025em;
    line-height:   1.0   !important;
    text-shadow:   0 4px 40px rgba(0, 0, 0, 0.65);
    margin-bottom: 1rem  !important;
}

.hero-description {
    font-size:     1rem             !important;
    line-height:   1.65             !important;
    color:         rgba(238, 242, 255, 0.82) !important;
    margin-bottom: 1.2rem           !important;
}

/* ─────────────────────────────────────────────────────────────────
   3. HERO PROGRESS BAR — replaces the dots
───────────────────────────────────────────────────────────────── */
/* Hide old dots */
.hero-dots { display: none !important; }

.hero-prog-bar {
    position: absolute;
    bottom:   0;
    left:     0;
    right:    0;
    display:  flex;
    gap:      5px;
    padding:  0 2rem 1.4rem;
    z-index:  10;
}

.hero-prog-line {
    flex:         1;
    height:       3px;
    background:   rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    cursor:       pointer;
    overflow:     hidden;
    border:       none;
    padding:      0;
    transition:   background 0.2s ease;
}
.hero-prog-line.hero-prog-active,
.hero-prog-line:hover { background: rgba(255, 255, 255, 0.40); }

.hero-prog-fill {
    height:        100%;
    width:         0%;
    background:    #fff;
    border-radius: 3px;
    pointer-events: none;
}
.hero-prog-line.hero-prog-done .hero-prog-fill {
    width:      100%;
    transition: none;
}

/* ─────────────────────────────────────────────────────────────────
   4. HERO — New badge + My List button
───────────────────────────────────────────────────────────────── */
.hero-badge-new {
    background:   var(--accent-red) !important;
    border-color: var(--accent-red) !important;
    color:        #fff !important;
    font-weight:  800;
    letter-spacing: 0.08em;
}

.btn-hero-wl {
    width:          52px;
    height:         52px;
    border-radius:  50%;
    background:     rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border:         2px solid rgba(255, 255, 255, 0.35);
    color:          #fff;
    display:        flex;
    align-items:    center;
    justify-content: center;
    cursor:         pointer;
    transition:     all 0.25s ease;
    flex-shrink:    0;
}
.btn-hero-wl:hover {
    background:  rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.7);
    transform:   scale(1.08);
}
.btn-hero-wl.wl-active {
    color:        var(--accent-cyan);
    border-color: rgba(0, 210, 245, 0.8);
    background:   rgba(0, 210, 245, 0.18);
}

.hero-info-btn {
    display:     flex !important;
    align-items: center !important;
    gap:         0.45rem !important;
}

/* ─────────────────────────────────────────────────────────────────
   5. MOVIE CARD — Top bar + watchlist heart
───────────────────────────────────────────────────────────────── */
/* Remove old dark ::before overlay — replaced by card-top-bar gradient */
.movie-card::before { display: none !important; }

.card-top-bar {
    position:    absolute;
    top:         0;
    left:        0;
    right:       0;
    display:     flex;
    align-items: flex-start;
    justify-content: space-between;
    padding:     0.6rem;
    z-index:     4;
    background:  linear-gradient(to bottom, rgba(7, 10, 18, 0.7) 0%, transparent 100%);
}

/* Movie rating now lives inside card-top-bar — reset its old absolute positioning */
.movie-card .movie-rating {
    position: static  !important;
    top:      unset   !important;
    left:     unset   !important;
    z-index:  unset   !important;
}

/* Watchlist heart button on card */
.card-wl-btn {
    width:          28px;
    height:         28px;
    border-radius:  50%;
    background:     rgba(0, 0, 0, 0.50);
    border:         1.5px solid rgba(255, 255, 255, 0.22);
    color:          rgba(255, 255, 255, 0.75);
    display:        flex;
    align-items:    center;
    justify-content: center;
    cursor:         pointer;
    opacity:        0;
    transition:     all 0.2s ease;
    flex-shrink:    0;
    padding:        0;
}
.movie-card:hover .card-wl-btn { opacity: 1; }
.card-wl-btn.wl-active {
    opacity:      1;
    color:        var(--accent-cyan);
    border-color: rgba(0, 210, 245, 0.7);
    background:   rgba(0, 210, 245, 0.18);
}
.card-wl-btn:hover         { transform: scale(1.15); }
.card-wl-btn.wl-active:hover { background: rgba(0, 210, 245, 0.28); }

/* ─────────────────────────────────────────────────────────────────
   6. CARD HOVER OVERLAY — replaces old .movie-info
───────────────────────────────────────────────────────────────── */
/* Hide old elements */
.play-overlay { display: none !important; }
.movie-info   { display: none !important; }

.card-hover-overlay {
    position:    absolute;
    bottom:      0;
    left:        0;
    right:       0;
    padding:     2.5rem 0.8rem 0.85rem;
    background:  linear-gradient(to top, rgba(7, 10, 18, 0.98) 40%, transparent 100%);
    transform:   translateY(6px);
    opacity:     0;
    transition:  all 0.28s ease;
    z-index:     3;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         0.3rem;
    text-align:  center;
}
.movie-card:hover .card-hover-overlay {
    transform: translateY(0);
    opacity:   1;
}

.card-play-circle {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.92);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   0.2rem;
    box-shadow:      0 4px 16px rgba(0, 0, 0, 0.5);
    transition:      transform 0.2s ease, background 0.2s ease;
    flex-shrink:     0;
}
.movie-card:hover .card-play-circle {
    transform:  scale(1.08);
    background: #fff;
}

.card-hover-title {
    font-size:     0.82rem;
    font-weight:   700;
    color:         var(--text-high);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    width:         100%;
}
.card-hover-meta {
    font-size: 0.68rem;
    color:     var(--text-med);
}

/* ─────────────────────────────────────────────────────────────────
   7. ROW WRAP + SCROLL ARROWS
───────────────────────────────────────────────────────────────── */
.row-wrap {
    position: relative;
    overflow: visible;  /* allow arrows to overflow */
}

.row-arrow {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    width:           48px;
    height:          90px;
    border:          none;
    background:      transparent;
    color:           var(--text-high);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    opacity:         0;
    transition:      opacity 0.22s ease, color 0.2s ease;
    border-radius:   6px;
}
.row-arrow.row-arrow-left {
    left:       -6px;
    background: linear-gradient(to right, rgba(7, 10, 18, 0.92) 0%, transparent 100%);
    border-radius: 4px 0 0 4px;
}
.row-arrow.row-arrow-right {
    right:      -6px;
    background: linear-gradient(to left, rgba(7, 10, 18, 0.92) 0%, transparent 100%);
    border-radius: 0 4px 4px 0;
}
.row-wrap:hover .row-arrow  { opacity: 1; }
.row-arrow:hover            { color: var(--accent-cyan); opacity: 1 !important; }
.row-arrow svg              { transition: transform 0.2s ease; }
.row-arrow:hover svg        { transform: scale(1.3); }

/* ─────────────────────────────────────────────────────────────────
   8. SECTION HEADER — clean, no emoji
───────────────────────────────────────────────────────────────── */
.section-icon { display: none !important; }      /* hide emoji spans */

.section-title {
    font-size:     1.4rem   !important;
    font-weight:   700      !important;
    letter-spacing: 0.01em;
    gap:           0.55rem;
}

.section-more {
    font-size: 0.82rem;
    font-weight: 600;
    opacity:   0.65;
    transition: opacity 0.2s ease, gap 0.2s ease;
}
.section-more:hover { opacity: 1; gap: 0.75rem; }

/* My List section heart colour */
.mylist-section .section-title { color: var(--text-high); }

/* ─────────────────────────────────────────────────────────────────
   9. SKELETON LOADERS
───────────────────────────────────────────────────────────────── */
@keyframes chShimmer {
    0%   { background-position: -1400px 0; }
    100% { background-position:  1400px 0; }
}

.skeleton-hero,
.skeleton-poster,
.skeleton-title {
    background: linear-gradient(90deg,
        var(--bg-card)     0%,
        var(--bg-elevated) 45%,
        var(--bg-card)     90%
    );
    background-size: 2800px 100%;
    animation: chShimmer 1.8s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-hero {
    width:         calc(100% + 3rem);
    margin-left:   -1.5rem;
    height:        650px;
    border-radius: 0;
    margin-bottom: 3rem;
}

.skeleton-section { margin-bottom: 3rem; }

.skeleton-title {
    width:         180px;
    height:        24px;
    border-radius: 6px;
    margin-bottom: 1.25rem;
}

.skeleton-row {
    display:  flex;
    gap:      1rem;
    overflow: hidden;
}

.skeleton-card { flex-shrink: 0; }

.skeleton-poster {
    width:         200px;
    height:        300px;
    border-radius: 16px;
}

/* ─────────────────────────────────────────────────────────────────
   10. TOAST NOTIFICATION
───────────────────────────────────────────────────────────────── */
.ch-toast {
    position:       fixed;
    bottom:         2rem;
    left:           50%;
    transform:      translateX(-50%) translateY(14px);
    background:     rgba(15, 19, 32, 0.96);
    border:         1px solid rgba(0, 210, 245, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color:          var(--text-high);
    padding:        0.7rem 1.6rem;
    border-radius:  30px;
    font-size:      0.875rem;
    font-weight:    600;
    font-family:    var(--font-body);
    z-index:        99999;
    opacity:        0;
    transition:     opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    white-space:    nowrap;
    box-shadow:     0 8px 30px rgba(0, 0, 0, 0.55),
                    0 0 0 1px rgba(0, 210, 245, 0.08);
}
.ch-toast.ch-toast-in {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}
.ch-toast.ch-toast-out {
    opacity:   0;
    transform: translateX(-50%) translateY(14px);
}

/* ─────────────────────────────────────────────────────────────────
   11. SCROLL-TO-TOP BUTTON
───────────────────────────────────────────────────────────────── */
.scroll-top-btn {
    position:        fixed;
    bottom:          2rem;
    right:           2rem;
    z-index:         500;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:          1px solid var(--glass-border);
    color:           var(--text-high);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    opacity:         0;
    transform:       translateY(12px);
    transition:      all 0.3s ease;
    pointer-events:  none;
    box-shadow:      0 4px 20px rgba(0, 0, 0, 0.35);
}
.scroll-top-btn.visible {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: all;
}
.scroll-top-btn:hover {
    background:  var(--accent-cyan);
    border-color: var(--accent-cyan);
    color:       var(--bg-deep);
    box-shadow:  0 4px 24px rgba(0, 210, 245, 0.4);
    transform:   translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────
   12. DETAIL PAGE — My List button
───────────────────────────────────────────────────────────────── */
.btn-mylist {
    display:     flex      !important;
    align-items: center    !important;
    gap:         0.5rem    !important;
    transition:  all 0.25s ease !important;
}
.btn-mylist.wl-active {
    border-color: var(--accent-cyan)           !important;
    color:        var(--accent-cyan)           !important;
    background:   rgba(0, 210, 245, 0.08)     !important;
}

/* ─────────────────────────────────────────────────────────────────
   13. SIDEBAR EXTRA — dividers + section labels
───────────────────────────────────────────────────────────────── */
.nav-divider {
    height:     1px;
    background: rgba(255, 255, 255, 0.07);
    margin:     0.6rem 1rem;
    border:     none;
}

.nav-section-label {
    padding:        0.35rem 1.2rem 0.2rem;
    font-size:      0.6rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--text-med);
    opacity:        0.45;
    pointer-events: none;
    user-select:    none;
}

/* ─────────────────────────────────────────────────────────────────
   15. CATEGORY PAGE — vertical poster grid
───────────────────────────────────────────────────────────────── */

/* Ensure fadeInUp keyframe is available (mirrors original style.css) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.cat-section {
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeInUp 0.6s var(--transition-smooth, cubic-bezier(.22,.68,0,1.2)) forwards;
}
.cat-section-title {
    font-family:    var(--font-display);
    font-size:      1.35rem;
    font-weight:    700;
    margin-bottom:  1.1rem;
    display:        flex;
    align-items:    center;
    gap:            0.6rem;
    color:          var(--text-high);
}
.cat-section-title .cat-cs-badge {
    font-size:      0.65rem;
    font-weight:    800;
    letter-spacing: 0.08em;
    padding:        0.2rem 0.55rem;
    border-radius:  4px;
    background:     rgba(0, 210, 245, 0.15);
    border:         1px solid rgba(0, 210, 245, 0.4);
    color:          var(--accent-cyan);
    text-transform: uppercase;
}
.cat-section-title .cat-cs-badge.cs-soon {
    background: rgba(255, 179, 0, 0.12);
    border-color: rgba(255, 179, 0, 0.4);
    color: var(--accent-gold);
}

/* Responsive poster grid */
.cat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   1.1rem;
}

/* Cards inside the grid don't need min-width anymore */
.cat-grid .movie-card {
    min-width: unset !important;
    width:     100%  !important;
}
.cat-grid .movie-poster {
    height: auto   !important;
    aspect-ratio: 2 / 3;
    width: 100%;
}

@media (max-width: 768px) {
    .cat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.75rem; }
}
@media (max-width: 480px) {
    .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
}


       (bottom-nav styles are left COMPLETELY UNCHANGED)
───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-slider  { margin-left: -1rem !important; margin-right: -1rem !important; }
    .hero-title   { font-size: 3.2rem !important; }
    .skeleton-hero { margin-left: -1rem; width: calc(100% + 2rem); }
}

@media (max-width: 768px) {
    .hero-slider  {
        height:       480px !important;
        margin-left:  -0.75rem !important;
        margin-right: -0.75rem !important;
        margin-top:   -1rem   !important;
    }
    .hero-title       { font-size: 2.2rem !important; }
    .hero-inner       { padding: 1.5rem   !important; }
    .hero-poster-wrap { width: 130px !important; height: 195px !important; }
    .hero-prog-bar    { padding: 0 1rem 1rem; }
    .row-arrow        { display: none; }    /* touch-scroll on mobile */
    .skeleton-hero    { height: 480px; margin-left: -0.75rem; width: calc(100% + 1.5rem); }
    .ch-toast         { bottom: 90px; }     /* above mobile nav */
    .scroll-top-btn   { bottom: 90px; right: 1rem; }
}

@media (max-width: 480px) {
    .hero-slider    { height: 400px !important; }
    .hero-title     { font-size: 1.85rem !important; }
    .hero-description { display: none; }
    .hero-poster-wrap { display: none; }
    .skeleton-hero  { height: 400px; }
}

/* ─────────────────────────────────────────────────────────────────
   16. MOBILE SEARCH ICON in top nav
───────────────────────────────────────────────────────────────── */
.mobile-search-btn {
    display:         none;   /* hidden on desktop */
    background:      none;
    border:          1px solid rgba(255,255,255,0.15);
    border-radius:   10px;
    color:           var(--text-high);
    padding:         0.45rem 0.6rem;
    cursor:          pointer;
    transition:      all 0.2s ease;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.mobile-search-btn:hover {
    background:  rgba(0,210,245,0.12);
    border-color: rgba(0,210,245,0.5);
    color:       var(--accent-cyan);
}

@media (max-width: 768px) {
    .mobile-search-btn { display: flex; }
    /* When search is triggered on mobile, show the bar */
    .search-container.mobile-visible {
        display:   flex !important;
        position:  fixed;
        top:       60px;
        left:      0;
        right:     0;
        margin:    0;
        max-width: 100% !important;
        border-radius: 0;
        border-top:    1px solid var(--glass-border);
        background:    rgba(7,10,18,0.97);
        z-index:       99;
        padding:       0.75rem 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────────
   17. SEARCH RESULTS — use cat-grid for vertical layout
───────────────────────────────────────────────────────────────── */
.search-results-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   1.1rem;
}
.search-results-grid .movie-card {
    min-width: unset !important;
    width:     100%  !important;
}
.search-results-grid .movie-poster {
    height:       auto !important;
    aspect-ratio: 2 / 3;
    width:        100%;
}

@media (max-width: 768px) {
    .search-results-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (max-width: 480px) {
    .search-results-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
}

/* ─────────────────────────────────────────────────────────────────
   18. PLAYER — click cursor and quality loading overlay
───────────────────────────────────────────────────────────────── */
.video-element { cursor: pointer; }

/* Quality switch keeps video visible with semi-transparent overlay */
#player-loading[style*="rgba(0,0,0,0.45)"] {
    background: rgba(0,0,0,0.45) !important;
}

/* Landscape btn on mobile */
#player-landscape-btn {
    font-size: 0.7rem;
}
/* ─────────────────────────────────────────────────────────────────
   19. DETAIL PAGE — Watch Now / My List buttons always visible
───────────────────────────────────────────────────────────────── */
.detail-buttons {
    display:   flex !important;
    flex-wrap: wrap;
    gap:       0.75rem;
    margin-top: 1.25rem;
}

.detail-buttons .btn-primary,
.detail-buttons .btn-secondary {
    display:     inline-flex !important;
    visibility:  visible     !important;
    opacity:     1           !important;
    position:    relative    !important;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    /* Push the detail content OUT of the hero so it isn't clipped */
    .detail-hero {
        height:        auto      !important;
        min-height:    420px;
        padding-bottom: 2rem;
    }
    .detail-content {
        position:      relative  !important;
        flex-direction: column   !important;
        align-items:   flex-start !important;
        padding:       1rem 1rem 0 !important;
    }
    .detail-info {
        width:      100% !important;
        max-width:  100% !important;
    }
    .detail-buttons {
        flex-direction: row  !important;
        flex-wrap:      wrap !important;
        gap:            0.6rem;
        margin-top:     1rem;
        padding-bottom: 0.5rem;
        position:       relative !important;
        z-index:        5        !important;
    }
    .detail-buttons .btn-primary,
    .detail-buttons .btn-secondary {
        flex:        1 1 140px;
        min-width:   130px;
        padding:     0.75rem 1rem !important;
        font-size:   0.9rem       !important;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .detail-buttons {
        flex-direction: column !important;
    }
    .detail-buttons .btn-primary,
    .detail-buttons .btn-secondary {
        width:    100%  !important;
        flex:     none  !important;
        text-align: center;
        justify-content: center;
    }
}
/* ─────────────────────────────────────────────────────────────────
   FIX 1: SIDEBAR — prevent auto-open flash on mobile load
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        transform:  translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: transform;
    }
    .sidebar.active {
        transform: translateX(0) !important;
    }
    .sidebar-overlay {
        opacity:            0;
        pointer-events:     none;
        transition:         opacity 0.28s ease;
        background:         rgba(0,0,0,0.6);
        position:           fixed;
        inset:              0;
        z-index:            149;
    }
    .sidebar-overlay.active {
        opacity:        1;
        pointer-events: all;
    }
}

/* ─────────────────────────────────────────────────────────────────
   FIX 2: HERO — proper mobile layout with visible poster
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-slider {
        height:     560px !important;
        margin-top: 0     !important;
    }

    .hero-slide .hero-inner {
        flex-direction:  column       !important;
        justify-content: flex-end     !important;
        align-items:     flex-start   !important;
        padding:         1.25rem 1rem !important;
        height:          100%         !important;
    }

    /* Show a small poster thumbnail top-left */
    .hero-poster-wrap {
        display:       flex    !important;
        width:         90px    !important;
        height:        135px   !important;
        border-radius: 8px     !important;
        overflow:      hidden  !important;
        flex-shrink:   0       !important;
        margin-bottom: 0.75rem !important;
        box-shadow:    0 4px 20px rgba(0,0,0,0.6) !important;
    }

    .hero-poster-img {
        width:      100% !important;
        height:     100% !important;
        object-fit: cover !important;
    }

    .hero-content {
        width: 100% !important;
    }

    .hero-title {
        font-size:   1.65rem !important;
        line-height: 1.15    !important;
        margin-bottom: 0.5rem !important;
    }

    .hero-description {
        display:    -webkit-box          !important;
        -webkit-line-clamp: 2            !important;
        -webkit-box-orient: vertical     !important;
        overflow:   hidden               !important;
        font-size:  0.8rem               !important;
        margin-bottom: 0.65rem           !important;
        opacity:    0.85                 !important;
    }

    .hero-genre-tags {
        margin-bottom: 0.75rem !important;
    }

    .hero-buttons {
        display:   flex      !important;
        gap:       0.5rem    !important;
        flex-wrap: wrap      !important;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        padding:   0.6rem 1rem  !important;
        font-size: 0.82rem      !important;
    }

    /* Stronger bottom gradient so text is always readable */
    .hero-slide .hero-overlay {
        background:
            linear-gradient(to top,
                rgba(7,10,18,1.00)  0%,
                rgba(7,10,18,0.85) 35%,
                rgba(7,10,18,0.40) 65%,
                rgba(7,10,18,0.15) 100%) !important;
    }
}

@media (max-width: 480px) {
    .hero-slider  { height: 520px !important; }
    .hero-title   { font-size: 1.45rem !important; }
    .hero-badges  { flex-wrap: wrap; gap: 0.3rem; }
}
/* ══════════════════════════════════════════════════════════════════
 /* ══════════════════════════════════════════════════════════════════
   CINEHUB — True Netflix Mobile Layout
   Paste at the VERY BOTTOM of style-additions.css
   These rules override everything above them.
══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

/* ═══════════════════════════════
   TOP NAV
═══════════════════════════════ */
.top-nav {
    height:        56px !important;
    padding:       0 1rem !important;
    background:    linear-gradient(
                     to bottom,
                     rgba(7,10,18,0.98) 0%,
                     rgba(7,10,18,0.0) 100%
                   ) !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:    none !important;
}
.top-nav.nav-scrolled {
    background: rgba(7,10,18,0.97) !important;
}
.logo       { font-size: 1.25rem !important; }
.logo-icon  { width: 26px !important; height: 26px !important; }
.download-btn    { display: none !important; }
.search-container { display: none !important; }
.mobile-search-btn {
    display: flex !important;
    background: none !important;
    border: none !important;
    color: var(--text-high) !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ═══════════════════════════════
   CATEGORY PILL TABS
═══════════════════════════════ */
.mobile-cat-tabs {
    position:   fixed !important;
    top:        56px !important;
    left:       0 !important;
    right:      0 !important;
    z-index:    95 !important;
    display:    flex !important;
    gap:        0.45rem !important;
    padding:    0.5rem 0.85rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
}
.mobile-cat-tabs::-webkit-scrollbar { display: none !important; }
.mobile-cat-tab {
    flex-shrink:   0 !important;
    padding:       0.32rem 0.85rem !important;
    border-radius: 20px !important;
    border:        1px solid rgba(255,255,255,0.25) !important;
    background:    rgba(20,25,40,0.85) !important;
    color:         var(--text-high) !important;
    font-size:     0.78rem !important;
    font-weight:   600 !important;
    cursor:        pointer !important;
    white-space:   nowrap !important;
    font-family:   var(--font-body) !important;
    letter-spacing: 0.01em !important;
}
.mobile-cat-tab.active {
    background:  rgba(238,242,255,0.95) !important;
    color:       #000 !important;
    border-color: transparent !important;
}

/* ═══════════════════════════════
   MAIN CONTENT AREA
═══════════════════════════════ */
.main-content {
    margin-left:   0 !important;
    margin-top:    0 !important;          /* hero bleeds under nav */
    margin-bottom: 62px !important;
    padding:       0 !important;
}

/* ═══════════════════════════════
   HERO — full-bleed Netflix style
═══════════════════════════════ */
.hero-slider {
    height:        62vh !important;
    min-height:    320px !important;
    max-height:    500px !important;
    margin:        0 !important;          /* no margins — true full bleed */
    border-radius: 0 !important;
}

/* Background fills 100% */
.hero-bg-blur {
    background-size:     cover !important;
    background-position: center 15% !important;
    filter:              none !important;
    opacity:             1 !important;
}

/* Heavy bottom-to-top gradient, light top fade for nav readability */
.hero-slide .hero-overlay {
    background:
        linear-gradient(
            to top,
            rgba(7,10,18,1.00)  0%,
            rgba(7,10,18,0.95) 18%,
            rgba(7,10,18,0.60) 40%,
            rgba(7,10,18,0.15) 70%,
            rgba(7,10,18,0.40) 100%
        ) !important;
}

/* Inner: single column, content pinned to bottom */
.hero-slide .hero-inner {
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: flex-end !important;
    align-items:     stretch !important;
    padding:         0 1rem 0.9rem !important;
    height:          100% !important;
    width:           100% !important;
    gap:             0 !important;
}

/* Hide the side poster — backdrop IS the visual */
.hero-poster-wrap { display: none !important; }

.hero-content {
    width:     100% !important;
    max-width: 100% !important;
    flex:      none !important;
    padding:   0 !important;
}

/* Genre tags: dots between them, no chip borders */
.hero-genre-tags {
    display:       flex !important;
    align-items:   center !important;
    flex-wrap:     wrap !important;
    gap:           0 !important;
    margin-bottom: 0.4rem !important;
    order:         1 !important;
}
.hero-genre-tag {
    font-size:    0.72rem !important;
    font-weight:  600 !important;
    color:        rgba(238,242,255,0.85) !important;
    background:   none !important;
    border:       none !important;
    padding:      0 0.4rem !important;
    border-radius: 0 !important;
}
.hero-genre-tag + .hero-genre-tag::before {
    content: '·';
    margin-right: 0.4rem;
    color: rgba(238,242,255,0.5);
}

/* Badges row — hide on mobile to keep it clean */
.hero-badges { display: none !important; }

/* Title — big and bold */
.hero-title {
    font-size:     1.75rem !important;
    font-weight:   900 !important;
    line-height:   1.1 !important;
    margin-bottom: 0.65rem !important;
    text-shadow:   0 2px 8px rgba(0,0,0,0.8) !important;
    color:         #fff !important;
    order:         2 !important;
}

/* Description — hidden in hero, shown on detail page */
.hero-description { display: none !important; }

/* Buttons row — Play white + More Info dark, side by side */
.hero-buttons {
    display:        flex !important;
    flex-direction: row !important;
    gap:            0.5rem !important;
    width:          100% !important;
    order:          3 !important;
    margin-top:     0 !important;
}
.hero-buttons .btn-primary {
    flex:            1 !important;
    padding:         0.7rem 0.5rem !important;
    font-size:       0.9rem !important;
    font-weight:     700 !important;
    border-radius:   6px !important;
    justify-content: center !important;
    background:      #fff !important;
    color:           #000 !important;
    border:          none !important;
    gap:             0.35rem !important;
    transform:       none !important;
    box-shadow:      none !important;
}
.hero-buttons .btn-primary:hover { transform: none !important; }

.hero-buttons .btn-secondary.hero-info-btn {
    flex:            1 !important;
    padding:         0.7rem 0.5rem !important;
    font-size:       0.9rem !important;
    font-weight:     700 !important;
    border-radius:   6px !important;
    justify-content: center !important;
    background:      rgba(109,109,110,0.75) !important;
    border:          none !important;
    color:           #fff !important;
    gap:             0.35rem !important;
    backdrop-filter: none !important;
}

/* Watchlist button — icon only, dark pill */
.btn-hero-wl {
    flex:            none !important;
    width:           46px !important;
    padding:         0 !important;
    border-radius:   6px !important;
    background:      rgba(109,109,110,0.75) !important;
    border:          none !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
}

/* Progress bar */
.hero-prog-bar {
    position:  absolute !important;
    bottom:    0 !important;
    left:      0 !important;
    right:     0 !important;
    padding:   0 !important;
    gap:       0 !important;
    display:   flex !important;
}
.hero-prog-line {
    flex:          1 !important;
    height:        2px !important;
    border-radius: 0 !important;
    background:    rgba(255,255,255,0.25) !important;
    border:        none !important;
    padding:       0 !important;
    cursor:        pointer !important;
}
.hero-prog-line.hero-prog-done { background: rgba(255,255,255,0.7) !important; }
.hero-prog-line.hero-prog-active { background: rgba(255,255,255,0.25) !important; }
.hero-prog-fill {
    height:       100% !important;
    background:   #fff !important;
    border-radius: 0 !important;
}

/* Hide desktop arrows on mobile */
.hero-arrow { display: none !important; }

/* ═══════════════════════════════
   SECTION ROWS
═══════════════════════════════ */
.content-section {
    margin-bottom: 1.25rem !important;
    padding:       0 !important;
}
.section-header {
    padding:       0 0.85rem !important;
    margin-bottom: 0.5rem !important;
}
.section-title {
    font-size:  1rem !important;
    font-weight: 700 !important;
}
.section-more { font-size: 0.78rem !important; }
.row-arrow    { display: none !important; }

/* Movie cards scroller */
.movies-scroller {
    padding:         0 0.85rem 0.25rem !important;
    gap:             0.45rem !important;
    scrollbar-width: none !important;
}
.movies-scroller::-webkit-scrollbar { display: none !important; }

/* Cards — Netflix portrait ratio */
.movie-card {
    min-width:    100px !important;
    width:        100px !important;
    border-radius: 5px !important;
    flex-shrink:   0 !important;
}
.movie-card:hover {
    transform: none !important;
    box-shadow: none !important;
}
.movie-poster {
    height:       150px !important;
    border-radius: 5px !important;
}
.movie-rating {
    font-size:    0.55rem !important;
    padding:      0.15rem 0.35rem !important;
    border-radius: 3px !important;
    top:          0.3rem !important;
    left:         0.3rem !important;
    gap:          0.15rem !important;
}
.card-top-bar { padding: 0.3rem 0.3rem 0 !important; }
.card-wl-btn  { width: 20px !important; height: 20px !important; }

/* ═══════════════════════════════
   BOTTOM NAV — Netflix clean
═══════════════════════════════ */
.bottom-nav {
    height:       62px !important;
    background:   rgba(7,10,18,0.98) !important;
    border-top:   1px solid rgba(255,255,255,0.07) !important;
    padding:      0 !important;
    backdrop-filter: blur(12px) !important;
}
.bottom-nav-item {
    flex:           1 !important;
    flex-direction: column !important;
    align-items:    center !important;
    justify-content: center !important;
    gap:            0.22rem !important;
    padding:        0.5rem 0 !important;
    font-size:      0.6rem !important;
    font-weight:    500 !important;
    color:          rgba(255,255,255,0.45) !important;
    background:     none !important;
    border-radius:  0 !important;
    transform:      none !important;
    letter-spacing: 0.01em !important;
}
.bottom-nav-item.active {
    color:      rgba(255,255,255,0.95) !important;
    background: none !important;
    transform:  none !important;
}
/* Thin underline indicator for active tab */
.bottom-nav-item.active .bottom-nav-icon {
    position: relative;
    transform: none !important;
}
.bottom-nav-item.active .bottom-nav-icon::after {
    content:      '';
    position:     absolute;
    bottom:       -4px;
    left:         50%;
    transform:    translateX(-50%);
    width:        16px;
    height:       2px;
    background:   var(--accent-cyan);
    border-radius: 2px;
}
.bottom-nav-icon {
    width:    22px !important;
    height:   22px !important;
    position: relative;
}

/* ═══════════════════════════════
   SIDEBAR
═══════════════════════════════ */
.sidebar {
    top:        0 !important;
    width:      75% !important;
    max-width:  280px !important;
    z-index:    300 !important;
    transform:  translateX(-100%) !important;
    transition: transform 0.26s cubic-bezier(0.4,0,0.2,1) !important;
    padding-top: 60px !important;
    background: rgba(8,11,20,0.99) !important;
    border-right: 1px solid rgba(255,255,255,0.07) !important;
    animation:  none !important;         /* kill the slideRight animation on mobile */
}
.sidebar.active { transform: translateX(0) !important; }

.sidebar-overlay {
    z-index:    299 !important;
    opacity:    0 !important;
    pointer-events: none !important;
    background: rgba(0,0,0,0.65) !important;
    transition: opacity 0.26s ease !important;
}
.sidebar-overlay.active {
    opacity:        1 !important;
    pointer-events: all !important;
}

/* ═══════════════════════════════
   DETAIL PAGE
═══════════════════════════════ */
.detail-hero {
    height:     auto !important;
    min-height: 0 !important;
    margin:     0 !important;
    padding-top: 0 !important;
    position:   relative !important;
}

/* Backdrop image block */
.detail-hero-bg {
    width:        100% !important;
    height:       56vw !important;
    min-height:   200px !important;
    max-height:   320px !important;
    position:     relative !important;
    background-size:     cover !important;
    background-position: center top !important;
    display:      block !important;
    flex:         none !important;
}

.detail-hero-overlay {
    background:
        linear-gradient(
            to top,
            rgba(7,10,18,1.00) 0%,
            rgba(7,10,18,0.55) 50%,
            rgba(7,10,18,0.10) 100%
        ) !important;
}

.detail-content {
    position:       relative !important;
    z-index:        2 !important;
    height:         auto !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    padding:        0 0.85rem 0.85rem !important;
    margin-top:     -3rem !important;
    gap:            0 !important;
}

.back-button {
    position:  fixed !important;
    top:       0.65rem !important;
    left:      0.75rem !important;
    padding:   0.4rem 0.65rem !important;
    font-size: 0.72rem !important;
    z-index:   150 !important;
    border-radius: 6px !important;
}

/* Small poster thumbnail */
.detail-poster {
    width:        100px !important;
    border-radius: 6px !important;
    margin-bottom: 0.65rem !important;
    box-shadow:   0 6px 20px rgba(0,0,0,0.7) !important;
    flex-shrink:  0 !important;
    aspect-ratio: 2/3 !important;
}

.detail-info     { width: 100% !important; padding: 0 !important; }
.detail-title    { font-size: 1.45rem !important; font-weight: 800 !important; line-height: 1.15 !important; margin-bottom: 0.5rem !important; }
.detail-meta-row { gap: 0.5rem !important; margin-bottom: 0.6rem !important; flex-wrap: wrap !important; }
.detail-rating   { font-size: 0.75rem !important; padding: 0.22rem 0.55rem !important; border-radius: 4px !important; }
.detail-meta-item { font-size: 0.75rem !important; }
.detail-genre-tags { gap: 0.35rem !important; margin-bottom: 0.6rem !important; }
.genre-tag { font-size: 0.68rem !important; padding: 0.22rem 0.55rem !important; border-radius: 4px !important; }

.detail-description {
    font-size:              0.83rem !important;
    line-height:            1.55 !important;
    margin-bottom:          0.85rem !important;
    color:                  rgba(238,242,255,0.78) !important;
    display:                -webkit-box !important;
    -webkit-line-clamp:     4 !important;
    -webkit-box-orient:     vertical !important;
    overflow:               hidden !important;
}

/* Full-width stacked buttons */
.detail-buttons {
    flex-direction: column !important;
    gap:            0.45rem !important;
    width:          100% !important;
}
.detail-buttons .btn-primary,
.detail-buttons .btn-secondary,
.detail-buttons .btn-large,
.btn-large {
    width:           100% !important;
    padding:         0.72rem 1rem !important;
    font-size:       0.88rem !important;
    font-weight:     700 !important;
    border-radius:   6px !important;
    justify-content: center !important;
    flex:            none !important;
}
.detail-buttons .btn-primary,
.detail-buttons .btn-primary.btn-large {
    background: #fff !important;
    color:      #000 !important;
    border:     none !important;
}
.detail-buttons .btn-secondary,
.detail-buttons .btn-secondary.btn-large {
    background:   rgba(109,109,110,0.75) !important;
    border-color: transparent !important;
    color:        #fff !important;
}

.detail-body          { padding: 0 0.85rem !important; }
.detail-section       { margin-bottom: 1.5rem !important; }
.detail-section-title { font-size: 1.05rem !important; margin-bottom: 0.65rem !important; }
.cast-grid            { grid-template-columns: repeat(auto-fill, minmax(75px,1fr)) !important; gap: 0.6rem !important; }
.cast-name            { font-size: 0.72rem !important; }
.cast-character       { font-size: 0.62rem !important; }
.info-grid            { gap: 1rem !important; }
.info-label           { font-size: 0.72rem !important; }
.info-value           { font-size: 0.85rem !important; }

/* ═══════════════════════════════
   CAT GRID (search/category page)
═══════════════════════════════ */
.cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap:    0.5rem !important;
    padding: 0 0.85rem !important;
}
.cat-grid .movie-card   { min-width: unset !important; width: 100% !important; }
.cat-grid .movie-poster { height: auto !important; aspect-ratio: 2/3 !important; }

/* ═══════════════════════════════
   SKELETON
═══════════════════════════════ */
.skeleton-hero {
    height:       62vh !important;
    min-height:   320px !important;
    max-height:   500px !important;
    margin:       0 !important;
    width:        100% !important;
    border-radius: 0 !important;
}
.skeleton-section { padding: 0 0.85rem !important; }
.skeleton-card    { min-width: 100px !important; width: 100px !important; }
.skeleton-poster  { height: 150px !important; }

/* ═══════════════════════════════
   PREPLAY MODAL
═══════════════════════════════ */
.preplay-modal-overlay { align-items: flex-end !important; }
.preplay-modal {
    width:          100% !important;
    max-width:      100% !important;
    border-radius:  18px 18px 0 0 !important;
    flex-direction: column !important;
    max-height:     92vh !important;
    overflow-y:     auto !important;
}
.preplay-left  { width: 100% !important; }
.preplay-right { width: 100% !important; padding-left: 0 !important; }

/* ═══════════════════════════════
   MISC
═══════════════════════════════ */
.ch-toast       { bottom: 75px !important; }
.scroll-top-btn { bottom: 75px !important; right: 0.75rem !important; }

/* Page padding for tab bar */
.page-view { padding-top: 0.5rem !important; }

} /* end @media 768px */

/* ── Very small phones ─────────────────────────────── */
@media (max-width: 380px) {
    .hero-title  { font-size: 1.45rem !important; }
    .movie-card  { min-width: 88px !important; width: 88px !important; }
    .movie-poster { height: 132px !important; }
    .cat-grid    { gap: 0.35rem !important; padding: 0 0.6rem !important; }
    .detail-title { font-size: 1.25rem !important; }
}

/* ── Fix tab overlap ─────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Reserve space so content doesn't hide under nav + tabs */
    .main-content {
        padding-top: 96px !important;  /* 56px nav + 40px tabs */
    }

    /* Hide hero top padding since hero bleeds to top */
    .hero-slider {
        margin-top: -96px !important;
    }

    /* Hide tabs on search page */
    body.search-open #mobile-cat-tabs {
        display: none !important;
    }

    /* Hide tabs on detail page */
    body.detail-open #mobile-cat-tabs {
        display: none !important;
    }

    /* Fix search filter bar not being pushed down */
    .search-filter-bar {
        padding-top: 0.75rem !important;
    }
}
/* ── Mobile: exactly 3 cards visible in horizontal rows ─────────── */
@media (max-width: 768px) {
    .movies-scroller {
        display:               grid !important;
        grid-auto-flow:        column !important;
        grid-auto-columns:     calc((100vw - 1.7rem - 2 * 0.45rem) / 3) !important;
        overflow-x:            auto !important;
        scroll-snap-type:      x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding:               0 0.85rem 0.5rem !important;
        gap:                   0.45rem !important;
    }
    .movies-scroller .movie-card {
        width:     100% !important;
        min-width: unset !important;
        scroll-snap-align: start !important;
    }
    .movies-scroller .movie-poster {
        height:      auto !important;
        aspect-ratio: 2/3 !important;
    }
}
/* ── Netflix-style portrait card thumbnails on mobile ──────────── */
@media (max-width: 768px) {

    /* Card: clean rounded corners, no hover transform */
    .movie-card {
        border-radius:   8px !important;
        overflow:        hidden !important;
        background:      var(--bg-card) !important;
        box-shadow:      none !important;
    }
    .movie-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Poster fills card naturally */
    .movie-poster {
        width:        100% !important;
        height:       auto !important;
        aspect-ratio: 2/3 !important;
        object-fit:   cover !important;
        display:      block !important;
        border-radius: 8px !important;
    }

    /* Bottom gradient fade over image — Netflix style */
    .movie-card::after {
        content:    '' !important;
        position:   absolute !important;
        bottom:     0 !important;
        left:       0 !important;
        right:      0 !important;
        height:     45% !important;
        background: linear-gradient(
                        to top,
                        rgba(7,10,18,0.92) 0%,
                        rgba(7,10,18,0.50) 50%,
                        transparent       100%
                    ) !important;
        border-radius: 0 0 8px 8px !important;
        pointer-events: none !important;
        z-index:    1 !important;
    }

    /* Rating badge — top left, small */
    .movie-rating {
        position:     absolute !important;
        top:          0.35rem !important;
        left:         0.35rem !important;
        font-size:    0.55rem !important;
        padding:      0.15rem 0.35rem !important;
        border-radius: 4px !important;
        z-index:      3 !important;
        background:   rgba(0,210,245,0.85) !important;
        backdrop-filter: blur(4px) !important;
    }

    /* Watchlist heart — top right */
    .card-wl-btn {
        position:   absolute !important;
        top:        0.3rem !important;
        right:      0.3rem !important;
        z-index:    3 !important;
        background: rgba(0,0,0,0.55) !important;
        border-radius: 50% !important;
        width:      22px !important;
        height:     22px !important;
        display:    flex !important;
        align-items: center !important;
        justify-content: center !important;
        border:     none !important;
        padding:    0 !important;
    }

    /* Card top bar — invisible, badges positioned absolutely */
    .card-top-bar {
        position:   absolute !important;
        top:        0 !important;
        left:       0 !important;
        right:      0 !important;
        padding:    0 !important;
        background: none !important;
        z-index:    3 !important;
    }

    /* Hover overlay hidden on mobile — tap to navigate */
    .card-hover-overlay { display: none !important; }

    /* Cat-grid cards also get same treatment */
    .cat-grid .movie-card  { border-radius: 8px !important; }
    .cat-grid .movie-poster {
        height:      auto !important;
        aspect-ratio: 2/3 !important;
        border-radius: 8px !important;
    }

    /* Scroller cards */
    .movies-scroller .movie-card { border-radius: 8px !important; }
}
/* ── Detail page mobile — Netflix style ─────────────────────────── */
@media (max-width: 768px) {

    /* Full bleed backdrop at top */
    .detail-hero {
        position:    relative !important;
        height:      auto !important;
        min-height:  0 !important;
        margin:      0 !important;
        overflow:    visible !important;
    }

    .detail-hero-bg {
        position:    relative !important;
        width:       100% !important;
        height:      56vw !important;
        min-height:  210px !important;
        max-height:  300px !important;
        background-size:     cover !important;
        background-position: center top !important;
        display:     block !important;
    }

    .detail-hero-overlay {
        position: absolute !important;
        inset:    0 !important;
        background: linear-gradient(
            to bottom,
            rgba(7,10,18,0.15) 0%,
            rgba(7,10,18,0.60) 70%,
            rgba(7,10,18,1.00) 100%
        ) !important;
    }

    /* Content sits below the backdrop, NOT overlapping */
    .detail-content {
        position:       relative !important;
        height:         auto !important;
        flex-direction: row !important;
        align-items:    flex-start !important;
        padding:        0.85rem !important;
        margin-top:     0 !important;
        gap:            0.85rem !important;
        background:     var(--bg-deep) !important;
    }

    /* Poster: small thumbnail on the left */
    .detail-poster {
        width:         90px !important;
        min-width:     90px !important;
        aspect-ratio:  2/3 !important;
        border-radius: 6px !important;
        margin:        0 !important;
        box-shadow:    0 4px 16px rgba(0,0,0,0.6) !important;
        flex-shrink:   0 !important;
        overflow:      hidden !important;
    }
    .detail-poster img {
        width:      100% !important;
        height:     100% !important;
        object-fit: cover !important;
    }

    /* Info on the right of the poster */
    .detail-info {
        flex:    1 !important;
        width:   auto !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    .detail-title {
        font-size:     1.1rem !important;
        font-weight:   800 !important;
        line-height:   1.2 !important;
        margin-bottom: 0.4rem !important;
    }

    .detail-meta-row {
        gap:           0.35rem !important;
        margin-bottom: 0.5rem !important;
        flex-wrap:     wrap !important;
    }
    .detail-rating {
        font-size:    0.7rem !important;
        padding:      0.2rem 0.5rem !important;
    }
    .detail-meta-item { font-size: 0.7rem !important; }

    .detail-genre-tags {
        gap:           0.3rem !important;
        margin-bottom: 0.5rem !important;
    }
    .genre-tag {
        font-size: 0.65rem !important;
        padding:   0.2rem 0.5rem !important;
    }

    /* Description below the poster+info row */
    .detail-description {
        display:                -webkit-box !important;
        -webkit-line-clamp:     3 !important;
        -webkit-box-orient:     vertical !important;
        overflow:               hidden !important;
        font-size:              0.82rem !important;
        line-height:            1.5 !important;
        color:                  rgba(238,242,255,0.75) !important;
        margin:                 0 0.85rem 0.85rem !important;
    }

    /* Buttons — full width, stacked */
    .detail-buttons {
        flex-direction: column !important;
        gap:            0.45rem !important;
        padding:        0 0.85rem 0.85rem !important;
        width:          100% !important;
    }
    .detail-buttons .btn-primary,
    .detail-buttons .btn-secondary,
    .btn-large {
        width:           100% !important;
        padding:         0.72rem !important;
        font-size:       0.9rem !important;
        font-weight:     700 !important;
        border-radius:   6px !important;
        justify-content: center !important;
        flex:            none !important;
    }
    .detail-buttons .btn-primary,
    .detail-buttons .btn-primary.btn-large {
        background: #fff !important;
        color:      #000 !important;
        border:     none !important;
    }
    .detail-buttons .btn-secondary,
    .detail-buttons .btn-secondary.btn-large {
        background:   rgba(109,109,110,0.75) !important;
        border-color: transparent !important;
        color:        #fff !important;
    }

    /* Detail body */
    .detail-body          { padding: 0 0.85rem !important; }
    .detail-section       { margin-bottom: 1.5rem !important; }
    .detail-section-title { font-size: 1rem !important; margin-bottom: 0.65rem !important; }

    /* Back button — fixed top left */
    .back-button {
        position:     fixed !important;
        top:          0.6rem !important;
        left:         0.7rem !important;
        z-index:      200 !important;
        padding:      0.38rem 0.65rem !important;
        font-size:    0.72rem !important;
        border-radius: 6px !important;
        background:   rgba(7,10,18,0.75) !important;
        backdrop-filter: blur(8px) !important;
    }
}
/* ── Detail page — full width layout like Netflix ───────────────── */
@media (max-width: 768px) {

    /* Hide the separate poster thumbnail entirely */
    .detail-poster { display: none !important; }

    /* Content goes full width below backdrop */
    .detail-content {
        flex-direction: column !important;
        align-items:    flex-start !important;
        padding:        0.85rem !important;
        gap:            0 !important;
        background:     var(--bg-deep) !important;
    }

    .detail-info {
        width:   100% !important;
        padding: 0 !important;
    }

    .detail-title {
        font-size:     1.3rem !important;
        font-weight:   800 !important;
        line-height:   1.2 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Description inline, not outside */
    .detail-description {
        display:                -webkit-box !important;
        -webkit-line-clamp:     3 !important;
        -webkit-box-orient:     vertical !important;
        overflow:               hidden !important;
        font-size:              0.82rem !important;
        line-height:            1.5 !important;
        color:                  rgba(238,242,255,0.75) !important;
        margin:                 0.5rem 0 0.85rem !important;
    }

    /* Buttons full width inside detail-info */
    .detail-buttons {
        flex-direction: column !important;
        gap:            0.45rem !important;
        width:          100% !important;
        padding:        0 !important;
        margin-bottom:  0 !important;
    }
    .detail-buttons .btn-primary,
    .detail-buttons .btn-secondary,
    .btn-large {
        width:           100% !important;
        padding:         0.75rem !important;
        font-size:       0.9rem !important;
        font-weight:     700 !important;
        border-radius:   6px !important;
        justify-content: center !important;
        flex:            none !important;
    }
    .detail-buttons .btn-primary,
    .detail-buttons .btn-primary.btn-large {
        background: #fff !important;
        color:      #000 !important;
        border:     none !important;
    }
    .detail-buttons .btn-secondary,
    .detail-buttons .btn-secondary.btn-large {
        background:   rgba(109,109,110,0.75) !important;
        border-color: transparent !important;
        color:        #fff !important;
    }
}
/* ── Detail mobile — poster as full hero ───────────────────────── */
@media (max-width: 768px) {

    /* Hide the backdrop — poster IS the hero */
    .detail-hero-bg    { display: none !important; }
    .detail-hero-overlay { display: none !important; }

    /* Show poster fully at the top */
    .detail-poster {
        display:       block !important;
        width:         100% !important;
        max-width:     100% !important;
        aspect-ratio:  2/3 !important;
        max-height:    70vw !important;
        border-radius: 0 !important;
        margin:        0 !important;
        box-shadow:    none !important;
        overflow:      hidden !important;
    }
    .detail-poster img {
        width:      100% !important;
        height:     100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Gradient fade at bottom of poster into content */
    .detail-poster::after {
        content:    '' !important;
        position:   absolute !important;
        bottom:     0 !important;
        left:       0 !important;
        right:      0 !important;
        height:     40% !important;
        background: linear-gradient(to top, rgba(7,10,18,1) 0%, transparent 100%) !important;
        pointer-events: none !important;
    }

    /* Hero wraps poster + content naturally */
    .detail-hero {
        position:   relative !important;
        height:     auto !important;
        margin:     0 !important;
        overflow:   hidden !important;
    }

    /* Content sits right below the poster */
    .detail-content {
        position:       relative !important;
        flex-direction: column !important;
        align-items:    flex-start !important;
        height:         auto !important;
        padding:        0.85rem !important;
        margin-top:     0 !important;
        gap:            0 !important;
        background:     var(--bg-deep) !important;
    }

    .detail-info  { width: 100% !important; padding: 0 !important; }

    .detail-title {
        font-size:     1.3rem !important;
        font-weight:   800 !important;
        line-height:   1.2 !important;
        margin-bottom: 0.5rem !important;
    }

    .detail-description {
        display:            -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow:           hidden !important;
        font-size:          0.82rem !important;
        line-height:        1.5 !important;
        color:              rgba(238,242,255,0.75) !important;
        margin:             0.5rem 0 0.85rem !important;
    }

    .detail-buttons {
        flex-direction: column !important;
        gap:            0.45rem !important;
        width:          100% !important;
        padding:        0 !important;
    }
    .detail-buttons .btn-primary,
    .detail-buttons .btn-secondary,
    .btn-large {
        width:           100% !important;
        padding:         0.75rem !important;
        font-size:       0.9rem !important;
        font-weight:     700 !important;
        border-radius:   6px !important;
        justify-content: center !important;
        flex:            none !important;
    }
    .detail-buttons .btn-primary,
    .detail-buttons .btn-primary.btn-large {
        background: #fff !important;
        color:      #000 !important;
        border:     none !important;
    }
    .detail-buttons .btn-secondary,
    .detail-buttons .btn-secondary.btn-large {
        background:   rgba(109,109,110,0.75) !important;
        border-color: transparent !important;
        color:        #fff !important;
    }

    .detail-body          { padding: 0 0.85rem !important; }
    .detail-section       { margin-bottom: 1.5rem !important; }
    .detail-section-title { font-size: 1rem !important; }

    /* Back button always on top */
    .back-button {
        position:     fixed !important;
        top:          0.6rem !important;
        left:         0.7rem !important;
        z-index:      200 !important;
        padding:      0.38rem 0.65rem !important;
        font-size:    0.72rem !important;
        border-radius: 6px !important;
        background:   rgba(7,10,18,0.8) !important;
        backdrop-filter: blur(8px) !important;
    }
}

/* ── Mobile search panel — show input field ─────────────────────── */
@media (max-width: 768px) {

    /* Search input bar inside the search panel */
    .search-panel-input-wrap {
        display:     flex !important;
        align-items: center !important;
        gap:         0.6rem !important;
        padding:     0.65rem 0.85rem !important;
        background:  rgba(15,19,32,0.95) !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        position:    sticky !important;
        top:         56px !important;
        z-index:     94 !important;
    }

    .search-panel-input-wrap input {
        flex:        1 !important;
        background:  rgba(255,255,255,0.07) !important;
        border:      1px solid rgba(255,255,255,0.12) !important;
        border-radius: 8px !important;
        padding:     0.6rem 0.85rem !important;
        color:       var(--text-high) !important;
        font-size:   0.9rem !important;
        font-family: var(--font-body) !important;
        outline:     none !important;
    }

    .search-panel-input-wrap input:focus {
        border-color: var(--accent-cyan) !important;
    }

    .search-panel-input-wrap input::placeholder {
        color: rgba(255,255,255,0.35) !important;
    }
}