/*
Theme Name: ZizoPixels Netflix
Theme URI: https://zizopixels.online
Author: ZizoPixels
Description: A dark, Netflix-style movie and TV streaming theme for ZizoPixels. Features a cinematic hero, horizontal rows, and a Top 10 section with large numbered counters on the homepage.
Version: 1.3.1
License: GPL v2 or later
Text Domain: zizopixels-netflix
*/
:root{--bg:#141414;--bg2:#0b0b0b;--card:#1f1f1f;--red:#e50914;--text:#fff;--muted:#b3b3b3}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:32px;padding:14px 4%;background:linear-gradient(180deg,rgba(0,0,0,.75),transparent)}
.logo{color:var(--red);font-size:30px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.logo span{color:#fff}
.main-nav{display:flex;gap:20px;font-size:14px;color:#e5e5e5}
.main-nav a:hover{color:var(--muted)}
.header-search{margin-left:auto}.header-search input{background:rgba(0,0,0,.75);border:1px solid #fff;color:#fff;padding:7px 10px;width:180px}
.hero{min-height:86vh;display:flex;align-items:flex-end;padding:120px 4% 60px;background-size:cover;background-position:center;background-color:#000;position:relative}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(77deg,rgba(0,0,0,.85) 25%,transparent 65%),linear-gradient(0deg,var(--bg),transparent 35%)}
.hero-inner{position:relative;max-width:620px}.hero-kicker{color:var(--red);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:13px}
.hero h1{font-size:56px;line-height:1.02;margin:12px 0}.hero p{color:#e5e5e5;font-size:18px;line-height:1.5}
.btn{display:inline-block;padding:11px 26px;border-radius:4px;font-weight:700;margin-right:10px;background:#fff;color:#000}.btn-red{background:var(--red);color:#fff}.btn-ghost{background:rgba(109,109,110,.7);color:#fff}
.section{padding:8px 4% 10px}.section h2{font-size:22px;margin:22px 0 12px}
.row{display:flex;gap:10px;overflow-x:auto;padding-bottom:14px;scrollbar-width:none}.row::-webkit-scrollbar{display:none}
.card{flex:0 0 180px}.card img{border-radius:6px;aspect-ratio:2/3;object-fit:cover;background:var(--card);width:100%}.card-wide{flex-basis:300px}.card-wide img{aspect-ratio:16/9}
.card h3{font-size:14px;margin:8px 0 2px;font-weight:600}.meta{color:var(--muted);font-size:12px}
/* Top 10 */
.top10-row{display:flex;gap:6px;overflow-x:auto;padding:10px 0 18px;scrollbar-width:none}.top10-row::-webkit-scrollbar{display:none}
.top10-item{flex:0 0 240px;display:flex;align-items:flex-end}
.top10-num{font-size:170px;line-height:.78;font-weight:900;color:#000;-webkit-text-stroke:4px #595959;margin-right:-18px;letter-spacing:-12px;font-family:Arial Black,Arial,sans-serif}
.top10-item img{width:150px;height:210px;object-fit:cover;border-radius:6px;background:var(--card)}
.top10-placeholder{width:150px;height:210px;border-radius:6px;background:linear-gradient(160deg,#2a2a2a,#111);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:10px}
.player{aspect-ratio:16/9;background:#000;width:100%}.player iframe,.player video{width:100%;height:100%;border:0}
.single-wrap{padding:100px 4% 40px;max-width:1100px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;padding:20px 4% 50px}
footer{padding:40px 4%;color:#757575;font-size:13px;background:var(--bg2);margin-top:40px}
.empty-note{color:var(--muted);padding:14px;border:1px dashed #444;border-radius:6px}
@media(max-width:700px){.hero h1{font-size:36px}.main-nav{display:none}.card{flex-basis:130px}.top10-num{font-size:110px}.top10-item{flex-basis:170px}.top10-item img,.top10-placeholder{width:105px;height:150px}}

/* v1.2 - ideas from user's references, ZizoPixels styling */
.top10-num{color:transparent;-webkit-text-stroke:4px #6d6d6d}
.chips{display:flex;gap:8px;padding:84px 4% 0;flex-wrap:wrap}
.chip{border:1px solid rgba(255,255,255,.45);background:rgba(40,40,40,.65);padding:7px 16px;border-radius:999px;font-size:14px}
.chip:hover{background:rgba(255,255,255,.15)}
.card-media{position:relative;display:block}
.badge-corner{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:9px;font-weight:900;line-height:1.1;padding:3px 4px;border-radius:0 0 4px 0;text-align:center}
.badge-new{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:2px;white-space:nowrap}
.badge-rank{display:inline-flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px}
.badge-rank i{background:var(--red);color:#fff;font-style:normal;font-size:11px;font-weight:900;padding:3px 5px;line-height:1.05;text-align:center;border-radius:2px}
.age-badge{position:absolute;right:0;bottom:110px;background:rgba(51,51,51,.6);border-left:3px solid #fff;padding:6px 42px 6px 12px;font-size:15px}
.progress{height:4px;background:#5c5c5c;margin-top:6px;border-radius:2px;overflow:hidden}.progress span{display:block;height:100%;background:var(--red)}
.bottom-nav{display:none}
@media(max-width:700px){.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(10,10,10,.96);border-top:1px solid #333;justify-content:space-around;padding:8px 0 10px;font-size:11px;text-align:center}.bottom-nav a{color:#ccc}.bottom-nav b{display:block;font-size:18px;line-height:1.2}body{padding-bottom:52px}.age-badge{display:none}}