/* =====================================================================
   StreamingNation TV — Comic / Neon-Holographic theme
   Layered over the WHMCS "six" theme (Bootstrap 3).
   Selectable as its own template: templates/streamingnation
   Loaded last (css/custom.css) so it overrides all.min.css.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#070317; --ink2:#0d0724; --panel:#160c34; --panel2:#1d1140;
  --line:rgba(180,150,255,.18); --line2:rgba(180,150,255,.34);
  --cyan:#25e7ff; --mag:#ff2bd6; --vio:#9b5cff; --lime:#b6ff2e; --yel:#ffe14d;
  --text:#f3ecff; --muted:#a99ad6;
  --holo:linear-gradient(100deg,#25e7ff 0%,#6ea8ff 22%,#9b5cff 42%,#ff2bd6 62%,#ffe14d 82%,#b6ff2e 100%);
  --display:'Bangers',Impact,'Arial Black',sans-serif;
  --body:'Montserrat',system-ui,-apple-system,Helvetica,Arial,sans-serif;
}

/* ---------- Ground ---------- */
body{
  font-family:var(--body)!important; color:var(--text)!important;
  background:var(--ink)!important;
  background-image:
    radial-gradient(1200px 700px at 12% -8%, rgba(37,231,255,.14), transparent 60%),
    radial-gradient(1000px 700px at 90% 0%, rgba(255,43,214,.16), transparent 60%),
    radial-gradient(1100px 900px at 50% 130%, rgba(155,92,255,.20), transparent 55%),
    linear-gradient(180deg,#0a0522,#070317 60%)!important;
  background-attachment:fixed!important;
}
a{color:var(--cyan)} a:hover,a:focus{color:#9fefff}
h1,h2,h3,h4,.h1,.h2,.h3{color:#fff; letter-spacing:.01em}
hr{border-color:var(--line)}
.text-muted,small,.small{color:var(--muted)!important}
::selection{background:var(--mag); color:#fff}

/* Comic display headline helper */
.sn-comic,
#home-banner h1, #home-banner h2{
  font-family:var(--display)!important; font-weight:400; text-transform:uppercase; line-height:.95;
  background:var(--holo); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px #07031a; paint-order:stroke fill;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.5));
}

/* ---------- Header / logo ---------- */
#header{background:transparent!important; border:0!important}
#header .logo img{max-height:96px; width:auto; filter:drop-shadow(0 0 18px rgba(37,231,255,.45)) drop-shadow(0 0 26px rgba(255,43,214,.3))}

/* ---------- Navbar ---------- */
.navbar-main,.navbar-default.navbar-main{
  background:linear-gradient(180deg,rgba(10,5,30,.97),rgba(10,5,30,.82))!important;
  border:0!important; border-bottom:3px solid transparent!important; border-image:var(--holo) 1!important;
  box-shadow:0 6px 30px rgba(155,92,255,.25)!important; border-radius:0!important;
}
.navbar-main .navbar-nav > li > a{
  color:var(--text)!important; font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:13px;
}
.navbar-main .navbar-nav > li > a:hover,.navbar-main .navbar-nav > li > a:focus{
  color:#fff!important; background:rgba(155,92,255,.18)!important;
}
.navbar-main .navbar-nav > .active > a,.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .active > a:hover,.navbar-main .navbar-nav > .active > a:focus{
  color:#0a0320!important; background:var(--holo)!important;
}
.navbar-main .navbar-toggle{border-color:var(--line2)} .navbar-main .icon-bar{background:#fff!important}
.dropdown-menu{background:#140a30!important; border:1px solid var(--line2)!important; box-shadow:0 12px 40px rgba(0,0,0,.6)!important}
.dropdown-menu > li > a{color:var(--text)!important}
.dropdown-menu > li > a:hover{background:rgba(155,92,255,.18)!important; color:#fff!important}

/* ---------- Home banner (front-end hero) ---------- */
#home-banner,section#home-banner{
  background:
    radial-gradient(700px 380px at 82% 20%, rgba(255,43,214,.22), transparent 60%),
    radial-gradient(700px 420px at 10% 90%, rgba(37,231,255,.20), transparent 60%),
    linear-gradient(180deg,#160c34,#0c0726)!important;
  border:2px solid var(--line2)!important; border-radius:22px!important;
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 90px rgba(155,92,255,.14)!important;
  color:#fff!important; margin-top:20px; position:relative; overflow:hidden;
}
#home-banner::before{content:""; position:absolute; inset:-40% -10% auto -10%; height:180%; pointer-events:none;
  background:repeating-conic-gradient(from 200deg at 80% 24%, rgba(37,231,255,.10) 0 6deg, transparent 6deg 16deg, rgba(255,43,214,.10) 16deg 22deg, transparent 22deg 32deg);
  mix-blend-mode:screen}
#home-banner .sn-hero-inner{position:relative; z-index:2}

/* ---------- Home shortcuts ---------- */
.home-shortcuts{background:transparent!important; border:0!important}
.home-shortcuts li,.home-shortcuts > li{
  background:linear-gradient(180deg,var(--panel2),var(--panel))!important;
  border:2px solid var(--line2)!important; border-radius:16px!important; margin:8px!important;
  box-shadow:6px 6px 0 rgba(7,3,23,.7)!important; transition:transform .12s, box-shadow .12s, border-color .12s;
}
.home-shortcuts li:hover{transform:translate(-2px,-3px); box-shadow:9px 10px 0 rgba(7,3,23,.75)!important; border-color:var(--cyan)!important}
.home-shortcuts a,.home-shortcuts li a{color:#fff!important}
.home-shortcuts i{color:var(--cyan)!important}

/* ---------- Buttons ---------- */
.btn{font-family:var(--display)!important; font-weight:400; text-transform:uppercase; letter-spacing:.04em;
  border:3px solid #07031a!important; border-radius:12px!important; box-shadow:5px 5px 0 #07031a; transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 #07031a}
.btn-primary,.btn-success,.btn-info,.btn-order{background:var(--holo)!important; color:#0a0320!important; border-color:#07031a!important}
.btn-default,.btn-secondary{background:transparent!important; color:#fff!important; border-color:var(--line2)!important; box-shadow:5px 5px 0 rgba(155,92,255,.35)}
.btn-default:hover{border-color:var(--cyan)!important; color:#fff!important}
.btn-danger{background:var(--mag)!important; color:#fff!important}

/* ---------- Panels / cards / wells ---------- */
.panel,.card,.well,.jumbotron{
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0/14px 14px,
    linear-gradient(180deg,var(--panel2),var(--panel))!important;
  border:2px solid var(--line2)!important; border-radius:18px!important; color:var(--text)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.45)!important;
}
.panel-heading,.card-header{
  background:linear-gradient(90deg, rgba(155,92,255,.18), transparent)!important;
  border-bottom:2px solid var(--line)!important; color:#fff!important; border-radius:16px 16px 0 0!important;
}
.panel-title,.card-title,.card-header{font-family:var(--display)!important; font-weight:400; letter-spacing:.02em; font-size:20px; color:#fff!important}
.panel-body,.card-body{color:var(--text)!important}
.panel-footer,.card-footer{background:rgba(0,0,0,.2)!important; border-top:1px solid var(--line)!important; color:var(--muted)!important}

/* ---------- Tables ---------- */
.table{color:var(--text)!important; background:transparent!important}
.table > thead > tr > th{font-family:var(--display)!important; font-weight:400; letter-spacing:.03em; color:var(--muted)!important; border-bottom:2px solid var(--line)!important}
.table > tbody > tr > td,.table > tbody > tr > th{border-top:1px dashed var(--line)!important; color:var(--text)!important; background:transparent!important}
.table-striped > tbody > tr:nth-of-type(odd){background:rgba(255,255,255,.03)!important}
.table-hover > tbody > tr:hover{background:rgba(37,231,255,.08)!important}

/* ---------- Labels / badges (comic pills) ---------- */
.label,.badge{font-family:var(--display)!important; font-weight:400; letter-spacing:.03em; font-size:12px;
  border:2px solid #07031a!important; border-radius:999px!important; color:#0a0320!important; padding:.3em .8em}
.label-success,.badge-success,.label-active{background:var(--lime)!important}
.label-info,.badge-info{background:var(--cyan)!important}
.label-warning,.badge-warning{background:var(--yel)!important}
.label-danger,.badge-danger{background:var(--mag)!important; color:#fff!important}
.label-default{background:var(--vio)!important; color:#fff!important}

/* ---------- Forms ---------- */
.form-control,.input-group-addon,select,textarea,input[type=text],input[type=email],input[type=password]{
  background:rgba(0,0,0,.35)!important; color:#fff!important; border:1.5px solid var(--line2)!important; border-radius:10px!important}
.form-control:focus{border-color:var(--cyan)!important; box-shadow:0 0 0 3px rgba(37,231,255,.25)!important}
.form-control::placeholder{color:var(--muted)!important}

/* ---------- Alerts ---------- */
.alert{border:2px solid var(--line2)!important; border-radius:14px!important; color:var(--text)!important; background:rgba(255,255,255,.04)!important}
.alert-success{border-color:var(--lime)!important} .alert-danger{border-color:var(--mag)!important} .alert-info{border-color:var(--cyan)!important} .alert-warning{border-color:var(--yel)!important}

/* ---------- Footer ---------- */
#footer,footer{background:linear-gradient(180deg,transparent,rgba(10,5,30,.7))!important; border-top:2px solid transparent!important; border-image:var(--holo) 1!important; color:var(--muted)!important}
#footer a,footer a{color:var(--cyan)!important}

/* ---------- Misc ---------- */
.breadcrumb{background:rgba(255,255,255,.04)!important; border:1px solid var(--line)!important; border-radius:12px!important}
.breadcrumb a{color:var(--muted)!important} .breadcrumb .active{color:#fff!important}
.nav-tabs > li.active > a{background:var(--holo)!important; color:#0a0320!important; border:0!important; border-radius:10px 10px 0 0!important}
.nav-tabs > li > a{color:var(--text)!important; border-radius:10px 10px 0 0!important}
.pagination > li > a{background:rgba(0,0,0,.3)!important; color:var(--text)!important; border-color:var(--line)!important}
.pagination > .active > a{background:var(--holo)!important; color:#0a0320!important; border-color:transparent!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ===================== Hero stage: mascot + voltage ===================== */
#header,.navbar,.navbar-main,#nav,#main-menu,#main-body,.container,.sn-hero,#footer,footer,section{position:relative; z-index:1}
.sn-stage{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.sn-mascot{position:absolute; right:-4%; bottom:-2%; width:min(680px,86vw); height:136vh;
  background:url('../img/sn-mascot.png') right bottom/contain no-repeat;
  opacity:.14; filter:saturate(1.2) drop-shadow(0 0 40px rgba(155,92,255,.55));
  -webkit-mask-image:linear-gradient(to left,#000 50%,transparent 95%); mask-image:linear-gradient(to left,#000 50%,transparent 95%);
  animation:sn-breathe 8s ease-in-out infinite}
.sn-volt{position:absolute; inset:0; width:100%; height:100%}
.sn-volt .bolt{opacity:0}
.sn-sparks{position:absolute; inset:0; mix-blend-mode:screen;
  background-image:
   radial-gradient(2px 2px at 22% 30%, #b6ff2e, transparent),
   radial-gradient(2px 2px at 68% 20%, #25e7ff, transparent),
   radial-gradient(2.4px 2.4px at 82% 52%, #ff2bd6, transparent),
   radial-gradient(1.6px 1.6px at 40% 60%, #ffe14d, transparent),
   radial-gradient(1.6px 1.6px at 58% 78%, #9b5cff, transparent),
   radial-gradient(2px 2px at 30% 86%, #25e7ff, transparent),
   radial-gradient(1.8px 1.8px at 74% 88%, #b6ff2e, transparent);
  animation:sn-twinkle 2.2s steps(2) infinite}
@keyframes sn-breathe{50%{transform:translateY(-9px)}}
@keyframes sn-twinkle{0%,100%{opacity:.2} 50%{opacity:.9}}
@keyframes sn-strike{0%,9%,100%{opacity:0} 1%{opacity:1} 2.5%{opacity:.22} 4%{opacity:.95} 6.5%{opacity:.12}}
.b1{animation:sn-strike 4.2s infinite}.b2{animation:sn-strike 5.3s .7s infinite}.b3{animation:sn-strike 3.6s 1.4s infinite}
.b4{animation:sn-strike 6.1s .3s infinite}.b5{animation:sn-strike 4.9s 2.1s infinite}.b6{animation:sn-strike 5.7s 1.1s infinite}
@media (prefers-reduced-motion:reduce){.sn-mascot,.sn-sparks{animation:none} .sn-volt .bolt{opacity:.45; animation:none} .sn-sparks{opacity:.6}}

/* ============================ FLYER HOMEPAGE ============================ */
.sn-flyer{position:relative; margin:18px 0 26px; padding:28px 28px 0; border:2px solid var(--line2); border-radius:24px; overflow:hidden;
  background:
    radial-gradient(620px 380px at 82% 10%, rgba(255,43,214,.26), transparent 60%),
    radial-gradient(620px 440px at 6% 92%, rgba(37,231,255,.22), transparent 60%),
    radial-gradient(500px 500px at 50% 120%, rgba(155,92,255,.30), transparent 60%),
    linear-gradient(180deg,#180e3a,#0b0724);
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 0 120px rgba(155,92,255,.16)}
/* animated circuit traces (top-left) */
.sn-circuit{position:absolute; top:-6px; left:-6px; width:300px; height:300px; opacity:.55; pointer-events:none; z-index:1}
.sn-circuit path,.sn-circuit line{fill:none; stroke-width:2; stroke-dasharray:5 7; animation:sn-flow 5s linear infinite}
.sn-circuit circle{animation:sn-pulse 2.2s ease-in-out infinite}
@keyframes sn-flow{to{stroke-dashoffset:-48}}
@keyframes sn-pulse{50%{opacity:.35}}
/* flyer hero bolts */
.sn-flyer .sn-hbolt{opacity:0}
.hb1{animation:sn-strike 3.4s .2s infinite}.hb2{animation:sn-strike 4.6s 1s infinite}.hb3{animation:sn-strike 3.9s 1.7s infinite}.hb4{animation:sn-strike 5.2s .5s infinite}

.sn-flyer__grid{position:relative; z-index:3; display:grid; grid-template-columns:1.05fr 1fr; gap:18px; align-items:center}
.sn-tag{display:inline-block; font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:16px; color:#fff; background:rgba(0,0,0,.55); border:2px solid #fff; padding:6px 14px; transform:skewX(-7deg); box-shadow:3px 3px 0 rgba(37,231,255,.4)}
.sn-word{margin:14px 0 14px; line-height:.8; text-transform:uppercase}
.sn-word .w1,.sn-word .w2{display:block; font-family:var(--display); -webkit-text-stroke:2px #07031a; paint-order:stroke fill; filter:drop-shadow(3px 5px 0 rgba(0,0,0,.55)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sn-word .w1{font-size:clamp(44px,7.5vw,92px); background:linear-gradient(92deg,#ff5b3d,#ffd23d 30%,#37e0ff 60%,#ff2bd6); transform:rotate(-2deg)}
.sn-word .w2{font-size:clamp(52px,9vw,116px); background:var(--holo); margin-top:-.06em}
.sn-lead{color:#e8def9; font-size:16px; max-width:42ch; margin:2px 0 14px}
.sn-burst{position:relative; display:inline-block; font-family:var(--display); text-transform:uppercase; color:#07031a; background:#fff; border:3px solid #07031a; padding:10px 18px; line-height:1}
.sn-burst--price{text-align:center; transform:rotate(-3deg); margin:2px 0 18px; font-size:15px}
.sn-burst--price b{display:block; font-size:42px; margin:2px 0; background:linear-gradient(90deg,#b6ff2e,#ffe14d); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.5px #07031a}
.sn-hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
/* hero figure column */
.sn-fig{position:relative; min-height:440px; display:flex; align-items:flex-end; justify-content:center}
.sn-fig .sn-mascot-fig{width:min(430px,90%); filter:drop-shadow(0 0 46px rgba(155,92,255,.6)) saturate(1.15); z-index:2; animation:sn-breathe 8s ease-in-out infinite}
.sn-fig .sn-badge-lg{position:absolute; top:-6px; right:2%; width:150px; z-index:4; filter:drop-shadow(0 0 30px rgba(37,231,255,.65)); animation:sn-breathe 6.5s ease-in-out infinite}
.sn-star{position:absolute; z-index:5; color:#07031a; background:#fff; border:3px solid #07031a; padding:12px 18px; font-family:var(--display); text-transform:uppercase; font-size:15px; line-height:1; max-width:200px;
  clip-path:polygon(0% 22%,10% 8%,18% 20%,30% 2%,40% 18%,52% 4%,62% 20%,74% 6%,84% 22%,98% 12%,92% 34%,100% 46%,90% 58%,99% 72%,84% 74%,80% 92%,66% 78%,56% 96%,45% 78%,34% 94%,26% 76%,12% 88%,10% 68%,0% 60%,7% 46%)}
.sn-star em{font-style:normal; color:#ff2bd6}
.sn-star--1{left:-5%; bottom:20%; transform:rotate(-7deg)}
.sn-star--2{right:-6%; top:24%; transform:rotate(6deg); background:#0a0320; color:#fff; border-color:#25e7ff}
.sn-star--2 em{color:#b6ff2e}
.sn-neon{position:absolute; bottom:3%; right:4%; z-index:5; font-family:var(--display); text-transform:uppercase; font-size:24px; color:#fff; letter-spacing:.04em; text-shadow:0 0 6px #25e7ff,0 0 14px #25e7ff,0 0 26px #ff2bd6; animation:sn-flicker 4s infinite}
@keyframes sn-flicker{0%,97%,100%{opacity:1}98%{opacity:.4}}
/* defeated cable bar */
.sn-cablebar{position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin:22px -28px 0; padding:14px 20px; background:rgba(0,0,0,.5); border-top:2px solid var(--line2)}
.sn-cablebar b{font-family:var(--display); text-transform:uppercase; color:var(--muted); letter-spacing:.05em; margin-right:6px}
.sn-cablebar span{font-family:var(--display); text-transform:uppercase; font-size:14px; padding:5px 12px; border:2px solid #07031a; border-radius:6px; background:#241d3e; color:#cfc6ee; transform:rotate(-1deg)}
.sn-cablebar .bad{background:#3a1030; color:#ff9bd0; text-decoration:line-through; transform:rotate(1deg)}
.sn-cablebar .good{background:var(--lime); color:#07031a}
@media (max-width:880px){ .sn-flyer__grid{grid-template-columns:1fr} .sn-fig{order:-1; min-height:360px} .sn-star--1{left:0} .sn-star--2{right:0} }

/* ========================= LANDING HOMEPAGE (IMG_8232 layout) ========================= */
.sn-land{position:relative; z-index:3; color:var(--text)}
.sn-chrome{font-family:var(--display); text-transform:uppercase; line-height:.92;
  background:linear-gradient(180deg,#ffffff,#cfd4e2 52%,#9299ad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.sn-rain span{-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.35)}

/* ---- Hero ---- */
.sn-hero2{display:grid; grid-template-columns:1fr 1.02fr; gap:30px; align-items:center; padding:34px 0 26px}
.sn-hero2 h1{margin:0 0 14px; font-size:clamp(38px,5vw,60px)}
.sn-hero2 .price-line{font-family:var(--display); text-transform:uppercase; line-height:.92; font-size:clamp(34px,4.6vw,56px); margin-top:-.06em}
.price-line .a{background:linear-gradient(90deg,#ff2bd6,#ff5b9a)} .price-line .b{background:linear-gradient(90deg,#25e7ff,#6ea8ff)} .price-line .c{background:linear-gradient(90deg,#b6ff2e,#ffe14d)}
.sn-hero2 .lead{color:#cdbff0; font-size:16px; max-width:40ch; margin:6px 0 22px; line-height:1.6}
.sn-chips{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:520px; margin-bottom:24px}
.sn-chip{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:14px 8px; border-radius:14px;
  background:linear-gradient(180deg,rgba(30,18,60,.85),rgba(18,10,40,.85)); border:1.5px solid var(--line2); box-shadow:0 0 18px rgba(37,231,255,.08) inset}
.sn-chip .ic{width:40px; height:40px; display:grid; place-items:center; color:#fff}
.sn-chip small{font-weight:800; font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:#e7defc; line-height:1.25}
.sn-chip .num{position:absolute; margin-top:-46px; font-family:var(--display); font-size:12px; color:#0a0320; background:var(--cyan); padding:2px 7px; border-radius:6px}
.sn-chip.c1{border-color:rgba(37,231,255,.5)} .sn-chip.c2{border-color:rgba(255,43,214,.5)} .sn-chip.c3{border-color:rgba(182,255,46,.5)} .sn-chip.c4{border-color:rgba(37,231,255,.4)}
.sn-cta-trial{display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:420px; font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:24px; color:#fff; text-decoration:none;
  padding:16px 24px; border-radius:14px; background:linear-gradient(180deg,rgba(20,12,44,.6),rgba(12,7,30,.6)); border:2px solid transparent; border-image:linear-gradient(90deg,#ff7a1a,#ff2bd6,#9b5cff) 1;
  box-shadow:0 0 28px rgba(255,43,214,.35),0 0 40px rgba(155,92,255,.25); transition:transform .12s, box-shadow .12s}
.sn-cta-trial:hover{transform:translateY(-2px); box-shadow:0 0 40px rgba(255,43,214,.55),0 0 60px rgba(155,92,255,.4); color:#fff}
.sn-trust{display:flex; align-items:center; gap:8px; margin-top:14px; color:#b9acdf; font-size:13.5px}
.sn-trust svg{color:var(--cyan)}

/* ---- Right column: badge + TV mockup ---- */
.sn-show{position:relative; text-align:center}
.sn-show .badge{width:min(340px,74%); filter:drop-shadow(0 0 40px rgba(37,231,255,.5)) drop-shadow(0 0 60px rgba(255,43,214,.35)); animation:sn-breathe 7s ease-in-out infinite}
.sn-tv{margin:-30px auto 0; max-width:520px; background:#05040c; border:3px solid rgba(120,90,190,.5); border-radius:14px; padding:14px; box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(37,231,255,.15)}
.sn-tv__bar{display:flex; justify-content:space-between; align-items:center; color:#9fb4d6; font-size:12px; font-weight:700; letter-spacing:.05em; margin-bottom:10px}
.sn-tv__cats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px}
.sn-cat{border-radius:12px; padding:14px 6px 8px; text-align:center; color:#fff; font-weight:800; font-size:11px}
.sn-cat .ic{display:block; font-size:22px; margin-bottom:6px}
.sn-cat.live{background:linear-gradient(160deg,#123a6b,#0a1d38)} .sn-cat.sport{background:linear-gradient(160deg,#0f5a3a,#08301f)} .sn-cat.mov{background:linear-gradient(160deg,#5a1220,#2a0810)} .sn-cat.kids{background:linear-gradient(160deg,#7a4a10,#3a2408)}
.sn-tv__label{color:#8fa0c0; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:2px 0 8px}
.sn-tv__row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.sn-poster{aspect-ratio:2/3; border-radius:8px; position:relative; overflow:hidden; display:grid; place-items:end center; padding-bottom:8px}
.sn-poster::after{content:"▶"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.85); font-size:16px; opacity:.8}
.sn-poster span{position:relative; z-index:1; font-size:9px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:.03em}
.sn-poster.p1{background:linear-gradient(160deg,#2b3550,#0d1424)} .sn-poster.p2{background:linear-gradient(160deg,#3a1450,#140a24)} .sn-poster.p3{background:linear-gradient(160deg,#0f3a4a,#08202a)} .sn-poster.p4{background:linear-gradient(160deg,#4a1020,#240810)}

/* ---- Feature bar ---- */
.sn-featbar{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:8px 0 40px; padding:6px; border-radius:18px; border:1.5px solid var(--line2);
  background:linear-gradient(180deg,rgba(24,14,52,.7),rgba(14,8,34,.7)); box-shadow:0 0 30px rgba(155,92,255,.15) inset}
.sn-feat{display:flex; align-items:center; gap:12px; padding:16px 18px; border-right:1px solid var(--line)}
.sn-featbar .sn-feat:last-child{border-right:0}
.sn-feat .ic{flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line2); color:var(--cyan)}
.sn-feat b{display:block; font-size:14px; color:#fff} .sn-feat small{color:var(--muted); font-size:11.5px}

/* ---- 24HR FREE TRIAL section ---- */
.sn-trial{text-align:center; padding:14px 0 30px}
.sn-trial__head{display:flex; align-items:center; justify-content:center; gap:16px; font-family:var(--display); text-transform:uppercase; font-size:clamp(34px,5vw,58px); line-height:1}
.sn-trial__head .bolt-i{color:#6ea8ff; filter:drop-shadow(0 0 8px #25e7ff)}
.sn-trial__head .rain{background:linear-gradient(90deg,#ff2bd6,#9b5cff 40%,#25e7ff 70%,#b6ff2e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sn-stars{color:var(--yel); font-size:20px; letter-spacing:6px; margin:8px 0 4px}
.sn-trial__sub{color:#b9acdf; margin-bottom:22px}
.sn-plan{max-width:900px; margin:0 auto; padding:3px; border-radius:22px; background:linear-gradient(120deg,#ff2bd6,#9b5cff,#25e7ff,#b6ff2e); box-shadow:0 0 50px rgba(155,92,255,.3)}
.sn-plan__in{border-radius:20px; background:linear-gradient(180deg,#100a28,#0a0620); padding:26px 30px 30px}
.sn-plan .tier{font-family:var(--display); letter-spacing:.06em; font-size:18px}
.sn-plan .tier .p{color:#ff2bd6} .sn-plan .tier .l{color:#8fb4ff}
.sn-plan h3{font-family:var(--display); font-size:clamp(40px,6vw,66px); margin:2px 0 0; line-height:.9}
.sn-plan .free{font-family:var(--display); font-size:clamp(40px,6vw,66px); background:linear-gradient(90deg,#b6ff2e,#ffe14d,#25e7ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sn-checks{display:grid; grid-template-columns:1fr 1fr; gap:6px 30px; text-align:left; max-width:760px; margin:22px auto 24px}
.sn-checks div{display:flex; align-items:flex-start; gap:10px; padding:7px 0; color:#e7defc; font-size:14.5px; font-weight:600}
.sn-checks .ck{flex:0 0 auto; margin-top:1px; width:20px; height:20px; border-radius:5px; display:grid; place-items:center; background:rgba(37,231,255,.14); border:1.5px solid var(--cyan); color:var(--cyan); font-size:12px; font-weight:900}
.sn-plan .btn{margin-top:4px}
.sn-notice{max-width:900px; margin:18px auto 0; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding:14px 20px; border-radius:14px; border:1.5px solid var(--line2); background:rgba(12,7,30,.7)}
.sn-notice .n1{display:flex; align-items:center; gap:10px; font-weight:800; color:#e7defc; font-size:14px}
.sn-notice .n1 svg{color:var(--cyan)}
.sn-notice .n2{font-family:var(--display); letter-spacing:.03em; color:#ff4d8f; font-size:16px}
.sn-notice .sep{width:1px; height:22px; background:var(--line2)}

@media (max-width:900px){
  .sn-hero2{grid-template-columns:1fr; gap:18px} .sn-show{order:-1}
  .sn-chips{grid-template-columns:repeat(2,1fr); max-width:none}
  .sn-featbar{grid-template-columns:1fr 1fr} .sn-feat{border-right:0; border-bottom:1px solid var(--line)}
  .sn-checks{grid-template-columns:1fr} .sn-notice{flex-direction:column; gap:10px} .sn-notice .sep{display:none}
}

/* ===== white-background fix + real posters (v5) ===== */
section#main-body{background-color:transparent!important}
section#header .search .btn{background-color:rgba(255,255,255,.08)!important;border-color:var(--line2)!important;color:#fff!important}
.sn-poster{background-size:cover!important;background-position:center;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.sn-poster span{display:none}
.sn-poster::after{opacity:0;background:rgba(0,0,0,.28);transition:opacity .2s}
.sn-poster:hover::after{opacity:1}

/* ===== v6: "One Simple Price" per-word colors + logo over the Live TV box ===== */
.price-line span,.sn-rain span{
  -webkit-text-stroke:0!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(1px 2px 0 rgba(0,0,0,.55));
}
.price-line .a{background:linear-gradient(180deg,#ff7ad6,#ff179f)!important}   /* ONE  - pink/magenta */
.price-line .b{background:linear-gradient(180deg,#6fe6ff,#2f8dff)!important}   /* SIMPLE - cyan/blue */
.price-line .c{background:linear-gradient(180deg,#c6ff42,#ffe14d)!important}   /* PRICE - green->yellow */

/* badge overlaps the top of the TV mock, like the poster */
.sn-show{position:relative}
.sn-show .badge{position:relative;z-index:4;display:block;width:min(300px,64%);margin:0 auto -90px!important;
  filter:drop-shadow(0 0 40px rgba(37,231,255,.55)) drop-shadow(0 0 62px rgba(255,43,214,.4))}
.sn-tv{position:relative;z-index:1;margin:0 auto!important;padding-top:82px!important}

/* ===== v7: FIX "One Simple Price" — gradient clipped to text (shorthand was resetting background-clip) ===== */
.price-line .a,.price-line .b,.price-line .c{
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  -webkit-text-stroke:0!important;background-repeat:no-repeat;
  filter:drop-shadow(1px 2px 0 rgba(0,0,0,.5));
}
.price-line .a{background-image:linear-gradient(180deg,#ff7ad6,#ff179f)!important}   /* ONE */
.price-line .b{background-image:linear-gradient(180deg,#6fe6ff,#2f8dff)!important}   /* SIMPLE */
.price-line .c{background-image:linear-gradient(180deg,#c6ff42,#ffe14d)!important}   /* PRICE */

/* ===================== v8: FIX inner content-container regressions ===================== */
/* (1) Service/product-details page: the module client-area sat inside a WHITE
   ".product-details-tab-container" (all.min.css: background-color:#fff), which made the
   OTTStream dark cards render white-on-white. Darken it so the cards read correctly. */
.product-details-tab-container{
  background:linear-gradient(180deg,var(--panel2),var(--panel))!important;
  border:2px solid var(--line2)!important; border-top:0!important;
  border-radius:0 0 16px 16px!important; color:var(--text)!important;}
.product-details-tab-container .nav-tabs{border-bottom-color:var(--line)!important}

/* (2) Support-ticket markdown editor (.markdown-editor -> .md-editor) rendered white with
   white-on-white (invisible) toolbar icons. Dark-theme the whole widget. */
.md-editor{background:var(--ink2)!important; border:2px solid var(--line2)!important; border-radius:12px!important; overflow:hidden}
.md-editor.active{border-color:var(--cyan)!important; box-shadow:0 0 0 3px rgba(37,231,255,.2)!important}
.md-editor>.md-header,.md-editor>.btn-toolbar{background:linear-gradient(180deg,#1c1140,#160c34)!important; border-bottom:1px solid var(--line)!important; padding:8px!important}
.md-editor>textarea,.md-editor>textarea.markdown-editor{background:rgba(0,0,0,.35)!important; color:#fff!important; border-top:1px solid var(--line)!important; border-bottom:0!important; font-family:var(--body)!important}
.md-editor>textarea:focus{background:rgba(0,0,0,.45)!important}
.md-editor>.md-preview{background:rgba(0,0,0,.25)!important; color:var(--text)!important; border-top:1px dashed var(--line)!important; border-bottom:0!important}
.md-editor .md-controls .md-control{color:var(--muted)!important}
.md-editor .md-controls .md-control:hover{color:#fff!important}
.md-editor textarea::placeholder{color:var(--muted)!important}
/* toolbar buttons: strip the comic pill/box-shadow so the FA glyphs are visible on dark */
.md-editor .md-header .btn,.md-editor .btn-toolbar .btn{
  font-family:var(--body)!important; border:1px solid var(--line2)!important; border-radius:8px!important;
  box-shadow:none!important; background:rgba(255,255,255,.06)!important; color:#d7d0ff!important;
  padding:6px 10px!important; margin:2px!important}
.md-editor .md-header .btn:hover,.md-editor .btn-toolbar .btn:hover{
  transform:none!important; background:rgba(37,231,255,.16)!important; color:#fff!important; border-color:var(--cyan)!important}
.md-editor .md-header .btn i,.md-editor .btn-toolbar .btn i,.md-editor .md-header .btn .fa{color:inherit!important}

/* ===================== v9: FIX dropdown z-index + product/panel blues ===================== */
/* (1) Dropdown stacking: navbar/header and their menus must sit ABOVE content sections.
   v6 put #header, .navbar AND #main-body/.container/section all at z-index:1, so the
   later-in-DOM content painted over the navbar's overflowing dropdown and ate the clicks. */
#header,header#header,.navbar,.navbar-main,.navbar-default.navbar-main,#nav,#main-menu{z-index:1040!important}
.navbar-main .dropdown,.navbar-nav .dropdown{position:relative}
.dropdown-menu,.navbar-main .dropdown-menu,.navbar-nav .dropdown-menu,.navbar-nav .open>.dropdown-menu,.nav .open>.dropdown-menu{z-index:1060!important}

/* (2) Product-details overview: the big icon box + sidebar list were still light */
.product-details div.product-icon{
  background:linear-gradient(180deg,var(--panel2),var(--panel))!important; color:var(--cyan)!important;
  box-shadow:inset 0 0 44px rgba(37,231,255,.07)!important;}
.list-group{background:transparent!important}
.list-group-item,.list-group-item-action{background:rgba(255,255,255,.04)!important; border-color:var(--line)!important; color:var(--text)!important}
.list-group-item a,.list-group-item-action{color:var(--text)!important}
.list-group-item:hover,.list-group-item-action:hover{background:rgba(155,92,255,.16)!important; color:#fff!important}
.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus,
.list-group-item-action.active{background:var(--holo)!important; border-color:transparent!important; color:#0a0320!important}

/* (3) Kill remaining WHMCS default blues on product/panel elements */
.panel-accent-blue{border-top-color:var(--cyan)!important}
.panel-primary{border-color:var(--line2)!important}
.panel-primary>.panel-heading{background:linear-gradient(90deg,rgba(155,92,255,.20),transparent)!important; color:#fff!important; border-color:var(--line)!important}
.panel-primary>.panel-heading .badge{color:var(--vio)!important; background:#fff!important}
.panel-info{border-color:var(--line2)!important}
.panel-info>.panel-heading{background:rgba(37,231,255,.12)!important; color:var(--cyan)!important; border-color:var(--line2)!important}
.bg-primary{background:var(--vio)!important; color:#fff!important}
.text-primary{color:var(--cyan)!important}
.text-info{color:var(--cyan)!important}
.label-primary{background:var(--vio)!important; color:#fff!important}

/* ===================== v10: premium_comparison order-form pricing cards -> theme =====================
   The store pricing cards come from templates/orderforms/premium_comparison/css/style.css
   (stock WHMCS "Premium Slider": #006699 blue header, white body, #333 text). Those selectors are
   scoped under #order-premium_comparison (id specificity) with NO !important, so we win with !important.
   This block lives in the theme's custom.css, so it only applies while StreamingNation is active. */
#order-premium_comparison{color:var(--text)!important}
#order-premium_comparison h3,#order-premium_comparison h4,#order-premium_comparison h5{color:#fff!important}

/* card body */
#order-premium_comparison .price-table-container .price-table{
  background:linear-gradient(180deg,var(--panel2),var(--panel))!important;
  border:2px solid var(--line2)!important; border-radius:16px!important; overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 30px rgba(155,92,255,.12)!important;}

/* header (was blue gradient) */
#order-premium_comparison .price-table .top-head{
  background:linear-gradient(180deg,#251349,#160c34)!important;
  border-bottom:1px solid var(--line2)!important; border-radius:14px 14px 0 0!important;}
#order-premium_comparison .price-table .top-head .top-area{border-bottom:1px solid var(--line)!important}
#order-premium_comparison .price-table .top-head .top-area h4{
  font-family:var(--display)!important; font-weight:400!important; letter-spacing:.02em!important;
  color:#fff!important; font-size:26px!important; text-shadow:0 0 12px rgba(37,231,255,.45)!important;}
#order-premium_comparison .price-table .top-head .top-area p{color:var(--muted)!important}
#order-premium_comparison .price-table .top-head .price-area{
  border-top:1px solid var(--line)!important; color:var(--yel)!important;
  text-shadow:0 0 12px rgba(255,225,77,.35)!important;}
#order-premium_comparison .price-table .top-head .price-area .price span{
  font-family:var(--display)!important; color:var(--lime)!important;}

/* Order Now button (was blue gradient) -> holographic comic button */
#order-premium_comparison .price-table-container .order-button,
#order-premium_comparison .price-table-container .order-button:hover{
  background:var(--holo)!important; color:#0a0320!important; font-family:var(--display)!important;
  letter-spacing:.04em!important; border:2px solid #07031a!important; border-radius:10px!important;
  box-shadow:4px 4px 0 #07031a!important; text-shadow:none!important;}
#order-premium_comparison .price-table-container .order-button:hover{filter:brightness(1.08)!important}

/* feature rows (was #333 on white) */
#order-premium_comparison .price-table ul li{
  border-bottom:1px solid var(--line)!important; color:var(--text)!important;}
#order-premium_comparison .price-table ul li a{color:var(--cyan)!important}
#order-premium_comparison .price-table .popular-plan{
  background:rgba(155,92,255,.20)!important; border-bottom:1px solid var(--line2)!important; color:var(--lime)!important;}
#order-premium_comparison .main-container.price-01 .includes-features .head-area span{
  background:transparent!important; color:#fff!important;}