/* ==========================
   SMAKSmak — style.css
   Full, detailed stylesheet for the streaming UI
   - Mixed neon glowing accents per section
   - Glassmorphism overlays
   - Smooth horizontal scrollers
   - Responsive rules and accessibility
   ========================== */

/* --------------------------
   Reset + base
   -------------------------- */
* { box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.35;
  color:var(--text);
  background:var(--bg-gradient);
  transition: background var(--transition), color var(--transition);
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; }
.hidden{ display:none !important; }

/* --------------------------
   Theme variables (defaults -> darkish but not pure black)
   User can toggle body.class theme-light to switch
   -------------------------- */
:root{
  /* layout */
  --container-width: 1280px;
  --radius: 14px;
  --transition: 300ms cubic-bezier(.2,.9,.3,1);

  /* background (deep charcoal gradient — not pure black) */
  --bg-1: #07101a;   /* deep navy */
  --bg-2: #0f1724;   /* midnight teal */
  --bg-gradient: linear-gradient(180deg,var(--bg-1),var(--bg-2));

  /* glass */
  --glass: rgba(255,255,255,0.03);
  --glass-strong: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.06);

  /* text */
  --text: #e6f3ff;
  --muted: #9fb1c9;
  --ui-weak: rgba(255,255,255,0.06);

  /* accents (neon style - mixed per section) */
  --accent-movies: #00d0ff;   /* neon blue */
  --accent-shows:  #c57cff;   /* neon purple */
  --accent-hero:   #ff4b5c;   /* neon red */
  --accent-top3:   #ffb347;   /* neon gold */
  --accent-overlay:#2fe6c4;   /* neon aqua */

  /* UI sizing */
  --nav-height: 72px;
  --card-gap: 18px;
  --card-radius: 10px;
}

/* Light theme override */
body.theme-light{
  --bg-1: #f6f8fb;
  --bg-2: #e9eef6;
  --bg-gradient: linear-gradient(180deg,var(--bg-1),var(--bg-2));
  --glass: rgba(10,12,18,0.04);
  --glass-strong: rgba(10,12,18,0.06);
  --glass-border: rgba(10,12,18,0.06);
  --text: #061223;
  --muted: #40505f;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :root{ --transition: 150ms ease-in-out }
  *{ transition: none !important; animation: none !important }
}

/* --------------------------
   Utility / container
   -------------------------- */
.container{
  width: min(var(--container-width), 94vw);
  margin: 0 auto;
}

.centered{ display:flex; align-items:center; justify-content:center; }

/* --------------------------
   Glassmorphism Nav (sticky)
   -------------------------- */
.nav{
  position:sticky; top:0; z-index:70;
  backdrop-filter: blur(10px) saturate(120%);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 30px rgba(2,6,23,0.45);
}
.nav-inner{
  height: var(--nav-height);
  display:flex; align-items:center; gap:18px; justify-content:space-between;
}
.brand em{ font-style:italic; font-weight:700; font-size:1.15rem; letter-spacing:0.6px; color:var(--text); }

.main-nav ul{ list-style:none; display:flex; gap:10px; margin:0; padding:0; align-items:center }
.main-nav a{ color:var(--muted); padding:8px 12px; border-radius:8px; transition: color var(--transition), background var(--transition), box-shadow var(--transition); }
.main-nav a:hover, .main-nav a:focus{ color:var(--text); background: rgba(255,255,255,0.02); box-shadow: 0 6px 18px rgba(0,0,0,0.35) }

.nav-actions{ display:flex; gap:10px; align-items:center }
.search-wrap{ display:flex; align-items:center; gap:6px; }
#globalSearch{ background:transparent; border:1px solid var(--ui-weak); padding:8px 10px; border-radius:8px; color:var(--text); width:220px }
#searchBtn{ background:transparent; border:none; color:var(--muted); padding:6px }
#themeToggle{ background:transparent; border:1px solid var(--ui-weak); padding:8px 10px; border-radius:8px }

/* --------------------------
   HERO / Centered Slideshow
   -------------------------- */
.hero{ padding: 36px 0 48px; }
.hero-inner{ display:block; }
.hero-carousel{ position:relative; display:flex; gap:12px; align-items:center; }

