/* ═══════════════════════════════════════════════════════════════
   RIVAMAZA IPTV — Netflix Premium Dark & Gold Theme
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --bg-main: #0a0a0c;
    --bg-card: rgba(22, 22, 26, 0.85);
    --bg-glass: rgba(255,255,255,0.04);
    --color-gold: #d4a853;
    --color-gold-light: #ffe082;
    --color-gold-dark: #a87e21;
    --color-red: #e50914;
    --color-green: #22c55e;
    --color-text: #f1f1f1;
    --color-text-dim: #8a8a96;
    --border-glass: rgba(255,255,255,0.07);
    --radius: 10px;
    --transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-main);
    color: var(--color-text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Scrollbar ────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,168,83,0.35); border-radius: 10px; }

/* ═══════════════════════════════════════════
   TOP NAVIGATION BAR
   ═══════════════════════════════════════════ */
.top-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 30px; height: 64px;
    background: linear-gradient(180deg, rgba(10,10,12,0.98) 0%, rgba(10,10,12,0.85) 70%, transparent 100%);
    backdrop-filter: blur(16px);
    transition: var(--transition);
}
.top-nav.scrolled { background: rgba(10,10,12,0.98); box-shadow: 0 4px 25px rgba(0,0,0,0.6); }

.nav-left-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    max-width: 650px;
}

.nav-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
.brand-icon {
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold), var(--color-gold-dark));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.brand-text {
    font-weight: 900; font-size: 1.15rem; letter-spacing: 1px;
    text-transform: uppercase; color: var(--color-text); white-space: nowrap;
}
.brand-text em {
    font-style: normal;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Kolom Pencarian Sejajar Langsung dengan RivaMaza */
.nav-search-box {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.08); border: 1.2px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px; padding: 7px 18px; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    width: 100%; max-width: 340px;
}
.nav-search-box:focus-within {
    border-color: var(--color-gold);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 18px rgba(212, 168, 83, 0.35);
}
.nav-search-box i { color: var(--color-gold); font-size: 0.92rem; }
.nav-search-box input {
    background: none; border: none; outline: none; color: #ffffff;
    font-family: inherit; font-size: 0.85rem; width: 100%; font-weight: 500;
}
.nav-search-box input::placeholder { color: rgba(255, 255, 255, 0.45); }

.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.nav-live-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px;
    color: var(--color-red); text-transform: uppercase; white-space: nowrap;
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-red);
    animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,9,20,0.6); }
    50% { box-shadow: 0 0 0 6px rgba(229,9,20,0); }
}

.nav-clock { display: flex; align-items: center; gap: 6px; color: var(--color-text-dim); font-size: 0.82rem; font-weight: 500; white-space: nowrap; }

/* ═══════════════════════════════════════════
   HERO / PLAYER SECTION
   ═══════════════════════════════════════════ */
.hero-section {
    position: relative; width: 100%; min-height: auto;
    padding: 76px 30px 20px; display: flex; flex-direction: column;
    background: var(--bg-main);
}
.hero-backdrop {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    opacity: 0.15; transition: opacity 0.8s ease;
    filter: blur(40px) saturate(1.5);
}
.hero-gradient-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
        rgba(10,10,12,0.4) 0%,
        rgba(10,10,12,0.7) 50%,
        var(--bg-main) 100%
    );
}

.hero-content {
    position: relative; z-index: 2;
    display: flex; gap: 20px; flex: 1; max-width: 1500px;
    width: 100%; margin: 0 auto; align-items: flex-start;
}
.hero-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Player Wrapper */
.player-wrapper {
    position: relative; width: 100%;
    border-radius: 14px; overflow: hidden;
    background: #000; aspect-ratio: 16/9; max-height: 54vh;
    border: 1px solid rgba(212,168,83,0.15);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 60px rgba(212,168,83,0.08);
}
.plyr-video { width: 100%; height: 100%; display: block; object-fit: contain; }

.no-signal-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, rgba(20,20,24,0.95) 0%, rgba(10,10,12,1) 100%);
    gap: 12px; transition: opacity 0.5s ease;
}
.no-signal-overlay i { font-size: 3.5rem; color: var(--color-gold); opacity: 0.6; animation: float-signal 3s ease-in-out infinite; }
.no-signal-overlay h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: 3px; color: var(--color-text-dim); }
.no-signal-overlay p { font-size: 0.78rem; color: rgba(255,255,255,0.3); }
@keyframes float-signal { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Player Meta Bar */
.player-meta-bar {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 4px 8px; gap: 16px;
}
.meta-main-flex {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;
    flex-direction: row !important;
    justify-content: flex-start !important;
}
.meta-poster-box {
    width: 62px;
    height: 86px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 215, 0, 0.75);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 15px rgba(229, 9, 20, 0.35);
    background: #090a10;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.meta-poster-box:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 215, 0, 0.5);
}
.meta-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.meta-poster-box.live-tv {
    height: 62px !important;
}
.meta-poster-box.live-tv .meta-poster-img {
    object-fit: contain !important;
    padding: 6px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}
.meta-info { flex: 1; min-width: 0; }
.meta-badge {
    display: inline-block; padding: 3px 12px; border-radius: 4px;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: var(--bg-main);
}
.meta-title {
    font-size: 1.5rem; font-weight: 800; margin-top: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Player Header Media Box Container */
.player-header-media-box {
    width: 36px !important;
    height: 48px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 168, 83, 0.25) !important;
    transition: all 0.3s ease !important;
}
.player-header-media-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
    display: block !important;
}
.player-header-media-box.movie-poster img {
    object-fit: cover !important;
}
.player-header-media-box i {
    font-size: 1.5rem !important;
    color: #d4a853 !important;
    filter: drop-shadow(0 0 5px rgba(212, 168, 83, 0.8)) !important;
}
.player-header-left {
    display: flex !important;
    align-items: center !important;
}
.player-header-text-group {
    display: flex !important;
    flex-direction: column !important;
}

.meta-actions { display: flex; gap: 8px; flex-shrink: 0; }
.action-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 25px;
    background: var(--bg-glass); border: 1px solid var(--border-glass);
    color: var(--color-text-dim); font-family: inherit;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: var(--transition);
}
.action-btn:hover { color: var(--color-text); border-color: var(--color-gold); background: rgba(212,168,83,0.1); }
.action-btn i { font-size: 1rem; }

#btn-like.liked { color: #ef4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); }
#btn-like.liked i { animation: like-pop 0.4s ease; }
@keyframes like-pop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }

.viewer-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-green);
    animation: pulse-dot 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Floating Reactions (TikTok Live Style) ──────────────── */
.floating-reactions {
    position: absolute; bottom: 60px; right: 20px; z-index: 10;
    width: 50px; height: 250px; pointer-events: none;
    overflow: visible;
}
.float-emoji {
    position: absolute; bottom: 0;
    font-size: 1.6rem; opacity: 0;
    animation: float-up 3s ease-out forwards;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.5));
}
@keyframes float-up {
    0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); }
    20% { opacity: 1; transform: translateY(-40px) scale(1.1) rotate(-10deg); }
    50% { opacity: 0.8; transform: translateY(-120px) scale(1) rotate(8deg); }
    80% { opacity: 0.3; transform: translateY(-200px) scale(0.9) rotate(-5deg); }
    100% { opacity: 0; transform: translateY(-260px) scale(0.6) rotate(12deg); }
}

/* ── Emoji Reaction Bar ──────────────────────────────────── */
.emoji-reaction-bar {
    display: flex; gap: 6px; padding: 10px 4px 4px;
    justify-content: flex-start;
}
.emoji-btn {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--bg-glass); border: 1px solid var(--border-glass);
    font-size: 1.15rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: var(--transition); position: relative;
}
.emoji-btn:hover {
    transform: scale(1.25); border-color: var(--color-gold);
    background: rgba(212,168,83,0.15);
    box-shadow: 0 0 16px rgba(212,168,83,0.2);
}
.emoji-btn:active { transform: scale(0.9); }
.emoji-btn.burst::after {
    content: '+1'; position: absolute; top: -8px; right: -4px;
    font-size: 0.6rem; font-weight: 800; color: var(--color-gold);
    animation: burst-fade 0.6s ease forwards;
}
@keyframes burst-fade {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-14px) scale(0.7); }
}

/* ── Custom Subtitle Overlay (Netflix Style) ─────────────── */
    position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%);
    z-index: 15; pointer-events: none; text-align: center;
    max-width: 85%; width: max-content;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
    display: inline-block;
    background: rgba(8, 8, 12, 0.88);
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.12rem; font-weight: 600;
    line-height: 1.4; padding: 6px 18px;
    border-radius: 8px;
    border: 1px solid rgba(212, 168, 83, 0.35);
    box-shadow: 0 4px 25px rgba(0,0,0,0.85), 0 0 15px rgba(212, 168, 83, 0.2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
    letter-spacing: 0.3px;
}
@media (max-width: 768px) {
}

/* ═══════════════════════════════════════════
   LIVE CHAT PANEL (Floating Solid Modal Engine)
   ═══════════════════════════════════════════ */
.chat-panel {
    position: fixed !important; top: 80px !important; right: 20px !important;
    width: 360px !important; height: calc(100vh - 100px) !important; max-height: 640px !important;
    z-index: 999999 !important; border-radius: 20px !important;
    background: #0c0c10 !important; opacity: 1 !important;
    filter: none !important; backdrop-filter: none !important;
    border: 1px solid var(--color-gold) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(212, 168, 83, 0.15) !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; pointer-events: auto !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
}
.chat-panel.hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; }

/* ── Chat Tool Buttons (Emoji & Sticker Pickers) ──────────── */
.chat-tool-btn {
    background: none !important; border: none !important;
    color: var(--color-gold) !important; font-size: 1.25rem !important;
    cursor: pointer !important; padding: 6px 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    flex-shrink: 0 !important; opacity: 0.85 !important;
}
.chat-tool-btn:hover {
    transform: scale(1.2) !important; opacity: 1 !important;
    color: #ffd700 !important;
}

/* ── Chat Picker Popups (Emoji & Sticker Grids) ────────────── */
.chat-picker-popup {
    position: absolute; bottom: 70px; left: 12px; right: 12px;
    background: #0f0f16 !important; border: 1px solid var(--color-gold) !important;
    border-radius: 18px !important; padding: 14px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.95), 0 0 25px rgba(212,168,83,0.2) !important;
    z-index: 10000050 !important;
    display: flex; flex-direction: column; gap: 10px;
    animation: popupSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-picker-popup.hidden { display: none !important; }
@keyframes popupSlide {
    0% { opacity: 0; transform: translateY(15px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.picker-header {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.82rem; font-weight: 800; color: #f8fafc;
    border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 8px;
}
.picker-close {
    background: none; border: none; color: #94a3b8; font-size: 1.2rem;
    cursor: pointer; padding: 0 4px; transition: color 0.2s;
}
.picker-close:hover { color: #fff; }

.emoji-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
    max-height: 180px; overflow-y: auto; padding-right: 4px;
}
.emoji-item {
    font-size: 1.5rem; text-align: center; cursor: pointer;
    padding: 6px; border-radius: 10px; transition: transform 0.2s, background 0.2s;
}
.emoji-item:hover {
    transform: scale(1.3); background: rgba(212,168,83,0.15);
}

.sticker-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    max-height: 210px; overflow-y: auto; padding-right: 4px;
}
.sticker-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08); cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sticker-item:hover {
    transform: translateY(-4px) scale(1.08);
    background: rgba(212,168,83,0.15); border-color: var(--color-gold);
    box-shadow: 0 6px 20px rgba(212,168,83,0.25);
}
.sticker-item img {
    width: 42px; height: 42px; object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.sticker-item span {
    font-size: 0.65rem; font-weight: 800; color: #cbd5e1;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Chat Sticker Bubble in Messages Stream ─────────────── */
.chat-sticker-bubble {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 6px 0; margin-top: 2px;
}
.chat-sticker-img {
    width: 64px; height: 64px; object-fit: contain;
    filter: drop-shadow(0 6px 15px rgba(212,168,83,0.4));
    animation: stickerBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes stickerBounce {
    0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
    50% { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.chat-sticker-label {
    font-size: 0.68rem; font-weight: 800; color: var(--color-gold);
    background: rgba(212,168,83,0.12); padding: 2px 8px; border-radius: 6px;
    border: 1px solid rgba(212,168,83,0.3);
}

/* ── Mobile Chat Backdrop Overlay ───────────────────────── */
.chat-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.chat-backdrop.active {
    opacity: 1; pointer-events: auto;
}

/* ── Interactive User Star Rating System ────────────────── */
.user-rating-box {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
    padding: 8px 14px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-glass); border-radius: 20px;
    width: fit-content;
}
.user-rating-label { font-size: 0.78rem; font-weight: 700; color: var(--color-text-dim); }
.star-rating-interactive { display: flex; gap: 4px; color: #475569; font-size: 1rem; cursor: pointer; }
.star-rating-interactive i { transition: var(--transition); }
.star-rating-interactive i:hover,
.star-rating-interactive i.active { color: #f59e0b; transform: scale(1.18); }
.user-rating-score { font-size: 0.78rem; font-weight: 800; color: var(--color-gold); margin-left: 4px; }

/* ── Season Selector Tabs ───────────────────────────────── */
.season-tabs {
    display: flex; gap: 8px; margin-bottom: 10px; overflow-x: auto;
    scrollbar-width: none;
}
.season-tabs::-webkit-scrollbar { display: none; }
.season-tab {
    padding: 6px 14px; border-radius: 20px; font-size: 0.76rem; font-weight: 800;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border-glass);
    color: var(--color-text-dim); cursor: pointer; transition: var(--transition);
    white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 5px;
}
.season-tab:hover {
    background: rgba(212,168,83,0.15); border-color: rgba(212,168,83,0.4);
    color: #ffffff; transform: translateY(-1px);
}
.season-tab.active {
    background: var(--color-gold); color: #0a0a0c; border-color: var(--color-gold-dark);
    box-shadow: 0 0 10px rgba(212,168,83,0.3);
}

/* ── Netflix Season Dropdown Selector ───────────────────── */
.season-selector-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}
.season-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1.5px solid rgba(212, 168, 83, 0.45);
    background: linear-gradient(135deg, rgba(20, 20, 26, 0.95), rgba(12, 12, 18, 0.98));
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 168, 83, 0.1);
}
.season-dropdown-btn i:first-child {
    color: var(--color-gold);
    font-size: 1rem;
}
.season-dropdown-btn:hover {
    border-color: var(--color-gold);
    background: linear-gradient(135deg, rgba(30, 28, 22, 0.98), rgba(18, 16, 12, 0.98));
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 168, 83, 0.2);
    transform: translateY(-1px);
}
.season-chevron {
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-left: 4px;
}

/* Season Dropdown Menu */
.season-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-height: 300px;
    overflow-y: auto;
    background: #0f0f16;
    border: 1.5px solid rgba(212, 168, 83, 0.4);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(212, 168, 83, 0.15);
    z-index: 1000;
    padding: 6px;
    animation: seasonDropIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(212,168,83,0.3) transparent;
}
.season-dropdown-menu.hidden {
    display: none !important;
}
@keyframes seasonDropIn {
    0% { opacity: 0; transform: translateY(-8px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.season-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 12px;
}
.season-dropdown-item:hover {
    background: rgba(212, 168, 83, 0.12);
}
.season-dropdown-item.active {
    background: rgba(212, 168, 83, 0.18);
    border-left: 3px solid var(--color-gold);
}
.season-item-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
}
.season-item-label i {
    color: var(--color-gold);
    font-size: 0.8rem;
}
.season-dropdown-item.active .season-item-label i {
    color: #ffd700;
}
.season-item-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.season-dropdown-item.active .season-item-count {
    color: var(--color-gold);
    background: rgba(212, 168, 83, 0.12);
}

@media (max-width: 768px) {
    .season-dropdown-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }
    .season-dropdown-menu {
        min-width: 200px;
    }
}

.chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-glass);
    background: rgba(212,168,83,0.06);
}
.chat-header h4 { font-size: 0.88rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.chat-header h4 i { color: var(--color-gold); }
.chat-header-stats { display: flex; align-items: center; gap: 12px; }
.chat-comment-count {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.75rem; font-weight: 700; color: var(--color-gold);
    background: rgba(212,168,83,0.1); padding: 4px 10px; border-radius: 12px;
}
.chat-comment-count i { font-size: 0.72rem; }
.chat-close-btn {
    background: none; border: none; color: var(--color-text-dim);
    cursor: pointer; font-size: 0.9rem; padding: 4px;
    transition: var(--transition);
}
.chat-close-btn:hover { color: var(--color-text); }

.chat-messages {
    flex: 1; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.chat-welcome {
    text-align: center; padding: 30px 20px; color: var(--color-text-dim);
    font-size: 0.78rem; line-height: 1.5;
}
.chat-welcome i { font-size: 2rem; color: var(--color-gold); opacity: 0.4; display: block; margin-bottom: 12px; }

.chat-msg {
    display: flex; gap: 10px; padding: 8px 12px;
    border-radius: 10px; background: var(--bg-glass);
    animation: chat-slide-in 0.3s ease;
}
@keyframes chat-slide-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 800; color: var(--bg-main);
    flex-shrink: 0;
}
.chat-body { flex: 1; min-width: 0; }
.chat-username { font-size: 0.72rem; font-weight: 700; color: var(--color-gold); }
.chat-text { font-size: 0.8rem; color: var(--color-text-dim); margin-top: 2px; word-break: break-word; }
.chat-msg.user-msg { background: rgba(212,168,83,0.1); border: 1px solid rgba(212,168,83,0.15); }
.chat-msg.user-msg .chat-username { color: var(--color-gold-light); }

.chat-input-area {
    display: flex; gap: 8px; padding: 12px 14px;
    border-top: 1px solid var(--border-glass);
    background: rgba(10,10,12,0.6);
}
.chat-input-area input {
    flex: 1; background: var(--bg-glass); border: 1px solid var(--border-glass);
    border-radius: 20px; padding: 9px 16px; color: var(--color-text);
    font-family: inherit; font-size: 0.82rem; outline: none;
    transition: var(--transition);
}
.chat-input-area input:focus { border-color: var(--color-gold); }
.chat-input-area input::placeholder { color: var(--color-text-dim); }
#chat-send-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    border: none; color: var(--bg-main); font-size: 0.78rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
#chat-send-btn:hover { transform: scale(1.1); box-shadow: 0 0 12px rgba(212,168,83,0.4); }

/* ═══════════════════════════════════════════
   NETFLIX BROWSE ROWS
   ═══════════════════════════════════════════ */
.browse-section {
    padding: 10px 40px 60px; position: relative; z-index: 2;
    max-width: 1500px; width: 100%; margin: 0 auto;
}

.channel-row { margin-bottom: 35px; }
.row-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.row-title {
    font-size: 1.2rem; font-weight: 800;
    display: flex; align-items: center; gap: 10px;
}
.row-title i { color: var(--color-gold); font-size: 1rem; }
.row-count {
    font-size: 0.72rem; font-weight: 600; color: var(--color-text-dim);
    background: var(--bg-glass); padding: 4px 12px; border-radius: 12px;
}

.row-slider {
    display: flex; gap: 14px; overflow-x: auto;
    padding-bottom: 10px; scroll-snap-type: x mandatory;
}
.row-slider::-webkit-scrollbar { height: 3px; }
.row-slider::-webkit-scrollbar-thumb { background: rgba(212,168,83,0.3); border-radius: 10px; }

/* Channel Card (Netflix Style) */
.channel-card {
    flex-shrink: 0; width: 200px; scroll-snap-align: start;
    border-radius: 12px; overflow: hidden; cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    transition: var(--transition);
    position: relative;
}
.channel-card:hover {
    transform: scale(1.08) translateY(-6px);
    border-color: var(--color-gold);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(212,168,83,0.15);
    z-index: 5;
}
.channel-card.active {
    border-color: var(--color-gold);
    box-shadow: 0 0 25px rgba(212,168,83,0.25);
}
.channel-card.active::after {
    content: 'PLAYING'; position: absolute; top: 8px; right: 8px;
    font-size: 0.58rem; font-weight: 800; letter-spacing: 1px;
    padding: 3px 8px; border-radius: 4px;
    background: var(--color-red); color: #fff;
}

.card-logo-area {
    height: 110px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, rgba(30,30,36,1) 0%, rgba(18,18,22,1) 100%);
    padding: 20px; position: relative;
    overflow: hidden;
}
.card-logo-area::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at center, rgba(212,168,83,0.04) 0%, transparent 70%);
}
.card-logo-area img {
    max-height: 55px; max-width: 80%;
    object-fit: contain; position: relative; z-index: 1;
    filter: brightness(1.1);
    transition: var(--transition);
}
.channel-card:hover .card-logo-area img { transform: scale(1.12); filter: brightness(1.3); }

