/*
Theme Name: Netstream — Disney+Hotstar Red Edition
Theme URI: https://netstream.dev
Author: Elite Dev Team
Description: Massive OTT streaming theme – Netflix-style UI, glassmorphism, hero slider, quality badges, download grid, star ratings. v30 adds full Brand Identity customizer + performance optimizations.
Version: 8.2.0
License: GPL v2
*/

/* ==========================================================================
   1. DESIGN TOKENS (CSS VARIABLES)
   ========================================================================== */
:root {
    /* Colors */
    --clr-black: #000000;
    --clr-white: #ffffff;
    
    /* Backgrounds */
    --bg-base: #040405;
    --bg-surface-1: #0e0e11;
    --bg-surface-2: #18181d;
    --bg-surface-3: #222228;
    
    /* Brand Colors — overridden at runtime by WP Customizer via --isf-accent */
    --brand-primary: var(--isf-accent, #E50914);
    --brand-primary-hover: var(--isf-accent, #f40612);
    --brand-primary-glow: color-mix(in srgb, var(--isf-accent, #E50914) 50%, transparent);
    --brand-secondary: #00A8E1;
    --brand-tertiary: #F5C518;
    
    /* UI Status */
    --ui-success: #00e676;
    --ui-warning: #ffab00;
    --ui-error: #ff1744;
    
    /* Text Colors */
    --text-display: #ffffff;
    --text-primary: #f0f0f0;
    --text-secondary: #a3a3b3;
    --text-tertiary: #6b6b7a;
    
    /* Glass & Borders */
    --glass-bg-dark: rgba(14, 14, 17, 0.8);
    --glass-bg-light: rgba(255, 255, 255, 0.05);
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glass-strong: rgba(255, 255, 255, 0.15);
    
    /* Spacing */
    --app-nav-height: 72px;
    --app-bottom-nav-height: 65px;
    --container-px-mobile: 16px;
    --container-px-desktop: 4vw;
    
    /* Border Radius */
    --rad-sm: 3px;
    --rad-md: 4px;
    --rad-lg: 8px;
    --rad-xl: 16px;
    --rad-round: 50%;
    
    /* Shadows */
    --shadow-soft: 0 6px 20px rgba(0,0,0,0.5);
    --shadow-hard: 0 14px 40px rgba(0,0,0,0.85);
    --shadow-neon: 0 0 20px var(--brand-primary-glow);
    
    /* Font */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Transitions */
    --ease-out: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}



/* ==========================================================================
   PERFORMANCE: CSS-driven visibility / transitions (replaces jQuery fadeIn/Out)
   ========================================================================== */

/* Generic show/hide via opacity — zero layout thrash, GPU composited */
[id="isfSearchModal"],
[id="isfAuthAlert"],
[id="isfNewsletterMsg"],
[id="isfReportModal"] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
[id="isfSearchModal"].isf-visible,
[id="isfAuthAlert"].isf-visible,
[id="isfNewsletterMsg"].isf-visible,
[id="isfReportModal"].isf-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Auth modal and overlay: use visibility:hidden so they NEVER block
   clicks/touches on underlying elements (pointer-events:none alone
   is unreliable on some iOS/Android browsers for fixed overlays) */
[id="isfAuthOverlay"],
[id="isfAuthModal"] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
[id="isfAuthOverlay"].isf-visible,
[id="isfAuthModal"].isf-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Back-to-top button */
#isfBackToTop {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) translateZ(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: transform, opacity;
}
#isfBackToTop.isf-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) translateZ(0);
}

/* ── Performance: sidebar via transform (GPU-composited) ── */
body.isf-sidebar-open #isfSidebar,
body.isf-sidebar-open .isf-sidebar {
    transform: translateX(0);
}
body.isf-sidebar-open #isfSidebarOverlay,
body.isf-sidebar-open .isf-sidebar-overlay {
    display: block !important;
    opacity: 1;
    pointer-events: all;
}
/* Lock body scroll when sidebar is open */
body.isf-sidebar-open {
    overflow: hidden !important;
}
body.isf-modal-open {
    overflow: hidden;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    padding-bottom: calc(var(--app-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

img, picture, video {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-surface-3);
    border-radius: 4px;
}

/* ==========================================================================
   2b. CONTENT-VISIBILITY (below-fold paint optimisation)
   ========================================================================== */
.isf-section:not(:first-child) {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
.isf-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--app-nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--container-px-mobile);
    z-index: 9000;
    transition: background var(--ease-in-out), backdrop-filter var(--ease-in-out);
    background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 100%);
}

.isf-header.scrolled {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-glass);
}

.isf-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: var(--text-display);
}

.isf-logo img {
    height: 32px;
    width: auto;
    border-radius: var(--rad-round);
    border: 2px solid var(--brand-primary);
}

.isf-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.isf-header-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg-light);
    border: 1px solid var(--border-glass);
    border-radius: var(--rad-round);
    font-size: 16px;
    cursor: pointer;
    transition: transform var(--ease-out);
    touch-action: manipulation; /* Removes 300ms tap delay on mobile */
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important;
    position: relative; /* Ensure stacking above any overlays */
    z-index: 1; /* Within header's stacking context */
}

.isf-header-btn:active {
    transform: scale(0.9);
}

.isf-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--rad-round);
    object-fit: cover;
    border: 2px solid var(--brand-secondary);
}

/* ==========================================================================
   4. HERO SLIDER (MULTI-SLIDE)
   ========================================================================== */
.isf-hero-slider {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 550px;
    overflow: hidden;
}

.isf-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    will-change: opacity;
    transform: translateZ(0); /* force GPU compositing layer */
}

.isf-hero-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Keeps the departing slide above the incoming one during the crossfade
   so the old content fades OUT visibly rather than vanishing behind the new slide */
.isf-hero-slide.isf-slide-leaving {
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}

.isf-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    transform: translateZ(0); /* isolate from composited slides */
}

.isf-hero-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, var(--bg-base) 0%, rgba(4,4,5,0.7) 35%, rgba(4,4,5,0.3) 60%, transparent 100%),
        linear-gradient(90deg, rgba(4,4,5,0.85) 0%, rgba(4,4,5,0.4) 40%, transparent 70%);
    z-index: 2;
}

.isf-hero-content {
    position: absolute;
    bottom: 18%;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0 var(--container-px-mobile);
    text-align: center;
    max-width: 580px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .isf-hero-content {
        text-align: left;
        margin: 0;
        left: var(--container-px-desktop, 4vw);
        right: auto;
        bottom: 20%;
        max-width: 500px;
    }
    .isf-hero-meta,
    .isf-hero-console {
        justify-content: flex-start;
    }
}

.isf-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-primary);
    color: var(--text-display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--rad-sm);
    margin-bottom: 16px;
}

.isf-hero-title {
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 14px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    letter-spacing: -0.5px;
}

.isf-hero-genres {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.isf-hero-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 700;
}

.isf-hero-console {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Hero Poster (replaces backdrop in featured card) ─────────── */
/* ─── PREMIUM GOLD POSTER CARD ─────────────────────────────── */
.isf-hero-poster-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
}

/* Animated gold border via pseudo-element */
.isf-hero-poster-wrap::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 158px;
    height: 228px;
    border-radius: 16px;
    background: linear-gradient(135deg, #c8922a, #f5d67a, #8b5e1a, #f0c040, #c8922a);
    background-size: 300% 300%;
    animation: isf-gold-shift 3s ease infinite;
    z-index: 0;
    filter: blur(1px);
}

/* Outer ambient glow */
.isf-hero-poster-wrap::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 250px;
    border-radius: 20px;
    background: radial-gradient(ellipse at center, rgba(200,146,42,0.30) 0%, transparent 72%);
    animation: isf-gold-pulse 2.5s ease-in-out infinite;
    z-index: -1;
}

@keyframes isf-gold-shift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

@keyframes isf-gold-pulse {
    0%,100% { opacity: 0.55; transform: translate(-50%,-50%) scale(1);    }
    50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.04); }
}

/* Corner ornaments */
.isf-hero-poster-wrap .isf-poster-corner {
    position: absolute;
    width: 16px; height: 16px;
    border-color: #f0c040;
    border-style: solid;
    opacity: 0.85;
    z-index: 2;
    pointer-events: none;
}
.isf-hero-poster-wrap .isf-poster-corner.tl { top: -2px;  left: -2px;  border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.isf-hero-poster-wrap .isf-poster-corner.tr { top: -2px;  right: -2px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.isf-hero-poster-wrap .isf-poster-corner.bl { bottom: -2px; left: -2px;  border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.isf-hero-poster-wrap .isf-poster-corner.br { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

.isf-hero-poster-img {
    width: 150px;
    height: 220px;
    object-fit: cover;
    border-radius: 13px;
    display: block;
    position: relative;
    z-index: 1;
    box-shadow:
        0 0 0 2px rgba(200,146,42,0.85),
        0 14px 45px rgba(0,0,0,0.90),
        0 0 25px rgba(200,146,42,0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.isf-hero-poster-img:hover {
    transform: scale(1.03);
    box-shadow:
        0 0 0 2px rgba(240,192,64,1),
        0 18px 55px rgba(0,0,0,0.95),
        0 0 40px rgba(200,146,42,0.45);
}
/* ─────────────────────────────────────────────────────────── */

.isf-btn-play-mega {
    background: var(--text-display);
    color: var(--clr-black);
    padding: 10px 28px;
    border-radius: var(--rad-md);
    font-size: 16px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--ease-out), transform var(--ease-out);
}

.isf-btn-play-mega:hover {
    background: rgba(255,255,255,0.85);
}

.isf-btn-play-mega:active {
    transform: scale(0.95);
}

.isf-console-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--ease-out);
}

.isf-console-btn i {
    font-size: 22px;
    color: var(--text-primary);
    transition: transform var(--ease-out);
}

.isf-console-btn:hover i {
    transform: translateY(-4px);
    color: var(--brand-primary);
}

/* Slider Controls */
.isf-slider-prev,
.isf-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    width: 48px;
    height: 48px;
    border-radius: var(--rad-round);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-display);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50; /* Must be above all slide stacking contexts — slides use will-change:opacity which creates isolated stacking contexts */
    transition: background var(--ease-out), transform 0.15s ease;
    touch-action: manipulation; /* Removes 300ms tap delay on mobile */
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important; /* Force clickable even if parent has pointer-events */
}

.isf-slider-prev { left: 12px; }
.isf-slider-next { right: 12px; }

.isf-slider-prev:hover,
.isf-slider-next:hover {
    background: var(--brand-primary);
}

.isf-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.isf-slider-dots span {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: width 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s cubic-bezier(0.4,0,0.2,1);
}

.isf-slider-dots span.active {
    width: 24px;
    background: var(--brand-primary);
}

/* ==========================================================================
   5. NETWORKS RAIL
   ========================================================================== */
/* ==========================================================================
   POPULAR NETWORKS — Premium Streaming UI
   ========================================================================== */
.isf-networks-rail {
    padding: 24px var(--container-px-mobile) 20px;
    margin-top: -20px;
    position: relative;
    z-index: 5;
}

.isf-networks-title {
    margin-bottom: 18px;
}

.isf-networks-title h2 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-display);
    margin-bottom: 3px;
    position: relative;
    display: inline-block;
}

.isf-networks-title h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 2px;
}

.isf-networks-title span {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 6px;
    display: block;
}

.isf-networks-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.isf-networks-track::-webkit-scrollbar { display: none; }

.isf-network-card {
    flex: 0 0 78px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.isf-network-box {
    width: 72px;
    height: 72px;
    background: linear-gradient(145deg, #1e1e26, #141418);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 22px;
    position: relative;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,0.08);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition:
        transform 0.28s cubic-bezier(0.34,1.4,0.64,1),
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* Shimmer overlay on hover */
.isf-network-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 40%,
        rgba(255,255,255,0.08) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.45s ease;
    pointer-events: none;
    z-index: 1;
}

.isf-network-card:hover .isf-network-box::before {
    transform: translateX(100%);
}

.isf-network-card:hover .isf-network-box {
    transform: scale(1.1) translateY(-3px);
    border-color: rgba(229,9,20,0.6);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.6),
        0 0 0 1px rgba(229,9,20,0.2),
        0 0 20px rgba(229,9,20,0.15),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.isf-network-box img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 4px;
}

.isf-network-name {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 76px;
    transition: color 0.2s ease;
}

.isf-network-card:hover .isf-network-name {
    color: rgba(255,255,255,0.9);
}

.isf-network-box--img {
    padding: 0;
    overflow: hidden;
}

.isf-network-box--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.isf-network-fallback-text {
    font-weight: 900;
    font-size: 18px;
    color: #fff;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   6. CATEGORY PILLS
   ========================================================================== */
.isf-pills-rail {
    padding: 8px var(--container-px-mobile);
    display: flex;
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.isf-pills-rail::-webkit-scrollbar {
    display: none;
}

.isf-pill {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    padding: 6px 16px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: background var(--ease-out), color var(--ease-out), border-color var(--ease-out);
    white-space: nowrap;
}

.isf-pill.active,
.isf-pill:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-display);
    border-color: rgba(255,255,255,0.7);
}

/* ==========================================================================
   7. CONTENT ROWS & HORIZONTAL SCROLL
   ========================================================================== */
.isf-row {
    margin-bottom: clamp(24px, 3vw, 48px);
}

.isf-row-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 var(--container-px-mobile) 12px;
}

.isf-row-title {
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 700;
    color: var(--text-display);
    letter-spacing: 0.01em;
}

.isf-row-title i {
    color: var(--brand-primary);
    margin-right: 6px;
}

.isf-row-view-all {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.isf-row:hover .isf-row-view-all {
    opacity: 1;
    transform: translateX(0);
}

.isf-row-header:hover .isf-row-title {
    color: rgba(255,255,255,0.75);
}

.isf-slider-track {
    display: flex;
    gap: 8px;
    padding: 0 var(--container-px-mobile) 16px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Native iOS/Android momentum scroll — buttery smooth */
    -webkit-overflow-scrolling: touch;
    /* Snap removed entirely — was causing all the jerking */
    scroll-snap-type: none;
    scrollbar-width: none;
    /* SCROLL FIX: pan-x pan-y dono allow karo
       sirf pan-x tha → vertical scroll card row ke upar se blocked ho jaata tha
       pan-x pan-y = horizontal rail scroll + page vertical scroll dono kaam karte hain */
    touch-action: pan-x pan-y;
    /* Prevent whole page bouncing when card row ends */
    overscroll-behavior-x: contain;
    /* FIX: will-change:scroll-position hataya — har track ke liye alag compositor layer
       memory pressure badhaata tha. Browser khud scroll optimize karta hai. */
}

.isf-slider-track::-webkit-scrollbar {
    display: none;
}

/* Cards */
/* .isf-card base — minimal anchor; full styles in premium block below (avoids duplicate conflicts) */
.isf-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #1a1a2e;
    border-radius: 10px;
}

.isf-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
}

.isf-card-title {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 8px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.isf-card-year {
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 0 8px 10px;
}

/* Quality Badge */
.isf-card-quality {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: var(--rad-sm);
    color: var(--ui-success);
    border: 1px solid rgba(0,230,118,0.3);
    z-index: 5;
}

.isf-card-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--brand-primary);
    color: var(--text-display);
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: var(--rad-sm);
    z-index: 5;
}

.isf-card-badge.badge-new {
    background: var(--brand-secondary);
}

/* Continue Watching Progress Bar */
.isf-card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.2);
}

.isf-card-progress-bar {
    height: 100%;
    background: var(--brand-primary);
    width: 0%;
}

/* Wide Card (for continue watching) */
.isf-card-wide {
    flex: 0 0 266px;
}

.isf-card-wide img {
    aspect-ratio: 16/9;
}

/* ==========================================================================
   8. SINGLE MOVIE PAGE
   ========================================================================== */
.isf-single-container {
    margin-top: var(--app-nav-height);
}

.isf-single-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}

.isf-backdrop-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.isf-trailer-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.isf-trailer-wrapper iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.isf-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, var(--bg-base) 100%);
}

.isf-poster-floating {
    position: absolute;
    bottom: -60px;
    left: var(--container-px-mobile);
    width: 150px;
    z-index: 10;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.9);
    border: 2px solid rgba(255,255,255,0.12);
}

.isf-poster-floating img {
    width: 100%;
}

.isf-single-body {
    padding: 16px var(--container-px-mobile);
    position: relative;
    z-index: 5;
}

.isf-single-headline {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 12px;
}

.isf-meta-match {
    color: var(--ui-success);
}

.isf-meta-tag {
    border: 1px solid var(--border-glass-strong);
    padding: 2px 8px;
    border-radius: var(--rad-sm);
    background: var(--glass-bg-light);
}

.isf-genre-row {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 10px 0;
}

/* Star Rating */
.isf-user-rating-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface-2);
    padding: 10px 16px;
    border-radius: 40px;
    width: fit-content;
    margin: 16px 0;
}

.isf-star-container {
    display: flex;
    gap: 4px;
}

.isf-star {
    font-size: 22px;
    color: #555;
    cursor: pointer;
    transition: color 0.2s;
}

.isf-star.active,
.isf-star:hover {
    color: #ffc107;
}

.isf-rating-average {
    font-weight: 800;
    color: var(--text-display);
}

.isf-rating-count {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Action Buttons */
.isf-play-console {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.isf-btn-massive {
    width: 100%;
    padding: 14px;
    border-radius: var(--rad-md);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: transform var(--ease-out);
}

.isf-btn-massive:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--text-display);
    color: var(--clr-black);
}

.btn-download {
    background: var(--bg-surface-2);
    color: var(--text-display);
    border: 1px solid var(--border-glass);
}

.btn-secondary {
    background: rgba(0,168,225,0.2);
    border: 1px solid var(--brand-secondary);
    color: var(--brand-secondary);
}

/* Synopsis */
.isf-synopsis {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.isf-synopsis h3 {
    font-size: 18px;
    color: var(--text-display);
    margin-bottom: 8px;
}

.isf-cast-crew {
    background: var(--bg-surface-1);
    padding: 16px;
    border-radius: var(--rad-md);
    margin: 20px 0;
    font-size: 13px;
}

.isf-divider {
    border: none;
    border-top: 1px solid var(--border-glass);
    margin: 24px 0;
}

/* Download Grid */
.isf-download-section h3 {
    font-size: 20px;
    margin-bottom: 16px;
}

.isf-dl-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}

.isf-dl-card {
    background: var(--bg-surface-2);
    border-radius: var(--rad-lg);
    padding: 16px;
    text-align: center;
    min-width: 110px;
    flex: 1 0 auto;
    border: 1px solid var(--border-glass);
    transition: transform 0.2s;
}

.isf-dl-card:hover {
    transform: translateY(-4px);
    background: var(--bg-surface-3);
}

.isf-dl-quality {
    font-size: 16px;
    font-weight: 800;
    color: var(--ui-success);
}

.isf-dl-size {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 8px 0;
}

.isf-dl-type {
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.isf-dl-button {
    background: var(--brand-primary);
    padding: 8px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.isf-dl-empty {
    padding: 40px;
    text-align: center;
    background: var(--bg-surface-1);
    border-radius: var(--rad-lg);
    color: var(--text-tertiary);
}

/* Server Switcher */
.isf-server-switcher-box {
    background: var(--bg-surface-1);
    padding: 16px;
    border-radius: var(--rad-md);
    margin-bottom: 30px;
}

.isf-server-switcher-box h4 {
    margin-bottom: 12px;
}

.isf-server-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.isf-server-btn {
    background: var(--bg-surface-3);
    border: 1px solid var(--border-glass);
    padding: 10px 16px;
    border-radius: var(--rad-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ease-out), border-color var(--ease-out);
}

.isf-server-btn:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* ==========================================================================
   MOBILE NAV SIDEBAR
   ========================================================================== */

.isf-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1040;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.isf-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100vh;
    background: var(--bg-surface-1, #0e0e11);
    border-right: 1px solid var(--border-color, rgba(255,255,255,0.08));
    z-index: 1050;
    overflow-y: auto;
    transform: translateX(-320px);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    display: flex;
    flex-direction: column;
}

.isf-sidebar.open,
body.isf-sidebar-open .isf-sidebar {
    transform: translateX(0) !important;
}

.isf-sidebar.open {
    left: 0;
}

.isf-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.isf-sidebar-logo img,
.isf-sidebar-logo .custom-logo {
    height: 36px;
    width: auto;
}

.isf-sidebar-close {
    background: none;
    border: none;
    color: var(--text-primary, #ffffff);
    font-size: 20px;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    border-radius: 6px;
    transition: background 0.2s;
}

.isf-sidebar-close:hover {
    background: var(--bg-surface-3, #222228);
}

.isf-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.isf-sidebar-user img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--brand-primary, #E50914);
}

.isf-sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.isf-sidebar-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
}

.isf-sidebar-user-email {
    font-size: 11px;
    color: var(--text-muted, #888);
}

.isf-sidebar-menu {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
}

.isf-sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-secondary, #cccccc);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    border-radius: 0;
}

.isf-sidebar-menu li a:hover,
.isf-sidebar-menu li a.active {
    background: var(--bg-surface-2, #18181d);
    color: var(--text-primary, #ffffff);
}

.isf-sidebar-menu li a i {
    width: 20px;
    text-align: center;
    color: var(--brand-primary, #E50914);
    font-size: 15px;
}

.isf-sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.isf-sidebar-social {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.isf-sidebar-social a {
    color: var(--text-muted, #888);
    font-size: 18px;
    transition: color 0.2s;
}

.isf-sidebar-social a:hover {
    color: var(--brand-primary, #E50914);
}

.isf-sidebar-copyright {
    font-size: 11px;
    color: var(--text-muted, #888);
}

/* Sidebar (Related) */
.isf-content-sidebar {
    margin-top: 30px;
}

.isf-sidebar-title {
    font-size: 18px;
    margin-bottom: 16px;
}

.isf-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.isf-related-card {
    border-radius: 6px;
    overflow: hidden;
    transition: transform var(--ease-out), box-shadow var(--ease-out);
}

.isf-related-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.isf-related-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
}

.isf-related-title {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 6px;
    text-align: center;
}
/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.isf-footer {
    background: var(--bg-surface-1, #0e0e11);
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
    padding: 50px 20px 20px;
    margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    color: var(--text-secondary, #cccccc);
}

.isf-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    gap: 40px;
}

.isf-footer-col {}

.isf-footer-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
    letter-spacing: 2px;
}

.isf-footer-tagline {
    font-size: 13px;
    color: var(--text-muted, #888);
    line-height: 1.7;
    margin: 12px 0 16px;
}

.isf-footer-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.isf-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface-3, #222228);
    color: var(--text-secondary, #cccccc);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.isf-social-icon:hover {
    background: var(--brand-primary, #E50914);
    color: #ffffff;
    transform: translateY(-2px);
}

.isf-app-badges h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.isf-app-badge-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.isf-app-badge {
    display: block;
    max-width: 160px;
}

.isf-app-badge img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.isf-app-badge:hover img {
    opacity: 1;
}

.isf-footer-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 8px;
}

.isf-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--brand-primary, #E50914);
    border-radius: 2px;
}

.isf-footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.isf-footer-menu li {
    margin-bottom: 10px;
}

.isf-footer-menu a {
    color: var(--text-muted, #888);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    display: inline-block;
}

.isf-footer-menu a:hover {
    color: var(--text-primary, #ffffff);
    padding-left: 4px;
}

.isf-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}

.isf-footer-newsletter p {
    font-size: 13px;
    color: var(--text-muted, #888);
    margin-bottom: 14px;
    line-height: 1.6;
}

.isf-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.isf-newsletter-form input {
    background: var(--bg-surface-3, #222228);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-primary, #ffffff);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.isf-newsletter-form input:focus {
    border-color: var(--brand-primary, #E50914);
}

.isf-newsletter-form input::placeholder {
    color: var(--text-muted, #888);
}

.isf-newsletter-form button {
    background: var(--brand-primary, #E50914);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.isf-newsletter-form button:hover {
    background: var(--brand-primary-hover, #f40612);
    transform: translateY(-1px);
}

.isf-newsletter-message .success { color: #4caf50; font-size: 13px; }
.isf-newsletter-message .error   { color: #f44336; font-size: 13px; }

.isf-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.isf-footer-badges span {
    font-size: 11px;
    color: var(--text-muted, #888);
    background: var(--bg-surface-3, #222228);
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.isf-footer-bottom {
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.06));
    margin-top: 40px;
    padding-top: 20px;
}

.isf-footer-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.isf-copyright {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.isf-footer-payment-icons {
    display: flex;
    gap: 12px;
    font-size: 24px;
    color: var(--text-muted, #666);
}

/* Back to Top Button */
.isf-back-to-top {
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    width: 42px;
    height: 42px;
    background: var(--brand-primary, #E50914);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.isf-back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.5);
}

/* Footer Responsive */
@media (max-width: 1024px) {
    .isf-footer-container {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .isf-footer-col:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .isf-footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .isf-footer-col:first-child,
    .isf-footer-newsletter {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   9. BOTTOM NAVIGATION (MOBILE)
   ========================================================================== */
.isf-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--app-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    background: var(--glass-bg-dark);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-glass);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 9999;
}

.isf-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 60px;
    height: 100%;
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--ease-out);
    position: relative;
}

.isf-nav-item i {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.isf-nav-item.active {
    color: var(--text-display);
}

.isf-nav-item.active i {
    color: var(--brand-primary);
    transform: scale(1.12);
}

.isf-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 0 0 2px 2px;
}

/* ==========================================================================
   10. RESPONSIVE (DESKTOP & TABLET)
   ========================================================================== */
@media (min-width: 768px) {
    :root {
        --container-px-mobile: 4vw;
    }
    
    .isf-hero-slider {
        height: 90vh;
    }
    
    /* card sizes → master block */
    
    .isf-bottom-nav {
        display: none;
    }
    
    body {
        padding-bottom: 0;
    }
    
    .isf-single-hero {
        height: 60vh;
        min-height: 500px;
    }
    
    .isf-single-body {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
        max-width: 1400px;
        margin: 0 auto;
        padding-top: 40px;
    }
    
    .isf-play-console {
        flex-direction: row;
    }
    
    .isf-btn-massive {
        width: auto;
        padding: 12px 28px;
    }
    
    .isf-poster-floating {
        width: 200px;
        bottom: -80px;
        left: 5vw;
    }
    
    .isf-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* card sizes at 1200px and 1440px → master block at end of file */


/* ==========================================================================
   11. UTILITIES
   ========================================================================== */
.hide-on-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-on-mobile {
        display: block !important;
    }
    button.hide-on-mobile,
    a.hide-on-mobile {
        display: flex !important;
    }
}

.isf-video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.isf-video-modal-content {
    width: 90%;
    height: 80%;
    position: relative;
}

.isf-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 32px;
    cursor: pointer;
    color: var(--text-display);
}
/* Toast Notification */
/* .isf-toast — canonical definition at line ~2641 and theme override at line ~6281 */

/* Card Rating Badge */
.isf-card-rating-badge {
    position: absolute;
    bottom: 40px;
    left: 6px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--rad-sm);
    color: #ffc107;
    border: 1px solid rgba(255,193,7,0.3);
    z-index: 5;
}
.isf-card-rating-badge i { margin-right: 2px; }

/* Trailer Button */
.btn-trailer {
    background: rgba(229,9,20,0.15);
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
}

/* Modal Server Buttons */
.isf-modal-servers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: rgba(0,0,0,0.6);
}
.isf-modal-srv-btn {
    background: var(--bg-surface-3);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: var(--rad-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.isf-modal-srv-btn.active,
.isf-modal-srv-btn:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

/* Tech Specs */
.isf-tech-specs {
    background: var(--bg-surface-1);
    padding: 16px;
    border-radius: var(--rad-md);
    margin: 20px 0;
    font-size: 13px;
}
.isf-tech-specs h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--text-display);
}
.isf-tech-specs ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.isf-tech-specs li {
    color: var(--text-secondary);
}
.isf-tech-specs li strong {
    color: var(--text-display);
}

/* Share Widget */
.isf-share-widget {
    background: var(--bg-surface-2);
    padding: 16px;
    border-radius: var(--rad-md);
    margin-top: 20px;
    display: none;
}
.isf-share-widget h4 {
    font-size: 14px;
    margin-bottom: 12px;
}
.isf-share-icons {
    display: flex;
    gap: 12px;
}
.isf-share-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--rad-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.2s;
}
.isf-share-icon:hover { transform: scale(1.1); }
.isf-share-icon.fb { background: #1877f2; }
.isf-share-icon.tw { background: #1da1f2; }
.isf-share-icon.wa { background: #25d366; }
.isf-share-icon.tg { background: #0088cc; }

/* User Reviews */
.isf-user-reviews {
    margin: 24px 0;
}
.isf-user-reviews h3 {
    font-size: 18px;
    margin-bottom: 16px;
}
.isf-no-comments {
    color: var(--text-tertiary);
    font-size: 14px;
    text-align: center;
    padding: 24px;
    background: var(--bg-surface-1);
    border-radius: var(--rad-md);
}

/* Download mirror button */
.isf-dl-button.isf-mirror {
    background: var(--bg-surface-3);
    border: 1px solid var(--border-glass);
    margin-top: 6px;
}

/* Related Year */
.isf-related-year {
    font-size: 10px;
    color: var(--text-tertiary);
    padding: 0 6px 6px;
    text-align: center;
}

/* No Episodes */
.isf-no-episodes {
    padding: 20px;
    text-align: center;
    color: var(--text-tertiary);
}

/* Load More Button */
.isf-load-more-btn {
    width: 100%;
    padding: 12px;
    margin-top: 16px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-glass);
    border-radius: var(--rad-md);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.isf-load-more-btn:hover {
    background: var(--bg-surface-3);
}

/* Search Modal Styles */
.isf-search-modal {
    position: fixed;
    inset: 0;
    background: rgba(4,4,5,0.97);
    z-index: 15000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}
.isf-search-modal-container {
    width: 100%;
    max-width: 700px;
    padding: 0 20px;
}
.isf-search-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.isf-search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-glass-strong);
    border-radius: 40px;
    padding: 14px 20px;
}
.isf-search-input-wrapper i {
    color: var(--text-tertiary);
    font-size: 18px;
}
.isf-search-input-wrapper input {
    flex: 1;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-display);
}
.isf-search-close {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-glass);
    width: 44px;
    height: 44px;
    border-radius: var(--rad-round);
    font-size: 18px;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.isf-search-categories {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.isf-search-cat {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-glass);
    padding: 8px 16px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.isf-search-cat:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.isf-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
}
.isf-search-card {
    display: block;
    border-radius: var(--rad-md);
    overflow: hidden;
    background: var(--bg-surface-2);
    transition: transform 0.2s;
}
.isf-search-card:hover { transform: scale(1.03); }
.isf-search-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
}
.isf-search-title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    padding: 6px;
    text-align: center;
    color: var(--text-primary);
}
.isf-search-loading, .isf-search-empty, .isf-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
    font-size: 15px;
}

/* Global loader */
.isf-global-loader {
    position: fixed;
    inset: 0;
    background: rgba(4,4,5,0.8);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.isf-loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-glass);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: isf-spin 0.7s linear infinite;
}
@keyframes isf-spin { to { transform: rotate(360deg); } }

/* Notification dropdown */
.isf-notification-bell {
    position: relative;
}
.isf-notification-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--brand-primary);
    border-radius: 50%;
}
.isf-notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-glass);
    border-radius: var(--rad-md);
    overflow: hidden;
    box-shadow: var(--shadow-hard);
    z-index: 999;
}
.isf-notification-header {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--border-glass);
}
.isf-notification-item {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-glass);
    cursor: pointer;
    transition: background 0.2s;
}
.isf-notification-item:hover { background: var(--bg-surface-3); }

/* User dropdown */
.isf-user-dropdown {
    position: relative;
}
.isf-profile-link {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
}
.isf-dropdown-icon {
    font-size: 12px;
    color: var(--text-tertiary);
}
.isf-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 200px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-glass);
    border-radius: var(--rad-md);
    overflow: hidden;
    box-shadow: var(--shadow-hard);
    z-index: 999;
}
.isf-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    transition: background 0.2s;
}
.isf-dropdown-menu a:hover { background: var(--bg-surface-3); color: var(--text-display); }
.isf-dropdown-menu a i { width: 16px; color: var(--brand-primary); }
.isf-dropdown-divider {
    height: 1px;
    background: var(--border-glass);
    margin: 4px 0;
}

/* Login button */
.isf-login-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-primary);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--rad-sm);
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s;
    white-space: nowrap;
}
.isf-login-btn:hover { background: var(--brand-primary-hover); }

/* Dragging state for horizontal rails */
.isf-slider-track { cursor: grab; }
/* NOTE: isf-dragging sirf desktop mouse drag pe lagta hai (JS mein ontouchstart check hai)
   touch-action:pan-x keeps horizontal + allows vertical fallback on hybrid devices */
.isf-slider-track.isf-dragging { cursor: grabbing; user-select: none; touch-action: pan-x; }

/* Desktop nav */
.isf-desktop-nav { display: none; }
@media (min-width: 768px) {
    .isf-desktop-nav { display: flex; }
    .isf-header-left { display: flex; align-items: center; gap: 32px; }
    .isf-header-right { display: flex; align-items: center; gap: 16px; }
}
.isf-desktop-menu {
    display: flex;
    gap: 24px;
    list-style: none;
}
.isf-desktop-menu a {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.isf-desktop-menu a:hover { color: var(--text-display); }

/* Header left/right layout */
.isf-header-left, .isf-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.isf-logo-text {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* ═══════════════════════════════════════════
   SINGLE MOVIE PAGE — COMPLETE REWRITE
═══════════════════════════════════════════ */

/* Wrap */
.isf-single-wrap {
    min-height: 100vh;
    padding-bottom: 80px;
}

/* Hero Backdrop */
.isf-movie-hero {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: #111;
}
.isf-movie-backdrop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: brightness(0.45);
    display: block;
}
.isf-backdrop-placeholder {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.isf-movie-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, var(--bg-base, #040405) 100%);
}

/* Movie Card Wrap */
.isf-movie-card-wrap {
    display: flex;
    gap: 16px;
    padding: 0 16px;
    margin-top: -80px;
    position: relative;
    z-index: 10;
}

/* Poster Column */
.isf-movie-poster-col {
    flex: 0 0 110px;
}
.isf-movie-poster {
    width: 110px;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.8);
    border: 2px solid rgba(255,255,255,0.1);
    display: block;
}
.isf-poster-placeholder {
    width: 110px;
    height: 160px;
    border-radius: 8px;
    background: #1a1a2e;
    border: 2px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255,255,255,0.3);
    font-size: 11px;
    text-align: center;
    padding: 8px;
}
.isf-poster-placeholder i { font-size: 28px; }

/* Info Column */
.isf-movie-info-col {
    flex: 1;
    min-width: 0;
    padding-top: 72px;
}
.isf-movie-title {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 10px;
    color: #fff;
}

/* IMDB + Badges */
.isf-movie-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.isf-imdb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f5c518;
    color: #000;
    border-radius: 4px;
    padding: 3px 8px;
    font-weight: 900;
    font-size: 12px;
}
.isf-imdb-logo {
    font-weight: 900;
    font-size: 11px;
    letter-spacing: -0.5px;
}
.isf-imdb-score {
    font-size: 14px;
    font-weight: 900;
}
.isf-imdb-max {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.7;
}
.isf-badge {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #ccc;
}
.isf-badge i { margin-right: 3px; }
.isf-badge-age {
    border-color: #ff6b35;
    color: #ff6b35;
}
.isf-badge-quality {
    border-color: #00e676;
    color: #00e676;
}