/* Track / slides (horizontal scroller but each slide sized to maintain cinematic aspect) */
.slides{ display:flex; gap:20px; overflow-x:auto; padding:12px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.slide{
  flex: 0 0 min(1200px, 86vw); /* large cinematic width but responsive */
  aspect-ratio: 1926 / 712; /* keeps the intended ratio */
  background-size: cover; background-position:center; border-radius: 16px; overflow:hidden; position:relative;
  box-shadow: 0 8px 40px rgba(2,6,23,0.6);
  transition: transform var(--transition), box-shadow var(--transition);
  scroll-snap-align: center;
}
.slide:focus{ outline: 3px solid rgba(255,255,255,0.06); }
.slide-gradient{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(2,6,23,0.6) 10%, rgba(2,6,23,0.25) 40%, transparent 60%); display:flex; align-items:flex-end; }
.slide-meta{ padding:28px; color:var(--text); max-width:56%; }
.slide .title{ margin:0 0 8px; font-size:clamp(18px, 2.1vw, 28px); }
.slide .desc{ margin:0 0 12px; color:var(--muted); font-size:0.95rem }
.slide .actions{ display:flex; gap:10px; }
.slide .actions button{ background: rgba(0,0,0,0.45); color:var(--text); padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); }

/* Hero arrows */
.hero-nav{ position: absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; border: none; display:grid; place-items:center; z-index:40; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.hero-nav.prev{ left:-28px; }
.hero-nav.next{ right:-28px; }
.hero-nav:hover{ transform:translateY(-50%) scale(1.04); box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 36px var(--accent-hero); border:1px solid rgba(255,255,255,0.04); }

/* Dots */
.dots{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:12px }
.dots button{ width:10px; height:10px; border-radius:50%; border:none; background: rgba(255,255,255,0.12); }
.dots button.active{ background: var(--accent-hero); box-shadow: 0 0 14px var(--accent-hero); }

/* Hover effect for slide (small scale) */
.slide:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px rgba(2,6,23,0.7), 0 0 40px var(--accent-hero);} 

/* --------------------------
   Row header + scrollers
   -------------------------- */
.content-row{ margin: 28px 0; }
.row-header{ display:flex; align-items:center; justify-content:space-between; padding: 6px 0 12px; }
.row-header h3{ margin:0; font-size:1.1rem }
.more-row{ background:transparent; border:1px solid var(--ui-weak); padding:8px 12px; border-radius:8px }

.row-scroller{ display:flex; gap:var(--card-gap); overflow-x:auto; padding:8px 0 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.row-scroller:focus{ outline: none }

/* card basics */
.card{ position:relative; flex:0 0 280px; aspect-ratio: 16/9; border-radius:var(--card-radius); overflow:hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.card img.thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.card .card-overlay{ position:absolute; left:0; right:0; bottom:0; padding:10px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 65%); display:flex; align-items:flex-end; gap:8px }
.card-title{ margin:0; font-size:0.95rem; color:var(--text) }

.card .rating{ position:absolute; left:8px; top:8px; padding:6px 8px; border-radius:8px; background: rgba(0,0,0,0.55); font-weight:600; font-size:0.8rem; backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,0.04) }

.card .card-actions{ display:flex; gap:8px; align-items:center }
.card .card-actions button{ background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.04); padding:8px 10px; border-radius:8px; color:var(--text); }

/* --------------------------
   Section-specific glows (mixed accents)
   -------------------------- */
#movies .card.movie-card:hover{ transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 50px #00d0ff33, 0 0 40px #00d0ff22; border:1px solid #00d0ff22 }
#movies .card.movie-card .card-actions button:hover{ box-shadow: 0 8px 24px #00d0ff33; border-color:#00d0ff55 }

#shows .card.show-card:hover{ transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 50px #c57cff33, 0 0 40px #c57cff22; border:1px solid #c57cff22 }
#shows .card.show-card .card-actions button:hover{ box-shadow: 0 8px 24px #c57cff33; border-color:#c57cff55 }

/* Top3 gold glow */
#top3 ol li:hover{ color:var(--text); text-shadow: 0 2px 8px #ffb34766; transform: translateX(6px); }

/* Hero accent for arrows/dots */
.hero-nav:hover{ box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 36px var(--accent-hero) }
.dots button.active{ box-shadow: 0 0 14px var(--accent-hero) }