.card-info {
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(22,22,26,0.9) 0%, rgba(16,16,20,1) 100%);
}
.card-name {
    font-size: 0.82rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-status {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.68rem; color: var(--color-text-dim); margin-top: 5px;
}
.card-status .status-dot {
    width: 5px; height: 5px; border-radius: 50%; background: var(--color-green);
}

/* ── Mode Switcher & Movie VOD Cards ─────────────────────── */
.nav-main-modes {
    display: flex; gap: 8px; margin-left: 20px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-glass);
    padding: 3px; border-radius: 30px;
}
.nav-mode-btn {
    background: none; border: none; padding: 7px 16px;
    border-radius: 20px; color: var(--color-text-dim);
    font-family: inherit; font-size: 0.82rem; font-weight: 700;
    cursor: pointer; transition: var(--transition);
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.nav-mode-btn:hover { color: var(--color-text); }
.nav-mode-btn.active {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--bg-main); box-shadow: 0 4px 15px rgba(212,168,83,0.3);
}

/* Movie Portrait VOD Card */
.movie-card {
    flex-shrink: 0; width: 170px; scroll-snap-align: start;
    border-radius: 10px; overflow: hidden; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border-glass);
    transition: var(--transition); position: relative;
    aspect-ratio: 2/3;
}
.movie-card:hover {
    transform: scale(1.08) translateY(-6px);
    border-color: var(--color-gold);
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 25px rgba(212,168,83,0.25);
    z-index: 5;
}
.movie-card.active { border-color: var(--color-gold); box-shadow: 0 0 25px rgba(212,168,83,0.3); }

.movie-cover-area {
    width: 100%; height: 100%; position: relative;
}
.movie-cover-area img {
    width: 100%; height: 100%; object-fit: cover;
    transition: var(--transition);
}
.movie-card:hover .movie-cover-area img { filter: brightness(0.65) scale(1.05); }

.movie-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(10,10,12,0.95) 0%, rgba(10,10,12,0.4) 50%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 12px; opacity: 0.9; transition: var(--transition);
}
.movie-card:hover .movie-overlay { opacity: 1; }

.movie-title {
    font-size: 0.85rem; font-weight: 800; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.movie-meta {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.68rem; color: var(--color-text-dim); margin-top: 5px;
}
.movie-meta-rating { color: var(--color-gold); font-weight: 700; }
.movie-meta-duration { font-weight: 600; }

.movie-badge-premium {
    position: absolute; top: 8px; left: 8px;
    font-size: 0.58rem; font-weight: 900; letter-spacing: 0.5px;
    background: var(--color-red); color: #fff;
    padding: 3px 8px; border-radius: 4px; z-index: 3;
}

.movie-badge-coming-soon {
    position: absolute; top: 8px; left: 8px;
    font-size: 0.58rem; font-weight: 900; letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffe082 0%, #d4a853 50%, #a87e21 100%); color: #0b0b0c;
    padding: 3px 8px; border-radius: 4px; z-index: 3;
    box-shadow: 0 0 10px rgba(212, 168, 83, 0.4);
}

.coming-soon-poster {
    position: relative;
    filter: grayscale(0.25) brightness(0.7);
    transition: all 0.3s ease;
}
.movie-card:hover .coming-soon-poster {
    filter: grayscale(0) brightness(0.9);
}

.coming-soon-overlay-banner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 9, 11, 0.4);
    z-index: 2;
    transition: all 0.3s ease;
}
.coming-soon-overlay-banner .banner-inner {
    background: rgba(9, 9, 11, 0.85);
    border: 1px solid rgba(212, 168, 83, 0.3);
    padding: 8px 14px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #ffd700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transform: scale(0.92);
    transition: all 0.3s ease;
}
.coming-soon-overlay-banner .banner-inner i {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
}
.coming-soon-overlay-banner .banner-inner span {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
}
.movie-card:hover .coming-soon-overlay-banner .banner-inner {
    transform: scale(1.0);
    border-color: rgba(212, 168, 83, 0.6);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.15);
}

/* ── Mobile Chat Backdrop & Drawer Sheet ──────────────── */
.chat-backdrop {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.chat-backdrop.active { opacity: 1; pointer-events: auto; }

.drawer-drag-handle {
    width: 40px; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,0.25); margin: 8px auto 4px;
    display: none;
}

/* ── Episodes & Seasons Bar ─────────────────────────────── */
.episodes-container {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--border-glass);
    width: 100%;
}
.episodes-title {
    font-size: 0.82rem; font-weight: 800; color: var(--color-gold);
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.episodes-grid {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px;
}
.episodes-grid::-webkit-scrollbar { display: none; }
.episode-btn {
    padding: 7px 14px; border-radius: 8px; font-size: 0.78rem; font-weight: 700;
    background: var(--bg-glass); border: 1px solid var(--border-glass);
    color: var(--color-text-dim); cursor: pointer; transition: var(--transition);
    white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
}
.episode-btn:hover { color: #fff; border-color: var(--color-gold); background: rgba(212,168,83,0.12); }
.episode-btn.active {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: #0a0a0c; border-color: var(--color-gold);
    box-shadow: 0 2px 10px rgba(212,168,83,0.35);
}

/* ═══════════════════════════════════════════
   NETFLIX STYLE INTRO & SKIP INTRO ENGINE
   ═══════════════════════════════════════════ */
.netflix-intro-overlay {
    position: absolute; inset: 0; z-index: 99;
    background: #000000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    overflow: hidden; pointer-events: auto;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.netflix-intro-overlay.fade-out {
    opacity: 0; pointer-events: none;
}

.netflix-intro-brand {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    animation: netflixZoom 5.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes netflixZoom {
    0% { opacity: 0; transform: scale(2.8); filter: blur(18px); }
    18% { opacity: 1; transform: scale(1.15); filter: blur(0); }
    80% { opacity: 1; transform: scale(0.92); filter: blur(0); }
    100% { opacity: 0; transform: scale(0.65); filter: blur(12px); }
}

.netflix-n-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 5.5rem; font-weight: 900;
    background: linear-gradient(180deg, #ffffff 0%, #e50914 40%, #b20710 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(229, 9, 20, 0.9), 0 0 80px rgba(229, 9, 20, 0.5);
    letter-spacing: -2px; line-height: 1;
}

.netflix-intro-text {
    font-size: 1.15rem; font-weight: 800; letter-spacing: 7px;
    color: #ffffff; text-transform: uppercase; margin-top: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #ffd700 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(0,0,0,0.9);
}

.netflix-light-beam {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 9, 20, 0.6) 0%, rgba(229, 9, 20, 0) 70%);
    animation: beamPulse 5.2s ease-in-out forwards;
    pointer-events: none;
}
@keyframes beamPulse {
    0% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
    35% { transform: translate(-50%, -50%) scale(2.0); opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
}

/* ═══════════════════════════════════════════
   NETFLIX STYLE SUBTITLE OVERLAY ENGINE
   ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   NETFLIX PREMIUM PLYR PLAYER OVERRIDES
   ═══════════════════════════════════════════ */
.plyr {
    --plyr-color-main: #ffd700 !important;
    --plyr-range-fill-background: #ffd700 !important;
    --plyr-video-control-color: #ffffff !important;
    --plyr-video-control-color-hover: #ffd700 !important;
    font-family: 'Outfit', sans-serif !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.plyr__controls {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,8,12,0.95) 100%) !important;
    padding: 14px 18px !important;
}

.plyr__control--overlaid {
    background: rgba(229, 9, 20, 0.85) !important;
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 30px rgba(229, 9, 20, 0.6) !important;
}

/* ═══════════════════════════════════════════
   NETFLIX STYLE SUBTITLE OVERLAY ENGINE (100% CENTERED & COMPACT)
   ═══════════════════════════════════════════ */
.plyr__captions,
.plyr #custom-subtitle-overlay,
.player-wrapper #custom-subtitle-overlay,
#custom-subtitle-overlay {
    position: absolute !important;
    top: auto !important;
    bottom: 50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 85% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    opacity: 0;
    transition: opacity 0.2s ease-in-out !important;
}

.plyr__caption {
    background: rgba(4, 4, 8, 0.88) !important;
    color: #ffffff !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    padding: 5px 14px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 215, 0, 0.55) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9), 0 0 12px rgba(212, 168, 83, 0.25) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 1) !important;
    letter-spacing: 0.3px !important;
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
    word-break: break-word !important;
    float: none !important;
}

@media (max-width: 768px) {
    .plyr__captions,
    .plyr #custom-subtitle-overlay,
    #custom-subtitle-overlay {
        bottom: 42px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 90% !important;
    }
    .plyr__caption,
    .custom-subtitle-text {
        font-size: 0.78rem !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
    }
}

/* ═══════════════════════════════════════════
   NETFLIX AUDIO & SUBTITLE GLASS MODAL
   ═══════════════════════════════════════════ */
    position: absolute !important; inset: 20px !important; z-index: 2147483647 !important;
    background: rgba(12, 12, 18, 0.96) !important;
    backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important;
    border: 1.5px solid var(--color-gold) !important;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.98), 0 0 40px rgba(212, 168, 83, 0.25) !important;
    display: flex !important; flex-direction: column !important; gap: 16px !important;
    animation: modalScale 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto !important;
}
@keyframes modalScale {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.netflix-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.netflix-modal-header h3 {
    font-size: 1.1rem; font-weight: 800; color: #ffffff;
    display: flex; align-items: center; gap: 10px;
}
.netflix-modal-close {
    background: none; border: none; color: #cbd5e1; font-size: 1.3rem;
    cursor: pointer; padding: 4px; transition: color 0.2s;
}
.netflix-modal-close:hover { color: #ffffff; }

.netflix-modal-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex: 1;
    overflow-y: auto;
}
.netflix-modal-col h4 {
    font-size: 0.85rem; font-weight: 800; letter-spacing: 1px; color: #cbd5e1;
    margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.audio-track-list, .sub-track-list {
    display: flex; flex-direction: column; gap: 8px;
}
.netflix-track-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.88rem; font-weight: 700; color: #cbd5e1;
    cursor: pointer; transition: all 0.2s ease;
}
.netflix-track-item:hover {
    background: rgba(212, 168, 83, 0.15); border-color: rgba(212, 168, 83, 0.4);
    color: #ffffff; transform: translateX(4px);
}
.netflix-track-item.active {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.25), rgba(229, 9, 20, 0.25)) !important;
    border-color: var(--color-gold) !important;
    color: #ffd700 !important;
}
.netflix-track-item i { font-size: 1rem; }

@media (max-width: 768px) {
    .netflix-modal-body { grid-template-columns: 1fr !important; gap: 16px !important; }
    .netflix-track-item { padding: 10px 12px !important; font-size: 0.82rem !important; }
}

/* ═══════════════════════════════════════════
   NETFLIX STYLE TOP PLAYER HEADER BAR
   ═══════════════════════════════════════════ */
.netflix-player-header {
    position: absolute; top: 16px; left: 20px; right: 20px;
    z-index: 2147483647; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between;
    opacity: 0; transition: opacity 0.3s ease;
}
.netflix-quick-controls.show-controls ~ .netflix-player-header,
{
    opacity: 1;
}

.player-header-left {
    display: flex; align-items: center; gap: 10px;
    background: rgba(8, 8, 14, 0.75);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 6px 14px; border-radius: 30px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}
.player-header-badge {
    background: var(--color-gold); color: #000000;
    font-size: 0.65rem; font-weight: 900; padding: 2px 8px; border-radius: 20px;
    letter-spacing: 0.5px;
}
.player-header-title {
    font-size: 0.85rem; font-weight: 800; color: #ffffff;
    max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════
   NETFLIX QUICK PLAYER CONTROLS (-10s, +10s, Prev/Next)
   ═══════════════════════════════════════════ */
.netflix-quick-controls {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 90% !important;
    max-width: 440px !important;
}

/* ONLY show when show-controls class is explicitly present */
.netflix-quick-controls.show-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.quick-ctrl-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(12, 12, 18, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.65) !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95), 0 0 20px rgba(212, 168, 83, 0.3) !important;
    flex-shrink: 0 !important;
}

.quick-ctrl-btn.play-pause-main {
    width: 62px !important;
    height: 62px !important;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.9), rgba(180, 5, 12, 0.95)) !important;
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 35px rgba(229, 9, 20, 0.8), 0 0 20px rgba(255, 215, 0, 0.5) !important;
}
.quick-ctrl-btn.play-pause-main i {
    font-size: 1.85rem !important;
    color: #ffffff !important;
}

.quick-ctrl-btn:hover, .quick-ctrl-btn:active {
    transform: scale(1.15) !important;
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.6), rgba(229, 9, 20, 0.6)) !important;
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 12px 35px rgba(212, 168, 83, 0.5) !important;
}

.quick-ctrl-btn i { font-size: 1.2rem !important; }
.ctrl-sec-tag { font-size: 0.58rem !important; font-weight: 900 !important; color: #ffd700 !important; margin-top: -2px !important; }

/* Responsive adjustments for Mobile Portrait & Mobile Landscape */
@media (max-width: 768px) {
    .netflix-quick-controls {
        gap: 10px !important;
        max-width: 340px !important;
    }
    .quick-ctrl-btn {
        width: 42px !important;
        height: 42px !important;
    }
    .quick-ctrl-btn.play-pause-main {
        width: 52px !important;
        height: 52px !important;
    }
    .quick-ctrl-btn.play-pause-main i {
        font-size: 1.5rem !important;
    }
    .quick-ctrl-btn i { font-size: 1rem !important; }
    .ctrl-sec-tag { font-size: 0.52rem !important; }
}

@media (orientation: landscape) and (max-height: 500px) {
    .netflix-quick-controls {
        gap: 24px !important;
        max-width: 460px !important;
    }
    .quick-ctrl-btn {
        width: 50px !important;
        height: 50px !important;
    }
}

/* Skip Intro Buttons (Positioned at TOP RIGHT CORNER per user request) */
.btn-skip-intro-overlay {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2147483647 !important;
    padding: 9px 18px !important;
    border-radius: 24px !important;
    background: rgba(10, 10, 15, 0.88) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.7) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95), 0 0 20px rgba(212, 168, 83, 0.3) !important;
    transition: all 0.25s ease !important;
}
.btn-skip-intro-overlay:hover,
.btn-skip-intro-overlay:active {
    background: linear-gradient(135deg, #e50914, #b4050c) !important;
    border-color: #ffd700 !important;
    transform: scale(1.08) !important;
    box-shadow: 0 12px 35px rgba(229, 9, 20, 0.85), 0 0 25px rgba(255, 215, 0, 0.5) !important;
}
.btn-skip-intro-overlay i {
    color: #ffd700 !important;
    font-size: 0.9rem !important;
}

/* ═══════════════════════════════════════════
   PLYR OVERRIDES
   ═══════════════════════════════════════════ */
.plyr { --plyr-color-main: var(--color-gold); --plyr-video-background: #000; border-radius: 14px; }
.plyr__control--overlaid { background: rgba(212,168,83,0.85) !important; }
.plyr__control--overlaid:hover { background: var(--color-gold) !important; }
.plyr__controls { background: linear-gradient(transparent, rgba(0,0,0,0.85)) !important; }

/* Fullscreen: fill entire screen edge-to-edge without black bars */
.plyr--fullscreen-active video,
.plyr--fullscreen-active .plyr-video,
.plyr:-webkit-full-screen video { object-fit: cover !important; width: 100% !important; height: 100% !important; }
.plyr--fullscreen-active { border-radius: 0 !important; }
.plyr--fullscreen-active .plyr__video-wrapper { height: 100% !important; }

/* Luxury SweetAlert2 Episode Popup Override */
.swal2-popup.swal-luxury-ep-popup {
    border: 1px solid rgba(212,168,83,0.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.9), 0 0 40px rgba(229,9,20,0.15) !important;
}

/* Luxury SweetAlert2 Connection/Offline Popup Override */
.swal2-popup.swal-luxury-connection-popup {
    border: 2px solid #d4a853 !important;
    box-shadow: 0 0 35px rgba(212, 168, 83, 0.45), 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    border-radius: 20px !important;
    background: #0e121c !important;
    font-family: 'Outfit', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-LUXURY RELEASE NOTIFICATION BANNER (NETFLIX PREMIUM)
   ═══════════════════════════════════════════════════════════════ */
.iptv-luxury-notif-toast {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 2147483647 !important;
    background: linear-gradient(145deg, rgba(16, 20, 36, 0.96) 0%, rgba(9, 11, 20, 0.98) 100%) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.75) !important;
    border-radius: 20px !important;
    padding: 16px 18px 14px !important;
    min-width: 340px !important;
    max-width: 440px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(229, 9, 20, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    transform: translateX(130%) scale(0.9) !important;
    opacity: 0 !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.iptv-luxury-notif-toast.show {
    transform: translateX(0) scale(1) !important;
    opacity: 1 !important;
}

.rm-notif-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.rm-notif-pill {
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.6) !important;
}

.rm-notif-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: #94a3b8 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 0.85rem !important;
}

.rm-notif-close:hover {
    background: rgba(229, 9, 20, 0.8) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.rm-notif-main-content {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
}

.rm-notif-poster {
    width: 58px !important;
    height: 82px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    border: 1.5px solid rgba(255, 215, 0, 0.75) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.85), 0 0 12px rgba(229,9,20,0.35) !important;
    flex-shrink: 0 !important;
    background: #09090e !important;
}

.rm-notif-text-col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    overflow: hidden !important;
}

.rm-notif-headline {
    color: #ffffff !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

.rm-notif-subtext {
    color: #cbd5e1 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.rm-notif-action-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 2px !important;
}

.rm-notif-play-btn {
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid #ffd700 !important;
    border-radius: 12px !important;
    padding: 6px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.6) !important;
    transition: all 0.2s ease !important;
}

.rm-notif-play-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.85), 0 0 15px rgba(255, 215, 0, 0.5) !important;
}

