/* ============================================================ SMOVIES — DARK NETFLIX STYLE ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap'); /* ── Lite Mode — purane/low-end Android devices ───────────────── Android 5/6 jaisे purane ya kam-RAM/CPU devices par heavy CSS animations/transitions/blur laggy feel dete hain. "lite-mode" class (app.js dwara detect hoke par lagti hai) in sab ko halka/off kar deti hai taaki scrolling aur UI smooth/fast rahe. Functionality same rehti hai — sirf visual motion kam/instant ho jaata hai. */ html.lite-mode *, html.lite-mode *::before, html.lite-mode *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } html.lite-mode .hero-slide, html.lite-mode .card, html.lite-mode .cw-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; } /* ---- Variables ---- */ /* ── SVG Icon System (FA replacement) ───────────────────────── */ svg.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; pointer-events: none; } /* Specific size overrides where FA had different sizes */ .search-ico { width: 14px; height: 14px; } .search-cls { width: 14px; height: 14px; cursor: pointer; } .server-arr { width: 10px; height: 10px; color: rgba(255,255,255,0.35); } .card-rating svg.icon { width: 10px; height: 10px; } .hero-type-pill svg.icon { width: 12px; height: 12px; } :root { --red: #e50914; --red-dark: #b20710; --red-glow: rgba(229, 9, 20, 0.4); --bg: #0a0a0f; --bg2: #141420; --card: #18181f; --border: rgba(255,255,255,0.07); --txt: #ececec; --txt2: #9090a8; --muted: #4a4a60; --nav-h: 60px; --radius: 10px; --ease: cubic-bezier(.4,0,.2,1); } /* ============================================================ Lightweight motion system (safe defaults) - `skeleton-shimmer` provides a subtle, low-cost moving gradient - `.motion-enabled` enables unified transitions on interactive items - `.use-gpu` marks elements that should use hardware-accelerated transforms Respect `prefers-reduced-motion` and low-power modes in JS. ============================================================ */ @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-shimmer { background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.02) 40%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s linear infinite; will-change: background-position; } /* Subtle global transition helpers applied when JS opts-in */ .motion-enabled .card, .motion-enabled button, .motion-enabled .row-arr, .motion-enabled .nav-link, .motion-enabled .modal-box, .motion-enabled .card-thumb, .motion-enabled .card-info, .motion-enabled .card-img-main, .motion-enabled .trend-name { transition: opacity var(--motion-duration, 0.28s) var(--motion-ease, cubic-bezier(.4,0,.2,1)), transform var(--motion-duration, 0.28s) var(--motion-ease, cubic-bezier(.4,0,.2,1)); } /* Use GPU hints only on elements that will animate */ .use-gpu { will-change: transform, opacity; transform: translateZ(0); -webkit-transform: translateZ(0); } /* ---- Reset ---- */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--txt); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display:block; object-fit:cover; } button { cursor:pointer; border:none; background:none; color:inherit; font-family:inherit; } ul { list-style:none; } .hidden { display:none !important; } /* Scrollbar */ ::-webkit-scrollbar { width:4px; height:4px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--red); border-radius:10px; } /* ============================================================ NAVBAR ============================================================ */ .navbar { position: sticky; top: 0; z-index: 200; height: var(--nav-h); background: rgba(10,10,15,0.97); border-bottom: 1px solid var(--border); transition: background .2s; } .navbar.opaque { background: rgba(10,10,15,1); } .nav-inner { max-width: 1800px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; gap: 24px; } /* Logo */ .nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 4px; cursor: pointer; flex-shrink: 0; } .nav-logo-s { color: var(--red); text-shadow: 0 0 24px var(--red-glow); } .nav-logo-rest { color: #fff; } /* Nav links */ .nav-left { display:flex; align-items:center; gap:32px; } .nav-links { display:flex; gap:4px; } .nav-link { padding: 6px 16px; border-radius: 30px; font-size: 14px; font-weight: 500; color: var(--txt2); cursor: pointer; transition: all .25s var(--ease); } @media (hover: hover) and (pointer: fine) { .nav-link:hover { color: var(--txt); background: rgba(255,255,255,0.07); } } .nav-link.active { color: #fff; background: var(--red); font-weight: 600; box-shadow: 0 3px 12px var(--red-glow); } /* Right side */ .nav-right { display:flex; align-items:center; gap:14px; } /* Search */ .search-box { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 30px; padding: 7px 14px; transition: all .25s var(--ease); } .search-box:focus-within { background: rgba(255,255,255,0.1); border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); } .search-ico { color: var(--txt2); font-size:13px; flex-shrink:0; width: 13px; height: 13px; } .search-inp { background: transparent; border: none; outline: none; color: var(--txt); font-family: 'DM Sans', sans-serif; font-size: 14px; width: 200px; } .search-inp::placeholder { color: var(--muted); } .search-cls { color: var(--muted); font-size:13px; cursor:pointer; flex-shrink:0; transition:color .2s; } @media (hover: hover) and (pointer: fine) { .search-cls:hover { color:var(--txt); } } .search-cls.vis { display:block !important; } /* hide X by default */ .search-cls { display:none; } /* ── Notification bell — Telegram / WhatsApp channel links ────────────── */ .bell-wrap { position: relative; } .nav-bell-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 50%; color: var(--txt2); cursor: pointer; transition: all .2s var(--ease); } .nav-bell-btn .icon { font-size: 16px; } @media (hover: hover) and (pointer: fine) { .nav-bell-btn:hover { background: rgba(255,255,255,0.12); color: var(--txt); } } .nav-bell-btn.active { background: var(--red); border-color: var(--red); color: #fff; } .bell-dropdown { display: none; position: absolute; /* Hamesha NEECHE hi khulta hai (server-dropdown jaisa hi consistent pattern) — kabhi upar flip nahi hota. Space kam ho toh khud scroll ho jaata hai. */ top: calc(100% + 10px); bottom: auto; right: 0; min-width: 260px; max-width: 300px; max-height: min(60vh, 320px); overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, #161722 0%, #10111a 100%); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; box-shadow: 0 10px 38px rgba(0,0,0,0.7); z-index: 1000; padding: 6px; } .bell-dropdown.open { display: block; } .bell-link { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 10px; color: var(--txt); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background .15s; } .bell-link + .bell-link { margin-top: 2px; } .bell-link-ico { font-size: 18px; flex-shrink: 0; } #bell-telegram-link .bell-link-ico { color: #29a9eb; } #bell-whatsapp-link .bell-link-ico { color: #25d366; } @media (hover: hover) and (pointer: fine) { .bell-link:hover { background: rgba(255,255,255,0.08); } } /* Dark toggle */ .dark-toggle { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.07); border: 1px solid var(--border); border-radius: 30px; padding: 5px 10px; cursor: pointer; font-size: 11px; color: var(--txt2); position: relative; } .toggle-knob { width: 16px; height: 16px; background: var(--red); border-radius: 50%; transition: transform .4s var(--ease); } /* ============================================================ PAGES ============================================================ */ #app { min-height: calc(100vh - var(--nav-h)); padding-bottom: 60px; } .page { animation: fadeUp .35s var(--ease); } @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } /* Unified page slide animations used by JS (showPage) */ .page { transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); will-change: opacity, transform; } .page-slide-in { animation: pageSlideIn 320ms var(--ease) both; } .page-slide-out { animation: pageSlideOut 240ms var(--ease) both; } @keyframes pageSlideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes pageSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: 88vh; height: 88svh; /* svh ignores on-screen keyboard resize, vh doesn't */ min-height: 520px; overflow: hidden; background: #000; } /* Individual slide */ .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center top; opacity: 0; transform: translateX(8px) scale(1); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); display: flex; align-items: flex-end; /* Overlays */ background-blend-mode: normal; } .hero-slide.active { opacity:1; z-index:1; transform: translateX(0); } /* Parallax: hero content slightly lags behind background */ .hero-slide .hero-content { transform: translateZ(0); transition: transform 1.1s var(--ease); } .hero-slide.active .hero-content { transform: translateX(0); } /* Hero progress fill smoother */ .hero-prog-fill { transition: width 0.2s linear; } /* Gradient overlay (pseudo) */ .hero-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,15,.94) 0%, rgba(10,10,15,.5) 50%, transparent 100%), linear-gradient(to top, rgba(10,10,15,1.0) 0%, transparent 55%); } /* Slide content */ .hero-content { position: relative; z-index: 2; padding: 0 64px 72px; max-width: 640px; } .hero-badge { display: inline-block !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; margin: 0 0 14px 0 !important; padding: 4px 12px !important; border-radius: 4px !important; background: var(--red) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; box-sizing: border-box !important; vertical-align: middle !important; overflow: visible !important; position: relative !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 0 !important; } .hero-badge::before, .hero-badge::after, .hero-badge i, .hero-badge span { display: none !important; } .hero-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 6.5vw, 82px); line-height: .96; letter-spacing: 2px; margin-bottom: 14px; text-shadow: 0 4px 24px rgba(0,0,0,.8); } .hero-logo { display: block; max-width: min(440px, 70vw); max-height: 120px; width: auto; height: auto; object-fit: contain; margin-bottom: 14px; filter: drop-shadow(0 4px 20px rgba(0,0,0,.7)); } @media (min-width: 900px) { .hero-logo { max-width: min(560px, 74vw); max-height: 140px; margin-bottom: 18px; } } @media (min-width: 1400px) { .hero-logo { max-width: min(640px, 74vw); max-height: 160px; } } .hero-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .hero-meta span { font-size: 13px; color: var(--txt2); display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); padding: 4px 12px; border-radius: 999px; } .hero-meta span i { color: var(--red); font-size:11px; } .hero-desc { font-size: 15px; color: var(--txt2); line-height: 1.7; margin-bottom: 26px; max-width: 500px; } .hero-actions { display:flex; gap:12px; flex-wrap:wrap; } .btn-hero-watch { display: flex; align-items: center; gap: 10px; padding: 13px 32px; background: var(--red); color: #fff; font-size: 15px; font-weight: 700; border-radius: var(--radius); box-shadow: 0 6px 20px var(--red-glow); transition: all .25s var(--ease); } @media (hover: hover) and (pointer: fine) { .btn-hero-watch:hover { background:var(--red-dark); transform:translateY(-2px); box-shadow:0 10px 28px var(--red-glow); } } .btn-hero-info { display: flex; align-items: center; gap: 10px; padding: 13px 26px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 15px; font-weight: 600; border-radius: var(--radius); transition: all .25s var(--ease); } @media (hover: hover) and (pointer: fine) { .btn-hero-info:hover { background:rgba(255,255,255,.22); } } /* Hero skeleton */ .hero-loading { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 64px 72px; background: linear-gradient(135deg, #12121c, #1a1a2e); } .hero-sk-line { background: rgba(255,255,255,0.06); border-radius: 6px; animation: pulse 1.6s ease infinite; } .w60 { width: 60%; } .w40 { width: 40%; } .w30 { width: 30%; } .w20 { width: 140px; } .h50 { height: 60px; } .h16 { height: 16px; } .h44 { height: 44px; } .mt12 { margin-top: 12px; } .mt8 { margin-top: 8px; } .mt24 { margin-top: 24px; } .br8 { border-radius: 8px; } @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.8} } /* Hero arrows */ .hero-btn-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all .25s var(--ease); opacity: 0; } .hero:hover .hero-btn-arrow { opacity:1; } /* Hide row scroll arrows inside hero — hero has its own arrows */ .hero .row-arr { display: none !important; } @media (hover: hover) and (pointer: fine) { .hero-btn-arrow:hover { background:var(--red); border-color:var(--red); transform:translateY(-50%) scale(1.08); } } .hero-btn-arrow.left { left:20px; } .hero-btn-arrow.right { right:20px; } /* Dots */ .hero-dots-wrap { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; transition: all .3s var(--ease); border: none; } .hero-dot.active { background: var(--red); width: 26px; border-radius: 4px; box-shadow: 0 0 8px var(--red-glow); } /* Progress bar */ .hero-prog-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.08); z-index: 10; } .hero-prog-fill { height: 100%; background: var(--red); width: 0%; transition: width .15s linear; box-shadow: 0 0 6px var(--red-glow); } /* ============================================================ ROWS ============================================================ */ .row-block { padding: 12px 0 28px; content-visibility: auto; contain-intrinsic-size: 0 320px; } .row-head { display: flex; align-items: center; justify-content: space-between; padding: 0 48px; margin-bottom: 14px; } .row-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 3px; color: var(--txt); display: flex; align-items: center; gap: 10px; } .row-title::before { content: ''; display: inline-block; width: 4px; height: 22px; background: var(--red); border-radius: 4px; box-shadow: 0 0 10px var(--red-glow); } .see-all { font-size: 13px; color: var(--txt2); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color .2s; } @media (hover: hover) and (pointer: fine) { .see-all:hover { color: var(--red); } } /* Row scrollable area */ .row-outer { position: relative; padding: 0 48px; display: flex; align-items: center; gap: 0; } .row-track-wrap { flex: 1; overflow: hidden; } .row-track { display: flex; gap: 14px; transition: transform .45s var(--ease); padding: 10px 2px 14px; /* room for scale on hover */ } /* Row arrows */ .row-arr { width: 40px; height: 40px; border-radius: 50%; background: rgba(10,10,15,.92); border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 5; transition: all .25s var(--ease); opacity: 0; } .row-outer:hover .row-arr { opacity: 1; } @media (hover: hover) and (pointer: fine) { .row-arr:hover { background: var(--red); border-color: var(--red); box-shadow: 0 0 14px var(--red-glow); } } .row-arr.r-prev { margin-right: 10px; } .row-arr.r-next { margin-left: 10px; } .row-arr:disabled { opacity: 0 !important; pointer-events: none; } /* ============================================================ CARD ============================================================ */ .card { flex: 0 0 auto; width: 175px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; } .card-thumb { position: relative; width: 100%; aspect-ratio: 2/3; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.5); /* transition sirf hover capable devices pe — mobile pe battery waste nahi */ } @media (hover: hover) and (pointer: fine) { .card-thumb { transition: transform .3s var(--ease), box-shadow .3s var(--ease); } } @media (hover: hover) and (pointer: fine) { .card:hover .card-thumb { transform: scale(1.045) translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.7), 0 0 0 2px var(--red); z-index: 10; } } .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } @media (hover: hover) and (pointer: fine) { .card:hover .card-thumb img { transform: scale(1.05); } } /* Micro interactions: gentle scale on focus/active for touch & hover */ .card, .btn-hero-watch, .btn-hero-info, .server-btn, .ott-btn { transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); } @media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-4px) scale(1.03); } .btn-hero-watch:hover, .btn-hero-info:hover, .ott-btn:hover { transform: translateY(-3px) scale(1.02); } } /* Touch / click feedback */ .card:active, .card:focus { transform: scale(1.02); } .btn-hero-watch:active, .btn-hero-info:active { transform: scale(0.99); } /* Type badge */ .card-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(0,0,0,.72); border: 1px solid rgba(229,9,20,.35); color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; } /* Featured episode badge — bottom, original style, slightly higher */ .card-ep-badge { position: absolute; bottom: 46px; left: 0; right: 0; z-index: 3; background: rgba(0,0,0,.72); border-top: 1px solid rgba(37,99,235,.5); border-bottom: 1px solid rgba(37,99,235,.5); color: #3b82f6; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 8px; text-align: center; } /* Info — image ke neeche, hamesha visible (hover ki zaroorat nahi) */ .card-info { padding: 0 1px; } .card-title { font-size: 13px; font-weight: 600; color: #e8edf7; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s var(--ease), transform .3s var(--ease); } .card-year { font-size: 11px; color: var(--txt2, #9090a8); margin-top: 2px; transition: color .3s var(--ease); } @media (hover: hover) and (pointer: fine) { .card:hover .card-title { color: #ff6b6b; text-shadow: 0 0 14px rgba(255,107,107,.5); transform: translateX(2px); } .card:hover .card-year { color: #fff; } } /* Empty row */ .row-empty { color: var(--muted); font-size: 14px; padding: 30px 0; } /* ============================================================ SEARCH PAGE ============================================================ */ .page-heading { display: flex; align-items: center; gap: 14px; padding: 32px 48px 4px; } .result-count { font-size:14px; color:var(--txt2); } .grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 16px; padding: 20px 48px 10px; } .grid-4 .card { width:100%; } .empty-msg { padding:70px 48px; text-align:center; color:var(--muted); font-size:16px; } /* ============================================================ DETAIL MODAL ============================================================ */ .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .modal-bg.open { opacity: 1; pointer-events: auto; } .modal-bg.open .modal-box { transform: translateY(0); } .modal-box { background: var(--card); border-radius: 18px; width: 100%; max-width: 700px; max-height: 88vh; overflow-y: auto; position: relative; box-shadow: 0 28px 70px rgba(0,0,0,.85); transform: translateY(28px); transition: transform .3s var(--ease); } .modal-box::-webkit-scrollbar { width:4px; } .modal-box::-webkit-scrollbar-thumb { background:var(--red); border-radius:10px; } /* Close btn */ .modal-close { position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.65); border: 1px solid var(--border); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all .2s; } @media (hover: hover) and (pointer: fine) { .modal-close:hover { background:var(--red); border-color:var(--red); } } /* Banner */ .modal-banner { position: relative; height: 280px; border-radius: 18px 18px 0 0; overflow: hidden; } .modal-thumb { width:100%; height:100%; object-fit:cover; } .modal-banner-fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--card) 0%, transparent 60%); } /* Body */ .modal-body { padding: 0 30px 32px; } .modal-tags { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .tag-type { background: var(--red); color:#fff; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:4px; } .tag-year { font-size:13px; color:var(--txt2); } .tag-rating { font-size:13px; color:#f1c40f; } .tag-rating::before { content:'★ '; } .modal-title { font-family: 'Bebas Neue', sans-serif; font-size: 38px; letter-spacing:2px; line-height:1; margin-bottom:10px; } .modal-desc { font-size:15px; color:var(--txt2); line-height:1.72; margin-bottom:22px; } /* Watch button */ .btn-watch { display: inline-flex; align-items: center; gap:10px; padding: 12px 32px; background: var(--red); color:#fff; font-size:15px; font-weight:700; border-radius: var(--radius); box-shadow: 0 5px 18px var(--red-glow); transition: all .25s var(--ease); } @media (hover: hover) and (pointer: fine) { .btn-watch:hover { background:var(--red-dark); transform:translateY(-2px); box-shadow:0 9px 26px var(--red-glow); } } /* Episodes */ .ep-area { margin-top: 24px; } .season-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .s-tab { padding: 6px 18px; border-radius: 30px; border: 1px solid var(--border); color: var(--txt2); font-size:13px; font-weight:600; cursor:pointer; transition: all .2s; } @media (hover: hover) and (pointer: fine) { .s-tab:hover { color:#fff; border-color:rgba(255,255,255,.3); } } .s-tab.active { background:var(--red); color:#fff; border-color:var(--red); } .ep-list { display:flex; flex-direction:column; gap:4px; } .ep-row { display: flex; align-items:center; gap:14px; padding: 11px 14px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: all .2s; } @media (hover: hover) and (pointer: fine) { .ep-row:hover { background:rgba(255,255,255,.05); border-color:var(--border); } } .ep-num { width:34px; height:34px; border-radius:8px; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--txt2); flex-shrink:0; } .ep-name { font-size:14px; font-weight:600; flex:1; } .ep-icon { color:var(--red); font-size:12px; } /* ============================================================ LIGHT MODE (Day mode) ============================================================ */ body.light { --bg: #f2f2f7; --bg2: #e5e5ea; --card: #ffffff; --txt: #1c1c1e; --txt2: #48484a; --muted: #8e8e93; --border:rgba(0,0,0,0.1); --red-glow: rgba(229,9,20,0.25); } body.light .navbar { background: rgba(242,242,247,0.92); border-bottom-color: rgba(0,0,0,0.1); } body.light .nav-logo { text-shadow: none; } body.light .nav-logo-rest { color: var(--txt); } body.light .hero-loading { background: linear-gradient(135deg,#dde,#c8c8d8); } body.light .hero-sk-line { background: rgba(0,0,0,0.08); } body.light .card-title { color: var(--txt); } body.light .search-box { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); } body.light .search-inp { color: var(--txt); } body.light .search-inp::placeholder { color: var(--muted); } body.light .search-ico { color: var(--muted); } body.light .dark-toggle { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.1); } body.light .row-title { color: var(--txt); } body.light .see-all { color: var(--txt2); } body.light .row-arr { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.12); color: #1c1c1e; } @media (hover: hover) and (pointer: fine) { body.light .row-arr:hover { background: var(--red); color: #fff; border-color: var(--red); } } body.light .card { box-shadow: 0 4px 14px rgba(0,0,0,0.15); } @media (hover: hover) and (pointer: fine) { body.light .card:hover { box-shadow: 0 16px 36px rgba(0,0,0,0.25), 0 0 0 2px var(--red); } } body.light .detail-page { background: var(--bg); } body.light .dp-body { background: var(--bg); } body.light .dp-title { color: var(--txt); } body.light .dp-desc { color: var(--txt2); } body.light .dp-badge { background: var(--red); } body.light .dp-year, body.light .dp-rating { color: var(--txt2); } body.light .dp-s-tab { border-color: rgba(0,0,0,0.12); color: var(--txt2); } body.light .dp-s-tab.active { background: var(--red); color: #fff; } @media (hover: hover) and (pointer: fine) { body.light .dp-ep-row:hover { background: rgba(0,0,0,0.04); } } body.light .dp-ep-name { color: var(--txt); } body.light .cw-info { background: #fff; border-top-color: rgba(0,0,0,0.08); } body.light .cw-name { color: var(--txt); } body.light .cw-sub { color: var(--txt2); } body.light .result-count { color: var(--txt2); } body.light .empty-msg { color: var(--muted); } /* Dark toggle icon colors in light mode */ body.light .dark-toggle i.fa-moon { color: #8e8e93; } body.light .dark-toggle i.fa-sun { color: #f39c12; } body.light .toggle-knob { background: #f39c12; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1024px) { .nav-inner { padding:0 24px; } .row-head, .row-outer, .page-heading, .grid-4 { padding-left:24px; padding-right:24px; } .hero-content { padding:0 36px 56px; } .hero-loading { padding:0 36px 56px; } } @media (max-width:768px) { :root { --nav-h:54px; } .nav-links { display:none; } .hero { height:68vh; height:68svh; min-height:360px; } /* Mobile pe hero tall-narrow hota hai — "center top" se image ka important hissa (chehra/title art) neeche cut ho jaata tha. "center center" se image hamesha visually centered crop hoti hai. */ .hero-slide { background-position: center center; } .hero-content { padding:0 20px 44px; } .hero-loading { padding:0 20px 44px; } .hero-desc { display:none; } .hero-title { font-size:36px; } .hero-logo { max-height: 80px; max-width: min(320px, 75vw); } .row-head, .row-outer, .page-heading, .grid-4 { padding-left:16px; padding-right:16px; } .card { width:130px; } .modal-banner { height:200px; } .modal-body { padding:0 18px 24px; } .modal-title { font-size:28px; } /* ── Hide row arrows on mobile — user scrolls with touch ── */ .row-arr { display: none !important; } /* ── Row: enable touch scroll on mobile ── */ .row-outer { padding: 0 !important; } .row-track-wrap { overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .row-track-wrap::-webkit-scrollbar { display: none; } .row-track { transform: none !important; padding-left: 16px; padding-right: 16px; } /* Card pe overflow visible — vertical scroll block na ho ── */ .card { overflow: visible; } .card img { border-radius: var(--radius); } /* ── CW cards — start from left, same as other rows ── */ .cw-card { width: 160px; flex-shrink: 0; } .cw-thumb-wrap { height: 96px; } } @media (max-width:480px) { .card { width:115px; } } /* ============================================================ CONTINUE WATCHING ============================================================ */ .cw-title::before { background: #f1c40f !important; box-shadow: 0 0 10px rgba(241,196,15,0.5) !important; } .cw-clear { margin-left: auto; font-size: 12px; color: var(--txt2); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color .2s; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); } @media (hover: hover) and (pointer: fine) { .cw-clear:hover { color: var(--red); border-color: var(--red); } } /* CW Card — wider to show progress bar */ .cw-card { flex: 0 0 auto; width: 220px; position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } @media (hover: hover) and (pointer: fine) { .cw-card:hover { transform: scale(1.06) translateY(-5px); box-shadow: 0 14px 32px rgba(0,0,0,.7), 0 0 0 2px var(--red); z-index: 10; } } .cw-thumb-wrap { position: relative; width: 100%; height: 130px; } .cw-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; } .cw-thumb-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 60%); } /* Progress bar on thumbnail */ .cw-prog-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.2); z-index: 2; } .cw-prog-fill { height: 100%; background: var(--red); border-radius: 0 2px 2px 0; box-shadow: 0 0 6px var(--red-glow); transition: width .3s; } /* Resume play button */ .cw-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 44px; height: 44px; border-radius: 50%; background: rgba(229,9,20,.9); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; padding-left: 3px; z-index: 3; transition: transform .3s var(--ease); } @media (hover: hover) and (pointer: fine) { .cw-card:hover .cw-play-btn { transform: translate(-50%,-50%) scale(1); } } /* Remove button */ .cw-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.7); font-size: 11px; display: flex; align-items: center; justify-content: center; z-index: 4; opacity: 0; transition: all .2s; } @media (hover: hover) and (pointer: fine) { .cw-card:hover .cw-remove { opacity: 1; } } @media (hover: hover) and (pointer: fine) { .cw-remove:hover { background: var(--red); border-color: var(--red); color: #fff; } } /* Info below thumb */ .cw-info { background: var(--card); padding: 10px 12px 12px; border-top: 1px solid var(--border); } .cw-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .cw-sub { font-size: 11px; color: var(--txt2); display: flex; justify-content: space-between; align-items: center; } .cw-time { color: var(--red); font-weight: 600; font-size: 11px; } /* ============================================================ DETAIL FULL PAGE ============================================================ */ .detail-page { min-height: calc(100vh - var(--nav-h)); padding-bottom: 60px; } .dp-hero { position: relative; height: 55vh; min-height: 360px; overflow: hidden; } .dp-bg { width:100%; height:100%; object-fit:cover; filter:brightness(.55); } .dp-hero-grad { position:absolute; inset:0; background: linear-gradient(to bottom, transparent 30%, var(--bg) 100%), linear-gradient(to right, rgba(0,0,0,.5) 0%, transparent 60%); } .dp-back { position:absolute; top:20px; left:24px; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.25s; z-index:5; } @media (hover: hover) and (pointer: fine) { .dp-back:hover { background:var(--red); border-color:var(--red); } } @media (max-width:699px) { .dp-back { display:none !important; } .wl-back-btn { display:none !important; } } .dp-body { display: flex; gap: 36px; padding: 0 48px; margin-top: -80px; position: relative; z-index: 2; align-items: flex-start; } .dp-left { flex-shrink:0; } .dp-poster { width: 180px; height: 260px; object-fit: cover; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.7); border: 2px solid rgba(255,255,255,.08); } .dp-right { flex:1; padding-top: 90px; } .dp-tags { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .dp-badge { background:var(--red); color:#fff; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:4px; } .dp-year { font-size:13px; color:var(--txt2); } .dp-rating { font-size:13px; color:#f1c40f; } .dp-rating::before { content:'★ '; } .dp-languages { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--txt2); margin-bottom: 14px; margin-top: -4px; min-width: 0; } .dp-languages .icon { color: var(--txt2); font-size: 12px; flex-shrink: 0; } .dp-lang-label { color: var(--txt2); font-weight: 600; margin-right: 2px; flex-shrink: 0; } .dp-lang-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; width: 100%; } .dp-lang-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 0; flex: 0 0 auto; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; line-height: 1.2; white-space: nowrap; } @media (min-width: 900px) { .dp-languages { margin-top: 0; gap: 10px; } .dp-lang-list { width: auto; max-width: 100%; } .dp-lang-chip { padding: 4px 12px; font-size: 13px; } } @media (max-width: 600px) { .dp-languages { gap: 6px; align-items: flex-start; } .dp-lang-list { gap: 5px; } .dp-lang-chip { font-size: 11px; padding: 4px 9px; } } @media (min-width: 1200px) { .dp-lang-list { gap: 8px; } .dp-lang-chip { padding: 5px 12px; } } @media (min-width: 1400px) { .dp-languages { margin-bottom: 18px; } } .dp-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(32px,5vw,58px); letter-spacing:2px; line-height:1; margin-bottom:14px; } .dp-desc { font-size:15px; color:var(--txt2); line-height:1.75; margin-bottom:24px; max-width:680px; } .dp-play-btn { display:inline-flex; align-items:center; gap:10px; padding:13px 36px; background:var(--red); color:#fff; font-size:15px; font-weight:700; border:none; border-radius:var(--radius); cursor:pointer; font-family:'DM Sans',sans-serif; box-shadow:0 6px 20px var(--red-glow); transition:all .25s var(--ease); } .dp-action-controls { display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .dp-action-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .dp-season-mobile-control { position:relative; display:flex; align-items:center; min-height:44px; min-width:180px; flex:0 1 auto; width:auto; max-width:min(360px, 100%); } .dp-season-static { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.16); background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.05) 100%); color:var(--txt); font-size:13px; font-weight:600; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); } .dp-season-select-btn { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.16); background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.05) 100%); color:var(--txt); font-size:13px; font-weight:600; cursor:pointer; transition:background .2s, border-color .2s, box-shadow .2s; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); } .dp-season-select-btn:hover, .dp-season-select-btn:focus-visible, .dp-season-select-btn.tv-hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.24); box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 0 0 2px rgba(229,9,20,0.14); } .dp-season-select-btn.open { border-color:rgba(229,9,20,0.45); background:rgba(229,9,20,0.12); } .dp-season-select-menu { display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:1200; padding:8px; border-radius:14px; border:1px solid rgba(255,255,255,0.16); background:linear-gradient(180deg, #171a24 0%, #11131b 100%); box-shadow:0 18px 50px rgba(0,0,0,0.6); overscroll-behavior:contain; touch-action:pan-y; /* Bohot saare seasons honay par poora menu screen se bahar na chala jaaye — outer box ka size fix rakho, scroll andar wali .dp-season-options-scroll list mein ho (server dropdown jaisa pattern). */ overflow:hidden; max-height: 320px; flex-direction:column; } .dp-season-select-menu.open { display:flex; } /* Inner scrollable options list — outer box fixed, sirf yeh scroll hota hai */ .dp-season-options-scroll { overflow-y:auto; overflow-x:hidden; max-height:260px; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .dp-season-options-scroll::-webkit-scrollbar { width:6px; } .dp-season-options-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.18); border-radius:6px; } .dp-season-option { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; color:var(--txt); font-size:12px; font-weight:600; transition:background .16s, color .16s, border-color .16s, transform .16s; white-space:normal; line-height:1.35; border:1px solid transparent; } .dp-season-option:hover, .dp-season-option:focus-visible, .dp-season-option.tv-hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.12); } .dp-season-option.active { background:rgba(229,9,20,0.14); color:#fff; border-color:rgba(229,9,20,0.22); } .dp-season-option-badge { width:24px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.75); font-size:11px; font-weight:700; flex-shrink:0; } .dp-season-option.active .dp-season-option-badge { background:var(--red); color:#fff; } body.tv-mode .dp-season-select-btn.tv-hover, body.tv-mode .dp-season-select-btn:focus-visible { border-color:var(--focus-color); box-shadow:0 0 0 2px var(--focus-color), 0 0 0 5px rgba(229,9,20,0.18), 0 0 18px var(--focus-glow) !important; } body.tv-mode .dp-season-option.tv-hover, body.tv-mode .dp-season-option:focus-visible { background:rgba(229,9,20,0.16); border-color:var(--focus-color); box-shadow:0 0 0 1px var(--focus-color); } @media (hover: hover) and (pointer: fine) { .dp-play-btn:hover { background:var(--red-dark); transform:translateY(-2px); box-shadow:0 10px 28px var(--red-glow); } } /* Season tabs in detail */ .dp-season-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; margin-top:8px; } .dp-s-tab { padding:6px 18px; border-radius:30px; border:1px solid var(--border); color:var(--txt2); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; } @media (hover: hover) and (pointer: fine) { .dp-s-tab:hover { color:#fff; border-color:rgba(255,255,255,.3); } } .dp-s-tab.active { background:var(--red); color:#fff; border-color:var(--red); } /* Mobile: 3 se zyada seasons hone par dropdown (pills ki jagah) */ .dp-season-tabs--dropdown { display: block; } .dp-s-select { width: 100%; max-width: 220px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg, #1a1a22); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239090a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .dp-s-select:focus { outline: none; border-color: var(--red); } /* Custom season dropdown — server dropdown jaisa */ .dp-season-wrap { position: relative; display: inline-flex; } .dp-season-btn { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; height: 40px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: var(--txt); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; white-space: nowrap; font-family: inherit; } @media (hover: hover) and (pointer: fine) { .dp-season-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); } } .dp-season-btn.open { border-color: var(--red); background: rgba(229,9,20,0.08); } .dp-season-arr { font-size: 11px; color: var(--txt2); transition: transform .2s; } .dp-season-btn.open .dp-season-arr { transform: rotate(180deg); } .dp-season-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; max-height: 240px; overflow-y: auto; background: #16161f; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.8); z-index: 1000; overflow-y: auto; } .dp-season-dropdown.open { display: block; animation: dropDown .18s var(--ease) both; } @keyframes dropDown { from { opacity:0; transform: translateY(-6px) scale(0.97); } to { opacity:1; transform: translateY(0) scale(1); } } .dp-season-opt { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background .15s; } @media (hover: hover) and (pointer: fine) { .dp-season-opt:hover { background: rgba(255,255,255,0.06); } } .dp-season-opt.active { background: rgba(229,9,20,0.12); } .dp-season-opt-num { width: 22px; height: 22px; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--txt2); flex-shrink: 0; } .dp-season-opt.active .dp-season-opt-num { background: var(--red); color: #fff; } .dp-season-opt-name { font-size: 13px; font-weight: 500; } .dp-ep-list { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; overflow-x: hidden; /* overscroll-behavior: auto (default) — list ke top/bottom (ep 1 / last ep) pe pahunchne ke baad scroll gesture page ko hand-off ho jaaye, "contain" use nahi karte kyunki wo scroll ko list ke andar hi trap kar deta tha, jisse last/first episode pe pahunchne par upar/neeche site scroll nahi hoti thi. */ overscroll-behavior: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .dp-ep-list::-webkit-scrollbar { width: 4px; } .dp-ep-list::-webkit-scrollbar-thumb { background: var(--red); border-radius: 10px; } /* Fix 4: TV mode — episode list must scroll with D-pad, give it full height */ body.tv-mode .dp-ep-list { max-height: min(60vh, 520px); overflow-y: scroll; scroll-behavior: auto; /* instant scroll for D-pad responsiveness */ } .dp-ep-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:all .2s; } @media (hover: hover) and (pointer: fine) { .dp-ep-row:hover { background:rgba(255,255,255,.05); border-color:var(--border); } } .dp-ep-row.active-ep { background:rgba(229,9,20,.1); border-color:rgba(229,9,20,.35); } .dp-ep-row.active-ep .dp-ep-name { color:var(--red); } /* Touch/click feedback — mobile pe :hover trigger nahi hota, isliye :active alag se chahiye taaki tap karne par turant feel ho */ .dp-ep-row:active { background:rgba(255,255,255,.07); transform: scale(0.98); } .dp-ep-sentinel { width:100%; height:1px; } .search-sentinel { grid-column: 1 / -1; width:100%; height:1px; } .dp-ep-num { width:34px; height:34px; border-radius:8px; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--txt2); flex-shrink:0; } .dp-ep-name { font-size:14px; font-weight:600; flex:1; } .dp-ep-play { color:var(--red); font-size:12px; } /* More like this */ .dp-more { padding: 40px 48px 0; } .grid-more { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin-top:4px; } .grid-more .card { width:100%; } /* ── Responsive for detail ── */ @media (max-width:768px) { .dp-hero { height: 46vh; min-height: 300px; } .dp-body { flex-direction:column; padding:0 16px; margin-top:-28px; gap:18px; } .dp-left { width: 100%; } .dp-poster { width:120px; height:176px; } .dp-right { padding-top:0; } .dp-title { font-size:28px; line-height:1.05; margin-bottom:10px; } .dp-desc { font-size:14px; line-height:1.65; margin-bottom:16px; } .dp-meta-row { gap:6px; margin:2px 0 8px; } .dp-meta-chip { font-size:11px; padding:3px 8px; } .dp-action-controls { width:100%; display:flex; flex-direction:column; gap:8px; align-items:stretch; } .dp-action-row { width:100%; display:flex; gap:8px; align-items:center; } .dp-play-btn { width:100%; justify-content:center; padding:10px 16px; min-height:42px; font-size:14px; } .dp-season-mobile-control { flex:1 1 0; min-width:0; max-width:none; } .dp-action-row.dp-action-row--movie { gap:8px; } .dp-action-row.dp-action-row--movie .server-wrap { flex:1 1 0; min-width:0; width:100%; } .dp-action-row.dp-action-row--movie .server-btn { width:100%; justify-content:center; height:40px; padding:0 10px; font-size:12px; gap:6px; } .dp-action-row.dp-action-row--movie .dp-icon-btn { flex:0 0 40px; width:40px; height:40px; } .dp-icon-btn { width:40px; height:40px; } .dp-season-tabs { margin-top: 10px; } .dp-ep-row { padding:10px 10px; gap:10px; } .dp-more { padding:32px 16px 0; } .grid-more { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); } } /* ============================================================ MOBILE RESPONSIVE — FULL OVERHAUL ============================================================ */ /* ── Navbar mobile ── */ @media (max-width: 768px) { :root { --nav-h: 52px; } .nav-inner { padding: 0 14px; gap: 8px; } .nav-links { display: none; } .nav-logo { font-size: 26px; } /* nav-right ke fixed-size icons (bell/watchlist/profile) hamesha apni poori size mein visible rahein — sirf search-box flexible hoke jitni space bache utni le, taaki koi bhi icon screen ke bahar cut na ho. */ .nav-right { gap: 8px; min-width: 0; } .search-box { flex: 1 1 auto; min-width: 0; max-width: 190px; padding: 6px 10px; } .search-inp { width: 100%; min-width: 0; font-size: 13px; } .nav-bell-btn { width: 34px; height: 34px; flex-shrink: 0; } .bell-wrap { flex-shrink: 0; } .nav-watchlist-btn { flex-shrink: 0; } .fake-profile { flex-shrink: 0; } .bell-dropdown { min-width: 220px; max-width: calc(100vw - 28px); } .dark-toggle { padding: 4px 8px; gap: 4px; } /* Hero — svh use karo, vh/vmax NAHI (vmax keyboard khulne pe viewport ke saath badalta hai, jisse hero squish/stretch hota tha). svh on-screen keyboard resize ko ignore karta hai. */ .hero { height: 62vh; height: 62svh; min-height: 300px; max-height: 520px; } .hero-content { padding: 0 16px 52px; } .hero-loading { padding: 0 16px 52px; } .hero-title { font-size: clamp(28px, 8vw, 44px); } .hero-desc { display: none; } .hero-badge { display: inline-block !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 0 14px 0 !important; padding: 4px 12px !important; text-align: center !important; justify-content: center !important; align-items: center !important; } .hero-meta { gap: 8px; } .hero-meta span { font-size: 12px; } .btn-hero-watch { padding: 10px 22px; font-size: 14px; } .btn-hero-info { padding: 10px 18px; font-size: 14px; } /* Mobile pe hero arrows hide — swipe se navigate hoga */ .hero-btn-arrow { display: none !important; } /* Rows */ .row-head { padding: 0 14px; } .row-outer { padding: 0 14px; } .row-title { font-size: 17px; letter-spacing: 2px; } .row-arr { opacity: 1 !important; width: 32px; height: 32px; font-size: 12px; } .r-prev { margin-right: 6px; } .r-next { margin-left: 6px; } /* Cards */ .card { width: 110px; } .card-thumb { border-radius: 8px; } .card-title { font-size: 12px; } .card-year { font-size: 10px; } .row-track { gap: 10px; } /* CW cards */ .cw-card { width: 170px; } .cw-thumb-wrap { height: 100px; } /* Search grid */ .grid-4, .search-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; padding: 14px; } /* Detail page */ .dp-hero { height: 44vw; min-height: 200px; } .dp-body { flex-direction: column; padding: 0 14px; margin-top: -30px; gap: 14px; } .dp-left { display: flex; justify-content: center; } .dp-poster { width: 110px; height: 160px; border-radius: 8px; } .dp-right { padding-top: 0; } .dp-title { font-size: clamp(24px, 7vw, 38px); } .dp-desc { font-size: 14px; } .dp-play-btn { padding: 11px 26px; font-size: 14px; } .dp-more { padding: 28px 14px 0; } .grid-more { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } /* Page heading */ .page-heading { padding: 20px 14px 0; } .empty-msg { padding: 50px 14px; font-size: 14px; } } @media (max-width: 400px) { .card { width: 95px; } .grid-4, .search-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; } .search-box { max-width: 120px; } .hero-title { font-size: 26px; } .hero-logo { max-height: 58px; max-width: min(240px, 78vw); } } /* ── Touch: remove HOVER effects on touch devices (animations/spinners affect nahi karna) ── */ @media (hover: none), (pointer: coarse) { * { -webkit-tap-highlight-color: transparent; } /* Pehle yahan saari transitions/animations globally 0.01ms kar di jaati thi — isse hero slide fade, page-slide-in, aur loading spinners (jo animation pe depend karte hain) sab mobile pe freeze ho jaate the. Ab sirf un classes ki transition hata rahe hain jo specifically :hover ke liye thi — baaki animations (spin, fade, slide) normal speed pe chalti rahengi. */ .row-arr { opacity: 1 !important; } .cw-remove { opacity: 1; } .hero:hover .hero-btn-arrow { opacity: 0 !important; } .card, .cw-card, .dive-card, .trend-card, .ott-btn, .nav-link, .btn-hero-watch, .btn-hero-info, .hero-btn-arrow, .row-arr, .see-all, .dp-back, .dp-play-btn, .dp-resume-btn, .dp-s-tab, .dp-season-btn, .dp-ep-row, .server-btn, .server-opt, .sf-genre-chip, .sf-year-chip, .dp-genre-chip, .dp-icon-btn, .nav-watchlist-btn, .wl-back-btn, .wl-clear-btn, .wl-card-remove, .cw-remove, .confirm-cancel, .confirm-ok, .row-retry-btn, .nav-watchlist-btn, .server-btn, .wl-ctrl-btn { transition-property: none !important; } .card:hover, .card:active, .card:focus-visible, .cw-card:hover, .cw-card:active, .cw-card:focus-visible, .dive-card:hover, .dive-card:active, .dive-card:focus-visible, .trend-card:hover, .trend-card:active, .trend-card:focus-visible { transform: none !important; box-shadow: none !important; filter: none !important; text-shadow: none !important; background: none !important; } .card:hover .card-thumb, .card:hover .card-thumb img, .cw-card:hover .cw-play-btn, .dive-card:hover .dive-thumb, .dive-card:hover .dive-thumb img, .trend-card:hover .trend-cover, .dive-card:hover .dive-play-ico, .trend-card:hover .trend-cover, .dive-card:hover .dive-thumb, .trend-card:hover .trend-cover { transform: none !important; } .card:hover .card-title, .card:hover .card-year, .dive-card:hover .dive-ep, .trend-card:hover .trend-name { color: inherit !important; transform: none !important; text-shadow: none !important; } } /* ============================================================ TV / D-PAD FOCUS STYLES ============================================================ */ :root { --focus-color: #e50914; --focus-glow: rgba(229,9,20,0.6); } /* ── TV Virtual Cursor hover styles ── */ :root { --focus-color:#e50914; --focus-glow:rgba(229,9,20,0.55); } /* Hide system cursor in TV mode */ body.tv-mode * { cursor: none !important; } /* Cards */ .card.tv-hover .card-thumb { transform: scale(1.1) translateY(-7px) !important; box-shadow: 0 0 0 3px var(--focus-color), 0 16px 36px rgba(0,0,0,.85), 0 0 28px var(--focus-glow) !important; z-index: 10; } /* CW cards */ .cw-card.tv-hover { transform: scale(1.06) translateY(-4px) !important; box-shadow: 0 0 0 3px var(--focus-color), 0 14px 28px rgba(0,0,0,.8), 0 0 20px var(--focus-glow) !important; } .cw-card.tv-hover .cw-play-btn { transform: translate(-50%,-50%) scale(1); } .cw-card.tv-hover .cw-remove { opacity: 1; } /* Nav links */ .nav-link.tv-hover { background: var(--focus-color) !important; color: #fff !important; } /* Hero */ .btn-hero-watch.tv-hover { transform: translateY(-2px) scale(1.04) !important; box-shadow: 0 0 0 3px var(--focus-color), 0 8px 24px var(--focus-glow) !important; } .btn-hero-info.tv-hover { background: rgba(255,255,255,.25) !important; box-shadow: 0 0 0 3px var(--focus-color) !important; } .hero-btn-arrow.tv-hover { background: var(--focus-color) !important; opacity: 1 !important; } .hero-dot.tv-hover { background: var(--focus-color) !important; width: 24px !important; } /* Row arrows + see all */ .row-arr.tv-hover { opacity: 1 !important; background: var(--focus-color) !important; border-color: var(--focus-color) !important; } .see-all.tv-hover { color: var(--focus-color) !important; } /* New FlixHUB-style cards */ .dive-card.tv-hover .dive-thumb { transform: scale(1.04) translateY(-3px) !important; box-shadow: 0 0 0 3px var(--focus-color), 0 16px 36px rgba(0,0,0,.85), 0 0 28px var(--focus-glow) !important; } .trend-card.tv-hover .trend-cover { transform: scale(1.06) translateY(-4px) !important; box-shadow: 0 0 0 3px var(--focus-color), 0 16px 36px rgba(0,0,0,.85), 0 0 28px var(--focus-glow) !important; } /* Detail page */ .dp-play-btn.tv-hover, .dp-resume-btn.tv-hover { box-shadow: 0 0 0 3px var(--focus-color), 0 8px 24px var(--focus-glow) !important; } .dp-s-tab.tv-hover { border-color: var(--focus-color) !important; color: #fff !important; } .dp-ep-row.tv-hover { background: rgba(229,9,20,.14) !important; border-color: var(--focus-color) !important; box-shadow: 0 0 0 2px var(--focus-color) !important; } /* ── TV LITE MODE — remove GPU-heavy effects for Android TV WebView ───────── */ /* backdrop-filter is extremely expensive on low-power TV SoCs */ body.tv-mode .navbar, body.tv-mode .navbar.opaque, body.tv-mode .server-dropdown, body.tv-mode .auth-modal, body.tv-mode .auth-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Solid bg instead of blurred glass for navbar on TV */ body.tv-mode .navbar.opaque { background: rgba(10,10,15,0.96) !important; } /* Reduce all transition durations on TV — feels snappier on remote */ body.tv-mode * { transition-duration: 0.1s !important; animation-duration: 0.1s !important; } /* Hero slide — no transform transition on TV (causes stutter on slide change) */ body.tv-mode .hero-slide, body.tv-mode .hero-slide .hero-content { transition: none !important; will-change: auto !important; } /* Row cards — no hover scale on TV (D-pad focus uses border instead) */ body.tv-mode .card:hover, body.tv-mode .card:active { transform: none !important; } /* Skeleton shimmer — disable on TV (saves GPU cycles during initial load) */ body.tv-mode .sk-pulse::after { animation: none !important; background: rgba(255,255,255,0.06) !important; } /* Toast — TV shows at bottom-center, larger text */ body.tv-mode #sm-toast { top: auto !important; bottom: 40px !important; font-size: 15px; padding: 13px 22px 13px 16px; } /* Episode D-Pad focus (when in dpad mode) */ .dp-ep-row.tv-ep-focus { background: rgba(229,9,20,.18) !important; border-color: var(--focus-color) !important; box-shadow: 0 0 0 2px var(--focus-color), 0 0 16px rgba(229,9,20,.4) !important; transform: translateX(4px); transition: transform .15s, box-shadow .15s; } .dp-ep-row.tv-ep-focus .dp-ep-num { background: var(--focus-color) !important; color: #fff !important; } /* Search + misc */ .search-box.tv-hover { border-color: var(--focus-color) !important; background: rgba(255,255,255,.12) !important; } .search-inp.tv-hover { outline: 2px solid var(--focus-color) !important; } .dark-toggle.tv-hover { border-color: var(--focus-color) !important; } .back-a.tv-hover, .dp-back.tv-hover, .wl-back-btn.tv-hover { background: var(--focus-color) !important; border-color: var(--focus-color) !important; } /* D-pad focus rings for dropdown/list rows that previously had no keyboard-focus style */ .server-opt.tv-hover { background: rgba(229,9,20,.16) !important; border-color: var(--focus-color) !important; box-shadow: 0 0 0 2px var(--focus-color) !important; } .bell-link.tv-hover { background: rgba(229,9,20,.16) !important; box-shadow: inset 0 0 0 2px var(--focus-color) !important; } .nav-watchlist-btn.tv-hover, .nav-bell-btn.tv-hover { background: var(--focus-color) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--focus-color) !important; } /* TV mode: larger UI on big screens */ @media (min-width: 1200px) { body.tv-mode .card { width: 200px; } body.tv-mode .row-title { font-size: 26px; } body.tv-mode .nav-link { font-size: 16px; padding: 8px 22px; } body.tv-mode .hero-title { font-size: 88px; } body.tv-mode .btn-hero-watch { font-size: 18px; padding: 16px 40px; } } /* ── Resume button on detail page ── */ .dp-resume-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: all .25s var(--ease); } .dp-resume-btn:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); } body.light .dp-resume-btn { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15); color: var(--txt); } /* ── LOADING SCREEN — Netflix style ─────────────────────────── */ /* One shared shimmer keyframe — GPU-friendly (only transform+opacity) */ @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .ls-sk { position: relative; overflow: hidden; background: #1a1a26; border-radius: 4px; } .ls-sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); animation: shimmer 1.8s ease infinite; will-change: transform; } #loading-screen { position: fixed; inset: 0; background: #0a0a0f; z-index: 9999; overflow: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } #loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Navbar skeleton */ .ls-navbar { display: flex; align-items: center; gap: 32px; padding: 0 48px; height: 60px; } .ls-logo { width: 100px; height: 28px; border-radius: 4px; background: #e50914; opacity: 0.7; } /* subtle pulsing logo to indicate activity */ .ls-logo { transform-origin: center; animation: ls-logo-pulse 1.2s ease-in-out infinite; } @keyframes ls-logo-pulse { 0% { transform: scale(0.985); opacity: 0.85; } 50% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(0.985); opacity: 0.85; } } /* Loading progress bar (JS will append .ls-progress) */ .ls-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.06); } .ls-progress .ls-progress-fill { height: 100%; width: 0%; background: var(--red); box-shadow: 0 0 8px var(--red-glow); transition: width 300ms linear; will-change: width; } .ls-nav-links { display: flex; gap: 20px; } .ls-nav-item { width: 52px; height: 13px; border-radius: 3px; } /* Hero skeleton */ .ls-hero { width: 100%; height: 56vw; max-height: 500px; min-height: 240px; background: linear-gradient(to bottom, #1a1a26 0%, #0f0f18 60%, #0a0a0f 100%); display: flex; align-items: flex-end; padding: 0 48px 48px; } .ls-hero-content { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 520px; } .ls-title { width: 380px; max-width: 90%; height: 52px; border-radius: 6px; } .ls-title-sm { width: 200px; height: 18px; border-radius: 4px; } .ls-desc { width: 100%; max-width: 460px; height: 14px; border-radius: 3px; } .ls-desc-2 { width: 75%; height: 14px; border-radius: 3px; } .ls-btns { display: flex; gap: 12px; margin-top: 8px; } .ls-btn { width: 120px; height: 42px; border-radius: 6px; } .ls-btn-main { background: rgba(255,255,255,0.15) !important; } /* All shimmer elements */ .ls-nav-item, .ls-title, .ls-title-sm, .ls-desc, .ls-desc-2, .ls-btn, .ls-row-title, .ls-card { position: relative; overflow: hidden; background: #1a1a26; } .ls-nav-item::after, .ls-title::after, .ls-title-sm::after, .ls-desc::after, .ls-desc-2::after, .ls-btn::after, .ls-row-title::after, .ls-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.055) 50%, transparent 100%); animation: shimmer 1.8s ease infinite; will-change: transform; } /* Stagger delays so they don't all pulse in sync */ .ls-title-sm::after { animation-delay: 0.15s; } .ls-desc::after { animation-delay: 0.3s; } .ls-desc-2::after { animation-delay: 0.45s; } .ls-btn::after { animation-delay: 0.1s; } .ls-content { padding: 32px 48px 0; } .ls-row { margin-bottom: 32px; } .ls-row-title { width: 180px; height: 16px; border-radius: 4px; margin-bottom: 16px; } .ls-cards { display: flex; gap: 8px; overflow: hidden; } .ls-card { flex-shrink: 0; width: 140px; height: 200px; border-radius: 6px; } .ls-card:nth-child(2)::after { animation-delay: 0.1s; } .ls-card:nth-child(3)::after { animation-delay: 0.2s; } .ls-card:nth-child(4)::after { animation-delay: 0.3s; } .ls-card:nth-child(5)::after { animation-delay: 0.4s; } .ls-card:nth-child(6)::after { animation-delay: 0.5s; } .ls-card:nth-child(7)::after { animation-delay: 0.6s; } @media (max-width: 600px) { .ls-navbar { padding: 0 16px; } .ls-hero { padding: 0 16px 32px; min-height: 200px; } .ls-title { height: 36px; } .ls-content { padding: 20px 16px 0; } .ls-card { width: 100px; height: 148px; } } /* ── FAKE PROFILE ────────────────────────────────────── */ .fake-profile { cursor: pointer; } .fp-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: block; flex-shrink: 0; } /* ── Copy Protection ── */ * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Input fields mein select allow karo */ input, textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* ============================================================ LIVE TMDB SEARCH — Netflix-style ============================================================ */ /* ── Search card enter animation — transform only, no repaint ── */ @keyframes cardIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } .card-srch-in { animation: cardIn .25s var(--ease) both; } /* ── Search skeleton — same shimmer as loading screen ── */ .card-sk { background: #1a1a26; border-radius: var(--radius); overflow: hidden; position: relative; } .card-sk-inner { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); animation: shimmer 1.8s ease infinite; will-change: transform; } /* ── Card loading state (TMDB click) ── */ .card-loading { pointer-events: none; } .card-loading::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.6); border-radius: var(--radius); z-index: 5; } .card-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 2.5px solid rgba(255,255,255,0.15); border-top-color: var(--red); border-radius: 50%; animation: spin .7s linear infinite; z-index: 6; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Search input expand ── Ye fixed-px expand sirf desktop/tablet ke liye hai jahan nav-right mein kaafi khaali jagah hoti hai. Mobile pe search-box already flex:1 hai (dekho "Navbar mobile" section) — yaani woh already available space le leta hai, isliye yahan alag se fixed width force karne ki zaroorat nahi (aur ye hi cheez pehle bell/watchlist/ profile ko screen se bahar push kar rahi thi jab user search tap karta tha). */ .search-inp { transition: width .3s var(--ease); } @media (min-width: 769px) { .search-box:focus-within .search-inp { width: 260px; } } /* ── Battery / Accessibility: reduce motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 768px) { .hero-slide, .dp-hero, .card, .trend-card, .upcoming-card, .row-arr, .dp-play-btn, .dp-icon-btn, .server-btn, .nav-watchlist-btn { transition-duration: 0.16s !important; } } /* ============================================================ SERVER SELECTOR ============================================================ */ .server-wrap { position: relative; display: inline-flex; flex: 0 0 auto; min-width: 0; overscroll-behavior: contain; } /* ── Server Button ── */ .server-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 44px; min-width: 0; width: auto; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: var(--txt); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s; white-space: nowrap; } .server-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.22); } .server-btn.open { border-color: var(--red); background: rgba(229,9,20,0.08); } .server-btn .fa-server { color: var(--red); font-size: 12px; } .server-arr { font-size: 10px; color: rgba(255,255,255,0.35); transition: transform .2s; margin-left: 2px; } .server-btn.open .server-arr { transform: rotate(180deg); } /* ── Dropdown ── */ /* Fix 2: Dropdown opens BELOW the button (top: not bottom:) */ .server-dropdown { display: none; position: absolute; top: calc(100% + 6px); bottom: auto; left: 0; min-width: 180px; width: max-content; max-width: 220px; /* Hamesha neeche hi khulta hai (kabhi upar nahi) — agar neeche space kam ho toh dropdown khud scroll ho jaata hai instead of flipping above. */ max-height: min(60vh, 320px); overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, #161722 0%, #10111a 100%); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: 0 10px 38px rgba(0,0,0,0.7); z-index: 1000; overscroll-behavior: contain; touch-action: pan-y; } .server-dropdown.open { display: block; animation: dropDown .18s cubic-bezier(0.34,1.4,0.64,1) both; } @keyframes dropDown { from { opacity:0; transform: translateY(-6px) scale(0.97); } to { opacity:1; transform: translateY(0) scale(1); } } /* chevron points down (open = up, closed = down — stays down since list opens below) */ .server-btn.open .server-arr { transform: rotate(180deg); } /* Fix 3: Season-style single-column list header */ .server-dd-title { padding: 9px 12px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.07); } /* Fix 3: Single-column list — same as season dropdown */ .server-opts-list { display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 4px; } .server-opts-list::-webkit-scrollbar { width: 3px; } .server-opts-list::-webkit-scrollbar-thumb { background: var(--red); border-radius: 10px; } /* Each server option — compact single-row like season tabs */ .server-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; border: 1px solid transparent; white-space: nowrap; } .server-opt:hover { background: rgba(255,255,255,0.07); } .server-opt.active { background: rgba(229,9,20,0.15); border-color: rgba(229,9,20,0.28); } .server-num { width: 22px; height: 22px; background: rgba(255,255,255,0.07); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.45); flex-shrink: 0; } .server-opt.active .server-num { background: var(--red); color: #fff; } .server-opt-right { display: flex; align-items: center; gap: 8px; min-width: 0; } .server-name { font-size: 13px; font-weight: 600; color: var(--txt); line-height: 1; } .server-opt.active .server-name { color: #fff; } .server-lang { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; line-height: 1; opacity: 0.7; } .hi { color: #f5a623; } .en { color: rgba(255,255,255,0.4); } @media (max-width: 600px) { .server-dropdown { min-width: 160px; max-width: 200px; } } /* ============================================================ OTT PLATFORM SECTION — Fixed Icons & Layout ============================================================ */ .ott-wrap { padding: 0 0 8px; } .ott-wrap .row-head { padding: 20px 48px 14px; margin-bottom: 0; } .ott-section { display: flex; gap: 12px; padding: 0 48px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ott-section::-webkit-scrollbar { display: none; } .ott-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 96px; height: 86px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.09); background: var(--card, #18181f); cursor: pointer; padding: 10px 12px; transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s; flex-shrink: 0; position: relative; overflow: hidden; } .ott-btn::before { content: ''; position: absolute; inset: 0; background: var(--ott-bg, #e50914); opacity: 0; transition: opacity 0.2s; border-radius: 12px; } .ott-btn:hover::before, .ott-btn:active::before { opacity: 0.14; } .ott-btn:hover { transform: translateY(-4px) scale(1.04); border-color: rgba(255,255,255,0.25); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .ott-icon { width: 62px; height: 26px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .ott-icon svg { width: 100%; height: 100%; object-fit: contain; } .ott-btn span { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.65); letter-spacing: 0.2px; position: relative; z-index: 1; white-space: nowrap; } .ott-btn.tv-hover { transform: translateY(-4px) scale(1.06); border-color: var(--red); box-shadow: 0 0 0 2px rgba(229,9,20,0.4); } /* OTT Page content loading */ .ott-page-loading { display: flex; align-items: center; justify-content: center; min-height: 220px; } .ott-page-loading .ring { width: 48px; height: 48px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.10); border-top-color: var(--red); animation: spinRing 0.9s linear infinite; } @keyframes spinRing { to { transform: rotate(360deg); } } /* ============================================================ CARD BADGE — "Movie" and "Series" full text ============================================================ */ .card-badge.badge-movie { border: 1px solid rgba(229,9,20,0.5); color: #ff6b6b; } .card-badge.badge-series { border: 1px solid rgba(99,179,237,0.5); color: #90cdf4; } /* ============================================================ CARD RATING ============================================================ */ .card-rating { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(0,0,0,0.75); color: #ffd24a; font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 4px; display: flex; align-items: center; gap: 3px; } .card-rating .fa-star { font-size: 9px; } /* ============================================================ SEARCH SKELETON ============================================================ */ .sk-card { aspect-ratio: 2/3; background: var(--card, #18181f); border-radius: 10px; position: relative; overflow: hidden; } .sk-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.6s linear infinite; will-change: background-position; } @keyframes skPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ============================================================ EPISODE IMAGE STILLS ============================================================ */ .dp-ep-overview { font-size: 11px; color: var(--txt2, rgba(255,255,255,0.5)); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ MOBILE OTT FIXES ============================================================ */ @media (max-width: 768px) { .ott-wrap .row-head { padding: 18px 16px 10px; } .ott-section { padding: 0 16px 14px; gap: 10px; } .ott-btn { min-width: 80px; height: 78px; padding: 8px; border-radius: 12px; } .ott-icon { width: 54px; height: 22px; } .ott-btn span { font-size: 9px; } /* Card fixes mobile */ .card-badge { font-size: 8px; padding: 2px 5px; } .card-title { font-size: 11px; } .card-year { font-size: 10px; } .grid-4 { padding: 14px 14px 10px; gap: 10px; } .grid-4 .card { width: 100%; } } /* ============================================================ DYNAMIC OTT PAGE GRID ============================================================ */ .grid-4[id^="ott-track-"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 16px; padding: 0 48px 24px; } @media (max-width: 768px) { .grid-4[id^="ott-track-"] { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: 0 14px 20px; } } /* ============================================================ FLIXHUB-STYLE HOME PAGE — Navbar Icon Buttons ============================================================ */ /* ============================================================ FLIXHUB-STYLE SECTION HEADERS ============================================================ */ .fh-section-wrap, .dive-section-wrap { width: 100%; padding: 8px 0 6px; content-visibility: auto; contain-intrinsic-size: 0 340px; } .fh-section-head { display: flex; flex-direction: column; gap: 2px; padding: 0 48px; margin-bottom: 14px; } .fh-section-title { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 2px; color: var(--txt); display: flex; align-items: center; gap: 10px; } .fh-section-title::before { content: ''; display: inline-block; width: 4px; height: 22px; background: var(--red); border-radius: 4px; box-shadow: 0 0 10px var(--red-glow); } .fh-section-sub { font-size: 13px; color: var(--txt2); padding-left: 14px; } /* ============================================================ LATEST RELEASE — "Dive" cards (wide thumbnails) ============================================================ */ .dive-outer { padding: 0 48px; display:flex; align-items:center; } .dive-row { display: flex; gap: 16px; overflow: visible; padding: 4px 2px 14px; transition: transform .45s var(--ease); } .dive-card { flex: 0 0 auto; width: 280px; display: flex; flex-direction: column; gap: 8px; color: #fff; text-decoration: none; cursor: pointer; } .dive-thumb { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.08); box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .dive-card:hover .dive-thumb { transform: scale(1.025) translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.7), 0 0 0 2px var(--red); } .dive-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; } .dive-card:hover .dive-thumb img { transform: scale(1.04); } .dive-play-ico { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(0); width: 44px; height: 44px; background: rgba(229,9,20,.88); border-radius: 50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; padding-left:2px; transition: transform .3s var(--ease); z-index: 2; } .dive-card:hover .dive-play-ico { transform: translate(-50%,-50%) scale(1); } .dive-badge { position: absolute; bottom: 8px; right: 8px; z-index: 2; background: rgba(0,0,0,.78); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; } .dive-info { display:flex; flex-direction:column; gap:3px; } .dive-title { font-size: 13px; color: var(--txt2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dive-ep { font-size: 15px; font-weight:600; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; transition: color .3s var(--ease), transform .3s var(--ease); } .dive-card:hover .dive-ep { color: #ff6b6b; text-shadow: 0 0 14px rgba(255,107,107,.5); transform: translateX(2px); } .dive-latest-ep { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; color: #4ade80; background: rgba(74,222,128,0.14); border: 1px solid rgba(74,222,128,0.35); padding: 2px 8px; border-radius: 5px; margin-top: 2px; transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .dive-card:hover .dive-latest-ep { transform: scale(1.08); background: rgba(74,222,128,0.25); box-shadow: 0 0 14px rgba(74,222,128,.35); } /* ============================================================ TRENDING / GENERIC "TREND" CARD ROW (poster-based) ============================================================ */ .trend-outer { padding: 0 48px; display:flex; align-items:center; } .trend-row { display: flex; gap: 16px; overflow: visible; padding: 4px 2px 14px; transition: transform .45s var(--ease); } .trend-card { flex: 0 0 auto; width: 168px; display: flex; flex-direction: column; gap: 8px; color: #fff; text-decoration: none; cursor: pointer; } .trend-cover { position: relative; width: 100%; aspect-ratio: 1/1.42; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.08); box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .trend-card:hover .trend-cover { transform: scale(1.045) translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.7), 0 0 0 2px var(--red); } .trend-cover img { width:100%; height:100%; object-fit:cover; display:block; } .trend-rating { position: absolute; top: 7px; right: 7px; z-index: 2; background: rgba(0,0,0,.75); color: #ffd24a; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; display: flex; align-items: center; gap: 3px; } .trend-badge-type { position: absolute; top: 7px; left: 7px; z-index: 2; background: rgba(0,0,0,.72); border: 1px solid rgba(229,9,20,.35); color: var(--red); font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; } .trend-rank { position: absolute; bottom: 0; left: 0; z-index: 2; background: rgba(0,0,0,.55); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 34px; line-height: 1; padding: 2px 10px 0 6px; border-radius: 0 12px 0 0; text-shadow: 0 2px 8px rgba(0,0,0,.8); } .trend-meta { display:flex; justify-content:space-between; font-size:11px; color:var(--txt2); transition: color .3s var(--ease); } .trend-name { font-size:15px; font-weight:600; line-height:1.3; color:#eef0f5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition: color .3s var(--ease), transform .3s var(--ease); } .trend-card:hover .trend-name { color: #ff6b6b; text-shadow: 0 0 14px rgba(255,107,107,.5); transform: translateX(2px); } .trend-card:hover .trend-meta { color: #fff; } /* ============================================================ TOP UPCOMING — wide info cards ============================================================ */ .upcoming-outer { padding: 0 48px; display:flex; align-items:center; } .upcoming-row { display: flex; gap: 16px; overflow: visible; padding: 4px 2px 14px; transition: transform .45s var(--ease); } .upcoming-card { flex: 0 0 auto; width: 400px; height: 220px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 16px; padding: 10px; display: flex; gap: 14px; color: #fff; text-decoration: none; cursor: default; overflow: hidden; } .upcoming-cover { position: relative; height: 100%; aspect-ratio: 1/1.42; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.05); } .upcoming-cover img { width:100%; height:100%; object-fit:cover; } .upcoming-info { display:flex; flex-direction:column; padding:4px 6px 4px 0; overflow:hidden; flex-grow:1; min-width:0; } .upcoming-title { font-size:15px; font-weight:700; line-height:1.25; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; } .upcoming-date-label { font-size:11px; color:var(--txt2); } .upcoming-date-value { font-size:16px; font-weight:700; color:#fff; margin-bottom:8px; line-height:1.3; } .upcoming-desc { font-size:12px; color:var(--txt2); line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:auto; } /* ============================================================ RESPONSIVE — FlixHUB sections on mobile ============================================================ */ @media (max-width: 1024px) { .fh-section-head, .dive-outer, .trend-outer, .upcoming-outer { padding-left:24px; padding-right:24px; } } @media (max-width: 768px) { .fh-section-head { padding-left:16px; padding-right:16px; } .fh-section-title { font-size: 20px; } .dive-outer, .trend-outer, .upcoming-outer { padding: 0 !important; } .dive-row, .trend-row, .upcoming-row { padding-left: 16px; padding-right: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dive-row::-webkit-scrollbar, .trend-row::-webkit-scrollbar, .upcoming-row::-webkit-scrollbar { display:none; } .dive-card { width: 230px; } .trend-card { width: 124px; } .upcoming-card { width: 300px; height: auto; min-height: 180px; flex-direction: column; gap: 10px; align-items: stretch; } .upcoming-cover { width: 100%; height: 110px; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); overflow: hidden; } .upcoming-cover img { width:100%; height:100%; object-fit: cover; display:block; } .upcoming-info { padding: 0; overflow: visible; } .upcoming-title { font-size: 13px; line-height: 1.35; display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; } .upcoming-date-label { font-size: 10px; } .upcoming-date-value { font-size: 13px; margin-bottom: 4px; } .upcoming-desc { font-size: 11px; line-height: 1.4; -webkit-line-clamp: 2; } } @media (max-width: 480px) { .dive-card { width: 200px; } .trend-card { width: 112px; } .upcoming-card { width: 240px; min-height: 170px; } .upcoming-cover { height: 96px; } .upcoming-title { font-size: 12px; } .upcoming-date-value { font-size: 12px; } } /* Touch: dive/trend hover-transform off rakho, par play icon hamesha visible mat karo (red play icon Latest Release pe — user ne mana kiya hai, isliye scale(0) hi rehne do) */ @media (hover: none) { .dive-card:hover .dive-thumb, .trend-card:hover .trend-cover { transform:none; } } /* ── Episode Loading Indicator ─────────────────────────────── */ .ep-loading-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; min-height: 120px; } .dp-seasons-loader, .ep-season-fetch-loading { min-height: 140px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); transition: opacity 0.22s ease; } .ep-loading-ring { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.08); border-top-color: var(--red, #e50914); animation: ep-spin 0.75s linear infinite; will-change: transform; } @keyframes ep-spin { to { transform: rotate(360deg); } } .ep-loading-txt { font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 500; } /* ── Episode Active Highlight (player se wapas aaya) ─────────── */ .dp-ep-row--active { background: rgba(229,9,20,0.12) !important; border-color: rgba(229,9,20,0.4) !important; box-shadow: 0 0 0 1px rgba(229,9,20,0.25) inset; } .dp-ep-row--active .dp-ep-name { color: var(--red, #e50914) !important; font-weight: 700; } .dp-ep-row--active .dp-ep-num { background: rgba(229,9,20,0.2); color: var(--red, #e50914); } /* ── More Like This — Skeleton Cards ──────────────────────────── */ .more-sk-card { display: flex; flex-direction: column; } .more-sk-thumb { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius, 10px); } .more-sk-line { height: 11px; border-radius: 4px; } .sk-pulse { background: rgba(255,255,255,0.07); position: relative; overflow: hidden; } .sk-pulse::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation: sk-shimmer 1.4s ease infinite; will-change: transform; } @keyframes sk-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ════════════════════════════════════════════════════════════════ LQIP — Blur-up image placeholder ════════════════════════════════════════════════════════════════ */ .card-img-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; } .card-img-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(8px); transform: scale(1.05); transition: opacity 0.3s ease; } .card-img-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; } .card-img-main.loaded { opacity: 1; } .card-img-main.loaded ~ .card-img-blur, .card-img-main.loaded + .card-img-blur { opacity: 0; } /* Blur hide when main loaded */ .card-img-wrap:has(.card-img-main.loaded) .card-img-blur { opacity: 0; } /* ════════════════════════════════════════════════════════════════ DETAIL PAGE SKELETON OVERLAY ════════════════════════════════════════════════════════════════ */ .dp-skeleton-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg, #0a0a0f); display: none; transition: opacity 0.28s ease; overflow-y: auto; } .dp-sk-hero { width: 100%; height: 52vw; max-height: 420px; min-height: 200px; background: linear-gradient(180deg, #141420 0%, #0a0a0f 100%); position: relative; overflow: hidden; } .dp-sk-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.025), transparent); animation: sk-shimmer 1.6s ease infinite; } .dp-sk-body { display: flex; gap: 24px; padding: 0 36px; margin-top: -50px; position: relative; z-index: 2; } .dp-sk-poster { width: 130px; height: 195px; border-radius: 10px; flex-shrink: 0; } .dp-sk-info { flex: 1; padding-top: 60px; display: flex; flex-direction: column; } .dp-sk-line { border-radius: 6px; margin-bottom: 0; } @media (max-width: 768px) { .dp-sk-body { flex-direction: column; padding: 0 16px; margin-top: -30px; gap: 14px; } .dp-sk-poster { width: 100px; height: 150px; } .dp-sk-info { padding-top: 0; } } @media (min-width: 1024px) { .dp-sk-body { max-width: 1280px; margin: -56px auto 0; padding: 0 48px; align-items: flex-start; } .dp-sk-poster { width: 150px; height: 225px; } .dp-sk-info { padding-top: 72px; max-width: 820px; } .dp-sk-line { border-radius: 8px; } } @media (min-width: 1600px) { .dp-sk-body { max-width: 1440px; padding: 0 72px; } .dp-sk-poster { width: 180px; height: 270px; } .dp-sk-info { padding-top: 86px; } } /* ════════════════════════════════════════════════════════════════ DETAIL PAGE — Watchlist icon button ════════════════════════════════════════════════════════════════ */ .dp-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); color: #fff; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .dp-icon-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); } .dp-icon-btn--active { background: rgba(229,9,20,0.15) !important; border-color: rgba(229,9,20,0.5) !important; color: var(--red, #e50914) !important; } /* ════════════════════════════════════════════════════════════════ NAVBAR WATCHLIST BUTTON ════════════════════════════════════════════════════════════════ */ .nav-watchlist-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .nav-watchlist-btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); } .wl-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; background: var(--red, #e50914); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg, #0a0a0f); } /* ════════════════════════════════════════════════════════════════ WATCHLIST PAGE ════════════════════════════════════════════════════════════════ */ .wl-page-header { display: flex; align-items: center; gap: 14px; padding: 16px 24px 8px; position: sticky; top: 0; z-index: 50; background: rgba(10,10,15,0.92); backdrop-filter: blur(12px); } .wl-back-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: .25s; } .wl-back-btn:hover { background: rgba(255,255,255,.16); } .wl-page-title { font-size: 22px; font-weight: 700; flex: 1; } .wl-clear-btn { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: var(--txt2, rgba(255,255,255,0.55)); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .wl-clear-btn:hover { border-color: rgba(229,9,20,0.5); color: var(--red); } .wl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; color: rgba(255,255,255,0.3); gap: 12px; } .wl-empty i { font-size: 48px; opacity: 0.25; } .wl-empty p { font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.5); margin: 0; } .wl-empty span { font-size: 13px; } .wl-card-remove { position: absolute; top: 6px; right: 6px; z-index: 5; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.75); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); font-size: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.2s; cursor: pointer; } .card:hover .wl-card-remove { opacity: 1; } @media (hover: none) { .wl-card-remove { opacity: 1; } } .wl-card-remove:hover { background: var(--red); border-color: var(--red); color: #fff; } #wl-grid { padding: 16px 24px 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } #wl-grid .card { width: 100%; } @media (max-width: 768px) { #wl-grid { padding: 14px 14px 80px; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .wl-page-header { padding: 14px 14px 6px; } } /* ════════════════════════════════════════════════════════════════ TOAST NOTIFICATION ════════════════════════════════════════════════════════════════ */ /* ── Toast ───────────────────────────────────────────────────── */ /* ── Toast — Mobile: strictly top-pinned (always visible, no scroll needed) Desktop/TV: bottom as before ── */ #sm-toast { position: fixed; /* Mobile default: top of viewport — keyboard/scroll irrelevant */ top: 20px; bottom: auto; left: 50%; transform: translateX(-50%) translateY(-8px); display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 14px; background: #1c1c24; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset; color: #f0f0f5; font-size: 13.5px; font-weight: 500; letter-spacing: 0.1px; white-space: nowrap; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); will-change: transform, opacity; } #sm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Desktop & TV: restore bottom position */ @media (min-width: 700px) { #sm-toast { top: auto; bottom: 88px; transform: translateX(-50%) translateY(12px); } #sm-toast.show { transform: translateX(-50%) translateY(0); } } .toast-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; } /* Success — green */ #sm-toast[data-type="success"] .toast-icon { background: rgba(52,199,89,0.15); color: #34c759; } /* Danger — red */ #sm-toast[data-type="danger"] .toast-icon { background: rgba(255,59,48,0.12); color: #ff3b30; } /* Neutral — grey */ .sk-pulse::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation: skeleton-shimmer 1.4s linear infinite; will-change: background-position; } /* ── Custom Confirm Dialog ───────────────────────────────────── */ #sm-confirm { position: fixed; inset: 0; will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); display: flex; align-items: center; justify-content: center; padding: 16px; } .confirm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.24s ease; } #sm-confirm.open .confirm-backdrop { opacity: 1; } .confirm-box { position: relative; width: min(360px, calc(100% - 24px)); background: #1a1a24; border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; padding: 24px 20px 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.7); transform: translateY(16px) scale(0.97); opacity: 0; transition: transform 0.26s cubic-bezier(0.34,1.3,0.64,1), opacity 0.22s ease; } #sm-confirm.open .confirm-box { transform: translateY(0) scale(1); opacity: 1; } .confirm-title { font-size: 16px; font-weight: 700; color: #f0f0f5; margin-bottom: 6px; letter-spacing: -0.2px; } .confirm-sub { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 22px; line-height: 1.5; } .confirm-btns { display: flex; gap: 10px; } .confirm-cancel { flex: 1; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.18s; } .confirm-cancel:hover { background: rgba(255,255,255,0.1); } .confirm-ok { flex: 1; height: 44px; border-radius: 12px; border: none; background: rgba(255,59,48,0.15); color: #ff453a; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: 0.1px; transition: background 0.18s; } .confirm-ok:hover { background: rgba(255,59,48,0.25); } /* ════════════════════════════════════════════════════════════════ PAGE SLIDE TRANSITION ════════════════════════════════════════════════════════════════ */ .page { transition: opacity 0.22s ease; } .page-slide-in { animation: pageSlideIn 0.25s ease both; } @keyframes pageSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ════════════════════════════════════════════════════════════════ ERROR STATE IN ROWS ════════════════════════════════════════════════════════════════ */ .row-error { padding: 20px 20px; color: rgba(255,255,255,0.35); font-size: 13px; display: flex; align-items: center; gap: 10px; } .row-retry-btn { padding: 5px 14px; background: rgba(229,9,20,0.15); border: 1px solid rgba(229,9,20,0.35); color: var(--red, #e50914); border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .row-retry-btn:hover { background: rgba(229,9,20,0.25); } /* ── Trailer System ─────────────────────────────────────────────── */ /* Hero banner trailer iframe */ /* ── Trailer iframe — fills container, clips YouTube UI ── */ /* Hero banner trailer */ .hero-slide { overflow: hidden; /* clip karo taaki scaled iframe bahar na jaaye */ } .hero-trailer-iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); min-width: calc(100% + 10%); min-height: calc(100% + 30%); transform: translate(-50%, -50%); border: none; z-index: 0; pointer-events: none; display: block !important; visibility: visible !important; opacity: 1 !important; } /* When trailer playing — bg image hata do */ .hero-slide.has-trailer { background-image: none !important; } .hero-slide.has-trailer::before { background: linear-gradient(to right, rgba(10,10,15,.85) 0%, rgba(10,10,15,.25) 55%, transparent 100%), linear-gradient(to top, rgba(10,10,15,1.0) 0%, transparent 52%); } body.trailer-performance-mode .hero-content, body.trailer-performance-mode .hero-actions, body.trailer-performance-mode .hero-mute-btn, body.trailer-performance-mode .dp-mute-btn, body.trailer-performance-mode .hero-btn-arrow, body.trailer-performance-mode .hero-dot, body.trailer-performance-mode .dp-hero .dp-hero-grad, body.trailer-performance-mode .dp-back { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; transition: none !important; } body.trailer-performance-mode .hero-slide, body.trailer-performance-mode .dp-hero { will-change: auto; } body.low-performance-mode *, body.low-performance-mode *::before, body.low-performance-mode *::after { animation-duration: 0.12s !important; animation-timing-function: ease-out !important; transition-duration: 0.12s !important; transition-delay: 0s !important; } body.low-performance-mode .hero-slide, body.low-performance-mode .dp-hero { will-change: auto !important; } body.low-performance-mode .hero-content, body.low-performance-mode .hero-actions, body.low-performance-mode .hero-mute-btn, body.low-performance-mode .dp-mute-btn, body.low-performance-mode .hero-btn-arrow, body.low-performance-mode .hero-dot, body.low-performance-mode .dp-hero .dp-hero-grad, body.low-performance-mode .dp-back { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.trailer-performance-mode .hero-slide::before, body.trailer-performance-mode .dp-hero.has-trailer .dp-hero-grad { transition: none !important; } /* Hero mute button */ .hero-mute-btn { position: absolute; bottom: 32px; right: 32px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.55); background: rgba(0,0,0,0.5); color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; backdrop-filter: blur(4px); } .hero-mute-btn:hover { background: rgba(0,0,0,0.75); border-color: #fff; transform: scale(1.1); } /* ── Detail page trailer ── */ .dp-hero { overflow: hidden; /* iframe clip */ } .dp-trailer-iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); min-width: calc(100% + 10%); min-height: calc(100% + 30%); transform: translate(-50%, -50%); border: none; z-index: 1; pointer-events: none; display: block !important; visibility: visible !important; opacity: 1 !important; } .dp-hero.has-trailer #dp-bg { opacity: 0; transition: opacity .4s; } .dp-hero.has-trailer .dp-hero-grad { background: linear-gradient(to bottom, transparent 20%, var(--bg) 100%), linear-gradient(to right, rgba(0,0,0,0.45) 0%, transparent 60%); } /* Grad aur back btn trailer ke upar */ .dp-hero .dp-hero-grad { z-index: 2; } .dp-hero .dp-back { z-index: 3; } /* Detail mute button */ .dp-mute-btn { position: absolute; bottom: 20px; right: 20px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.55); background: rgba(0,0,0,0.5); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; backdrop-filter: blur(4px); } .dp-mute-btn:hover { background: rgba(0,0,0,0.75); border-color: #fff; transform: scale(1.1); } /* Mobile pe trailer buttons hide */ @media (max-width: 699px) { .hero-mute-btn, .dp-mute-btn { display: none !important; } } /* ── UX 3: Runtime badge in detail page ──────────────────────── */ .dp-runtime-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 3px 9px; letter-spacing: 0.3px; } /* ── UX 4: Watchlist control bar (sort + filter) ─────────────── */ .wl-ctrl-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 4px; flex-wrap: wrap; } .wl-filter-group { display: flex; gap: 6px; } .wl-ctrl-btn { padding: 5px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.18); background: transparent; color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .18s, color .18s, border-color .18s; } .wl-ctrl-btn.active { background: var(--red); border-color: var(--red); color: #fff; } .wl-sort-select { padding: 5px 10px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; } .wl-sort-select option { background: #1a1a24; color: #fff; } /* ── Search Filter Bar (UX 2 + genre filter) ─────────────────── */ .sf-filter-bar { padding: 8px 12px 4px; display: flex; flex-direction: column; gap: 6px; } .sf-chips-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sf-filter-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; margin-right: 2px; } .sf-genre-chip, .sf-year-chip { padding: 4px 12px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .sf-genre-chip:hover, .sf-year-chip:hover { background: rgba(255,255,255,0.14); color: #fff; } .sf-genre-chip.active, .sf-year-chip.active { background: var(--red, #e50914); border-color: var(--red, #e50914); color: #fff; } /* ── Detail Page Meta Row (UX 3) ─────────────────────────────── */ .dp-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; } .dp-meta-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; padding: 3px 10px; letter-spacing: 0.2px; } .dp-runtime-chip { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.16); color: #fff; } /* ── Detail Page Genre Chips (UX 1) ──────────────────────────── */ .dp-genres-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; } .dp-genre-chip { padding: 4px 12px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; } .dp-genre-chip:hover, .dp-genre-chip:active { background: var(--red, #e50914); border-color: var(--red, #e50914); color: #fff; } /* Improvement 7: episode count in season dropdown */ .dp-season-ep-count { margin-left: auto; font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); border-radius: 20px; padding: 2px 7px; white-space: nowrap; } .dp-season-option.active .dp-season-ep-count { color: rgba(229,9,20,0.7); background: rgba(229,9,20,0.1); }