/*
Theme Name: LanaBox
Theme URI: https://lanabox.local/
Author: LanaBox
Description: Dark cinematic streaming theme for LanaBox. Responsive WordPress theme with featured hero, genre rows, Short TV, TV & Web promo, premium panel and episode player.
Version: 1.1.0
Text Domain: lanabox
*/

:root{
 --lb-bg:#070b0f;--lb-panel:#10161b;--lb-panel2:#171d23;--lb-text:#f7fafb;
 --lb-muted:#9ba7ad;--lb-teal:#19efb2;--lb-cyan:#16c8ff;--lb-gold:#ffc83d;
 --lb-border:rgba(255,255,255,.08);--lb-max:1400px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--lb-bg);color:var(--lb-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input{font:inherit}
.lb-wrap{width:min(var(--lb-max),94%);margin:auto}
.lb-header{position:sticky;top:0;z-index:100;background:rgba(7,11,15,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--lb-border)}
.lb-nav{height:72px;display:flex;align-items:center;gap:28px}
.lb-logo{display:flex;align-items:center;gap:9px;min-width:max-content;font-weight:900;font-size:25px;letter-spacing:-1px}
.lb-logo svg{width:43px;height:43px}.lb-logo em{font-style:normal;color:var(--lb-teal)}
.lb-menu{display:flex;gap:22px;color:#c0c7cc;font-size:14px}
.lb-menu a:hover,.lb-menu .current{color:#fff}
.lb-search{margin-left:auto;display:flex;align-items:center;background:#161d23;border:1px solid #29323a;border-radius:24px;padding:0 13px;width:250px}
.lb-search input{width:100%;height:40px;background:transparent;border:0;outline:0;color:#fff}
.lb-premium{border:1px solid #f2bb2c;color:#ffd34d;border-radius:22px;padding:9px 15px;font-weight:800;white-space:nowrap}
.lb-user{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#182127;border:1px solid #2c3740}

.lb-hero{min-height:590px;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#0a0e12}
.lb-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.lb-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,12,.98) 0%,rgba(4,8,12,.82) 32%,rgba(4,8,12,.15) 72%),linear-gradient(0deg,#070b0f 0%,transparent 45%)}
.lb-hero-content{position:relative;z-index:2;padding:90px 0 70px;max-width:650px}
.lb-kicker{display:inline-block;color:#04140f;background:var(--lb-teal);padding:7px 11px;border-radius:5px;font-size:12px;font-weight:900}
.lb-hero h1{font-size:clamp(40px,5vw,72px);line-height:.98;margin:16px 0 12px;letter-spacing:-2px}
.lb-hero p{color:#d3d9dc;line-height:1.6;max-width:600px}
.lb-meta{color:#c8d0d4;margin:12px 0}.lb-actions{display:flex;gap:10px;margin-top:22px}
.lb-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:8px;padding:13px 19px;font-weight:800;cursor:pointer}
.lb-btn-primary{background:var(--lb-teal);color:#03130e}.lb-btn-dark{background:#222b31;color:#fff;border:1px solid #3b474e}

.lb-section{padding:32px 0}.lb-section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
.lb-section-title{font-size:25px;margin:0}.lb-see{color:#9fa9ae;font-size:14px}
.lb-row{display:flex;gap:15px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.lb-row::-webkit-scrollbar{display:none}
.lb-card{flex:0 0 185px;background:var(--lb-panel);border:1px solid var(--lb-border);border-radius:10px;overflow:hidden;transition:.2s}
.lb-card:hover{transform:translateY(-5px);border-color:rgba(25,239,178,.4)}
.lb-poster{aspect-ratio:2/3;object-fit:cover;width:100%;display:block;background:#151b20}
.lb-card-body{padding:10px 11px 12px}.lb-card-title{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-card-meta{font-size:12px;color:#849097;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lb-genres{display:flex;gap:10px;overflow:auto;scrollbar-width:none;margin-bottom:15px}.lb-chip{padding:9px 15px;border-radius:22px;background:#1a2127;color:#b9c1c5;white-space:nowrap;border:1px solid var(--lb-border)}
.lb-chip.active,.lb-chip:hover{background:#17352f;color:#fff;border-color:#1c9878}

.lb-promo{border:1px solid rgba(25,239,178,.35);border-radius:12px;overflow:hidden;background:linear-gradient(100deg,#0a8f7b,#13dca8 55%,#0a5f69);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;margin:10px 0}
.lb-promo h3{font-size:23px;margin:0 0 5px}.lb-promo p{margin:0;color:#e7fffa}.lb-promo-btn{background:#fff;color:#08735f;border-radius:22px;padding:10px 17px;font-weight:900;white-space:nowrap}

.lb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.lb-grid .lb-card{min-width:0}
.lb-premium-box{border:1px solid rgba(255,200,61,.35);background:linear-gradient(145deg,#241c0a,#15120c);border-radius:12px;padding:22px}
.lb-premium-box h3{margin:0 0 12px;color:#ffd35a}.lb-premium-box li{margin:9px 0;color:#d6d1bd}

.lb-footer{margin-top:55px;padding:45px 0 30px;border-top:1px solid var(--lb-border);background:#081015}
.lb-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}.lb-footer h4{margin:0 0 13px}.lb-footer a{display:block;color:#89969d;margin:8px 0;font-size:14px}.lb-copy{color:#68757c;font-size:12px;margin-top:30px}

.lb-single{padding:45px 0}.lb-player{background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9}.lb-player iframe,.lb-player video{width:100%;height:100%;border:0}
.lb-single-title{font-size:38px;margin:22px 0 7px}.lb-episodes{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.lb-episode{border:1px solid #303a42;background:#1a2026;color:#fff;border-radius:7px;padding:10px 14px;cursor:pointer}.lb-episode:hover,.lb-episode.active{background:var(--lb-teal);color:#03130e;border-color:var(--lb-teal)}
.lb-note{color:#8d989e;font-size:13px}.lb-back{color:var(--lb-teal);font-weight:700}


/* LanaBox mobile bottom navigation */
.lb-mobile-nav{
  display:none;
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(var(--lb-max),100%);
  height:76px;
  z-index:9999;
  background:rgba(28,31,36,.98);
  border:1px solid rgba(255,255,255,.08);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.35);
}
.lb-mobile-nav .lb-nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#c9cdd1;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
}
.lb-mobile-nav .lb-nav-icon{
  width:30px;height:30px;
  display:grid;place-items:center;
  font-size:24px;line-height:1;
}
.lb-mobile-nav .lb-nav-item.active{color:#fff}
.lb-mobile-nav .lb-nav-item.active .lb-nav-icon{color:var(--lb-teal)}
.lb-mobile-nav .lb-nav-center{position:relative}
.lb-mobile-nav .lb-free{
  position:absolute;
  width:76px;height:76px;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  border:3px solid #09a9e5;
  background:linear-gradient(145deg,#142d3d,#0a1117);
  box-shadow:0 0 0 5px #20242a,0 8px 22px rgba(0,0,0,.5);
  display:grid;place-items:end center;
  overflow:hidden;
}
.lb-mobile-nav .lb-free:before{
  content:"▶";
  position:absolute;
  top:12px;
  font-size:24px;
  color:#1ee7a0;
}
.lb-mobile-nav .lb-free span{
  width:100%;
  text-align:center;
  padding:3px 0;
  background:#078fd0;
  color:#fff;
  font-size:11px;
  font-weight:900;
}
@media(max-width:700px){
  body{padding-bottom:86px}
  .lb-mobile-nav{display:flex}
}

@media(max-width:1050px){.lb-menu{display:none}.lb-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){
 .lb-nav{height:62px;gap:10px}.lb-logo{font-size:22px}.lb-logo svg{width:35px;height:35px}.lb-premium{display:none}.lb-user{display:none}.lb-search{width:auto;flex:1}.lb-search input{height:36px}
 .lb-hero{min-height:520px}.lb-hero-content{padding:60px 0 50px}.lb-hero h1{font-size:43px}.lb-section{padding:25px 0}.lb-card{flex-basis:145px}.lb-promo{padding:17px;align-items:flex-start}.lb-promo-btn{display:none}
 .lb-grid{grid-template-columns:repeat(3,1fr);gap:10px}.lb-grid .lb-card{width:auto}.lb-single{padding:25px 0}.lb-single-title{font-size:29px}.lb-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){.lb-wrap{width:92%}.lb-grid{grid-template-columns:repeat(2,1fr)}.lb-card{flex-basis:135px}.lb-footer-grid{grid-template-columns:1fr}}