.rm-notif-progress-track {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.rm-notif-progress-bar {
    height: 100% !important;
    width: 100% !important;
    background: linear-gradient(90deg, #e50914, #ffd700) !important;
    box-shadow: 0 0 8px #ffd700 !important;
    transition: width 5.5s linear !important;
}

@media (max-width: 600px) {
    .iptv-luxury-notif-toast {
        top: 16px !important;
        left: 12px !important;
        right: 12px !important;
        min-width: auto !important;
        max-width: 100% !important;
        padding: 14px 16px 12px !important;
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE LAYOUT & MOBILE DRAWER
   ═══════════════════════════════════════════ */
@media (max-width: 1100px) {
    .drawer-drag-handle { display: block; }
    .chat-panel {
        position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important; height: 75vh !important; max-height: 520px !important;
        z-index: 9999999 !important; border-radius: 24px 24px 0 0 !important;
        background: #0d0d12 !important; opacity: 1 !important;
        filter: none !important; backdrop-filter: none !important;
        border-top: 2px solid var(--color-gold) !important;
        box-shadow: 0 -20px 60px rgba(0,0,0,1) !important;
        transform: translateY(150%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: none !important; flex-direction: column !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
    .chat-panel.active-mobile {
        transform: translateY(0) !important;
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .chat-panel.hidden {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(150%) !important;
    }
    .chat-header {
        background: linear-gradient(135deg, rgba(212,168,83,0.12), rgba(212,168,83,0.04)) !important;
        padding: 14px 18px !important; flex-shrink: 0 !important;
    }
    .chat-messages {
        background: #0d0d12 !important; padding: 14px !important;
        flex: 1 !important; overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .chat-msg {
        background: #1a1a24 !important;
        border: 1px solid rgba(212,168,83,0.08) !important;
        border-radius: 12px !important;
        padding: 10px 14px !important;
    }
    .chat-text {
        color: #e2e8f0 !important; font-weight: 500 !important;
        font-size: 0.85rem !important;
    }
    .chat-username {
        color: var(--color-gold) !important; font-size: 0.75rem !important;
        font-weight: 800 !important;
    }
    .chat-input-area {
        position: relative !important; flex-shrink: 0 !important;
        background: #141418 !important; z-index: 10000000 !important;
        padding: 12px 14px !important; pointer-events: auto !important;
        display: flex !important; align-items: center !important; gap: 10px !important;
        border-top: 1px solid rgba(212,168,83,0.2) !important;
    }
    .chat-input-area input {
        background: #0a0a0e !important; color: #ffffff !important;
        font-size: 16px !important; padding: 12px 16px !important;
        border-radius: 24px !important; border: 1px solid rgba(212,168,83,0.3) !important;
        pointer-events: auto !important; flex: 1 !important; outline: none !important;
        font-family: 'Outfit', sans-serif !important;
        -webkit-appearance: none !important;
    }
    .chat-input-area input:focus {
        border-color: var(--color-gold) !important;
        box-shadow: 0 0 12px rgba(212,168,83,0.2) !important;
    }
    #chat-send-btn {
        width: 36px !important; height: 36px !important; min-width: 36px !important;
        background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)) !important;
        color: #000 !important; font-weight: 800 !important;
        border-radius: 50% !important; border: none !important; cursor: pointer !important;
        pointer-events: auto !important; flex-shrink: 0 !important;
        font-size: 0.85rem !important; display: flex !important;
        align-items: center !important; justify-content: center !important;
        box-shadow: 0 4px 12px rgba(212,168,83,0.25) !important;
    }
    .hero-section { padding: 68px 0 14px !important; min-height: auto; }
    .hero-content { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; }
    .hero-left { padding: 0 !important; margin: 0 !important; width: 100% !important; }
    .player-wrapper {
        border-radius: 0 !important; margin: 0 !important;
        width: 100% !important; max-width: 100% !important;
        border: none !important;
    }
    .plyr { border-radius: 0 !important; width: 100% !important; }
    .player-meta-bar, .episodes-container, .emoji-reaction-bar {
        padding-left: 14px !important; padding-right: 14px !important;
    }
    .browse-section { padding: 10px 14px 40px; }
    .top-nav { padding: 0 14px; }
    .nav-category-bar { display: none; }
    /* Notification toast mobile */
    .iptv-notification-toast {
        right: 10px !important; left: 10px !important;
        min-width: auto !important; max-width: none !important;
    }
}

@media (max-width: 768px) {
    .top-nav {
        height: auto; min-height: calc(56px + env(safe-area-inset-top, 0px));
        padding: calc(14px + env(safe-area-inset-top, 0px)) 10px 8px;
        flex-wrap: wrap; gap: 6px 10px;
        align-items: center; justify-content: space-between;
    }
    .nav-brand-group { gap: 6px; flex-shrink: 0; }
    .brand-text { font-size: 0.85rem; }
    .nav-mode-btn { padding: 4px 10px; font-size: 0.72rem; }
    .nav-right { flex: 1; justify-content: flex-end; gap: 6px; }
    .nav-search-box { flex: 1; max-width: 160px; padding: 5px 10px; }
    .nav-search-box input { width: 100%; font-size: 0.78rem; }
    .hero-section { padding: calc(76px + env(safe-area-inset-top, 0px)) 0 10px !important; width: 100% !important; }
    .player-wrapper {
        aspect-ratio: 16/9 !important; max-height: none !important;
        border: none !important; box-shadow: none !important;
    }
    .plyr-video { object-fit: contain !important; }
    .browse-section { padding: 8px 10px 30px; }
    .meta-title { font-size: 1.1rem; }
    .player-meta-bar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px 6px !important; }
    .meta-actions { width: 100%; justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
    .channel-card { width: 140px; }
    .card-logo-area { height: 78px; }
    .row-title { font-size: 0.95rem; }
}

@media (max-width: 576px) {
    .nav-clock { display: none !important; }
    .nav-live-badge { display: none !important; }
    .nav-search-box { max-width: 140px; }
}

@media (max-width: 480px) {
    .nav-brand .brand-text { display: inline-block !important; font-size: 0.85rem; font-weight: 800; }
    .brand-icon { font-size: 1.3rem; }
    .nav-main-modes { padding: 2px; }
    .nav-mode-btn { padding: 3px 7px; font-size: 0.68rem; }
    .nav-search-box { max-width: 120px; padding: 4px 8px; }
    .nav-search-box input { font-size: 0.74rem; }
    .channel-card { width: 135px; }
    .card-logo-area { height: 72px; padding: 10px; }
    .card-logo-area img { max-height: 38px; }
    
    /* Keep Action Button Icons and Numbers Visible on Mobile */
    .action-btn { padding: 6px 10px; font-size: 0.75rem; gap: 4px; }
    .action-btn span { display: inline-block !important; font-size: 0.78rem !important; font-weight: 700 !important; }
    .action-btn i { font-size: 0.85rem; }
    .user-rating-box { padding: 6px 10px; font-size: 0.72rem; }
}

/* ═══════════════════════════════════════════
   NETFLIX LUXURY CUSTOM SUBTITLE OVERLAY SYSTEM
   ═══════════════════════════════════════════ */
#custom-subtitle-overlay {
    position: absolute !important;
    bottom: 55px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    text-align: center !important;
    width: 90% !important;
    max-width: 850px !important;
    transition: opacity 0.2s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.custom-subtitle-text {
    background: rgba(0, 0, 0, 0.75) !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    padding: 4px 14px !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-block !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px !important;
}

@media (max-width: 768px) {
    #custom-subtitle-overlay {
        bottom: 55px !important;
    }
    .custom-subtitle-text {
        font-size: 0.85rem !important;
        padding: 4px 12px !important;
    }
}

/* ═══════════════════════════════════════════
   OFFICIAL NETFLIX 1:1 CONTROLS BAR SYSTEM
   ═══════════════════════════════════════════ */
.netflix-bottom-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 100000;
    padding: 12px 24px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease-in-out;
}


.player-wrapper.show-controls .netflix-bottom-bar {
    opacity: 1;
    pointer-events: auto;
}

/* Progress area & scrub bar */
.netflix-progress-area {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    cursor: pointer;
    user-select: none;
}
.netflix-progress-bg {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
    position: relative;
    transition: height 0.15s ease;
}
.netflix-progress-area:hover .netflix-progress-bg {
    height: 7px;
}
.netflix-progress-fill {
    height: 100%;
    width: 0%;
    background: #e50914; /* Netflix Signature Red */
    border-radius: 4px;
    position: relative;
    box-shadow: 0 0 10px rgba(229,9,20,0.8);
}
.netflix-progress-handle {
    position: absolute;
    top: 50%; right: -6px;
    transform: translateY(-50%) scale(0);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #e50914;
    box-shadow: 0 0 12px rgba(229,9,20,1);
    transition: transform 0.15s ease;
}
.netflix-progress-area:hover .netflix-progress-handle {
    transform: translateY(-50%) scale(1);
}
.netflix-time-display {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    font-family: monospace, sans-serif;
    letter-spacing: 0.5px;
}

/* Row & Groups */
.netflix-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.controls-group-left, .controls-group-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.controls-group-center {
    flex: 1;
    text-align: center;
    padding: 0 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.n-player-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.3px;
}

/* Buttons */
.n-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.4rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.15s ease, color 0.15s ease;
    padding: 4px;
}
.n-btn:hover {
    color: #e50914;
    transform: scale(1.15);
}
.n-btn .n-step-tag {
    position: absolute;
    font-size: 0.52rem;
    font-weight: 900;
    color: #ffffff;
    top: 50%; left: 50%;
    transform: translate(-50%, -45%);
}

.player-header-right .n-menu-toggle {
    font-size: 1.5rem;
    color: #ffffff;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,0.2);
}
.player-header-right .n-menu-toggle:hover {
    background: rgba(229,9,20,0.8);
    border-color: #e50914;
}

/* Reposition Subtitle Overlay higher so it doesn't overlap bottom bar */
    bottom: 75px !important;
}

/* ═══════════════════════════════════════════
   OFFICIAL 1:1 NETFLIX AUDIO & SUBTITLES MODAL OVERLAY
   ═══════════════════════════════════════════ */
#custom-subtitle-overlay {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 200000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

    display: none !important;
    opacity: 0 !important;
}

.n-sub-modal-content {
    position: relative;
    width: 90%;
    max-width: 650px;
    padding: 24px 30px;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.n-modal-close {
    position: absolute;
    top: -12px; right: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.6rem;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}
.n-modal-close:hover {
    color: #ffffff;
    transform: scale(1.15);
}

.n-modal-cols-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.n-col-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

.n-track-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Inactive item text */
.netflix-track-item {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    user-select: none !important;
}

.netflix-track-item .n-check-icon, .netflix-track-item i {
    visibility: hidden;
    font-size: 1.1rem !important;
}

.netflix-track-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Active selected item (Pure Solid White Pill with Black Checkmark & Text) */
.netflix-track-item.active {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}
.netflix-track-item.active .n-check-icon, .netflix-track-item.active i {
    visibility: visible !important;
    color: #000000 !important;
    font-weight: 900 !important;
}

@media (max-width: 600px) {
    .n-modal-cols-wrapper {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .n-sub-modal-content {
        padding: 16px 20px;
    }
}

/* ABSOLUTELY DESTROY ALL DEFAULT PLYR CONTROL BARS, SLIDERS & BUTTONS */
.plyr__controls,
.plyr--video .plyr__controls,
.plyr__controls__item,
.plyr__control,
.plyr__progress,
.plyr__time,
.plyr__volume,
.plyr__menu,
.plyr__controls input[type=range] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Premium YouTube Branding Cropper & Click Interceptor */
.plyr--youtube .plyr__video-embed {
    overflow: hidden !important;
}
.plyr--youtube .plyr__video-embed iframe {
    width: 118% !important;
    height: 118% !important;
    top: -9% !important;
    left: -9% !important;
    pointer-events: none !important; /* Block clicks inside iframe so native YT overlays don't trigger */
    transition: opacity 0.4s ease !important;
}

/* Hide Plyr when loading to prevent YouTube logo/title flashes */
.plyr.plyr--loading, #player-wrapper.is-loading .plyr {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Premium Gold Loading Spinner for Player Wrapper */
#player-wrapper {
    position: relative !important;
}
#player-wrapper::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
    margin-left: -20px !important;
    border: 3px solid rgba(212, 168, 83, 0.1) !important;
    border-top: 3px solid #d4a853 !important;
    border-radius: 50% !important;
    animation: player-spin 0.8s linear infinite !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
    z-index: 999 !important;
}
#player-wrapper.is-loading::after {
    opacity: 1 !important;
}
@keyframes player-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Gold Equalizer inside Logo Box when playing */
#meta-poster-box {
    position: relative !important;
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
#meta-poster-box.is-playing {
    border-color: #d4a853 !important;
    box-shadow: 0 0 15px rgba(212, 168, 83, 0.6) !important;
    animation: gold-pulse 2s infinite ease-in-out !important;
}

@keyframes gold-pulse {
    0% { box-shadow: 0 0 5px rgba(212, 168, 83, 0.3); border-color: rgba(212, 168, 83, 0.6); }
    50% { box-shadow: 0 0 18px rgba(212, 168, 83, 0.8); border-color: rgba(212, 168, 83, 1); }
    100% { box-shadow: 0 0 5px rgba(212, 168, 83, 0.3); border-color: rgba(212, 168, 83, 0.6); }
}

/* Luxury active text glow for title when playing */
#meta-poster-box.is-playing + .meta-info .meta-title {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(212, 168, 83, 0.5) !important;
    transition: all 0.3s ease !important;
}

/* Beautiful animated EQ visualizer overlay */
.eq-visualizer {
    position: absolute !important;
    bottom: 4px !important;
    right: 4px !important;
    width: 24px !important;
    height: 18px !important;
    background: rgba(15, 15, 22, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(212, 168, 83, 0.5) !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    padding: 3px !important;
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
    z-index: 10 !important;
}
#meta-poster-box.is-playing .eq-visualizer {
    opacity: 1 !important;
    transform: scale(1) !important;
}
.eq-bar {
    width: 3px !important;
    background: #d4a853 !important;
    border-radius: 1px !important;
    height: 3px !important;
    animation: bounce-bar 0.6s ease-in-out infinite alternate !important;
}
.eq-bar:nth-child(1) { animation-duration: 0.5s !important; animation-delay: 0.1s !important; }
.eq-bar:nth-child(2) { animation-duration: 0.3s !important; animation-delay: 0.2s !important; }
.eq-bar:nth-child(3) { animation-duration: 0.4s !important; animation-delay: 0s !important; }

@keyframes bounce-bar {
    0% { height: 3px; }
    100% { height: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   MODERN LUXURY NETFLIX AUDIO & SUBTITLES MODAL OVERLAY FIX
   ═══════════════════════════════════════════════════════════════ */
.netflix-player-header {
    z-index: 500 !important;
}

.netflix-bottom-bar {
    z-index: 500 !important;
}

#custom-subtitle-overlay {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(8, 8, 12, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.25s ease !important;
}

.n-sub-modal-content {
    position: relative !important;
    width: 90% !important;
    max-width: 620px !important;
    background: #0f0f16 !important;
    border: 1.5px solid rgba(212, 168, 83, 0.6) !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(212, 168, 83, 0.2) !important;
    color: #ffffff !important;
}

.n-modal-close {
    position: absolute !important;
    top: 16px !important; right: 20px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 34px !important; height: 34px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #cbd5e1 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.n-modal-close:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.netflix-track-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

.netflix-track-item:hover {
    background: rgba(212, 168, 83, 0.15) !important;
    border-color: rgba(212, 168, 83, 0.4) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.netflix-track-item.active {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.3), rgba(229, 9, 20, 0.3)) !important;
    border: 1.5px solid #ffd700 !important;
    color: #ffd700 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(212, 168, 83, 0.25) !important;
}

.netflix-track-item.active .n-check-icon,
.netflix-track-item.active i {
    visibility: visible !important;
    color: #ffd700 !important;
}

#custom-subtitle-overlay {
    position: absolute !important;
    bottom: 90px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
    pointer-events: none !important;
    text-align: center !important;
    width: 90% !important;
    max-width: 900px !important;
}

    display: inline-block !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding: 8px 20px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════
   NETFLIX VOLUME SLIDER & EXPANDABLE HOVER GROUP
   ═══════════════════════════════════════════════════════════════ */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
}

    width: 90px;
    opacity: 1;
    margin-left: 4px;
}

.n-vol-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.n-vol-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    box-shadow: 0 0 8px rgba(212, 168, 83, 0.6);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.n-vol-range::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.n-vol-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    border: none;
    box-shadow: 0 0 8px rgba(212, 168, 83, 0.6);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   PERFECT RESPONSIVE NETFLIX CONTROLS & SUBTITLE TEXT STYLING
   ═══════════════════════════════════════════════════════════════ */
.netflix-controls-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    position: relative !important;
}

.controls-group-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.controls-group-center {
    flex: 1 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 220px !important;
    padding: 0 8px !important;
}

.controls-group-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

/* Floating volume slider popup above volume icon */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}



/* Authentic Netflix Subtitle Style (No giant border box, crisp text near bottom) */
#custom-subtitle-overlay {
    position: absolute !important;
    bottom: 75px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
    pointer-events: none !important;
    text-align: center !important;
    width: 90% !important;
    max-width: 850px !important;
}

#custom-subtitle-overlay span {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-shadow: 2px 2px 4px #000000, -2px -2px 4px #000000, 2px -2px 4px #000000, -2px 2px 4px #000000, 0 2px 8px rgba(0,0,0,0.9) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1.35 !important;
}

@media (max-width: 768px) {
    .controls-group-center {
        display: none !important;
    }
    .netflix-controls-row {
        gap: 4px !important;
    }
    .controls-group-left, .controls-group-right {
        gap: 4px !important;
    }
    .n-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }
        font-size: 0.95rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NETFLIX PROGRESS BAR SCRUBBING & INTERACTION ENHANCEMENT
   ═══════════════════════════════════════════════════════════════ */
.netflix-progress-area {
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 8px 0 !important;
    touch-action: none !important;
}

.netflix-progress-bg {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED MASTER RIVAMAZA IPTV PLAYER & SUBTITLE STYLING SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* 1. Subtitle Overlay Engine (Authentic Netflix Cinema Typography) */
#player-wrapper #custom-subtitle-overlay,
.player-wrapper .custom-subtitle-overlay,
.custom-subtitle-overlay {
    display: none !important;
    position: absolute !important;
    bottom: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 90000 !important;
    pointer-events: none !important;
    text-align: center !important;
    width: 90% !important;
    max-width: 850px !important;
}

#player-wrapper .custom-subtitle-text,
.player-wrapper .custom-subtitle-text,
.custom-subtitle-text {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-shadow: 2px 2px 4px #000000, -2px -2px 4px #000000, 2px -2px 4px #000000, -2px 2px 4px #000000, 0 2px 8px rgba(0,0,0,0.9) !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    padding: 6px 16px !important;
    border-radius: 6px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}



.n-sub-modal-content {
    position: relative !important;
    width: 90% !important;
    max-width: 600px !important;
    background: #0f0f18 !important;
    border: 1.5px solid rgba(212, 168, 83, 0.7) !important;
    border-radius: 20px !important;
    padding: 24px 30px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(212, 168, 83, 0.25) !important;
    color: #ffffff !important;
}

.n-modal-close {
    position: absolute !important;
    top: 16px !important; right: 20px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 34px !important; height: 34px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #cbd5e1 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.n-modal-close:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.n-modal-cols-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
}

.netflix-track-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

.netflix-track-item:hover {
    background: rgba(212, 168, 83, 0.15) !important;
    border-color: rgba(212, 168, 83, 0.4) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.netflix-track-item.active {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.3), rgba(229, 9, 20, 0.3)) !important;
    border: 1.5px solid #ffd700 !important;
    color: #ffd700 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(212, 168, 83, 0.25) !important;
}

.netflix-track-item.active .n-check-icon,
.netflix-track-item.active i {
    visibility: visible !important;
    color: #ffd700 !important;
}

/* 3. Responsive Bottom Player Controls Bar & Volume Slider Popup */
.netflix-bottom-bar {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 100000 !important;
    padding: 12px 24px 16px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition: opacity 0.3s ease-in-out !important;
}


.player-wrapper.show-controls .netflix-bottom-bar {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.netflix-controls-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
}

.controls-group-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.controls-group-center {
    flex: 1 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 220px !important;
    padding: 0 8px !important;
}

.controls-group-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.n-volume-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.n-volume-slider-box {
    display: none !important;
    align-items: center !important;
    margin-left: 8px !important;
    background: rgba(14, 16, 26, 0.98) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.75) !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 9, 20, 0.35) !important;
    z-index: 100001 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.n-volume-group.active .n-volume-slider-box,
.n-volume-group.show-slider .n-volume-slider-box,
.n-volume-slider-box.show {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.n-vol-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    outline: none !important;
    cursor: pointer !important;
}

.n-vol-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #ffd700 !important;
    box-shadow: 0 0 8px rgba(212, 168, 83, 0.8) !important;
    cursor: pointer !important;
}