/* Genres */
.isf-movie-genres {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}
.isf-movie-genres a {
    color: #00a8e1;
    text-decoration: none;
}
.isf-movie-genres a:hover { text-decoration: underline; }

/* Synopsis */
.isf-movie-synopsis {
    font-size: 13px;
    line-height: 1.6;
    color: #aaa;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Action Buttons */
.isf-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.isf-btn-play {
    background: #fff;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: transform 0.15s;
}
.isf-btn-play:active { transform: scale(0.97); }
.isf-btn-trailer {
    background: transparent;
    color: #ff0000;
    border: 2px solid #ff0000;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.2s;
}
.isf-btn-trailer:hover { background: rgba(255,0,0,0.1); }
.isf-btn-list {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.isf-btn-list.added {
    border-color: #00e676;
    color: #00e676;
}

/* Cast Info */
.isf-cast-info {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 14px;
    font-size: 12px;
}
.isf-cast-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.isf-cast-row:last-child { margin-bottom: 0; }
.isf-cast-label {
    color: #888;
    flex: 0 0 64px;
    font-weight: 600;
}
.isf-cast-val { color: #ccc; }

/* Star Rating */
.isf-user-rate {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.isf-rate-label {
    font-size: 12px;
    color: #888;
    font-weight: 600;
}
.isf-stars { display: flex; gap: 4px; }
.isf-star {
    font-size: 22px;
    color: #444;
    cursor: pointer;
    transition: color 0.15s, transform 0.1s;
    line-height: 1;
}
.isf-star.active, .isf-star.hover { color: #f5c518; }
.isf-star:active { transform: scale(1.2); }
.isf-rate-avg {
    font-size: 11px;
    color: #888;
}

/* Sections */
.isf-section {
    padding: 20px 16px 0;
}
.isf-section-title {
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
}
.isf-section-title i { color: #e50914; }

/* Download Grid */
.isf-dl-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.isf-dl-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    min-width: 100px;
    flex: 1;
}
.isf-dl-quality {
    font-size: 18px;
    font-weight: 900;
    color: #00e676;
    margin-bottom: 4px;
}
.isf-dl-size {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
}
.isf-dl-btn {
    display: block;
    background: #e50914;
    color: #fff;
    border-radius: 20px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 6px;
    transition: background 0.2s;
}
.isf-dl-btn:hover { background: #f40612; }
.isf-dl-mirror {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
}

/* Card no image */
.isf-card-no-img {
    width: 100%;
    aspect-ratio: 2/3;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    background-size: 200% 200%;
    animation: isf-shimmer 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.15);
    font-size: 32px;
}
/* @keyframes isf-shimmer — deduplicated, see skeleton section */
.isf-card-imdb {
    position: absolute;
    bottom: 38px;
    left: 6px;
    background: rgba(0,0,0,0.8);
    color: #f5c518;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ═══ MODALS ═══ */
.isf-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.isf-modal-inner {
    width: 100%;
    max-width: 900px;
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}
.isf-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
#isfModalBody {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}
#isfModalBody .video-js {
    width: 100% !important;
    height: 100% !important;
}
.isf-trailer-modal-inner {
    background: #000;
}
#isfTrailerBody {
    width: 100%;
    aspect-ratio: 16/9;
}
.isf-srv-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: #111;
}
.isf-srv-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.isf-srv-btn.active, .isf-srv-btn:hover {
    background: #e50914;
    border-color: #e50914;
}

/* ═══ TOAST ═══ */
.isf-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #18181d;
    color: #fff;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    z-index: 99999;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: none;
    white-space: nowrap;
    will-change: transform, opacity;
}
.isf-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ═══ RESPONSIVE ═══ */
@media (min-width: 640px) {
    .isf-movie-hero { height: 350px; }
    .isf-movie-card-wrap { padding: 0 24px; margin-top: -100px; gap: 24px; }
    .isf-movie-poster-col { flex: 0 0 150px; }
    .isf-movie-poster, .isf-poster-placeholder { width: 150px; height: 220px; }
    .isf-movie-info-col { padding-top: 90px; }
    .isf-movie-title { font-size: 26px; }
    .isf-movie-synopsis { -webkit-line-clamp: 6; }
}

/* ═══════════════════════════════════════════════
   NEW FEATURES CSS - v7.1
   Social Share, Report Modal, Extra Info, Search Improvements
   ═══════════════════════════════════════════════ */

/* --- Social Share Bar --- */
.isf-share-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    flex-wrap: wrap;
}
.isf-share-label {
    font-size: 13px;
    color: #aaa;
    margin-right: 4px;
}
.isf-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    transition: transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.isf-share-btn:hover { transform: scale(1.15); opacity: 0.9; }
.isf-share-wa  { background: #25D366; }
.isf-share-tg  { background: #229ED9; }
.isf-share-tw  { background: #1DA1F2; }
.isf-share-fb  { background: #1877F2; }
.isf-share-cp  { background: #555; }
.isf-report-btn {
    background: transparent;
    border: 1px solid #ff4444;
    color: #ff4444;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    margin-left: auto;
    transition: background 0.2s, color 0.2s;
}
.isf-report-btn:hover { background: #ff4444; color: #fff; }

/* --- Extra Info Grid (Language, Subtitle, Country) --- */
.isf-extra-info {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 12px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.isf-info-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.isf-info-key {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.isf-info-val {
    font-size: 13px;
    color: #e0e0e0;
    font-weight: 500;
}

/* --- Report Modal --- */
.isf-report-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.isf-report-modal {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 28px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.isf-report-modal h3 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 16px;
}
#isfReportReason {
    width: 100%;
    padding: 10px;
    background: #111;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 16px;
}
.isf-report-btns { display: flex; gap: 10px; margin-bottom: 10px; }
.isf-btn-report-submit {
    background: #e50914;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
}
.isf-btn-cancel {
    background: rgba(255,255,255,0.08);
    color: #ccc;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
}

/* --- Improved Search Card --- */
.isf-search-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.isf-search-card:hover { background: rgba(255,255,255,0.07); }
.isf-search-card img {
    width: 48px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #1a1a2e;
}
.isf-search-info { display: flex; flex-direction: column; gap: 4px; }
.isf-search-title { font-size: 14px; font-weight: 600; color: #fff; }
.isf-search-meta  { font-size: 12px; color: #aaa; }

/* --- Search Empty / Loading state --- */
.isf-search-empty {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-size: 15px;
}

/* --- View Count badge (optional, shown in admin) --- */
.isf-view-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #aaa;
}

/* --- Recent Search Terms --- */
.isf-recent-searches { margin-top: 16px; }
.isf-recent-searches h4 { font-size: 12px; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.isf-recent-list { display: flex; flex-wrap: wrap; gap: 6px; }
.isf-recent-term {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.isf-recent-term:hover { background: rgba(229,9,20,0.2); border-color: #e50914; color: #fff; }

/* --- Keyboard Shortcut hint in search --- */
.isf-search-shortcut-hint {
    font-size: 11px;
    color: #555;
    text-align: center;
    margin-top: 8px;
}

/* ================================================================
   ARCHIVE PAGE — MISSING STYLES FIX
   ================================================================ */

/* Archive Hero Banner */
.isf-archive-hero {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #0d0d1a;
}
.isf-archive-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    filter: blur(4px);
}
.isf-archive-hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 16px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.isf-archive-title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.isf-archive-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin: 0 0 10px;
    line-height: 1.5;
}
.isf-archive-stats {
    font-size: 12px;
    color: var(--accent, #e50914);
    font-weight: 600;
}

/* Archive Container */
.isf-archive-container {
    padding: 0 12px 80px;
}

/* Filter Bar */
.isf-filter-bar {
    background: var(--bg-surface, #111);
    border-radius: 12px;
    padding: 12px;
    margin: 14px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.isf-filter-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.isf-filter-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.isf-select-wrapper {
    position: relative;
    flex: 1;
    min-width: 120px;
}
.isf-select-wrapper select {
    width: 100%;
    padding: 8px 28px 8px 10px;
    background: var(--bg-surface-2, #1a1a2e);
    color: var(--text-primary, #fff);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 13px;
    appearance: none;
    cursor: pointer;
}
.isf-select-wrapper i {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
}
.isf-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.isf-result-count {
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}
.isf-reset-btn {
    font-size: 12px;
    color: var(--accent, #e50914);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* View Switcher */
.isf-view-switcher {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.isf-view-btn {
    background: var(--bg-surface-2, #1a1a2e);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.isf-view-btn.active,
.isf-view-btn:hover {
    background: var(--accent, #e50914);
    color: #fff;
    border-color: var(--accent, #e50914);
}

/* Archive Grid */
.isf-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
@media (min-width: 480px) {
    .isf-archive-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (min-width: 768px) {
    .isf-archive-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}
@media (min-width: 1200px) {
    .isf-archive-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; }
}

/* Movie Card (Grid) */
.isf-movie-card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-surface-2, #1a1a2e);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.isf-movie-card:hover { transform: scale(1.05); box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
.isf-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.isf-movie-card img,
.isf-movie-card .isf-card-no-img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}
.isf-card-info {
    padding: 8px 8px 10px;
}
.isf-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.isf-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.isf-card-year,
.isf-card-duration,
.isf-card-rating {
    font-size: 10px;
    color: var(--text-tertiary, #666);
}
.isf-card-rating { color: #f5c518; }

/* Quick Watch Button */
.isf-quick-watch {
    display: none;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent, #e50914);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    gap: 4px;
    align-items: center;
}
.isf-movie-card:hover .isf-quick-watch { display: flex; }

/* List View */
.isf-archive-view.list-view .isf-archive-grid {
    grid-template-columns: 1fr;
}
.isf-archive-view.list-view .grid-card { display: none; }
.isf-archive-view.grid-view .list-card { display: none !important; }
.isf-archive-view.list-view .list-card { display: flex !important; }

.list-card .isf-list-link {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    padding: 10px;
    width: 100%;
}
.list-thumb {
    width: 70px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.list-info { flex: 1; min-width: 0; }
.list-info h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-tertiary, #666);
    margin-bottom: 5px;
}
.list-excerpt {
    font-size: 12px;
    color: var(--text-secondary, #aaa);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Load More */
.isf-load-more-container {
    text-align: center;
    padding: 20px 0 10px;
}

/* Empty State */
.isf-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary, #aaa);
}
.isf-empty-state i {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.1);
}
.isf-empty-state h3 {
    font-size: 18px;
    color: var(--text-primary, #fff);
    margin-bottom: 8px;
}

/* Pagination */
.isf-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 16px 0;
    flex-wrap: wrap;
}
.isf-pagination a,
.isf-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-surface-2, #1a1a2e);
    color: var(--text-primary, #fff);
    text-decoration: none;
    transition: background 0.2s;
}
.isf-pagination span.current,
.isf-pagination a:hover {
    background: var(--accent, #e50914);
    color: #fff;
}

/* Quick Modal */
.isf-quick-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    align-items: flex-end;
    justify-content: center;
}
.isf-quick-modal.open { display: flex; }
.isf-quick-modal-content {
    background: var(--bg-surface, #111);
    border-radius: 16px 16px 0 0;
    padding: 20px 16px 40px;
    width: 100%;
    max-width: 600px;
    animation: slideUp 0.25s ease;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.isf-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 20px;
    cursor: pointer;
    float: right;
    padding: 0;
    line-height: 1;
}

/* ================================================================
   SERIES ARCHIVE — MISSING STYLES FIX
   ================================================================ */

.isf-series-archive {
    padding-bottom: 80px;
}

/* Series card — same structure as movie card */
.isf-series-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-surface-2, #1a1a2e);
    transition: transform 0.2s;
}
.isf-series-card:hover { transform: scale(1.03); }
.isf-series-card .isf-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.isf-series-card img,
.isf-series-card .isf-card-no-img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}

/* Network & Seasons badges */
.isf-card-network {
    font-size: 10px;
    color: var(--accent, #e50914);
    font-weight: 600;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.isf-card-seasons {
    font-size: 10px;
    color: var(--text-tertiary, #666);
}

/* List view Watch Now button */
.list-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #e50914);
}

/* Series list-view toggle (reuse movie rules but scoped to series) */
.isf-archive-view.list-view .isf-series-card.grid-card { display: none; }
.isf-archive-view.grid-view .isf-series-card.list-card { display: none !important; }
.isf-archive-view.list-view .isf-series-card.list-card { display: flex !important; }

/* ===========================================
   COMMENT FORM & COMMENT LIST – Full Styles
   =========================================== */

/* Wrapper */
#respond,
.comment-respond {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 28px 24px;
    margin-top: 24px;
}

/* Title */
#respond h3#reply-title,
.comment-respond h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-glass);
    display: flex;
    align-items: center;
    gap: 8px;
}
#respond h3#reply-title::before {
    content: "✍️";
    font-size: 16px;
}

/* "Required fields" note */
.comment-notes,
.comment-form .required-field-message {
    color: rgba(240,240,240,0.45);
    font-size: 12px;
    margin-bottom: 16px;
}
.comment-form .required {
    color: #e50914;
}

/* All form fields */
.comment-form p {
    margin-bottom: 16px;
}
.comment-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(240,240,240,0.7);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Text inputs & textarea */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
#comment,
#author,
#email,
#url {
    width: 100%;
    background: var(--bg-surface-3);
    border: 1px solid var(--border-glass-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    padding: 12px 14px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
    outline: none;
    -webkit-appearance: none;
}
.comment-form textarea,
#comment {
    min-height: 120px;
    line-height: 1.6;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus,
#comment:focus,
#author:focus,
#email:focus {
    border-color: #e50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}
.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: rgba(240,240,240,0.3);
}

/* Submit button */
.comment-form input[type="submit"],
.comment-form #submit,
#commentform #submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e50914;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    -webkit-appearance: none;
}
.comment-form input[type="submit"]:hover,
.comment-form #submit:hover,
#commentform #submit:hover {
    background: #c40812;
}
.comment-form input[type="submit"]:active {
    transform: scale(0.98);
}

/* Cookies consent checkbox */
.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.comment-form-cookies-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #e50914;
    cursor: pointer;
    flex-shrink: 0;
}
.comment-form-cookies-consent label {
    font-size: 12px;
    color: rgba(240,240,240,0.5);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

/* Cancel reply link */
#cancel-comment-reply-link {
    font-size: 12px;
    color: rgba(240,240,240,0.45);
    text-decoration: none;
    margin-left: 10px;
    transition: color 0.2s;
}
#cancel-comment-reply-link:hover {
    color: #e50914;
}

/* ---- Comment List ---- */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}
.comment-list .comment,
.comment-list .pingback {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-glass);
}
.comment-list .comment:last-child {
    border-bottom: none;
}
.comment-author .avatar {
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    vertical-align: middle;
    margin-right: 10px;
    border: 2px solid var(--border-glass-strong);
}
.comment-author .fn {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.comment-author .fn a {
    color: var(--text-primary);
    text-decoration: none;
}
.comment-metadata {
    font-size: 12px;
    color: rgba(240,240,240,0.4);
    margin: 4px 0 10px;
}
.comment-metadata a {
    color: inherit;
    text-decoration: none;
}
.comment-content p {
    font-size: 14px;
    color: rgba(240,240,240,0.8);
    line-height: 1.6;
    margin: 0;
}
.reply a {
    font-size: 12px;
    color: #e50914;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}
.reply a:hover {
    opacity: 0.8;
}
.comment-list .children {
    list-style: none;
    padding-left: 20px;
    margin-top: 12px;
    border-left: 2px solid var(--border-glass);
}

/* Awaiting moderation */
.comment-awaiting-moderation {
    font-size: 12px;
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
    border-radius: 4px;
    padding: 4px 8px;
    display: inline-block;
    margin-bottom: 8px;
}

/* No comments message */
.isf-no-comments {
    text-align: center;
    padding: 32px 16px;
    color: rgba(240,240,240,0.4);
    font-size: 14px;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    #respond,
    .comment-respond {
        padding: 20px 16px;
    }
    .comment-form input[type="submit"],
    #commentform #submit {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================
   ARCHIVE PAGE – OPTIMIZATION v2
   =========================================== */

/* --- Filter Select dropdown arrow --- */
.isf-select-wrapper select {
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.isf-select-wrapper select:focus {
    border-color: rgba(229,9,20,0.6);
    box-shadow: 0 0 0 2px rgba(229,9,20,0.12);
}
.isf-select-wrapper i.fa-chevron-down {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255,255,255,0.45);
    font-size: 10px;
}

/* --- Grid Card – improved hover + image ratio --- */
.isf-movie-card.grid-card {
    background: var(--bg-surface-2, #18181d);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-glass, rgba(255,255,255,0.06));
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
}
.isf-movie-card.grid-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(229,9,20,0.35);
    box-shadow: 0 8px 28px rgba(229,9,20,0.18);
}
.isf-movie-card.grid-card img,
.isf-series-card.grid-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}

/* --- List Card – improved layout --- */
.isf-movie-card.list-card,
.isf-series-card.list-card {
    background: var(--bg-surface-2, #18181d);
    border-radius: 10px;
    border: 1px solid var(--border-glass, rgba(255,255,255,0.06));
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 10px;
    width: 100%;
}
.isf-movie-card.list-card:hover,
.isf-series-card.list-card:hover {
    border-color: rgba(229,9,20,0.3);
    background: var(--bg-surface-3, #222228);
}
.list-card .isf-list-link {
    padding: 12px;
    gap: 14px;
    align-items: center;
}
.list-thumb {
    width: 72px;
    min-width: 72px;
    height: 108px;
    border-radius: 7px;
    object-fit: cover;
    border: 1px solid var(--border-glass, rgba(255,255,255,0.06));
    background: var(--bg-surface-3, #222228);
}
.list-info h3 {
    font-size: 15px;
    line-height: 1.3;
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.list-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    color: rgba(240,240,240,0.65);
}
.list-meta .isf-card-quality {
    font-size: 10px;
    padding: 2px 6px;
}
.list-meta .fas.fa-star {
    color: #f59e0b;
}

/* --- Load More button --- */
.isf-load-more-btn {
    background: var(--bg-surface-3, #222228);
    border: 1px solid var(--border-glass-strong, rgba(255,255,255,0.15));
    color: var(--text-primary, #f0f0f0);
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.isf-load-more-btn:hover {
    background: #e50914;
    border-color: #e50914;
    color: #fff;
}

/* --- Empty state --- */
.isf-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(240,240,240,0.4);
}
.isf-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: rgba(229,9,20,0.4);
}
.isf-empty-state h2 {
    color: var(--text-primary, #f0f0f0);
    margin-bottom: 8px;
    font-size: 20px;
}
.isf-empty-state p {
    font-size: 14px;
    max-width: 320px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

/* --- Quick Watch button refinement --- */
.isf-quick-watch {
    background: rgba(229,9,20,0.9);
    color: #fff;
    border: none;
    border-radius: 0 0 10px 10px;
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.isf-quick-watch:hover {
    background: rgba(196,8,17,1);
}

/* --- Pagination refinement --- */
.isf-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 32px 0 16px;
}
.isf-pagination a,
.isf-pagination span {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}
.isf-pagination .current,
.isf-pagination a:hover {
    background: #e50914 !important;
    color: #fff !important;
    border-color: #e50914 !important;
}

/* --- Mobile tweaks for archive --- */
@media (max-width: 480px) {
    .isf-filter-group {
        flex-direction: column;
    }
    .isf-filter-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .isf-result-count {
        font-size: 12px;
    }
    .isf-archive-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }
    .list-thumb {
        width: 65px;
        min-width: 65px;
        height: 97px;
    }
    .list-info h3 { font-size: 13px; }
}

/* ================================================================
   LAZY LOADING – Fade-in shimmer effect
================================================================ */
img.isf-lazy {
    opacity: 0;
    transition: opacity 0.4s ease;
    background: linear-gradient(90deg, #1a1a1f 25%, #222228 50%, #1a1a1f 75%);
    background-size: 200% 100%;
    animation: isf-shimmer 1.4s infinite;
}
img.isf-lazy-loading {
    opacity: 0;
}
img.isf-lazy-loaded {
    animation: isf-fade-in 0.35s ease forwards;
    opacity: 1;
    animation: none;
    background: none;
}
@keyframes isf-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================
   AUTH MODAL – Login / Signup
================================================================ */
.isf-auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 99998;
}

.isf-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.isf-auth-modal > * { position: relative; }

/* Card container */
.isf-auth-modal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    min-height: 480px;
    background: linear-gradient(160deg, #16161e 0%, #0f0f14 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(229,9,20,0.12);
}

/* Wrapper for modal content */
#isfAuthModal {
    flex-direction: column;
    gap: 0;
}

#isfAuthModal > *:not(.isf-auth-overlay) {
    width: min(420px, calc(100vw - 32px));
    position: relative;
    z-index: 1;
}

/* Close button */
.isf-auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    z-index: 10;
    align-self: flex-end;
    margin-bottom: -52px;
    margin-right: 0;
}
.isf-auth-close:hover { background: rgba(229,9,20,0.2); color: #fff; border-color: rgba(229,9,20,0.5); }

/* Brand */
.isf-auth-brand {
    text-align: center;
    padding: 32px 32px 0;
}
.isf-auth-brand img,
.isf-auth-brand .custom-logo { max-height: 40px; width: auto; }
.isf-auth-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: #E50914;
    letter-spacing: 1px;
    display: block;
}
.isf-auth-tagline {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    margin: 6px 0 0;
}

/* Tabs */
.isf-auth-tabs {
    display: flex;
    gap: 0;
    padding: 24px 32px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 0;
}
.isf-auth-tab {
    flex: 1;
    padding: 10px 0 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    letter-spacing: 0.3px;
}
.isf-auth-tab.active,
.isf-auth-tab:hover {
    color: #fff;
}
.isf-auth-tab.active {
    border-bottom-color: #E50914;
    color: #fff;
}

/* Alert */
.isf-auth-alert {
    margin: 12px 32px 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.isf-auth-alert--error   { background: rgba(229,9,20,0.15); border: 1px solid rgba(229,9,20,0.3); color: #ff6b6b; }
.isf-auth-alert--success { background: rgba(39,174,96,0.15); border: 1px solid rgba(39,174,96,0.3); color: #6fcf97; }

/* Panels */
.isf-auth-panel { padding: 20px 32px 32px; }

/* Fields */
.isf-auth-field {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    transition: border-color 0.2s, background 0.2s;
    overflow: hidden;
}
.isf-auth-field:focus-within {
    border-color: rgba(229,9,20,0.5);
    background: rgba(255,255,255,0.07);
}
.isf-auth-field label {
    width: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    pointer-events: none;
}
.isf-auth-field input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    padding: 13px 0;
    font-family: inherit;
}
.isf-auth-field input::placeholder { color: rgba(255,255,255,0.25); }

/* Password eye toggle */
.isf-auth-eye {
    width: 40px;
    min-width: 40px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s;
}
.isf-auth-eye:hover { color: rgba(255,255,255,0.7); }

/* Row (remember + forgot) */
.isf-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 12px;
}
.isf-auth-check {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
}
.isf-auth-check input { accent-color: #E50914; }
.isf-auth-forgot { color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; }
.isf-auth-forgot:hover { color: #E50914; }

/* Submit button */
.isf-auth-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #E50914 0%, #b8000d 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.3px;
}
.isf-auth-submit:hover { background: linear-gradient(135deg, #ff1a26 0%, #cc0011 100%); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(229,9,20,0.4); }
.isf-auth-submit:active { transform: translateY(0); }
.isf-auth-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Registration disabled */
.isf-auth-disabled {
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    text-align: center;
    padding: 12px 0;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .isf-auth-brand,
    .isf-auth-tabs,
    .isf-auth-panel { padding-left: 20px; padding-right: 20px; }
    .isf-auth-alert { margin-left: 20px; margin-right: 20px; }
}

/* ================================================================
   SIDEBAR AUTH CTA BUTTONS (Mobile Sign In / Create Account)
================================================================ */
.isf-sidebar-auth-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.isf-sidebar-signin-btn,
.isf-sidebar-signup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.15s;
    font-family: var(--font-sans);
}

.isf-sidebar-signin-btn {
    background: var(--brand-primary, #E50914);
    color: #fff;
}

.isf-sidebar-signin-btn:hover,
.isf-sidebar-signin-btn:active {
    background: var(--brand-primary-hover, #f40612);
    transform: translateY(-1px);
}

.isf-sidebar-signup-btn {
    background: rgba(255,255,255,0.07);
    color: var(--text-primary, #f0f0f0);
    border: 1px solid rgba(255,255,255,0.12);
}

.isf-sidebar-signup-btn:hover,
.isf-sidebar-signup-btn:active {
    background: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

/* Search modal initial state managed by CSS visibility class */
#isfSearchModal {
    display: flex !important; /* always in flow */
}

/* ================================================================
   NEW FEATURES CSS — v8.0.0
   1. Push Notification UI
   2. User Dashboard
   3. Recommendation Cards
   4. Dashboard Charts / Admin
================================================================ */

/* ── Push Notification Banner ─────────────────────────────────── */
.isf-push-banner {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    background: linear-gradient(135deg, #0e0e11, #18181d);
    border: 1px solid rgba(229,9,20,.4);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 9999;
    max-width: 420px;
    width: calc(100% - 32px);
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    transition: transform .4s cubic-bezier(.175,.885,.32,1.275);
    pointer-events: none;
}
.isf-push-banner.visible {
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
}
.isf-push-banner-icon {
    width: 44px; height: 44px;
    background: rgba(229,9,20,.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #E50914; font-size: 18px;
    flex-shrink: 0;
}
.isf-push-banner-text { flex: 1; }
.isf-push-banner-text strong { display:block; color:#fff; font-size:14px; margin-bottom:3px; }
.isf-push-banner-text span { color:#a3a3b3; font-size:12px; }
.isf-push-banner-btns { display:flex; gap:8px; flex-shrink:0; }
.isf-push-allow-btn {
    background: #E50914; color:#fff; border:none;
    border-radius: 8px; padding: 8px 16px;
    font-size: 12px; font-weight:700; cursor:pointer;
    transition: .2s;
}
.isf-push-allow-btn:hover { background: #c40812; }
.isf-push-deny-btn {
    background: transparent; color:#6b6b7a; border:1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: 8px 12px;
    font-size: 12px; cursor:pointer; transition: .2s;
}
.isf-push-deny-btn:hover { color:#fff; border-color:rgba(255,255,255,.3); }

/* ── User Dashboard Page ──────────────────────────────────────── */
.isf-dash-page { min-height: 100vh; padding-bottom: 80px; }

.isf-dash-hero {
    background: linear-gradient(180deg, rgba(229,9,20,.08) 0%, transparent 100%),
                linear-gradient(135deg, #0a0a0d 0%, #12121a 100%);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 48px 24px 40px;
}
.isf-dash-hero-inner {
    max-width: 900px; margin: 0 auto;
    display: flex; align-items: center; gap: 28px;
    flex-wrap: wrap;
}
.isf-dash-avatar-wrap {
    position: relative; flex-shrink:0;
}
.isf-dash-avatar-wrap img {
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 3px solid rgba(229,9,20,.5);
    object-fit: cover;
}
.isf-dash-avatar-edit {
    position: absolute; bottom:0; right:0;
    width: 28px; height: 28px;
    background: #E50914; border-radius: 50%;
    display: flex; align-items:center; justify-content:center;
    cursor: pointer; color: #fff; font-size: 12px;
}
.isf-dash-hero-info { flex: 1; min-width: 200px; }
.isf-dash-username { font-size: 24px; font-weight: 800; color:#fff; margin:0 0 6px; }
.isf-dash-email, .isf-dash-joined { font-size: 13px; color:#6b6b7a; margin: 2px 0; }
.isf-dash-email i, .isf-dash-joined i { margin-right: 6px; color:#a3a3b3; }
.isf-dash-hero-stats {
    display: flex; gap: 24px; margin-top: 16px;
}
.isf-dash-hero-stat { text-align: center; }
.isf-dash-hero-stat-val {
    display: block; font-size: 22px; font-weight: 800; color:#fff;
}
.isf-dash-hero-stat-lbl {
    display: block; font-size: 11px; color:#6b6b7a; margin-top: 2px;
    text-transform: uppercase; letter-spacing:.5px;
}

/* ── Tabs ── */
.isf-dash-tabs-wrap {
    background: #0a0a0d;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky; top: 60px; z-index: 100;
}
.isf-dash-tabs {
    max-width: 900px; margin: 0 auto;
    display: flex; gap: 0; overflow-x: auto;
    scrollbar-width: none;
}
.isf-dash-tabs::-webkit-scrollbar { display:none; }
.isf-dash-tab {
    padding: 14px 20px;
    background: none; border:none;
    color: #6b6b7a; font-size:13px; font-weight:600;
    cursor: pointer; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: .2s; display:flex; align-items:center; gap:6px;
}
.isf-dash-tab:hover { color:#fff; }
.isf-dash-tab.active { color:#fff; border-bottom-color:#E50914; }
.isf-dash-tab-count {
    background: #E50914; color:#fff;
    border-radius: 10px; padding: 1px 7px;
    font-size: 10px; font-weight: 700;
}

/* ── Panel Content ── */
.isf-dash-content { max-width: 900px; margin: 0 auto; padding: 32px 20px; }
.isf-dash-panel { display:none; }
.isf-dash-panel.active { display:block; }
.isf-dash-section-title {
    font-size: 11px; font-weight:700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: #6b6b7a; margin-bottom: 16px;
}

/* ── Stat Cards ── */
.isf-dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.isf-dash-stat-card {
    background: #0e0e11;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    transition: .2s;
}
.isf-dash-stat-card:hover { transform: translateY(-2px); }
.isf-dash-stat-card i {
    font-size: 24px; color: var(--c, #E50914);
    margin-bottom: 10px; display:block;
}
.isf-dash-stat-val { font-size: 28px; font-weight: 800; color:#fff; }
.isf-dash-stat-lbl { font-size: 12px; color:#6b6b7a; margin-top: 4px; }

/* ── Genre Chart ── */
.isf-dash-genre-chart-wrap {
    display: flex; align-items:center; gap: 24px;
    background: #0e0e11; border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px; padding: 20px; flex-wrap:wrap;
}
.isf-dash-genre-chart-wrap canvas { max-width:180px; max-height:180px; }
.isf-dash-genre-legend { flex:1; display:flex; flex-direction:column; gap:8px; }
.isf-genre-legend-item {
    display: flex; align-items:center; gap: 8px;
    font-size: 13px; color: #a3a3b3;
}
.isf-genre-legend-item span {
    width: 12px; height: 12px; border-radius: 3px; flex-shrink:0;
}

/* ── Dashboard Card Grid ── */
.isf-dash-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.isf-dash-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #0e0e11;
    border: 1px solid rgba(255,255,255,.07);
    transition: .2s;
}
.isf-dash-card:hover { transform:translateY(-3px); border-color:rgba(229,9,20,.3); }
.isf-dash-card img {
    width:100%; aspect-ratio:2/3;
    object-fit:cover; display:block;
}
.isf-dash-card-noimg {
    width:100%; aspect-ratio:2/3;
    background:#18181d; display:flex;
    align-items:center; justify-content:center;
    font-size:32px; color:#3a3a4a;
}
.isf-dash-progress-bar {
    position:absolute; bottom:36px; left:0; right:0;
    height:3px; background:rgba(255,255,255,.1);
}
.isf-dash-progress-fill { height:100%; background:#E50914; }
.isf-dash-card-info {
    padding: 8px 10px;
}
.isf-dash-card-type {
    font-size:9px; font-weight:700; text-transform:uppercase;
    color:#E50914; letter-spacing:.5px;
}
.isf-dash-card-title {
    font-size:12px; color:#fff; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-top:2px;
}
.isf-dash-card-year { font-size:11px; color:#6b6b7a; }
.isf-wl-remove-btn {
    position:absolute; top:6px; right:6px;
    width:24px; height:24px; border-radius:50%;
    background:rgba(229,9,20,.8); border:none;
    color:#fff; font-size:10px; cursor:pointer;
    display:none; align-items:center; justify-content:center;
    transition: .2s;
}
.isf-dash-card:hover .isf-wl-remove-btn { display:flex; }

/* ── Empty state ── */
.isf-dash-empty {
    grid-column: 1/-1; text-align:center;
    padding: 60px 20px; color:#6b6b7a;
}
.isf-dash-empty i { font-size:40px; display:block; margin-bottom:12px; }
.isf-dash-loading { grid-column:1/-1; text-align:center; padding:40px; color:#6b6b7a; }

/* ── Pagination ── */
.isf-pager { display:flex; gap:6px; justify-content:center; margin-top:20px; }
.isf-pager-btn {
    width:32px; height:32px; border-radius:6px;
    background:#0e0e11; border:1px solid rgba(255,255,255,.1);
    color:#a3a3b3; cursor:pointer; transition:.2s; font-size:12px;
}
.isf-pager-btn.active { background:#E50914; border-color:#E50914; color:#fff; }
.isf-pager-btn:hover:not(.active) { border-color:rgba(255,255,255,.3); color:#fff; }

/* ── Panel head (history/watchlist) ── */
.isf-dash-panel-head {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.isf-dash-clear-btn {
    background: rgba(229,9,20,.1); border:1px solid rgba(229,9,20,.3);
    color:#E50914; border-radius:8px; padding:7px 14px;
    font-size:12px; cursor:pointer; transition:.2s;
}
.isf-dash-clear-btn:hover { background:rgba(229,9,20,.2); }
.isf-dash-count-badge {
    background:rgba(255,255,255,.07); color:#a3a3b3;
    border-radius:20px; padding:3px 12px; font-size:12px;
}

/* ── Profile Form ── */
.isf-dash-profile-form-wrap { max-width: 560px; }
.isf-dash-form-row { margin-bottom: 18px; }
.isf-dash-form-row label {
    display:block; font-size:12px; color:#a3a3b3;
    font-weight:600; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;
}
.isf-dash-form-row input,
.isf-dash-form-row textarea {
    width:100%; background:#0e0e11;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px; padding:11px 14px;
    color:#fff; font-size:14px; transition:.2s;
}
.isf-dash-form-row input:focus,
.isf-dash-form-row textarea:focus {
    outline:none; border-color:rgba(229,9,20,.5);
    box-shadow:0 0 0 3px rgba(229,9,20,.1);
}
.isf-dash-form-row input:disabled { opacity:.4; cursor:not-allowed; }
.isf-dash-form-row small { display:block; font-size:11px; color:#6b6b7a; margin-top:5px; }
.isf-dash-form-row textarea { resize:vertical; min-height:90px; }
.isf-dash-divider { border:none; border-top:1px solid rgba(255,255,255,.06); margin:24px 0; }
.isf-dash-save-btn {
    background:linear-gradient(135deg,#E50914,#b30710);
    color:#fff; border:none; border-radius:10px;
    padding:12px 28px; font-size:14px; font-weight:700;
    cursor:pointer; display:flex; align-items:center; gap:8px;
    transition:.2s;
}
.isf-dash-save-btn:hover { opacity:.9; transform:translateY(-1px); }
.isf-dash-alert {
    padding:10px 16px; border-radius:10px; font-size:13px; margin-bottom:16px;
}
.isf-alert-success { background:rgba(0,230,118,.1); color:#00e676; border:1px solid rgba(0,230,118,.2); }
.isf-alert-error   { background:rgba(229,9,20,.1);  color:#E50914; border:1px solid rgba(229,9,20,.2); }

/* ── Notifications Tab ── */
.isf-dash-notif-box {
    background:#0e0e11; border:1px solid rgba(255,255,255,.07);
    border-radius:16px; padding:40px; text-align:center; max-width:480px;
}
.isf-dash-notif-icon { font-size:48px; color:#E50914; margin-bottom:16px; }
.isf-dash-notif-box h3 { font-size:20px; color:#fff; margin:0 0 8px; }
.isf-dash-notif-box p { color:#a3a3b3; font-size:14px; margin-bottom:24px; }
.isf-dash-notif-btn {
    background:linear-gradient(135deg,#E50914,#b30710);
    color:#fff; border:none; border-radius:10px;
    padding:12px 28px; font-size:14px; font-weight:700;
    cursor:pointer; transition:.2s; display:inline-flex;
    align-items:center; gap:8px;
}
.isf-dash-notif-btn:hover { opacity:.9; }
.isf-dash-notif-btn.active { background:linear-gradient(135deg,#333,#1a1a1a); }
.isf-dash-notif-status { margin-top:14px; font-size:13px; }
.isf-dash-notif-list {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:12px;
}
.isf-dash-notif-list li {
    display:flex; align-items:center; gap:12px;
    font-size:14px; color:#a3a3b3;
    background:#0e0e11; border:1px solid rgba(255,255,255,.07);
    border-radius:10px; padding:12px 16px;
}
.isf-dash-notif-list li i { color:#E50914; width:18px; }

/* ── Recommendation Cards ── */
.isf-reco-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap:14px;
}
.isf-reco-card { position:relative; }
.isf-reco-tag {
    position:absolute; top:8px; left:8px; z-index:2;
    background:rgba(229,9,20,.85);
    color:#fff; font-size:10px; font-weight:700;
    padding:3px 8px; border-radius:20px;
    display:flex; align-items:center; gap:4px;
    backdrop-filter:blur(4px);
}
.isf-reco-popular { background:rgba(245,165,0,.85) !important; color:#000 !important; }
.isf-card-type-badge {
    font-size:9px; font-weight:700; text-transform:uppercase;
    letter-spacing:.5px; color:#E50914;
}

/* ── Recommendation section on single pages ── */
.isf-reco-section { margin: 40px 0; }
.isf-reco-section-title {
    font-size:18px; font-weight:800; color:#fff;
    margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.isf-reco-section-title::before {
    content:''; display:block;
    width:4px; height:22px; background:#E50914; border-radius:2px;
}

/* ── Dashboard header link ── */
.isf-dropdown-menu a[href*="dashboard"] { color:#E50914 !important; }

/* ================================================================
   NEW FEATURES — v7.5.0
   Top 10, Mood Discovery, Quick Preview Modal,
   Trending Badges, Newsletter Subscribe
================================================================ */

/* ── TOP 10 RANKED ROW ── */
.isf-top10-row { padding-bottom: 8px; }

.isf-top10-card {
    flex: 0 0 166px;
    position: relative;
}

.isf-top10-rank {
    position: absolute;
    bottom: 30px;
    left: -12px;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,0.18);
    text-stroke: 2px rgba(255,255,255,0.18);
    z-index: 4;
    pointer-events: none;
    user-select: none;
    letter-spacing: -4px;
}

.isf-top10-card:hover .isf-top10-rank {
    -webkit-text-stroke-color: rgba(229,9,20,0.6);
}

/* ── MOOD-BASED DISCOVERY ── */
.isf-mood-section {
    padding: 24px 16px 0;
    position: relative;
}

.isf-mood-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 16px;
}

.isf-mood-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 40px;
    background: var(--bg-surface-2);
    border: 1.5px solid var(--bg-surface-3);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
    text-decoration: none;
}

.isf-mood-pill:hover {
    border-color: var(--brand-primary);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.isf-mood-pill.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 4px 20px var(--brand-primary-glow);
}

.isf-mood-emoji { font-size: 18px; line-height: 1; }

.isf-mood-results {
    display: none;
    min-height: 180px;
}

.isf-mood-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.isf-mood-empty {
    text-align: center;
    padding: 30px;
    color: var(--text-tertiary);
    font-style: italic;
}

/* ── QUICK PREVIEW MODAL ── */
.isf-quick-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.isf-quick-preview-modal.visible {
    opacity: 1;
    pointer-events: all;
}

.isf-qp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
}

.isf-qp-inner {
    position: relative;
    z-index: 1;
    background: var(--bg-surface-2);
    border-radius: 16px;
    overflow: hidden;
    max-width: 680px;
    width: calc(100% - 32px);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8);
    transform: scale(0.92) translateY(20px);
    transition: transform 0.3s var(--ease-out);
}

.isf-quick-preview-modal.visible .isf-qp-inner {
    transform: scale(1) translateY(0);
}

.isf-qp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0,0,0,0.6);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.isf-qp-close:hover { background: var(--brand-primary); }

.isf-qp-media {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}

.isf-qp-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.isf-qp-media iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.isf-qp-body {
    padding: 20px;
}

.isf-qp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.isf-qp-type-badge,
.isf-qp-quality-badge,
.isf-qp-age-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.isf-qp-type-badge    { background: var(--brand-primary);   color: #fff; }
.isf-qp-quality-badge { background: var(--ui-success);       color: #000; }
.isf-qp-age-badge     { background: var(--bg-surface-3);    color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.15); }

.isf-qp-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.2;
}

.isf-qp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.isf-qp-meta span { display: flex; align-items: center; gap: 5px; }
.isf-qp-genres { color: var(--text-tertiary); font-style: italic; }

.isf-qp-synopsis {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

.isf-qp-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.isf-qp-play-btn {
    font-size: 14px;
    padding: 10px 24px;
}

.isf-qp-watchlist-btn {
    font-size: 13px;
    padding: 10px 18px;
}

/* Loading spinner overlay on modal */
.isf-quick-preview-modal.loading .isf-qp-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

/* Prevent body scroll when modal open */
body.isf-modal-open { overflow: hidden; }

/* ── TRENDING / HOT BADGES ── */
.isf-card-badge.badge-trending {
    background: linear-gradient(135deg, #ff6b00, #ff9500);
    color: #fff;
}

.isf-card-badge.badge-hot {
    background: linear-gradient(135deg, #e50914, #ff4d4d);
    color: #fff;
    animation: isf-pulse-badge 1.8s ease-in-out infinite;
}

@keyframes isf-pulse-badge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,9,20,0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(229,9,20,0); }
}

/* ── EMAIL NEWSLETTER SUBSCRIBE WIDGET ── */
.isf-subscribe-widget {
    background: var(--bg-surface-2);
    border: 1.5px solid var(--bg-surface-3);
    border-radius: 14px;
    padding: 24px;
    margin: 24px 16px;
    text-align: center;
}

.isf-subscribe-widget h3 {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.isf-subscribe-widget p {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 16px;
}

.isf-subscribe-form {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.isf-subscribe-email {
    flex: 1 1 220px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--bg-surface-3);
    background: var(--bg-surface-3);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.isf-subscribe-email:focus { border-color: var(--brand-primary); }

.isf-subscribe-btn {
    padding: 10px 22px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.isf-subscribe-btn:hover { background: var(--brand-primary-hover); }
.isf-subscribe-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.isf-subscribe-msg {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ui-success);
    opacity: 0;
    transition: opacity 0.3s;
    min-height: 18px;
}

.isf-subscribe-msg.isf-visible { opacity: 1; }

/* ── RESPONSIVE ADJUSTMENTS ── */
@media (max-width: 600px) {
    .isf-top10-rank { font-size: 52px; left: -8px; }
    .isf-top10-card { flex: 0 0 130px; }
    .isf-mood-pill  { font-size: 12px; padding: 8px 14px; }
    .isf-qp-title   { font-size: 18px; }
    .isf-qp-body    { padding: 16px; }
}

/* ================================================================
   SEO BREADCRUMB NAVIGATION
================================================================ */
.isf-breadcrumb {
    padding: 10px 20px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 13px;
}
.isf-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.isf-breadcrumb li {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.5);
}
.isf-breadcrumb li:not(:last-child)::after {
    content: '›';
    margin: 0 6px;
    color: rgba(255,255,255,0.3);
}
.isf-breadcrumb a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s;
}
.isf-breadcrumb a:hover { color: #E50914; }
.isf-breadcrumb li[aria-current="page"] span { color: rgba(255,255,255,0.9); }

/* ==========================================================================
   ENHANCED CARD SYSTEM v2.0 — Cinematic Glow Animations
   ========================================================================== */

/* ── Keyframe Animations ─────────────────────────────────────────────────── */

@keyframes cardGlowPulse {
    0%   { box-shadow: 0 0 0px transparent, 0 0 0px transparent; }
    50%  { box-shadow: 0 0 18px var(--card-glow-color, rgba(229,9,20,0.55)),
                       0 0 40px var(--card-glow-color, rgba(229,9,20,0.2)); }
    100% { box-shadow: 0 0 0px transparent, 0 0 0px transparent; }
}

@keyframes shimmerSweep {
    0%   { transform: translateX(-120%) skewX(-20deg); }
    100% { transform: translateX(220%) skewX(-20deg); }
}

@keyframes cardBorderGlow {
    0%,100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

@keyframes badgePop {
    0%   { transform: scale(0.7); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes floatUp {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-4px); }
    100% { transform: translateY(0px); }
}

@keyframes scanline {
    0%   { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

@keyframes ratingShine {
    0%   { color: var(--brand-tertiary); text-shadow: 0 0 4px rgba(245,197,24,0.3); }
    50%  { color: #fff9c4; text-shadow: 0 0 12px rgba(245,197,24,0.9), 0 0 24px rgba(245,197,24,0.4); }
    100% { color: var(--brand-tertiary); text-shadow: 0 0 4px rgba(245,197,24,0.3); }
}

@keyframes overlayReveal {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to   { opacity: 1; backdrop-filter: blur(6px); }
}

/* ── Base Card Reset & Enhancement ─────────────────────────────────────────── */

/* .isf-card enhancement — merged into premium base block; only isolation kept here */
.isf-card {
    isolation: isolate;
}

/* Animated border glow ring (pseudo-element) */
.isf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        transparent 20%,
        rgba(229,9,20,0.0) 40%,
        rgba(229,9,20,0.0) 60%,
        transparent 80%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease, background 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

/* Shimmer sweep layer */
.isf-card::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.10) 50%,
        transparent 70%
    );
    transform: translateX(-120%) skewX(-20deg);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ── Hover State ─────────────────────────────────────────────────── */

.isf-card:hover {
    transform: scale(1.08) translateZ(0);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.1),
        0 22px 40px rgba(0,0,0,0.8);
    outline-color: transparent;
    z-index: 10;
}

.isf-card:hover::before {
    opacity: 0;
}

.isf-card:hover::after {
    opacity: 1;
    animation: shimmerSweep 0.6s ease forwards;
}

/* ── Card Image ─────────────────────────────────────────────────── */

.isf-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), filter 0.4s ease;
    will-change: transform;
}

.isf-card:hover img {
    transform: scale(1.06);
    filter: brightness(0.75) saturate(1.1);
}

/* ── Hover Overlay with Glow ─────────────────────────────────────────────── */

.isf-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 30%,
        rgba(10,0,0,0.5) 60%,
        rgba(20,0,0,0.92) 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 4;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    padding: 8px;
}

.isf-card:hover .isf-card-overlay {
    opacity: 1;
}

/* Play button icon on hover overlay */
.isf-card-overlay-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 38px;
    height: 38px;
    background: rgba(229,9,20,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    box-shadow: 0 0 20px rgba(229,9,20,0.8), 0 0 40px rgba(229,9,20,0.3);
    z-index: 6;
}

.isf-card-overlay-play svg {
    width: 14px;
    height: 14px;
    fill: white;
    margin-left: 2px;
}

.isf-card:hover .isf-card-overlay-play {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ── Card Text Area ─────────────────────────────────────────────── */

.isf-card-info {
    padding: 8px 8px 6px;
    background: linear-gradient(180deg, #18181d 0%, #131318 100%);
    position: relative;
}

.isf-card-title {
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 7px 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f0f0f0;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}

.isf-card:hover .isf-card-title {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255,255,255,0.4);
}

.isf-card-year {
    font-size: 10px;
    color: #6b6b7a;
    padding: 0 7px 7px;
    transition: color 0.3s ease;
}

.isf-card:hover .isf-card-year {
    color: rgba(229,9,20,0.9);
}

/* ── Quality Badge (HD/4K/CAM) ─────────────────────────────────── */

.isf-card-quality {
    position: absolute;
    top: 7px;
    right: 7px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 8.5px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    color: #00e676;
    border: 1px solid rgba(0,230,118,0.4);
    z-index: 7;
    letter-spacing: 0.05em;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.isf-card:hover .isf-card-quality {
    box-shadow: 0 0 8px rgba(0,230,118,0.5), 0 0 16px rgba(0,230,118,0.2);
    border-color: rgba(0,230,118,0.8);
}

/* ── Left Badge (NEW / SERIES) ─────────────────────────────────── */

.isf-card-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 8.5px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    z-index: 7;
    letter-spacing: 0.06em;
    animation: badgePop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
    transition: box-shadow 0.3s ease;
}

.isf-card:hover .isf-card-badge {
    box-shadow: 0 0 10px rgba(229,9,20,0.7), 0 0 20px rgba(229,9,20,0.3);
}

.isf-card-badge.badge-new {
    background: var(--brand-secondary);
    transition: box-shadow 0.3s ease;
}

.isf-card:hover .isf-card-badge.badge-new {
    box-shadow: 0 0 10px rgba(0,168,225,0.7), 0 0 20px rgba(0,168,225,0.3);
}

/* ── Rating Badge ──────────────────────────────────────────────── */

.isf-card-rating-badge {
    position: absolute;
    bottom: 42px;
    left: 7px;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    color: var(--brand-tertiary);
    border: 1px solid rgba(245,197,24,0.3);
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s,
                box-shadow 0.3s ease, border-color 0.3s ease;
}

.isf-card:hover .isf-card-rating-badge {
    opacity: 1;
    transform: translateY(0);
    /* Smooth one-time transition replaces infinite text-shadow animation */
    box-shadow: 0 0 10px rgba(245,197,24,0.5);
    border-color: rgba(245,197,24,0.7);
    color: #fff9c4;
    text-shadow: 0 0 10px rgba(245,197,24,0.8);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s,
                box-shadow 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, text-shadow 0.3s ease;
    /* Removed: animation: ratingShine infinite — was repainting color+text-shadow every frame */
}

.isf-card-rating-badge i { margin-right: 2px; }

/* ── Progress Bar (Continue Watching) ─────────────────────────── */

.isf-card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.12);
    z-index: 8;
}

.isf-card-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #E50914 0%, #ff6b6b 100%);
    width: 0%;
    box-shadow: 0 0 6px rgba(229,9,20,0.6);
    transition: box-shadow 0.3s ease;
}

.isf-card:hover .isf-card-progress-bar {
    box-shadow: 0 0 12px rgba(229,9,20,0.9);
}

/* ── Wide Card (Continue Watching 16:9) ─────────────────────────── */

.isf-card-wide {
    flex: 0 0 266px;
}

.isf-card-wide img {
    aspect-ratio: 16/9;
}

/* ── Section Row Glow (section heading glow on hover) ─────────────── */

.isf-section-row:hover .isf-section-title {
    text-shadow: 0 0 12px rgba(255,255,255,0.25);
}

/* ── Staggered entrance delays (CSS fallback — JS overrides these per count) ── */
/* FIX: 0.035s steps (was 0.06s) — faster stagger, less pop-in lag */
.isf-card-scroll .isf-card.isf-card--visible:nth-child(1)  { animation-delay: 0.00s; }
.isf-card-scroll .isf-card.isf-card--visible:nth-child(2)  { animation-delay: 0.035s; }
.isf-card-scroll .isf-card.isf-card--visible:nth-child(3)  { animation-delay: 0.07s; }
.isf-card-scroll .isf-card.isf-card--visible:nth-child(4)  { animation-delay: 0.105s; }
.isf-card-scroll .isf-card.isf-card--visible:nth-child(5)  { animation-delay: 0.14s; }
.isf-card-scroll .isf-card.isf-card--visible:nth-child(6)  { animation-delay: 0.175s; }

@keyframes cardEntrance {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* isf-card-scroll: entrance via IntersectionObserver (--visible class se trigger hoga)
   Direct animation removed — global opacity:0 system se conflict karta tha */
.isf-card-scroll .isf-card.isf-card--visible {
    /* FIX: 0.28s (was 0.5s) + less bounce (1.1 vs 1.2) — feels snappier, not floaty */
    animation: cardEntrance 0.28s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

/* ── Mobile Adjustments ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .isf-card {
        flex: 0 0 110px;
        border-radius: 8px;
    }
    .isf-card:hover {
        transform: scale(1.04) translateY(-4px);
    }
    .isf-card-overlay-play {
        width: 32px;
        height: 32px;
    }
    .isf-card-overlay-play svg {
        width: 12px;
        height: 12px;
    }
}

/* ── Search Card Glow ───────────────────────────────────────────── */

.isf-search-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.35s ease;
    outline: 1px solid rgba(255,255,255,0.05);
}

.isf-search-card:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(229,9,20,0.4),
        0 0 16px rgba(229,9,20,0.3),
        0 12px 30px rgba(0,0,0,0.6);
    outline-color: transparent;
}

/* ── Related Card Glow ─────────────────────────────────────────── */

.isf-related-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.35s ease;
}

.isf-related-card:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(229,9,20,0.45),
        0 0 18px rgba(229,9,20,0.28),
        0 16px 32px rgba(0,0,0,0.65);
}

/* ── Download Card Glow ────────────────────────────────────────── */

.isf-dl-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.35s ease;
    outline: 1px solid rgba(255,255,255,0.05);
}

.isf-dl-card:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(229,9,20,0.4),
        0 0 18px rgba(229,9,20,0.3),
        0 14px 28px rgba(0,0,0,0.6);
    outline-color: transparent;
}

/* ============================================================
   NetStream — Card System v3.0
   PASTE THIS AT THE END OF style.css
   ============================================================ */

/* ── Per-card glow colors ─────────────────────────────────── */
.isf-card {
  --glow-h: 355; --glow-s: 90%; --glow-l: 54%;
  --glow-rgb: 229,18,38;
}
.isf-card[data-glow="crimson"]   { --glow-h:355; --glow-s:90%; --glow-l:54%; --glow-rgb:229,18,38; }
.isf-card[data-glow="cyan"]      { --glow-h:195; --glow-s:95%; --glow-l:50%; --glow-rgb:0,183,235; }
.isf-card[data-glow="violet"]    { --glow-h:265; --glow-s:85%; --glow-l:62%; --glow-rgb:145,70,235; }
.isf-card[data-glow="amber"]     { --glow-h:38;  --glow-s:98%; --glow-l:54%; --glow-rgb:253,163,10; }
.isf-card[data-glow="emerald"]   { --glow-h:152; --glow-s:88%; --glow-l:42%; --glow-rgb:10,190,105; }
.isf-card[data-glow="rose"]      { --glow-h:335; --glow-s:90%; --glow-l:62%; --glow-rgb:240,60,130; }
.isf-card[data-glow="electric"]  { --glow-h:218; --glow-s:92%; --glow-l:60%; --glow-rgb:50,140,250; }
.isf-card[data-glow="gold"]      { --glow-h:47;  --glow-s:100%;--glow-l:52%; --glow-rgb:255,200,0; }
.isf-card[data-glow="neongreen"] { --glow-h:130; --glow-s:100%;--glow-l:48%; --glow-rgb:30,220,80; }
.isf-card[data-glow="coral"]     { --glow-h:18;  --glow-s:95%; --glow-l:58%; --glow-rgb:255,105,55; }
.isf-card[data-glow="indigo"]    { --glow-h:240; --glow-s:80%; --glow-l:58%; --glow-rgb:80,90,230; }
.isf-card[data-glow="mint"]      { --glow-h:170; --glow-s:85%; --glow-l:46%; --glow-rgb:20,195,155; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes isf-glowBreath {
  0%,100% {
    box-shadow:
      0 0 0 1.5px hsla(var(--glow-h),var(--glow-s),var(--glow-l),.35),
      0 0 20px rgba(var(--glow-rgb),.3),
      0 0 48px rgba(var(--glow-rgb),.1),
      0 20px 40px rgba(0,0,0,.65);
  }
  50% {
    box-shadow:
      0 0 0 2px hsl(var(--glow-h),var(--glow-s),var(--glow-l)),
      0 0 34px rgba(var(--glow-rgb),.55),
      0 0 75px rgba(var(--glow-rgb),.2),
      0 26px 50px rgba(0,0,0,.78);
  }
}
/* @keyframes isf-shimmer — duplicate removed; canonical definition at skeleton section */
@keyframes isf-playPop {
  0%   { transform:translate(-50%,-50%) scale(0) rotate(-40deg); opacity:0; }
  65%  { transform:translate(-50%,-50%) scale(1.1) rotate(4deg); }
  100% { transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:1; }
}
@keyframes isf-cardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Card entrance: rows start hidden; IntersectionObserver adds --visible ── */
.isf-slider-track .isf-card,
.isf-card-scroll  .isf-card,
.isf-card-grid    .isf-card,
.isf-archive-grid .isf-card {
    opacity: 0;
    animation: none;
    /* SAFETY: if JS fails, cards auto-show after 2s */
    transition: opacity 0.3s ease;
}

/* Fallback: show cards after 1.5s even if JS observer doesn't fire */
@supports (animation-timeline: auto) {
    .isf-slider-track .isf-card,
    .isf-card-scroll  .isf-card,
    .isf-card-grid    .isf-card,
    .isf-archive-grid .isf-card {
        animation: isf-cardFallback 0.3s ease 1.5s both;
    }
}
@keyframes isf-cardFallback {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.isf-card.isf-card--visible {
    opacity: 1;
    /* FIX: 0.25s (was 0.3s) — faster entrance, less pop-in stutter during horizontal scroll */
    animation: isf-cardIn .25s ease both;
}

/* Keep already-visible cards instant (e.g. server-side rendered above fold) */
@media (prefers-reduced-motion: reduce) {
    .isf-card,
    .isf-card.isf-card--visible {
        animation: none !important;
        opacity: 1 !important;
    }
}
@keyframes isf-badgeGlow {
  /* opacity-only pulse — box-shadow variant caused repaint every frame */
  0%,100% { opacity: 1; }
  50%     { opacity: 0.7; }
}

/* ── Base Card ────────────────────────────────────────────── */
.isf-card {
  flex: 0 0 155px;
  position: relative;
  border-radius: 14px;
  background: #13131a;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: transform .4s cubic-bezier(.34,1.5,.64,1), box-shadow .4s ease;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 8px 24px rgba(0,0,0,.5);
}

/* Animated border ring */
.isf-card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 15px;
  padding: 1.5px;
  background: conic-gradient(from 0deg, transparent 0%, hsl(var(--glow-h),var(--glow-s),var(--glow-l)) 15%, transparent 30%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 2; pointer-events: none;
}

/* Shimmer sweep */
.isf-card::after {
  content: '';
  position: absolute; top:0; left:0;
  width: 55%; height: 100%;
  background: linear-gradient(108deg, transparent 20%, rgba(255,255,255,.11) 48%, rgba(255,255,255,.04) 52%, transparent 70%);
  transform: translateX(-160%) skewX(-18deg);
  z-index: 5; pointer-events: none; opacity:0;
}

/* Hover */
.isf-card:hover {
  transform: scale(1.08) translateZ(0);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1),
    0 22px 40px rgba(0,0,0,.85);
  z-index: 20;
}
.isf-card:hover::before {
  opacity: 0;
}
.isf-card:hover::after {
  animation: isf-shimmer .6s ease forwards;
}

/* Image */
.isf-card img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.34,1.1,.64,1), filter .3s ease;
}
.isf-card:hover img {
  transform: scale(1.06);
  filter: brightness(.75) saturate(1.1);
}

/* Overlay */
.isf-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 18%, rgba(0,0,0,.08) 45%, rgba(5,0,10,.93) 100%);
  opacity: 0; transition: opacity .38s ease;
  z-index: 3; pointer-events: none;
}
.isf-card:hover .isf-card-overlay { opacity:1; }

/* Colored glow splash */
.isf-card-glow-splash {
  position: absolute; bottom: -20px; left: 50%;
  transform: translateX(-50%);
  width: 140%; height: 80px;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(var(--glow-rgb),.35) 0%, transparent 70%);
  opacity: 0; transition: opacity .4s ease .05s;
  z-index: 4; pointer-events: none; filter: blur(2px);
}
.isf-card:hover .isf-card-glow-splash { opacity:1; }

/* Play button */
.isf-card-play {
  position: absolute; top:42%; left:50%;
  transform: translate(-50%,-50%) scale(.5) rotate(-30deg);
  opacity: 0; width:48px; height:48px; border-radius:50%;
  background: rgba(var(--glow-rgb),.92);
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 8px rgba(var(--glow-rgb),.15),
              0 0 28px rgba(var(--glow-rgb),.7),
              0 0 60px rgba(var(--glow-rgb),.25);
  z-index: 8;
}
.isf-card-play svg { width:16px; height:16px; fill:#fff; margin-left:3px; }
.isf-card:hover .isf-card-play {
  animation: isf-playPop .38s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Quality badge */
.isf-card-quality {
  position: absolute; top:10px; right:10px;
  background: rgba(var(--glow-rgb),.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--glow-rgb),.5);
  color: hsl(var(--glow-h),100%,78%);
  font-size:10px; font-weight:900; letter-spacing:.1em;
  padding:3px 8px; border-radius:6px; z-index:9;
  transition: box-shadow .35s ease, background .35s ease;
}
.isf-card:hover .isf-card-quality {
  background: rgba(var(--glow-rgb),.3);
  box-shadow: 0 0 10px rgba(var(--glow-rgb),.55), 0 0 22px rgba(var(--glow-rgb),.2);
  animation: isf-badgeGlow 1.5s ease .1s infinite;
}

/* Left badge */
.isf-card-badge {
  position: absolute; top:10px; left:10px;
  font-size:9px; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase; color:#fff;
  padding:3px 9px; border-radius:6px; z-index:9;
  background: rgba(var(--glow-rgb),.85);
  box-shadow: 0 2px 10px rgba(var(--glow-rgb),.4);
  transition: box-shadow .3s ease;
}
.isf-card:hover .isf-card-badge {
  box-shadow: 0 0 12px rgba(var(--glow-rgb),.7), 0 0 28px rgba(var(--glow-rgb),.3);
}
.isf-card-badge.badge-new { background: rgba(var(--glow-rgb),.85); }

/* Rating badge */
.isf-card-rating-badge {
  position: absolute; bottom:52px; left:10px;
  display:flex; align-items:center; gap:4px;
  background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px; padding:3px 8px;
  font-size:10px; font-weight:700; color:#F5C518;
  z-index:9; opacity:0; transform:translateX(-10px);
  transition: opacity .3s ease .08s, transform .3s ease .08s;
}
.isf-card:hover .isf-card-rating-badge { opacity:1; transform:translateX(0); }

/* Title + meta */
.isf-card-title {
  font-size:14px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#ececf4; padding:10px 10px 0;
  transition: color .3s ease, text-shadow .3s ease;
}
.isf-card:hover .isf-card-title {
  color:#fff;
  text-shadow: 0 0 12px rgba(var(--glow-rgb),.5);
}
.isf-card-year {
  font-size:10px; color:#55556a; font-weight:600;
  padding:3px 10px 9px;
  transition: color .3s ease;
}
.isf-card:hover .isf-card-year {
  color: hsl(var(--glow-h),70%,65%);
}

/* Progress bar */
.isf-card-progress { position:absolute; bottom:0; left:0; width:100%; height:3px; background:rgba(255,255,255,.07); z-index:9; }
.isf-card-progress-bar {
  height:100%;
  background: linear-gradient(90deg, rgba(var(--glow-rgb),1), rgba(var(--glow-rgb),.55));
  box-shadow: 0 0 8px rgba(var(--glow-rgb),.6);
  transition: box-shadow .3s ease;
}
.isf-card:hover .isf-card-progress-bar {
  box-shadow: 0 0 18px rgba(var(--glow-rgb),1), 0 0 35px rgba(var(--glow-rgb),.35);
}

/* Wide card */
.isf-card-wide { flex:0 0 260px; }
.isf-card-wide img { aspect-ratio:16/9; }

/* Stagger entrance — only when card becomes visible, not unconditionally */
/* FIX: 0.035s steps (was 0.05s) — consistent with JS stagger timing */
.isf-card.isf-card--visible:nth-child(1){animation-delay:.00s}
.isf-card.isf-card--visible:nth-child(2){animation-delay:.035s}
.isf-card.isf-card--visible:nth-child(3){animation-delay:.07s}
.isf-card.isf-card--visible:nth-child(4){animation-delay:.105s}
.isf-card.isf-card--visible:nth-child(5){animation-delay:.14s}
.isf-card.isf-card--visible:nth-child(6){animation-delay:.175s}

/* Mobile / touch: no JS tilt fires on touch, so CSS handles the visual feedback */
@media (max-width:768px), (pointer: coarse) {
  .isf-card:hover{transform:scale(1.05) translateY(-6px);}
  .isf-card-play{width:42px;height:42px;}
}
/* Desktop (pointer:fine): JS tilt takes full control of transform — CSS :hover
   still fires but JS scale(1.08) wins via inline style */
@media (pointer: fine) and (min-width:769px) {
  .isf-card-play{width:46px;height:46px;}
}


/* ==========================================================================
   DISNEY+ HOTSTAR STYLE — RED THEME OVERRIDE
   Full cinematic premium redesign with red accent
   ========================================================================== */

/* ── DESIGN TOKENS OVERRIDE ─────────────────────────────────────────────── */
:root {
    /* Red-dominant palette like Hotstar with red */
    --hs-red:          #E50914;
    --hs-red-deep:     #b3000c;
    --hs-red-glow:     rgba(229, 9, 20, 0.55);
    --hs-red-soft:     rgba(229, 9, 20, 0.12);
    --hs-gold:         #F5C518;
    --hs-live:         #FF3B30;

    /* Backgrounds — deeper, richer than Netflix */
    --bg-base:         #040407;
    --bg-surface-1:    #09090f;
    --bg-surface-2:    #111118;
    --bg-surface-3:    #1a1a24;

    /* Brand override */
    --brand-primary:        #E50914;
    --brand-primary-hover:  #ff0f1c;
    --brand-primary-glow:   rgba(229, 9, 20, 0.55);

    /* Font — more Hotstar-premium feel */
    --font-sans: 'Poppins', 'Segoe UI', system-ui, sans-serif;

    /* Nav height like Hotstar */
    --app-nav-height: 68px;
}

/* ── GOOGLE FONT: Poppins ───────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ── PREMIUM TOP STRIP (Hotstar signature) ──────────────────────────────── */
body::before {
    content: '';
    display: block;
    height: 3px;
    /* Repeated gradient so transform-scroll looks seamless */
    background: linear-gradient(90deg,
        #b3000c 0%, #E50914 16%, #ff4b4b 33%,
        #E50914 50%,
        #b3000c 66%, #E50914 83%, #ff4b4b 100%);
    /* 300vw wide — GPU transform shifts it, no repaint */
    position: fixed;
    top: 0; left: 0;
    width: 300vw;
    z-index: 99999;
    will-change: transform;
    animation: hs-stripShift 4s linear infinite;
}
@keyframes hs-stripShift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

/* ── HEADER — Hotstar style ─────────────────────────────────────────────── */
.isf-header {
    top: 3px; /* below the premium strip */
    background: linear-gradient(180deg,
        rgba(4,4,7,0.97) 0%,
        rgba(4,4,7,0.7) 70%,
        transparent 100%);
    padding: 0 20px;
    height: 68px;
    border-bottom: none;
}

.isf-header.scrolled {
    background: rgba(4, 4, 7, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(229, 9, 20, 0.12);
    box-shadow: 0 2px 30px rgba(0,0,0,0.8);
}

/* Logo — Hotstar premium style */
.isf-logo-text {
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Desktop nav — Hotstar category pills */
.isf-desktop-menu a {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    padding: 6px 14px;
    border-radius: 20px;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    letter-spacing: 0.02em;
}
.isf-desktop-menu a:hover {
    color: #fff;
    background: rgba(229, 9, 20, 0.15);
}
.isf-desktop-menu li:first-child a {
    color: #fff;
}

/* Header action buttons */
.isf-header-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.isf-header-btn:hover {
    background: rgba(229,9,20,0.2);
    border-color: rgba(229,9,20,0.4);
    color: #E50914;
}

/* Login button — Hotstar style */
.isf-login-btn {
    background: linear-gradient(135deg, #E50914 0%, #b3000c 100%);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 9px 20px;
    box-shadow: 0 4px 16px rgba(229,9,20,0.35);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.isf-login-btn:hover {
    background: linear-gradient(135deg, #ff1a26 0%, #cc0010 100%);
    box-shadow: 0 6px 24px rgba(229,9,20,0.55);
    transform: translateY(-1px);
}

/* ── HERO SLIDER — Cinematic Hotstar style ──────────────────────────────── */
.isf-hero-slider {
    height: 88vh;
    min-height: 580px;
    border-radius: 0;
}

.isf-hero-bg {
    filter: brightness(0.65) saturate(1.15);
    transform: scale(1.04);
    transition: transform 8s ease;
}
.isf-hero-slide.active .isf-hero-bg {
    transform: scale(1);
}

.isf-hero-gradient {
    background:
        linear-gradient(0deg, var(--bg-base) 0%, rgba(4,4,7,0.82) 30%, rgba(4,4,7,0.4) 55%, transparent 100%),
        linear-gradient(90deg, rgba(4,4,7,0.9) 0%, rgba(4,4,7,0.5) 35%, transparent 65%),
        linear-gradient(270deg, rgba(4,4,7,0.5) 0%, transparent 40%);
}

/* Hotstar-style hero content */
.isf-hero-content {
    bottom: 14%;
    max-width: 600px;
}

@media (min-width: 768px) {
    .isf-hero-content {
        bottom: 18%;
        max-width: 540px;
    }
}

/* PREMIUM badge — Hotstar gold */
.isf-hero-badge {
    background: linear-gradient(135deg, #E50914 0%, #ff3d3d 100%);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    box-shadow: 0 4px 16px rgba(229,9,20,0.45);
    padding: 5px 14px;
}
.isf-hero-badge::before {
    content: '★ ';
    color: #ffd700;
}

.isf-hero-title {
    font-family: var(--font-sans);
    font-size: clamp(30px, 5.5vw, 62px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-shadow: 0 4px 24px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.7);
}

.isf-hero-genres {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.03em;
}

/* Hero meta pills */
.isf-hero-meta {
    gap: 8px;
}
.isf-hero-meta span {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-sans);
    backdrop-filter: blur(4px);
}

/* Play button — Hotstar style */
.isf-btn-play-mega {
    background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
    color: #000;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 15px;
    padding: 12px 32px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    letter-spacing: 0.02em;
}
.isf-btn-play-mega:hover {
    background: #fff;
    transform: scale(1.04);
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* Console buttons */
.isf-console-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 9px 16px;
    flex-direction: row;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    color: rgba(255,255,255,0.85);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    backdrop-filter: blur(8px);
}
.isf-console-btn i {
    font-size: 16px;
    color: #fff;
}
.isf-console-btn:hover {
    background: rgba(229,9,20,0.2);
    border-color: rgba(229,9,20,0.5);
    color: #fff;
}
.isf-console-btn:hover i {
    color: #E50914;
    transform: none;
}

/* Slider controls */
.isf-slider-prev,
.isf-slider-next {
    background: rgba(229,9,20,0.15);
    border: 1px solid rgba(229,9,20,0.3);
    backdrop-filter: blur(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.isf-slider-prev:hover,
.isf-slider-next:hover {
    background: #E50914;
    border-color: #E50914;
    box-shadow: 0 0 20px rgba(229,9,20,0.5);
}

/* Slider dots — Hotstar style */
.isf-slider-dots span {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.3);
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1), background-color 0.35s cubic-bezier(0.4,0,0.2,1), color 0.35s cubic-bezier(0.4,0,0.2,1);
}
.isf-slider-dots span.active {
    width: 28px;
    background: linear-gradient(90deg, #E50914, #ff4b4b);
    box-shadow: 0 0 10px rgba(229,9,20,0.6);
}

/* ── PREMIUM CONTENT STRIP (above networks) ─────────────────────────────── */
/* Network section — consolidated above, no overrides needed here */

/* ── CATEGORY PILLS — Hotstar style ────────────────────────────────────── */
.isf-pills-rail {
    padding: 12px 20px;
    gap: 10px;
}

.isf-pill {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 25px;
    border: 1.5px solid rgba(255,255,255,0.2);
    letter-spacing: 0.03em;
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(6px);
}
.isf-pill.active,
.isf-pill:hover {
    background: linear-gradient(135deg, rgba(229,9,20,0.3), rgba(229,9,20,0.15));
    border-color: #E50914;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(229,9,20,0.2), 0 4px 20px rgba(229,9,20,0.15);
}

/* ── CONTENT ROWS — Hotstar premium feel ────────────────────────────────── */
.isf-row {
    margin-bottom: clamp(28px, 3.5vw, 56px);
}

.isf-row-header {
    padding: 0 20px 14px;
}

.isf-row-title {
    font-family: var(--font-sans);
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.isf-row-title::before {
    content: '';
    display: block;
    width: 4px;
    height: 22px;
    background: linear-gradient(180deg, #E50914, #ff4b4b);
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(229,9,20,0.6);
    flex-shrink: 0;
}

.isf-row-title i { color: #E50914; }

.isf-row-view-all {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: #E50914;
    border: 1px solid rgba(229,9,20,0.4);
    padding: 5px 14px;
    border-radius: 20px;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.isf-row:hover .isf-row-view-all {
    background: rgba(229,9,20,0.12);
    opacity: 1;
    transform: translateX(0);
}

/* ── slider-track gap & card sizes → master block at end of file ─────────── */

/* ── CARDS — hover effect preserved, sizes from master block ────────────── */
.isf-card {
    background: linear-gradient(160deg, #13131e 0%, #0d0d18 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    transition: transform 0.38s cubic-bezier(0.34,1.5,0.64,1), box-shadow 0.38s ease;
}

.isf-card:hover {
    transform: scale(1.09) translateY(-6px);
    box-shadow:
        0 0 0 2px rgba(229,9,20,0.5),
        0 0 30px rgba(229,9,20,0.3),
        0 28px 50px rgba(0,0,0,0.85);
    z-index: 20;
}

.isf-card img {
    border-radius: 14px 14px 0 0;
}

/* Hotstar "PREMIUM" badge */
.isf-card-badge {
    background: linear-gradient(135deg, #E50914, #ff4040);
    font-family: var(--font-sans);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(229,9,20,0.5);
}

/* Quality badge */
.isf-card-quality {
    background: rgba(0,0,0,0.75);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-weight: 800;
}

/* Card title */
.isf-card-title {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.isf-card-year {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
}

/* LIVE badge */
.isf-card-badge.badge-live {
    background: linear-gradient(135deg, #FF3B30, #ff6b6b);
    animation: hs-livePulse 1.5s ease-in-out infinite;
}
@keyframes hs-livePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.6); }
    50%      { box-shadow: 0 0 0 5px rgba(255,59,48,0); }
}

/* Wide cards */
.isf-card-wide { flex: 0 0 270px; }

/* ── SECTION TITLE style ─────────────────────────────────────────────────── */
.isf-section-title {
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: 0.01em;
}
.isf-section-title i { color: #E50914; }

/* ── BOTTOM NAVIGATION — Hotstar style ──────────────────────────────────── */
.isf-bottom-nav {
    background: rgba(4,4,7,0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(229,9,20,0.15);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.6);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
}

.isf-nav-item {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.isf-nav-item.active i { color: #E50914; }

.isf-nav-item.active::before {
    background: linear-gradient(90deg, #E50914, #ff4b4b);
    box-shadow: 0 0 8px rgba(229,9,20,0.6);
}

/* ── SIDEBAR — Hotstar premium sidebar ──────────────────────────────────── */
.isf-sidebar {
    background: linear-gradient(180deg, #09090f 0%, #050508 100%);
    border-right: 1px solid rgba(229,9,20,0.1);
}

.isf-sidebar-user img {
    border: 2px solid #E50914;
    box-shadow: 0 0 14px rgba(229,9,20,0.4);
}

.isf-sidebar-menu li a i { color: #E50914; }

.isf-sidebar-menu li a:hover,
.isf-sidebar-menu li a.active {
    background: rgba(229,9,20,0.08);
    border-left: 3px solid #E50914;
    padding-left: 17px;
}

/* ── SEARCH MODAL — Hotstar style ───────────────────────────────────────── */
.isf-search-modal {
    background: rgba(4,4,7,0.97);
    backdrop-filter: blur(24px);
}

.isf-search-input-wrapper {
    border-radius: 12px;
    border-color: rgba(229,9,20,0.3);
    background: rgba(255,255,255,0.06);
    padding: 14px 20px;
    box-shadow: 0 0 0 1px rgba(229,9,20,0.15);
}
.isf-search-input-wrapper:focus-within {
    border-color: #E50914;
    box-shadow: 0 0 0 2px rgba(229,9,20,0.25);
}

.isf-search-cat {
    font-family: var(--font-sans);
    font-weight: 600;
    border-radius: 20px;
}
.isf-search-cat:hover {
    background: #E50914;
    border-color: #E50914;
}

/* ── AUTH MODAL — Hotstar style ─────────────────────────────────────────── */
.isf-auth-tab.active { border-bottom-color: #E50914; }
.isf-auth-submit {
    background: linear-gradient(135deg, #E50914 0%, #b3000c 100%);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 6px 24px rgba(229,9,20,0.4);
}
.isf-auth-submit:hover {
    background: linear-gradient(135deg, #ff1a26 0%, #cc000f 100%);
    box-shadow: 0 8px 32px rgba(229,9,20,0.6);
}

/* ── DOWNLOAD CARDS — Hotstar style ─────────────────────────────────────── */
.isf-dl-card {
    background: linear-gradient(145deg, var(--bg-surface-2), var(--bg-surface-3));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    transition: opacity 0.3s cubic-bezier(0.34,1.3,0.64,1), transform 0.3s cubic-bezier(0.34,1.3,0.64,1);
}
.isf-dl-card:hover {
    border-color: rgba(229,9,20,0.4);
    box-shadow: 0 0 0 1px rgba(229,9,20,0.2), 0 12px 32px rgba(229,9,20,0.15);
    transform: translateY(-5px);
}
.isf-dl-btn, .isf-dl-button {
    background: linear-gradient(135deg, #E50914, #b3000c);
    border-radius: 20px;
    font-family: var(--font-sans);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(229,9,20,0.35);
}
.isf-dl-btn:hover, .isf-dl-button:hover {
    background: linear-gradient(135deg, #ff1a26, #cc000f);
    box-shadow: 0 6px 20px rgba(229,9,20,0.5);
}

/* ── SINGLE PAGE — Hotstar movie page ──────────────────────────────────── */
.isf-movie-hero { border-radius: 0; }

.isf-btn-play {
    background: #fff;
    color: #000;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-weight: 800;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.isf-btn-play:hover {
    background: rgba(255,255,255,0.9);
    transform: scale(1.04);
}

.isf-btn-trailer {
    font-family: var(--font-sans);
    font-weight: 700;
    border-radius: 8px;
    border-color: #E50914;
    color: #E50914;
}
.isf-btn-trailer:hover { background: rgba(229,9,20,0.12); }

/* Movie info */
.isf-movie-title {
    font-family: var(--font-sans);
    font-weight: 900;
}

/* ── SERVER BUTTONS ─────────────────────────────────────────────────────── */
.isf-srv-btn.active,
.isf-srv-btn:hover,
.isf-modal-srv-btn.active,
.isf-modal-srv-btn:hover {
    background: linear-gradient(135deg, #E50914, #b3000c);
    border-color: #E50914;
    box-shadow: 0 4px 16px rgba(229,9,20,0.35);
}

/* ── TOAST ──────────────────────────────────────────────────────────────── */
.isf-toast {
    background: linear-gradient(135deg, #111118, #1a1a24);
    border: 1px solid rgba(229,9,20,0.25);
    font-family: var(--font-sans);
    font-weight: 600;
}

/* ── LOADER ─────────────────────────────────────────────────────────────── */
.isf-loader-spinner {
    border-top-color: #E50914;
    border-color: rgba(255,255,255,0.07) rgba(255,255,255,0.07) rgba(255,255,255,0.07) #E50914;
    box-shadow: 0 0 16px rgba(229,9,20,0.3);
}

/* ── SCROLLBAR — Hotstar red ────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #E50914, #b3000c);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #ff1a26;
}

/* ── BACK TO TOP ─────────────────────────────────────────────────────────── */
.isf-back-to-top {
    background: linear-gradient(135deg, #E50914, #b3000c);
    box-shadow: 0 4px 20px rgba(229,9,20,0.5);
    border-radius: 50%;
}
.isf-back-to-top:hover {
    box-shadow: 0 6px 28px rgba(229,9,20,0.7);
    transform: translateY(-4px);
}

/* ── PAGINATION — Hotstar style ─────────────────────────────────────────── */
.isf-pagination span.current,
.isf-pagination a:hover {
    background: linear-gradient(135deg, #E50914, #b3000c) !important;
    box-shadow: 0 4px 14px rgba(229,9,20,0.35);
}

/* ── ARCHIVE PAGE ───────────────────────────────────────────────────────── */
.isf-archive-stats { color: #E50914; }
.isf-reset-btn { color: #E50914; }
.isf-movie-card.grid-card:hover {
    border-color: rgba(229,9,20,0.4);
    box-shadow: 0 8px 32px rgba(229,9,20,0.2);
    transform: translateY(-5px) scale(1.02);
}

/* ── FOOTER — Hotstar dark premium ──────────────────────────────────────── */
.isf-footer {
    background: linear-gradient(180deg, var(--bg-surface-1) 0%, var(--bg-base) 100%);
    border-top: 1px solid rgba(229,9,20,0.1);
}

.isf-footer-title::after {
    background: linear-gradient(90deg, #E50914, #ff4b4b);
    box-shadow: 0 0 6px rgba(229,9,20,0.4);
}

.isf-social-icon:hover {
    background: linear-gradient(135deg, #E50914, #b3000c);
    box-shadow: 0 4px 14px rgba(229,9,20,0.4);
    transform: translateY(-3px);
}

.isf-newsletter-form button {
    background: linear-gradient(135deg, #E50914, #b3000c);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(229,9,20,0.35);
}
.isf-newsletter-form button:hover {
    background: linear-gradient(135deg, #ff1a26, #cc000f);
    box-shadow: 0 6px 22px rgba(229,9,20,0.5);
}
.isf-newsletter-form input:focus {
    border-color: #E50914;
    box-shadow: 0 0 0 3px rgba(229,9,20,0.15);
}

/* ── HOTSTAR PREMIUM SECTION HEADER ─────────────────────────────────────── */
.hs-premium-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #E50914, #b3000c);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 3px 12px rgba(229,9,20,0.4);
    margin-left: 8px;
    vertical-align: middle;
}

/* ── HOTSTAR MOOD PILLS ──────────────────────────────────────────────────── */
.isf-mood-pill {
    font-family: var(--font-sans);
    font-weight: 600;
    border-radius: 25px;
    border-width: 1.5px;
}
.isf-mood-pill.active {
    background: linear-gradient(135deg, #E50914, #b3000c);
    border-color: #E50914;
    box-shadow: 0 4px 20px rgba(229,9,20,0.4);
}

/* ── QUICK PREVIEW MODAL ─────────────────────────────────────────────────── */
.isf-qp-inner {
    border-radius: 20px;
    border: 1px solid rgba(229,9,20,0.15);
    box-shadow: 0 32px 80px rgba(0,0,0,0.9), 0 0 0 1px rgba(229,9,20,0.08);
}

.isf-qp-close:hover { background: #E50914; }
.isf-qp-type-badge { background: #E50914; }

/* ── USER DASHBOARD ──────────────────────────────────────────────────────── */
.isf-dash-hero { background: linear-gradient(180deg, rgba(229,9,20,0.06) 0%, transparent 100%), linear-gradient(135deg, #050508 0%, #0d0d18 100%); }
.isf-dash-avatar-wrap img { border-color: rgba(229,9,20,0.6); box-shadow: 0 0 20px rgba(229,9,20,0.25); }
.isf-dash-avatar-edit { background: linear-gradient(135deg, #E50914, #b3000c); }
.isf-dash-tab.active { border-bottom-color: #E50914; color: #fff; }
.isf-dash-tab-count { background: #E50914; }
.isf-dash-stat-card i { color: #E50914 !important; }
.isf-dash-save-btn { background: linear-gradient(135deg, #E50914, #b3000c); box-shadow: 0 4px 16px rgba(229,9,20,0.35); }
.isf-dash-notif-icon { color: #E50914; }
.isf-dash-notif-btn { background: linear-gradient(135deg, #E50914, #b3000c); }
.isf-dash-clear-btn { border-color: rgba(229,9,20,0.3); color: #E50914; }
.isf-dash-card:hover { border-color: rgba(229,9,20,0.3); }
.isf-pager-btn.active { background: #E50914; border-color: #E50914; }
.isf-dash-notif-list li i { color: #E50914; }

/* ── PUSH NOTIFICATION BANNER ────────────────────────────────────────────── */
.isf-push-banner {
    border-color: rgba(229,9,20,0.4);
    background: linear-gradient(135deg, #0d0d18, #13131e);
}
.isf-push-banner-icon {
    background: rgba(229,9,20,0.15);
    color: #E50914;
}
.isf-push-allow-btn { background: #E50914; }
.isf-push-allow-btn:hover { background: #b3000c; }

/* ── SUBSCRIBE WIDGET ────────────────────────────────────────────────────── */
.isf-subscribe-email:focus { border-color: #E50914; }
.isf-subscribe-btn {
    background: linear-gradient(135deg, #E50914, #b3000c);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(229,9,20,0.35);
}
.isf-subscribe-btn:hover { background: linear-gradient(135deg, #ff1a26, #cc000f); }
.isf-subscribe-msg { color: #E50914; }

/* ── COMMENT FORM ────────────────────────────────────────────────────────── */
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus { border-color: #E50914; box-shadow: 0 0 0 3px rgba(229,9,20,0.12); }

.comment-form input[type="submit"],
.comment-form #submit {
    background: linear-gradient(135deg, #E50914, #b3000c);
    font-family: var(--font-sans);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(229,9,20,0.35);
}
.comment-form input[type="submit"]:hover { background: linear-gradient(135deg, #ff1a26, #cc000f); }
.reply a { color: #E50914; }
.comment-form .required { color: #E50914; }

/* ── BREADCRUMB ──────────────────────────────────────────────────────────── */
.isf-breadcrumb a:hover { color: #E50914; }
.isf-report-btn { border-color: #E50914; color: #E50914; }
.isf-report-btn:hover { background: #E50914; }
.isf-recent-term:hover { background: rgba(229,9,20,0.15); border-color: #E50914; }

/* ── TOP 10 RANK NUMBER ──────────────────────────────────────────────────── */
.isf-top10-card:hover .isf-top10-rank {
    -webkit-text-stroke-color: rgba(229,9,20,0.7);
}

/* ── VIEW SWITCHER ───────────────────────────────────────────────────────── */
.isf-view-btn.active,
.isf-view-btn:hover {
    background: linear-gradient(135deg, #E50914, #b3000c) !important;
    border-color: #E50914 !important;
    box-shadow: 0 4px 14px rgba(229,9,20,0.3);
}

/* ── LOAD MORE BUTTON ────────────────────────────────────────────────────── */
.isf-load-more-btn:hover {
    background: linear-gradient(135deg, #E50914, #b3000c) !important;
    border-color: #E50914 !important;
    box-shadow: 0 4px 16px rgba(229,9,20,0.35);
}

/* ── GLOBAL ANIMATION UPGRADE ────────────────────────────────────────────── */
@keyframes hs-fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* FIX: isf-section animations hataye — sirf pehle 3 sections cover hote the,
   har page load pe play hote the, aur scroll ke dauran jank dete the.
   Cards ke paas apna IntersectionObserver-based entrance hai jo sahi kaam karta hai. */

/* ── HOTSTAR SECTION DIVIDER ─────────────────────────────────────────────── */
.isf-row::before {
    content: none;
}

/* ── TABLET / DESKTOP TWEAKS — card sizes in master block ────────────────── */
@media (min-width: 768px) {
    .isf-slider-track { padding: 4px var(--container-px-desktop) 20px; }
    .isf-row-header { padding: 0 var(--container-px-desktop) 14px; }
    .isf-pills-rail { padding: 12px var(--container-px-desktop); }
}


/* ==========================================================================
   HOTFIX v1 — Layout, Grid, Responsive & Hero Fixes
   ========================================================================== */

/* ── BODY TOP PADDING — account for premium strip + header ─────────────── */
body {
    padding-top: calc(var(--app-nav-height) + 3px); /* strip(3) + header */
}
@media (min-width: 768px) {
    body {
        padding-top: calc(var(--app-nav-height) + 3px);
        padding-bottom: 0;
    }
}

/* ── MAIN CONTENT — remove double padding ───────────────────────────────── */
.isf-main-content {
    overflow-x: hidden;
}

/* ── HERO SLIDER — complete mobile fix ──────────────────────────────────── */
.isf-hero-slider {
    height: 70vw;          /* portrait-ratio-friendly on mobile */
    min-height: 380px;
    max-height: 520px;
    margin-top: -3px;      /* overlap the strip */
}
@media (min-width: 600px) {
    .isf-hero-slider {
        height: 56vw;
        max-height: 640px;
    }
}
@media (min-width: 1024px) {
    .isf-hero-slider {
        height: 80vh;
        max-height: none;
    }
}

/* Hero slide — ensure first slide visible */
.isf-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1);
    z-index: 1;
}
.isf-hero-slide.active { opacity: 1; z-index: 2; }

/* Hero content — properly positioned on all screens */
.isf-hero-content {
    position: absolute;
    bottom: 12%;
    left: 0; right: 0;
    z-index: 5;
    padding: 0 16px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}
@media (min-width: 768px) {
    .isf-hero-content {
        text-align: left;
        left: var(--container-px-desktop, 4vw);
        right: auto;
        bottom: 15%;
        max-width: 500px;
        margin: 0;
    }
    .isf-hero-meta,
    .isf-hero-console { justify-content: flex-start; }
}

.isf-hero-title {
    font-size: clamp(22px, 4.5vw, 58px);
    margin-bottom: 10px;
}
.isf-hero-genres { font-size: 12px; margin-bottom: 12px; }
.isf-hero-meta   { margin-bottom: 16px; font-size: 12px; }
.isf-hero-console { gap: 10px; flex-wrap: wrap; justify-content: center; }

.isf-btn-play-mega {
    font-size: 14px;
    padding: 10px 24px;
}
.isf-console-btn {
    font-size: 12px;
    padding: 8px 14px;
}

/* ── HERO META — hide year pill on very small screens ───────────────────── */
@media (max-width: 380px) {
    .isf-hero-meta span:last-child { display: none; }
}

/* ── NETWORKS RAIL ──────────────────────────────────────────────────────── */
.isf-networks-rail { margin-top: -10px; padding: 16px 12px; }

/* ── CATEGORY PILLS ─────────────────────────────────────────────────────── */
.isf-pills-rail { padding: 8px 12px; gap: 8px; }
.isf-pill { font-size: 12px; padding: 6px 16px; }

/* ── CONTENT ROWS ───────────────────────────────────────────────────────── */
.isf-row         { margin-bottom: 24px; }
.isf-row-header  { padding: 0 12px 10px; }
.isf-row-title   { font-size: 15px; }

@media (min-width: 768px) {
    .isf-row         { margin-bottom: 40px; }
    .isf-row-header  { padding: 0 var(--container-px-desktop) 12px; }
}
@media (min-width: 1200px) {
    .isf-row         { margin-bottom: 52px; }
    .isf-row-title   { font-size: 20px; }
}

/* ── CARDS — sizes defined in master block at end of file ───────────────── */

/* ── ARCHIVE GRID — CRITICAL FIX ───────────────────────────────────────── */
.isf-archive-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
    margin-top: 12px;
}
@media (min-width: 420px) {
    .isf-archive-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; }
}
@media (min-width: 600px) {
    .isf-archive-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 10px; }
}
@media (min-width: 768px) {
    .isf-archive-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 12px; }
}
@media (min-width: 1024px) {
    .isf-archive-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 14px; }
}
@media (min-width: 1280px) {
    .isf-archive-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 16px; }
}
@media (min-width: 1600px) {
    .isf-archive-grid { grid-template-columns: repeat(7, 1fr) !important; gap: 16px; }
}

/* Ensure grid-card visible, list-card hidden by default */
.isf-archive-view.grid-view .isf-movie-card.grid-card   { display: block !important; }
.isf-archive-view.grid-view .isf-movie-card.list-card   { display: none !important; }
.isf-archive-view.list-view .isf-movie-card.list-card   { display: flex !important; }
.isf-archive-view.list-view .isf-movie-card.grid-card   { display: none !important; }

/* Archive grid card sizing fix */
.isf-movie-card.grid-card {
    width: 100% !important;
    max-width: none !important;
    border-radius: 10px;
}
.isf-movie-card.grid-card img,
.isf-movie-card.grid-card .isf-card-no-img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}
.isf-card-info { padding: 6px 7px 8px; }
.isf-card-title { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.isf-card-meta  { gap: 3px; }
.isf-card-year, .isf-card-duration { font-size: 9px; }

/* ── ARCHIVE HERO — fix styling ─────────────────────────────────────────── */
.isf-archive-hero {
    height: 160px;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #09090f, #13131e);
    position: relative;
}
@media (min-width: 768px) { .isf-archive-hero { height: 220px; } }

.isf-archive-hero-content {
    padding: 16px 16px 16px;
    background: linear-gradient(to top, rgba(4,4,7,0.95) 0%, rgba(4,4,7,0.6) 60%, transparent 100%);
}
.isf-archive-title {
    font-size: clamp(18px, 4vw, 32px);
    font-weight: 900;
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
@media (min-width: 768px) {
    .isf-archive-title { font-size: 32px; }
}
.isf-archive-desc  { font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
.isf-archive-stats { font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.isf-archive-stats span { display: flex; align-items: center; gap: 4px; }

/* ── ARCHIVE CONTAINER ──────────────────────────────────────────────────── */
.isf-archive-container { padding: 0 10px 100px; }
@media (min-width: 768px) { .isf-archive-container { padding: 0 20px 80px; } }
@media (min-width: 1200px) { .isf-archive-container { padding: 0 40px 80px; max-width: 1600px; margin: 0 auto; } }

/* ── FILTER BAR ─────────────────────────────────────────────────────────── */
.isf-filter-bar {
    border-radius: 10px;
    margin: 10px 0 8px;
    padding: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.isf-select-wrapper select {
    font-size: 12px;
    padding: 7px 24px 7px 10px;
    border-radius: 7px;
    background: rgba(255,255,255,0.06);
}
.isf-result-count { font-size: 11px; }

/* ── BOTTOM NAV — proper safe area handling ──────────────────────────────── */
.isf-bottom-nav {
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-top: 0;
}
.isf-nav-item { height: 58px; font-size: 9.5px; gap: 3px; }
.isf-nav-item i { font-size: 19px; }
body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
    .isf-bottom-nav { display: none; }
    body { padding-bottom: 0; }
}

/* ── HEADER — mobile fixes ──────────────────────────────────────────────── */
.isf-header {
    height: var(--app-nav-height);
    padding: 0 12px;
}
.isf-logo-text { font-size: 17px; letter-spacing: 0.06em; }
@media (min-width: 768px) { .isf-header { padding: 0 24px; } }
@media (min-width: 1200px){ .isf-header { padding: 0 4vw; } }

/* ── SINGLE MOVIE PAGE ─────────────────────────────────────────────────── */
.isf-single-container { margin-top: 0; }
.isf-movie-hero { height: 220px; }
@media (min-width: 600px) { .isf-movie-hero { height: 320px; } }
@media (min-width: 768px) { .isf-movie-hero { height: 60vh; min-height: 420px; } }

.isf-movie-card-wrap   { padding: 0 12px; margin-top: -70px; gap: 14px; }
.isf-movie-poster-col  { flex: 0 0 95px; }
.isf-movie-poster, .isf-poster-placeholder { width: 95px; height: 140px; border-radius: 8px; }
.isf-movie-info-col    { padding-top: 62px; }
.isf-movie-title       { font-size: 18px; margin-bottom: 8px; }

@media (min-width: 600px) {
    .isf-movie-card-wrap  { padding: 0 20px; margin-top: -90px; gap: 20px; }
    .isf-movie-poster-col { flex: 0 0 130px; }
    .isf-movie-poster, .isf-poster-placeholder { width: 130px; height: 195px; }
    .isf-movie-info-col   { padding-top: 80px; }
    .isf-movie-title      { font-size: 22px; }
}
@media (min-width: 1024px) {
    .isf-single-body {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
        max-width: 1400px;
        margin: 0 auto;
        padding: 32px 40px;
    }
}

/* Action buttons */
.isf-action-btns { gap: 8px; flex-wrap: wrap; }
.isf-btn-play, .isf-btn-trailer, .isf-btn-list {
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 7px;
}

/* ── SECTION ─────────────────────────────────────────────────────────────── */
.isf-section { padding: 16px 12px 0; }
@media (min-width: 768px) { .isf-section { padding: 20px 20px 0; } }

/* ── DOWNLOAD GRID ───────────────────────────────────────────────────────── */
.isf-dl-grid { gap: 8px; }
.isf-dl-card { padding: 12px; min-width: 90px; border-radius: 10px; }
.isf-dl-quality { font-size: 15px; }
.isf-dl-size    { font-size: 11px; margin: 6px 0; }
.isf-dl-btn, .isf-dl-button { font-size: 11px; padding: 6px 10px; border-radius: 16px; }

/* ── SEARCH MODAL ────────────────────────────────────────────────────────── */
.isf-search-modal-container { padding: 0 12px; }
.isf-search-input-wrapper { padding: 12px 16px; border-radius: 10px; }
.isf-search-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

/* ── FOOTER — responsive ─────────────────────────────────────────────────── */
.isf-footer { padding: 36px 16px 16px; }
@media (min-width: 768px) { .isf-footer { padding: 50px 24px 24px; } }

/* ── RELATED GRID ────────────────────────────────────────────────────────── */
.isf-related-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 600px) { .isf-related-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── DESKTOP LAYOUT ENHANCEMENTS ─────────────────────────────────────────── */
@media (min-width: 1200px) {
    .isf-main-content    { max-width: 1700px; margin: 0 auto; }
    .isf-networks-rail   { padding: 20px 4vw; }
    .isf-pills-rail      { padding: 10px 4vw; }
    .isf-mood-section    { padding: 24px 4vw 0; }
    .isf-subscribe-widget{ margin: 24px 4vw; }
    .isf-row-header      { padding: 0 4vw 14px; }
    .isf-slider-track    { padding: 4px 4vw 20px; }

    .isf-footer-container {
        grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
        gap: 40px;
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* ── MOOD PILLS — responsive ─────────────────────────────────────────────── */
.isf-mood-pills { padding: 0 12px; gap: 8px; }
.isf-mood-pill  { font-size: 12px; padding: 8px 14px; border-radius: 20px; }
@media (min-width: 768px) {
    .isf-mood-pills { padding: 0; gap: 10px; }
    .isf-mood-pill  { font-size: 13px; padding: 10px 18px; }
}

/* ── SUBSCRIBE WIDGET ────────────────────────────────────────────────────── */
.isf-subscribe-widget { margin: 16px 12px; border-radius: 12px; padding: 20px; }
@media (min-width: 768px) { .isf-subscribe-widget { margin: 24px 0; padding: 28px; } }

/* ── QUICK PREVIEW MODAL ─────────────────────────────────────────────────── */
.isf-qp-inner { border-radius: 16px; }

/* ── TOP 10 CARDS — sizes in master block at end of file ─────────────────── */
.isf-top10-rank { font-size: 56px; left: -8px; bottom: 26px; }
@media (min-width: 480px) { .isf-top10-rank { font-size: 68px; } }
@media (min-width: 1024px){ .isf-top10-rank { font-size: 80px; left: -12px; } }

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.isf-sidebar { width: 280px; }
@media (min-width: 400px) { .isf-sidebar { width: 300px; } }

/* ── CAST INFO ───────────────────────────────────────────────────────────── */
.isf-cast-info { padding: 10px; font-size: 11px; }
.isf-cast-label { flex: 0 0 58px; font-size: 11px; }

/* ── SERIES ARCHIVE ──────────────────────────────────────────────────────── */
.isf-series-archive { padding-bottom: 100px; }

/* ── PAGINATION ──────────────────────────────────────────────────────────── */
.isf-pagination { gap: 5px; padding: 14px 0; }
.isf-pagination a, .isf-pagination span { min-width: 32px; height: 32px; font-size: 12px; border-radius: 7px; }

/* ── STAR RATING ─────────────────────────────────────────────────────────── */
.isf-star { font-size: 20px; }
.isf-user-rate { gap: 8px; }

/* ── USER DASHBOARD ──────────────────────────────────────────────────────── */
.isf-dash-hero     { padding: 36px 16px 28px; }
.isf-dash-content  { padding: 20px 16px; }
.isf-dash-stat-grid { grid-template-columns: repeat(2, 1fr); }
.isf-dash-cards-grid{ grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) {
    .isf-dash-stat-grid  { grid-template-columns: repeat(3, 1fr); }
    .isf-dash-cards-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
    .isf-dash-stat-grid  { grid-template-columns: repeat(4, 1fr); }
    .isf-dash-cards-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── OVERFLOW FIX — prevent horizontal scrollbar on body ─────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }


/* ==========================================================================
   ██████  MASTER CARD + LAYOUT SYSTEM — Single source of truth
   All card-size rules live ONLY here. Do not add more card-size blocks above.
   ========================================================================== */

/* ── CARD SIZES: ~3.3 cards visible on 390px mobile (matches screenshot) ─── */
.isf-card {
    flex: 0 0 106px !important;
    border-radius: 8px !important;
    min-width: 0;
}
.isf-card img    { border-radius: 8px 8px 0 0 !important; }

@media (min-width: 380px) { .isf-card { flex: 0 0 110px !important; } }
@media (min-width: 480px) { .isf-card { flex: 0 0 126px !important; border-radius: 10px !important; } }
@media (min-width: 600px) { .isf-card { flex: 0 0 148px !important; } }
@media (min-width: 768px) { .isf-card { flex: 0 0 166px !important; border-radius: 12px !important; } }
@media (min-width: 1024px){ .isf-card { flex: 0 0 188px !important; border-radius: 12px !important; } }
@media (min-width: 1280px){ .isf-card { flex: 0 0 206px !important; } }
@media (min-width: 1440px){ .isf-card { flex: 0 0 224px !important; } }
@media (min-width: 1600px){ .isf-card { flex: 0 0 240px !important; } }

/* ── WIDE CARDS (Continue Watching — 16/9 landscape) ───────────────────── */
.isf-card-wide { flex: 0 0 172px !important; }
@media (min-width: 480px) { .isf-card-wide { flex: 0 0 208px !important; } }
@media (min-width: 600px) { .isf-card-wide { flex: 0 0 248px !important; } }
@media (min-width: 768px) { .isf-card-wide { flex: 0 0 292px !important; } }
@media (min-width: 1024px){ .isf-card-wide { flex: 0 0 336px !important; } }
@media (min-width: 1280px){ .isf-card-wide { flex: 0 0 368px !important; } }

/* ── TOP-10 CARDS ───────────────────────────────────────────────────────── */
.isf-top10-card { flex: 0 0 106px !important; }
@media (min-width: 480px) { .isf-top10-card { flex: 0 0 130px !important; } }
@media (min-width: 768px) { .isf-top10-card { flex: 0 0 158px !important; } }
@media (min-width: 1024px){ .isf-top10-card { flex: 0 0 182px !important; } }

/* ── CARD TEXT — compact labels ─────────────────────────────────────────── */
.isf-card-title {
    font-size: 11px !important;
    padding: 6px 7px 1px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.isf-card-year {
    font-size: 10px !important;
    padding: 1px 7px 8px !important;
}
@media (min-width: 768px) {
    .isf-card-title { font-size: 12px !important; }
    .isf-card-year  { font-size: 11px !important; }
}

/* Archive grid — see master grid block above */
/* isf-archive-grid sizes managed in ARCHIVE GRID — CRITICAL FIX section */


/* ── SLIDER TRACK — master gap + padding (single source of truth) ────────── */
.isf-slider-track {
    gap: 8px !important;
    padding: 4px 12px 18px !important;
}
@media (min-width: 768px) {
    .isf-slider-track {
        gap: 10px !important;
        padding: 4px 4vw 22px !important;
    }
}
@media (min-width: 1200px) {
    .isf-slider-track { gap: 12px !important; }
}

/* ── HERO SLIDER — cinematic height ─────────────────────────────────────── */
.isf-hero-slider {
    height: 85vh !important;
    min-height: 480px !important;
    max-height: none !important;
}
@media (min-width: 768px) {
    .isf-hero-slider { height: 90vh !important; }
}

/* ── HERO CONTENT position ───────────────────────────────────────────────── */
.isf-hero-content {
    bottom: 16% !important;
    padding: 0 16px !important;
}
@media (min-width: 768px) {
    .isf-hero-content {
        bottom: 20% !important;
        left: 4vw !important;
        padding: 0 !important;
        max-width: 520px !important;
    }
}

/* ── ARCHIVE GRID gap ─────────────────────────────────────────────────────── */
.isf-archive-grid { gap: 8px !important; }
@media (min-width: 768px)  { .isf-archive-grid { gap: 10px !important; } }
@media (min-width: 1200px) { .isf-archive-grid { gap: 12px !important; } }


/* ==========================================================================
   SINGLE PAGE — More Like This slider fix + smooth scroll
   ========================================================================== */

/* Full-bleed slider inside isf-section — overcome section padding */
.isf-section .isf-slider-track {
    margin-left:  -12px !important;
    margin-right: -12px !important;
    padding-left:  12px !important;
    padding-right: 12px !important;
    /* native momentum scroll on iOS */
    -webkit-overflow-scrolling: touch !important;
    /* NOTE: scroll-behavior:smooth intentionally omitted — it conflicts with
       the JS momentum-drag which writes scrollLeft directly each rAF frame */
    /* ensure flex is active */
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}
@media (min-width: 768px) {
    .isf-section .isf-slider-track {
        margin-left:  -20px !important;
        margin-right: -20px !important;
        padding-left:  20px !important;
        padding-right: 20px !important;
    }
}

/* Prevent any parent from clipping slider tracks */
.isf-single-wrap,
.isf-single-container,
.isf-section {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Cards inside section sliders — same sizes as master block */
.isf-section .isf-slider-track .isf-card {
    flex-shrink: 0 !important;
}

/* cursor:grab already defined globally at line 2158 — no duplicate needed */
.isf-slider-track:active { cursor: grabbing; }


/* ==========================================================================
   TELEGRAM BANNER — Animated Channel Promo
   ========================================================================== */

/* Google Fonts for banner (Nunito used in button/title) */
/* Already loaded via wp_enqueue_scripts if needed, fallback via @import in head */

.isf-tg-banner {
    width: 100%;
    border-radius: 16px;
    border: 1.5px solid rgba(255, 209, 0, 0.45);
    background: linear-gradient(135deg, #0f0f0f 0%, #141414 50%, #0d0d0d 100%);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    /* Static — no box-shadow pulse (was causing repaint every frame) */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin: 0 0 28px 0;
    text-decoration: none;
    display: block;
    font-family: 'Poppins', var(--font-sans);
}
.isf-tg-banner:hover {
    border-color: rgba(255, 209, 0, 0.7);
    box-shadow: 0 0 20px 2px rgba(255,209,0,0.12), 0 8px 40px rgba(0,0,0,0.7);
}

/* Removed: @keyframes isf-tgBorderPulse (box-shadow+border-color animation → repaint; replaced with CSS :hover) */

/* Scan line */
.isf-tg-banner::before {
    content: '';
    position: absolute;
    top: -40%;
    left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg, transparent 0%, rgba(255,209,0,0.04) 50%, transparent 100%);
    animation: isf-tgScanline 5s linear infinite;
    pointer-events: none;
    z-index: 10;
    will-change: transform;
}

@keyframes isf-tgScanline {
    0%   { transform: translateY(0); }
    100% { transform: translateY(450%); }
    /* translateY(450%) = 180% of banner / 40% element height — pure GPU composite */
}

/* Corner glow */
.isf-tg-banner::after {
    content: '';
    position: absolute;
    bottom: -30px; right: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,153,217,0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* Top row */
.isf-tg-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 12px;
}

/* Icon box */
.isf-tg-icon-box {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 14px;
    background: linear-gradient(145deg, #0099d9, #006da8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,153,217,0.45);
    animation: isf-tgIconFloat 3s ease-in-out infinite;
}

@keyframes isf-tgIconFloat {
    0%, 100% { transform: translateY(0); box-shadow: 0 4px 20px rgba(0,153,217,0.45); }
    50%       { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,153,217,0.6); }
}

.isf-tg-icon-box::after {
    content: '';
    position: absolute;
    top: -50%; left: 0;
    width: 40%; height: 200%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
    animation: isf-tgShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
    transform: translateX(-160%);
}

@keyframes isf-tgShimmer {
    0%        { transform: translateX(-160%); }
    60%, 100% { transform: translateX(350%); }
}

.isf-tg-icon-box svg {
    width: 40px; height: 40px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    position: relative; z-index: 1;
}

/* Title area */
.isf-tg-title-area { flex: 1; }

.isf-tg-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0099d9;
    margin-bottom: 4px;
    display: block;
}

.isf-tg-title {
    font-size: 19px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
    display: block;
}

.isf-tg-title span { color: #0099d9; }

/* Divider */
.isf-tg-divider {
    height: 1px;
    margin: 0 18px;
    background: linear-gradient(90deg, transparent, rgba(255,209,0,0.3) 30%, rgba(255,209,0,0.3) 70%, transparent);
    position: relative;
    overflow: hidden;
}

.isf-tg-divider::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: isf-tgDividerGlow 3.5s ease-in-out infinite 1s;
    will-change: transform;
    transform: translateX(-100%);
}

@keyframes isf-tgDividerGlow {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(267%); }
    /* 267% = 160vw-equivalent travel across 60%-wide element */
}

/* Features list */
.isf-tg-features {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 18px 16px;
}

.isf-tg-feature {
    display: flex;
    align-items: center;
    gap: 9px;
}

.isf-tg-star {
    font-size: 14px;
    flex-shrink: 0;
    /* Static glow — no animated filter (was causing repaint per frame) */
    filter: drop-shadow(0 0 4px rgba(255,209,0,0.8));
    animation: isf-tgStarPop 3s ease-in-out infinite;
    display: inline-block;
    will-change: transform;
}

.isf-tg-feature:nth-child(1) .isf-tg-star { animation-delay: 0s; }
.isf-tg-feature:nth-child(2) .isf-tg-star { animation-delay: 0.5s; }
.isf-tg-feature:nth-child(3) .isf-tg-star { animation-delay: 1s; }

@keyframes isf-tgStarPop {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.25); }
    /* filter removed — transform-only = GPU layer, 60fps */
}

.isf-tg-feature-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #4ADE80;
    letter-spacing: 0.2px;
}

/* Join button */
.isf-tg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 18px 16px;
    padding: 11px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0099d9, #006da8);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,153,217,0.4);
    transition: transform 0.15s, box-shadow 0.15s;
    width: calc(100% - 36px);
    text-align: center;
}

.isf-tg-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,153,217,0.6);
    color: #fff;
}

.isf-tg-btn:active { transform: translateY(0); }

.isf-tg-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: isf-tgBtnShine 3s ease-in-out infinite 1.5s;
    will-change: transform;
    transform: translateX(-100%);
}

@keyframes isf-tgBtnShine {
    0%        { transform: translateX(-100%); }
    50%, 100% { transform: translateX(267%); }
}

.isf-tg-btn svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    fill: currentColor;
}

/* Member count */
.isf-tg-members {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-bottom: 14px;
}

.isf-tg-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    animation: isf-tgDotBlink 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(74,222,128,0.8);
    flex-shrink: 0;
}

@keyframes isf-tgDotBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

.isf-tg-member-text {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.3px;
}

.isf-tg-member-count {
    color: #4ADE80;
    font-weight: 700;
}

/* ==========================================================================
   PERFORMANCE & ACCESSIBILITY — prefers-reduced-motion
   ========================================================================== */

/* ── GPU compositing hints for key animated elements ── */
/* FIX: .isf-card se translateZ(0) hataya — hundreds of GPU layers scroll jank dete the */
.isf-hero-slide,
.isf-sidebar,
.isf-lazy-loading {
    transform: translateZ(0); /* promote to own compositing layer */
}
/* Cards: GPU layer sirf hover/animation ke waqt JS se will-change set hogi */

/* ── Accessibility: stop all animations for users who prefer it ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    body::before {
        animation: none !important;
        transform: none !important;
    }

    .isf-tg-banner::before,
    .isf-tg-icon-box::after,
    .isf-tg-divider::after,
    .isf-tg-btn::before,
    .isf-tg-star {
        animation: none !important;
    }
}

/* ==========================================================================
   PATCH v7.1 — Menu/Sidebar Bug Fixes & Performance
   ========================================================================== */

/* ── Sidebar: ensure closed state is always hidden off-screen ── */
.isf-sidebar {
    transform: translateX(-110%) !important;
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform;
}
body.isf-sidebar-open .isf-sidebar,
.isf-sidebar.open {
    transform: translateX(0) !important;
}

/* ── Overlay: smooth fade in/out via opacity ── */
.isf-sidebar-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.28s ease !important;
    display: block !important; /* always in DOM, controlled by opacity */
}
body.isf-sidebar-open .isf-sidebar-overlay {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* ── Body: prevent page scroll when sidebar is open ── */
/* NOTE: JS openSidebar() sets body.style.top = '-scrollY' before adding this class
         so position:fixed doesn't jump to top — scroll position is preserved */
body.isf-sidebar-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    /* top is set dynamically by JS to -scrollY */
}

/* ── Sidebar close button: larger tap target for mobile ── */
.isf-sidebar-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}
.isf-sidebar-close:hover,
.isf-sidebar-close:active {
    background: rgba(229, 9, 20, 0.15);
}

/* ── Sidebar menu links: larger tap target ── */
.isf-sidebar-menu li a {
    min-height: 48px;
    display: flex;
    align-items: center;
}

/* ── Header scroll optimization ── */
/* NOTE: background-color/box-shadow are NOT GPU-compositable, so will-change:transform
   does not help here. Removed to avoid wasting a compositor layer. */
.isf-header {
    /* will-change intentionally omitted — see note above */
}

/* ── Smooth mobile touch feedback ── */
.isf-header-btn,
.isf-mobile-menu-trigger,
.isf-sidebar-close,
.isf-sidebar-menu li a,
.isf-nav-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ── Fix z-index stacking so sidebar always above content ── */
.isf-sidebar { z-index: 1050 !important; }
.isf-sidebar-overlay { z-index: 1049 !important; }
.isf-header { z-index: 900 !important; }
.isf-search-modal { z-index: 1100 !important; }
.isf-auth-modal { z-index: 1200 !important; }
.isf-auth-overlay { z-index: 1199 !important; }

/* ── Popular Badge (fire icon) ───────────────────────────────────────────── */
.isf-popular-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #f5a623, #e8880a);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px 3px 6px;
    border-radius: 50px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(245,166,35,0.4);
}
.isf-popular-badge i { font-size: 9px; }

/* ── Card type+rating info bar (MOVIE ⭐ 9) ──────────────────────────────── */
.isf-card-info-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 8px;
    font-size: 11px;
    font-weight: 700;
}
.isf-card-type-label {
    color: #e50914;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}
.isf-card-rating-label {
    color: #f5a623;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
}
.isf-card-rating-label i { font-size: 9px; }

/* ── CRITICAL FIX: Cards with --visible class always show ─────────────── */
.isf-card.isf-card--visible {
    opacity: 1 !important;
    animation: isf-cardIn .25s ease both !important;
}

/* Cards in archive grid always visible (no observer needed) */
.isf-archive-grid .isf-card {
    opacity: 1 !important;
    animation: isf-cardIn .2s ease both !important;
}

/* =====================================================
   EPISODE CARDS — Watch Online + Download + Server Tabs
   (netstream-v13 fix patch)
   ===================================================== */

/* Action row inside episode card */
.isf-ep-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

/* Watch Online button */
.isf-btn-watch {
    background: var(--brand-primary, #e50914);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.isf-btn-watch:hover { background: #c40812; }

/* Download button on episode card */
.isf-ep-dl-btn {
    background: transparent;
    color: var(--text-primary, #fff);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: border-color 0.2s, color 0.2s;
}
.isf-ep-dl-btn:hover { border-color: var(--brand-primary, #e50914); color: var(--brand-primary, #e50914); }

/* Server quick-tabs below episode description */
.isf-ep-servers {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.isf-ep-server-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-secondary, #ccc);
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11px;
    cursor: default;
}
.isf-ep-server-btn.active {
    background: var(--brand-primary, #e50914);
    border-color: var(--brand-primary, #e50914);
    color: #fff;
}

/* No-server label */
.isf-no-server {
    font-size: 12px;
    color: #aaa;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Episode thumbnail */
.isf-ep-thumb {
    width: 120px;
    min-width: 120px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
}

/* Modal header — title + close */
.isf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.isf-modal-ep-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

/* Modal server switcher tabs */
.isf-modal-server-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.isf-ms-label {
    color: #aaa;
    font-size: 12px;
    font-weight: 600;
}
.isf-ms-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.isf-ms-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #ccc;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s, background-color 0.15s, color 0.15s;
}
.isf-ms-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.isf-ms-btn.active {
    background: var(--brand-primary, #e50914);
    border-color: var(--brand-primary, #e50914);
    color: #fff;
}

/* Download button inside modal */
.isf-dl-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}
.isf-dl-button:hover { background: rgba(255,255,255,0.2); }

/* Error inside episodes list */
.isf-error {
    padding: 20px;
    color: #ff6b6b;
    text-align: center;
    font-size: 14px;
}

@media (max-width: 600px) {
    .isf-ep-thumb { width: 90px; min-width: 90px; height: 54px; }
    .isf-btn-watch { font-size: 12px; padding: 6px 12px; }
    .isf-ep-dl-btn { font-size: 11px; padding: 5px 10px; }
}

/* ================================================================
   SINGLE EPISODE PAGE — single-sv_episode.php
   Added: Fix for missing sv_episode template
================================================================ */
#isf-single-episode { min-height: 100vh; background: var(--bg-primary, #0a0a0f); color: #fff; }

.isf-ep-backdrop {
    position: relative; height: 340px; background-size: cover;
    background-position: center top; background-color: #111;
}
.isf-ep-backdrop-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,10,15,.5) 0%, rgba(10,10,15,1) 100%);
}

.isf-ep-main { position: relative; margin-top: -120px; padding: 0 16px 60px; max-width: 960px; margin-left: auto; margin-right: auto; }

.isf-ep-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 18px; flex-wrap: wrap; }
.isf-ep-back-btn { color: var(--brand-primary, #e50914); text-decoration: none; font-weight: 600; }
.isf-ep-back-btn:hover { text-decoration: underline; }
.isf-ep-bc-sep { color: #555; }

.isf-ep-title { font-size: clamp(1.3rem, 4vw, 2rem); font-weight: 700; margin: 0 0 10px; line-height: 1.25; }
.isf-ep-badge { background: var(--brand-primary, #e50914); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: .8em; vertical-align: middle; margin-right: 6px; }

.isf-ep-meta-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #aaa; margin-bottom: 22px; }
.isf-ep-meta-item i { margin-right: 4px; }
.isf-quality-badge { background: #222; border: 1px solid #444; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }

.isf-ep-player-section { margin-bottom: 28px; }
.isf-ep-server-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.isf-ep-srv-tab {
    background: #1a1a2e; border: 1px solid #333; color: #ccc;
    padding: 7px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: .2s;
}
.isf-ep-srv-tab.active,
.isf-ep-srv-tab:hover { background: var(--brand-primary, #e50914); border-color: var(--brand-primary, #e50914); color: #fff; }

.isf-ep-iframe-wrap {
    position: relative; width: 100%; padding-top: 56.25%;
    background: #000; border-radius: 8px; overflow: hidden;
}
.isf-ep-iframe-wrap iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.isf-ep-dl-row { margin-top: 12px; }

.isf-ep-no-server {
    background: #1a1a1a; border: 1px solid #333; border-radius: 8px;
    padding: 24px; text-align: center; color: #aaa; font-size: 15px; margin-bottom: 24px;
}
.isf-ep-no-server i { margin-right: 8px; color: #e50914; }

.isf-ep-description { margin-top: 28px; }
.isf-ep-description h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; color: #eee; }
.isf-ep-description p { color: #bbb; line-height: 1.7; font-size: 14px; }

/* ================================================================
   EPISODE SECTION — PREMIUM REDESIGN (Netstream v14)
   Overrides old episode card styles for a polished streaming look.
================================================================ */

/* ── Outer Container ─────────────────────────────────────────── */
.isf-episodes-container {
    margin-top: 28px;
}

/* ── Season Header ───────────────────────────────────────────── */
.isf-season-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.isf-season-header h2 {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.3px;
}

.isf-ep-count-badge {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    background: rgba(255,255,255,0.07);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

/* ── Season Dropdown ─────────────────────────────────────────── */
.isf-season-selector {
    position: relative;
}

#seasonSelect {
    background: #1c1c1c !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #eee !important;
    padding: 9px 40px 9px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 130px;
}

#seasonSelect:focus,
#seasonSelect:hover {
    border-color: var(--brand-primary, #e50914) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(229,9,20,0.12) !important;
}

/* ── Episode List ────────────────────────────────────────────── */
#episodesList,
.isf-episode-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
}

/* ── Episode Item Card ───────────────────────────────────────── */
.isf-episode-item {
    display: flex !important;
    gap: 16px !important;
    padding: 14px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    align-items: flex-start !important;
    border-radius: 10px !important;
    transition: background 0.18s ease;
    background: transparent;
    cursor: default;
}

.isf-episode-item:hover {
    background: rgba(255,255,255,0.04) !important;
}

.isf-episode-item:last-child {
    border-bottom: none !important;
}

/* ── Thumbnail Wrapper ───────────────────────────────────────── */
.isf-ep-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 160px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1a;
    cursor: pointer;
}

/* Override old ep-thumb sizing */
.isf-ep-thumb {
    width: 160px !important;
    min-width: 160px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
    transition: transform 0.35s ease, filter 0.3s ease !important;
}

.isf-ep-thumb-wrap:hover .isf-ep-thumb {
    transform: scale(1.07);
    filter: brightness(0.65);
}

/* ── Play Overlay (hover) ────────────────────────────────────── */
.isf-ep-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.22s ease;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

.isf-ep-thumb-wrap:hover .isf-ep-play-overlay {
    opacity: 1;
}

.isf-ep-play-overlay-icon {
    width: 40px;
    height: 40px;
    background: rgba(229,9,20,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.85);
    transition: transform 0.22s ease;
    backdrop-filter: blur(2px);
}

.isf-ep-thumb-wrap:hover .isf-ep-play-overlay-icon {
    transform: scale(1);
}

.isf-ep-play-overlay-icon i {
    font-size: 14px;
    color: #fff;
    margin-left: 2px;
}

/* ── Episode Number Badge (overlay) ─────────────────────────── */
.isf-ep-num-badge {
    position: absolute;
    bottom: 6px;
    left: 7px;
    background: rgba(0,0,0,0.72);
    color: #ddd;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.6px;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
}

/* ── No thumbnail fallback ───────────────────────────────────── */
.isf-ep-no-thumb {
    width: 160px;
    min-width: 160px;
    height: 90px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 22px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.06);
}

/* ── Episode Info Block ──────────────────────────────────────── */
.isf-episode-info {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Episode number label */
.isf-episode-number {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 0 !important;
}

/* Episode title */
.isf-episode-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ececec !important;
    line-height: 1.3 !important;
    margin: 0 0 4px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Episode description */
.isf-episode-desc {
    font-size: 12.5px !important;
    color: #777 !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* ── Action Buttons Row ──────────────────────────────────────── */
.isf-ep-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 4px !important;
}

/* Watch Online button */
.isf-btn-watch {
    background: var(--brand-primary, #e50914) !important;
    color: #fff !important;
    border: none !important;
    padding: 7px 16px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.2s, transform 0.15s !important;
    letter-spacing: 0.2px;
}

.isf-btn-watch:hover {
    background: #c50813 !important;
    transform: translateY(-1px) !important;
}

.isf-btn-watch i { font-size: 11px !important; }

/* Download button */
.isf-ep-dl-btn {
    background: rgba(255,255,255,0.06) !important;
    color: #aaa !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    padding: 6px 13px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: opacity 0.2s, transform 0.2s, background-color 0.2s, color 0.2s !important;
}

.isf-ep-dl-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* ── Server Tabs (below description) ────────────────────────── */
.isf-ep-servers {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 6px !important;
}

.isf-ep-server-btn {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #777 !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: default !important;
}

.isf-ep-server-btn.active {
    background: rgba(229,9,20,0.12) !important;
    border-color: rgba(229,9,20,0.4) !important;
    color: #ff5460 !important;
}

/* ── No Server Available ─────────────────────────────────────── */
.isf-no-server {
    font-size: 12px !important;
    color: #555 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255,255,255,0.03) !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

.isf-no-server i { color: #444 !important; font-size: 12px !important; }

/* ── Loading & Empty States ──────────────────────────────────── */
.isf-loading-episodes {
    padding: 40px 20px !important;
    text-align: center !important;
    color: #555 !important;
    font-size: 13px !important;
}

.isf-loading-episodes i {
    color: var(--brand-primary, #e50914) !important;
    margin-right: 8px !important;
}

.isf-no-episodes {
    padding: 30px 16px !important;
    text-align: center !important;
    color: #666 !important;
    font-size: 13px !important;
    background: rgba(255,255,255,0.03) !important;
    border-radius: 10px !important;
    border: 1px dashed rgba(255,255,255,0.1) !important;
}

/* ── Mobile Responsive ───────────────────────────────────────── */
@media (max-width: 600px) {
    .isf-ep-thumb-wrap {
        width: 112px;
        height: 63px;
    }
    .isf-ep-thumb {
        width: 112px !important;
        min-width: 112px !important;
        height: 63px !important;
    }
    .isf-ep-no-thumb {
        width: 112px;
        min-width: 112px;
        height: 63px;
    }
    .isf-episode-item {
        gap: 12px !important;
    }
    .isf-episode-title { font-size: 13.5px !important; }
    .isf-episode-desc { display: none !important; }
    .isf-btn-watch { font-size: 12px !important; padding: 6px 12px !important; }
    .isf-season-header h2 { font-size: 1.15rem !important; }
}


/* ================================================================
   MOVIE PAGE — STREAMING SERVERS + DOWNLOAD LINKS (v14)
================================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */
.isf-movie-servers-section,
.isf-movie-dl-section {
    background: #111114;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 24px 24px 20px;
    margin: 24px 0;
}

/* ── Section header row ──────────────────────────────────────── */
.isf-msec-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.isf-msec-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.isf-msec-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(229,9,20,0.12);
    border: 1px solid rgba(229,9,20,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.isf-msec-icon-wrap i {
    color: #e50914;
    font-size: 18px;
}

.isf-msec-icon-dl {
    background: rgba(37,99,235,0.12) !important;
    border-color: rgba(37,99,235,0.25) !important;
}

.isf-msec-icon-dl i {
    color: #60a5fa !important;
}

.isf-msec-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 3px;
    letter-spacing: -0.2px;
}

.isf-msec-sub {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.isf-srv-count-badge {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #888;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    align-self: center;
}

/* ── Server Cards Grid ───────────────────────────────────────── */
.isf-movie-srv-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.isf-movie-srv-card {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    text-align: left;
    color: #fff;
}

.isf-movie-srv-card:hover {
    background: rgba(229,9,20,0.07);
    border-color: rgba(229,9,20,0.3);
    transform: translateY(-1px);
}

.isf-movie-srv-card.isf-msrv-active {
    background: rgba(229,9,20,0.1);
    border-color: rgba(229,9,20,0.45);
}

/* Server number */
.isf-msrv-num {
    font-size: 22px;
    font-weight: 900;
    color: rgba(255,255,255,0.1);
    min-width: 32px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.isf-movie-srv-card.isf-msrv-active .isf-msrv-num,
.isf-movie-srv-card:hover .isf-msrv-num {
    color: rgba(229,9,20,0.4);
}

/* Play button circle */
.isf-msrv-play-wrap {
    flex-shrink: 0;
}

.isf-msrv-play-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s;
}

.isf-msrv-play-btn i {
    font-size: 12px;
    color: #aaa;
    margin-left: 2px;
    transition: color 0.18s;
}

.isf-movie-srv-card:hover .isf-msrv-play-btn,
.isf-movie-srv-card.isf-msrv-active .isf-msrv-play-btn {
    background: #e50914;
    border-color: #e50914;
}

.isf-movie-srv-card:hover .isf-msrv-play-btn i,
.isf-movie-srv-card.isf-msrv-active .isf-msrv-play-btn i {
    color: #fff;
}

/* Name + type */
.isf-msrv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.isf-msrv-name {
    font-size: 14px;
    font-weight: 700;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.isf-msrv-type {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.isf-msrv-type i {
    margin-right: 4px;
    color: #555;
}

.isf-movie-srv-card:hover .isf-msrv-name,
.isf-movie-srv-card.isf-msrv-active .isf-msrv-name {
    color: #fff;
}

.isf-movie-srv-card:hover .isf-msrv-type,
.isf-movie-srv-card.isf-msrv-active .isf-msrv-type {
    color: #e87070;
}

/* Arrow */
.isf-msrv-arrow {
    color: #333;
    font-size: 12px;
    transition: color 0.18s, transform 0.18s;
}

.isf-movie-srv-card:hover .isf-msrv-arrow,
.isf-movie-srv-card.isf-msrv-active .isf-msrv-arrow {
    color: #e50914;
    transform: translateX(3px);
}

/* ── Download List ───────────────────────────────────────────── */
.isf-movie-dl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.isf-movie-dl-row {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    transition: background 0.18s, border-color 0.18s;
}

.isf-movie-dl-row:hover {
    background: rgba(37,99,235,0.06);
    border-color: rgba(37,99,235,0.2);
}

/* Quality badge */
.isf-mdl-quality {
    font-size: 13px;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    min-width: 56px;
    text-align: center;
}

.isf-q-4k   { background: rgba(124,58,237,0.18); color: #a78bfa; border: 1px solid rgba(124,58,237,0.35); }
.isf-q-1080 { background: rgba(37,99,235,0.15);  color: #93c5fd; border: 1px solid rgba(37,99,235,0.3); }
.isf-q-720  { background: rgba(22,163,74,0.15);   color: #86efac; border: 1px solid rgba(22,163,74,0.3); }
.isf-q-sd   { background: rgba(229,9,20,0.12);    color: #fca5a5; border: 1px solid rgba(229,9,20,0.3); }

/* Size */
.isf-mdl-size {
    font-size: 12.5px;
    color: #666;
    font-weight: 600;
    white-space: nowrap;
}

.isf-mdl-size i {
    margin-right: 5px;
    color: #555;
}

/* Flex gap pushes buttons right */
.isf-mdl-flex-gap { flex: 1; }

/* Action buttons */
.isf-mdl-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.isf-mdl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.18s, transform 0.18s, background-color 0.18s, color 0.18s;
    cursor: pointer;
}

.isf-mdl-primary {
    background: #2563eb;
    color: #fff;
    border: 1px solid transparent;
}

.isf-mdl-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    color: #fff;
}

.isf-mdl-mirror {
    background: rgba(255,255,255,0.06);
    color: #aaa;
    border: 1px solid rgba(255,255,255,0.1);
}

.isf-mdl-mirror:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .isf-movie-servers-section,
    .isf-movie-dl-section {
        padding: 16px 14px;
        border-radius: 10px;
    }
    .isf-msrv-num { font-size: 16px; min-width: 22px; }
    .isf-movie-srv-card { padding: 11px 12px; gap: 10px; }
    .isf-msrv-play-btn { width: 32px; height: 32px; }
    .isf-msrv-name { font-size: 13px; }
    .isf-movie-dl-row { padding: 11px 12px; }
    .isf-mdl-flex-gap { display: none; }
    .isf-mdl-btn { padding: 7px 14px; font-size: 12px; }
}


/* ══════════════════════════════════════════════════════════════════
   BADGE SYSTEM REDESIGN v2.0
   Bugs Fixed:
     1. .isf-card-badge.badge-top — was used in templates but had
        ZERO CSS rules → now defined (gold gradient).
     2. --glow-rgb CSS variable — used in multiple badge blocks but
        never declared in :root → fixed, no more invisible badges.
     3. Duplicate .isf-card-badge / .isf-card-quality rules at lines
        744, 5103, 5128, 5530, 5547, 6069, 6080 caused cascade
        conflicts → this final block takes full precedence.
     4. .isf-card-imdb used old non-pill style inconsistent with the
        .isf-card-rating-badge → unified to match.
   Design Upgrade: all badges → pill shape, glassmorphism, 
   colour-coded gradients, smooth hover glow, consistent z-index.
══════════════════════════════════════════════════════════════════ */

/* BUG FIX 1 — --glow-rgb / --glow-h were referenced but never defined */
:root {
    --glow-rgb: 229, 9, 20;
    --glow-h:   354;
}

/* ── Shared badge font ─────────────────────────────────────────── */
.isf-card-badge,
.isf-card-quality,
.isf-card-rating-badge,
.isf-card-imdb {
    font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif);
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════════
   QUALITY BADGE  (top-right)  — e.g. HD, 4K, CAM
════════════════════════════════════════════════════════════════ */
.isf-card-quality {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(0, 230, 118, 0.55) !important;
    color: #00e676 !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    padding: 3px 9px !important;
    border-radius: 50px !important;
    z-index: 10 !important;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(0, 230, 118, 0.45);
    transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
}
.isf-card:hover .isf-card-quality {
    background: rgba(0, 230, 118, 0.14) !important;
    border-color: rgba(0, 230, 118, 0.9) !important;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.5), 0 0 24px rgba(0, 230, 118, 0.18) !important;
}

/* ════════════════════════════════════════════════════════════════
   LEFT BADGE  — base (top-left corner label)
════════════════════════════════════════════════════════════════ */
.isf-card-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    padding: 3px 10px !important;
    border-radius: 50px !important;
    z-index: 10 !important;
    background: linear-gradient(135deg, #E50914 0%, #ff4d4d 100%) !important;
    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.45) !important;
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: box-shadow 0.3s ease !important;
    border: none !important;
}
.isf-card:hover .isf-card-badge {
    box-shadow: 0 0 14px rgba(229, 9, 20, 0.65), 0 0 30px rgba(229, 9, 20, 0.25) !important;
}

/* ── badge-new (blue) ─────────────────────────────────────────── */
.isf-card-badge.badge-new {
    background: linear-gradient(135deg, #00A8E1 0%, #00cfff 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 168, 225, 0.45) !important;
}
.isf-card:hover .isf-card-badge.badge-new {
    box-shadow: 0 0 14px rgba(0, 168, 225, 0.65), 0 0 30px rgba(0, 168, 225, 0.25) !important;
}

/* ── badge-top  BUG FIX 2 — was used in templates, had NO CSS ─── */
.isf-card-badge.badge-top {
    background: linear-gradient(135deg, #f5c518 0%, #ffaa00 100%) !important;
    color: #1a1a1a !important;
    box-shadow: 0 2px 10px rgba(245, 197, 24, 0.45) !important;
    text-shadow: none !important;
}
.isf-card:hover .isf-card-badge.badge-top {
    box-shadow: 0 0 14px rgba(245, 197, 24, 0.65), 0 0 30px rgba(245, 197, 24, 0.25) !important;
}

/* ── badge-trending (orange) ──────────────────────────────────── */
.isf-card-badge.badge-trending {
    background: linear-gradient(135deg, #ff6b00 0%, #ff9500 100%) !important;
    box-shadow: 0 2px 10px rgba(255, 107, 0, 0.45) !important;
}
.isf-card:hover .isf-card-badge.badge-trending {
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.65), 0 0 30px rgba(255, 107, 0, 0.25) !important;
}

/* ── badge-hot (red pulse) ────────────────────────────────────── */
.isf-card-badge.badge-hot {
    background: linear-gradient(135deg, #e50914 0%, #ff4d4d 100%) !important;
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               isf-badgeHotPulse 1.8s ease-in-out 0.5s infinite !important;
}
@keyframes isf-badgeHotPulse {
    0%,  100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.55); }
    50%       { box-shadow: 0 0 0 5px rgba(229, 9, 20, 0); }
}

/* ── badge-live (red blink) ───────────────────────────────────── */
.isf-card-badge.badge-live {
    background: linear-gradient(135deg, #FF3B30 0%, #ff6b6b 100%) !important;
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               isf-badgeLivePulse 1.5s ease-in-out 0.5s infinite !important;
}
@keyframes isf-badgeLivePulse {
    0%,  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6); }
    50%       { box-shadow: 0 0 0 5px rgba(255, 59, 48, 0); }
}

/* ════════════════════════════════════════════════════════════════
   RATING BADGE  (bottom-left, visible on hover)
════════════════════════════════════════════════════════════════ */
.isf-card-rating-badge {
    position: absolute !important;
    bottom: 44px !important;
    left: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: rgba(0, 0, 0, 0.76) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(245, 197, 24, 0.35) !important;
    border-radius: 50px !important;
    padding: 3px 9px !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #f5c518 !important;
    z-index: 10 !important;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.28s ease, transform 0.28s ease,
                box-shadow 0.28s ease, border-color 0.28s ease,
                color 0.28s ease !important;
}
.isf-card:hover .isf-card-rating-badge {
    opacity: 1 !important;
    transform: translateY(0) !important;
    border-color: rgba(245, 197, 24, 0.78) !important;
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.45) !important;
    color: #fff9c4 !important;
    text-shadow: 0 0 8px rgba(245, 197, 24, 0.65);
}
.isf-card-rating-badge i { margin-right: 1px; font-size: 8px; }

/* ════════════════════════════════════════════════════════════════
   IMDB BADGE  (related cards — upgraded to pill, matches rating)
   BUG FIX 3 — old style used flat border-radius:3px, no pill
════════════════════════════════════════════════════════════════ */
.isf-card-imdb {
    position: absolute !important;
    bottom: 44px !important;
    left: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: rgba(0, 0, 0, 0.76) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(245, 197, 24, 0.45) !important;
    border-radius: 50px !important;
    padding: 3px 9px !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #f5c518 !important;
    z-index: 10 !important;
}
.isf-card-imdb i { font-size: 8px; }

/* ════════════════════════════════════════════════════════════════
   DETAIL PAGE BADGES  (.isf-badge, .isf-badge-age, .isf-badge-quality)
════════════════════════════════════════════════════════════════ */
.isf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 700;
    color: #ccc;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.isf-badge:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}
.isf-badge i { font-size: 10px; }

.isf-badge-age {
    border-color: rgba(255, 107, 53, 0.6);
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.08);
}
.isf-badge-age:hover {
    background: rgba(255, 107, 53, 0.15);
    border-color: rgba(255, 107, 53, 0.9);
}

.isf-badge-quality {
    border-color: rgba(0, 230, 118, 0.55);
    color: #00e676;
    background: rgba(0, 230, 118, 0.08);
    text-shadow: 0 0 6px rgba(0, 230, 118, 0.4);
}
.isf-badge-quality:hover {
    background: rgba(0, 230, 118, 0.15);
    border-color: rgba(0, 230, 118, 0.9);
}

/* ── End Badge Redesign v2.0 ───────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   🎬 PREMIUM UPGRADE v9.0 — Cinematic Poster + Animated Cards
   ════════════════════════════════════════════════════════════════ */

/* ── Keyframe Animations ─────────────────────────────────────── */
@keyframes isf-poster-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(229,9,20,0.5), 0 0 40px rgba(229,9,20,0.2), 0 20px 60px rgba(0,0,0,0.9); }
    50%       { box-shadow: 0 0 30px rgba(229,9,20,0.8), 0 0 60px rgba(229,9,20,0.35), 0 20px 60px rgba(0,0,0,0.9); }
}
@keyframes isf-poster-float {
    0%, 100% { transform: translateY(0px) rotate(-1deg); }
    50%       { transform: translateY(-6px) rotate(-1deg); }
}
@keyframes isf-card-shimmer-reveal {
    0%   { opacity: 0; transform: translateX(-100%); }
    100% { opacity: 1; transform: translateX(100%); }
}
@keyframes isf-badge-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.08); opacity: 0.85; }
}
@keyframes isf-play-pop {
    0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
    60%  { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
@keyframes isf-star-spin {
    0%   { transform: rotate(0deg) scale(0.5); opacity: 0; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}
@keyframes isf-corner-draw {
    0%   { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes isf-border-rotate {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes isf-card-entrance {
    0%   { opacity: 0; transform: translateY(24px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes isf-hot-glow {
    0%, 100% { text-shadow: 0 0 8px rgba(255,107,53,0.8); }
    50%       { text-shadow: 0 0 16px rgba(255,200,0,0.9); }
}

/* ── Hero Upgrade: Taller + Stronger Gradient ────────────────── */
.isf-movie-hero {
    height: 340px !important;
}
.isf-movie-backdrop {
    filter: brightness(0.35) saturate(1.2) !important;
}
.isf-movie-hero-gradient {
    background: linear-gradient(
        180deg,
        rgba(4,4,5,0.1) 0%,
        rgba(4,4,5,0.4) 40%,
        rgba(4,4,5,0.85) 75%,
        var(--bg-base, #040405) 100%
    ) !important;
}

/* ── Premium Poster Column ───────────────────────────────────── */
.isf-movie-poster-col {
    flex: 0 0 140px !important;
    position: relative;
}

/* Animated glowing border frame */
.isf-movie-poster-col::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e50914, #ff6b00, #f5c518, #e50914);
    background-size: 300% 300%;
    animation: isf-border-rotate 3s ease infinite;
    z-index: 0;
    opacity: 0.85;
}

/* Corner ornaments */
.isf-movie-poster-col::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: transparent;
    z-index: 1;
    pointer-events: none;
}

/* Poster image premium styles */
.isf-movie-poster {
    width: 140px !important;
    height: 210px !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 2;
    animation: isf-poster-float 4s ease-in-out infinite;
    transition: transform 0.3s ease;
    display: block;
}

/* Poster hover: stop float, slight scale */
.isf-movie-poster-col:hover .isf-movie-poster {
    animation-play-state: paused;
    transform: scale(1.03) rotate(0deg) !important;
}

/* Glow behind poster */
.isf-poster-glow {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 20px;
    background: rgba(229,9,20,0.6);
    filter: blur(18px);
    border-radius: 50%;
    z-index: 1;
    animation: isf-poster-glow 3s ease-in-out infinite;
}

/* Quality badge on poster */
.isf-poster-quality-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #f5c518, #ff9900);
    color: #000;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 20px;
    z-index: 10;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(245,197,24,0.5);
}

/* ── Movie Card Wrap Spacing ─────────────────────────────────── */
.isf-movie-card-wrap {
    margin-top: -105px !important;
    gap: 20px !important;
    padding: 0 16px !important;
    align-items: flex-end;
}

.isf-movie-info-col {
    padding-top: 100px !important;
}

/* ── Movie Title Upgrade ─────────────────────────────────────── */
.isf-movie-title {
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff 60%, rgba(255,255,255,0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
}

/* ── CARDS — Ultra Rounded + Animated ───────────────────────── */
.isf-card {
    border-radius: 18px !important;
    overflow: hidden;
    position: relative;
    background: #111;
    transform: translateZ(0);
    transition:
        transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow 0.35s ease !important;
    animation: isf-card-entrance 0.5s ease both;
}

/* Staggered entrance animation */
.isf-slider-track .isf-card:nth-child(1)  { animation-delay: 0.05s; }
.isf-slider-track .isf-card:nth-child(2)  { animation-delay: 0.10s; }
.isf-slider-track .isf-card:nth-child(3)  { animation-delay: 0.15s; }
.isf-slider-track .isf-card:nth-child(4)  { animation-delay: 0.20s; }
.isf-slider-track .isf-card:nth-child(5)  { animation-delay: 0.25s; }
.isf-slider-track .isf-card:nth-child(6)  { animation-delay: 0.30s; }
.isf-slider-track .isf-card:nth-child(7)  { animation-delay: 0.35s; }
.isf-slider-track .isf-card:nth-child(8)  { animation-delay: 0.40s; }

/* Hover lift + glow */
.isf-card:hover {
    transform: translateY(-10px) scale(1.04) !important;
    box-shadow:
        0 20px 40px rgba(0,0,0,0.7),
        0 0 0 2px rgba(229,9,20,0.5),
        0 0 30px rgba(229,9,20,0.15) !important;
    z-index: 10;
}

/* Card image zoom on hover */
.isf-card img {
    border-radius: 18px 18px 0 0;
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94) !important;
    transform-origin: center top;
}
.isf-card:hover img {
    transform: scale(1.08) !important;
}

/* Shimmer sweep on hover */
.isf-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.08) 50%,
        transparent 60%
    );
    transition: left 0.6s ease;
    z-index: 5;
    pointer-events: none;
    border-radius: 18px;
}
.isf-card:hover::before {
    left: 150%;
}

/* Dark overlay gradient at bottom */
.isf-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, transparent 100%);
    border-radius: 0 0 18px 18px;
    pointer-events: none;
    z-index: 2;
}

/* ── Play Button Overlay ─────────────────────────────────────── */
.isf-card-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 48px;
    height: 48px;
    background: rgba(229,9,20,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    z-index: 6;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 6px rgba(229,9,20,0.2);
}
.isf-card-play-overlay i {
    color: #fff;
    font-size: 18px;
    margin-left: 3px;
}
.isf-card:hover .isf-card-play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ── Card Rating Badge (bottom left) ────────────────────────── */
.isf-card-imdb {
    position: absolute !important;
    bottom: 40px !important;
    left: 8px !important;
    background: linear-gradient(135deg, rgba(245,197,24,0.2), rgba(0,0,0,0.85)) !important;
    border: 1px solid rgba(245,197,24,0.4) !important;
    color: #f5c518 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    border-radius: 20px !important;
    backdrop-filter: blur(6px);
    z-index: 7 !important;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: transform 0.2s ease;
}
.isf-card:hover .isf-card-imdb {
    transform: scale(1.08);
}

/* ── Card Title Area ─────────────────────────────────────────── */
.isf-card-title {
    position: absolute !important;
    bottom: 18px !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 10px 0 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #fff !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 7;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    letter-spacing: 0.1px;
}

.isf-card-year {
    position: absolute !important;
    bottom: 5px !important;
    left: 10px !important;
    right: 10px !important;
    padding: 0 !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.55) !important;
    z-index: 7;
}

/* ── Card Badges (NEW / HOT) ─────────────────────────────────── */
.isf-card-badge {
    border-radius: 20px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    animation: isf-badge-pulse 2s ease-in-out infinite;
    z-index: 8 !important;
    top: 8px !important;
    left: 8px !important;
    backdrop-filter: blur(4px);
}

.isf-card-badge.badge-new {
    background: linear-gradient(135deg, #00c853, #00e676) !important;
    box-shadow: 0 2px 10px rgba(0,200,83,0.5);
    color: #000 !important;
}

.isf-card-badge:not(.badge-new) {
    background: linear-gradient(135deg, #e50914, #ff4444) !important;
    box-shadow: 0 2px 10px rgba(229,9,20,0.5);
}

/* ── Card Quality Badge ──────────────────────────────────────── */
.isf-card-quality {
    border-radius: 20px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,230,118,0.5) !important;
    z-index: 8 !important;
}

/* ── Reco Grid Cards ─────────────────────────────────────────── */
.isf-reco-grid .isf-card,
.isf-reco-grid a {
    border-radius: 18px !important;
}

/* ── Related / More Like This Grid ──────────────────────────── */
.isf-slider-track {
    padding-bottom: 14px !important;
    gap: 10px !important;
}

/* ── Section Title Upgrade ───────────────────────────────────── */
.isf-section-title {
    position: relative;
    padding-left: 14px !important;
    font-size: 17px !important;
    letter-spacing: 0.02em;
}
.isf-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(180deg, #e50914, #ff6b00);
    border-radius: 4px;
}

/* ── Extra Info Grid (Language/Subtitles) Upgrade ───────────── */
.isf-extra-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
    padding: 12px !important;
}

.isf-info-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.isf-info-key {
    font-size: 10px !important;
    color: rgba(255,255,255,0.45) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.isf-info-val {
    font-size: 13px !important;
    color: #fff !important;
    font-weight: 700;
}

/* ── Trending Badge on Poster ────────────────────────────────── */
.isf-trending-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #e50914, #ff6b00);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 20;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(229,9,20,0.5);
    animation: isf-badge-pulse 2.5s ease-in-out infinite;
}

/* ── Responsive adjustments ──────────────────────────────────── */
@media (max-width: 600px) {
    .isf-movie-hero { height: 300px !important; }
    .isf-movie-card-wrap { margin-top: -90px !important; gap: 14px !important; }
    .isf-movie-poster-col { flex: 0 0 120px !important; }
    .isf-movie-poster { width: 120px !important; height: 180px !important; }
    .isf-movie-title { font-size: 19px !important; }
    .isf-extra-info { grid-template-columns: 1fr 1fr !important; }
    .isf-card { border-radius: 16px !important; }
}

/* ── End Premium Upgrade v9.0 ────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   🎴 ARCHIVE GRID CARDS — Ultra Rounded + Animated (v9.0)
   ════════════════════════════════════════════════════════════════ */

.isf-movie-card {
    border-radius: 18px !important;
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow 0.35s ease !important;
    animation: isf-card-entrance 0.5s ease both;
}

.isf-movie-card:hover {
    transform: translateY(-10px) scale(1.04) !important;
    box-shadow:
        0 20px 40px rgba(0,0,0,0.7),
        0 0 0 2px rgba(229,9,20,0.5),
        0 0 30px rgba(229,9,20,0.15) !important;
    z-index: 20;
}

/* Image zoom on hover */
.isf-movie-card img,
.isf-card-link img {
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94) !important;
    transform-origin: center top;
    border-radius: 0 !important;
}
.isf-movie-card:hover img {
    transform: scale(1.08) !important;
}

/* Shimmer on hover */
.isf-movie-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.07) 50%,
        transparent 60%
    );
    transition: left 0.6s ease;
    z-index: 15;
    pointer-events: none;
}
.isf-movie-card:hover::before {
    left: 150%;
}

/* Play button reveal on hover */
.isf-card-link::after {
    content: '\f144';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: calc(50% - 40px);
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 48px;
    height: 48px;
    background: rgba(229,9,20,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    line-height: 48px;
    text-align: center;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    z-index: 10;
    box-shadow: 0 0 0 8px rgba(229,9,20,0.2);
    padding-left: 4px;
}
.isf-movie-card:hover .isf-card-link::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Card info area rounded bottom */
.isf-card-info {
    background: linear-gradient(
        0deg,
        rgba(10,10,15,1) 0%,
        rgba(20,20,30,0.95) 100%
    );
    border-radius: 0 0 18px 18px;
    padding: 10px 10px 12px !important;
}

.isf-card-title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1px;
}

/* Quality badge more rounded */
.isf-card-quality {
    border-radius: 20px !important;
    backdrop-filter: blur(6px);
}

/* Card badge (NEW/HOT) more rounded + animated */
.isf-card-badge {
    border-radius: 20px !important;
    padding: 3px 9px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    animation: isf-badge-pulse 2s ease-in-out infinite;
}

.isf-card-badge.badge-top {
    background: linear-gradient(135deg, #e50914, #ff4444) !important;
    box-shadow: 0 2px 10px rgba(229,9,20,0.5);
}

/* Stagger archive grid cards */
.isf-archive-grid .isf-movie-card:nth-child(1)  { animation-delay: 0.03s; }
.isf-archive-grid .isf-movie-card:nth-child(2)  { animation-delay: 0.07s; }
.isf-archive-grid .isf-movie-card:nth-child(3)  { animation-delay: 0.11s; }
.isf-archive-grid .isf-movie-card:nth-child(4)  { animation-delay: 0.15s; }
.isf-archive-grid .isf-movie-card:nth-child(5)  { animation-delay: 0.19s; }
.isf-archive-grid .isf-movie-card:nth-child(6)  { animation-delay: 0.23s; }
.isf-archive-grid .isf-movie-card:nth-child(7)  { animation-delay: 0.27s; }
.isf-archive-grid .isf-movie-card:nth-child(8)  { animation-delay: 0.31s; }
.isf-archive-grid .isf-movie-card:nth-child(9)  { animation-delay: 0.35s; }
.isf-archive-grid .isf-movie-card:nth-child(10) { animation-delay: 0.39s; }
.isf-archive-grid .isf-movie-card:nth-child(11) { animation-delay: 0.43s; }
.isf-archive-grid .isf-movie-card:nth-child(12) { animation-delay: 0.47s; }

/* ── End Archive Cards v9.0 ──────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   🛠 CARD FIX v9.1 — Title, Rating, Animation Proper Fix
   ════════════════════════════════════════════════════════════════ */

/* ─── RESET: Remove broken absolute on home-page cards ──────── */
.isf-card .isf-card-title {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 8px 10px 2px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    text-shadow: none !important;
    letter-spacing: 0.1px;
    background: transparent;
}

.isf-card .isf-card-year {
    position: static !important;
    bottom: auto !important;
    padding: 0 10px 8px !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.45) !important;
    display: block !important;
}

/* ─── ONLY slider-track related cards get absolute title ─────── */
.isf-slider-track .isf-card .isf-card-title {
    position: absolute !important;
    bottom: 20px !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: transparent !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9) !important;
    z-index: 7;
}
.isf-slider-track .isf-card .isf-card-year {
    position: absolute !important;
    bottom: 6px !important;
    left: 10px !important;
    padding: 0 !important;
    z-index: 7;
}

/* ─── REMOVE double play button from CSS (PHP already adds it) ── */
.isf-card-link::after {
    display: none !important;
    content: none !important;
}

/* ─── Card overlay play — bigger, better ────────────────────── */
.isf-card-overlay-play {
    width: 46px !important;
    height: 46px !important;
    background: rgba(229,9,20,0.95) !important;
    box-shadow:
        0 0 0 8px rgba(229,9,20,0.15),
        0 0 24px rgba(229,9,20,0.6) !important;
    transform: translate(-50%, -50%) scale(0.65) !important;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                opacity 0.25s ease !important;
}
.isf-card-overlay-play svg {
    width: 16px !important;
    height: 16px !important;
    margin-left: 3px !important;
}
.isf-card:hover .isf-card-overlay-play {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
}

/* ─── RATING badge — move to TOP RIGHT (IMDb style pill) ─────── */
.isf-card-rating-label {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: linear-gradient(135deg, rgba(245,166,35,0.25), rgba(0,0,0,0.8)) !important;
    border: 1px solid rgba(245,166,35,0.55) !important;
    color: #f5c518 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    backdrop-filter: blur(6px);
    z-index: 9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 0.2px;
    transition: transform 0.2s ease;
}
.isf-card:hover .isf-card-rating-label {
    transform: scale(1.08) !important;
}
.isf-card-rating-label i {
    font-size: 9px !important;
    color: #f5a623;
}

/* ─── INFO BAR (MOVIE / SERIES label + old rating slot) ──────── */
.isf-card-info-bar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px 10px !important;
    font-size: 10px !important;
}

.isf-card-type-label {
    color: rgba(229,9,20,0.9) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    background: rgba(229,9,20,0.12) !important;
    border: 1px solid rgba(229,9,20,0.3) !important;
    padding: 2px 7px !important;
    border-radius: 20px !important;
}

/* ─── Card bottom info area background ───────────────────────── */
.isf-card > .isf-card-title,
.isf-card > .isf-card-info-bar,
.isf-card > .isf-card-year {
    background: linear-gradient(0deg, #0e0e14 0%, #131318 100%);
}

.isf-card > .isf-card-title {
    padding-top: 10px !important;
    border-top: none;
}

/* ─── Popular badge upgrade ──────────────────────────────────── */
.isf-popular-badge {
    border-radius: 20px !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    padding: 4px 9px 4px 7px !important;
    animation: isf-badge-pulse 2.5s ease-in-out infinite;
    box-shadow: 0 2px 10px rgba(245,166,35,0.45) !important;
    z-index: 10 !important;
}

/* ─── NEW badge on cards ─────────────────────────────────────── */
.isf-card-badge.badge-new {
    background: linear-gradient(135deg, #00c853, #00e676) !important;
    color: #000 !important;
    border-radius: 20px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    animation: isf-badge-pulse 2s ease-in-out infinite;
    box-shadow: 0 2px 10px rgba(0,200,83,0.45) !important;
    z-index: 10 !important;
}

/* ─── Quality badge top-right pill ──────────────────────────── */
.isf-card-quality {
    top: 8px !important;
    right: 8px !important;
    border-radius: 20px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    backdrop-filter: blur(6px) !important;
    z-index: 8 !important;
}

/* ─── When rating-label exists, push quality left of it ─────── */
.isf-card .isf-card-rating-label ~ .isf-card-quality,
.isf-card .isf-card-quality:has(~ .isf-card-rating-label) {
    right: 58px !important;
}

/* ─── Card shimmer — now only on image area ──────────────────── */
.isf-card::before {
    height: 65% !important; /* only over image, not text area */
}

/* ─── Hover animation — smoother, no scale conflict ─────────── */
.isf-card {
    transition:
        transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow 0.32s ease !important;
    will-change: transform;
}
.isf-card:hover {
    transform: translateY(-8px) scale(1.035) !important;
    box-shadow:
        0 18px 36px rgba(0,0,0,0.65),
        0 0 0 1.5px rgba(229,9,20,0.45),
        0 0 24px rgba(229,9,20,0.12) !important;
}

/* ─── Image zoom smoother ────────────────────────────────────── */
.isf-card img {
    border-radius: 0 !important;
    transition: transform 0.45s ease !important;
}
.isf-card:hover img {
    transform: scale(1.06) !important;
}

/* ─── isf-card play overlay (single page related) ───────────── */
.isf-card-play-overlay {
    top: 42% !important;
}

/* ─── Entrance animation — only once, no loop ───────────────── */
.isf-card {
    animation: isf-card-entrance 0.4s ease both !important;
}
/* Keep visible class working */
.isf-card.isf-card--visible {
    opacity: 1 !important;
    animation: isf-card-entrance 0.4s ease both !important;
}

/* ── End Card Fix v9.1 ───────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   🎬 WATCH NOW / ACTION BUTTONS — Premium Redesign v9.1
   ════════════════════════════════════════════════════════════════ */

.isf-action-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}

/* ── Watch Now — Full-width cinematic button ─────────────────── */
.isf-btn-play {
    width: 100% !important;
    background: linear-gradient(135deg, #fff 0%, #e8e8e8 100%) !important;
    color: #000 !important;
    border: none !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 20px rgba(255,255,255,0.2) !important;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}
.isf-btn-play::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
    transition: left 0.5s ease;
}
.isf-btn-play:hover::before { left: 150%; }
.isf-btn-play:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 28px rgba(255,255,255,0.3) !important;
}
.isf-btn-play:active { transform: scale(0.98) !important; }
.isf-btn-play i {
    font-size: 15px;
    background: #000;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
    flex-shrink: 0;
}

/* ── Trailer + MyList — side by side row ─────────────────────── */
.isf-btn-trailer,
.isf-btn-list {
    flex: 1 !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
    letter-spacing: 0.2px;
}

.isf-btn-trailer {
    background: rgba(229,9,20,0.1) !important;
    border: 1.5px solid rgba(229,9,20,0.6) !important;
    color: #ff4444 !important;
}
.isf-btn-trailer:hover {
    background: rgba(229,9,20,0.2) !important;
    border-color: #e50914 !important;
    transform: scale(1.02) !important;
}

.isf-btn-list {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.18) !important;
    color: #ddd !important;
}
.isf-btn-list:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.35) !important;
    transform: scale(1.02) !important;
}
.isf-btn-list.added {
    border-color: rgba(0,230,118,0.6) !important;
    color: #00e676 !important;
    background: rgba(0,230,118,0.08) !important;
}

/* Row for trailer+list */
.isf-action-btns .isf-btn-trailer,
.isf-action-btns .isf-btn-list {
    margin: 0 !important;
}

/* ── End Action Buttons v9.1 ─────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   🎬 LAYOUT v10 — Full-Width Hero Info + Cards No Title
   ════════════════════════════════════════════════════════════════ */

/* ── Hero v2: Taller cinematic backdrop ──────────────────────── */
.isf-hero-v2 {
    height: 380px !important;
    position: relative;
}
.isf-hero-v2 .isf-movie-backdrop {
    filter: brightness(0.28) saturate(1.3) !important;
    object-position: center 20% !important;
}
.isf-hero-v2 .isf-movie-hero-gradient {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(4,4,5,0.5) 50%,
        rgba(4,4,5,0.92) 80%,
        var(--bg-base, #040405) 100%
    ) !important;
}

/* ── Hide old poster/card-wrap styles ────────────────────────── */
.isf-movie-card-wrap,
.isf-movie-poster-col,
.isf-movie-poster,
.isf-poster-glow,
.isf-trending-badge,
.isf-poster-quality-tag {
    display: none !important;
}

/* ── Full-width info wrap ────────────────────────────────────── */
.isf-movie-info-fullwrap {
    padding: 0 16px;
    margin-top: -24px;
    position: relative;
    z-index: 10;
}

/* ── Info column — full width, single column ─────────────────── */
.isf-info-fullwidth {
    padding-top: 0 !important;
    width: 100% !important;
}

/* ── Title — large, cinematic ────────────────────────────────── */
.isf-info-fullwidth .isf-movie-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    letter-spacing: -0.5px;
}

/* ── Badges row ──────────────────────────────────────────────── */
.isf-info-fullwidth .isf-movie-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    align-items: center !important;
}

.isf-info-fullwidth .isf-imdb-badge {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    gap: 5px !important;
}
.isf-info-fullwidth .isf-imdb-score { font-size: 15px !important; }

.isf-info-fullwidth .isf-badge {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

/* ── Genres ──────────────────────────────────────────────────── */
.isf-info-fullwidth .isf-movie-genres {
    font-size: 13px !important;
    margin-bottom: 14px !important;
}

/* ── Synopsis ────────────────────────────────────────────────── */
.isf-info-fullwidth .isf-movie-synopsis {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,0.65) !important;
    -webkit-line-clamp: 4 !important;
    margin-bottom: 20px !important;
}

/* ── Action buttons full width ───────────────────────────────── */
.isf-info-fullwidth .isf-action-btns {
    margin-bottom: 20px !important;
}
.isf-info-fullwidth .isf-btn-play {
    width: 100% !important;
    padding: 15px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    margin-bottom: 2px !important;
}

/* Trailer + MyList row */
.isf-info-fullwidth .isf-action-btns > div {
    display: flex !important;
    gap: 10px !important;
}
.isf-info-fullwidth .isf-btn-trailer,
.isf-info-fullwidth .isf-btn-list {
    flex: 1 !important;
    padding: 13px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

/* ── Share bar compact ───────────────────────────────────────── */
.isf-info-fullwidth .isf-share-bar {
    margin-bottom: 16px !important;
}

/* ══════════════════════════════════════════════
   🎴 CARDS — Remove Title/Year/Info Completely
   ══════════════════════════════════════════════ */

/* Home page isf-card */
.isf-card > .isf-card-title,
.isf-card > .isf-card-year,
.isf-card > .isf-card-info-bar,
.isf-card > .isf-card-info {
    display: none !important;
}

/* Slider track related cards */
.isf-slider-track .isf-card .isf-card-title,
.isf-slider-track .isf-card .isf-card-year {
    display: none !important;
}

/* Archive grid (isf-movie-card) */
.isf-movie-card .isf-card-info,
.isf-movie-card .isf-card-info-bar {
    display: none !important;
}

/* Reco cards */
.isf-reco-grid .isf-card .isf-card-title,
.isf-reco-grid .isf-card .isf-card-year {
    display: none !important;
}

/* Make card image fill full card height */
.isf-card img {
    border-radius: 18px !important;
    width: 100% !important;
    aspect-ratio: 2/3 !important;
    object-fit: cover !important;
    display: block !important;
}

.isf-slider-track .isf-card,
.isf-card.isf-card--visible {
    border-radius: 18px !important;
    overflow: hidden;
}

/* Archive cards full image */
.isf-movie-card img,
.isf-card-link img {
    border-radius: 0 !important;
    width: 100% !important;
    aspect-ratio: 2/3 !important;
    object-fit: cover !important;
}
.isf-movie-card {
    border-radius: 18px !important;
    overflow: hidden;
}
.isf-card-link {
    display: block;
    border-radius: 18px !important;
    overflow: hidden;
}

/* ── Card overlay gradient (bottom fade on image only) ───────── */
.isf-card-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 45% !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%) !important;
    border-radius: 0 0 18px 18px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Rating badge stays visible at bottom-left */
.isf-card-imdb {
    display: flex !important;
    bottom: 8px !important;
    left: 8px !important;
    z-index: 7 !important;
}
.isf-card-rating-label {
    display: flex !important;
}

/* ── Mobile: smaller hero ────────────────────────────────────── */
@media (max-width: 600px) {
    .isf-hero-v2 { height: 320px !important; }
    .isf-info-fullwidth .isf-movie-title { font-size: 22px !important; }
}

/* ── End Layout v10 ──────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   🎬 PREMIUM MOVIE PAGE — v3 Layout (Image 2 Style)
   Full cinematic backdrop + Poster card + Cast grid
   ════════════════════════════════════════════════════════════════ */

/* ── Hero v3: Deep cinematic backdrop ───────────────────────── */
.isf-hero-v3 {
    height: 420px !important;
    position: relative;
    overflow: hidden;
}

.isf-backdrop-v3 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 15% !important;
    filter: brightness(0.22) saturate(1.4) !important;
    transform: scale(1.05);
    animation: isf-backdrop-zoom 20s ease-out forwards;
}

@keyframes isf-backdrop-zoom {
    from { transform: scale(1.12); }
    to   { transform: scale(1.0); }
}

.isf-hero-v3-gradient {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        180deg,
        rgba(4,4,5,0.15) 0%,
        rgba(4,4,5,0.3) 40%,
        rgba(4,4,5,0.88) 75%,
        var(--bg-base, #040405) 100%
    ) !important;
    z-index: 2;
}

/* Subtle noise grain overlay for premium feel */
.isf-hero-v3-noise {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    z-index: 3;
    pointer-events: none;
}

/* ── Info wrap v3 ────────────────────────────────────────────── */
.isf-movie-info-v3 {
    padding: 0 16px !important;
    margin-top: -60px !important;
    position: relative;
    z-index: 10;
}

/* ── Top section: title, badges, synopsis, buttons ───────────── */
.isf-v3-top-section {
    margin-bottom: 0;
    animation: isf-fadeup 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes isf-fadeup {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

.isf-v3-title {
    font-size: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.8px !important;
    line-height: 1.1 !important;
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    margin-bottom: 14px !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

.isf-v3-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    align-items: center !important;
}

.isf-v3-imdb {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    gap: 5px !important;
}

.isf-v3-badge {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

.isf-v3-genres {
    font-size: 13px !important;
    margin-bottom: 12px !important;
    color: #e50914 !important;
    font-weight: 600 !important;
}

.isf-v3-synopsis {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,0.62) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 18px !important;
}

/* ── Action buttons v3 ───────────────────────────────────────── */
.isf-v3-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.isf-v3-btn-row {
    display: flex !important;
    gap: 10px !important;
}

.isf-v3-actions .isf-btn-trailer,
.isf-v3-actions .isf-btn-list {
    flex: 1 !important;
    padding: 13px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

/* ── Share bar v3 ────────────────────────────────────────────── */
.isf-v3-share {
    margin-bottom: 18px !important;
    flex-wrap: wrap !important;
}

/* ── Detail Card: Language + Poster + Cast ───────────────────── */
.isf-v3-detail-card {
    background: rgba(20, 20, 26, 0.75) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    animation: isf-fadeup 0.7s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Language/Subtitles top row ──────────────────────────────── */
.isf-v3-lang-row {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    gap: 16px !important;
}

.isf-v3-lang-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.isf-v3-lang-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

.isf-v3-lang-key {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    color: rgba(255,255,255,0.4) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

.isf-v3-lang-val {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.isf-v3-lang-divider {
    width: 1px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.12) !important;
    flex-shrink: 0 !important;
}

/* ── Poster + Cast Row ───────────────────────────────────────── */
.isf-v3-poster-cast-row {
    display: flex !important;
    gap: 16px !important;
    padding: 16px !important;
    align-items: flex-start !important;
}

/* ── Poster v3 ───────────────────────────────────────────────── */
.isf-v3-poster-wrap {
    flex: 0 0 120px !important;
    position: relative !important;
    border-radius: 12px !important;
    overflow: visible !important;
}

.isf-v3-poster-img {
    width: 120px !important;
    height: 178px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.7) !important;
    border: 2px solid rgba(229,9,20,0.5) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.isf-v3-poster-img:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.85), 0 0 25px rgba(229,9,20,0.3) !important;
}

.isf-v3-poster-glow {
    position: absolute !important;
    inset: -4px !important;
    border-radius: 16px !important;
    background: radial-gradient(ellipse at center, rgba(229,9,20,0.2) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Trending badge */
.isf-v3-trending-tag {
    position: absolute !important;
    top: -10px !important;
    left: -8px !important;
    background: linear-gradient(135deg, #e50914 0%, #ff4444 100%) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    z-index: 10 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 3px 10px rgba(229,9,20,0.5) !important;
    white-space: nowrap !important;
}

/* Quality badge on poster */
.isf-v3-quality-tag {
    position: absolute !important;
    top: 8px !important;
    right: 6px !important;
    background: rgba(0, 200, 100, 0.9) !important;
    color: #000 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    z-index: 10 !important;
    letter-spacing: 0.5px !important;
}

/* ── Cast detail column ──────────────────────────────────────── */
.isf-v3-cast-detail {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.isf-v3-cast-row {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.isf-v3-cast-row:last-of-type {
    border-bottom: none !important;
}

.isf-v3-cast-key {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 3px !important;
}

.isf-v3-cast-val {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.9) !important;
    line-height: 1.5 !important;
}

/* ── User rating inside detail card ─────────────────────────── */
.isf-v3-user-rate {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.isf-v3-user-rate .isf-rate-label {
    font-size: 11px !important;
    color: rgba(255,255,255,0.5) !important;
    font-weight: 600 !important;
}

.isf-v3-user-rate .isf-star {
    font-size: 20px !important;
    color: rgba(255,255,255,0.2) !important;
    cursor: pointer !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}

.isf-v3-user-rate .isf-star.active,
.isf-v3-user-rate .isf-star.hover {
    color: #F5C518 !important;
    transform: scale(1.15) !important;
}

/* ── Hide old duplicate elements when v3 is active ───────────── */
.isf-movie-info-v3 .isf-movie-info-col,
.isf-movie-info-v3 .isf-info-fullwidth,
.isf-movie-info-v3 .isf-movie-card-wrap,
.isf-movie-info-v3 .isf-extra-info,
.isf-movie-info-v3 .isf-cast-info {
    display: none !important;
}

/* ── Mobile responsive adjustments ──────────────────────────── */
@media (max-width: 480px) {
    .isf-hero-v3 { height: 360px !important; }
    .isf-v3-title { font-size: 24px !important; }
    .isf-v3-poster-wrap { flex: 0 0 100px !important; }
    .isf-v3-poster-img { width: 100px !important; height: 148px !important; }
    .isf-v3-lang-row { padding: 12px !important; }
    .isf-movie-info-v3 { margin-top: -50px !important; }
}

/* ── End Premium v3 Layout ───────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   🎬 HERO v4 — Title/Badges/Buttons INSIDE Backdrop (Image 2)
   ════════════════════════════════════════════════════════════════ */

/* ── Hero container — tall enough to show backdrop + content ─── */
.isf-hero-v4 {
    position: relative !important;
    width: 100% !important;
    min-height: 620px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
}

/* ── Backdrop image ──────────────────────────────────────────── */
.isf-backdrop-v4 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 10% !important;
    filter: brightness(0.32) saturate(1.3) !important;
    transform: scale(1.04);
    animation: isf-v4-zoom 18s ease-out forwards !important;
    z-index: 0 !important;
}

@keyframes isf-v4-zoom {
    from { transform: scale(1.10); }
    to   { transform: scale(1.00); }
}

/* ── Deep bottom gradient so content stays readable ─────────── */
.isf-hero-v4-gradient {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        180deg,
        rgba(4,4,5,0.0)  0%,
        rgba(4,4,5,0.05) 30%,
        rgba(4,4,5,0.55) 55%,
        rgba(4,4,5,0.90) 78%,
        rgba(4,4,5,1.00) 100%
    ) !important;
    z-index: 1 !important;
}

/* noise grain */
.isf-hero-v4-noise {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.035 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
    background-size: 180px 180px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* ── Content overlay (title, badges, buttons) ────────────────── */
.isf-hero-v4-content {
    position: relative !important;
    z-index: 10 !important;
    padding: 0 16px 20px !important;
    animation: isf-v4-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes isf-v4-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Title ───────────────────────────────────────────────────── */
.isf-v4-title {
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
    line-height: 1.08 !important;
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    margin-bottom: 14px !important;
    text-shadow: 0 3px 24px rgba(0,0,0,0.7) !important;
}

/* ── Badges row ──────────────────────────────────────────────── */
.isf-v4-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    align-items: center !important;
}

.isf-v4-imdb {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    gap: 5px !important;
}

.isf-v4-badge {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(6px) !important;
}

/* ── Genre tags ──────────────────────────────────────────────── */
.isf-v4-genres {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e50914 !important;
    margin-bottom: 18px !important;
}

.isf-v4-genres a {
    color: #e50914 !important;
    text-decoration: none !important;
}

/* ── Action buttons ──────────────────────────────────────────── */
.isf-v4-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.isf-v4-btn-row {
    display: flex !important;
    gap: 10px !important;
}

.isf-v4-actions .isf-btn-play {
    width: 100% !important;
    padding: 15px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #e50914 0%, #b20710 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(229,9,20,0.35) !important;
}
.isf-v4-actions .isf-btn-play:hover {
    background: linear-gradient(135deg, #f40d1a 0%, #c8090f 100%) !important;
    box-shadow: 0 6px 28px rgba(229,9,20,0.55) !important;
}
.isf-v4-actions .isf-btn-play i {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

.isf-v4-actions .isf-btn-trailer,
.isf-v4-actions .isf-btn-list {
    flex: 1 !important;
    padding: 13px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

/* ── Share bar ───────────────────────────────────────────────── */
.isf-v4-share {
    flex-wrap: wrap !important;
    margin-bottom: 0 !important;
}

/* ── Info wrap below hero (no extra top margin) ──────────────── */
.isf-movie-info-v3 {
    margin-top: 0 !important;
    padding-top: 4px !important;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .isf-hero-v4 { min-height: 560px !important; }
    .isf-v4-title { font-size: 26px !important; }
}

/* ── End Hero v4 ─────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   📺 SERIES PREMIUM HERO — Apple TV / Prime Style
   Full cinematic backdrop + Poster left + Big Title right
   ════════════════════════════════════════════════════════════════ */

.isf-series-premium-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

/* ── Backdrop ────────────────────────────────────────────────── */
.isf-sph-backdrop-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.isf-sph-backdrop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    filter: brightness(0.55) saturate(1.2);
    transform: scale(1.05);
    animation: sph-zoom 20s ease-out forwards;
}

@keyframes sph-zoom {
    from { transform: scale(1.10); }
    to   { transform: scale(1.00); }
}

/* Top fade — transparent to slight dark */
.isf-sph-grad-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(180deg, rgba(4,4,5,0.55) 0%, transparent 100%);
    z-index: 1;
}

/* Bottom fade — dark so content is readable */
.isf-sph-grad-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 65%;
    background: linear-gradient(0deg,
        rgba(4,4,5,1.00) 0%,
        rgba(4,4,5,0.92) 30%,
        rgba(4,4,5,0.5)  65%,
        transparent      100%
    );
    z-index: 1;
}

/* Side vignette */
.isf-sph-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(4,4,5,0.45) 100%);
    z-index: 1;
}

/* ── Bottom content row ──────────────────────────────────────── */
.isf-sph-bottom {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 0 16px 24px;
    animation: sph-up 0.6s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes sph-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Poster ──────────────────────────────────────────────────── */
.isf-sph-poster-wrap {
    flex: 0 0 110px;
    position: relative;
    border-radius: 14px;
    overflow: visible;
}

.isf-sph-poster {
    width: 110px;
    height: 163px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,255,255,0.1);
    transition: transform 0.3s ease;
}

.isf-sph-poster:hover { transform: scale(1.04); }

/* Ambient glow behind poster */
.isf-sph-poster-glow {
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    background: radial-gradient(ellipse at center, rgba(229,9,20,0.25) 0%, transparent 70%);
    z-index: -1;
    filter: blur(12px);
}

/* ── Info (title + meta) ─────────────────────────────────────── */
.isf-sph-info {
    flex: 1;
    min-width: 0;
    padding-bottom: 4px;
}

/* Big drip-font-style title — uses CSS text-shadow for depth */
.isf-sph-title {
    font-size: 38px !important;
    font-weight: 900 !important;
    line-height: 1.0 !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -1.5px !important;
    text-shadow:
        0 2px 0 rgba(0,0,0,0.8),
        0 4px 16px rgba(0,0,0,0.9),
        0 0 40px rgba(255,255,255,0.08) !important;
    word-break: break-word !important;
}

/* ── Meta row: ⭐ 8.5  2019  5 Seasons ──────────────────────── */
.isf-sph-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.isf-sph-star-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 800;
    color: #FFD700;
}

.isf-sph-star-rating i { font-size: 14px; }

.isf-sph-meta-dot {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}

.isf-sph-meta-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 5px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    letter-spacing: 0.5px;
    backdrop-filter: blur(6px);
}

.isf-sph-4k {
    background: rgba(0, 200, 100, 0.15) !important;
    border-color: rgba(0, 200, 100, 0.5) !important;
    color: #00e676 !important;
}

/* ── Genre row ───────────────────────────────────────────────── */
.isf-sph-genres {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
}

.isf-sph-genres a {
    color: rgba(255,255,255,0.45) !important;
    text-decoration: none !important;
}

/* ── Action buttons below hero ───────────────────────────────── */
.isf-sph-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 0;
    margin-bottom: 14px;
}

.isf-sph-btn-row {
    display: flex;
    gap: 10px;
}

.isf-sph-actions .isf-btn-play {
    width: 100% !important;
    padding: 15px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
}

.isf-sph-actions .isf-btn-trailer,
.isf-sph-actions .isf-btn-list {
    flex: 1 !important;
    padding: 13px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

/* ── Share bar ───────────────────────────────────────────────── */
.isf-sph-share {
    padding: 0 16px !important;
    margin-bottom: 16px !important;
}

/* ── Body below ─────────────────────────────────────────────── */
.isf-series-body-v2,
.isf-movie-body-v2 {
    padding-top: 0 !important;
}

/* ── Movie uses same premium hero layout as series ───────────── */
.isf-movie-premium-hero {
    /* inherits all isf-series-premium-hero styles */
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .isf-series-premium-hero { min-height: 440px; }
    .isf-sph-title { font-size: 28px !important; letter-spacing: -1px !important; }
    .isf-sph-poster-wrap { flex: 0 0 88px; }
    .isf-sph-poster { width: 88px !important; height: 130px !important; }
    .isf-sph-bottom { gap: 12px; padding-bottom: 20px; }
}

/* ── End Series Premium Hero ─────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   🎬 MOVIES ARCHIVE — Premium Design
   Cinematic hero + Premium cards + Styled filter bar
   ════════════════════════════════════════════════════════════════ */

/* ── Archive wrapper ─────────────────────────────────────────── */
.isf-archive-container {
    background: var(--bg-base, #040405) !important;
    min-height: 100vh;
}

/* ══════════════════════════════════════════
   PREMIUM HERO SECTION
   ══════════════════════════════════════════ */
.isf-arc-hero {
    position: relative;
    width: 100%;
    padding: 60px 20px 48px;
    text-align: center;
    overflow: hidden;
    background: #040405;
}

/* Gradient mesh background */
.isf-arc-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 50%, rgba(229,9,20,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 50%, rgba(0,168,225,0.08) 0%, transparent 60%),
        linear-gradient(180deg, #0a0a0e 0%, #040405 100%);
}

/* Left red glow */
.isf-arc-hero-glow-l {
    position: absolute;
    left: -80px; top: 50%;
    transform: translateY(-50%);
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(229,9,20,0.18) 0%, transparent 70%);
    filter: blur(40px);
}

/* Right cyan glow */
.isf-arc-hero-glow-r {
    position: absolute;
    right: -80px; top: 50%;
    transform: translateY(-50%);
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(0,168,225,0.12) 0%, transparent 70%);
    filter: blur(40px);
}

/* Film strip decorative line */
.isf-arc-film-strip {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(229,9,20,0.6), rgba(0,168,225,0.4), transparent);
}

/* Content */
.isf-arc-hero-content {
    position: relative;
    z-index: 2;
    animation: arc-fadein 0.6s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes arc-fadein {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Film icon badge */
.isf-arc-hero-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, rgba(229,9,20,0.2), rgba(229,9,20,0.05));
    border: 1px solid rgba(229,9,20,0.35);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: #e50914;
    margin: 0 auto 18px;
    box-shadow: 0 0 20px rgba(229,9,20,0.2);
}

/* Main title */
.isf-arc-hero-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.15 !important;
}

.isf-arc-accent {
    color: #e50914 !important;
    -webkit-text-fill-color: #e50914 !important;
}

/* Subtitle */
.isf-arc-hero-sub {
    font-size: 13px !important;
    color: rgba(255,255,255,0.42) !important;
    margin: 0 0 20px 0 !important;
    font-weight: 400 !important;
}

/* Stats pills row */
.isf-arc-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.isf-arc-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
}

.isf-arc-stat i { font-size: 10px; }

.isf-arc-stat-on {
    background: rgba(229,9,20,0.12) !important;
    border-color: rgba(229,9,20,0.4) !important;
    color: #ff6060 !important;
}

/* ══════════════════════════════════════════
   PREMIUM FILTER BAR
   ══════════════════════════════════════════ */
.isf-filter-bar {
    background: rgba(14,14,17,0.95) !important;
    border-top: 1px solid rgba(229,9,20,0.15) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(20px) !important;
    padding: 12px 16px !important;
    position: sticky !important;
    top: var(--app-nav-height, 72px) !important;
    z-index: 100 !important;
}

.isf-filter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.isf-filter-group {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.isf-filter-group::-webkit-scrollbar { display: none; }

.isf-select-wrapper {
    position: relative !important;
    flex: 1 !important;
    min-width: 100px !important;
}

.isf-select-wrapper select {
    width: 100% !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.85) !important;
    padding: 9px 32px 9px 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.isf-select-wrapper select:focus {
    outline: none !important;
    border-color: rgba(229,9,20,0.5) !important;
    background: rgba(229,9,20,0.06) !important;
}

.isf-select-wrapper > i.fa-chevron-down {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.35) !important;
    pointer-events: none !important;
}

.isf-filter-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: space-between !important;
}

.isf-result-count {
    font-size: 11px !important;
    color: rgba(255,255,255,0.4) !important;
    font-weight: 600 !important;
    flex: 1 !important;
}

.isf-reset-btn {
    font-size: 11px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: rgba(229,9,20,0.12) !important;
    border: 1px solid rgba(229,9,20,0.35) !important;
    color: #ff5555 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.isf-reset-btn:hover {
    background: rgba(229,9,20,0.22) !important;
}

/* View switcher */
.isf-view-switcher {
    display: flex !important;
    gap: 4px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    padding: 3px !important;
}

.isf-view-btn {
    padding: 5px 10px !important;
    border-radius: 6px !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,0.4) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.isf-view-btn.active {
    background: rgba(229,9,20,0.2) !important;
    color: #e50914 !important;
}

/* ══════════════════════════════════════════
   PREMIUM MOVIE CARDS
   ══════════════════════════════════════════ */
.isf-archive-grid,
#isfArchiveGrid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding: 16px !important;
}

@media (min-width: 600px) {
    .isf-archive-grid, #isfArchiveGrid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}

@media (min-width: 900px) {
    .isf-archive-grid, #isfArchiveGrid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* Card wrapper */
.isf-movie-card.grid-card,
.isf-movie-card.isf-card--visiblegrid-card {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #0e0e11 !important;
    cursor: pointer !important;
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

.isf-movie-card.grid-card:hover,
.isf-movie-card.isf-card--visiblegrid-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.75), 0 0 0 1px rgba(229,9,20,0.2) !important;
    z-index: 5 !important;
}

/* Card link & image */
.isf-movie-card .isf-card-link {
    display: block !important;
    text-decoration: none !important;
}

.isf-movie-card .isf-card-link img,
.isf-movie-card .isf-card-link .isf-card-no-img {
    width: 100% !important;
    aspect-ratio: 2/3 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 12px !important;
}

/* Hover overlay with play button */
.isf-movie-card .isf-card-link::after {
    content: '\f144';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    background: rgba(0,0,0,0);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
    pointer-events: none;
    z-index: 4;
}

.isf-movie-card:hover .isf-card-link::after {
    opacity: 1;
    background: rgba(0,0,0,0.45);
}

/* Quality badge — top right */
.isf-movie-card .isf-card-quality {
    position: absolute !important;
    top: 7px !important; right: 7px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    background: rgba(0,200,100,0.88) !important;
    color: #000 !important;
    z-index: 6 !important;
    letter-spacing: 0.5px !important;
    backdrop-filter: blur(4px) !important;
}

/* Top Rated badge — top left */
.isf-movie-card .isf-card-badge {
    position: absolute !important;
    top: 7px !important; left: 7px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
    background: linear-gradient(135deg, #e50914, #ff4444) !important;
    color: #fff !important;
    z-index: 6 !important;
    letter-spacing: 0.4px !important;
}

/* Card info — bottom overlay */
.isf-movie-card .isf-card-info {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding: 20px 8px 8px !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, transparent 100%) !important;
    border-radius: 0 0 12px 12px !important;
    z-index: 5 !important;
    opacity: 0 !important;
    transform: translateY(4px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.isf-movie-card:hover .isf-card-info {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.isf-movie-card .isf-card-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 0 4px 0 !important;
}

.isf-movie-card .isf-card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.55) !important;
    flex-wrap: wrap !important;
}

.isf-movie-card .isf-card-rating {
    color: #FFD700 !important;
    font-weight: 700 !important;
}

.isf-movie-card .isf-card-rating i { font-size: 9px; }

/* Quick Watch button */
.isf-movie-card .isf-quick-watch {
    display: none !important;
}

/* ── Load More ───────────────────────────────────────────────── */
.isf-load-more-container {
    text-align: center !important;
    padding: 20px 16px 30px !important;
}

.isf-load-more-btn {
    background: rgba(229,9,20,0.1) !important;
    border: 1.5px solid rgba(229,9,20,0.4) !important;
    color: #ff5555 !important;
    padding: 12px 32px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.isf-load-more-btn:hover {
    background: rgba(229,9,20,0.2) !important;
    border-color: #e50914 !important;
    transform: translateY(-1px) !important;
}

/* ── Pagination ──────────────────────────────────────────────── */
.isf-pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 16px !important;
    flex-wrap: wrap !important;
}

.isf-pagination .page-numbers {
    width: 36px !important; height: 36px !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    border-radius: 8px !important;
    font-size: 13px !important; font-weight: 700 !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.isf-pagination .page-numbers.current,
.isf-pagination .page-numbers:hover {
    background: rgba(229,9,20,0.2) !important;
    border-color: rgba(229,9,20,0.5) !important;
    color: #fff !important;
}

/* ── Empty state ─────────────────────────────────────────────── */
.isf-empty-state {
    text-align: center !important;
    padding: 60px 20px !important;
    color: rgba(255,255,255,0.4) !important;
}

.isf-empty-state i { font-size: 48px !important; margin-bottom: 16px !important; display: block !important; }
.isf-empty-state h2 { font-size: 20px !important; color: #fff !important; margin-bottom: 8px !important; }

/* ── End Movies Archive Premium ──────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   NETSTREAM v24 — COMPREHENSIVE FIX PATCH
   Fixes: archive cards, movie detail section, missing overlays,
   breadcrumb, info bar, description visibility
   ══════════════════════════════════════════════════════════════ */

/* ── 1. MOVIE DETAIL CARD — make visible (was display:none) ─────── */
.isf-v3-top-section {
    display: block !important;
    padding: 16px 16px 0 !important;
}

/* ── 2. DESCRIPTION / SYNOPSIS ─────────────────────────────────── */
.isf-movie-synopsis,
.isf-v3-synopsis {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.72);
    margin: 10px 0 14px;
}
.isf-movie-synopsis p { margin: 0; }

/* ── 3. DETAIL CARD — clean card look ──────────────────────────── */
.isf-v3-detail-card {
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    margin: 0 16px 16px;
    padding: 14px;
    overflow: hidden;
}

/* ── 4. POSTER + CAST ROW ──────────────────────────────────────── */
.isf-v3-poster-cast-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.isf-v3-poster-wrap {
    flex: 0 0 90px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.isf-v3-poster-img {
    width: 90px;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}
.isf-v3-trending-tag {
    position: absolute;
    top: 6px;
    left: 4px;
    background: rgba(229,9,20,0.9);
    font-size: 8px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    color: #fff;
    letter-spacing: 0.3px;
    z-index: 2;
}
.isf-v3-quality-tag {
    position: absolute;
    bottom: 6px;
    right: 4px;
    background: rgba(0,0,0,0.8);
    border: 1px solid rgba(0,230,118,0.5);
    color: #00e676;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 2;
}
.isf-v3-poster-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 120%, rgba(229,9,20,0.25), transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* ── 5. CAST DETAIL ─────────────────────────────────────────────── */
.isf-v3-cast-detail {
    flex: 1;
    min-width: 0;
}
.isf-v3-cast-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    align-items: flex-start;
}
.isf-v3-cast-key {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex: 0 0 60px;
    padding-top: 1px;
}
.isf-v3-cast-val {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
}

/* ── 6. LANGUAGE ROW ────────────────────────────────────────────── */
.isf-v3-lang-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-wrap: wrap;
}
.isf-v3-lang-item {
    display: flex;
    align-items: center;
    gap: 7px;
}
.isf-v3-lang-icon { font-size: 16px; }
.isf-v3-lang-key {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}
.isf-v3-lang-val {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.isf-v3-lang-divider {
    width: 1px;
    background: rgba(255,255,255,0.1);
    align-self: stretch;
    margin: 0 4px;
}

/* ── 7. USER RATING ─────────────────────────────────────────────── */
.isf-v3-user-rate {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── 8. V3 ACTIONS (hidden duplicate — remove from view) ────────── */
.isf-v3-actions,
.isf-v3-btn-row,
.isf-v3-share {
    display: none !important;
}

/* ── 9. MOVIE INFO WRAPPER ──────────────────────────────────────── */
.isf-movie-info-fullwrap.isf-movie-info-v3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ── 10. ARCHIVE CARD HOVER OVERLAY FIX ────────────────────────── */
.isf-movie-card .isf-card-overlay,
.isf-series-card .isf-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    pointer-events: none;
}
.isf-movie-card:hover .isf-card-overlay,
.isf-series-card:hover .isf-card-overlay {
    opacity: 1;
}

/* ── 11. ARCHIVE CARD — quick watch button clean ────────────────── */
.isf-quick-watch {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    background: #e50914;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: none;
    align-items: center;
    gap: 4px;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(229,9,20,0.5);
}
.isf-movie-card:hover .isf-quick-watch,
.isf-series-card:hover .isf-quick-watch { display: flex; }

/* ── 12. CARD RATING BADGE VISIBLE ─────────────────────────────── */
.isf-card-rating-badge {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ── 13. ARCHIVE CARD VISIBLE BY DEFAULT ────────────────────────── */
.isf-movie-card.grid-card,
.isf-series-card.grid-card {
    display: block !important;
}

/* ── 14. BREADCRUMB — compact styling ──────────────────────────── */
.isf-breadcrumb {
    padding: 8px 16px !important;
    font-size: 11px !important;
}
.isf-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}
.isf-breadcrumb li { display: flex; align-items: center; gap: 4px; }
.isf-breadcrumb li:not(:last-child)::after {
    content: '›';
    color: rgba(255,255,255,0.3);
    font-size: 12px;
}
.isf-breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
.isf-breadcrumb li:last-child span { color: rgba(255,255,255,0.85); }

/* ── 15. SERIES CARD INFO BAR ────────────────────────────────────── */
.isf-card-info-bar {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 3px 7px 7px;
    font-size: 10px;
    font-weight: 700;
}

/* ── 16. MOBILE: hide duplicate v3-top-section action buttons ───── */
@media (max-width: 767px) {
    .isf-v3-poster-wrap { flex: 0 0 80px; }
    .isf-v3-poster-img  { width: 80px; }
    .isf-v3-cast-key    { flex: 0 0 54px; }
    .isf-v3-detail-card { margin: 0 12px 14px; padding: 12px; }
    .isf-v3-top-section { padding: 12px 12px 0 !important; }
}


/* ══════════════════════════════════════════════════════════════
   NETSTREAM v25 — DETAIL CARD IMAGE 2 STYLE
   ══════════════════════════════════════════════════════════════ */

/* ── LANG ROW — horizontal compact inline (Image 2 style) ──────── */
.isf-v3-lang-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 10px !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 10px !important;
    border-bottom: none !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}
.isf-v3-lang-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
}
.isf-v3-lang-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}
.isf-v3-lang-key {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 2px !important;
    display: block;
}
.isf-v3-lang-val {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    display: block;
}
.isf-v3-lang-divider {
    width: 1px !important;
    height: 34px !important;
    background: rgba(255,255,255,0.12) !important;
    margin: 0 12px !important;
    flex: none !important;
    align-self: center !important;
}

/* ── DETAIL CARD wrapper ────────────────────────────────────────── */
.isf-v3-detail-card {
    background: rgba(255,255,255,0.04) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    margin: 0 16px 16px !important;
    padding: 14px !important;
    overflow: visible !important;
}

/* ── POSTER + CAST ROW ──────────────────────────────────────────── */
.isf-v3-poster-cast-row {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
}

/* ── POSTER ─────────────────────────────────────────────────────── */
.isf-v3-poster-wrap {
    flex: 0 0 110px !important;
    width: 110px !important;
    position: relative !important;
    border-radius: 10px !important;
    overflow: visible !important;
}
.isf-v3-poster-img {
    width: 110px !important;
    height: 155px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 10px !important;
    border: 2px solid rgba(229,9,20,0.4) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(229,9,20,0.15) !important;
}
/* Remove the quality block that was overlapping */
.isf-v3-quality-tag { display: none !important; }

.isf-v3-trending-tag {
    position: absolute !important;
    top: -8px !important;
    left: 6px !important;
    background: linear-gradient(135deg, #e50914, #b20710) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    color: #fff !important;
    letter-spacing: 0.3px !important;
    z-index: 10 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(229,9,20,0.5) !important;
}
.isf-v3-poster-glow {
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
    height: 30px !important;
    background: radial-gradient(ellipse, rgba(229,9,20,0.35), transparent 70%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* ── CAST DETAIL ─────────────────────────────────────────────────── */
.isf-v3-cast-detail {
    flex: 1 !important;
    min-width: 0 !important;
}
.isf-v3-cast-row {
    display: grid !important;
    grid-template-columns: 68px 1fr !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    align-items: baseline !important;
}
.isf-v3-cast-row:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
.isf-v3-cast-key {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.42) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding-top: 2px !important;
    flex: none !important;
    width: auto !important;
}
.isf-v3-cast-val {
    font-size: 12.5px !important;
    color: rgba(255,255,255,0.9) !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
}

/* ── USER RATING ────────────────────────────────────────────────── */
.isf-v3-user-rate {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.isf-rate-label {
    font-size: 11px !important;
    color: rgba(255,255,255,0.5) !important;
    font-weight: 600 !important;
}
.isf-star-container {
    display: flex !important;
    gap: 4px !important;
}
.isf-star {
    font-size: 18px !important;
    color: rgba(255,255,255,0.2) !important;
    cursor: pointer !important;
    transition: color 0.2s ease, transform 0.15s ease !important;
}
.isf-star.active,
.isf-star:hover { color: #f5a623 !important; transform: scale(1.15) !important; }

/* ── TOP SECTION (v3) — description area above detail card ─────── */
.isf-v3-top-section {
    display: block !important;
    padding: 0 16px 12px !important;
}
.isf-movie-synopsis,
.isf-v3-synopsis {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.65) !important;
    margin: 8px 0 12px !important;
}

/* ── Mobile tightening ──────────────────────────────────────────── */
@media (max-width: 380px) {
    .isf-v3-poster-wrap { flex: 0 0 90px !important; width: 90px !important; }
    .isf-v3-poster-img  { width: 90px !important; height: 127px !important; }
    .isf-v3-cast-row    { grid-template-columns: 58px 1fr !important; }
}



/* ==========================================================================
   SMOOTH ANIMATION SYSTEM v1.0
   — Scroll-reveal for sections/rows/titles
   — Hero content stagger
   — Page load fade-in
   — Spring card entrance upgrade
   — Button ripple + nav micro-interactions
   ========================================================================== */

/* ── 1. PAGE LOAD FADE-IN ──────────────────────────────────────────────── */
@keyframes isf-pageIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.isf-page-ready {
    animation: isf-pageIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 2. SCROLL-REVEAL BASE ─────────────────────────────────────────────── */
/* Elements start hidden; JS adds .isf-revealed when in viewport */
.isf-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.isf-reveal.isf-revealed {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* Stagger delays for siblings (JS sets --reveal-i) */
.isf-reveal { transition-delay: calc(var(--reveal-i, 0) * 0.07s); }

/* Slide-from-left variant */
.isf-reveal-left {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.isf-reveal-left.isf-revealed {
    opacity: 1;
    transform: translateX(0);
    will-change: auto;
}

/* Scale-in variant (badges, pills) */
.isf-reveal-scale {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}
.isf-reveal-scale.isf-revealed {
    opacity: 1;
    transform: scale(1);
    will-change: auto;
}

/* ── 3. SECTION ROW REVEAL ─────────────────────────────────────────────── */
.isf-row,
.isf-section {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.isf-row.isf-row--visible,
.isf-section.isf-row--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger rows one after another */
.isf-row:nth-child(1)  { transition-delay: 0.00s; }
.isf-row:nth-child(2)  { transition-delay: 0.06s; }
.isf-row:nth-child(3)  { transition-delay: 0.12s; }
.isf-row:nth-child(4)  { transition-delay: 0.18s; }
.isf-row:nth-child(5)  { transition-delay: 0.24s; }
.isf-row:nth-child(n+6) { transition-delay: 0.28s; }

/* Row title slide-in */
.isf-row-title {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
                color var(--ease-out);
}
.isf-row--visible .isf-row-title {
    opacity: 1;
    transform: translateX(0);
}

/* ── 4. HERO CONTENT STAGGER ───────────────────────────────────────────── */
@keyframes isf-heroIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes isf-heroBadgeIn {
    from { opacity: 0; transform: scale(0.8) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.isf-hero-badge    { animation: isf-heroBadgeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both; }
.isf-hero-title    { animation: isf-heroIn       0.6s cubic-bezier(0.22, 1, 0.36, 1)    0.35s both; }
.isf-hero-genres   { animation: isf-heroIn       0.5s cubic-bezier(0.22, 1, 0.36, 1)    0.48s both; }
.isf-hero-meta     { animation: isf-heroIn       0.5s cubic-bezier(0.22, 1, 0.36, 1)    0.58s both; }
.isf-hero-console  { animation: isf-heroIn       0.5s cubic-bezier(0.22, 1, 0.36, 1)    0.68s both; }
.isf-hero-poster-wrap { animation: isf-heroIn    0.7s cubic-bezier(0.22, 1, 0.36, 1)    0.15s both; }

/* Reset hero stagger on slide change (JS adds/removes .isf-hero-entering) */
.isf-hero-slide.isf-hero-entering .isf-hero-badge    { animation-duration: 0.38s; animation-delay: 0.05s; }
.isf-hero-slide.isf-hero-entering .isf-hero-title    { animation-duration: 0.45s; animation-delay: 0.12s; }
.isf-hero-slide.isf-hero-entering .isf-hero-genres   { animation-duration: 0.38s; animation-delay: 0.20s; }
.isf-hero-slide.isf-hero-entering .isf-hero-meta     { animation-duration: 0.38s; animation-delay: 0.28s; }
.isf-hero-slide.isf-hero-entering .isf-hero-console  { animation-duration: 0.38s; animation-delay: 0.35s; }

/* ── 5. SPRING CARD ENTRANCE UPGRADE ──────────────────────────────────── */
@keyframes isf-cardSpring {
    0%   { opacity: 0; transform: translateY(16px) scale(0.94); }
    60%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}
.isf-card {
    opacity: 0;
    animation: none;
}
.isf-card.isf-card--visible {
    animation: isf-cardSpring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── 6. BUTTON RIPPLE ──────────────────────────────────────────────────── */
.isf-btn,
.isf-watch-btn,
.isf-hero-btn,
a.isf-watch-btn {
    position: relative;
    overflow: hidden;
}
.isf-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0);
    animation: isf-rippleAnim 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
}
@keyframes isf-rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

/* ── 7. NAV LINK UNDERLINE SLIDE ───────────────────────────────────────── */
.isf-nav-link,
#isfMainHeader .menu-item a,
.isf-header-nav a {
    position: relative;
}
.isf-nav-link::after,
#isfMainHeader .menu-item a::after,
.isf-header-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--brand-primary, #e50914);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 2px;
}
.isf-nav-link:hover::after,
#isfMainHeader .menu-item a:hover::after,
.isf-header-nav a:hover::after,
#isfMainHeader .menu-item.current-menu-item a::after,
.isf-header-nav .current-menu-item a::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ── 8. NETWORK / PILL RAIL STAGGER ───────────────────────────────────── */
.isf-network-card,
.isf-pill {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.isf-network-card.isf-revealed,
.isf-pill.isf-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── 9. FOOTER REVEAL ──────────────────────────────────────────────────── */
#colophon,
.isf-footer,
footer {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#colophon.isf-revealed,
.isf-footer.isf-revealed,
footer.isf-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── 10. REDUCED MOTION OVERRIDE ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .isf-reveal, .isf-reveal-left, .isf-reveal-scale,
    .isf-row, .isf-section,
    .isf-row-title,
    .isf-hero-badge, .isf-hero-title, .isf-hero-genres,
    .isf-hero-meta, .isf-hero-console, .isf-hero-poster-wrap,
    .isf-card, .isf-card.isf-card--visible,
    .isf-network-card, .isf-pill,
    #colophon, .isf-footer, footer {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    body.isf-page-ready { animation: none !important; }
}