/* ============================================================
   InsationTV — Sleek Minimal Dark theme for WHMCS
   Part of the standalone "InsationTV" system theme (a copy of six).
   Place at:  templates/insationtv/css/custom.css   (overwrite the copied file)
   Palette + type match the approved mockups.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#0A0A0F;
  --surface:#121219;
  --surface2:#1A1A23;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --text:#ECECF2;
  --muted:#8E8EA0;
  --accent:#5B7CFA;
  --accent-hover:#6F8CFF;
  --accent2:#22D3EE;
  --green:#34D399;
  --amber:#FBBF24;
  --red:#F87171;
  --radius:14px;
}

/* ---------- Base ---------- */
html,body{
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
#main-body,.main-content,#main-menu + section,.body-wrapper,section{
  background:transparent !important;
}
#main-body{background:var(--bg) !important;}
h1,h2,h3,h4,h5,.page-header h1{
  font-family:'Space Grotesk','Inter',sans-serif !important;
  color:var(--text) !important;
  letter-spacing:-.01em;
}
p,span,td,li,label,div{color:inherit;}
.text-muted,small,.help-block,.text-domain{color:var(--muted) !important;}
a{color:var(--accent2);}
a:hover,a:focus{color:#7fe6f5;text-decoration:none;}
hr{border-color:var(--line) !important;}
code,pre{background:var(--surface2) !important;color:#cdd3ff !important;border-color:var(--line) !important;}

/* ---------- Header / top bar ---------- */
#header,.header-lined,.navbar-main,#main-menu,.navbar-default{
  background:rgba(10,10,15,.85) !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  backdrop-filter:blur(14px);
}
#header .logo,#logo,.logo-area{filter:none;}
.navbar-default .navbar-nav>li>a,#main-menu a,.navbar-nav>li>a{
  color:var(--muted) !important;font-weight:500;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-nav>li>a:hover{
  color:var(--text) !important;background:var(--surface2) !important;border-radius:8px;
}
.navbar-default .navbar-toggle{border-color:var(--line2) !important;}
.navbar-default .navbar-toggle .icon-bar{background:var(--text) !important;}

/* logged-in top utility bar / account dropdown */
.dropdown-menu{
  background:var(--surface) !important;border:1px solid var(--line) !important;
  border-radius:12px !important;box-shadow:0 12px 40px rgba(0,0,0,.5) !important;
}
.dropdown-menu>li>a{color:var(--text) !important;}
.dropdown-menu>li>a:hover{background:var(--surface2) !important;color:#fff !important;}
.dropdown-menu .divider{background:var(--line) !important;}

/* ---------- Panels / cards ---------- */
.panel,.well,.client-home-panels .panel,.panel-default{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:none !important;
  color:var(--text) !important;
}
.panel-heading,.panel-default>.panel-heading{
  background:var(--surface2) !important;
  border-bottom:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:var(--radius) var(--radius) 0 0 !important;
}
.panel-title{color:var(--text) !important;font-family:'Space Grotesk',sans-serif !important;font-weight:600;}
.panel-body{background:transparent !important;color:var(--text) !important;}
.panel-footer{background:var(--surface2) !important;border-top:1px solid var(--line) !important;color:var(--muted) !important;}
.panel:hover{border-color:var(--line2) !important;}

/* client area homepage shortcut panels */
.client-home-panels .panel .panel-body i,.home-panels i{color:var(--accent2) !important;}

/* ---------- Sidebars ---------- */
.primary-sidebar .panel,.secondary-sidebar .panel,.sidebar .panel{background:var(--surface) !important;}
.list-group{background:transparent !important;}
.list-group-item{
  background:transparent !important;border-color:var(--line) !important;color:var(--muted) !important;
}
.list-group-item:hover{background:var(--surface2) !important;color:var(--text) !important;}
.list-group-item.active,.list-group-item.active:hover{
  background:rgba(91,124,250,.14) !important;border-color:transparent !important;color:#fff !important;
}
.list-group-item.active .fa,.list-group-item.active i{color:var(--accent2) !important;}

/* ---------- Buttons ---------- */
.btn{border-radius:10px !important;font-weight:500 !important;border:1px solid transparent !important;transition:.16s !important;}
.btn-primary,.btn-info{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important;}
.btn-primary:hover,.btn-info:hover,.btn-primary:focus{background:var(--accent-hover) !important;border-color:var(--accent-hover) !important;}
.btn-default,.btn-secondary{background:transparent !important;border:1px solid var(--line2) !important;color:var(--text) !important;}
.btn-default:hover{background:var(--surface2) !important;color:#fff !important;}
.btn-success{background:var(--green) !important;border-color:var(--green) !important;color:#06281d !important;}
.btn-danger{background:var(--red) !important;border-color:var(--red) !important;color:#3a0c0c !important;}
.btn-link{color:var(--accent2) !important;}

/* ---------- Forms ---------- */
.form-control,input,select,textarea,.input-group-addon{
  background:var(--surface2) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
.form-control:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(91,124,250,.25) !important;}
.form-control::placeholder{color:var(--muted) !important;}
.input-group-addon{background:var(--surface) !important;color:var(--muted) !important;}
label,.control-label{color:var(--text) !important;font-weight:500;}
select option{background:var(--surface) !important;color:var(--text) !important;}

/* ---------- Tables ---------- */
.table{color:var(--text) !important;border-color:var(--line) !important;}
.table>thead>tr>th{
  border-bottom:1px solid var(--line) !important;color:var(--muted) !important;
  font-weight:500;text-transform:none;background:transparent !important;
}
.table>tbody>tr>td,.table>tbody>tr>th{border-top:1px solid var(--line) !important;background:transparent !important;}
.table-striped>tbody>tr:nth-of-type(odd){background:rgba(255,255,255,.02) !important;}
.table-hover>tbody>tr:hover{background:var(--surface2) !important;}
.table>tbody+tbody{border-color:var(--line) !important;}

/* ---------- Alerts / labels / badges ---------- */
.alert{border-radius:12px !important;border:1px solid var(--line) !important;background:var(--surface) !important;color:var(--text) !important;}
.alert-success{border-color:rgba(52,211,153,.4) !important;color:var(--green) !important;}
.alert-warning{border-color:rgba(251,191,36,.4) !important;color:var(--amber) !important;}
.alert-danger{border-color:rgba(248,113,113,.4) !important;color:var(--red) !important;}
.alert-info{border-color:rgba(34,211,238,.4) !important;color:var(--accent2) !important;}
.label,.badge{border-radius:999px !important;font-weight:600;padding:.35em .8em;}
.label-success,.badge-success{background:rgba(52,211,153,.15) !important;color:var(--green) !important;}
.label-warning{background:rgba(251,191,36,.15) !important;color:var(--amber) !important;}
.label-danger{background:rgba(248,113,113,.15) !important;color:var(--red) !important;}
.label-info,.label-default{background:rgba(34,211,238,.15) !important;color:var(--accent2) !important;}

/* ---------- Misc UI ---------- */
.breadcrumb{background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:10px !important;}
.breadcrumb>li,.breadcrumb a{color:var(--muted) !important;}
.well{background:var(--surface) !important;border:1px solid var(--line) !important;}
.modal-content{background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;color:var(--text) !important;}
.modal-header,.modal-footer{border-color:var(--line) !important;}
.pagination>li>a,.pagination>li>span{background:var(--surface) !important;border-color:var(--line) !important;color:var(--text) !important;}
.pagination>.active>a{background:var(--accent) !important;border-color:var(--accent) !important;}
.nav-tabs{border-color:var(--line) !important;}
.nav-tabs>li>a{color:var(--muted) !important;border:none !important;}
.nav-tabs>li.active>a{background:var(--surface) !important;color:var(--text) !important;border:1px solid var(--line) !important;border-bottom-color:var(--surface) !important;}
.progress{background:var(--surface2) !important;border-radius:999px !important;}
.progress-bar{background:var(--accent) !important;}

/* ---------- Footer ---------- */
#footer,.footer,footer{
  background:var(--bg) !important;border-top:1px solid var(--line) !important;color:var(--muted) !important;
}
#footer a,.footer a{color:var(--muted) !important;}
#footer a:hover{color:var(--text) !important;}

/* ---------- Login / register ---------- */
.login-fields,#frmLogin,.card.login{
  background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;
}

/* ---------- Order form (cart) ---------- */
.row-product-selection .panel,.product-selection-sidebar .panel,
.product,.package,.cartbox,.order-template-grid .panel{
  background:var(--surface) !important;border:1px solid var(--line) !important;
}
.product-selection-sidebar .list-group-item.active{background:rgba(91,124,250,.14) !important;}
.summary-container,.order-summary,#orderSummary{
  background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;color:var(--text) !important;
}
.cycle-selector,.pricing,.price{color:var(--text) !important;}
.product-recommendations-container,.product-recommendations{background:transparent !important;}

/* tidy default white cards anywhere we missed */
.tab-content,.contentpadded,.account-overview{background:transparent !important;color:var(--text) !important;}

/* ============================================================
   HEADER — single dark bar (pairs with the custom header.tpl)
   ============================================================ */
#header{
  position:sticky;top:0;z-index:1000;
  background:rgba(10,10,15,.92) !important;
  border-bottom:1px solid var(--line) !important;
  backdrop-filter:blur(14px);
  padding:0 !important;
}
#header .navbar-main,#header #nav{background:transparent !important;border:none !important;margin:0 !important;min-height:70px;}
#header .container{position:relative;}

/* logo (dark wordmark -> crisp white; drop a real white logo at /assets/img/logo.png anytime) */
#header .navbar-brand.logo{height:70px;display:flex;align-items:center;padding:0 18px 0 0;}
#header .navbar-brand.logo img{filter:brightness(0) invert(1);max-height:40px;width:auto;}
#header .navbar-brand.logo-text{color:var(--text) !important;font-family:'Space Grotesk',sans-serif;font-weight:600;}

/* primary nav links */
#header .navbar-nav>li>a{color:var(--muted) !important;font-weight:500 !important;font-size:15px;padding:15px 14px !important;border-radius:8px;}
#header .navbar-nav>li>a:hover,#header .navbar-nav>li.active>a,#header .navbar-nav>.open>a{color:var(--text) !important;background:var(--surface2) !important;}

/* right-side auth area */
#header .itv-auth{display:flex;align-items:center;}
#header .itv-auth>li{display:flex;align-items:center;}
#header .itv-auth .choose-language,#header .itv-auth>li>a{color:var(--muted) !important;}
#header .itv-pill-ghost>a{border:1px solid var(--line2) !important;color:var(--text) !important;padding:9px 18px !important;border-radius:10px !important;font-weight:500;margin:0 4px;line-height:1.2 !important;transition:.16s;}
#header .itv-pill-ghost>a:hover{background:var(--surface2) !important;color:#fff !important;}
#header .itv-pill-primary>a{background:var(--accent) !important;color:#fff !important;padding:9px 18px !important;border-radius:10px !important;font-weight:500;margin:0 4px;line-height:1.2 !important;transition:.16s;}
#header .itv-pill-primary>a:hover{background:var(--accent-hover) !important;}
#header .itv-cart>a{color:var(--muted) !important;padding:9px 12px !important;}
#header .itv-cart>a:hover{color:var(--text) !important;}

/* language popover + dropdowns dark */
.popover,.popover-content{background:var(--surface) !important;border-color:var(--line) !important;color:var(--text) !important;}
.popover.bottom .arrow:after{border-bottom-color:var(--surface) !important;}

/* mobile: stack auth under nav, no sticky overlap issues */
@media(max-width:767px){
  #header{position:static;}
  #header .navbar-brand.logo{height:auto;padding:8px 0;}
  #header .itv-auth{display:block;}
  #header .itv-pill-ghost>a,#header .itv-pill-primary>a{display:inline-block;margin:6px 0;}
}

/* ============================================================
   STORE / order form (premium_comparison) -> homepage dark cards
   (#main-body prefix beats the order-form style.css that loads after)
   ============================================================ */
#main-body .price-table{background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:16px !important;overflow:hidden !important;box-shadow:none !important;margin-bottom:20px !important;transition:.18s;}
#main-body .price-table:hover{border-color:var(--line2) !important;transform:translateY(-3px);}
#main-body .price-table .top-head{background:transparent !important;border-bottom:1px solid var(--line) !important;padding:24px 22px 22px !important;text-align:center !important;}
#main-body .price-table .top-area h4{color:var(--accent2) !important;font-family:'Space Grotesk',sans-serif !important;font-weight:600 !important;letter-spacing:.06em !important;text-transform:uppercase !important;font-size:16px !important;}
#main-body .price-table .price{color:var(--text) !important;font-size:30px !important;font-weight:700 !important;font-family:'Space Grotesk',sans-serif !important;margin:10px 0 16px !important;}
#main-body .price-table .order-button{display:inline-block !important;background:var(--accent) !important;color:#fff !important;border:none !important;border-radius:10px !important;padding:11px 28px !important;font-weight:500 !important;box-shadow:none !important;text-shadow:none !important;transition:.16s;}
#main-body .price-table .order-button:hover{background:var(--accent-hover) !important;color:#fff !important;}
#main-body .price-table ul{background:transparent !important;margin:0 !important;padding:6px 0 14px !important;list-style:none !important;}
#main-body .price-table li{background:transparent !important;color:#cfd2dc !important;border:none !important;padding:14px 22px !important;font-size:14px !important;line-height:1.55 !important;text-align:center !important;}

/* ============================================================
   Shopping cart  (cart.php?a=view  -> Review & Checkout)
   ============================================================ */
#main-body .view-cart-items-header{background:var(--surface2) !important;color:var(--text) !important;border:1px solid var(--line) !important;border-bottom:none !important;border-radius:12px 12px 0 0 !important;}
#main-body .view-cart-items-header div,#main-body .view-cart-items-header span,#main-body .view-cart-items-header strong{color:var(--text) !important;}
#main-body .view-cart-items .item{background:var(--surface) !important;border:1px solid var(--line) !important;border-top:none !important;color:var(--text) !important;}
#main-body .view-cart-items .item:last-child{border-radius:0 0 12px 12px !important;}
#main-body .view-cart-items .item .product-name,#main-body .view-cart-items .item .price{color:var(--text) !important;}