@media (max-width: 768px) {
    .controls-group-center { display: none !important; }
    .custom-subtitle-text { font-size: 0.95rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPACT ELEGANT NETFLIX SUBTITLE TYPOGRAPHY (RESPONSIVE)
   ═══════════════════════════════════════════════════════════════ */
#player-wrapper #custom-subtitle-overlay,
.player-wrapper .custom-subtitle-overlay,
.custom-subtitle-overlay {
    position: absolute !important;
    bottom: 58px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 90000 !important;
    pointer-events: none !important;
    text-align: center !important;
    width: 90% !important;
    max-width: 700px !important;
}

#player-wrapper .custom-subtitle-text,
.player-wrapper .custom-subtitle-text,
.custom-subtitle-text {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-shadow: 1.5px 1.5px 3px #000000, -1.5px -1.5px 3px #000000, 1.5px -1.5px 3px #000000, -1.5px 1.5px 3px #000000 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
}

@media (max-width: 600px) {
    #player-wrapper #custom-subtitle-overlay,
    .custom-subtitle-overlay {
        bottom: 48px !important;
    }
    #player-wrapper .custom-subtitle-text,
    .custom-subtitle-text {
        font-size: 0.72rem !important;
        padding: 2px 7px !important;
        line-height: 1.2 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-COMPACT ELEGANT NETFLIX SUBTITLE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
#player-wrapper #custom-subtitle-overlay,
.player-wrapper .custom-subtitle-overlay,
.custom-subtitle-overlay {
    position: absolute !important;
    bottom: 52px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 90000 !important;
    pointer-events: none !important;
    text-align: center !important;
    width: 85% !important;
    max-width: 650px !important;
}

#player-wrapper .custom-subtitle-text,
.player-wrapper .custom-subtitle-text,
.custom-subtitle-text {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000, 1px -1px 2px #000000, -1px 1px 2px #000000 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
}

@media (max-width: 600px) {
    #player-wrapper #custom-subtitle-overlay,
    .custom-subtitle-overlay {
        bottom: 44px !important;
    }
    #player-wrapper .custom-subtitle-text,
    .custom-subtitle-text {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
        line-height: 1.2 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CLICK-ONLY VOLUME SLIDER POPUP & PROMINENT FULLSCREEN BUTTON
   ═══════════════════════════════════════════════════════════════ */

/* Clean Volume Slider Box Trigger - Shows on hover OR on click (.show / .active) */
.n-volume-slider-box.show,
.n-volume-group.active .n-volume-slider-box {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Prominent Golden Fullscreen Button */
#n-btn-fullscreen {
    background: rgba(212, 168, 83, 0.22) !important;
    border: 1.5px solid #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 0 12px rgba(212, 168, 83, 0.4) !important;
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
}

#n-btn-fullscreen:hover {
    background: #ffd700 !important;
    color: #000000 !important;
    transform: scale(1.12) !important;
}

@media (max-width: 600px) {
    .n-step-btn, #n-btn-speed {
        display: none !important;
    }
    .netflix-controls-row {
        gap: 2px !important;
    }
    .controls-group-right {
        gap: 4px !important;
    }
    #n-btn-fullscreen {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PERFECT MOBILE CONTROLS LAYOUT & FULLSCREEN BUTTON VISIBILITY
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .controls-group-center {
        display: none !important;
    }
    .netflix-controls-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 2px !important;
    }
    .controls-group-left {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        flex-shrink: 0 !important;
    }
    .controls-group-right {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        flex-shrink: 0 !important;
    }
    .n-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
        padding: 0 !important;
    }
    #n-btn-fullscreen {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        background: rgba(212, 168, 83, 0.25) !important;
        border: 1.5px solid #ffd700 !important;
        color: #ffd700 !important;
        box-shadow: 0 0 10px rgba(212, 168, 83, 0.4) !important;
        margin-left: 2px !important;
        flex-shrink: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-LUXURY NETFLIX 1:1 AUDIO & SUBTITLES MODAL DESIGN
   ═══════════════════════════════════════════════════════════════ */
#netflix-audio-sub-modal,
.netflix-audio-sub-modal {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 200000 !important;
    width: 92% !important;
    max-width: 520px !important;
    max-height: 85% !important;
    background: rgba(10, 10, 16, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.45) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(212, 168, 83, 0.15) !important;
    padding: 16px 20px !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    overflow-y: auto !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

#netflix-audio-sub-modal.hidden,
.netflix-audio-sub-modal.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -46%) scale(0.95) !important;
}

.n-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
}

.n-modal-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #ffd700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.n-close-modal {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #ffffff !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.n-close-modal:hover {
    background: rgba(229, 9, 20, 0.8) !important;
    color: #ffffff !important;
}

.n-audio-sub-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

@media (max-width: 600px) {
    .n-audio-sub-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

.n-col-title {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 8px !important;
}

.n-track-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.netflix-track-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.netflix-track-item:hover {
    background: rgba(212, 168, 83, 0.15) !important;
    border-color: rgba(212, 168, 83, 0.3) !important;
    color: #ffffff !important;
}

.netflix-track-item.active {
    background: rgba(212, 168, 83, 0.25) !important;
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    font-weight: 700 !important;
}

.netflix-track-item .n-check-icon {
    font-size: 0.9rem !important;
    visibility: hidden !important;
}

.netflix-track-item.active .n-check-icon {
    visibility: visible !important;
    color: #ffd700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   STRICT MASTER HIDE RULE FOR NETFLIX AUDIO & SUBTITLE MODAL
   ═══════════════════════════════════════════════════════════════ */
#player-wrapper #netflix-audio-sub-modal.hidden,
#netflix-audio-sub-modal.hidden,
.netflix-audio-sub-modal.hidden,
#player-wrapper .netflix-audio-sub-modal.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, -46%) scale(0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-COMPACT ELEGANT NETFLIX AUDIO & SUBTITLE MODAL
   ═══════════════════════════════════════════════════════════════ */
#netflix-audio-sub-modal,
.netflix-audio-sub-modal {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 200000 !important;
    width: 86% !important;
    max-width: 420px !important;
    max-height: 82% !important;
    background: rgba(10, 10, 16, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.55) !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.95), 0 0 25px rgba(212, 168, 83, 0.2) !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    overflow-y: auto !important;
}

.n-sub-modal-content {
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.n-modal-cols-wrapper, .n-audio-sub-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.n-col-title {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: #ffd700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

.n-track-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.netflix-track-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 9px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    line-height: 1.2 !important;
    user-select: none !important;
}

.netflix-track-item:hover {
    background: rgba(212, 168, 83, 0.18) !important;
    border-color: rgba(212, 168, 83, 0.45) !important;
    color: #ffffff !important;
    transform: none !important;
}

.netflix-track-item.active {
    background: rgba(212, 168, 83, 0.28) !important;
    border: 1px solid #ffd700 !important;
    color: #ffd700 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 10px rgba(212, 168, 83, 0.3) !important;
}

.netflix-track-item .n-check-icon,
.netflix-track-item i {
    font-size: 0.8rem !important;
}

.n-modal-close {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 0.95rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.n-modal-close:hover {
    background: #e50914 !important;
}

.sub-sync-box {
    margin-top: 8px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
}

.sub-sync-btn {
    padding: 4px 6px !important;
    font-size: 0.68rem !important;
    border-radius: 4px !important;
}

@media (max-width: 600px) {
    #netflix-audio-sub-modal,
    .netflix-audio-sub-modal {
        width: 85% !important;
        max-width: 320px !important;
        padding: 10px 12px !important;
    }
    .n-modal-cols-wrapper, .n-audio-sub-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .netflix-track-item {
        padding: 4px 7px !important;
        font-size: 0.68rem !important;
    }
    .n-col-title {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LUXURY SEGERA RILIS (COMING SOON) DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.episode-btn.unreleased {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.15) 0%, rgba(212, 168, 83, 0.22) 100%) !important;
    border: 1px solid rgba(212, 168, 83, 0.5) !important;
    color: #ffe082 !important;
    position: relative !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.15) !important;
    transition: all 0.25s ease !important;
}

.episode-btn.unreleased:hover {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.3) 0%, rgba(212, 168, 83, 0.4) 100%) !important;
    border-color: #ffd700 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 168, 83, 0.35) !important;
}

.badge-segera-rilis {
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    background: linear-gradient(90deg, #e50914 0%, #ffd700 100%) !important;
    color: #000000 !important;
    padding: 2px 7px !important;
    border-radius: 20px !important;
    margin-left: 5px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important;
    display: inline-block !important;
    animation: pulseGlowRilis 2s infinite alternate !important;
}

@keyframes pulseGlowRilis {
    0% { box-shadow: 0 0 4px rgba(255, 215, 0, 0.3); }
    100% { box-shadow: 0 0 12px rgba(229, 9, 20, 0.8); }
}

.unreleased-video-overlay {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2147483647 !important;
    background: radial-gradient(circle at center, rgba(25, 20, 35, 0.96) 0%, rgba(8, 8, 14, 0.98) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px !important;
    border-radius: 12px !important;
    pointer-events: auto !important;
}

.unreleased-video-overlay.active {
    display: flex !important;
}

.unreleased-video-overlay.hidden {
    display: none !important;
}

.unreleased-box {
    max-width: 400px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.55) !important;
    border-radius: 20px !important;
    padding: 24px 26px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(212, 168, 83, 0.25) !important;
}

.unreleased-badge-pill {
    display: none !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.3) 0%, rgba(255, 215, 0, 0.3) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.5) !important;
    color: #ffd700 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.8px !important;
}

.unreleased-title {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
}

.unreleased-msg {
    font-size: 0.84rem !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
    margin: 0 0 18px !important;
}

.btn-notify-me {
    background: linear-gradient(135deg, #e50914 0%, #d4a853 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 25px rgba(229, 9, 20, 0.4) !important;
    transition: all 0.25s ease !important;
}

.btn-notify-me:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 12px 30px rgba(255, 215, 0, 0.5) !important;
}

.movie-badge-segera-rilis {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
    background: linear-gradient(135deg, #e50914 0%, #ffd700 100%) !important;
    color: #000000 !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.65) !important;
    display: none !important;
    align-items: center !important;
    gap: 4px !important;
    animation: pulseBadgeGlow 2s infinite alternate !important;
}

@keyframes pulseBadgeGlow {
    0% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); }
    100% { transform: scale(1.05); box-shadow: 0 0 16px rgba(229, 9, 20, 0.85); }
}

/* ═══════════════════════════════════════════════════════════════
   MASTER FULLSCREEN & MOBILE ORIENTATION ROTATION ENGINE
   ═══════════════════════════════════════════════════════════════ */
#player-wrapper:fullscreen,
#player-wrapper:-webkit-full-screen,
#player-wrapper:-moz-full-screen,
#player-wrapper:-ms-fullscreen,
.plyr--fullscreen-active {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 2147483647 !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

#player-wrapper:fullscreen video,
#player-wrapper:-webkit-full-screen video,
#player-wrapper:fullscreen .plyr,
#player-wrapper:-webkit-full-screen .plyr,
#player-wrapper:fullscreen .plyr-video,
#player-wrapper:-webkit-full-screen .plyr-video,
#player-wrapper:fullscreen .plyr__video-wrapper,
#player-wrapper:-webkit-full-screen .plyr__video-wrapper,
.plyr--fullscreen-active video,
.plyr--fullscreen-active .plyr__video-wrapper {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#player-wrapper:fullscreen .netflix-bottom-bar,
#player-wrapper:-webkit-full-screen .netflix-bottom-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483647 !important;
}

#player-wrapper:fullscreen .netflix-player-header,
#player-wrapper:-webkit-full-screen .netflix-player-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483647 !important;
}

#player-wrapper:fullscreen #custom-subtitle-overlay,
#player-wrapper:-webkit-full-screen #custom-subtitle-overlay {
    position: absolute !important;
    bottom: 70px !important;
    z-index: 2147483647 !important;
}

#player-wrapper:fullscreen #netflix-audio-sub-modal,
#player-wrapper:-webkit-full-screen #netflix-audio-sub-modal {
    position: absolute !important;
    z-index: 2147483647 !important;
}

/* Mobile Landscape Orientation Adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .hero-section {
        padding: 0 !important;
        margin: 0 !important;
    }
    .player-wrapper {
        border-radius: 0 !important;
        min-height: 100vh !important;
        height: 100vh !important;
    }
    .player-wrapper video,
    .player-wrapper .plyr {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FULLSCREEN & ROTATION CONTROLS VISIBILITY ENGINE
   ═══════════════════════════════════════════════════════════════ */

.player-wrapper.show-controls .netflix-bottom-bar,
#player-wrapper:fullscreen .netflix-bottom-bar,
#player-wrapper:-webkit-full-screen .netflix-bottom-bar,
#player-wrapper:fullscreen .player-wrapper.show-controls .netflix-bottom-bar {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}


.player-wrapper.show-controls .netflix-player-header,
#player-wrapper:fullscreen .netflix-player-header,
#player-wrapper:-webkit-full-screen .netflix-player-header {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    .netflix-bottom-bar {
        padding: 10px 14px 14px !important;
    }
    .netflix-controls-row {
        gap: 4px !important;
    }
    .n-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.05rem !important;
    }
    .n-player-title {
        font-size: 0.78rem !important;
    }
}
/* ═══════════════════════════════════════════
   HIDE FLOATING EMOJI & EMOJI REACTION BAR (User request: mengganggu layar video)
   ═══════════════════════════════════════════ */
.floating-reactions,
#floating-reactions,
.emoji-reaction-bar,
#emoji-bar-container {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* ═══════════════════════════════════════════
   LIVE COMMENT COUNT BADGE (YouTube/Vidio.com Style)
   ═══════════════════════════════════════════ */
.comment-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e50914, #b8050c);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-left: 4px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.6), 0 0 10px rgba(229, 9, 20, 0.3);
    animation: badge-pulse 2s ease-in-out infinite;
    transition: transform 0.2s ease;
    position: relative;
    top: -1px;
}

.comment-count-badge.has-comments {
    background: linear-gradient(135deg, #ffd700, #e5a000);
    color: #0c0c10;
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.6), 0 0 15px rgba(255, 215, 0, 0.3);
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ── Mobile: Comment badge beside chat toggle button ── */
@media (max-width: 768px) {
    .comment-count-badge {
        font-size: 0.6rem;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
    }
}
/* ═══════════════════════════════════════════
   STICKY FLOATING MINI PLAYER (YouTube/Netflix PiP on Scroll)
   ═══════════════════════════════════════════ */

/* Placeholder space when PiP is active */
.player-wrapper-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 54vh;
    background: rgba(10, 10, 14, 0.6);
    border-radius: 14px;
    border: 1px dashed rgba(212, 168, 83, 0.15);
    display: none;
}
.player-wrapper-placeholder.active {
    display: block;
}

/* PiP mode: floating mini player */
.player-wrapper.pip-mode {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    top: auto !important;
    width: 380px !important;
    max-width: 42vw !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16/9 !important;
    z-index: 9999990 !important;
    border-radius: 16px !important;
    border: 2px solid rgba(212, 168, 83, 0.5) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.95),
        0 0 40px rgba(212, 168, 83, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.8) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    transform-origin: bottom right;
    animation: pip-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pip-slide-in {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.player-wrapper.pip-mode:hover {
    border-color: rgba(255, 215, 0, 0.7) !important;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 1),
        0 0 50px rgba(212, 168, 83, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.9) !important;
    transform: scale(1.02);
}

/* Hide controls/overlays in PiP mode for cleanliness */
.player-wrapper.pip-mode .netflix-player-header,
.player-wrapper.pip-mode .netflix-quick-controls,
.player-wrapper.pip-mode .no-signal-overlay h3,
.player-wrapper.pip-mode .no-signal-overlay p,
.player-wrapper.pip-mode .unreleased-video-overlay {
    display: none !important;
}

/* Show PiP bottom bar smaller */
.player-wrapper.pip-mode .netflix-bottom-bar {
    padding: 4px 8px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}
.player-wrapper.pip-mode:hover .netflix-bottom-bar {
    opacity: 1 !important;
}

/* PiP subtitle smaller */
.player-wrapper.pip-mode .custom-subtitle-overlay {
    bottom: 30px !important;
}
.player-wrapper.pip-mode .custom-subtitle-text {
    font-size: 0.75rem !important;
    padding: 3px 10px !important;
}

/* PiP Close Button */
.pip-close-btn,
.pip-expand-btn {
    position: absolute;
    top: 8px;
    z-index: 99999999;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: rgba(10, 10, 14, 0.85);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
    pointer-events: none;
}
.pip-close-btn { right: 8px; }
.pip-expand-btn { right: 44px; }

.pip-close-btn:hover,
.pip-expand-btn:hover {
    background: rgba(229, 9, 20, 0.9);
    border-color: rgba(255, 215, 0, 0.6);
    transform: scale(1.15);
}

/* Only show PiP buttons when in PiP mode + hover */
.player-wrapper.pip-mode .pip-close-btn,
.player-wrapper.pip-mode .pip-expand-btn {
    opacity: 0;
    pointer-events: none;
}
.player-wrapper.pip-mode:hover .pip-close-btn,
.player-wrapper.pip-mode:hover .pip-expand-btn {
    opacity: 1;
    pointer-events: auto;
}

.pip-close-btn.hidden,
.pip-expand-btn.hidden {
    display: none !important;
}

/* ── Mobile PiP adjustments ── */
@media (max-width: 768px) {
    .player-wrapper.pip-mode {
        width: 55vw !important;
        max-width: 260px !important;
        bottom: 16px !important;
        right: 12px !important;
        border-radius: 12px !important;
    }
    .player-wrapper.pip-mode .custom-subtitle-text {
        font-size: 0.6rem !important;
    }
    .pip-close-btn,
    .pip-expand-btn {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }
    .pip-close-btn { right: 6px; top: 6px; }
    .pip-expand-btn { right: 36px; top: 6px; }
}

/* Prevent PiP during fullscreen */
:fullscreen .player-wrapper.pip-mode,
:-webkit-full-screen .player-wrapper.pip-mode,
:-moz-full-screen .player-wrapper.pip-mode {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    bottom: auto !important;
    right: auto !important;
    border: none !important;
    border-radius: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
   CLEAN BOTTOM PLAYER CONTROLS & FULLSCREEN / ROTATION ENGINE
   ═══════════════════════════════════════════════════════════════ */

/* 1. Hide center quick controls overlay completely (placed cleanly in bottom bar instead) */
#netflix-quick-controls,
.netflix-quick-controls {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* 2. Master Bottom Player Controls Bar - default visible */
.netflix-bottom-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483647 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 8, 0.92) 100%) !important;
    padding: 12px 20px 16px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Show bottom bar on hover or when show-controls class is added */

.player-wrapper.show-controls .netflix-bottom-bar,
.player-wrapper:fullscreen .netflix-bottom-bar,
.player-wrapper:-webkit-full-screen .netflix-bottom-bar,
#player-wrapper:fullscreen .netflix-bottom-bar,
#player-wrapper:-webkit-full-screen .netflix-bottom-bar,
#player-wrapper.show-controls .netflix-bottom-bar {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* Show player header bar */
.netflix-player-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483647 !important;
    background: linear-gradient(180deg, rgba(5, 5, 8, 0.85) 0%, transparent 100%) !important;
    padding: 14px 20px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition: opacity 0.3s ease !important;
}


.player-wrapper.show-controls .netflix-player-header,
#player-wrapper:fullscreen .netflix-player-header,
#player-wrapper:-webkit-full-screen .netflix-player-header {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* Controls layout */
.netflix-controls-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 6px !important;
}

.controls-group-left,
.controls-group-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.controls-group-center {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.n-player-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: 0.5px !important;
}

/* Control Buttons */
.n-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.n-btn:hover,
.n-btn:active {
    background: rgba(212, 168, 83, 0.25) !important;
    border-color: var(--color-gold) !important;
    color: #ffd700 !important;
    transform: scale(1.1) !important;
}

/* Step Buttons (-10s / +10s) */
.n-step-btn {
    position: relative !important;
}

.n-step-tag {
    position: absolute !important;
    font-size: 0.55rem !important;
    font-weight: 900 !important;
    color: var(--color-gold) !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}

/* Volume Group */
.n-volume-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.n-volume-slider-box {
    display: none !important;
    align-items: center !important;
    margin-left: 8px !important;
    background: rgba(14, 16, 26, 0.98) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.75) !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 9, 20, 0.35) !important;
    z-index: 100001 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.n-volume-group.active .n-volume-slider-box,
.n-volume-group.show-slider .n-volume-slider-box,
.n-volume-slider-box.show {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.n-vol-range {
    -webkit-appearance: slider-vertical !important;
    writing-mode: bt-lr !important;
    width: 6px !important;
    height: 90px !important;
    cursor: pointer !important;
    accent-color: #ffd700 !important;
}

/* Fullscreen and Landscape Mode Support */
:fullscreen #player-wrapper,
:-webkit-full-screen #player-wrapper,
:-moz-full-screen #player-wrapper,
.player-wrapper:fullscreen,
.player-wrapper:-webkit-full-screen,
.player-wrapper:-moz-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
}

@media (max-width: 768px) {
    .netflix-bottom-bar {
        padding: 8px 10px 12px !important;
    }
    .n-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }
    .controls-group-left,
    .controls-group-right {
        gap: 4px !important;
    }
    .n-player-title {
        font-size: 0.75rem !important;
    }
}
/* ═══════════════════════════════════════════════════════════════
   LUXURY FLOATING BOTTOM NAVIGATION BAR (Cinema, Shop, Profile)
   ═══════════════════════════════════════════════════════════════ */
