/* ══════════════════════════════════════════════════════════════════
   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;
    }
}