/* Overlay/modal accents */
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:120; background: linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.85)); }
.modal.hidden{ display:none }
.modal-inner{ width: min(1100px, 94vw); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px; padding:18px; backdrop-filter: blur(10px); border: 1px solid var(--glass-border); display:flex; gap:18px; align-items:flex-start; }
.modal-close{ position:absolute; right:24px; top:24px; background:transparent; border:1px solid rgba(255,255,255,0.04); padding:8px 10px; border-radius:8px; }

.video-wrap{ flex:1 1 66%; min-width: 420px; }
.video-wrap iframe{ width:100%; height:calc(100vw * 9 / 16); max-height:60vh; border-radius:8px; }
.modal-meta{ flex:1 1 34%; padding:8px 12px; color:var(--text) }
.modal-meta h4{ margin-top:0 }
.modal-actions{ display:flex; gap:8px; margin-top:12px }
.modal-actions button, .modal-actions a{ background: rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:8px }

/* Card preview (Netflix-style quick view) */
.card-preview{ position:fixed; inset:0; display:grid; place-items:center; z-index:130; }
.card-preview .preview-inner{ width:min(980px,94vw); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:18px; display:flex; gap:12px; align-items:flex-start; border:1px solid var(--glass-border); backdrop-filter: blur(10px); }
.preview-media{ flex:1 1 58%; min-height:180px; background:#000; border-radius:8px; overflow:hidden }
.preview-meta{ flex:1 1 42%; }
.preview-actions{ margin-top:10px; display:flex; gap:8px }
.preview-actions button{ padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:rgba(0,0,0,0.45) }

/* Expanded show details */
.expanded-show{ margin-top:18px; padding:18px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01)); border-radius:12px; border:1px solid var(--glass-border); display:flex; gap:18px }
.expanded-left img{ width:360px; height:auto; border-radius:8px }
.expanded-right{ flex:1 }
.episodes-row{ display:flex; gap:10px; overflow-x:auto; padding:12px 0; }
.episodes-row .card{ flex:0 0 220px; aspect-ratio: 16/9 }

/* Continue watching: progress bar */
.continue .card{ overflow:visible }
.progress-wrap{ position:absolute; left:12px; right:12px; bottom:8px; height:6px; background:rgba(255,255,255,0.06); border-radius:6px; }
.progress{ height:100%; background: linear-gradient(90deg,var(--accent-overlay), var(--accent-movies)); border-radius:6px }

/* Extras / about */
.extras{ display:flex; gap:28px; padding:22px 0; border-top:1px dashed rgba(255,255,255,0.02) }
.extras .extra-col{ flex:1 }

.about{ padding:22px 0 60px }

/* --------------------------
   Scrollbar + focus styling
   -------------------------- */
/* Thin scrollbar */
.row-scroller::-webkit-scrollbar, .slides::-webkit-scrollbar, .episodes-row::-webkit-scrollbar{ height:10px }
.row-scroller::-webkit-scrollbar-thumb, .slides::-webkit-scrollbar-thumb, .episodes-row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.07); border-radius:8px }

:focus{ outline: 3px solid rgba(255,255,255,0.06); outline-offset:2px }

/* --------------------------
   Responsive
   -------------------------- */
@media (max-width: 1200px){
  :root{ --container-width: 1000px }
  .slide{ flex:0 0 min(960px, 92vw) }
  .card{ flex:0 0 240px }
  .expanded-left img{ width:260px }
}

@media (max-width: 900px){
  .nav-inner{ gap:10px }
  #globalSearch{ display:none }
  .slide{ flex: 0 0 86vw }
  .slide .slide-meta{ max-width:70% }
  .card{ flex:0 0 200px }
  .expanded-left img{ width: 200px }
  .modal-inner{ flex-direction:column; }
  .video-wrap iframe{ height:40vh }
}

@media (max-width: 600px){
  .hero{ padding: 18px 0 }
  .brand em{ font-size:1rem }
  .card{ flex:0 0 160px }
  .slides{ gap:12px }
  .slide .slide-meta{ padding:14px }
  .slide .title{ font-size:1.05rem }
  .nav-inner{ padding:6px }
  .modal-inner{ width:94vw; padding:12px }
  .expanded-show{ flex-direction:column }
  .expanded-left img{ width:100% }
}

/* Final small niceties */
footer{ color:var(--muted); padding:24px 0; text-align:center }

/* End of file */