.iptv-luxury-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 64px !important;
    background: rgba(10, 10, 15, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(212, 168, 83, 0.35) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.95), 0 0 25px rgba(212, 168, 83, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    z-index: 999990 !important;
    padding: 0 10px !important;
}

body {
    padding-bottom: 74px !important;
}

.bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px 16px !important;
    border-radius: 12px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.nav-item-icon-box {
    position: relative !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    transition: transform 0.25s ease !important;
}

.nav-item-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
    color: #ffd700 !important;
}

.bottom-nav-item.active .nav-item-icon-box {
    transform: translateY(-2px) scale(1.1) !important;
    color: #ffd700 !important;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) !important;
}

.bottom-nav-item.active::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 24px !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #ffd700, transparent) !important;
    border-radius: 2px !important;
}

.bnav-shop-pulse {
    position: absolute !important;
    top: -2px !important;
    right: -4px !important;
    width: 7px !important;
    height: 7px !important;
    background: #e50914 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #e50914 !important;
    animation: shopPulse 1.8s infinite !important;
}

@keyframes shopPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

.bnav-user-badge {
    position: absolute !important;
    top: -5px !important;
    right: -12px !important;
    background: linear-gradient(135deg, #ffd700, #b45309) !important;
    color: #000 !important;
    font-size: 0.55rem !important;
    font-weight: 900 !important;
    padding: 1px 4px !important;
    border-radius: 6px !important;
    line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   LUXURY AUTH MODAL & PROFILE MODAL
   ═══════════════════════════════════════════════════════════════ */
.customer-auth-modal,
.customer-profile-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

.customer-auth-modal.hidden,
.customer-profile-modal.hidden {
    display: none !important;
}

.auth-modal-backdrop,
.profile-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(4, 4, 8, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.auth-modal-card,
.profile-modal-card {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 440px !important;
    background: linear-gradient(145deg, rgba(20, 20, 28, 0.98), rgba(12, 12, 18, 0.99)) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.65) !important;
    border-radius: 24px !important;
    padding: 30px 24px 26px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 45px rgba(212, 168, 83, 0.25) !important;
    color: #ffffff !important;
    animation: authPopIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes authPopIn {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.auth-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    z-index: 99999999 !important;
    pointer-events: auto !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.auth-modal-close:hover,
.auth-modal-close:active {
    background: linear-gradient(135deg, #e50914, #b91c1c) !important;
    border-color: #ffd700 !important;
    color: #ffffff !important;
    transform: scale(1.12) rotate(90deg) !important;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.8) !important;
}

.auth-card-header {
    text-align: center !important;
    margin-bottom: 20px !important;
}

.auth-vip-crown {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.25), rgba(212, 168, 83, 0.3)) !important;
    border: 2px solid #ffd700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;
    color: #ffd700 !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.45) !important;
}

.auth-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 6px !important;
    letter-spacing: 0.5px !important;
}

.auth-subtitle {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.auth-tab-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 4px !important;
    border-radius: 12px !important;
    margin-bottom: 18px !important;
}

.auth-tab-btn {
    padding: 9px 12px !important;
    border: none !important;
    border-radius: 9px !important;
    background: none !important;
    color: #94a3b8 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.auth-tab-btn.active {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.9), rgba(180, 83, 9, 0.95)) !important;
    color: #000000 !important;
    box-shadow: 0 4px 15px rgba(212, 168, 83, 0.4) !important;
}

.auth-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.auth-form.hidden {
    display: none !important;
}

.auth-input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: left !important;
}

.auth-input-group label {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.auth-input-group label i {
    color: var(--color-gold) !important;
}

.auth-input {
    width: 100% !important;
    padding: 11px 14px !important;
    background: rgba(10, 10, 15, 0.85) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-family: inherit !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.auth-input:focus {
    border-color: #ffd700 !important;
    background: rgba(15, 15, 22, 0.95) !important;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.35) !important;
}

.btn-auth-submit {
    width: 100% !important;
    padding: 12px 18px !important;
    margin-top: 4px !important;
    border-radius: 12px !important;
    border: 1.5px solid #ffd700 !important;
    background: linear-gradient(135deg, #e50914, #b4050c) !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.6) !important;
    transition: all 0.25s ease !important;
}

.btn-auth-submit:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 30px rgba(229, 9, 20, 0.85), 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

.auth-alert {
    padding: 12px 16px !important;
    border-radius: 14px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    animation: alertSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    line-height: 1.4 !important;
}

@keyframes alertSlideDown {
    0% { opacity: 0; transform: translateY(-10px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-alert.err {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.25), rgba(180, 5, 12, 0.35)) !important;
    border: 1.5px solid rgba(229, 9, 20, 0.85) !important;
    color: #ff9999 !important;
    box-shadow: 0 8px 25px rgba(229, 9, 20, 0.4), inset 0 0 15px rgba(229, 9, 20, 0.2) !important;
}

.auth-alert.ok {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(21, 128, 61, 0.32)) !important;
    border: 1.5px solid rgba(34, 197, 94, 0.85) !important;
    color: #86efac !important;
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4), inset 0 0 15px rgba(34, 197, 94, 0.2) !important;
}

.auth-alert i {
    font-size: 1.35rem !important;
    flex-shrink: 0 !important;
}

.auth-input.input-error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.4) !important;
    animation: shakeInput 0.35s ease-in-out !important;
}

@keyframes shakeInput {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* Profile Card Specific */
.profile-card-header {
    text-align: center !important;
    margin-bottom: 18px !important;
}
.profile-avatar-circle {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 10px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ffd700, #e50914) !important;
    color: #000000 !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5) !important;
}
.profile-user-name {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 4px !important;
}
.profile-badge-vip {
    display: none !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(212, 168, 83, 0.2) !important;
    border: 1px solid rgba(212, 168, 83, 0.4) !important;
    color: #ffd700 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 4px !important;
}
.profile-user-email {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

.profile-menu-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
}
.profile-menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
.profile-menu-item:hover {
    background: rgba(212, 168, 83, 0.15) !important;
    border-color: rgba(212, 168, 83, 0.4) !important;
    transform: translateX(4px) !important;
}
.arrow-icon {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

.btn-profile-logout {
    width: 100% !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}
.btn-profile-logout:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════
   GUARANTEED FULLSCREEN AUTO-LANDSCAPE ROTATION ENGINE
   ═══════════════════════════════════════════════════════════════ */

/* 1. When Fullscreen is triggered on Portrait Screen (Mobile/Tablet): Force 90-degree Horizontal Landscape View! */
@media (max-width: 1024px) and (orientation: portrait) {
    #player-wrapper.is-fullscreen,
    .player-wrapper.is-fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 100vw !important;
        width: 100vh !important;
        height: 100vw !important;
        transform: rotate(90deg) !important;
        transform-origin: top left !important;
        z-index: 2147483647 !important;
        background: #000000 !important;
        border-radius: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }
    #player-wrapper.is-fullscreen video,
    #player-wrapper.is-fullscreen .plyr,
    #player-wrapper.is-fullscreen .plyr-video {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
    #player-wrapper.is-fullscreen .netflix-bottom-bar {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
    #player-wrapper.is-fullscreen .netflix-player-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* 2. When in Natural Landscape Mode: Full Edge-to-Edge Fill */
@media (orientation: landscape) {
    #player-wrapper.is-fullscreen,
    .player-wrapper.is-fullscreen,
    :fullscreen #player-wrapper,
    :-webkit-full-screen #player-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        transform: none !important;
        z-index: 2147483647 !important;
        background: #000000 !important;
        border-radius: 0 !important;
        border: none !important;
    }
    #player-wrapper.is-fullscreen video,
    #player-wrapper.is-fullscreen .plyr {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}
/* ═══════════════════════════════════════════════════════════════
   NETFLIX 1:1 CONTINUE WATCHING & WATCH HISTORY SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.continue-watching-section {
    padding: 10px 0 24px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 20px;
    animation: fadeInCW 0.4s ease-in-out;
}

.continue-watching-section.hidden {
    display: none !important;
}

@keyframes fadeInCW {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Continue Watching Card */
.cw-card {
    flex: 0 0 175px;
    width: 175px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #12121a;
    border: 1px solid rgba(212, 168, 83, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cw-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.9), 0 0 25px rgba(229, 9, 20, 0.4);
    z-index: 10;
}

.cw-cover-area {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #09090c;
}

.cw-cover-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cw-card:hover .cw-cover-area img {
    transform: scale(1.08);
}

/* Play Center Overlay on Hover */
.cw-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cw-play-btn-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.9);
    border: 2px solid #ffd700;
    color: #ffffff;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.8);
    transform: scale(0.85);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cw-card:hover .cw-play-overlay {
    opacity: 1;
}

.cw-card:hover .cw-play-btn-circle {
    transform: scale(1.1);
}

/* Remove 'X' Button on Card */
.cw-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 15;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #cbd5e1;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
}

.cw-card:hover .cw-remove-btn {
    opacity: 1;
}

.cw-remove-btn:hover {
    background: #e50914;
    border-color: #ffd700;
    color: #ffffff;
    transform: scale(1.15);
}

/* Netflix Glowing Red Progress Bar */
.cw-progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(255, 255, 255, 0.25);
    z-index: 5;
}

.cw-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #e50914, #ff3b3b);
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.9);
    transition: width 0.3s ease;
}

/* Card Bottom Info */
.cw-card-info {
    padding: 10px 10px 8px;
    background: #0f0f16;
}

.cw-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.cw-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
}

.cw-pct-tag {
    color: var(--color-gold);
    font-weight: 800;
}

@media (max-width: 768px) {
    .cw-card {
        flex: 0 0 135px;
        width: 135px;
    }
    .cw-remove-btn {
        opacity: 1 !important;
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }
    .cw-title {
        font-size: 0.75rem;
    }
}
/* ═══════════════════════════════════════════════════════════════
   ULTRA LUXURY NETFLIX 1:1 EPISODE & SEASON SELECTOR BAR
   ═══════════════════════════════════════════════════════════════ */
.episodes-container {
    margin-top: 18px !important;
    padding: 16px 18px !important;
    background: rgba(13, 15, 24, 0.85) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.episodes-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.episodes-title {
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

.season-selector-wrapper {
    position: relative !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.season-dropdown-btn {
    background: rgba(25, 33, 49, 0.9) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.65) !important;
    color: #ffd700 !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    font-family: 'Outfit', sans-serif !important;
    padding: 7px 16px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.2s ease !important;
}

.season-dropdown-btn:hover {
    background: #ffd700 !important;
    color: #000000 !important;
    border-color: #ffd700 !important;
    transform: scale(1.04) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
}

.season-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    background: #0f121d !important;
    border: 1.5px solid rgba(212, 168, 83, 0.6) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    min-width: 190px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.95), 0 0 20px rgba(212, 168, 83, 0.25) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.season-dropdown-menu.hidden {
    display: none !important;
}

.season-dropdown-item {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    color: #cbd5e1 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s ease !important;
}

.season-dropdown-item:hover {
    background: rgba(229, 9, 20, 0.25) !important;
    color: #ffffff !important;
}

.season-dropdown-item.active {
    background: linear-gradient(135deg, #e50914, #b91c1c) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

.episodes-scroll-track {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 4px 2px 8px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(212, 168, 83, 0.4) transparent !important;
}

.episodes-scroll-track::-webkit-scrollbar {
    height: 5px !important;
}

.episodes-scroll-track::-webkit-scrollbar-thumb {
    background: rgba(212, 168, 83, 0.4) !important;
    border-radius: 4px !important;
}

.episode-btn {
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    background: rgba(22, 25, 38, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

.episode-btn:hover {
    background: rgba(229, 9, 20, 0.25) !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
}

.episode-btn.active {
    background: linear-gradient(135deg, #e50914, #b91c1c) !important;
    border-color: #ffd700 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(229, 9, 20, 0.6), 0 0 12px rgba(255, 215, 0, 0.4) !important;
}

.episode-btn.unreleased {
    opacity: 0.7 !important;
    border-style: dashed !important;
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA LUXURY NETFLIX 1:1 EPISODE & SEASON SELECTOR BAR
   ═══════════════════════════════════════════════════════════════ */
.episodes-container {
    margin-top: 22px !important;
    padding: 22px 24px !important;
    background: rgba(13, 17, 28, 0.95) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.3) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.12) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.episodes-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

.episodes-title {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: 0.8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

.episodes-title i {
    color: #e50914 !important;
    font-size: 1.2rem !important;
    filter: drop-shadow(0 0 12px rgba(229, 9, 20, 0.8)) !important;
}

.season-tabs-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.season-tab-btn {
    padding: 8px 20px !important;
    border-radius: 25px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(30, 41, 59, 0.85) !important;
    color: #cbd5e1 !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    font-family: 'Outfit', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: none !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.season-tab-btn:hover {
    background: rgba(229, 9, 20, 0.4) !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.5) !important;
}

.season-tab-btn.active {
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%) !important;
    border-color: #ffd700 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 22px rgba(229, 9, 20, 0.75), 0 0 16px rgba(255, 215, 0, 0.45) !important;
    transform: scale(1.05) !important;
}

.season-tab-btn.active i {
    color: #ffd700 !important;
}

.episodes-scroll-track {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 6px 2px 12px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(212, 168, 83, 0.5) transparent !important;
    min-height: 52px !important;
}

.episodes-scroll-track::-webkit-scrollbar {
    height: 6px !important;
}

.episodes-scroll-track::-webkit-scrollbar-thumb {
    background: rgba(212, 168, 83, 0.5) !important;
    border-radius: 6px !important;
}

.episode-btn {
    padding: 12px 22px !important;
    border-radius: 14px !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    background: rgba(20, 24, 38, 0.95) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    color: #f1f5f9 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.episode-btn:hover {
    background: rgba(229, 9, 20, 0.3) !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 15px rgba(229, 9, 20, 0.4) !important;
}

.episode-btn.active {
    background: linear-gradient(135deg, #e50914, #b91c1c) !important;
    border-color: #ffd700 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 25px rgba(229, 9, 20, 0.8), 0 0 16px rgba(255, 215, 0, 0.5) !important;
    transform: scale(1.03) !important;
}

.episode-btn.unreleased {
    opacity: 0.65 !important;
    border-style: dashed !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
/* ═══════════════════════════════════════════════════════════════
   ULTRA LUXURY NETFLIX 1:1 EPISODE & SEASON SELECTOR (NO COLLISION)
   ═══════════════════════════════════════════════════════════════ */
.episodes-container {
    margin-top: 22px !important;
    padding: 20px 24px !important;
    background: rgba(12, 15, 26, 0.95) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.35) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), inset 0 1px 2px rgba(255, 255, 255, 0.12) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.episodes-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
}

.episodes-title {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: 0.8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

.episodes-title i {
    font-size: 1.25rem !important;
}

.season-tabs-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.season-tab-btn {
    padding: 8px 18px !important;
    border-radius: 22px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(30, 41, 59, 0.85) !important;
    color: #cbd5e1 !important;
    font-weight: 800 !important;
    font-size: 0.84rem !important;
    font-family: 'Outfit', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    user-select: none !important;
}

.season-tab-btn:hover {
    background: rgba(229, 9, 20, 0.35) !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(229, 9, 20, 0.4) !important;
}

.season-tab-btn.active {
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%) !important;
    border-color: #ffd700 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(229, 9, 20, 0.75), 0 0 15px rgba(255, 215, 0, 0.4) !important;
    transform: scale(1.04) !important;
}

.season-tab-btn.active i {
    color: #ffd700 !important;
}

.episodes-scroll-track {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 6px 2px 10px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(212, 168, 83, 0.5) transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
}

.episodes-scroll-track::-webkit-scrollbar {
    height: 6px !important;
}

.episodes-scroll-track::-webkit-scrollbar-thumb {
    background: rgba(212, 168, 83, 0.5) !important;
    border-radius: 6px !important;
}

.episode-btn {
    padding: 12px 22px !important;
    border-radius: 14px !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    background: rgba(20, 24, 38, 0.95) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    color: #f1f5f9 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.episode-btn:hover {
    background: rgba(229, 9, 20, 0.3) !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 15px rgba(229, 9, 20, 0.4) !important;
}

.episode-btn.active {
    background: linear-gradient(135deg, #e50914, #b91c1c) !important;
    border-color: #ffd700 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 25px rgba(229, 9, 20, 0.8), 0 0 16px rgba(255, 215, 0, 0.5) !important;
    transform: scale(1.03) !important;
}

.episode-btn.unreleased {
    opacity: 0.65 !important;
    border-style: dashed !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
/* ═══════════════════════════════════════════════════════════════
   LUXURY SEGERA RILIS (COMING SOON) POSTER STYLES
   ═══════════════════════════════════════════════════════════════ */
.movie-card.is-unreleased {
    position: relative !important;
}

.movie-card.is-unreleased .movie-cover-area img {
    filter: brightness(0.75) contrast(1.1) !important;
}

.movie-badge-segera-rilis {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.95), rgba(185, 28, 28, 0.95)) !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.6px !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.6), 0 0 8px rgba(255, 215, 0, 0.4) !important;
    z-index: 5 !important;
    display: none !important;
    align-items: center !important;
    gap: 4px !important;
    text-transform: uppercase !important;
}

.movie-badge-segera-rilis i {
    color: #ffd700 !important;
}




























































/* ═══════════════════════════════════════════════════════════════
   AUTHENTIC 1:1 NETFLIX CINEMA PLAYER (ZOOM ENGINE & UNIFIED WHITE CONTROLS)
   ═══════════════════════════════════════════════════════════════ */

/* 1. ANDROID STUDIO APK / MOBILE VIEWPORT SAFE-AREA TOP PADDING */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
}

body {
    padding-top: max(14px, env(safe-area-inset-top, 14px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
}

.main-header,
header.header-nav {
    padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
    margin-bottom: 14px !important;
}

.app-container,
.main-content {
    margin-top: 4px !important;
}

/* 2. PLAYER WRAPPER */
.player-wrapper,
#player-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #000000 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(229, 9, 20, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    touch-action: pan-x pan-y !important;
    user-select: none !important;
}

/* VIDEO ELEMENT & PLYR WRAPPER (ENABLE SMOOTH ZOOM TRANSFORM SCALING) */
.player-wrapper video,
#main-video-player,
.plyr__video-wrapper video,
.player-wrapper .plyr video,
.player-wrapper .plyr__video-wrapper {
    width: 100% !important;
    height: 100% !important;
    background: #000000 !important;
    transform-origin: center center !important;
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* 3. NETFLIX TOAST ZOOM NOTIFICATION INDICATOR */
.netflix-zoom-toast {
    position: absolute !important;
    top: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-10px) !important;
    background: rgba(14, 16, 26, 0.94) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.8) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 6px 18px !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9), 0 0 15px rgba(229, 9, 20, 0.4) !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.netflix-zoom-toast.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* 4. NETFLIX TOP HEADER BAR */
.netflix-player-header,
#netflix-player-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483640 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 60%, transparent 100%) !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
    box-sizing: border-box !important;
}

.player-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.player-header-badge {
    background: #e50914 !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.6) !important;
}

.player-header-title {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9) !important;
}

/* 5. NETFLIX 1:1 BOTTOM CONTROLS BAR (Z-INDEX 2147483640 & FULL TOUCH/CLICK RESPONSE) */
/* 9. LUXURY CORNER WATERMARK SHIELDS (COVERS ANOBOY/LAYARKACA/LAYARASIA WATERMARKS IN TOP-RIGHT CORNER) */
#rm-badge-top-left,
.rm-shield-top-left {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

#rm-badge-top-right {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

#rm-badge-bottom-right {
    position: absolute !important;
    bottom: 90px !important;
    right: 15px !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.rm-corner-shield .rm-shield-pill,
#rm-badge-top-right .rm-shield-pill {
    background: #000000 !important; /* 100% Solid Black to completely cover underlying video watermarks */
    border: 1.5px solid #ffd700 !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    padding: 6px 18px !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 1), 0 0 14px rgba(255, 215, 0, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    min-width: 175px !important; /* Wide cover patch spanning top-right watermark zone */
    height: 32px !important;
}

@media (orientation: landscape) {
    #rm-badge-top-left,
    #rm-badge-top-right,
    #rm-badge-bottom-right {
        z-index: 2147483647 !important;
    }
}

