/* ==========================================================================
   motov.net — WHMCS skin  ("Night Shift" applied to the twenty-one theme)
   Loaded LAST (via the ClientAreaHeadOutput hook + viewinvoice.tpl) so it
   overrides WHMCS's compiled Bootstrap. Goal: the billing/payment pages look
   identical to the main storefront — no sign you've entered WHMCS.
   Self-contained (no @import); fonts come from the injected <link>.
   ========================================================================== */

:root{
  --bg:#070B16; --bg-2:#0A1020; --surface:#101830; --surface-2:#15203E;
  --line:rgba(148,168,210,.14); --line-2:rgba(148,168,210,.26);
  --text:#EAEEF8; --text-2:#9AA7C4; --text-3:#6B7899;
  --cobalt:#4666FF; --cobalt-2:#7A93FF; --cobalt-d:#2E49D8;
  --duty:#3DDC97; --amber:#FFB454; --danger:#FF6B5E;
  --font-display:'Unbounded',sans-serif;
  --font-body:'Golos Text','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',monospace;
  --radius:16px; --radius-s:10px; --wrap:1140px;
}

/* ---- Base + atmosphere --------------------------------------------------- */
html{scroll-behavior:smooth;}
body,body.primary-bg-color{
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--font-body) !important;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(148,168,210,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,168,210,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 78%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.65 0 0 0 0 0.8 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#header,#main-body,#footer,.container,.container-fluid{position:relative; z-index:1;}
a{color:var(--cobalt-2);}
a:hover{color:var(--text);}
hr{border-color:var(--line);}
::selection{background:rgba(70,102,255,.4); color:#fff;}

h1,h2,h3,.h1,.h2,.h3,.card-title,.card-subtitle,.page-header h1{
  font-family:var(--font-display) !important; font-weight:600 !important;
  letter-spacing:-.01em; color:var(--text) !important;
}
h4,h5,h6,.h4,.h5,.h6{font-family:var(--font-body); font-weight:600; color:var(--text);}
.text-muted,small,.small{color:var(--text-2) !important;}

/* ---- Header: reduce to a clean motov.net bar ---------------------------- */
#header.header{
  position:sticky; top:0; z-index:60;
  background:rgba(7,11,22,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); box-shadow:none;
}
#header .topbar,
#header .navbar .form-inline,
#header .navbar-nav.toolbar,
#header .main-navbar-wrapper,
.master-breadcrumb,
#header .cart-btn{display:none !important;}
#header .navbar{padding:.55rem 0; min-height:64px; background:transparent; border:0;}
#header .navbar .container{max-width:var(--wrap);}
.navbar-brand{font-family:var(--font-display); font-weight:700; color:var(--text) !important; padding:0;}
/* Brand = the storefront text logo (motov.net · AI Workforce), not an image */
.navbar-brand .logo-img,.logo-img{display:none !important;}
.motovai-logo{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color:var(--text) !important; text-decoration:none; letter-spacing:-.02em;
  line-height:1; white-space:nowrap;
}
.motovai-logo b{color:var(--cobalt-2) !important; font-weight:700;}
.motovai-logo .logo-suffix{
  font-family:var(--font-mono); font-weight:500; font-size:.66rem;
  color:var(--text-3) !important; letter-spacing:.02em; margin-left:.5em;
}

/* ---- Layout ------------------------------------------------------------- */
#main-body{background:transparent; padding:38px 0 60px;}
#main-body>.container{max-width:var(--wrap);}
.card{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:var(--radius) !important; box-shadow:0 18px 50px rgba(0,0,0,.35);
  color:var(--text);
}
.card-header{
  background:transparent !important; border-bottom:1px solid var(--line) !important;
  color:var(--text); font-family:var(--font-display); border-radius:var(--radius) var(--radius) 0 0 !important;
}
.card-body{color:var(--text);}
.card.bg-default,.bg-default{background:var(--surface) !important;}
.panel,.well{background:var(--surface) !important; border:1px solid var(--line) !important; color:var(--text);}

/* ---- Tables ------------------------------------------------------------- */
.table{color:var(--text);}
.table th,.table td{border-color:var(--line) !important; padding:.7rem .9rem;}
.table thead td,.table thead th{
  border-bottom:1px solid var(--line-2) !important; color:var(--text-2);
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
}
.table-striped tbody tr:nth-of-type(odd){background:rgba(148,168,210,.04);}
.table-hover tbody tr:hover{background:rgba(70,102,255,.08);}
.total-row,td.total-row,.table td.total-row,.table .total-row{
  background:rgba(148,168,210,.06) !important; color:var(--text) !important;
}
.total-row strong{color:var(--text) !important;}

/* ---- DataTables (invoices/services/domains/tickets lists) --------------- */
table.dataTable thead th,table.dataTable thead td,
th.sorting,th.sorting_asc,th.sorting_desc,th.sorting_disabled{
  background-color:transparent !important; color:var(--text-2) !important; border-color:var(--line-2) !important;
}
td.dataTables_empty{background-color:transparent !important; color:var(--text-3) !important;}
table.dataTable tbody tr,table.dataTable tbody td{background-color:transparent !important; color:var(--text);}
table.dataTable tbody tr.odd,table.dataTable.stripe tbody tr.odd{background-color:rgba(148,168,210,.04) !important;}
table.dataTable tbody tr:hover{background-color:rgba(70,102,255,.08) !important;}
.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_length,
.dataTables_wrapper label,.dataTables_wrapper .dataTables_filter{color:var(--text-2) !important;}

/* ---- Pagination --------------------------------------------------------- */
.pagination{background:transparent;}
.page-link{background-color:var(--surface) !important; border-color:var(--line) !important; color:var(--text-2) !important;}
.page-link:hover{background-color:var(--surface-2) !important; color:var(--text) !important; border-color:var(--line-2) !important;}
.page-item.active .page-link{background-color:var(--cobalt) !important; border-color:var(--cobalt) !important; color:#fff !important;}
.page-item.disabled .page-link{background-color:var(--bg-2) !important; color:var(--text-3) !important; border-color:var(--line) !important;}

/* ---- Nav tabs / pills --------------------------------------------------- */
.nav-tabs{border-bottom-color:var(--line) !important;}
.nav-tabs .nav-link,.nav-pills .nav-link{color:var(--text-2) !important; background-color:transparent !important; border-color:transparent;}
.nav-tabs .nav-link:hover{border-color:var(--line) var(--line) transparent !important; color:var(--text) !important;}
.nav-tabs .nav-link.active{
  background-color:var(--surface) !important; color:var(--text) !important;
  border-color:var(--line) var(--line) var(--surface) !important;
}
.nav-pills .nav-link.active{background-color:var(--cobalt) !important; color:#fff !important;}

/* ---- Toggle switches / progress / dropdowns / misc components ----------- */
.bootstrap-switch{border-color:var(--line-2) !important; border-radius:999px !important;}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default{background:var(--bg-2) !important; color:var(--text-2) !important;}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{background:var(--cobalt) !important; color:#fff !important;}
.bootstrap-switch .bootstrap-switch-label{background:var(--surface-2) !important; color:var(--text) !important;}
.progress{background:var(--bg-2) !important;}
.progress-bar{background:var(--cobalt) !important; color:#fff;}
.dropdown-menu{background:var(--surface) !important; border:1px solid var(--line) !important;}
.dropdown-item{color:var(--text-2) !important;}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-2) !important; color:var(--text) !important;}
.dropdown-divider{border-color:var(--line) !important;}
.dropdown-header{color:var(--text-3) !important;}
.custom-file-label,.custom-file-label::after{background:var(--bg-2) !important; color:var(--text-2) !important; border-color:var(--line-2) !important;}
.jumbotron{background:var(--surface) !important; color:var(--text);}
.popover{background:var(--surface) !important; border-color:var(--line) !important;}
.popover .popover-body,.popover .popover-header{background:transparent !important; color:var(--text) !important; border-color:var(--line);}
.tooltip-inner{background:var(--surface-2) !important; color:var(--text) !important;}

/* ---- Forms -------------------------------------------------------------- */
.form-control,.custom-select,.input-group-text,.StripeElement,input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],select,textarea{
  background:var(--bg-2) !important; border:1px solid var(--line-2) !important;
  color:var(--text) !important; border-radius:var(--radius-s) !important;
  box-shadow:none !important;
}
.form-control:focus,.custom-select:focus,select:focus,textarea:focus{
  border-color:var(--cobalt-2) !important; box-shadow:0 0 0 3px rgba(70,102,255,.25) !important;
}
.form-control::placeholder{color:var(--text-3) !important;}
label,.control-label,.col-form-label{color:var(--text-2); font-weight:500;}
.input-group-text{color:var(--text-2);}
.custom-control-label::before{background:var(--bg-2); border-color:var(--line-2);}
.custom-control-input:checked~.custom-control-label::before{background:var(--cobalt); border-color:var(--cobalt);}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  font-family:var(--font-body); font-weight:600; border-radius:999px;
  padding:12px 26px; border:1px solid transparent; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary,.btn-success,.modal-submit{
  background:linear-gradient(135deg,var(--cobalt),var(--cobalt-d)) !important;
  border-color:transparent !important; color:#fff !important;
  box-shadow:0 10px 30px rgba(70,102,255,.4),inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.btn-primary:hover,.btn-success:hover{box-shadow:0 14px 40px rgba(70,102,255,.55),inset 0 1px 0 rgba(255,255,255,.22) !important;}
.btn-default,.btn-secondary,.btn-light{
  background:transparent !important; color:var(--text) !important; border-color:var(--line-2) !important;
}
.btn-default:hover,.btn-secondary:hover{background:rgba(148,168,210,.08) !important; border-color:var(--text-2) !important;}
.btn-link{color:var(--cobalt-2) !important;}
.btn-lg{padding:16px 34px; font-size:1.05rem;}

/* ---- Homepage domain-search hero + white utility classes ---------------- */
.home-domain-search,.home-domain-search.bg-white{background:transparent !important; color:var(--text) !important;}
.home-domain-search h1,.home-domain-search h2,.home-domain-search h3,.home-domain-search .h1,.home-domain-search .h2{color:var(--text) !important;}
.home-domain-search .domain-search-tips,.home-domain-search p{color:var(--text-2) !important;}
.input-group-wrapper{background:transparent !important; padding:0 !important; box-shadow:none !important;}
/* Homepage quick-link tiles (keep the coloured accent border, dark body) */
[class*="card-accent-"]{background-color:var(--surface) !important; color:var(--text) !important; border-radius:var(--radius-s);}
[class*="card-accent-"]:hover{background-color:var(--surface-2) !important;}
[class*="card-accent-"] *{color:var(--text) !important;}
/* Bootstrap light utilities never belong on a dark theme */
.bg-white,.bg-light{background-color:var(--surface) !important;}
#main-body .bg-white,#main-body .bg-light,section .bg-white{background-color:transparent !important; color:var(--text);}
.text-dark,.text-black{color:var(--text) !important;}

/* ---- Verify-email / notification banners -------------------------------- */
.verification-banner,.verification-banner.email-verification,.top-notice{
  background:rgba(255,180,84,.1) !important; color:var(--text) !important;
  border-bottom:1px solid rgba(255,180,84,.32) !important;
}
.verification-banner a,.verification-banner .btn{color:var(--amber) !important; border-color:rgba(255,180,84,.4) !important; background:transparent !important;}
.verification-banner .close,.verification-banner i{color:var(--amber) !important;}

/* ---- Alerts / badges ---------------------------------------------------- */
.alert{border-radius:var(--radius-s); border:1px solid var(--line-2); background:var(--surface-2); color:var(--text);}
.alert-success{border-color:rgba(61,220,151,.4); background:rgba(61,220,151,.1); color:#c8f7e2;}
.alert-danger,.alert-error{border-color:rgba(255,107,94,.4); background:rgba(255,107,94,.1); color:#ffd7d2;}
.alert-info{border-color:rgba(70,102,255,.4); background:rgba(70,102,255,.1); color:#d7e0ff;}
.alert-warning{border-color:rgba(255,180,84,.4); background:rgba(255,180,84,.1); color:#ffe6c2;}
.badge-info,.badge-primary{background:var(--cobalt) !important; color:#fff;}
.label,.badge{border-radius:999px;}

/* ---- Invoice status pills (viewinvoice) --------------------------------- */
.invoice-status span{font-family:var(--font-mono); font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 16px; border-radius:999px; display:inline-block;}
.invoice-status .unpaid{background:rgba(255,180,84,.14); color:var(--amber); border:1px solid rgba(255,180,84,.4);}
.invoice-status .paid{background:rgba(61,220,151,.14); color:var(--duty); border:1px solid rgba(61,220,151,.4);}
.invoice-status .cancelled,.invoice-status .refunded,.invoice-status .collections{background:rgba(255,107,94,.14); color:var(--danger); border:1px solid rgba(255,107,94,.4);}
.invoice-status .draft{background:rgba(148,168,210,.14); color:var(--text-2); border:1px solid var(--line-2);}

/* ---- viewinvoice standalone --------------------------------------------- */
.invoice-container{
  background:var(--bg-2) !important; border:1px solid var(--line);
  border-radius:var(--radius); max-width:960px; margin:32px auto; padding:34px;
  color:var(--text) !important; box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.invoice-container h1,.invoice-container h2,.invoice-container h3,.invoice-container strong{color:var(--text) !important;}
.invoice-container .small-text,.invoice-container address,.transactions-container,.transactions-container *{color:var(--text-2) !important;}
.invoice-container hr{border-color:var(--line) !important;}
.invoice-container .card{background:var(--surface) !important;}

/* ---- Cart / checkout order summary + promo ------------------------------ */
#orderSummary,.order-summary,.summary-container,.order-summary-header,.summary-header{
  background-color:var(--surface) !important; color:var(--text) !important; border-color:var(--line) !important;
}
#orderSummary{border:1px solid var(--line) !important; border-radius:var(--radius) !important;}
#orderSummary *,.order-summary *,.summary-container *{color:var(--text) !important;}
.order-summary .summary-item,.summary-container .summary-item,.order-summary hr,.summary-container hr{border-color:var(--line) !important;}
.tab-content{background:transparent !important;}
.cart-loader,.cart .card{background:var(--surface) !important;}

/* ---- Invoice payment (/pay) summary ------------------------------------- */
.invoice-summary,.payment-summary{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--text);}
.cc-payment-form .form-group{margin-bottom:1rem;}
#btnSubmit{min-width:220px;}
.paymethod-info,.paymethod-info.selected,.existing-payment-method,.account-selection .item{
  background:var(--bg-2) !important; border:1px solid var(--line-2) !important;
  color:var(--text) !important; border-radius:var(--radius-s) !important;
}
.paymethod-info.selected{border-color:var(--cobalt) !important; box-shadow:0 0 0 2px rgba(70,102,255,.25);}
.paymethod-info *{color:var(--text) !important;}

/* ---- Footer ------------------------------------------------------------- */
#footer.footer{
  background:transparent; border-top:1px solid var(--line);
  margin-top:40px; padding:30px 0; color:var(--text-3);
}
#footer .container{max-width:var(--wrap);}
#footer .nav-link{color:var(--text-2) !important;}
#footer .nav-link:hover{color:var(--text) !important;}
#footer .copyright{color:var(--text-3);}
#footer .btn{color:var(--text-2) !important;}

/* ---- Modals ------------------------------------------------------------- */
.modal-content{background:var(--surface); border:1px solid var(--line); color:var(--text); border-radius:var(--radius);}
.modal-header,.modal-footer{border-color:var(--line);}
.close{color:var(--text) !important; text-shadow:none; opacity:.7;}

/* ---- Client-area home tiles/panels -------------------------------------- */
.tile,.client-home-panels .panel,.stats-panel{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  color:var(--text) !important; border-radius:var(--radius-s) !important; box-shadow:none !important;
}
.tile:hover{border-color:var(--line-2) !important; transform:translateY(-1px);}
.tile .name,.tile span,.tile div{color:var(--text-2) !important;}
.tile .h1,.tile h1,.tile .stat{color:var(--cobalt-2) !important;}

/* ---- Misc --------------------------------------------------------------- */
.list-group-item{background:var(--surface); border-color:var(--line); color:var(--text);}
.breadcrumb{background:transparent;}
.text-center.gateway-errors{border-radius:var(--radius-s);}
.sidebar .list-group-item,.sidebar .panel{background:var(--surface);}
.sidebar-heading,.panel-heading{color:var(--text-2); font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; font-size:.76rem;}