.rm-luxury-ticker,
#rm-luxury-ticker {
    display: none !important;
}

.netflix-bottom-bar,
#netflix-bottom-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483640 !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.6) 65%, transparent 100%) !important;
    padding: 14px 22px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
}

.netflix-bottom-bar *,
.netflix-player-header *,
.netflix-timeline-wrapper,
.netflix-timeline-wrapper *,
.netflix-controls-row,
.netflix-controls-row * {
    pointer-events: auto !important;
}

/* AUTO-HIDE ONLY WHEN .hide-controls IS EXPLICITLY PRESENT */
#player-wrapper.hide-controls .netflix-bottom-bar,
#player-wrapper.hide-controls .netflix-player-header,
#player-wrapper.is-fullscreen.hide-controls .netflix-bottom-bar,
#player-wrapper.is-fullscreen.hide-controls .netflix-player-header,
#player-wrapper:fullscreen.hide-controls .netflix-bottom-bar,
#player-wrapper:fullscreen.hide-controls .netflix-player-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(16px) !important;
}

#player-wrapper.hide-controls .netflix-player-header,
#player-wrapper.is-fullscreen.hide-controls .netflix-player-header,
#player-wrapper:fullscreen.hide-controls .netflix-player-header {
    transform: translateY(-16px) !important;
}

/* 6. NETFLIX TIMELINE WRAPPER & DRAGGABLE PROGRESS BAR */
.netflix-timeline-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    pointer-events: auto !important;
}

.netflix-progress-area {
    position: relative !important;
    flex: 1 !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    touch-action: none !important;
    user-select: none !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
}

.netflix-progress-bg {
    position: relative !important;
    width: 100% !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    transition: height 0.15s ease !important;
    pointer-events: none !important;
}

.netflix-progress-area:hover .netflix-progress-bg,
.netflix-progress-area:active .netflix-progress-bg {
    height: 9px !important;
}

.netflix-progress-buffer {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 0%;
    background: rgba(255, 255, 255, 0.45) !important;
    border-radius: 4px !important;
    pointer-events: none !important;
}

.netflix-progress-fill {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 0%;
    background: #e50914 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.9) !important;
    pointer-events: none !important;
}

.netflix-progress-handle {
    position: absolute !important;
    top: 50% !important;
    left: 0%;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #e50914 !important;
    border: 2.5px solid #ffffff !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 12px rgba(229, 9, 20, 0.95) !important;
    transition: transform 0.15s ease !important;
    pointer-events: none !important;
}

.netflix-progress-area:hover .netflix-progress-handle,
.netflix-progress-area:active .netflix-progress-handle {
    transform: translate(-50%, -50%) scale(1.35) !important;
}

.netflix-time-display {
    color: #e2e8f0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
}

/* 7. UNIFIED WHITE NETFLIX BUTTONS (ALL ICONS ELEGANTLY WHITE & CRISP) */
.netflix-controls-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    pointer-events: auto !important;
}

.controls-group-left,
.controls-group-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    pointer-events: auto !important;
}

.controls-group-center {
    flex: 1 !important;
    text-align: center !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
}

.n-btn {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.45rem !important;
    cursor: pointer !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
    outline: none !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.n-btn i {
    color: #ffffff !important;
    font-size: inherit !important;
}

.n-btn:hover,
.n-btn:active {
    color: #e50914 !important;
    transform: scale(1.18) !important;
}

.n-btn:hover i,
.n-btn:active i {
    color: #e50914 !important;
}

.n-step-btn {
    position: relative !important;
    font-size: 1.35rem !important;
}

.n-step-tag {
    position: absolute !important;
    font-size: 0.55rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -45%) !important;
    pointer-events: none !important;
}

.n-player-title {
    color: #f1f5f9 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
}

/* 8. VOLUME SLIDER CAPSULE */
.n-volume-group,
#n-volume-group {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    z-index: 2147483641 !important;
    pointer-events: auto !important;
}

.n-volume-slider-box,
#n-volume-slider-box {
    display: none !important;
    align-items: center !important;
    margin-left: 8px !important;
    background: rgba(14, 16, 26, 0.98) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.75) !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.9), 0 0 10px rgba(229, 9, 20, 0.35) !important;
    z-index: 2147483642 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

.n-volume-group.show-slider .n-volume-slider-box,
.n-volume-group.active .n-volume-slider-box,
.n-volume-slider-box.show,
#n-volume-group.show-slider #n-volume-slider-box {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: volFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes volFadeIn {
    0% { opacity: 0; transform: scale(0.88); }
    100% { opacity: 1; transform: scale(1); }
}

.n-vol-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 85px !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    border-radius: 4px !important;
    outline: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.n-vol-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.95) !important;
    cursor: pointer !important;
}



/* 10. AUTHENTIC 1:1 NETFLIX SUBTITLE ENGINE (ELEVATED PROPERLY SO IT NEVER OVERLAYS THE CONTROLS) */
::cue,
video::cue,
.plyr__captions,
.plyr__caption {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

#player-wrapper #custom-subtitle-overlay,
.player-wrapper .custom-subtitle-overlay,
#custom-subtitle-overlay {
    position: absolute !important;
    top: auto !important;
    bottom: 105px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 90% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 2147483647 !important; /* MAXIMUM Z-INDEX ABOVE ALL OVERLAYS & BARS */
    text-align: center !important;
    margin: 0 auto !important;
    transition: bottom 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
}

#player-wrapper.hide-controls #custom-subtitle-overlay {
    bottom: 50px !important;
}

/* NETFLIX DESKTOP / LAPTOP FULLSCREEN */
#player-wrapper.is-fullscreen #custom-subtitle-overlay,
#player-wrapper:fullscreen #custom-subtitle-overlay,
#player-wrapper:-webkit-full-screen #custom-subtitle-overlay,
.player-wrapper.is-fullscreen #custom-subtitle-overlay {
    bottom: 110px !important;
    z-index: 2147483647 !important;
    position: absolute !important;
}

#player-wrapper.is-fullscreen.hide-controls #custom-subtitle-overlay,
#player-wrapper:fullscreen.hide-controls #custom-subtitle-overlay,
#player-wrapper:-webkit-full-screen.hide-controls #custom-subtitle-overlay {
    bottom: 55px !important;
    z-index: 2147483647 !important;
}

/* AUTHENTIC NETFLIX SUBTITLE CAPSULE TYPOGRAPHY */
.custom-subtitle-text,
#player-wrapper .custom-subtitle-text,
.player-wrapper .custom-subtitle-text,
#player-wrapper.is-fullscreen .custom-subtitle-text,
#player-wrapper:fullscreen .custom-subtitle-text,
#player-wrapper:-webkit-full-screen .custom-subtitle-text {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.9) !important;
    padding: 6px 16px !important;
    border-radius: 8px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 0 4px #000, 0 0 2px #000 !important;
    letter-spacing: 0.35px !important;
    line-height: 1.35 !important;
    border: 1.5px solid rgba(255, 215, 0, 0.6) !important;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8) !important;
    display: inline-block !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    max-width: 90vw !important;
    width: auto !important;
    word-break: break-word !important;
    text-align: center !important;
}

/* NETFLIX MOBILE LANDSCAPE / FULLSCREEN ROTATE SUBTITLES (ELEVATED & PAS) */
@media (orientation: landscape) {
    #player-wrapper #custom-subtitle-overlay,
    .player-wrapper #custom-subtitle-overlay {
        bottom: 110px !important;
        z-index: 2147483647 !important;
        position: absolute !important;
    }
    #player-wrapper.hide-controls #custom-subtitle-overlay,
    .player-wrapper.hide-controls #custom-subtitle-overlay {
        bottom: 55px !important;
        z-index: 2147483647 !important;
        position: absolute !important;
    }
    #player-wrapper.is-fullscreen #custom-subtitle-overlay,
    #player-wrapper:fullscreen #custom-subtitle-overlay,
    #player-wrapper:-webkit-full-screen #custom-subtitle-overlay,
    .player-wrapper.is-fullscreen #custom-subtitle-overlay {
        bottom: 115px !important;
        z-index: 2147483647 !important;
        position: absolute !important;
    }
    #player-wrapper.is-fullscreen.hide-controls #custom-subtitle-overlay,
    #player-wrapper:fullscreen.hide-controls #custom-subtitle-overlay,
    #player-wrapper:-webkit-full-screen.hide-controls #custom-subtitle-overlay {
        bottom: 60px !important;
        z-index: 2147483647 !important;
        position: absolute !important;
    }
    .custom-subtitle-text,
    #player-wrapper.is-fullscreen .custom-subtitle-text,
    #player-wrapper:fullscreen .custom-subtitle-text,
    #player-wrapper:-webkit-full-screen .custom-subtitle-text {
        font-size: 0.88rem !important;
        font-weight: 800 !important;
        padding: 5px 14px !important;
        line-height: 1.3 !important;
        max-width: 90vw !important;
    }
}

/* 11. TRUE FULLSCREEN EDGE-TO-EDGE */
#player-wrapper.is-fullscreen,
#player-wrapper:fullscreen,
#player-wrapper:-webkit-full-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 2147483647 !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
}

#player-wrapper.is-fullscreen video,
#player-wrapper:fullscreen video,
#player-wrapper:-webkit-full-screen video,
#player-wrapper.is-fullscreen .plyr,
#player-wrapper:fullscreen .plyr,
#player-wrapper:-webkit-full-screen .plyr,
#player-wrapper.is-fullscreen .plyr video,
#player-wrapper:fullscreen .plyr video,
#player-wrapper:-webkit-full-screen .plyr video,
#player-wrapper.is-fullscreen .plyr__video-wrapper,
#player-wrapper:fullscreen .plyr__video-wrapper,
#player-wrapper.is-fullscreen .plyr__video-wrapper video,
#player-wrapper:fullscreen .plyr__video-wrapper video {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background: #000000 !important;
    aspect-ratio: auto !important;
}

/* 12. EPISODES & SEASONS — LUXURY NETFLIX PREMIUM REDESIGN */
/* ═══ DEFAULT: Tersembunyi sampai JS menambah class has-episodes ═══ */
.episodes-container {
    margin-top: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: none !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* ═══ TAMPILKAN jika ada episode (semua orientasi) ═══ */
.episodes-container.has-episodes {
    display: flex !important;
    margin-top: 16px !important;
    padding: 16px 18px 12px !important;
    background: linear-gradient(180deg, rgba(8, 10, 20, 0.97) 0%, rgba(5, 7, 15, 0.99) 100%) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(212, 168, 83, 0.15) !important;
    border-radius: 16px !important;
    gap: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
}

/* ═══ KONTROL PLAYER BAR: PORTRAIT / MOBILE NORMAL (PREV/LAST + NEXT + FULLSCREEN) ═══ */
#n-btn-prev-ep,
#n-btn-next-ep,
#n-btn-fullscreen,
.controls-group-right #n-btn-prev-ep,
.controls-group-right #n-btn-next-ep,
.controls-group-right #n-btn-fullscreen {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (orientation: portrait), (max-width: 768px) {
    #player-wrapper:not(.is-fullscreen) .controls-group-right #n-btn-speed,
    #player-wrapper:not(.is-fullscreen) .controls-group-right #n-btn-player-episodes,
    #player-wrapper:not(.is-fullscreen) .controls-group-right #n-btn-zoom {
        display: none !important;
    }
    #player-wrapper:not(.is-fullscreen) .controls-group-right #n-btn-prev-ep,
    #player-wrapper:not(.is-fullscreen) .controls-group-right #n-btn-next-ep,
    #player-wrapper:not(.is-fullscreen) .controls-group-right #n-btn-fullscreen {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ═══ TAMPILKAN SEMUA KONTROL DI LANDSCAPE DAN FULLSCREEN ═══ */
@media (orientation: landscape) {
    #player-wrapper .controls-group-right #n-btn-prev-ep,
    #player-wrapper .controls-group-right #n-btn-next-ep,
    #player-wrapper .controls-group-right #n-btn-speed,
    #player-wrapper .controls-group-right #n-btn-zoom,
    #player-wrapper .controls-group-right #n-btn-fullscreen {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #player-wrapper .controls-group-right #n-btn-player-episodes.has-episodes {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

#player-wrapper.is-fullscreen .controls-group-right #n-btn-prev-ep,
#player-wrapper.is-fullscreen .controls-group-right #n-btn-next-ep,
#player-wrapper.is-fullscreen .controls-group-right #n-btn-speed,
#player-wrapper.is-fullscreen .controls-group-right #n-btn-zoom,
#player-wrapper.is-fullscreen .controls-group-right #n-btn-fullscreen,
#player-wrapper:fullscreen .controls-group-right #n-btn-prev-ep,
#player-wrapper:fullscreen .controls-group-right #n-btn-next-ep,
#player-wrapper:fullscreen .controls-group-right #n-btn-speed,
#player-wrapper:fullscreen .controls-group-right #n-btn-zoom,
#player-wrapper:fullscreen .controls-group-right #n-btn-fullscreen {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#player-wrapper.is-fullscreen .controls-group-right #n-btn-player-episodes.has-episodes,
#player-wrapper:fullscreen .controls-group-right #n-btn-player-episodes.has-episodes {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ═══ LUXURY HEADER BAR ═══ */
.episodes-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.08) !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

.episodes-title {
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    color: #ffd700 !important;
    letter-spacing: 1.2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.3) !important;
}

/* ═══ LUXURY SEASON TABS — Pill Capsules ═══ */
.season-tabs-container {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    flex: 1 !important;
    padding: 2px 0 !important;
}
.season-tabs-container::-webkit-scrollbar { display: none !important; }

.season-tab-btn {
    padding: 5px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 800 !important;
    font-size: 0.7rem !important;
    font-family: 'Outfit', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
    overflow: hidden !important;
}

.season-tab-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.15), rgba(255, 215, 0, 0.08)) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    border-radius: inherit !important;
}

.season-tab-btn:hover {
    border-color: rgba(255, 215, 0, 0.35) !important;
    color: #ffd700 !important;
    transform: translateY(-1px) !important;
}
.season-tab-btn:hover::before { opacity: 1 !important; }

.season-tab-btn.active {
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 50%, #991b1b 100%) !important;
    border-color: rgba(255, 215, 0, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 14px rgba(229, 9, 20, 0.6), 0 0 8px rgba(255, 215, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.02) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
.season-tab-btn.active::before { opacity: 0 !important; }

.season-tab-btn.active i {
    color: #ffd700 !important;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6)) !important;
}

/* ═══ LUXURY EPISODE SCROLL TRACK ═══ */
.episodes-scroll-track {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 4px 2px 6px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(212, 168, 83, 0.25) transparent !important;
    scroll-behavior: smooth !important;
}

.episodes-scroll-track::-webkit-scrollbar {
    height: 3px !important;
}

.episodes-scroll-track::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(229, 9, 20, 0.4), rgba(255, 215, 0, 0.4)) !important;
    border-radius: 4px !important;
}

/* ═══ LUXURY EPISODE BUTTONS — Premium Glass Cards ═══ */
.episode-btn {
    padding: 8px 16px !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    background: linear-gradient(145deg, rgba(20, 24, 42, 0.9), rgba(12, 16, 30, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(241, 245, 249, 0.85) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    letter-spacing: 0.2px !important;
}

.episode-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.06), transparent) !important;
    transition: left 0.5s ease !important;
}

.episode-btn:hover {
    border-color: rgba(255, 215, 0, 0.3) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 215, 0, 0.1) !important;
}
.episode-btn:hover::after { left: 120% !important; }

.episode-btn.active {
    background: linear-gradient(135deg, #e50914 0%, #c41c1c 40%, #b91c1c 100%) !important;
    border-color: rgba(255, 215, 0, 0.75) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(229, 9, 20, 0.65), 0 0 12px rgba(255, 215, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
    transform: scale(1.03) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.episode-btn.active i {
    color: #ffd700 !important;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7)) !important;
}

.episode-btn.unreleased {
    opacity: 0.55 !important;
    background: rgba(15, 18, 30, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    cursor: not-allowed !important;
}
.episode-btn.unreleased:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   NETFLIX NEXT EPISODE COUNTDOWN OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.netflix-next-ep-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2147483640 !important;
    background: rgba(8, 10, 18, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    animation: netflixOverlayFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.netflix-next-ep-overlay.active {
    display: flex !important;
}

.next-ep-card {
    background: linear-gradient(145deg, rgba(20, 24, 40, 0.96), rgba(10, 12, 22, 0.98)) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.75) !important;
    border-radius: 20px !important;
    padding: 24px 30px !important;
    text-align: center !important;
    max-width: 440px !important;
    width: 100% !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(229, 9, 20, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

.next-ep-badge {
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    letter-spacing: 0.8px !important;
}

.next-ep-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.next-ep-desc {
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

.next-ep-timer-circle {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    border: 3px solid #ffd700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: #ffd700 !important;
    margin: 8px 0 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(229, 9, 20, 0.4) !important;
    animation: timerPulse 1s infinite !important;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.next-ep-actions {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 6px !important;
}

.btn-next-now {
    flex: 1 !important;
    background: linear-gradient(135deg, #e50914, #b91c1c) !important;
    color: #ffffff !important;
    border: 1.5px solid #ffd700 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.6) !important;
    transition: transform 0.2s !important;
}

.btn-next-now:hover {
    transform: scale(1.05) !important;
}

.btn-cancel-next {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.btn-cancel-next:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   NETFLIX END-SCREEN RECOMMENDATIONS (IKLAN FILM LAINNYA)
   ═══════════════════════════════════════════════════════════════ */
.netflix-endscreen-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2147483641 !important;
    background: linear-gradient(180deg, rgba(8, 10, 18, 0.92) 0%, rgba(5, 6, 12, 0.97) 100%) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 20px !important;
    overflow-y: auto !important;
    animation: netflixOverlayFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.netflix-endscreen-overlay.active {
    display: flex !important;
}

@keyframes netflixOverlayFade {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.endscreen-container {
    max-width: 780px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
}

.endscreen-header {
    text-align: center !important;
}

.endscreen-badge {
    background: linear-gradient(135deg, #e50914 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.endscreen-title {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
}

.endscreen-subtitle {
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    margin: 4px 0 0 !important;
}

.endscreen-grid {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

.endscreen-card {
    background: rgba(18, 22, 38, 0.9) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.4) !important;
    border-radius: 14px !important;
    width: 155px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
}

.endscreen-card:hover {
    transform: translateY(-5px) scale(1.04) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 12px 30px rgba(229, 9, 20, 0.5), 0 0 15px rgba(255, 215, 0, 0.4) !important;
}

.endscreen-card-poster {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
    position: relative !important;
    background: #000 !important;
}

.endscreen-card-body {
    padding: 10px 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

.endscreen-card-title {
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.endscreen-card-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.7rem !important;
    color: #94a3b8 !important;
}

.endscreen-play-tag {
    background: linear-gradient(135deg, #e50914, #b91c1c) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.endscreen-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.endscreen-countdown-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    color: #cbd5e1 !important;
    width: 100% !important;
    max-width: 320px !important;
}

.endscreen-progress-bar {
    width: 100% !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.endscreen-progress-fill {
    height: 100% !important;
    width: 100% !important;
    background: linear-gradient(90deg, #e50914, #ffd700) !important;
    transition: width 10s linear !important;
}

.endscreen-footer-actions {
    display: flex !important;
    gap: 12px !important;
}

.btn-endscreen-replay {
    background: linear-gradient(135deg, #e50914, #b91c1c) !important;
    color: #ffffff !important;
    border: 1.5px solid #ffd700 !important;
    border-radius: 12px !important;
    padding: 8px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: transform 0.2s !important;
}

.btn-endscreen-replay:hover {
    transform: scale(1.05) !important;
}

.btn-endscreen-close {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 8px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.btn-endscreen-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

@media (max-width: 600px) {
    .endscreen-card {
        width: calc(50% - 10px) !important;
    }
    .endscreen-card-poster {
        height: 90px !important;
    }
    .endscreen-title {
        font-size: 1.1rem !important;
    }
}

/* Luxury Hak Siar Overlay & Glass Card */
.luxury-hak-siar-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(10, 10, 12, 0.96) !important;
    z-index: 100 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.luxury-hak-siar-overlay.active {
    display: flex !important;
}
.hak-siar-glass-card {
    background: rgba(22, 22, 26, 0.8) !important;
    border: 1.5px solid rgba(212, 168, 83, 0.35) !important;
    border-radius: 20px !important;
    padding: 35px 25px !important;
    width: 90% !important;
    max-width: 440px !important;
    text-align: center !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(212, 168, 83, 0.15) !important;
    animation: scaleUpOverlay 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes scaleUpOverlay {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.hak-siar-glow-ring {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: rgba(212, 168, 83, 0.1) !important;
    border: 2px solid var(--color-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px !important;
    box-shadow: 0 0 25px rgba(212, 168, 83, 0.5) !important;
}
.hak-siar-glow-ring i {
    font-size: 2.3rem !important;
    color: var(--color-gold) !important;
    filter: drop-shadow(0 0 6px rgba(212, 168, 83, 0.7)) !important;
}
.hak-siar-glass-card h3 {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: 1.5px !important;
}
.hak-siar-tagline {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--color-gold) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 0 0 18px 0 !important;
}
.hak-siar-divider {
    height: 1px !important;
    width: 80px !important;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent) !important;
    margin: 0 auto 18px !important;
}
.hak-siar-desc {
    font-size: 0.88rem !important;
    color: var(--color-text-dim) !important;
    line-height: 1.6dvh !important;
    line-height: 1.6 !important;
    margin: 0 0 26px 0 !important;
}
.hak-siar-brand {
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    color: var(--color-gold-light) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    display: block !important;
}

.btn-hak-siar-close-icon {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.btn-hak-siar-close-icon:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    transform: scale(1.1) !important;
}
.btn-hak-siar-dismiss {
    background: linear-gradient(135deg, #ffd700, #d4a853) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 10px 20px !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 15px rgba(212, 168, 83, 0.4) !important;
}
.btn-hak-siar-dismiss:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 6px 20px rgba(212, 168, 83, 0.6) !important;
}
.btn-hak-siar-reload {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}
.btn-hak-siar-reload:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LUXURY UNIFIED MODE & CATEGORY PILLS BAR (ABOVE HERO BANNER)
   ═══════════════════════════════════════════════════════════════ */
.top-category-pill-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 6px 2px 14px 2px !important;
    margin-bottom: 8px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
}
.top-category-pill-bar::-webkit-scrollbar {
    display: none !important;
}

/* Master Mode Switcher Group (Live TV vs Film Premium) */
.pill-mode-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(14, 18, 28, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 4px !important;
    border-radius: 30px !important;
    border: 1.5px solid rgba(212, 168, 83, 0.35) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    flex-shrink: 0 !important;
}
.mode-pill-btn {
    padding: 7px 16px !important;
    border-radius: 24px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.mode-pill-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.mode-pill-btn.active {
    background: linear-gradient(135deg, #ffd700 0%, #d4a853 100%) !important;
    color: #0a0a0c !important;
    box-shadow: 0 2px 14px rgba(212, 168, 83, 0.5) !important;
}
.mode-pill-btn.active i {
    color: #0a0a0c !important;
}

.pill-bar-divider {
    width: 2px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 2px !important;
    margin: 0 4px !important;
    flex-shrink: 0 !important;
}

.category-pill-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(20, 24, 38, 0.78) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1.2px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 30px !important;
    padding: 8px 18px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.category-pill-item i {
    font-size: 0.95rem !important;
    color: #ffd700 !important;
    transition: transform 0.25s ease !important;
}

.category-pill-item:hover {
    background: rgba(35, 42, 65, 0.92) !important;
    border-color: rgba(212, 168, 83, 0.6) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 168, 83, 0.25) !important;
}

.category-pill-item.active {
    background: linear-gradient(135deg, #ffd700 0%, #d4a853 100%) !important;
    border-color: #ffd700 !important;
    color: #000000 !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 20px rgba(212, 168, 83, 0.6), 0 0 12px rgba(255, 215, 0, 0.4) !important;
    transform: translateY(-1px) scale(1.02) !important;
}

.category-pill-item.active i {
    color: #000000 !important;
    transform: scale(1.1) !important;
}

@media (max-width: 768px) {
    .top-nav {
        padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 8px !important;
        height: auto !important;
        min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    }
    .nav-left-wrapper {
        gap: 10px !important;
        max-width: none !important;
    }
    .brand-text {
        font-size: 0.95rem !important;
    }
    .nav-search-box {
        max-width: 150px !important;
        padding: 5px 12px !important;
    }
    .nav-search-box input {
        font-size: 0.78rem !important;
    }
    .nav-clock {
        display: none !important;
    }
    .nav-live-badge {
        font-size: 0.65rem !important;
    }
    .top-category-pill-bar {
        gap: 8px !important;
        padding-bottom: 12px !important;
        margin-bottom: 2px !important;
    }
    .mode-pill-btn {
        padding: 6px 12px !important;
        font-size: 0.76rem !important;
    }
    .category-pill-item {
        padding: 7px 14px !important;
        font-size: 0.76rem !important;
        border-radius: 24px !important;
    }
    .category-pill-item i {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .nav-search-box {
        position: relative !important;
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1.2px solid rgba(255, 255, 255, 0.15) !important;
        transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    }
    .nav-search-box input {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: #ffffff !important;
        font-size: 0.8rem !important;
        transition: all 0.3s ease !important;
    }
    .nav-search-box i {
        font-size: 0.9rem !important;
        color: #ffd700 !important;
        margin: 0 !important;
        transition: all 0.3s ease !important;
    }
    
    .nav-search-box:focus-within {
        position: absolute !important;
        left: 14px !important;
        right: 110px !important;
        width: auto !important;
        max-width: none !important;
        height: 38px !important;
        border-radius: 20px !important;
        padding: 0 14px !important;
        background: #0e121c !important;
        border-color: #ffd700 !important;
        box-shadow: 0 0 25px rgba(212, 168, 83, 0.5) !important;
        z-index: 110 !important;
        justify-content: flex-start !important;
    }
    .nav-search-box:focus-within input {
        position: relative !important;
        opacity: 1 !important;
        cursor: text !important;
        pointer-events: auto !important;
        margin-left: 8px !important;
        width: 100% !important;
    }
    .nav-search-box:focus-within i {
        color: #ffd700 !important;
    }
    .brand-text em {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NETFLIX 1:1 CINEMATIC HERO SHOWCASE BANNER
   ═══════════════════════════════════════════════════════════════ */
.netflix-hero-slider-section {
    position: relative !important;
    width: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #090a10 !important;
    aspect-ratio: 16/9 !important;
    max-height: 520px !important;
    min-height: 280px !important;
    border: 1.5px solid rgba(212, 168, 83, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 40px rgba(212, 168, 83, 0.15) !important;
    display: block !important;
    margin-bottom: 24px !important;
    transition: opacity 0.4s ease !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: pan-y !important;
}

.netflix-hero-slider-section:active {
    cursor: grabbing !important;
}

.netflix-hero-slider-section.hidden {
    display: none !important;
}

.active-player-container {
    position: relative !important;
    width: 100% !important;
    display: none !important;
    animation: fadeInPlayer 0.4s ease-out !important;
}
.active-player-container.active {
    display: block !important;
}
@keyframes fadeInPlayer {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.netflix-hero-slides-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.netflix-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center top !important;
    opacity: 0 !important;
    transform: scale(1.04) !important;
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 36px 32px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.netflix-hero-slide.active {
    opacity: 1 !important;
    transform: scale(1.0) !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

.hero-slide-vignette {
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 70% 30%, rgba(0,0,0,0) 0%, rgba(9,10,16,0.6) 60%, #090a10 100%),
                linear-gradient(0deg, #090a10 0%, rgba(9,10,16,0.7) 40%, transparent 100%),
                linear-gradient(90deg, rgba(9,10,16,0.9) 0%, rgba(9,10,16,0.5) 45%, transparent 100%) !important;
    pointer-events: none !important;
}

.hero-slide-content {
    position: relative !important;
    z-index: 3 !important;
    max-width: 620px !important;
    animation: heroSlideUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

@keyframes heroSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.hero-slide-badge {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

.badge-n-logo {
    background: linear-gradient(135deg, #e50914, #b20710) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    letter-spacing: 0.8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.6) !important;
}

.badge-quality {
    background: rgba(255, 215, 0, 0.15) !important;
    border: 1px solid rgba(255, 215, 0, 0.5) !important;
    color: #ffd700 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px !important;
}

.badge-rating {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.badge-rating i { color: #ffd700 !important; }

.hero-slide-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
    line-height: 1.15 !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.9) !important;
    letter-spacing: 0.5px !important;
}

.hero-slide-desc {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.55 !important;
    margin: 0 0 20px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
    max-width: 540px !important;
}

.hero-slide-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.btn-hero-play {
    background: linear-gradient(135deg, #ffd700, #d4a853) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 26px !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 25px rgba(212, 168, 83, 0.5) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-hero-play:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 8px 32px rgba(212, 168, 83, 0.7) !important;
}

.btn-hero-info {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 12px 22px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.btn-hero-info:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

.netflix-hero-dots {
    position: absolute !important;
    bottom: 18px !important;
    right: 24px !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 8px !important;
}

.hero-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.35) !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-dot.active {
    width: 24px !important;
    border-radius: 6px !important;
    background: #ffd700 !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8) !important;
}

.hero-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    backdrop-filter: blur(10px) !important;
}

.hero-slider-arrow:hover {
    background: #ffd700 !important;
    color: #000000 !important;
    border-color: #ffd700 !important;
    transform: translateY(-50%) scale(1.12) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6) !important;
}

.hero-arrow-left { left: 16px !important; }
.hero-arrow-right { right: 16px !important; }

/* Button to close active player and return to hero showcase */
.btn-netflix-back-browse {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}
.btn-netflix-back-browse:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* Hide prev/next arrow buttons on mobile and tablet */
@media (max-width: 991px) {
    .hero-slider-arrow {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .netflix-hero-slider-section {
        border-radius: 14px !important;
        max-height: 420px !important;
        margin-bottom: 16px !important;
    }
    .netflix-hero-slide {
        padding: 20px 18px 24px !important;
    }
    .hero-slide-title {
        font-size: 1.45rem !important;
        margin-bottom: 6px !important;
    }
    .hero-slide-desc {
        font-size: 0.78rem !important;
        margin-bottom: 14px !important;
        -webkit-line-clamp: 2 !important;
    }
    .btn-hero-play {
        padding: 8px 18px !important;
        font-size: 0.82rem !important;
        border-radius: 8px !important;
    }
    .btn-hero-info {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   NETFLIX-STYLE MOVIE INFO MODAL (LUXURY V2)
   ═══════════════════════════════════════════════════════════ */
.netflix-movie-info-modal {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.netflix-movie-info-modal.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.n-info-modal-backdrop {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 1 !important;
}

.n-info-modal-card {
    position: relative !important;
    width: 100% !important;
    max-width: 680px !important;
    max-height: 85vh !important;
    background: #0c0f17 !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(212, 168, 83, 0.35) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(212, 168, 83, 0.15) !important;
    overflow-y: auto !important;
    z-index: 2 !important;
    outline: none !important;
    animation: nInfoFadeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.n-info-blur-bg {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 340px !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(35px) !important;
    opacity: 0.18 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

.n-info-modal-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(12, 15, 23, 0.8) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    z-index: 12 !important;
    outline: none !important;
}

.n-info-modal-close:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(90deg) !important;
}

.n-info-header {
    position: relative !important;
    display: flex !important;
    gap: 24px !important;
    padding: 35px 30px 20px !important;
    z-index: 1 !important;
}

.n-info-poster-box {
    flex-shrink: 0 !important;
    width: 120px !important;
    height: 175px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2px solid rgba(212, 168, 83, 0.5) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6), 0 0 15px rgba(212, 168, 83, 0.2) !important;
    background: #09090d !important;
}

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

.n-info-header-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex-grow: 1 !important;
}

.n-info-badges-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}

.n-badge {
    padding: 3px 9px !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.badge-gold {
    background: rgba(212, 168, 83, 0.15) !important;
    border: 1px solid #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2) !important;
}

.badge-gray {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

.badge-red {
    background: rgba(229, 9, 20, 0.15) !important;
    border: 1px solid #e50914 !important;
    color: #f87171 !important;
    box-shadow: 0 0 8px rgba(229, 9, 20, 0.2) !important;
}

.n-info-title {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 0 6px !important;
    line-height: 1.25 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6) !important;
    background: linear-gradient(135deg, #ffffff, #e2e8f0) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.n-info-header-duration {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
    margin: 0 0 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !}

.btn-n-info-play-primary {
    align-self: flex-start !important;
    padding: 10px 22px !important;
    border: none !important;
    border-radius: 25px !important;
    background: linear-gradient(135deg, #ffd700, #d4a853) !important;
    color: #000000 !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(212, 168, 83, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    outline: none !important;
}

.btn-n-info-play-primary:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6) !important;
}

.n-info-body {
    position: relative !important;
    padding: 0 30px 30px !important;
    z-index: 1 !important;
}

.n-info-divider {
    height: 1px !important;
    background: linear-gradient(90deg, rgba(212, 168, 83, 0.3) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    margin-bottom: 20px !important;
}

.n-section-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
}

.n-info-description {
    font-size: 0.86rem !important;
    line-height: 1.6 !important;
    color: #94a3b8 !important;
    margin: 0 0 25px !important;
    text-align: justify !important;
}

.n-info-episodes-section {
    margin-bottom: 25px !important;
}

.n-info-episodes-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}

.n-info-episodes-list::-webkit-scrollbar {
    width: 4px !important;
}
.n-info-episodes-list::-webkit-scrollbar-thumb {
    background: rgba(212, 168, 83, 0.4) !important;
    border-radius: 2px !important;
}

.n-info-episode-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.n-info-episode-item:hover {
    background: rgba(212, 168, 83, 0.08) !important;
    border-color: rgba(212, 168, 83, 0.35) !important;
    transform: translateX(3px) !important;
}

.n-info-episode-name {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

.n-info-episode-play-icon {
    font-size: 1rem !important;
    color: #ffd700 !important;
}

.n-info-extra-details {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-top: 20px !important;
    margin-top: 10px !important;
}

.n-info-detail-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.detail-label {
    font-size: 0.65rem !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
}

.detail-val {
    font-size: 0.8rem !important;
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

/* Responsive Modals Overrides */
@media (max-width: 768px) {
    .n-info-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 40px 20px 15px !important;
    }
    
    .n-info-poster-box {
        width: 100px !important;
        height: 145px !important;
    }
    
    .n-info-header-content {
        align-items: center !important;
    }
    
    .n-info-badges-row {
        justify-content: center !important;
    }
    
    .btn-n-info-play-primary {
        align-self: center !important;
    }
    
    .n-info-body {
        padding: 0 20px 20px !important;
    }
    
    .n-info-extra-details {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   NETFLIX-STYLE PLAYER EPISODES SLIDING DRAWER
   ═══════════════════════════════════════════════════════════ */
.netflix-player-ep-drawer {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 320px !important;
    background: rgba(10, 12, 18, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-left: 2px solid rgba(212, 168, 83, 0.4) !important;
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.9) !important;
    z-index: 2147483645 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: translateX(100%);
    box-sizing: border-box !important;
}

.netflix-player-ep-drawer.hidden {
    transform: translateX(100%) !important;
    pointer-events: none !important;
}

.netflix-player-ep-drawer:not(.hidden) {
    transform: translateX(0) !important;
}

.netflix-player-ep-drawer .drawer-header {
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.netflix-player-ep-drawer .drawer-header h3 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.netflix-player-ep-drawer .btn-close-drawer {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.netflix-player-ep-drawer .btn-close-drawer:hover {
    color: #e50914 !important;
    transform: scale(1.1) rotate(90deg) !important;
}

.drawer-seasons-select-wrapper {
    padding: 12px 20px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.drawer-seasons-select {
    width: 100% !important;
    padding: 10px !important;
    background: #0f121a !important;
    border: 1px solid rgba(212, 168, 83, 0.4) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.drawer-seasons-select:focus {
    border-color: #ffd700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2) !important;
}

.netflix-player-ep-drawer .drawer-body {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.netflix-player-ep-drawer .drawer-body::-webkit-scrollbar {
    width: 4px !important;
}
.netflix-player-ep-drawer .drawer-body::-webkit-scrollbar-thumb {
    background: rgba(212, 168, 83, 0.4) !important;
    border-radius: 2px !important;
}

.drawer-ep-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-ep-item:hover {
    background: rgba(212, 168, 83, 0.08) !important;
    border-color: rgba(212, 168, 83, 0.3) !important;
    transform: translateX(-3px) !important;
}

.drawer-ep-item.active {
    background: rgba(212, 168, 83, 0.15) !important;
    border-color: #ffd700 !important;
    box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.1) !important;
}

.drawer-ep-item.active .ep-title-text {
    color: #ffd700 !important;
    font-weight: 800 !important;
}

.drawer-ep-item.active .ep-number {
    background: #ffd700 !important;
    color: #000000 !important;
}

.drawer-ep-item .ep-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.drawer-ep-item .ep-number {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.drawer-ep-item .ep-title-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #e2e8f0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 190px !important;
}

.drawer-ep-item .ep-play-icon {
    font-size: 1rem !important;
    color: #ffd700 !important;
    opacity: 0.6 !important;
    transition: all 0.2s ease !important;
}

.drawer-ep-item:hover .ep-play-icon {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

.btn-close-player {
    background: rgba(0,0,0,0.6) !important;
    border: 1.5px solid rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
}

.btn-close-player:hover {
    background: #e50914 !important;
    border-color: #e50914 !important;
    transform: scale(1.1) rotate(90deg) !important;
}

/* Hide corner shields when player controls are showing */
.player-wrapper.show-controls .rm-corner-shield,
#player-wrapper.show-controls .rm-corner-shield {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Responsive Rules for Drawer */
@media (max-width: 768px) {
    .netflix-player-ep-drawer {
        width: 260px !important;
    }
    .drawer-ep-item .ep-title-text {
        max-width: 140px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   COMING SOON LUXURY BADGE & BUTTON STYLES
   ═══════════════════════════════════════════════════════════ */

/* Hero Banner - Coming Soon Badge */
.badge-coming-soon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    font-family: 'Outfit', sans-serif !important;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.85), rgba(185, 28, 28, 0.85)) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 215, 0, 0.6) !important;
    box-shadow: 0 2px 12px rgba(229, 9, 20, 0.5), 0 0 20px rgba(255, 215, 0, 0.15) !important;
    animation: comingSoonPulse 2.5s ease-in-out infinite !important;
}

@keyframes comingSoonPulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(229, 9, 20, 0.5), 0 0 20px rgba(255, 215, 0, 0.15); }
    50% { box-shadow: 0 2px 18px rgba(229, 9, 20, 0.8), 0 0 30px rgba(255, 215, 0, 0.35); }
}

/* Hero Banner - Coming Soon Play Button */
.btn-hero-coming-soon {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.9), rgba(185, 28, 28, 0.9)) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.5) !important;
    color: #ffffff !important;
}

.btn-hero-coming-soon:hover {
    background: linear-gradient(135deg, #e50914, #b91c1c) !important;
    border-color: #ffd700 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 25px rgba(229, 9, 20, 0.6) !important;
}

/* Info Modal - Coming Soon Disabled Button */
.btn-coming-soon-disabled {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.7), rgba(185, 28, 28, 0.7)) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.4) !important;
    color: #ffffff !important;
    cursor: default !important;
    opacity: 0.9 !important;
    animation: comingSoonPulse 2.5s ease-in-out infinite !important;
}

.btn-coming-soon-disabled:hover {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.85), rgba(185, 28, 28, 0.85)) !important;
    transform: none !important;
}

/* =================================================================
   RIVAMAZA IPTV DEFINITIVE STYLESHEET REPAIRS & ENHANCEMENTS
   ================================================================= */

/* 1. GAP SPACING ADJUSTMENTS BETWEEN TOP BAR AND CATEGORIES */
.hero-section {
    padding-top: 64px !important;
}
@media (max-width: 768px) {
    .hero-section {
        padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* 2. DYNAMIC MOBILE STICKY TOP VIDEO PLAYER */
@media (max-width: 768px) {
    .active-player-container.active {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #000000 !important;
        width: 100% !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.8) !important;
    }
    /* Mobile Top Docking for floating mini-player */
    .player-wrapper.pip-mode {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
        z-index: 9999990 !important;
        aspect-ratio: 16/9 !important;
        transform: none !important;
        animation: none !important;
    }
    .player-wrapper.pip-mode .netflix-bottom-bar {
        opacity: 1 !important;
    }
}

/* 3. HIDE MOBILE SCROLLBARS BUT ALLOW TOUCH SWIPING */
@media (max-width: 768px) {
    /* Hide scrollbars for Chrome, Safari, Opera and WebViews */
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    html, body, div, section, ul {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
}

/* 4. DEFINITIVE HIGH-PRIORITY SUBTITLE OVERRIDES (PREVENTS CROPPING/ZOOM ISSUES) */
#player-wrapper #custom-subtitle-overlay,
.player-wrapper #custom-subtitle-overlay,
#custom-subtitle-overlay {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 800px !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
/* Subtitle Position */
#player-wrapper #custom-subtitle-overlay {
    bottom: 95px !important;
}
#player-wrapper.hide-controls #custom-subtitle-overlay {
    bottom: 35px !important;
}
@media (orientation: landscape) {
    #player-wrapper #custom-subtitle-overlay {
        bottom: 50px !important;
    }
    #player-wrapper.hide-controls #custom-subtitle-overlay {
        bottom: 18px !important;
    }
    .custom-subtitle-text,
    #player-wrapper .custom-subtitle-text {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        padding: 4px 12px !important;
        line-height: 1.25 !important;
        max-width: 80vw !important;
    }
}
@media (orientation: portrait) {
    #player-wrapper #custom-subtitle-overlay {
        bottom: 65px !important;
    }
    #player-wrapper.hide-controls #custom-subtitle-overlay {
        bottom: 22px !important;
    }
    .custom-subtitle-text,
    #player-wrapper .custom-subtitle-text {
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        padding: 4px 12px !important;
        line-height: 1.28 !important;
        max-width: 85vw !important;
    }
}
.custom-subtitle-text,
#player-wrapper .custom-subtitle-text {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: 6px !important;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    display: inline-block !important;
}

/* 5. YOUTUBE VIDEO ADS OVERLAY STYLING */
.youtube-ad-overlay {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(10, 11, 18, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 200000 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}
.ad-container {
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #151a30 0%, #08090f 100%);
    overflow: hidden;
    padding: 30px;
}
.ad-badge-top {
    position: absolute;
    top: 25px; left: 25px;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #ffd700;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
}
.ad-video-mock {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    z-index: 2;
}
.ad-pulse-ring {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid #ffd700;
    animation: adPulse 2s infinite ease-in-out;
    position: absolute;
}
.ad-play-icon {
    font-size: 3.5rem;
    color: #ffd700;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}
.ad-content-box {
    position: relative;
    z-index: 3;
    margin-top: 20px;
    max-width: 480px;
}
.ad-sponsor-title {
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffffff 0%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ad-sponsor-desc {
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1.5;
}
.ad-bottom-row {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    z-index: 2;
}
.ad-prog-track {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.ad-prog-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #b8860b 0%, #ffd700 100%);
    transition: width 0.1s linear;
}
.btn-skip-ad {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 10px 24px !important;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
.btn-skip-ad:not(:disabled) {
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%) !important;
    color: #000000 !important;
    border-color: #ffd700 !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
}
.btn-skip-ad:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.ad-premium-promo {
    background: rgba(255, 215, 0, 0.04);
    border: 1px dashed rgba(255, 215, 0, 0.25);
    width: 100%;
    max-width: 500px;
    text-align: center;
    padding: 10px;
    border-radius: 30px;
    font-size: 0.72rem;
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}
.ad-premium-promo:hover {
    background: rgba(255, 215, 0, 0.08);
    transform: scale(1.02);
}
.ad-premium-promo span {
    font-size: 0.8rem;
    color: #ffd700;
}

@keyframes adPulse {
    0% { transform: scale(0.9); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.4; }
    100% { transform: scale(0.9); opacity: 1; }
}

/* 6. LUXURY DONATION & VIP SUBSCRIPTION MODAL STYLING */
.donation-modal {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 2147483600 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}
.donation-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 8, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.donation-card {
    position: relative;
    z-index: 2;
    background: rgba(14, 18, 30, 0.85);
    border: 1.5px solid rgba(212, 168, 83, 0.4);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(212, 168, 83, 0.15);
    width: 92%;
    max-width: 440px;
    border-radius: 24px;
    padding: 28px 24px;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    color: #ffffff;
    animation: scaleInDonation 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes scaleInDonation {
    from { opacity: 0; transform: scale(0.92) translateY(15px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.donation-close-btn {
    position: absolute;
    top: 20px; right: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border-radius: 50%;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.donation-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.donation-header {
    text-align: center;
    margin-bottom: 22px;
}
.gold-crown-glow {
    font-size: 2.2rem;
    color: #ffd700;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    margin-bottom: 8px;
    animation: crownFloat 2s ease-in-out infinite alternate;
}
@keyframes crownFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}
.donation-header h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #ffffff 30%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}
.donation-header p {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.35;
}
.donation-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 20px;
}
.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: #cbd5e1;
}
.text-gold {
    color: #ffd700;
}
.donation-bank-card {
    background: linear-gradient(135deg, #161a29 0%, #0a0d16 100%);
    border: 1px solid rgba(212, 168, 83, 0.3);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
.donation-bank-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(212, 168, 83, 0.05) 0%, transparent 70%);
}
.bank-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.bank-card-title {
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: #94a3b8;
    font-weight: 800;
}
.bank-name-badge {
    background: #ffffff;
    color: #000000;
    font-weight: 900;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
}
.bank-account-num {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    position: relative;
    z-index: 2;
}
.bank-acc-holder {
    font-size: 0.8rem;
    color: #ffd700;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}
.btn-copy-acc {
    width: 100%;
    background: linear-gradient(135deg, #ffd700 0%, #d4a853 100%) !important;
    border: none !important;
    color: #000000 !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 9px !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}
.btn-copy-acc:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}
.donation-instructions {
    background: rgba(229, 9, 20, 0.06);
    border: 1.2px solid rgba(229, 9, 20, 0.15);
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: #cbd5e1;
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: center;
}
.btn-wa-confirm {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: #25d366 !important;
    color: #ffffff !important;
    border: none !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 11px 16px !important;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.btn-wa-confirm:hover {
    background: #20ba5a !important;
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

/* 7. LUXURY VIP PREMIUM THEME ACCENTS */
body.is-vip-premium .plyr,
body.is-vip-premium .player-wrapper {
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2) !important;
}
body.is-vip-premium .category-pill-item.active {
    background: linear-gradient(135deg, #ffd700 0%, #d4a853 100%) !important;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.5) !important;
}
.profile-badge-vip.is-vip {
    background: rgba(255, 215, 0, 0.15) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.45) !important;
    color: #ffd700 !important;
    font-weight: 900 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3) !important;
    display: inline-flex !important;
}

/* 8. NETFLIX-STYLE PREMIUM MOVIE SCREENSAVER BACKGROUND */
.donation-screensaver {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
    opacity: 0.16 !important;
    filter: blur(1.5px) grayscale(30%) !important;
    pointer-events: none !important;
}
.screensaver-track {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    width: 150% !important;
    padding: 20px !important;
    transform: rotate(-10deg) translateY(-8%) !important;
    animation: screensaverScroll 35s linear infinite !important;
}
.screensaver-track img {
    width: 100% !important;
    aspect-ratio: 2/3 !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
    opacity: 0.85 !important;
}
@keyframes screensaverScroll {
    0% { transform: rotate(-10deg) translate3d(0, 0, 0); }
    100% { transform: rotate(-10deg) translate3d(-25%, -12%, 0); }
}

/* 9. CLOSE BUTTON & MINI FORM INPUTS REFINEMENTS */
.donation-close-btn {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 0.95rem !important;
    z-index: 10 !important;
}
.donation-close-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    transform: rotate(90deg) !important;
}

.donation-card {
    max-height: 90vh !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
}
.donation-card::-webkit-scrollbar {
    display: none !important;
}

.form-label-mini {
    display: block !important;
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
}
.form-control-mini {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    transition: all 0.2s ease !important;
}
.form-control-mini:focus {
    outline: none !important;
    border-color: #ffd700 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}
select.form-control-mini option {
    background: #0f121e !important;
    color: #ffffff !important;
}

/* 10. LUXURY BCA CARD DEBIT THEME & CLOSE BUTTON REFINEMENTS */
.donation-close-btn {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 0.9rem !important;
    z-index: 100 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
}
.donation-close-btn:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    transform: rotate(90deg) scale(1.1) !important;
}
.donation-header {
    padding-right: 42px !important;
}

.donation-bank-card {
    position: relative !important;
    background: linear-gradient(135deg, #0d1326 0%, #151e36 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}
.bank-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at top right, rgba(255, 215, 0, 0.06) 0%, transparent 60%) !important;
    pointer-events: none !important;
}
.bank-card-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* 11. SWEETALERT LAYER Z-INDEX OVERRIDE (FORCES POPUPS TO BE IN FRONT OF ALL MODALS) */
.swal2-container {
    z-index: 99999999 !important;
}

.youtube-ad-overlay.hidden,
.donation-modal.hidden {
    display: none !important;
}

/* 12. LUXURIOUS GOLD-THEMED SWEETALERT BORDERS */
.swal-luxury-border {
    border: 2px solid rgba(255, 215, 0, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 215, 0, 0.25) !important;
    background: #0f121f !important;
}
.swal-luxury-border .swal2-title {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
}
.swal-luxury-border .swal2-confirm {
    background-color: #e50914 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4) !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════════
   13. LUXURY SOCIAL SHARE ROW & MODAL (WHATSAPP, FB, IG, TIKTOK)
   ═══════════════════════════════════════════════════════════════ */
.luxury-social-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.share-row-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 2px;
}
.btn-soc-share {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-soc-share:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.btn-soc-share.soc-wa:hover {
    background: rgba(37, 211, 102, 0.18);
    border-color: #25D366;
    color: #25D366;
    box-shadow: 0 0 16px rgba(37, 211, 102, 0.4);
}
.btn-soc-share.soc-fb:hover {
    background: rgba(24, 119, 242, 0.18);
    border-color: #1877F2;
    color: #1877F2;
    box-shadow: 0 0 16px rgba(24, 119, 242, 0.4);
}
.btn-soc-share.soc-ig:hover {
    background: rgba(225, 48, 108, 0.18);
    border-color: #E1306C;
    color: #E1306C;
    box-shadow: 0 0 16px rgba(225, 48, 108, 0.4);
}
.btn-soc-share.soc-tt:hover {
    background: rgba(0, 242, 254, 0.18);
    border-color: #00f2fe;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.4), 0 0 8px rgba(254, 9, 121, 0.3);
}
.btn-soc-share.soc-copy:hover {
    background: rgba(255, 215, 0, 0.18);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}

/* Luxury Share Modal */
.luxury-share-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.luxury-share-modal.hidden {
    display: none !important;
}
.share-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.share-modal-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    background: linear-gradient(145deg, #111422 0%, #090a10 100%);
    border: 1.5px solid rgba(255, 215, 0, 0.35);
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 215, 0, 0.15);
    text-align: center;
    animation: shareModalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes shareModalPop {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.share-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.share-close-btn:hover {
    background: rgba(229, 9, 20, 0.8);
    border-color: #e50914;
    transform: rotate(90deg);
}
.share-glow-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,215,0,0.2) 0%, rgba(229,9,20,0.2) 100%);
    border: 1.5px solid rgba(255, 215, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.share-modal-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.share-modal-header p {
    font-size: 0.82rem;
    color: #ffd700;
    font-weight: 700;
    margin-bottom: 22px;
}
.share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.share-grid-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #e2e8f0;
}
.share-grid-item span {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}
.share-grid-item .share-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: transform 0.25s ease;
}
.share-grid-item:hover {
    transform: translateY(-4px);
}
.share-grid-item:hover .share-icon-wrap {
    transform: scale(1.15);
}
.share-grid-item.item-wa .share-icon-wrap {
    background: rgba(37, 211, 102, 0.15);
    color: #25D366;
    border: 1px solid rgba(37, 211, 102, 0.35);
}
.share-grid-item.item-wa:hover {
    border-color: #25D366;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.3);
}
.share-grid-item.item-fb .share-icon-wrap {
    background: rgba(24, 119, 242, 0.15);
    color: #1877F2;
    border: 1px solid rgba(24, 119, 242, 0.35);
}
.share-grid-item.item-fb:hover {
    border-color: #1877F2;
    box-shadow: 0 0 20px rgba(24, 119, 242, 0.3);
}
.share-grid-item.item-ig .share-icon-wrap {
    background: linear-gradient(45deg, rgba(240, 148, 51, 0.15), rgba(220, 39, 67, 0.15), rgba(188, 24, 136, 0.15));
    color: #E1306C;
    border: 1px solid rgba(225, 48, 108, 0.35);
}
.share-grid-item.item-ig:hover {
    border-color: #E1306C;
    box-shadow: 0 0 20px rgba(225, 48, 108, 0.3);
}
.share-grid-item.item-tt .share-icon-wrap {
    background: rgba(0, 0, 0, 0.5);
    color: #00f2fe;
    border: 1px solid rgba(0, 242, 254, 0.35);
    text-shadow: 1px 1px 4px #fe0979;
}
.share-grid-item.item-tt:hover {
    border-color: #00f2fe;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3), 0 0 10px rgba(254, 9, 121, 0.3);
}
.share-copy-box {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    padding: 4px 6px 4px 14px;
    gap: 8px;
}
.share-copy-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #94a3b8;
    font-size: 0.78rem;
    font-family: monospace;
}
.btn-share-copy {
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
    border: none;
    color: #000000;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}
.btn-share-copy:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════
   NAV SMART TV BUTTON
   ═══════════════════════════════════════════════════════════ */
.nav-smarttv-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 12px;
    background: rgba(6, 182, 212, 0.12);
    border: 1.5px solid rgba(6, 182, 212, 0.45);
    color: #38bdf8; text-decoration: none;
    font-size: 0.82rem; font-weight: 800;
    transition: all 0.25s ease;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}
.nav-smarttv-btn:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: #06b6d4; color: #ffffff;
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.5);
    transform: translateY(-1px);
}
.nav-smarttv-btn i { font-size: 0.95rem; color: #06b6d4; }

/* ═══════════════════════════════════════════════════════════
   CINEMATIC INTRO & SMART TV SUITE SHOWCASE OVERLAY
   ═══════════════════════════════════════════════════════════ */
.cinematic-welcome-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    background: #08090f;
    opacity: 1; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s;
    overflow: hidden;
}
.cinematic-welcome-overlay.hidden {
    opacity: 0; pointer-events: none; visibility: hidden;
}
.welcome-bg-backdrop {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: blur(22px) brightness(0.35);
    transform: scale(1.15);
    transition: background-image 0.6s ease;
    z-index: 1;
}
.welcome-bg-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    z-index: 2; opacity: 0.65;
    transition: opacity 0.5s ease;
}
.welcome-vignette-overlay {
    position: absolute; inset: 0; z-index: 3;
    background: radial-gradient(circle at 60% 40%, rgba(8, 9, 15, 0.3) 0%, rgba(8, 9, 15, 0.85) 75%, #08090f 100%),
                linear-gradient(180deg, rgba(8,9,15,0.7) 0%, rgba(8,9,15,0.2) 50%, rgba(8,9,15,0.95) 100%);
}
.welcome-content-wrapper {
    position: relative; z-index: 5;
    width: 100%; max-width: 920px;
    padding: 20px; margin: 0 auto;
}
.welcome-glass-showcase {
    background: rgba(13, 17, 28, 0.78);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border: 1.5px solid rgba(212, 168, 83, 0.35);
    border-radius: 28px;
    padding: 36px 40px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 45px rgba(212, 168, 83, 0.15);
    position: relative;
}
.welcome-badges-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.w-badge {
    padding: 5px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px;
    display: inline-flex; align-items: center; gap: 5px;
}
.w-badge-gold {
    background: linear-gradient(135deg, #ffd700 0%, #d4a853 100%);
    color: #0a0a0c; box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.w-badge-glass {
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e2e8f0;
}
.w-badge-rating {
    background: rgba(255, 215, 0, 0.15); border: 1px solid rgba(255, 215, 0, 0.35);
    color: #ffd700;
}
.welcome-title {
    font-size: 2.2rem; font-weight: 900; color: #ffffff;
    margin: 0 0 6px 0; letter-spacing: -0.5px; text-transform: uppercase;
    line-height: 1.15;
}
.welcome-subtitle {
    font-size: 0.9rem; font-weight: 700; color: #94a3b8; margin-bottom: 12px;
}
.welcome-desc {
    font-size: 0.92rem; color: #cbd5e1; line-height: 1.6; margin-bottom: 22px;
    max-width: 750px;
}
.welcome-thumbs-container {
    display: flex; gap: 12px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none;
    padding: 4px 2px;
}
.welcome-thumbs-container::-webkit-scrollbar { display: none; }
.welcome-thumb-card {
    width: 60px; height: 88px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    cursor: pointer; position: relative; border: 2.5px solid transparent;
    transition: all 0.25s ease; background: #1a1a24;
}
.welcome-thumb-card img {
    width: 100%; height: 100%; object-fit: cover;
}
.welcome-thumb-card:hover {
    transform: translateY(-4px) scale(1.06); border-color: rgba(255, 215, 0, 0.6);
}
.welcome-thumb-card.active {
    border-color: #ffd700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    transform: translateY(-2px) scale(1.05);
}
.welcome-choice-buttons {
    display: flex; gap: 18px; margin-bottom: 18px;
}
.btn-w-choice {
    flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 20px;
    border-radius: 18px; text-decoration: none; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-w-movies {
    background: rgba(255, 215, 0, 0.08);
    border: 2px solid rgba(255, 215, 0, 0.7);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.25);
    color: #ffd700; text-align: left;
}
.btn-w-movies:hover {
    background: rgba(255, 215, 0, 0.18);
    border-color: #ffd700;
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.5);
    transform: translateY(-3px) scale(1.02);
}
.btn-w-smarttv {
    background: rgba(6, 182, 212, 0.08);
    border: 2px solid #06b6d4;
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.25);
    color: #06b6d4; text-align: left;
}
.btn-w-smarttv:hover {
    background: rgba(6, 182, 212, 0.18);
    border-color: #38bdf8;
    box-shadow: 0 12px 40px rgba(6, 182, 212, 0.5);
    transform: translateY(-3px) scale(1.02);
    color: #38bdf8;
}
.btn-w-icon-circle {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}
.btn-w-movies .btn-w-icon-circle {
    background: #ffd700; color: #0a0a0c;
}
.btn-w-smarttv .btn-w-icon-circle {
    background: rgba(6, 182, 212, 0.2); color: #06b6d4;
}
.btn-w-texts {
    flex: 1; min-width: 0;
}
.btn-w-main {
    display: block; font-size: 1.05rem; font-weight: 900; letter-spacing: 0.5px;
}
.btn-w-movies .btn-w-main { color: #ffd700; }
.btn-w-smarttv .btn-w-main { color: #06b6d4; }
.btn-w-sub {
    display: block; font-size: 0.75rem; color: #94a3b8; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-w-arrow {
    font-size: 1.2rem; color: #ffd700;
}
.btn-w-circle-arrow {
    width: 32px; height: 32px; border-radius: 50%; background: #06b6d4;
    color: #0a0a0c; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.welcome-bottom-prompt {
    text-align: center; color: #64748b; font-size: 0.78rem; font-weight: 800;
    letter-spacing: 1.5px; cursor: pointer; padding-top: 6px;
    animation: promptGlow 2s infinite alternate;
}
@keyframes promptGlow {
    0% { color: #64748b; transform: translateY(0); }
    100% { color: #94a3b8; transform: translateY(3px); }
}

@media (max-width: 768px) {
    .welcome-glass-showcase { padding: 26px 20px; border-radius: 22px; }
    .welcome-title { font-size: 1.6rem; }
    .welcome-subtitle { font-size: 0.82rem; }
    .welcome-desc { font-size: 0.85rem; }
    .welcome-choice-buttons { flex-direction: column; gap: 12px; }
    .btn-w-choice { padding: 14px 16px; }
    .welcome-thumb-card { width: 52px; height: 75px; }
}