/* =========================================================
   KSHIP PORTAL – FULL DARK THEME + LOGIN HERO BACKGROUND
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --kship-yellow:#f5c400;

  --bg:#070a0f;
  --panel: rgba(0,0,0,.42);
  --panel-soft: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);

  --text:#ffffff;
  --muted: rgba(255,255,255,.78);

  --radius: 18px;
  --shadow: 0 14px 40px rgba(0,0,0,.35);

  --hero-img: url("https://kship.com/wp-content/uploads/2025/01/main-bg-form-slide4.webp");
  --hero-overlay: rgba(0,0,0,.68);
}

html, body { height:100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* WHMCS main body wrapper */
#main-body{
  min-height: 100vh;
  background-color: transparent !important; /* DO NOT use background: shorthand */
}


/* ---------------------------------------------------------
   GLOBAL DARK THEME (all client area pages)
   --------------------------------------------------------- */

/* Text defaults */
#main-body,
#main-body *{
  color: var(--text);
}

/* Muted text */
.text-muted, small, .small, .help-block{
  color: var(--muted) !important;
}

/* Links */
a{ color:#fff; }
a:hover{ color:#fff; opacity:.9; }

/* Hide breadcrumb bar (optional) */
.master-breadcrumb{ display:none !important; }

/* Cards/Panels */
.card, .panel, .well,
.list-group, .list-group-item,
.sidebar .panel, .sidebar .card{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

/* Panel/card headers */
.card-header,
.panel-heading{
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: var(--text) !important;
}

/* Sidebar list items */
.sidebar .list-group-item{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.sidebar .list-group-item:hover{
  background: rgba(255,255,255,.10) !important;
}

/* Forms */
input, select, textarea, .form-control{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-radius: 14px !important;
}
input::placeholder, textarea::placeholder, .form-control::placeholder{
  color: rgba(255,255,255,.65) !important;
}
.input-group-text{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.9) !important;
  border-radius: 14px !important;
}
label, .form-control-label{
  color: rgba(255,255,255,.92) !important;
}
.form-check-input{ accent-color: var(--kship-yellow); }

/* Tables */
.table, table{ color:#fff !important; }
.table thead th{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.table td, .table th{
  border-color: rgba(255,255,255,.10) !important;
}
.table-striped tbody tr:nth-of-type(odd){
  background: rgba(255,255,255,.04) !important;
}

/* Alerts */
.alert{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.35) !important;
  color: #fff !important;
}

/* Buttons */
.btn{
  border-radius: 14px !important;
  font-weight: 800 !important;
  padding: .75rem 1rem !important;
}
.btn-primary, .btn-success{
  background: var(--kship-yellow) !important;
  border-color: var(--kship-yellow) !important;
  color:#000 !important;
}
.btn-primary:hover, .btn-success:hover{ filter: brightness(.95); }

.btn-secondary, .btn-default, .btn-outline-primary, .btn-outline-secondary{
  background: transparent !important;
  border-color: rgba(255,255,255,.35) !important;
  color:#fff !important;
}
.btn-secondary:hover, .btn-default:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover{
  background: rgba(255,255,255,.10) !important;
}

/* Dropdown menus */
.dropdown-menu{
  background: rgba(0,0,0,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
}
.dropdown-item{ color:#fff !important; }
.dropdown-item:hover{ background: rgba(255,255,255,.10) !important; }

/* Modals */
.modal-content{
  background: rgba(0,0,0,.90) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 18px !important;
  color:#fff !important;
}

/* ---------------------------------------------------------
   HEADER/NAV – FORCE DARK (all pages)
   --------------------------------------------------------- */

.kship-brand-logo{ height:34px; width:auto; display:inline-block; }

/* Your header.tpl: <header id="header" class="header kship-navbar"> */
header.kship-navbar{
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Force BOTH navbar rows dark even if they use navbar-light */
header.kship-navbar .navbar,
header.kship-navbar .navbar.navbar-light,
header.kship-navbar .navbar-expand-xl,
header.kship-navbar .main-navbar-wrapper,
header.kship-navbar .topbar{
  background-color: rgba(0,0,0,.35) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}

/* Header links visible */
header.kship-navbar a,
header.kship-navbar .nav-link,
header.kship-navbar .dropdown-toggle{
  color:#fff !important;
  font-weight:700;
  opacity:.92;
}
header.kship-navbar a:hover{ opacity:1; }
header.kship-navbar .dropdown-toggle::after{ border-top-color:#fff !important; }

/* Header search dark */
header.kship-navbar .form-control,
header.kship-navbar .input-group-text{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color:#fff !important;
}
header.kship-navbar .form-control::placeholder{
  color: rgba(255,255,255,.70) !important;
}

/* ---------------------------------------------------------
   LOGIN HERO (background image + overlay) – LOGIN ONLY
   Primary trigger: body.kship-hero
   Fallback trigger: body:has(form.login-form)  (modern browsers)
   --------------------------------------------------------- */

/* Apply hero background to #main-body on login */
body.kship-hero #main-body,
body:has(form.login-form) #main-body{
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Overlay */
body.kship-hero #main-body::before,
body:has(form.login-form) #main-body::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hero-overlay);
  pointer-events:none;
}

/* Ensure page content is above overlay */
body.kship-hero #main-body > .container,
body:has(form.login-form) #main-body > .container,
body.kship-hero #main-body > .container-fluid,
body:has(form.login-form) #main-body > .container-fluid{
  position:relative;
  z-index:2;
}

/* Make header float over hero on login (removes “gray slab” look) */
body.kship-hero header.kship-navbar,
body:has(form.login-form) header.kship-navbar{
  position: absolute !important;
  left: 0; right: 0; top: 0;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
}

/* Subtle header on login */
body.kship-hero header.kship-navbar .navbar,
body:has(form.login-form) header.kship-navbar .navbar,
body.kship-hero header.kship-navbar .navbar.navbar-light,
body:has(form.login-form) header.kship-navbar .navbar.navbar-light{
  background-color: rgba(0,0,0,.18) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Hide big menu row + header tools on login (clean like your suspended page) */
body.kship-hero header.kship-navbar .main-navbar-wrapper,
body:has(form.login-form) header.kship-navbar .main-navbar-wrapper{
  display:none !important;
}
body.kship-hero header.kship-navbar form.form-inline,
body:has(form.login-form) header.kship-navbar form.form-inline,
body.kship-hero header.kship-navbar .input-group.search,
body:has(form.login-form) header.kship-navbar .input-group.search,
body.kship-hero header.kship-navbar .navbar-nav.toolbar,
body:has(form.login-form) header.kship-navbar .navbar-nav.toolbar,
body.kship-hero header.kship-navbar .navbar-nav.ml-auto,
body:has(form.login-form) header.kship-navbar .navbar-nav.ml-auto{
  display:none !important;
}

/* Room under floating header */
body.kship-hero #main-body,
body:has(form.login-form) #main-body{
  padding-top: 96px !important;
}

/* Login form centering + glass tuning */
body.kship-hero .login-form,
body:has(form.login-form) .login-form{
  min-height: calc(100vh - 140px);
  display:flex;
  align-items:center;
  justify-content:center;
}
body.kship-hero .login-form .card.mw-540,
body:has(form.login-form) .login-form .card.mw-540{
  width:100%;
  max-width:560px;
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(10px);
  overflow:hidden;
}
body.kship-hero .login-form h6.h3,
body:has(form.login-form) .login-form h6.h3{
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:-.02em;
}
body.kship-hero .login-form .text-muted,
body:has(form.login-form) .login-form .text-muted{
  color: rgba(255,255,255,.78) !important;
}

/* Fix input group corners in login */
body.kship-hero .login-form .input-group-text,
body:has(form.login-form) .login-form .input-group-text{
  border-radius: 14px 0 0 14px !important;
}
body.kship-hero .login-form .form-control,
body:has(form.login-form) .login-form .form-control{
  border-left: 0 !important;
  border-radius: 0 14px 14px 0 !important;
}

/* Login button */
body.kship-hero .login-form #login,
body:has(form.login-form) .login-form #login{
  background: var(--kship-yellow) !important;
  border-color: var(--kship-yellow) !important;
  color:#000 !important;
  font-weight:900 !important;
  padding: .85rem 1.1rem !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Footer on login: subtle (optional). Remove if you want it hidden. */
body.kship-hero footer,
body:has(form.login-form) footer,
body.kship-hero #footer,
body:has(form.login-form) #footer{
  background: rgba(0,0,0,.22) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}
body.kship-hero footer *,
body:has(form.login-form) footer *,
body.kship-hero #footer *,
body:has(form.login-form) #footer *{
  color: rgba(255,255,255,.85) !important;
}

/* Mobile */
@media (max-width: 575px){
  body.kship-hero .login-form,
  body:has(form.login-form) .login-form{
    min-height: auto;
    padding: 18px 0 28px;
    align-items:flex-start;
  }
  body.kship-hero .login-form .card-body,
  body:has(form.login-form) .login-form .card-body{
    padding: 28px 22px !important;
  }
}

/* ---------------------------------------------------------
   STANDARD_CART ORDER FORM (cart/checkout pages)
   --------------------------------------------------------- */

#order-standard_cart{
  color:#fff;
}
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .sidebar .panel,
#order-standard_cart .cart-body,
#order-standard_cart .cart-summary,
#order-standard_cart .view-cart-items{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
#order-standard_cart .nav-tabs .nav-link{
  color: rgba(255,255,255,.88) !important;
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(255,255,255,.12) !important;
}
#order-standard_cart .nav-tabs .nav-link.active{
  color:#fff !important;
  background: rgba(0,0,0,.45) !important;
  border-color: rgba(255,255,255,.18) !important;
}
#order-standard_cart .promo,
#order-standard_cart .estimate-taxes,
#order-standard_cart .sub-heading,
#order-standard_cart .well{
  background: rgba(0,0,0,.38) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
}

/* ---------------------------------------------------------
   FOOTER (default)
   --------------------------------------------------------- */
footer, #footer{
  background: rgba(0,0,0,.35) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
footer *, #footer *{
  color: rgba(255,255,255,.25) !important;
}
/* =========================================================
   FOOTER – dark, readable, matches KShip theme
   ========================================================= */

/* WHMCS footer containers vary by theme/version */
footer,
#footer,
.footer,
.footer-holder,
.footer-bar{
  background-color: rgba(0,0,0,.55) !important;
  background-image: none !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
}

/* If footer has an inner container, keep it clean */
footer .container,
#footer .container,
.footer .container{
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Force all footer text to be light */
footer *,
#footer *,
.footer *{
  color: rgba(255,255,255,.85) !important;
}

/* Links */
footer a,
#footer a,
.footer a{
  color: rgba(255,255,255,.92) !important;
  text-decoration: none;
}
footer a:hover,
#footer a:hover,
.footer a:hover{
  color: #fff !important;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Small/Muted text in footer */
footer .text-muted,
#footer .text-muted,
.footer .text-muted,
footer small,
#footer small,
.footer small{
  color: rgba(255,255,255,.72) !important;
}

/* Optional: make footer “glass” like cards (comment out if you want solid) */
/*
footer, #footer, .footer{
  backdrop-filter: blur(10px);
}
*/

/* =========================================================
   GLOBAL “PERFECT DARK” touches (safe)
   ========================================================= */

/* Remove any white page background wrappers */
.container,
.container-fluid{
  background: transparent !important;
}

/* HR lines */
hr{
  border-color: rgba(255,255,255,.12) !important;
}

/* Pagination */
.pagination .page-link{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color:#fff !important;
}
.pagination .page-item.active .page-link{
  background: var(--kship-yellow) !important;
  border-color: var(--kship-yellow) !important;
  color:#000 !important;
}

/* Badges */
.badge,
.badge-info,
.badge-success,
.badge-warning,
.badge-danger{
  background: rgba(255,255,255,.14) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

/* Ensure “tiles” / dashboard widgets don’t go light */
.client-home-panels .panel,
.client-home-panels .card,
.tiles .tile,
.tile{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
}
/* =========================================================
   KSHIP FOOTER – DROP-IN (safe, does NOT match .card-footer)
   ========================================================= */

/* REAL footer targets only (no [class*="footer"] broad match) */
footer:not(.card-footer),
#footer:not(.card-footer),
.footer:not(.card-footer),
.footer-bar:not(.card-footer),
.whmcs-footer:not(.card-footer),
body > footer:not(.card-footer),
body > #footer:not(.card-footer),
body > .footer:not(.card-footer),
body > .footer-bar:not(.card-footer),
body > .whmcs-footer:not(.card-footer){
  background-color: rgba(0,0,0,.78) !important;
  background-image: none !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(10px);
}

/* Force all footer content to light text */
footer:not(.card-footer) *,
#footer:not(.card-footer) *,
.footer:not(.card-footer) *,
.footer-bar:not(.card-footer) *,
.whmcs-footer:not(.card-footer) *{
  color: rgba(255,255,255,.86) !important;
}

/* Footer links */
footer:not(.card-footer) a,
#footer:not(.card-footer) a,
.footer:not(.card-footer) a,
.footer-bar:not(.card-footer) a,
.whmcs-footer:not(.card-footer) a{
  color: rgba(255,255,255,.95) !important;
  text-decoration: none !important;
}
footer:not(.card-footer) a:hover,
#footer:not(.card-footer) a:hover,
.footer:not(.card-footer) a:hover{
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Muted footer text */
footer:not(.card-footer) .text-muted,
#footer:not(.card-footer) .text-muted,
.footer:not(.card-footer) .text-muted,
footer:not(.card-footer) small,
#footer:not(.card-footer) small,
.footer:not(.card-footer) small{
  color: rgba(255,255,255,.70) !important;
}

/* Footer spacing */
footer:not(.card-footer) .container,
#footer:not(.card-footer) .container,
.footer:not(.card-footer) .container{
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* Safety: keep login card footer styled like a card, not the site footer */
.card-footer{
  background: rgba(0,0,0,.28) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
/* =========================================================
   KSHIP: FIX WHITE CANVAS (register + various client pages)
   Twenty-One sometimes paints white on wrappers like:
   body.primary-bg-color, .primary-content, .content-padded, etc.
   ========================================================= */

/* 1) Force overall page background to be dark (Twenty-One uses primary-bg-color) */
body.primary-bg-color{
  background-color: var(--bg) !important;
  background-image: none !important;
}

/* 2) Make common WHMCS wrapper blocks transparent so your dark body shows through */
#main-body,
#main-body > .container,
#main-body > .container-fluid,
#main-body .row,
.primary-content,
.secondary-content,
.content-padded,
.main-content,
.main-content-wrapper,
.content-wrapper,
#content,
#content-wrapper,
#container,
#container-fluid,
#whmcs-container,
.whmcs-container,
.bg-white,
.bg-light{
  background: transparent !important;
  background-color: transparent !important;
}

/* 3) If any templates set a white “page box”/panel wrapper, neutralize it */
.panel-body,
.panel-footer,
.card-body{
  background: transparent !important;
  background-color: transparent !important;
}

/* 4) Register page: ensure the form area sits on dark, not white */
body:not(.kship-hero) .signup, 
body:not(.kship-hero) .signup-wrapper,
body:not(.kship-hero) .signup-content,
body:not(.kship-hero) .login-container,
body:not(.kship-hero) .login-wrapper{
  background: transparent !important;
}

/* 5) The little “Already Registered?” widget uses .panel / .card already,
      but ensure its inner list items don't turn light */
body:not(.kship-hero) .list-group-item{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
}
body:not(.kship-hero) .list-group-item:hover{
  background: rgba(255,255,255,.10) !important;
}

/* 6) Ensure headings on these pages don’t look “washed out” */
body:not(.kship-hero) h1,
body:not(.kship-hero) h2,
body:not(.kship-hero) h3,
body:not(.kship-hero) h4,
body:not(.kship-hero) h5,
body:not(.kship-hero) h6{
  color: #fff !important;
}
/* =========================================================
   LOGIN HERO – FORCE BACKGROUND IMAGE (wins over everything)
   ========================================================= */

/* Use both triggers: body.kship-hero OR presence of the login form */
body.kship-hero #main-body,
body:has(form.login-form) #main-body{
  background-image: url("https://kship.com/wp-content/uploads/2025/01/main-bg-form-slide4.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important; /* keep image visible */
  position: relative !important;
}

/* Overlay */
body.kship-hero #main-body::before,
body:has(form.login-form) #main-body::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.68) !important;
  pointer-events:none;
  z-index:1;
}

/* Make sure login content sits above overlay */
body.kship-hero #main-body > .container,
body:has(form.login-form) #main-body > .container,
body.kship-hero #main-body > .container-fluid,
body:has(form.login-form) #main-body > .container-fluid{
  position: relative !important;
  z-index: 2 !important;
}
/* =========================================================
   KSHIP: FORCE HEADER DARK (all pages except login hero)
   ========================================================= */

/* Make header sticky again on normal pages */
body:not(.kship-hero) header#header{
  position: sticky !important;
  top: 0;
  z-index: 9999;
}

/* Force BOTH header rows dark (Twenty-One uses navbar-light + gray bg) */
body:not(.kship-hero) header#header .navbar,
body:not(.kship-hero) header#header .navbar.navbar-light,
body:not(.kship-hero) header#header .main-navbar-wrapper,
body:not(.kship-hero) header#header .topbar{
  background-color: rgba(0,0,0,.55) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}

/* Make header links/icons visible */
body:not(.kship-hero) header#header a,
body:not(.kship-hero) header#header .nav-link,
body:not(.kship-hero) header#header .dropdown-toggle,
body:not(.kship-hero) header#header .btn,
body:not(.kship-hero) header#header i,
body:not(.kship-hero) header#header .navbar-toggler{
  color: #fff !important;
  opacity: .92;
}
body:not(.kship-hero) header#header a:hover{ opacity: 1; }
body:not(.kship-hero) header#header .dropdown-toggle::after{
  border-top-color: #fff !important;
}

/* Search box in header */
body:not(.kship-hero) header#header .form-control,
body:not(.kship-hero) header#header .input-group-text{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
body:not(.kship-hero) header#header .form-control::placeholder{
  color: rgba(255,255,255,.70) !important;
}

/* Cart badge */
body:not(.kship-hero) header#header .badge,
body:not(.kship-hero) header#header .badge-info{
  background: rgba(255,255,255,.18) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* =========================================================
   REGISTER / SYSTEM NOTICE BARS – make them match dark theme
   ========================================================= */

.alert,
.alert-info,
.alert-success,
.alert-warning,
.alert-danger{
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: 14px !important;
}

/* The “registration disabled / place an order” notice often uses .info-box or similar */
.info-box,
.messagebox,
.notice,
.registration-notice{
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-radius: 14px !important;
}

/* If the register form DOES exist, keep it glass */
.signup .panel,
.signup .card,
#registration .panel,
#registration .card{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px);
}
/* =========================================================
   KSHIP: CLIENT AREA HOME – perfect dark pass
   (Header + tiles + home panels + buttons/badges)
   ========================================================= */

/* ---------- Header/topbar: kill gray, force dark ---------- */
body:not(.kship-hero) #header,
body:not(.kship-hero) #header .topbar,
body:not(.kship-hero) #header .navbar,
body:not(.kship-hero) #header .navbar.navbar-light,
body:not(.kship-hero) #header .main-navbar-wrapper{
  background-color: rgba(0,0,0,.60) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}

/* header text/icons white */
body:not(.kship-hero) #header *{
  color: rgba(255,255,255,.92) !important;
}
body:not(.kship-hero) #header a:hover{ color:#fff !important; opacity:1; }

/* dropdowns */
body:not(.kship-hero) #header .dropdown-menu{
  background: rgba(0,0,0,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
}
body:not(.kship-hero) #header .dropdown-item:hover{
  background: rgba(255,255,255,.10) !important;
}

/* ---------- Make the page canvas dark everywhere ---------- */
body.primary-bg-color{
  background-color: var(--bg) !important;
}
body:not(.kship-hero) #main-body,
body:not(.kship-hero) #main-body > .container,
body:not(.kship-hero) #main-body > .container-fluid,
body:not(.kship-hero) .primary-content,
body:not(.kship-hero) .secondary-content{
  background: transparent !important;
}

/* ---------- Dashboard tiles row (Services/Domains/Tickets/Invoices) ---------- */
.tiles,
.tiles .tile,
.tile,
.tiles .tile .tile-stat,
.tiles .tile .tile-title{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.30) !important;
  color: #fff !important;
}
.tiles .tile:hover,
.tile:hover{
  background: rgba(0,0,0,.50) !important;
}

/* tile icons + numbers */
.tiles .tile i,
.tiles .tile .tile-icon,
.tiles .tile .stat,
.tiles .tile strong{
  color: #fff !important;
}

/* colored underline bars: keep them but soften */
.tiles .tile .tile-title,
.tiles .tile .tile-stat{
  border-color: rgba(255,255,255,.12) !important;
}

/* ---------- Home panels (Your Info / Contacts / Shortcuts / Recent Tickets etc.) ---------- */
.client-home-panels .panel,
.client-home-panels .card,
.client-home-panels .panel-body,
.client-home-panels .panel-heading,
.client-home-panels .panel-footer,
.client-home-panels .card-header,
.client-home-panels .card-body{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(10px);
  color:#fff !important;
}
.client-home-panels .panel-heading,
.client-home-panels .card-header{
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* remove “light inner boxes” inside panels */
.client-home-panels .list-group-item,
.client-home-panels .well,
.client-home-panels .form-control,
.client-home-panels input,
.client-home-panels select{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color:#fff !important;
}

/* tickets list readability */
.client-home-panels .list-group-item,
.client-home-panels .ticket-item,
.client-home-panels .ticket-summary{
  color:#fff !important;
}
.client-home-panels .text-muted,
.client-home-panels small,
.client-home-panels .small{
  color: rgba(255,255,255,.72) !important;
}

/* ---------- Buttons: unify look ---------- */
body:not(.kship-hero) .btn-primary,
body:not(.kship-hero) .btn-success{
  background: var(--kship-yellow) !important;
  border-color: var(--kship-yellow) !important;
  color:#000 !important;
  font-weight: 900 !important;
}
body:not(.kship-hero) .btn-default,
body:not(.kship-hero) .btn-secondary,
body:not(.kship-hero) .btn-outline-primary,
body:not(.kship-hero) .btn-outline-secondary{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}
body:not(.kship-hero) .btn-default:hover,
body:not(.kship-hero) .btn-secondary:hover{
  background: rgba(255,255,255,.10) !important;
}

/* ---------- Status badges (Active/Answered/etc.) ---------- */
.badge,
.label,
.status,
.client-home-panels .label,
.client-home-panels .badge{
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
}

/* keep “Active” green but readable */
.badge-success, .label-success{
  background: rgba(46, 204, 113, .22) !important;
  border-color: rgba(46, 204, 113, .35) !important;
  color:#fff !important;
}
/* =========================================================
   KSHIP: DATATABLES / LIST TABLES (Tickets, Invoices, Domains)
   ========================================================= */

/* The table wrapper (DataTables) */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody{
  background: transparent !important;
  color: #fff !important;
}

/* Search input + length select */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  border-radius: 14px !important;
  outline: none !important;
}
.dataTables_wrapper .dataTables_filter input::placeholder{
  color: rgba(255,255,255,.65) !important;
}

/* “Showing X to Y…” text */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{
  color: rgba(255,255,255,.80) !important;
}

/* The actual table */
table.dataTable,
.table,
.table-striped,
.table-hover{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  overflow: hidden; /* rounds corners */
  color:#fff !important;
}

/* Header */
table.dataTable thead th,
.table thead th{
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
}

/* Body cells (THIS is what removes the big white box) */
table.dataTable tbody,
table.dataTable tbody tr,
table.dataTable tbody td,
.table tbody,
.table tbody tr,
.table tbody td{
  background: transparent !important;
  color:#fff !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Stripe rows subtle */
table.dataTable tbody tr:nth-child(odd),
.table-striped tbody tr:nth-of-type(odd){
  background: rgba(255,255,255,.03) !important;
}

/* Hover */
table.dataTable tbody tr:hover,
.table-hover tbody tr:hover{
  background: rgba(255,255,255,.07) !important;
}

/* Sort arrows (DataTables) */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before{
  color: rgba(255,255,255,.55) !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-radius: 10px !important;
  margin: 0 3px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.20) !important;
  color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: var(--kship-yellow) !important;
  border-color: var(--kship-yellow) !important;
  color:#000 !important;
}

/* WHMCS “tablebg” legacy wrappers (some pages use these) */
.tablebg,
.tablebg table,
.tablebg td{
  background: transparent !important;
  color:#fff !important;
}
/* =========================================================
   KSHIP: VIEW TICKET (reading ticket) – dark/glass fix
   ========================================================= */

/* Main ticket containers (different WHMCS versions use different IDs/classes) */
#ticketReplies,
#ticketReply,
#ticketReplyContainer,
.ticket-replies,
.ticket-reply,
.ticket-reply-container,
.ticket-message,
.ticket-post,
.ticket-post-content,
.ticket-post-body,
.ticket-note,
.ticket-header,
.ticket-details,
.ticket-content{
  background: transparent !important;
  color: #fff !important;
}

/* Each ticket reply/message block */
#ticketReplies .ticket-reply,
.ticket-reply,
.ticket-message,
.ticket-post{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Kill any inner white panels/strips inside replies */
.ticket-reply * ,
.ticket-message * ,
.ticket-post * ,
#ticketReplies .ticket-reply *{
  background-color: transparent !important;
  color: rgba(255,255,255,.90) !important;
}

/* Reply meta (posted by / time) + muted text */
.ticket-reply .text-muted,
.ticket-message .text-muted,
.ticket-post .text-muted,
.ticket-reply small,
.ticket-message small,
.ticket-post small{
  color: rgba(255,255,255,.70) !important;
}

/* Links inside ticket */
.ticket-reply a,
.ticket-message a,
.ticket-post a{
  color: rgba(255,255,255,.95) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ticket-reply a:hover,
.ticket-message a:hover,
.ticket-post a:hover{
  color:#fff !important;
}

/* Code/pre blocks in tickets (common in support replies) */
.ticket-reply pre,
.ticket-message pre,
.ticket-post pre,
.ticket-reply code,
.ticket-message code,
.ticket-post code{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: 12px !important;
}
.ticket-reply pre,
.ticket-message pre,
.ticket-post pre{
  padding: 12px 14px !important;
  overflow: auto;
}

/* Quote blocks */
.ticket-reply blockquote,
.ticket-message blockquote,
.ticket-post blockquote{
  border-left: 3px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

/* =========================================================
   Reply box / editor area
   ========================================================= */

/* Generic reply wrapper panels */
#ticketReply,
#ticketReplyContainer,
.ticket-reply-form,
#frmReply,
form[name="frmReply"]{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  overflow: hidden;
}

/* Textareas / inputs */
#ticketReply textarea,
#ticketReplyContainer textarea,
.ticket-reply-form textarea,
textarea[name="message"],
textarea[name="reply"],
#inputMessage,
#replyMessage{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  border-radius: 14px !important;
}
#ticketReply textarea::placeholder,
textarea[name="message"]::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* WYSIWYG editors (WHMCS may use Summernote/other wrappers) */
.note-editor,
.note-editing-area,
.note-editable,
.note-toolbar{
  background: rgba(0,0,0,.35) !important;
  border-color: rgba(255,255,255,.12) !important;
  color:#fff !important;
}
.note-toolbar .btn,
.note-toolbar i{
  color:#fff !important;
}

/* Attachments / tables inside ticket view */
#ticketReplies table,
#ticketReplies .table,
#ticketReply table,
#ticketReply .table{
  background: rgba(0,0,0,.35) !important;
  border-color: rgba(255,255,255,.12) !important;
  color:#fff !important;
}
#ticketReplies .table th,
#ticketReplies .table td{
  border-color: rgba(255,255,255,.10) !important;
}

/* Buttons in ticket view: keep your theme */
body:not(.kship-hero) #ticketReply .btn-primary,
body:not(.kship-hero) #ticketReplyContainer .btn-primary{
  background: var(--kship-yellow) !important;
  border-color: var(--kship-yellow) !important;
  color:#000 !important;
  font-weight: 900 !important;
}
/* =========================================================
   KSHIP: TICKET REPLY – kill remaining white blocks
   (textarea + preview strip + attachments file input)
   ========================================================= */

/* 1) Remove white backgrounds on the reply form wrappers */
#frmReply,
form[name="frmReply"],
#ticketReply,
#ticketReplyContainer,
.ticket-reply-form,
.reply-wrapper,
.reply,
.reply-box,
.replycontainer,
#replybox,
#replyBox{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  overflow: hidden;
}

/* 2) Any inner panels/divs that still paint white */
#frmReply .panel,
#frmReply .panel-body,
#frmReply .panel-footer,
#frmReply .well,
#frmReply .form-group,
#frmReply .form-control,
#frmReply .control-group,
#frmReply .controls,
#frmReply .ticket-reply-message,
#frmReply .message,
#frmReply .messagebox,
#frmReply .editor,
#frmReply .editor-container,
#frmReply .editor-toolbar,
#frmReply .editor-preview,
#frmReply .editor-preview-side{
  background: transparent !important;
  color:#fff !important;
}

/* 3) FORCE the textarea to be dark (your screenshot shows it staying white) */
#frmReply textarea,
#frmReply textarea.form-control,
#frmReply textarea[name="message"],
#frmReply textarea[name="reply"],
#inputMessage,
#replyMessage,
textarea#inputMessage,
textarea#replyMessage{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
#frmReply textarea::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* 4) If a preview strip/editor wrapper is adding white blocks, darken it */
#frmReply .editor-toolbar,
#frmReply .markdown-editor-toolbar,
#frmReply .reply-toolbar,
#frmReply .toolbar{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
}
#frmReply .editor-preview,
#frmReply .preview,
#frmReply .preview-pane{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  color:#fff !important;
}

/* 5) File input (attachments): browsers render it light unless wrapped */
#frmReply input[type="file"],
#frmReply .custom-file-input{
  color:#fff !important;
  border-radius: 12px !important;
}

/* Modern browsers: style the file selector button */
#frmReply input[type="file"]::file-selector-button{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius: 12px !important;
  padding: .55rem .85rem !important;
  margin-right: .75rem !important;
}

/* WebKit fallback */
#frmReply input[type="file"]::-webkit-file-upload-button{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius: 12px !important;
  padding: .55rem .85rem !important;
  margin-right: .75rem !important;
}

/* If WHMCS wraps file inputs in .input-group */
#frmReply .input-group,
#frmReply .custom-file,
#frmReply .custom-file-label{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  border-radius: 14px !important;
}

/* 6) Labels and helper text */
#frmReply label,
#frmReply .help-block,
#frmReply .form-text,
#frmReply .text-muted,
#frmReply small{
  color: rgba(255,255,255,.78) !important;
}

/* 7) Buttons in reply area */
#frmReply .btn-primary,
#frmReply button[type="submit"].btn-primary,
#frmReply input[type="submit"].btn-primary{
  background: var(--kship-yellow) !important;
  border-color: var(--kship-yellow) !important;
  color:#000 !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
}
#frmReply .btn-default,
#frmReply .btn-secondary,
#frmReply .btn-outline-primary{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius: 14px !important;
}
#frmReply .btn-default:hover,
#frmReply .btn-secondary:hover{
  background: rgba(255,255,255,.10) !important;
}
/* =========================================================
   KSHIP: TICKET REPLY – ULTRA FIX (works across WHMCS variants)
   ========================================================= */

/* Hook the reply form regardless of WHMCS template/route */
form[name="frmReply"],
#frmReply,
form[action*="supporttickets"],
form[action*="viewticket"],
form[action*="ticket"],
.ticket-reply-form{
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  overflow: hidden;
}

/* 1) Kill ALL white backgrounds inside the reply form (this is what you still have) */
form[name="frmReply"] *,
#frmReply *,
form[action*="supporttickets"] *,
form[action*="viewticket"] *,
form[action*="ticket"] *,
.ticket-reply-form *{
  background-image: none !important;
}

/* specifically remove hard-coded white backgrounds */
form[name="frmReply"] *[style*="background"],
#frmReply *[style*="background"],
form[action*="supporttickets"] *[style*="background"],
form[action*="viewticket"] *[style*="background"],
.ticket-reply-form *[style*="background"],
form[name="frmReply"] .bg-white,
#frmReply .bg-white,
form[name="frmReply"] .bg-light,
#frmReply .bg-light{
  background-color: transparent !important;
}

/* 2) Re-style text + labels so they remain readable */
form[name="frmReply"] label,
#frmReply label,
form[action*="supporttickets"] label,
form[action*="viewticket"] label,
.ticket-reply-form label{
  color: rgba(255,255,255,.88) !important;
  font-weight: 700;
}
form[name="frmReply"] .text-muted,
#frmReply .text-muted,
form[name="frmReply"] small,
#frmReply small{
  color: rgba(255,255,255,.70) !important;
}

/* 3) Dark inputs (Name/Email/etc.) */
form[name="frmReply"] input[type="text"],
form[name="frmReply"] input[type="email"],
form[name="frmReply"] input[type="password"],
form[name="frmReply"] input[type="search"],
form[name="frmReply"] select,
form[name="frmReply"] textarea,
#frmReply input[type="text"],
#frmReply input[type="email"],
#frmReply input[type="password"],
#frmReply input[type="search"],
#frmReply select,
#frmReply textarea{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* 4) Fix the big “white bars” around the editor area
      (common editor wrappers across WHMCS builds) */
form[name="frmReply"] .editor,
form[name="frmReply"] .editor-container,
form[name="frmReply"] .editor-toolbar,
form[name="frmReply"] .editor-preview,
form[name="frmReply"] .markdown-editor,
form[name="frmReply"] .md-editor,
form[name="frmReply"] .md-header,
form[name="frmReply"] .md-footer,
form[name="frmReply"] .md-preview,
form[name="frmReply"] .wmd-panel,
form[name="frmReply"] .wmd-button-bar,
form[name="frmReply"] .wmd-preview,
#frmReply .editor,
#frmReply .editor-container,
#frmReply .editor-toolbar,
#frmReply .editor-preview,
#frmReply .markdown-editor,
#frmReply .md-editor,
#frmReply .md-header,
#frmReply .md-footer,
#frmReply .md-preview,
#frmReply .wmd-panel,
#frmReply .wmd-button-bar,
#frmReply .wmd-preview{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  color:#fff !important;
}

/* 5) Attachments row – file input is the other “stuck white” control */
form[name="frmReply"] input[type="file"],
#frmReply input[type="file"]{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  border-radius: 14px !important;
  padding: .55rem .75rem !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* File chooser button (Chrome/Edge) */
form[name="frmReply"] input[type="file"]::file-selector-button,
#frmReply input[type="file"]::file-selector-button{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius: 12px !important;
  padding: .55rem .85rem !important;
  margin-right: .75rem !important;
}

/* WebKit fallback */
form[name="frmReply"] input[type="file"]::-webkit-file-upload-button,
#frmReply input[type="file"]::-webkit-file-upload-button{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius: 12px !important;
  padding: .55rem .85rem !important;
  margin-right: .75rem !important;
}

/* 6) Buttons in reply area */
form[name="frmReply"] .btn-primary,
#frmReply .btn-primary{
  background: var(--kship-yellow) !important;
  border-color: var(--kship-yellow) !important;
  color:#000 !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
}
form[name="frmReply"] .btn-default,
form[name="frmReply"] .btn-secondary,
#frmReply .btn-default,
#frmReply .btn-secondary{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius: 14px !important;
}
/* =========================================================
   KSHIP: GLOBAL BACKGROUND IMAGE + BLUR (ALL PAGES)
   ========================================================= */

:root{
  --kship-bg-img: url("https://kship.com/wp-content/uploads/2025/01/main-bg-form-slide4.webp");
  --kship-bg-dim: rgba(0,0,0,.72);     /* dark overlay strength */
  --kship-bg-blur: 18px;              /* blur amount */
}

/* 1) Put the image on BODY (covers all pages) */
html, body{
  height: 100%;
}
body{
  background: #070a0f !important;
  position: relative;
  overflow-x: hidden;
}

/* 2) Image layer */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: var(--kship-bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.05); /* avoids edge bleed when blurring */
}

/* 3) Blur + dark overlay layer (this is what makes it readable) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(var(--kship-bg-blur));
  -webkit-backdrop-filter: blur(var(--kship-bg-blur));
  background: var(--kship-bg-dim);
  z-index: 1;
}

/* 4) Ensure your site content sits ABOVE the blurred background */
#header,
#main-body,
#footer,
footer,
.main-navbar-wrapper,
.master-breadcrumb{
  position: relative;
  z-index: 2;
}

/* 5) Optional: make “page canvas” transparent so the bg shows through */
body.primary-bg-color,
#main-body,
#main-body > .container,
#main-body > .container-fluid{
  background: transparent !important;
}

/* 6) Keep “glass” panels readable (works with your existing rules too) */
.card,
.panel,
.sidebar .panel,
.client-home-panels .panel,
.table,
table.dataTable{
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* =========================================================
   KSHIP: BUTTON THEME – make gold/red buttons KShip blue
   ========================================================= */

:root{
  --kship-blue: #1f7cff;        /* adjust if you want darker/lighter */
  --kship-blue-hover: #1766d6;  /* hover */
  --kship-blue-press: #1253b0;  /* active */
  --kship-blue-glow: rgba(31,124,255,.28);
}

/* Primary actions */
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
button.btn-primary,
button.btn-success,
button.btn-warning,
button.btn-danger,
input[type="submit"].btn-primary,
input[type="submit"].btn-success,
input[type="submit"].btn-warning,
input[type="submit"].btn-danger{
  background: var(--kship-blue) !important;
  border-color: var(--kship-blue) !important;
  color: #fff !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}

/* Hover */
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover{
  background: var(--kship-blue-hover) !important;
  border-color: var(--kship-blue-hover) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px var(--kship-blue-glow) !important;
}

/* Active/pressed */
.btn-primary:active,
.btn-success:active,
.btn-warning:active,
.btn-danger:active{
  background: var(--kship-blue-press) !important;
  border-color: var(--kship-blue-press) !important;
  transform: translateY(1px);
}

/* Focus ring */
.btn-primary:focus,
.btn-success:focus,
.btn-warning:focus,
.btn-danger:focus,
.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-danger:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(31,124,255,.32) !important;
}

/* Keep secondary/outline buttons as dark-glass */
.btn-default,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-radius: 14px !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* Links styled as buttons (some WHMCS actions use <a>) */
a.btn-primary,
a.btn-success,
a.btn-warning,
a.btn-danger{
  color:#fff !important;
}
/* =========================================================
   KSHIP: LEFT SIDEBAR NAV – square buttons + 1px gap + subtle hover
   ========================================================= */

/* Target common WHMCS sidebar nav structures */
.sidebar .panel,
.sidebar .card,
.sidebar .list-group{
  border-radius: 0 !important;
  overflow: hidden;
}

/* Remove rounding on items + add 1px spacing */
.sidebar .list-group,
.sidebar .list-group-item,
.sidebar .panel .list-group-item,
.sidebar .card .list-group-item,
.sidebar .nav,
.sidebar .nav-link{
  border-radius: 0 !important;
}

/* 1px gap between items */
.sidebar .list-group{
  padding: 1px !important;              /* outer 1px frame */
  background: rgba(255,255,255,.06) !important; /* creates the 1px separators */
}
.sidebar .list-group-item{
  margin: 1px 0 !important;             /* 1px gap between each */
  border: 0 !important;
  background: rgba(0,0,0,.42) !important;
  color: rgba(255,255,255,.90) !important;
  padding: .55rem .75rem !important;
}

/* If the items are anchors inside list items */
.sidebar .list-group-item a,
.sidebar .list-group-item .nav-link{
  display: block;
  border-radius: 0 !important;
  color: rgba(255,255,255,.90) !important;
  text-decoration: none !important;
}

/* Low-opacity hover */
.sidebar .list-group-item:hover,
.sidebar .list-group-item:focus-within{
  background: rgba(255,255,255,.06) !important;
}
.sidebar .list-group-item a:hover,
.sidebar .list-group-item .nav-link:hover{
  color: #fff !important;
  opacity: .92;
}

/* Active state (subtle, still rectangular) */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

/* Optional: tighten icons and badges */
.sidebar .list-group-item i{
  opacity: .9;
}
.sidebar .list-group-item .badge{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 0 !important;
  color:#fff !important;
}
/* =========================================================
   KSHIP: Knowledgebase / Articles icons -> light blue
   ========================================================= */

:root{
  --kship-icon-blue: #7fb6ff; /* light blue */
}

/* Article list icons (matches your screenshot) */
#knowledgebase .fas,
#knowledgebase .far,
#knowledgebase .fal,
#knowledgebase .fab,
.kb-article-list i,
.kb-article i,
.knowledgebase i,
.list-group .fa-file-alt,
.list-group .fa-file-lines,
.list-group .fa-folder,
.list-group .fa-folder-open,
.fa-file-alt,
.fa-file-lines,
.fa-file,
.fa-newspaper{
  color: var(--kship-icon-blue) !important;
}

/* Hover state (slightly brighter) */
#knowledgebase a:hover i,
.kb-article-list a:hover i,
.knowledgebase a:hover i{
  color: #a9d0ff !important;
}
/* =========================================================
   KSHIP: HIDE "none" badges + LIGHT BLUE HOVERS (no radius)
   ========================================================= */

:root{
  --kship-hover-blue: rgba(127,182,255,.12); /* very light blue hover */
  --kship-hover-blue-2: rgba(127,182,255,.18); /* a bit stronger for active/selected */
  --kship-hover-border: rgba(127,182,255,.22);
}

/* 1) Hide the "none" badge that appears next to some menu items */
.badge:empty{ display:none !important; }
.badge{
  border-radius: 0 !important;
}
.badge:where(:not(.badge-info)):where(:not(.badge-primary)):where(:not(.badge-success)):where(:not(.badge-danger)){}

/* If the badge text is literally "none" */
.badge,
.label{
  text-transform: none !important;
}
.badge:has(*){} /* harmless; keep for newer browsers */

.badge,
.navbar .badge,
.main-navbar-wrapper .badge{
  /* nothing else; avoid messing with normal counts */
}

/* Hide badges that render as "none" */
.badge{ }
.badge::before{ }

/* Most reliable: hide when the badge text is exactly "none" (CSS-only workaround) */
.navbar .badge,
.main-navbar-wrapper .badge{
  font-size: 0 !important;         /* hides text */
}
.navbar .badge:after,
.main-navbar-wrapper .badge:after{
  content: attr(data-badge) !important;
  font-size: 12px !important;
}

/* If WHMCS outputs "none" as plain text (no data attribute), just hide badge pills that match sizing */
.navbar .badge,
.main-navbar-wrapper .badge{
  padding: 0 .45rem !important;
  opacity: .85;
}
.navbar .badge:not([id]):not([class*="info"]):not([class*="primary"]):not([class*="success"]):not([class*="danger"]){
  display: none !important; /* hides the weird "none" pills without touching normal counters */
}

/* 2) Sidebar / left navigation: no radius + 1px gaps + light-blue hover */
.sidebar .list-group,
.sidebar .list-group-item,
.sidebar .panel,
.sidebar .card,
.sidebar .nav,
.sidebar .nav-link{
  border-radius: 0 !important;
}

/* keep your 1px separators */
.sidebar .list-group{
  padding: 1px !important;
  background: rgba(255,255,255,.06) !important;
}
.sidebar .list-group-item{
  margin: 1px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0,0,0,.42) !important;
  color: rgba(255,255,255,.90) !important;
}

/* hover */
.sidebar .list-group-item:hover,
.sidebar .list-group-item:focus-within{
  background: var(--kship-hover-blue) !important;
  outline: 1px solid var(--kship-hover-border) !important;
  outline-offset: -1px !important;
}
.sidebar .list-group-item a:hover,
.sidebar .list-group-item .nav-link:hover{
  color:#fff !important;
}

/* active */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover{
  background: var(--kship-hover-blue-2) !important;
  outline: 1px solid var(--kship-hover-border) !important;
  outline-offset: -1px !important;
  color:#fff !important;
}

/* 3) Make ALL hovers across the portal use the same light-blue tint (menus, links, cards) */
a:hover,
.navbar a:hover,
.main-navbar-wrapper a:hover,
.dropdown-menu a:hover,
.card a:hover,
.panel a:hover{
  color: #fff !important;
}

/* light-blue hover background for clickable "list rows" (KB articles, lists, etc.) */
a.list-group-item:hover,
.list-group-item-action:hover,
.kbarticles a:hover,
.kb-article-list a:hover,
.ticket-reply a:hover{
  background: var(--kship-hover-blue) !important;
  border-radius: 0 !important;
}
/* =========================================================
   KSHIP: GLOBAL SQUARE UI + 1px separators + light-blue hover
   Put at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-hover: rgba(127,182,255,.12);     /* light blue hover fill */
  --kship-hover-strong: rgba(127,182,255,.18);
  --kship-hover-border: rgba(127,182,255,.24);

  --kship-border: rgba(255,255,255,.12);
  --kship-border-soft: rgba(255,255,255,.08);
}

/* 1) Remove border radius everywhere (nuclear + consistent) */
*,
*::before,
*::after{
  border-radius: 0 !important;
}

/* 2) Normalize borders to 1px (keeps your dark/glass theme but square) */
.card,
.panel,
.well,
.modal-content,
.dropdown-menu,
.table,
.list-group,
.list-group-item,
.navbar,
.main-navbar-wrapper,
.sidebar .panel,
.sidebar .card,
.sidebar .list-group-item,
.form-control,
.input-group-text,
.btn{
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--kship-border) !important;
}

/* reduce double-borders in grouped components */
.input-group .form-control{
  border-right: 0 !important;
}
.input-group .input-group-append .btn,
.input-group .input-group-prepend .input-group-text{
  border-left: 1px solid var(--kship-border) !important;
}

/* 3) 1px “gaps” between stacked items (sidebar menus, list groups) */
.list-group{
  padding: 1px !important;
  background: var(--kship-border-soft) !important; /* creates 1px separators */
}
.list-group-item{
  margin: 1px 0 !important;
  border: 0 !important;                 /* separators come from list-group padding bg */
}

/* 4) Light-blue hover effect for ALL interactive elements */
a,
.btn,
.list-group-item,
.nav-link,
.dropdown-item,
.table tbody tr{
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}

/* hover fill */
.btn:hover,
.list-group-item:hover,
.list-group-item:focus-within,
.nav-link:hover,
.dropdown-item:hover,
.table tbody tr:hover{
  background: var(--kship-hover) !important;
  border-color: var(--kship-hover-border) !important;
}

/* active/selected states */
.btn:active,
.list-group-item.active,
.nav-link.active,
.dropdown-item.active{
  background: var(--kship-hover-strong) !important;
  border-color: var(--kship-hover-border) !important;
}

/* 5) Make “clickable list rows” (KB articles, tickets lists, etc.) match */
a.list-group-item-action:hover,
.list-group-item-action:hover,
.kb-article-list a:hover,
#knowledgebase a:hover{
  background: var(--kship-hover) !important;
}

/* 6) Buttons: keep your KShip blue but square + clean hover */
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger{
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover{
  box-shadow: 0 0 0 1px var(--kship-hover-border) inset !important;
}

/* 7) Dropdown menus square + subtle hover */
.dropdown-menu{
  background: rgba(0,0,0,.90) !important;
}
.dropdown-item{
  color: rgba(255,255,255,.92) !important;
}
.dropdown-item:hover{
  color:#fff !important;
}

/* 8) Inputs square + readable */
input, select, textarea, .form-control{
  background: rgba(255,255,255,.08) !important;
  color:#fff !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* 9) Tables: square, 1px lines */
.table, table{
  background: rgba(0,0,0,.35) !important;
}
.table th, .table td{
  border-color: rgba(255,255,255,.10) !important;
}

/* 10) Sidebar nav: square + separators + hover */
.sidebar .list-group-item{
  background: rgba(0,0,0,.42) !important;
  color: rgba(255,255,255,.90) !important;
}
.sidebar .list-group-item:hover{
  background: var(--kship-hover) !important;
}
/* =========================================================
   KSHIP: STANDARD CART – FIX WHITE BOXES + DARK ORDER SUMMARY
   Targets: /cart.php (standard_cart)
   ========================================================= */

:root{
  --kship-glass: rgba(0,0,0,.45);
  --kship-glass-2: rgba(0,0,0,.60);
  --kship-line: rgba(255,255,255,.12);
  --kship-line-soft: rgba(255,255,255,.08);

  --kship-hover: rgba(127,182,255,.12);
  --kship-hover-border: rgba(127,182,255,.24);
}

/* Base cart wrapper */
#order-standard_cart,
#order-standard_cart *{
  color: rgba(255,255,255,.92) !important;
}

/* Kill any forced white backgrounds inside cart */
#order-standard_cart .bg-white,
#order-standard_cart .bg-light,
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .well,
#order-standard_cart .alert,
#order-standard_cart .section,
#order-standard_cart .sub-heading,
#order-standard_cart .cart-body,
#order-standard_cart .view-cart-items,
#order-standard_cart .order-summary,
#order-standard_cart .summary-container,
#order-standard_cart .panel-body{
  background: var(--kship-glass) !important;
  border: 1px solid var(--kship-line) !important;
}

/* Panel headings (Categories / Actions / etc.) */
#order-standard_cart .panel-heading,
#order-standard_cart .panel-title,
#order-standard_cart .panel-title a{
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid var(--kship-line) !important;
  color:#fff !important;
}

/* Sidebar list items (Categories / Actions links) */
#order-standard_cart .sidebar .list-group{
  padding: 1px !important;
  background: var(--kship-line-soft) !important;
  border: 1px solid var(--kship-line) !important;
}
#order-standard_cart .sidebar .list-group-item{
  margin: 1px 0 !important;
  border: 0 !important;
  background: rgba(0,0,0,.42) !important;
}
#order-standard_cart .sidebar .list-group-item:hover{
  background: var(--kship-hover) !important;
  outline: 1px solid var(--kship-hover-border) !important;
  outline-offset: -1px !important;
}

/* Tabs (Product/Options, Price/Cycle) */
#order-standard_cart .nav-tabs,
#order-standard_cart .nav-tabs .nav-link{
  border-color: var(--kship-line) !important;
}
#order-standard_cart .nav-tabs .nav-link{
  background: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.86) !important;
}
#order-standard_cart .nav-tabs .nav-link:hover{
  background: var(--kship-hover) !important;
}
#order-standard_cart .nav-tabs .nav-link.active{
  background: rgba(0,0,0,.60) !important;
  color:#fff !important;
  border-color: var(--kship-line) !important;
}

/* PROMO CODE BOX (this is your big white block) */
#order-standard_cart #frmPromo,
#order-standard_cart .promo,
#order-standard_cart .promo-code,
#order-standard_cart .apply-promo,
#order-standard_cart .view-cart-items .panel,
#order-standard_cart .view-cart-items .well{
  background: var(--kship-glass-2) !important;
  border: 1px solid var(--kship-line) !important;
}

/* Promo input + button */
#order-standard_cart #frmPromo input,
#order-standard_cart input[name="promocode"],
#order-standard_cart .promo input{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
}
#order-standard_cart #frmPromo button,
#order-standard_cart .promo button{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
}
#order-standard_cart #frmPromo button:hover,
#order-standard_cart .promo button:hover{
  background: var(--kship-hover) !important;
  border-color: var(--kship-hover-border) !important;
}

/* ORDER SUMMARY (right box) */
#order-standard_cart .order-summary,
#order-standard_cart .summary-container,
#order-standard_cart .order-summary .panel,
#order-standard_cart .order-summary .panel-body{
  background: rgba(0,0,0,.60) !important;
  border: 1px solid var(--kship-line) !important;
}
#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary h3,
#order-standard_cart .order-summary *{
  color:#fff !important;
}

/* Make “totals” rows readable */
#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .order-summary .total,
#order-standard_cart .order-summary .summary-totals{
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

/* Tables inside cart */
#order-standard_cart table,
#order-standard_cart .table{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid var(--kship-line) !important;
}
#order-standard_cart .table th{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
}
#order-standard_cart .table td{
  border-color: rgba(255,255,255,.10) !important;
}
#order-standard_cart .table tbody tr:hover{
  background: var(--kship-hover) !important;
}

/* Fix muted text in cart */
#order-standard_cart .text-muted,
#order-standard_cart small,
#order-standard_cart .small{
  color: rgba(255,255,255,.70) !important;
}

/* Force any remaining “white blocks” to dark (safety net) */
#order-standard_cart *[style*="background: #fff"],
#order-standard_cart *[style*="background:#fff"],
#order-standard_cart *[style*="background: white"],
#order-standard_cart *[style*="background:white"]{
  background: var(--kship-glass) !important;
  border-color: var(--kship-line) !important;
}
/* =========================================================
   KSHIP: HEADER + FOOTER = LOW-OPACITY BLUE GLASS
   ========================================================= */

:root{
  --kship-hf-blue: rgba(31,124,255,.14);      /* header/footer blue glass */
  --kship-hf-blue-2: rgba(31,124,255,.18);    /* hover/active blue glass */
  --kship-hf-line: rgba(127,182,255,.18);     /* subtle blue-ish border */
  --kship-hf-text: rgba(255,255,255,.92);
  --kship-hf-muted: rgba(255,255,255,.72);
}

/* HEADER */
#header,
#header .navbar,
#header .navbar.navbar-light,
#header .main-navbar-wrapper,
#header .topbar{
  background: var(--kship-hf-blue) !important;
  border-bottom: 1px solid var(--kship-hf-line) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Header text + links */
#header,
#header *{
  color: var(--kship-hf-text) !important;
}
#header a,
#header .nav-link,
#header .dropdown-toggle{
  color: var(--kship-hf-text) !important;
  opacity: .92;
}
#header a:hover,
#header .nav-link:hover{
  opacity: 1;
}

/* Dropdown menus */
#header .dropdown-menu{
  background: rgba(0,0,0,.78) !important; /* stays dark for readability */
  border: 1px solid var(--kship-hf-line) !important;
}
#header .dropdown-item{
  color: rgba(255,255,255,.92) !important;
}
#header .dropdown-item:hover{
  background: rgba(127,182,255,.12) !important;
  color:#fff !important;
}

/* Search box styling in header */
#header .form-control,
#header .input-group-text{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid var(--kship-hf-line) !important;
  color: #fff !important;
}
#header .form-control::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* FOOTER (covers most WHMCS footer variants) */
body > footer,
body > #footer,
#footer,
.footer{
  background: var(--kship-hf-blue) !important;
  border-top: 1px solid var(--kship-hf-line) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Footer text */
body > footer *,
body > #footer *,
#footer *,
.footer *{
  color: var(--kship-hf-muted) !important;
}
body > footer a,
body > #footer a,
#footer a,
.footer a{
  color: var(--kship-hf-text) !important;
  text-decoration: none !important;
}
body > footer a:hover,
body > #footer a:hover,
#footer a:hover,
.footer a:hover{
  color:#fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
/* =========================================================
   KSHIP OVERRIDE – BLUE GLASS HEADER/FOOTER + RESTORE LEFT MENU BUTTONS
   Put at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-blue-glass: rgba(31,124,255,.14);
  --kship-blue-glass-2: rgba(31,124,255,.18);
  --kship-blue-line: rgba(127,182,255,.22);

  --kship-hover: rgba(127,182,255,.12);
  --kship-hover-border: rgba(127,182,255,.24);

  --kship-panel: rgba(0,0,0,.45);
  --kship-panel-2: rgba(0,0,0,.58);
  --kship-line: rgba(255,255,255,.12);
  --kship-line-soft: rgba(255,255,255,.08);
}

/* -------------------------
   HEADER (force blue glass)
   ------------------------- */
body #header,
body header#header,
body #header.header{
  background: var(--kship-blue-glass) !important;
  border-bottom: 1px solid var(--kship-blue-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body #header .topbar,
body #header .navbar,
body #header .navbar.navbar-light,
body #header .main-navbar-wrapper,
body #header .navbar.navbar-expand-xl{
  background: var(--kship-blue-glass) !important;
  border-bottom: 1px solid var(--kship-blue-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Header links readable */
body #header,
body #header *{
  color: rgba(255,255,255,.92) !important;
}
body #header a,
body #header .nav-link,
body #header .dropdown-toggle{
  color: rgba(255,255,255,.92) !important;
  opacity: .92;
}
body #header a:hover,
body #header .nav-link:hover{
  opacity: 1;
}

/* Header search */
body #header .form-control,
body #header .input-group-text{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid var(--kship-blue-line) !important;
  color:#fff !important;
}
body #header .form-control::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* Dropdown stays dark for readability */
body #header .dropdown-menu{
  background: rgba(0,0,0,.82) !important;
  border: 1px solid var(--kship-blue-line) !important;
}
body #header .dropdown-item:hover{
  background: var(--kship-hover) !important;
}

/* -------------------------
   FOOTER (force blue glass)
   ------------------------- */
body > footer,
body > #footer,
body #footer,
body .footer{
  background: var(--kship-blue-glass) !important;
  border-top: 1px solid var(--kship-blue-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
body > footer *,
body > #footer *,
body #footer *,
body .footer *{
  color: rgba(255,255,255,.82) !important;
}
body > footer a,
body > #footer a,
body #footer a,
body .footer a{
  color: rgba(255,255,255,.92) !important;
}
body > footer a:hover,
body > #footer a:hover,
body #footer a:hover,
body .footer a:hover{
  color:#fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------
   LEFT SIDEBAR MENU BUTTONS (restore “button” look)
   rectangle rows + 1px separators + light-blue hover
   --------------------------------------------------- */

/* Common WHMCS sidebar containers */
body .sidebar .panel,
body .sidebar .card,
body .sidebar .list-group,
body .panel-sidebar,
body .client-sidebar{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Make the list look like stacked buttons with 1px gaps */
body .sidebar .list-group,
body .panel-sidebar .list-group,
body .client-sidebar .list-group{
  padding: 1px !important;
  background: var(--kship-line-soft) !important;  /* creates 1px separators */
  border: 1px solid var(--kship-line) !important;
}

/* The “buttons” */
body .sidebar .list-group-item,
body .panel-sidebar .list-group-item,
body .client-sidebar .list-group-item{
  margin: 1px 0 !important;
  border: 0 !important;
  background: var(--kship-panel) !important;
  color: rgba(255,255,255,.90) !important;
  padding: .55rem .75rem !important;
  line-height: 1.2 !important;
}

/* Anchor fills the row (so hover feels like a button) */
body .sidebar .list-group-item > a,
body .panel-sidebar .list-group-item > a,
body .client-sidebar .list-group-item > a{
  display: block !important;
  color: rgba(255,255,255,.90) !important;
  text-decoration: none !important;
}

/* Hover = slight light blue */
body .sidebar .list-group-item:hover,
body .panel-sidebar .list-group-item:hover,
body .client-sidebar .list-group-item:hover{
  background: var(--kship-hover) !important;
  outline: 1px solid var(--kship-hover-border) !important;
  outline-offset: -1px !important;
}

/* Active item */
body .sidebar .list-group-item.active,
body .panel-sidebar .list-group-item.active,
body .client-sidebar .list-group-item.active{
  background: rgba(127,182,255,.18) !important;
  outline: 1px solid var(--kship-hover-border) !important;
  outline-offset: -1px !important;
}

/* Badges in sidebar look consistent */
body .sidebar .list-group-item .badge,
body .panel-sidebar .list-group-item .badge,
body .client-sidebar .list-group-item .badge{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  padding: .15rem .35rem !important;
}
/* =========================================================
   KSHIP: FOOTER MATCH HEADER BLUE-GLASS + NO RADIUS ANYWHERE
   Put at VERY BOTTOM of custom.css
   ========================================================= */

/* 1) Remove border radius on absolutely everything */
*,
*::before,
*::after{
  border-radius: 0 !important;
}

/* 2) Footer = same blue glass as header */
:root{
  --kship-blue-glass: rgba(31,124,255,.14);   /* same as header */
  --kship-blue-line:  rgba(127,182,255,.22);
}

/* WHMCS footer variants */
body > footer,
body > #footer,
body #footer,
body .footer,
body [id*="footer"]:not(#header),
body [class*="footer"]{
  background: var(--kship-blue-glass) !important;
  border-top: 1px solid var(--kship-blue-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Footer text + links */
body > footer *,
body > #footer *,
body #footer *,
body .footer *,
body [id*="footer"]:not(#header) *,
body [class*="footer"] *{
  color: rgba(255,255,255,.84) !important;
}

body > footer a,
body > #footer a,
body #footer a,
body .footer a,
body [id*="footer"]:not(#header) a,
body [class*="footer"] a{
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
}
body > footer a:hover,
body > #footer a:hover,
body #footer a:hover,
body .footer a:hover,
body [id*="footer"]:not(#header) a:hover,
body [class*="footer"] a:hover{
  color:#fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Optional: footer containers spacing */
body > footer .container,
body > #footer .container,
body #footer .container,
body .footer .container{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
/* =========================================================
   KSHIP PATCH: Renew Domain (white box) + KShip Blue buttons + NO radius
   Put at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-blue: #1f7cff;
  --kship-blue-hover: #3a8cff;

  --glass: rgba(0,0,0,.45);
  --glass-2: rgba(0,0,0,.60);
  --line: rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.08);

  --hover: rgba(127,182,255,.12);
  --hover-border: rgba(127,182,255,.24);
}

/* ---------------------------------------------------------
   1) KILL ALL RADIUS (including bootstrap helpers)
   --------------------------------------------------------- */
*,
*::before,
*::after,
.rounded,
.rounded-sm,
.rounded-lg,
.rounded-pill,
.rounded-0,
.btn,
.card,
.panel,
.list-group,
.list-group-item,
.dropdown-menu,
.form-control,
.input-group-text,
.nav-tabs .nav-link,
.alert{
  border-radius: 0 !important;
}

/* ---------------------------------------------------------
   2) MAKE BUTTONS KSHIP BLUE (replaces gold/red/green)
   --------------------------------------------------------- */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
a.btn-primary,
a.btn-success,
a.btn-danger,
a.btn-warning,
a.btn-info{
  background: var(--kship-blue) !important;
  border-color: var(--kship-blue) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover{
  background: var(--kship-blue-hover) !important;
  border-color: var(--kship-blue-hover) !important;
  color: #fff !important;
}

/* Outline buttons */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-info{
  background: transparent !important;
  border-color: rgba(127,182,255,.35) !important;
  color: rgba(255,255,255,.92) !important;
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-info:hover{
  background: var(--hover) !important;
  border-color: var(--hover-border) !important;
  color:#fff !important;
}

/* ---------------------------------------------------------
   3) STANDARD CART: FIX THE WHITE RENEW DOMAIN BOX
   (cart.php?a=add&domain=renewal / renew domains flow)
   --------------------------------------------------------- */

/* Force ALL inner blocks in standard_cart to dark glass */
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .well,
#order-standard_cart .alert,
#order-standard_cart .cart-body,
#order-standard_cart .view-cart-items,
#order-standard_cart .order-summary,
#order-standard_cart .summary-container,
#order-standard_cart .domain-renewals,
#order-standard_cart .domain-renewal,
#order-standard_cart .domain-renewal-options,
#order-standard_cart .domain-renewal-period,
#order-standard_cart .domain-renewal-tlds,
#order-standard_cart .domain-renewal-pricing,
#order-standard_cart .panel-body,
#order-standard_cart .panel-footer{
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Safety net: kill forced white inline backgrounds inside cart */
#order-standard_cart *[style*="background:#fff"],
#order-standard_cart *[style*="background: #fff"],
#order-standard_cart *[style*="background:white"],
#order-standard_cart *[style*="background: white"],
#order-standard_cart .bg-white,
#order-standard_cart .bg-light{
  background: var(--glass) !important;
  border-color: var(--line) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Tables / rows in renew domain lists */
#order-standard_cart table,
#order-standard_cart .table{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid var(--line) !important;
}
#order-standard_cart .table th{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color:#fff !important;
}
#order-standard_cart .table td{
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.90) !important;
}
#order-standard_cart .table tbody tr:hover{
  background: var(--hover) !important;
}

/* Inputs/selects in renew domain area (WHMCS defaults can be white) */
#order-standard_cart input,
#order-standard_cart select,
#order-standard_cart textarea,
#order-standard_cart .form-control{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
}
#order-standard_cart input::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* Order summary readability */
#order-standard_cart .order-summary,
#order-standard_cart .summary-container{
  background: var(--glass-2) !important;
}
#order-standard_cart .order-summary *,
#order-standard_cart .summary-container *{
  color:#fff !important;
}

/* ---------------------------------------------------------
   4) SIDEBAR “BUTTON ROWS” – square + 1px separators + light-blue hover
   --------------------------------------------------------- */
.sidebar .list-group,
.panel-sidebar .list-group,
.client-sidebar .list-group,
#order-standard_cart .sidebar .list-group{
  padding: 1px !important;
  background: var(--line-soft) !important;
  border: 1px solid var(--line) !important;
}
.sidebar .list-group-item,
.panel-sidebar .list-group-item,
.client-sidebar .list-group-item,
#order-standard_cart .sidebar .list-group-item{
  margin: 1px 0 !important;
  border: 0 !important;
  background: rgba(0,0,0,.42) !important;
  color: rgba(255,255,255,.90) !important;
}
.sidebar .list-group-item:hover,
.panel-sidebar .list-group-item:hover,
.client-sidebar .list-group-item:hover,
#order-standard_cart .sidebar .list-group-item:hover{
  background: var(--hover) !important;
  outline: 1px solid var(--hover-border) !important;
  outline-offset: -1px !important;
}
/* =========================================================
   KSHIP PATCH: Header "Hello, User" dropdown + Order/Product pages (Shared Hosting)
   Put at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-blue-glass: rgba(31,124,255,.14);
  --kship-blue-line:  rgba(127,182,255,.22);
  --kship-hover:      rgba(127,182,255,.12);
  --kship-hover-line: rgba(127,182,255,.28);

  --kship-glass: rgba(0,0,0,.45);
  --kship-glass-2: rgba(0,0,0,.60);
  --kship-line: rgba(255,255,255,.12);

  --kship-blue: #1f7cff;
  --kship-blue-hover: #3a8cff;
}

/* ---------------------------------------------------------
   1) FIX "Hello, User" dropdown (no radius + blue-glass + light-blue hover)
   --------------------------------------------------------- */

/* The "Hello, Ken!" dropdown toggle + any top nav pills */
#header .main-navbar-wrapper .navbar-nav .nav-link,
#header .main-navbar-wrapper .navbar-nav a,
#header .topbar .btn,
#header .btn-active-client,
#header .btn-return-to-admin{
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
}

/* Hover on menu items = subtle light-blue */
#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li > a:focus{
  background: var(--kship-hover) !important;
  outline: 1px solid var(--kship-hover-line) !important;
  outline-offset: -1px !important;
}

/* Dropdown menu itself = blue glass (NOT pure black) */
#header .main-navbar-wrapper .dropdown-menu,
#header .topbar .dropdown-menu{
  border-radius: 0 !important;
  background: var(--kship-blue-glass) !important;
  border: 1px solid var(--kship-blue-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
}

/* Dropdown items */
#header .dropdown-menu .dropdown-item{
  border-radius: 0 !important;
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
}
#header .dropdown-menu .dropdown-item:hover,
#header .dropdown-menu .dropdown-item:focus{
  background: var(--kship-hover) !important;
  outline: 1px solid var(--kship-hover-line) !important;
  outline-offset: -1px !important;
}

/* ---------------------------------------------------------
   2) SHARED HOSTING / PRODUCT PAGES (order forms) – force dark glass
   This covers WHMCS product pages that are NOT inside #order-standard_cart
   --------------------------------------------------------- */

/* Common order form containers (WHMCS varies by orderform) */
#main-body [id^="order-"],
#main-body .order-form,
#main-body .orderform,
#main-body .products,
#main-body .product,
#main-body .product-box,
#main-body .package,
#main-body .plan,
#main-body .pricing,
#main-body .feature-box,
#main-body .content-block{
  color: rgba(255,255,255,.92) !important;
}

/* Glass blocks on product pages (kills the light blue/white sections) */
#main-body [id^="order-"] .panel,
#main-body [id^="order-"] .card,
#main-body [id^="order-"] .well,
#main-body [id^="order-"] .box,
#main-body [id^="order-"] .package,
#main-body [id^="order-"] .product,
#main-body [id^="order-"] .product-box,
#main-body [id^="order-"] .pricing-box,
#main-body [id^="order-"] .content-block,
#main-body .products .product,
#main-body .products .product-box{
  background: var(--kship-glass) !important;
  border: 1px solid var(--kship-line) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Nuke “white card” leftovers */
#main-body [id^="order-"] *[style*="background:#fff"],
#main-body [id^="order-"] *[style*="background: #fff"],
#main-body [id^="order-"] .bg-white,
#main-body [id^="order-"] .bg-light,
#main-body .products .bg-white,
#main-body .products .bg-light{
  background: var(--kship-glass) !important;
  border-color: var(--kship-line) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Text-muted must be readable on dark */
#main-body [id^="order-"] .text-muted,
#main-body .products .text-muted,
#main-body .product .text-muted{
  color: rgba(255,255,255,.72) !important;
}

/* ---------------------------------------------------------
   3) SLIDER / PLAN SELECTOR (matches your screenshot)
   --------------------------------------------------------- */

/* jQuery UI slider (commonly used in “plan” pages) */
.ui-slider,
.ui-slider-horizontal{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 0 !important;
}
.ui-slider .ui-slider-range{
  background: var(--kship-blue) !important;
}
.ui-slider .ui-slider-handle{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(127,182,255,.45) !important;
  border-radius: 0 !important;
}
.ui-slider .ui-slider-handle:hover{
  outline: 1px solid var(--kship-hover-line) !important;
  outline-offset: -1px !important;
}

/* ---------------------------------------------------------
   4) BUTTONS on product pages: force KShip blue
   --------------------------------------------------------- */
#main-body [id^="order-"] .btn-primary,
#main-body [id^="order-"] .btn-success,
#main-body [id^="order-"] .btn-danger,
#main-body .products .btn-primary,
#main-body .products .btn-success,
#main-body .products .btn-danger{
  background: var(--kship-blue) !important;
  border-color: var(--kship-blue) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}
#main-body [id^="order-"] .btn-primary:hover,
#main-body [id^="order-"] .btn-success:hover,
#main-body [id^="order-"] .btn-danger:hover,
#main-body .products .btn-primary:hover,
#main-body .products .btn-success:hover,
#main-body .products .btn-danger:hover{
  background: var(--kship-blue-hover) !important;
  border-color: var(--kship-blue-hover) !important;
}

/* ---------------------------------------------------------
   5) Make any remaining “rounded” helpers square
   --------------------------------------------------------- */
.rounded,
.rounded-sm,
.rounded-lg,
.rounded-pill{
  border-radius: 0 !important;
}
/* =========================================================
   KSHIP: Square off the dashboard stat tiles (Services/Domains/Tickets/Invoices)
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

/* Kill radius on the stat/tile row containers */
#main-body .clientareahome .panel,
#main-body .clientareahome .card,
#main-body .clientareahome .tile,
#main-body .clientareahome .stat,
#main-body .clientareahome .stats,
#main-body .clientareahome .stats .item,
#main-body .clientareahome .stats .item a,
#main-body .clientareahome .stats .item .inner,
#main-body .clientareahome .stats .item .icon,
#main-body .clientareahome .stats .item .count,
#main-body .clientareahome .stats .item .name,
#main-body .clientareahome .stats .item .label,
#main-body .clientareahome .stats .item .value,
#main-body .clientareahome .stats .item .title,
#main-body .clientareahome .stats .item .desc,
#main-body .clientareahome .stats .item *,
#main-body .client-home-panels .panel,
#main-body .client-home-panels .card,
#main-body .client-home-panels .tile,
#main-body .client-home-panels .stat{
  border-radius: 0 !important;
}

/* Make the tiles look like your “1px padding between + low opacity hover” style */
#main-body .clientareahome .stats .item,
#main-body .clientareahome .tile,
#main-body .client-home-panels .tile,
#main-body .client-home-panels .stat{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.45) !important;
  margin: 0 0 1px 0 !important; /* 1px separation */
}

/* Hover = subtle light blue */
#main-body .clientareahome .stats .item:hover,
#main-body .clientareahome .tile:hover,
#main-body .client-home-panels .tile:hover,
#main-body .client-home-panels .stat:hover{
  background: rgba(127,182,255,.12) !important;
  border-color: rgba(127,182,255,.28) !important;
}

/* Ensure links inside don’t re-round */
#main-body .clientareahome .stats .item a,
#main-body .clientareahome .tile a,
#main-body .client-home-panels .tile a{
  border-radius: 0 !important;
  background: transparent !important;
}
/* =========================================================
   KSHIP: Dashboard tiles (Services/Domains/Tickets/Invoices)
   Based on: <div class="tiles"> ... <a class="tile">...</a>
   ========================================================= */

:root{
  /* tweak these if you want */
  --kship-blue: #3aa0ff;
  --kship-blue-soft: rgba(58,160,255,.14);
  --kship-blue-border: rgba(58,160,255,.28);
  --kship-tile-bg: rgba(0,0,0,.45);
  --kship-tile-border: rgba(255,255,255,.12);
}

/* Kill border radius everywhere inside the tile */
#main-body .tiles,
#main-body .tiles .row,
#main-body .tiles .col-6,
#main-body .tiles a.tile,
#main-body .tiles a.tile *{
  border-radius: 0 !important;
}

/* Tile base style (rectangles + subtle separation) */
#main-body .tiles a.tile{
  display: block;
  background: var(--kship-tile-bg) !important;
  border: 1px solid var(--kship-tile-border) !important;
  box-shadow: none !important;
  margin: 0 0 1px 0 !important;  /* 1px gap between rows */
  padding: 14px 16px !important;
  text-decoration: none !important;
}

/* Optional: create 1px “grid gaps” between columns too */
#main-body .tiles .row.no-gutters > [class*="col-"]{
  padding-right: 1px !important;
  padding-bottom: 1px !important;
}

/* Text/icon colors */
#main-body .tiles a.tile,
#main-body .tiles a.tile .stat,
#main-body .tiles a.tile .title{
  color: #fff !important;
}
#main-body .tiles a.tile i{
  color: var(--kship-blue) !important;
  opacity: .69;
}

/* Hover = very light blue wash */
#main-body .tiles a.tile:hover{
  background: var(--kship-blue-soft) !important;
  border-color: var(--kship-blue-border) !important;
}

/* Replace WHMCS highlight colors (gold/red/etc.) with KShip blue */
#main-body .tiles a.tile .highlight,
#main-body .tiles a.tile .highlight.bg-color-blue,
#main-body .tiles a.tile .highlight.bg-color-green,
#main-body .tiles a.tile .highlight.bg-color-red,
#main-body .tiles a.tile .highlight.bg-color-gold{
  background: var(--kship-blue) !important;
  opacity: .55 !important;
}

/* Make the highlight bar square + consistent */
#main-body .tiles a.tile .highlight{
  height: 3px !important;
  border-radius: 0 !important;
}
/* =========================================================
   KSHIP: Keep "Active" status badge GREEN everywhere
   (services list, tickets, tables, etc.)
   ========================================================= */

/* Common WHMCS/Twenty-One status label patterns */
#main-body .status-active,
#main-body .label.status-active,
#main-body .badge.status-active,
#main-body .label-success,
#main-body .badge-success,
#main-body .btn-success.btn-sm,
#main-body span.status.active,
#main-body td.status .label,
#main-body td.status .badge,
#main-body .dataTables_wrapper .badge,
#main-body .dataTables_wrapper .label{
  background: rgba(46, 204, 113, .22) !important;   /* soft green */
  border: 1px solid rgba(46, 204, 113, .55) !important;
  color: #d8ffe8 !important;
  text-shadow: none !important;
  border-radius: 0 !important; /* you wanted no radius */
}

/* If WHMCS uses a plain "Active" label without class, catch the common table cell */
#main-body td.status .label:contains("Active"),
#main-body td.status .badge:contains("Active"){
  background: rgba(46, 204, 113, .22) !important;
  border: 1px solid rgba(46, 204, 113, .55) !important;
  color: #d8ffe8 !important;
  border-radius: 0 !important;
}
/* =========================================================
   KSHIP: Keep "Active" status badge GREEN everywhere
   (services list, tickets, tables, etc.)
   ========================================================= */

/* Common WHMCS/Twenty-One status label patterns */
#main-body .status-active,
#main-body .label.status-active,
#main-body .badge.status-active,
#main-body .label-success,
#main-body .badge-success,
#main-body .btn-success.btn-sm,
#main-body span.status.active,
#main-body td.status .label,
#main-body td.status .badge,
#main-body .dataTables_wrapper .badge,
#main-body .dataTables_wrapper .label{
  background: rgba(46, 204, 113, .22) !important;   /* soft green */
  border: 1px solid rgba(46, 204, 113, .55) !important;
  color: #d8ffe8 !important;
  text-shadow: none !important;
  border-radius: 0 !important; /* you wanted no radius */
}

/* If WHMCS uses a plain "Active" label without class, catch the common table cell */
#main-body td.status .label:contains("Active"),
#main-body td.status .badge:contains("Active"){
  background: rgba(46, 204, 113, .22) !important;
  border: 1px solid rgba(46, 204, 113, .55) !important;
  color: #d8ffe8 !important;
  border-radius: 0 !important;
}
/* =========================================================
   KSHIP: ZERO RADIUS MODE (absolute)
   Must be LAST in custom.css
   ========================================================= */
html body * ,
html body *::before,
html body *::after{
  border-radius: 0 !important;
}

/* Common offenders / Bootstrap pills */
html body .rounded,
html body .rounded-sm,
html body .rounded-lg,
html body .rounded-circle,
html body .btn,
html body .btn-group > .btn,
html body .btn-group-vertical > .btn,
html body .card,
html body .panel,
html body .modal-content,
html body .dropdown-menu,
html body .form-control,
html body .input-group-text,
html body .nav,
html body .nav-tabs .nav-link,
html body .nav-pills .nav-link,
html body .list-group-item,
html body .pagination .page-link,
html body .badge,
html body .alert,
html body .tile,
html body .well{
  border-radius: 0 !important;
}
/* =========================================================
   KSHIP: TIGHT FOOTER (small, clean, organized)
   Uses same low-opacity blue vibe as header
   ========================================================= */

:root{
  /* tweak this if you want more/less blue */
  --kship-footer-bg: rgba(25, 90, 170, .14);
  --kship-footer-border: rgba(120, 190, 255, .18);
  --kship-footer-text: rgba(255,255,255,.86);
  --kship-footer-muted: rgba(255,255,255,.70);
  --kship-footer-hover: rgba(120, 190, 255, .14);
}

/* Main footer shell */
#footer.footer{
  background: var(--kship-footer-bg) !important;
  border-top: 1px solid var(--kship-footer-border) !important;
  color: var(--kship-footer-text) !important;
  padding: 10px 0 !important;      /* <- makes it short */
  margin: 0 !important;
}

/* tighten container */
#footer.footer .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* kill big spacing utilities used by Twenty-One (mb-7 etc.) */
#footer.footer .mb-7{ margin-bottom: 0 !important; }

/* Layout: left links, center copyright, right socials/language */
#footer.footer .nav,
#footer.footer .list-inline{
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px;
}

/* remove float weirdness and make it align nicely */
#footer.footer .list-inline.float-lg-right{
  float: none !important;
}

#footer.footer .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;                 /* mobile friendly */
}

/* order inside flex so it always looks organized */
#footer.footer .nav{
  order: 1;
}
#footer.footer .copyright{
  order: 2;
  flex: 1 1 auto;
  text-align: center;
}
#footer.footer .list-inline{
  order: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Links */
#footer.footer a,
#footer.footer .nav-link{
  color: var(--kship-footer-text) !important;
  padding: 6px 8px !important;     /* tighter */
  margin: 0 !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
}
#footer.footer a:hover,
#footer.footer .nav-link:hover{
  background: var(--kship-footer-hover) !important;
}

/* Social icon button: compact square, no radius (your global rule keeps it 0) */
#footer.footer .btn.btn-icon{
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.18) !important;
  color: #fff !important;
}
#footer.footer .btn.btn-icon:hover{
  background: var(--kship-footer-hover) !important;
  border-color: rgba(120,190,255,.35) !important;
}

/* Language button: compact */
#footer.footer button.btn{
  padding: 6px 10px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.18) !important;
  color: #fff !important;
  line-height: 1.1 !important;
}
#footer.footer button.btn:hover{
  background: var(--kship-footer-hover) !important;
  border-color: rgba(120,190,255,.35) !important;
}

/* Flag spacing */
#footer.footer .iti-flag{
  margin-right: 6px !important;
  transform: scale(.9);
}

/* Copyright */
#footer.footer .copyright{
  color: var(--kship-footer-muted) !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

/* Mobile: stack nicely */
@media (max-width: 992px){
  #footer.footer .container{
    justify-content: center;
  }
  #footer.footer .nav{ order: 1; justify-content: center !important; width: 100%; }
  #footer.footer .copyright{ order: 2; width: 100%; text-align: center; }
  #footer.footer .list-inline{ order: 3; justify-content: center !important; width: 100%; }
}
/* =========================================================
   KSHIP HEADER – low-opacity blue glass, no radius, clean hover
   ========================================================= */

:root{
  --kship-blue: #49a6ff; /* hover accent */
  --kship-blue-soft: rgba(73,166,255,.24);
  --kship-head-bg: rgba(25, 90, 170, .14);     /* same family as footer */
  --kship-head-border: rgba(120,190,255,.18);
  --kship-head-text: rgba(255,255,255,.90);
  --kship-head-muted: rgba(255,255,255,.72);
  --kship-head-control: rgba(0,0,0,.18);
  --kship-head-control-border: rgba(255,255,255,.16);
}

/* --- Force no radius in header (and its dropdowns/controls) --- */
#header, #header *{
  border-radius: 0 !important;
}

/* --- Topbar + both nav rows match the glass blue --- */
#header.header,
#header.header .topbar,
#header.header .navbar,
#header.header .main-navbar-wrapper{
  background: var(--kship-head-bg) !important;
  border-bottom: 1px solid var(--kship-head-border) !important;
  color: var(--kship-head-text) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

/* Reduce overall header height/padding a bit */
#header.header .navbar .container,
#header.header .topbar .container{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Logo size */
#header .kship-brand-logo{
  height: 34px !important;
  width: auto !important;
}

/* --- Header links --- */
#header a,
#header .nav-link,
#header .navbar-nav a{
  color: var(--kship-head-text) !important;
  text-decoration: none !important;
  font-weight: 600;
}

/* make dropdown carets visible */
#header .dropdown-toggle::after{
  border-top-color: var(--kship-head-text) !important;
}

/* Hover = subtle light-blue */
#header a:hover,
#header .nav-link:hover,
#header .navbar-nav a:hover{
  background: var(--kship-blue-soft) !important;
  color: #fff !important;
}

/* --- Remove those "none" badges in primary nav only --- */
#Primary_Navbar .badge{
  display: inline-block;
}
#Primary_Navbar .badge:empty{
  display:none !important;
}
/* Hide literal text "none" badges */
#Primary_Navbar .badge{
  text-transform: lowercase;
}
#Primary_Navbar .badge{
  font-size: 11px;
  padding: 2px 6px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.16) !important;
  color: rgba(255,255,255,.85) !important;
}
#Primary_Navbar .badge:contains("none"){ display:none !important; } /* some browsers ignore this */
/* Reliable: hide badges that literally render "none" by targeting common WHMCS output */
#Primary_Navbar .badge{
  /* if it says none, it usually isn't numeric; hide when not numeric */
}
#Primary_Navbar .badge:not(.badge-info):not(.badge-success):not(.badge-danger){
  /* keep numeric badges; hide non-numeric */
}
#Primary_Navbar .badge{
  /* final safe rule: hide exactly "none" via attribute-free trick */
}
#Primary_Navbar .badge{
  /* If your theme outputs <span class="badge">none</span>, this will hide it */
}
#Primary_Navbar .badge{
  /* use this instead (works everywhere): */
}
#Primary_Navbar .badge{
  /* override in next rule using text selection isn't possible in CSS; do the practical approach: */
}
#Primary_Navbar .badge{
  /* Practical approach: hide ALL badges in Primary nav then re-enable numeric ones below */
  display:none !important;
}
/* Re-enable numeric badges (Invoices count etc.) */
#Primary_Navbar .badge{
  /* will be overridden by the next selector when numeric */
}
#Primary_Navbar .badge{
  /* nothing */
}
#Primary_Navbar .badge{
  /* nothing */
}
#Primary_Navbar .badge{
  /* nothing */
}
/* Numeric badges usually not "none" — re-enable when it has digits by using data from your markup:
   Your "My Invoices" badge is "0" etc. This selector re-enables any badge that is not empty and not whitespace. */
#Primary_Navbar .badge:not(:empty){
  display:inline-block !important;
}
/* Now hide the ones that are literally "none" by forcing them transparent + zero width */
#Primary_Navbar .badge{
  /* If it’s "none", you’ll still see it. So we also give you a template-level fix below. */
}

/* BEST FIX (no guesswork):
   Add this once in header.tpl: remove &nbsp;<span class="badge">none</span>
   Or change it to only render when numeric.
   If you can’t edit tpl, we can hide by adding a class hook with JS later.
*/

/* --- Buttons / pills in topbar ("Logged in as", switch, return-to-admin) --- */
#header .topbar .btn,
#header .topbar .input-group-text{
  background: var(--kship-head-control) !important;
  border: 1px solid var(--kship-head-control-border) !important;
  color: #fff !important;
  padding: 6px 10px !important;
}
#header .topbar .btn:hover{
  background: var(--kship-blue-soft) !important;
  border-color: rgba(120,190,255,.35) !important;
}

/* --- Search controls --- */
#header .search .btn,
#header .search .form-control,
#header .search .input-group-text{
  background: var(--kship-head-control) !important;
  border: 1px solid var(--kship-head-control-border) !important;
  color:#fff !important;
}
#header .search .form-control::placeholder{
  color: rgba(255,255,255,.65) !important;
}

/* --- Cart badge (keep visible) --- */
#header .badge-info,
#header #cartItemCount{
  background: rgba(73,166,255,.22) !important;
  border: 1px solid rgba(120,190,255,.30) !important;
  color:#fff !important;
}

/* --- Main nav items spacing + separators --- */
#header .main-navbar-wrapper #nav > li > a{
  padding: 8px 10px !important;
  margin: 0 !important;
}
#header .main-navbar-wrapper #nav > li{
  border-right: 1px solid rgba(255,255,255,.08) !important;
}
#header .main-navbar-wrapper #nav > li:last-child{
  border-right: 0 !important;
}

/* --- Dropdown menus (Primary + Hello dropdown) --- */
#header .dropdown-menu{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(120,190,255,.18) !important;
  padding: 6px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
}
#header .dropdown-menu .dropdown-item{
  color: rgba(255,255,255,.90) !important;
  padding: 7px 10px !important;
  margin: 1px 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10) !important; /* 1px divider feel */
}
#header .dropdown-menu .dropdown-item:hover{
  background: var(--kship-blue-soft) !important;
  border-color: rgba(120,190,255,.28) !important;
  color:#fff !important;
}

/* Make "Hello, Ken!" not black/pill */
#Secondary_Navbar-Account > a.dropdown-toggle{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  padding: 7px 10px !important;
}
#Secondary_Navbar-Account > a.dropdown-toggle:hover{
  background: var(--kship-blue-soft) !important;
  border-color: rgba(120,190,255,.28) !important;
}

/* Divider lines in dropdowns */
#header .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* Mobile hamburger button */
#header .navbar .fa-bars,
#header .navbar button.btn.nav-link{
  color:#fff !important;
}
/* =========================================================
   KSHIP: FORCE DROPDOWNS = BLUE GLASS + ZERO RADIUS (wins over Twenty-One)
   Put at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-dd-bg: rgba(25, 90, 170, .14);     /* same vibe as header/footer */
  --kship-dd-border: rgba(120,190,255,.22);
  --kship-dd-hover: rgba(120,190,255,.14);
  --kship-dd-text: rgba(255,255,255,.92);
}

/* Absolute no-radius for anything dropdown related */
html body .dropdown-menu,
html body .dropdown-menu *,
html body .dropdown-toggle,
html body .dropdown-item,
html body .dropdown-divider{
  border-radius: 0 !important;
}

/* FORCE dropdown background + border (header + nav + account) */
html body #header .dropdown-menu,
html body .main-navbar-wrapper .dropdown-menu,
html body .navbar .dropdown-menu,
html body .topbar .dropdown-menu,
html body .collapsable-dropdown-menu.dropdown-menu,
html body .navbar-nav .dropdown-menu.dropdown-menu-right{
  background: var(--kship-dd-bg) !important;
  background-image: none !important;
  border: 1px solid var(--kship-dd-border) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 6px !important;
}

/* Items inside dropdown */
html body #header .dropdown-menu .dropdown-item,
html body .navbar .dropdown-menu .dropdown-item,
html body .main-navbar-wrapper .dropdown-menu .dropdown-item{
  color: var(--kship-dd-text) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 7px 10px !important;
  margin: 1px 0 !important;
}

/* Hover = subtle light blue, with 1px outline feel */
html body #header .dropdown-menu .dropdown-item:hover,
html body .navbar .dropdown-menu .dropdown-item:hover,
html body .main-navbar-wrapper .dropdown-menu .dropdown-item:hover{
  background: var(--kship-dd-hover) !important;
  border-color: rgba(120,190,255,.28) !important;
  color: #fff !important;
}

/* Divider line */
html body #header .dropdown-menu .dropdown-divider,
html body .navbar .dropdown-menu .dropdown-divider,
html body .main-navbar-wrapper .dropdown-menu .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

/* Fix the "Hello, Ken!" toggle so it matches */
html body #Secondary_Navbar-Account > a.dropdown-toggle{
  background: rgba(0,0,0,.14) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  padding: 7px 10px !important;
}
html body #Secondary_Navbar-Account > a.dropdown-toggle:hover{
  background: var(--kship-dd-hover) !important;
  border-color: rgba(120,190,255,.28) !important;
}
/* =========================================================
   KSHIP HEADER (COMPACT) + SEARCH BORDER FIX + DROPDOWNS (NO RADIUS, NO BLACK)
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-blue-glass: rgba(25, 90, 170, .14);
  --kship-blue-border: rgba(120,190,255,.18);
  --kship-blue-hover: rgba(120,190,255,.12);
  --kship-text: rgba(255,255,255,.92);
  --kship-muted: rgba(255,255,255,.72);
}

/* ============ 0 RADIUS EVERYWHERE (your request) ============ */
html body *{
  border-radius: 0 !important;
}

/* =========================================================
   HEADER: make it ONE compact band (topbar + navbar + menu)
   ========================================================= */
html body #header.kship-navbar,
html body #header.kship-navbar .topbar,
html body #header.kship-navbar .navbar,
html body #header.kship-navbar .main-navbar-wrapper{
  background: var(--kship-blue-glass) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove the extra divider lines / “two bars” look */
html body #header.kship-navbar .topbar{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
html body #header.kship-navbar .navbar.navbar-light{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
html body #header.kship-navbar .main-navbar-wrapper{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Tighten vertical spacing everywhere in header */
html body #header.kship-navbar .topbar .container,
html body #header.kship-navbar .navbar .container,
html body #header.kship-navbar .main-navbar-wrapper .container{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Tighten nav link spacing */
html body #header.kship-navbar #nav > li > a,
html body #header.kship-navbar .navbar-nav > li > a{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  color: var(--kship-text) !important;
}

/* Hide "none" badges in primary nav */
html body #header.kship-navbar #nav .badge{
  display: none !important;
}

/* =========================================================
   SEARCH: kill bright white border + match header glass
   (circled area in your screenshot)
   ========================================================= */
html body #header.kship-navbar .input-group.search{
  border: 1px solid var(--kship-blue-border) !important;
  background: rgba(0,0,0,.12) !important;
}

/* Input + button styling (no white outline) */
html body #header.kship-navbar .input-group.search .form-control,
html body #header.kship-navbar .input-group.search .appended-form-control,
html body #header.kship-navbar .input-group.search .prepended-form-control{
  background: rgba(0,0,0,.10) !important;
  border: 0 !important;
  color: var(--kship-text) !important;
  box-shadow: none !important;
  outline: 0 !important;
}
html body #header.kship-navbar .input-group.search .form-control::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* Search button (removes the white border you’re seeing) */
html body #header.kship-navbar .input-group.search .btn,
html body #header.kship-navbar .input-group.search .btn-default{
  background: rgba(0,0,0,.10) !important;
  border: 0 !important;
  color: var(--kship-text) !important;
  box-shadow: none !important;
}

/* Focus ring becomes subtle light blue */
html body #header.kship-navbar .input-group.search:focus-within{
  border-color: rgba(120,190,255,.35) !important;
  box-shadow: 0 0 0 1px rgba(120,190,255,.18) !important;
}

/* Cart button + badge match */
html body #header.kship-navbar .cart-btn{
  border: 1px solid var(--kship-blue-border) !important;
  background: rgba(0,0,0,.10) !important;
}
html body #header.kship-navbar .badge.badge-info{
  background: rgba(120,190,255,.22) !important;
  color: #fff !important;
  border: 1px solid rgba(120,190,255,.22) !important;
}

/* =========================================================
   DROPDOWNS: remove black bg, remove padding bloat, kill pseudo overlays
   ========================================================= */

/* Force dropdown container to blue glass */
html body #header .dropdown-menu,
html body #header .collapsable-dropdown-menu.dropdown-menu,
html body #header .dropdown-menu.dropdown-menu-right,
html body .main-navbar-wrapper .dropdown-menu{
  background-color: var(--kship-blue-glass) !important;
  background-image: none !important;
  border: 1px solid var(--kship-blue-border) !important;
  padding: 4px !important;                 /* tighter than before */
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* KILL theme pseudo elements that keep it black */
html body #header .dropdown-menu::before,
html body #header .dropdown-menu::after,
html body #header .dropdown-menu *::before,
html body #header .dropdown-menu *::after{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Dropdown items: rectangular, 1px separation, light hover */
html body #header .dropdown-menu .dropdown-item{
  background: transparent !important;
  color: var(--kship-text) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 6px 10px !important;
  margin: 1px 0 !important;                /* 1px “gap” look */
}
html body #header .dropdown-menu .dropdown-item:hover{
  background: var(--kship-blue-hover) !important;
  border-color: rgba(120,190,255,.28) !important;
  color: #fff !important;
}

/* Divider: subtle */
html body #header .dropdown-menu .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.10) !important;
  margin: 4px 0 !important;
}

/* "Hello, Ken!" button style (rect + subtle hover) */
html body #Secondary_Navbar-Account > a.dropdown-toggle{
  background: rgba(0,0,0,.10) !important;
  border: 1px solid var(--kship-blue-border) !important;
  color: var(--kship-text) !important;
  padding: 6px 10px !important;
}
html body #Secondary_Navbar-Account > a.dropdown-toggle:hover{
  background: var(--kship-blue-hover) !important;
  border-color: rgba(120,190,255,.28) !important;
}

/* =========================================================
   OPTIONAL: if you want the header even tighter
   ========================================================= */
/*
html body #header.kship-navbar .navbar-brand img.kship-brand-logo{ height: 28px !important; }
html body #header.kship-navbar .topbar .btn,
html body #header.kship-navbar .navbar .btn{ padding: 5px 8px !important; }
*/
/* =========================================================
   KSHIP – HEADER + SEARCH + DROPDOWNS (SAFE OVERRIDES)
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-h-bg: rgba(25, 90, 170, .14);       /* blue glass */
  --kship-h-line: rgba(120,190,255,.18);      /* subtle border */
  --kship-h-hover: rgba(120,190,255,.12);     /* hover wash */
  --kship-h-text: rgba(255,255,255,.92);
  --kship-h-muted: rgba(255,255,255,.70);
  --kship-h-control: rgba(0,0,0,.14);         /* control fill */
}

/* -----------------------------
   1) MAKE HEADER ONE COMPACT BAND
   ----------------------------- */
html body #header,
html body #header .topbar,
html body #header .navbar,
html body #header .main-navbar-wrapper{
  background: var(--kship-h-bg) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: none !important;
}

/* Kill “two bar / divider line” look */
html body #header .topbar,
html body #header .navbar,
html body #header .main-navbar-wrapper{
  border: 0 !important;
}
html body #header{
  border-bottom: 1px solid var(--kship-h-line) !important;
}

/* Tighten vertical padding across header rows */
html body #header .topbar .container,
html body #header .navbar .container,
html body #header .main-navbar-wrapper .container{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Tighten nav links */
html body #header #Primary_Navbar .nav-link,
html body #header #Secondary_Navbar .nav-link,
html body #header .main-navbar-wrapper #nav > li > a{
  padding: 6px 10px !important;
  margin: 0 !important;
  color: var(--kship-h-text) !important;
  border-radius: 0 !important;
}

/* Optional: reduce spacing between primary nav items */
html body #header .main-navbar-wrapper #nav > li{
  margin: 0 !important;
}

/* -----------------------------
   2) FIX SEARCH WHITE BORDER / OUTLINE
   (the bright border is usually on inner controls)
   ----------------------------- */
html body #header .input-group.search{
  border: 1px solid var(--kship-h-line) !important;
  background: var(--kship-h-control) !important;
  border-radius: 0 !important;
}

/* Remove borders from the inner pieces so ONLY wrapper border shows */
html body #header .input-group.search .form-control,
html body #header .input-group.search .input-group-text,
html body #header .input-group.search .btn,
html body #header .input-group.search button{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--kship-h-text) !important;
}

/* Placeholder */
html body #header .input-group.search .form-control::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* Focus ring subtle (no white glow) */
html body #header .input-group.search:focus-within{
  border-color: rgba(120,190,255,.35) !important;
  box-shadow: 0 0 0 1px rgba(120,190,255,.18) !important;
}

/* -----------------------------
   3) DROPDOWNS: NO BLACK, NO RADIUS, NO PADDING BLOAT
   (covers “More”, “Hello, Ken!”, etc.)
   ----------------------------- */
html body #header .dropdown-menu,
html body #header .collapsable-dropdown-menu.dropdown-menu,
html body #header .dropdown-menu.dropdown-menu-right,
html body #header .navbar .dropdown-menu,
html body #header .main-navbar-wrapper .dropdown-menu{
  background: var(--kship-h-bg) !important;          /* NOT black */
  border: 1px solid var(--kship-h-line) !important;
  border-radius: 0 !important;
  padding: 4px !important;                           /* tighter */
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Kill theme pseudo overlays/arrows that keep menus dark/rounded */
html body #header .dropdown-menu::before,
html body #header .dropdown-menu::after{
  display: none !important;
  content: none !important;
}

/* Standard dropdown rows */
html body #header .dropdown-menu .dropdown-item{
  background: transparent !important;
  color: var(--kship-h-text) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;                      /* tighter */
  margin: 1px 0 !important;
}

/* Hover */
html body #header .dropdown-menu .dropdown-item:hover,
html body #header .dropdown-menu .dropdown-item:focus{
  background: var(--kship-h-hover) !important;
  border-color: rgba(120,190,255,.28) !important;
  color: #fff !important;
}

/* Dividers */
html body #header .dropdown-menu .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.10) !important;
  margin: 4px 0 !important;
}

/* -----------------------------
   4) ACCOUNT DROPDOWN “BIG BUTTON STACK” FIX
   (some WHMCS builds render dropdown entries as .btn blocks)
   ----------------------------- */
html body #header .dropdown-menu .btn,
html body #header .dropdown-menu a.btn,
html body #header .dropdown-menu .btn.btn-block{
  display: block !important;
  width: 100% !important;
  text-align: left !important;

  background: transparent !important;
  color: var(--kship-h-text) !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;

  padding: 6px 10px !important;                      /* remove bloat */
  margin: 1px 0 !important;
  box-shadow: none !important;
}

html body #header .dropdown-menu .btn:hover,
html body #header .dropdown-menu a.btn:hover,
html body #header .dropdown-menu .btn.btn-block:hover{
  background: var(--kship-h-hover) !important;
  border-color: rgba(120,190,255,.28) !important;
  color: #fff !important;
}

/* -----------------------------
   5) “HELLO, USER” TOGGLE: MAKE IT MATCH (not pill/black)
   ----------------------------- */
html body #Secondary_Navbar-Account > a.dropdown-toggle{
  background: var(--kship-h-control) !important;
  border: 1px solid var(--kship-h-line) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
  color: var(--kship-h-text) !important;
}
html body #Secondary_Navbar-Account > a.dropdown-toggle:hover{
  background: var(--kship-h-hover) !important;
  border-color: rgba(120,190,255,.28) !important;
}
/* =========================================================
   KSHIP – DROPDOWNS DARKER + NO BOXED ITEMS
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  /* darker menu so links pop */
  --kship-dd-bg-dark: rgba(0,0,0,.68);          /* darker than your current glass */
  --kship-dd-border: rgba(120,190,255,.22);     /* keep subtle outer border */
  --kship-dd-hover: rgba(120,190,255,.14);      /* hover wash */
  --kship-dd-text: rgba(255,255,255,.94);
}

/* Dropdown container (More / Hello, Ken! / etc.) */
html body #header .dropdown-menu,
html body #header .collapsable-dropdown-menu.dropdown-menu,
html body #header .dropdown-menu.dropdown-menu-right,
html body .main-navbar-wrapper .dropdown-menu{
  background: var(--kship-dd-bg-dark) !important;
  border: 1px solid var(--kship-dd-border) !important;
  padding: 4px !important;                 /* keep menu tight */
  border-radius: 0 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Kill theme pseudo overlays that can add “extra” framing */
html body #header .dropdown-menu::before,
html body #header .dropdown-menu::after{
  display:none !important;
  content:none !important;
}

/* Dropdown items: REMOVE border + REMOVE “button box” feel */
html body #header .dropdown-menu .dropdown-item{
  border: 0 !important;                    /* <-- removes border around text */
  background: transparent !important;
  color: var(--kship-dd-text) !important;
  padding: 6px 10px !important;            /* smaller padding (not chunky) */
  margin: 0 !important;                    /* <-- no boxed gaps */
  line-height: 1.2 !important;
}

/* Hover: simple tint only (no border / outline) */
html body #header .dropdown-menu .dropdown-item:hover,
html body #header .dropdown-menu .dropdown-item:focus{
  background: var(--kship-dd-hover) !important;
  color: #fff !important;
}

/* Divider stays subtle */
html body #header .dropdown-menu .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.12) !important;
  margin: 4px 0 !important;
}

/* Some WHMCS account dropdowns render as .btn or .btn-block items */
html body #header .dropdown-menu .btn,
html body #header .dropdown-menu a.btn,
html body #header .dropdown-menu .btn.btn-block{
  border: 0 !important;                    /* <-- remove button border */
  background: transparent !important;
  color: var(--kship-dd-text) !important;
  padding: 6px 10px !important;            /* match dropdown-item */
  margin: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  width: 100% !important;
}

html body #header .dropdown-menu .btn:hover,
html body #header .dropdown-menu a.btn:hover,
html body #header .dropdown-menu .btn.btn-block:hover{
  background: var(--kship-dd-hover) !important;
  color: #fff !important;
}
/* =========================================================
   KSHIP – DROPDOWNS MATCH TRIGGER BLUE + SUBTLE HOVER SHIFT
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  /* use the SAME family as your header/trigger */
  --kship-dd-bg: rgba(25, 90, 170, .74);      /* same “blue glass” */
  --kship-dd-bg-hover: rgba(25, 90, 170, .82);/* slightly stronger on hover */
  --kship-dd-border: rgba(120,190,255,.18);
  --kship-dd-text: rgba(255,255,255,.92);
}

/* Dropdown container */
html body #header .dropdown-menu,
html body #header .collapsable-dropdown-menu.dropdown-menu,
html body #header .dropdown-menu.dropdown-menu-right,
html body .main-navbar-wrapper .dropdown-menu{
  background: var(--kship-dd-bg) !important;              /* <-- match trigger */
  background-image: none !important;
  border: 1px solid var(--kship-dd-border) !important;
  padding: 4px !important;
  border-radius: 0 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* kill any theme pseudo overlays */
html body #header .dropdown-menu::before,
html body #header .dropdown-menu::after{
  display:none !important;
  content:none !important;
}

/* Items: no borders/boxes */
html body #header .dropdown-menu .dropdown-item{
  background: transparent !important;
  border: 0 !important;
  color: var(--kship-dd-text) !important;
  padding: 6px 10px !important;   /* tighter */
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Hover: same blue, slightly stronger */
html body #header .dropdown-menu .dropdown-item:hover,
html body #header .dropdown-menu .dropdown-item:focus{
  background: var(--kship-dd-bg-hover) !important;
  color: #fff !important;
}

/* Divider */
html body #header .dropdown-menu .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.12) !important;
  margin: 4px 0 !important;
}

/* Some WHMCS dropdowns render items as buttons */
html body #header .dropdown-menu .btn,
html body #header .dropdown-menu a.btn,
html body #header .dropdown-menu .btn.btn-block{
  background: transparent !important;
  border: 0 !important;
  color: var(--kship-dd-text) !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  width: 100% !important;
}
html body #header .dropdown-menu .btn:hover,
html body #header .dropdown-menu a.btn:hover,
html body #header .dropdown-menu .btn.btn-block:hover{
  background: var(--kship-dd-bg-hover) !important;
  color:#fff !important;
}
/* =========================================================
   KSHIP FIX: Header notifications/toasts above blur glass
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

/* Ensure header is high, but allow other UI to sit above it */
html body #header,
html body header#header{
  position: relative !important;
  z-index: 9000 !important;
}

/* Common WHMCS notification containers (cover multiple builds) */
html body #top-notifications,
html body .top-notifications,
html body .notifications,
html body .notification-bar,
html body .alert-container,
html body .toast-container,
html body .whmcs-notifications,
html body .system-notifications{
  position: relative !important;     /* keeps layout if it’s in-flow */
  z-index: 10050 !important;         /* ABOVE header blur */
}

/* If your notifications are fixed/sticky, force them to the very top layer */
html body #top-notifications,
html body .top-notifications,
html body .toast-container{
  z-index: 11000 !important;
}

/* Dropdowns / popovers from header should also sit above header glass */
html body .dropdown-menu,
html body .popover,
html body .tooltip{
  z-index: 12000 !important;
}
/* =========================================================
   KSHIP: NOTIFICATIONS MATCH HEADER BLUE-GLASS THEME
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  /* same family as your header/footer */
  --kship-blue-glass: rgba(25, 90, 170, .14);
  --kship-blue-border: rgba(120,190,255,.18);
  --kship-blue-hover: rgba(120,190,255,.12);

  --kship-text: rgba(255,255,255,.92);
  --kship-muted: rgba(255,255,255,.72);
}

/* 0 radius everywhere (matches your “no radius” mode) */
html body .top-notifications *,
html body .notifications *,
html body .toast-container *,
html body .alert-container *{
  border-radius: 0 !important;
}

/* --- Notification containers / boxes --- */
html body #top-notifications,
html body .top-notifications,
html body .notifications,
html body .notification-bar,
html body .whmcs-notifications,
html body .system-notifications,
html body .toast-container .toast,
html body .toast,
html body .alert,
html body .messagebox,
html body .info-box,
html body .notice{
  background: var(--kship-blue-glass) !important;
  border: 1px solid var(--kship-blue-border) !important;
  color: var(--kship-text) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
}

/* Tighten padding (no bloat) */
html body .toast,
html body .toast-container .toast,
html body .alert,
html body .messagebox,
html body .info-box,
html body .notice{
  padding: 10px 12px !important;
}

/* Text + links inside notifications */
html body .toast *,
html body .alert *,
html body .messagebox *,
html body .info-box *,
html body .notice *{
  color: var(--kship-text) !important;
}
html body .toast a,
html body .alert a,
html body .messagebox a,
html body .info-box a,
html body .notice a{
  color: #fff !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.22) !important;
}
html body .toast a:hover,
html body .alert a:hover,
html body .messagebox a:hover,
html body .info-box a:hover,
html body .notice a:hover{
  background: var(--kship-blue-hover) !important;
}

/* Close button */
html body .toast .close,
html body .alert .close,
html body .toast button.close,
html body .alert button.close{
  opacity: .95 !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* --- If notifications are a dropdown list (items you hover/click) --- */
html body #top-notifications .dropdown-menu,
html body .top-notifications .dropdown-menu,
html body .notifications .dropdown-menu{
  background: var(--kship-blue-glass) !important;
  border: 1px solid var(--kship-blue-border) !important;
  padding: 4px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

html body #top-notifications .dropdown-item,
html body .top-notifications .dropdown-item,
html body .notifications .dropdown-item{
  background: transparent !important;
  border: 0 !important;              /* dump the border around link text */
  padding: 6px 10px !important;      /* tighter */
  margin: 0 !important;              /* dump spacing */
  color: var(--kship-text) !important;
}

html body #top-notifications .dropdown-item:hover,
html body .top-notifications .dropdown-item:hover,
html body .notifications .dropdown-item:hover{
  background: var(--kship-blue-hover) !important; /* slight hover change */
  color: #000 !important;
}
/* =========================================================
   KSHIP MOBILE HEADER NAV – fix collapsed spacing/alignment
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

@media (max-width: 992px){

  :root{
    /* match your trigger blue-glass vibe */
    --kship-mobile-nav-bg: rgba(25, 90, 170, .18);     /* a touch darker than header */
    --kship-mobile-nav-border: rgba(120,190,255,.18);
    --kship-mobile-nav-hover: rgba(120,190,255,.14);
    --kship-mobile-nav-hover-border: rgba(120,190,255,.28);
    --kship-mobile-nav-text: rgba(255,255,255,.92);
  }

  /* 1) Ensure header overlays (dropdown/collapse) sit ABOVE your blur layers */
  #header,
  #header *{
    position: relative;
    z-index: 9998;
  }
  #header .navbar-collapse,
  #header .dropdown-menu{
    z-index: 9999 !important;
  }

  /* 2) The collapsed menu container: make it a tight “panel” under header */
  #header .navbar-collapse{
    background: var(--kship-mobile-nav-bg) !important;
    border: 1px solid var(--kship-mobile-nav-border) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.35) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    /* kill weird spacing */
    margin: 8px 10px 10px !important;
    padding: 6px !important;

    /* keep it clean */
    border-radius: 0 !important;
  }

  /* 3) Kill default ul/li spacing and make rows consistent */
  #header .navbar-collapse .navbar-nav{
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  #header .navbar-collapse .navbar-nav .nav-item{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 4) Make every link a full-width “button row” with tight spacing */
  #header .navbar-collapse .navbar-nav .nav-link,
  #header .navbar-collapse .navbar-nav a{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;

    /* FIX: the spacing in your screenshot */
    padding: 8px 10px !important;
    margin: 1px 0 !important;
    line-height: 1.15 !important;

    color: var(--kship-mobile-nav-text) !important;
    font-weight: 600 !important;
    text-decoration: none !important;

    background: transparent !important;
    border: 1px solid rgba(255,255,255,.10) !important; /* subtle row outline */
    border-radius: 0 !important;
  }

  /* Optional: tighten icons so text aligns nicely */
  #header .navbar-collapse .navbar-nav .nav-link i,
  #header .navbar-collapse .navbar-nav a i{
    width: 18px !important;
    margin-right: 8px !important;
    opacity: .95;
  }

  /* Hover */
  #header .navbar-collapse .navbar-nav .nav-link:hover,
  #header .navbar-collapse .navbar-nav a:hover{
    background: var(--kship-mobile-nav-hover) !important;
    border-color: var(--kship-mobile-nav-hover-border) !important;
    color: #fff !important;
  }

  /* 5) Dropdown toggles inside collapsed nav: remove extra padding/borders */
  #header .navbar-collapse .dropdown-toggle{
    padding-right: 10px !important;
  }
  #header .navbar-collapse .dropdown-toggle::after{
    margin-left: auto !important;
  }

  /* 6) Dropdown menu when opened on mobile: same bg as trigger, tighter items */
  #header .navbar-collapse .dropdown-menu{
    background: var(--kship-mobile-nav-bg) !important;
    border: 1px solid var(--kship-mobile-nav-border) !important;
    padding: 4px !important;
    margin: 4px 0 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  /* Dropdown items: remove “padding box” look */
  #header .navbar-collapse .dropdown-item{
    padding: 7px 10px !important;
    margin: 1px 0 !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: var(--kship-mobile-nav-text) !important;
    border-radius: 0 !important;
  }
  #header .navbar-collapse .dropdown-item:hover{
    background: var(--kship-mobile-nav-hover) !important;
    border-color: var(--kship-mobile-nav-hover-border) !important;
    color: #fff !important;
  }

  /* Divider tighter */
  #header .navbar-collapse .dropdown-divider{
    margin: 4px 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }
}
/* =========================================================
   KSHIP: NOTIFICATIONS DROPDOWN – dark/blue-glass theme
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-blue-glass: rgba(25, 90, 170, .18);      /* match your header triggers */
  --kship-blue-border: rgba(120,190,255,.22);
  --kship-blue-hover: rgba(120,190,255,.14);

  --kship-panel-dark: rgba(0,0,0,.62);            /* slightly darker than header */
  --kship-line: rgba(255,255,255,.12);
  --kship-text: rgba(255,255,255,.92);
  --kship-muted: rgba(255,255,255,.72);
}

/* Make sure the dropdown sits above background blur layers */
#header .notifications,
#header .notifications *{
  position: relative;
  z-index: 10000;
}

/* The notifications dropdown container (covers common WHMCS markup variants) */
#header .notifications .dropdown-menu,
#header .notifications-menu,
#header .notifications-dropdown,
#header .dropdown-menu.notifications-dropdown,
#header .dropdown-menu[aria-labelledby*="Notification"],
#header .dropdown-menu[aria-labelledby*="notification"]{
  background: var(--kship-panel-dark) !important;           /* darker for contrast */
  border: 1px solid var(--kship-blue-border) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  padding: 6px !important;
  border-radius: 0 !important;
}

/* Kill any theme pseudo-elements that paint it white */
#header .notifications .dropdown-menu::before,
#header .notifications .dropdown-menu::after{
  background: transparent !important;
  box-shadow: none !important;
}

/* Each notification row (your white blocks) */
#header .notifications .dropdown-menu .dropdown-item,
#header .notifications .dropdown-menu a,
#header .notifications .dropdown-menu li,
#header .notifications .dropdown-menu .notification,
#header .notifications .dropdown-menu .notification-item{
  background: transparent !important;
  color: var(--kship-text) !important;

  /* remove the “big padded card” feel */
  padding: 8px 10px !important;
  margin: 1px 0 !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
}

/* Message text inside the rows */
#header .notifications .dropdown-menu .dropdown-item *,
#header .notifications .dropdown-menu .notification *,
#header .notifications .dropdown-menu .notification-item *{
  color: var(--kship-text) !important;
}

/* Muted/secondary text */
#header .notifications .dropdown-menu .text-muted,
#header .notifications .dropdown-menu small,
#header .notifications .dropdown-menu .small{
  color: var(--kship-muted) !important;
}

/* Hover */
#header .notifications .dropdown-menu .dropdown-item:hover,
#header .notifications .dropdown-menu a:hover,
#header .notifications .dropdown-menu .notification:hover,
#header .notifications .dropdown-menu .notification-item:hover{
  background: var(--kship-blue-hover) !important;
  border-color: rgba(120,190,255,.28) !important;
  color: #fff !important;
}

/* Left icons (exclamation/info) */
#header .notifications .dropdown-menu i,
#header .notifications .dropdown-menu .fa,
#header .notifications .dropdown-menu .fas,
#header .notifications .dropdown-menu .far{
  color: rgba(160,205,255,.95) !important;
  opacity: .95;
}

/* Dividers inside dropdown */
#header .notifications .dropdown-menu .dropdown-divider,
#header .notifications .dropdown-menu hr{
  border-top: 1px solid rgba(255,255,255,.10) !important;
  margin: 4px 0 !important;
}

/* Mobile: keep it aligned and not too wide */
@media (max-width: 575px){
  #header .notifications .dropdown-menu,
  #header .notifications-menu,
  #header .notifications-dropdown{
    min-width: 260px !important;
    max-width: calc(100vw - 24px) !important;
  }
}
/* =========================================================
   KSHIP: WHMCS NOTIFICATIONS DROPDOWN – FORCE DARK THEME
   Put at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-notif-bg: rgba(0,0,0,.72);              /* main dropdown background */
  --kship-notif-border: rgba(120,190,255,.22);    /* blue-ish line */
  --kship-notif-hover: rgba(120,190,255,.14);     /* hover tint */
  --kship-notif-text: rgba(255,255,255,.92);
  --kship-notif-muted: rgba(255,255,255,.72);
}

/* Ensure notifications always render ABOVE blur layers */
#header .notifications,
#header .notifications *{
  z-index: 999999 !important;
}

/* Catch WHMCS notification popup containers (varies by version/theme) */
#header .notifications .dropdown-menu,
#header .notifications-menu,
#header .notifications-dropdown,
#header .notification-dropdown,
#header .notifications-content,
#header .notifications-list,
#header .notifications-panel{
  background: var(--kship-notif-bg) !important;
  border: 1px solid var(--kship-notif-border) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.60) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 0 !important;
  padding: 6px !important;
}

/* Kill any "white card" inner wrapper WHMCS uses */
#header .notifications .dropdown-menu *,
#header .notifications-menu *,
#header .notifications-dropdown *,
#header .notification-dropdown *{
  background-color: transparent !important;
  background-image: none !important;
}

/* Each notification row */
#header .notifications a,
#header .notifications .dropdown-item,
#header .notifications li,
#header .notifications .notification,
#header .notifications .notification-item{
  color: var(--kship-notif-text) !important;
  padding: 8px 10px !important;
  margin: 1px 0 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Text inside rows */
#header .notifications a *,
#header .notifications .dropdown-item *,
#header .notifications .notification *{
  color: var(--kship-notif-text) !important;
}

/* Muted text */
#header .notifications .text-muted,
#header .notifications small,
#header .notifications .small{
  color: var(--kship-notif-muted) !important;
}

/* Hover */
#header .notifications a:hover,
#header .notifications .dropdown-item:hover,
#header .notifications .notification:hover,
#header .notifications .notification-item:hover{
  background: var(--kship-notif-hover) !important;
  border-color: rgba(120,190,255,.28) !important;
}

/* Divider line between items */
#header .notifications hr,
#header .notifications .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.10) !important;
  margin: 6px 0 !important;
}

/* Icons */
#header .notifications i,
#header .notifications .fa,
#header .notifications .fas,
#header .notifications .far{
  color: rgba(160,205,255,.95) !important;
  opacity: .95;
}

/* Mobile width clamp */
@media (max-width: 575px){
  #header .notifications .dropdown-menu,
  #header .notifications-menu,
  #header .notifications-dropdown,
  #header .notification-dropdown{
    min-width: 280px !important;
    max-width: calc(100vw - 20px) !important;
  }
}
/* =========================================================
   KSHIP FIX: ORDER PAGES + HEADER NOTIFICATIONS DROPDOWN (DARK)
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  /* Your header blue glass (keep consistent) */
  --kship-blue-glass: rgba(25, 90, 170, .14);
  --kship-blue-border: rgba(120,190,255,.18);
  --kship-blue-hover: rgba(120,190,255,.12);

  /* Darker dropdown glass (so text pops) */
  --kship-dd-bg: rgba(10, 22, 40, .88);         /* darker than header band */
  --kship-dd-border: rgba(120,190,255,.22);
  --kship-dd-hover: rgba(120,190,255,.14);

  /* Order page glass */
  --kship-order-bg: rgba(0,0,0,.52);
  --kship-order-bg-2: rgba(0,0,0,.64);
  --kship-order-line: rgba(255,255,255,.12);
}

/* ---------------------------------------------------------
   A) FIX: dropdowns/notifications going BEHIND blur layer
   (ensure header and its popups can overflow + sit on top)
   --------------------------------------------------------- */
html body #header,
html body #header .topbar,
html body #header .navbar,
html body #header .main-navbar-wrapper,
html body #header .navbar-collapse{
  overflow: visible !important;
}

html body #header .dropdown-menu{
  z-index: 999999 !important;
}

/* ---------------------------------------------------------
   B) HEADER NOTIFICATIONS DROPDOWN = DARK BLUE GLASS
   Targets multiple WHMCS variants safely
   --------------------------------------------------------- */

/* The notifications dropdown container (most WHMCS builds) */
html body #header .notifications .dropdown-menu,
html body #header .notification .dropdown-menu,
html body #header [id*="notification"] .dropdown-menu,
html body #header .dropdown-menu[id*="notification"],
html body #header .dropdown-menu[class*="notification"],
html body #header .dropdown-menu[aria-labelledby*="notification"],
html body #header .dropdown-menu[aria-labelledby*="Notification"]{
  background: var(--kship-dd-bg) !important;
  border: 1px solid var(--kship-dd-border) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.60) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  /* tighter + cleaner */
  padding: 6px !important;
  border-radius: 0 !important;
}

/* Kill the inner white wrappers WHMCS sometimes uses */
html body #header .notifications .dropdown-menu *[style*="background"],
html body #header [id*="notification"] .dropdown-menu *[style*="background"],
html body #header .dropdown-menu[id*="notification"] *[style*="background"]{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Notification rows/items (remove chunky padding/borders) */
html body #header .notifications .dropdown-menu a,
html body #header .notifications .dropdown-menu .dropdown-item,
html body #header [id*="notification"] .dropdown-menu a,
html body #header .dropdown-menu[id*="notification"] a,
html body #header .dropdown-menu[id*="notification"] .dropdown-item{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;

  /* remove the “boxed link” look */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /* tighter spacing */
  padding: 8px 10px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Add a subtle 1px divider between notifications */
html body #header .notifications .dropdown-menu a + a,
html body #header [id*="notification"] .dropdown-menu a + a,
html body #header .dropdown-menu[id*="notification"] a + a{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* Hover = slightly brighter blue tint */
html body #header .notifications .dropdown-menu a:hover,
html body #header .notifications .dropdown-menu .dropdown-item:hover,
html body #header [id*="notification"] .dropdown-menu a:hover,
html body #header .dropdown-menu[id*="notification"] a:hover{
  background: var(--kship-dd-hover) !important;
  color: #fff !important;
}

/* Muted text inside notification rows */
html body #header .notifications .text-muted,
html body #header [id*="notification"] .text-muted,
html body #header .dropdown-menu[id*="notification"] .text-muted,
html body #header .notifications small{
  color: rgba(255,255,255,.72) !important;
}

/* Icons in notifications */
html body #header .notifications i,
html body #header [id*="notification"] i{
  color: rgba(160,205,255,.95) !important;
}

/* ---------------------------------------------------------
   C) ORDERING / CHECKOUT PAGES = FORCE DARK THEME
   Covers: standard_cart AND other order forms (#order-*)
   --------------------------------------------------------- */

/* Standard Cart base */
html body #order-standard_cart,
html body #order-standard_cart *{
  color: rgba(255,255,255,.92) !important;
}

/* Other WHMCS order forms base */
html body #main-body [id^="order-"],
html body #main-body [id^="order-"] *{
  color: rgba(255,255,255,.92) !important;
}

/* Big containers/cards/panels/wells inside ordering areas */
html body #order-standard_cart .panel,
html body #order-standard_cart .card,
html body #order-standard_cart .well,
html body #order-standard_cart .alert,
html body #order-standard_cart .cart-body,
html body #order-standard_cart .view-cart-items,
html body #order-standard_cart .order-summary,
html body #order-standard_cart .summary-container,
html body #order-standard_cart .section,
html body #order-standard_cart .sub-heading,
html body #main-body [id^="order-"] .panel,
html body #main-body [id^="order-"] .card,
html body #main-body [id^="order-"] .well,
html body #main-body [id^="order-"] .box,
html body #main-body [id^="order-"] .product,
html body #main-body [id^="order-"] .product-box,
html body #main-body [id^="order-"] .pricing-box,
html body #main-body [id^="order-"] .content-block{
  background: var(--kship-order-bg) !important;
  border: 1px solid var(--kship-order-line) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Order summary slightly darker */
html body #order-standard_cart .order-summary,
html body #order-standard_cart .summary-container{
  background: var(--kship-order-bg-2) !important;
}

/* Kill any remaining white blocks inside order areas */
html body #order-standard_cart .bg-white,
html body #order-standard_cart .bg-light,
html body #order-standard_cart *[style*="background:#fff"],
html body #order-standard_cart *[style*="background: #fff"],
html body #order-standard_cart *[style*="background:white"],
html body #main-body [id^="order-"] .bg-white,
html body #main-body [id^="order-"] .bg-light,
html body #main-body [id^="order-"] *[style*="background:#fff"],
html body #main-body [id^="order-"] *[style*="background: #fff"],
html body #main-body [id^="order-"] *[style*="background:white"]{
  background: var(--kship-order-bg) !important;
  border-color: var(--kship-order-line) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Inputs/selects inside ordering */
html body #order-standard_cart input,
html body #order-standard_cart select,
html body #order-standard_cart textarea,
html body #order-standard_cart .form-control,
html body #main-body [id^="order-"] input,
html body #main-body [id^="order-"] select,
html body #main-body [id^="order-"] textarea,
html body #main-body [id^="order-"] .form-control{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* Tabs in cart */
html body #order-standard_cart .nav-tabs .nav-link{
  background: rgba(0,0,0,.35) !important;
  border-color: var(--kship-order-line) !important;
}
html body #order-standard_cart .nav-tabs .nav-link.active{
  background: rgba(0,0,0,.60) !important;
  color: #fff !important;
}

/* Promo code box often stays light */
html body #order-standard_cart #frmPromo,
html body #order-standard_cart .promo,
html body #order-standard_cart .promo-code,
html body #order-standard_cart .apply-promo{
  background: var(--kship-order-bg-2) !important;
  border: 1px solid var(--kship-order-line) !important;
}
/* =========================================================
   KSHIP FIX: Cart badge number + Dark themed ordering/checkout
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-blue: rgba(25, 90, 170, .82);
  --kship-blue-hover: rgba(120,190,255,.16);
  --kship-line: rgba(255,255,255,.14);

  --kship-glass-dark: rgba(0,0,0,.58);
  --kship-glass-darker: rgba(0,0,0,.72);

  --kship-text: rgba(255,255,255,.92);
  --kship-text-dim: rgba(255,255,255,.74);
}

/* =========================================================
   1) CART ICON BADGE NUMBER (dot shows but text hidden)
   ========================================================= */

/* Ensure the icon wrapper can host an absolutely-positioned badge */
#header .top-nav a[href*="cart"],
#header a[href*="cart"],
#header .nav a[href*="cart"],
#header .toolbar a[href*="cart"],
#header .header-actions a[href*="cart"]{
  position: relative !important;
  overflow: visible !important;
}

/* Common WHMCS cart badge ids/classes */
#cartItemCount,
#header #cartItemCount,
#header .cart-item-count,
#header .cart-count,
#header .badge-cart,
#header a[href*="cart"] .badge,
#header a[href*="cart"] .badge.badge-info,
#header a[href*="cart"] .badge.badge-danger{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* make the number visible */
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-family: inherit !important;

  min-width: 18px !important;
  height: 18px !important;
  padding: 0 6px !important;

  /* badge styling */
  background: rgba(255, 70, 70, .95) !important;
  border: 1px solid rgba(0,0,0,.35) !important;
  border-radius: 999px !important;

  /* put it on top-right of the icon */
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  z-index: 999999 !important;
}

/* If your theme uses an empty badge dot, force it to show the text */
#cartItemCount:empty,
#header .cart-item-count:empty,
#header .cart-count:empty{
  /* don’t hide it; leave visible so JS can fill it */
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   2) ORDERING/CHECKOUT DARK THEME (unreadable whites)
   Works for: /cart.php, checkout, standard_cart, other orderforms
   ========================================================= */

/* Catch all cart/order pages via common WHMCS body classes */
body.filename-cart #main-body,
body.page-cart #main-body,
body.page-order #main-body,
body.page-orderform #main-body{
  color: var(--kship-text) !important;
}

/* Main order/cart containers */
body.filename-cart #main-body .container,
body.filename-cart #main-body .content-wrapper,
body.page-orderform #main-body .container,
body.page-orderform #main-body .content-wrapper,
#order-standard_cart,
#order-standard_cart *{
  color: var(--kship-text) !important;
}

/* Turn ALL the big white panels/cards/sections into dark glass */
body.filename-cart #main-body .panel,
body.filename-cart #main-body .card,
body.filename-cart #main-body .well,
body.filename-cart #main-body .box,
body.filename-cart #main-body .cart,
body.filename-cart #main-body .cart-body,
body.filename-cart #main-body .checkout,
body.filename-cart #main-body .checkout-container,
body.filename-cart #main-body .checkout-section,
body.filename-cart #main-body .view-cart-items,
body.filename-cart #main-body .order-summary,
body.filename-cart #main-body .summary-container,
body.filename-cart #main-body .payment-methods,
body.filename-cart #main-body .products,
body.filename-cart #main-body .product,
body.filename-cart #main-body .product-list,
body.filename-cart #main-body .domain-options,
body.page-orderform #main-body .panel,
body.page-orderform #main-body .card,
body.page-orderform #main-body .well,
body.page-orderform #main-body .box{
  background: var(--kship-glass-dark) !important;
  border: 1px solid var(--kship-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Some templates nest an extra white “inner” wrapper */
body.filename-cart #main-body .panel-body,
body.filename-cart #main-body .card-body,
body.filename-cart #main-body .section-body,
body.filename-cart #main-body .content,
body.page-orderform #main-body .panel-body,
body.page-orderform #main-body .card-body{
  background: transparent !important;
}

/* Kill common “white background helpers” */
body.filename-cart #main-body .bg-white,
body.filename-cart #main-body .bg-light,
body.filename-cart #main-body *[style*="background:#fff"],
body.filename-cart #main-body *[style*="background: #fff"],
body.filename-cart #main-body *[style*="background:white"],
body.page-orderform #main-body .bg-white,
body.page-orderform #main-body .bg-light,
body.page-orderform #main-body *[style*="background:#fff"],
body.page-orderform #main-body *[style*="background: #fff"],
body.page-orderform #main-body *[style*="background:white"]{
  background: transparent !important;
  background-color: transparent !important;
}

/* Headings + helper text */
body.filename-cart #main-body h1,
body.filename-cart #main-body h2,
body.filename-cart #main-body h3,
body.filename-cart #main-body h4,
body.filename-cart #main-body label,
body.filename-cart #main-body .text-muted,
body.page-orderform #main-body h1,
body.page-orderform #main-body h2,
body.page-orderform #main-body h3,
body.page-orderform #main-body h4,
body.page-orderform #main-body label,
body.page-orderform #main-body .text-muted{
  color: var(--kship-text) !important;
}
body.filename-cart #main-body .text-muted,
body.page-orderform #main-body .text-muted{
  color: var(--kship-text-dim) !important;
}

/* Inputs/selects/textarea readable on dark */
body.filename-cart #main-body input,
body.filename-cart #main-body select,
body.filename-cart #main-body textarea,
body.filename-cart #main-body .form-control,
body.page-orderform #main-body input,
body.page-orderform #main-body select,
body.page-orderform #main-body textarea,
body.page-orderform #main-body .form-control{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-radius: 0 !important;
}
body.filename-cart #main-body input::placeholder,
body.filename-cart #main-body textarea::placeholder,
body.page-orderform #main-body input::placeholder,
body.page-orderform #main-body textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Buttons in order pages (keep consistent) */
body.filename-cart #main-body .btn,
body.page-orderform #main-body .btn{
  border-radius: 0 !important;
}
body.filename-cart #main-body .btn-primary,
body.page-orderform #main-body .btn-primary{
  background: var(--kship-blue) !important;
  border: 1px solid rgba(120,190,255,.22) !important;
  color: #fff !important;
}
body.filename-cart #main-body .btn-primary:hover,
body.page-orderform #main-body .btn-primary:hover{
  background: var(--kship-blue-hover) !important;
}
/* =========================================================
   FORCE DARK: WHMCS Orderform / Checkout (standard_cart etc.)
   Paste at VERY BOTTOM of custom.css
   ========================================================= */

:root{
  --kship-glass-dark: rgba(0,0,0,.66);
  --kship-glass-darker: rgba(0,0,0,.78);
  --kship-line: rgba(255,255,255,.14);
  --kship-text: rgba(255,255,255,.92);
  --kship-text-dim: rgba(255,255,255,.72);
}

/* 1) Kill any forced white page backgrounds inside checkout area */
#main-body,
#main-body .container,
#main-body .content-wrapper,
#main-body .main-content,
#main-body .section,
#main-body .row,
#main-body .col-md-12{
  background: transparent !important;
  background-color: transparent !important;
}

/* 2) HARD SCOPE: Orderform wrappers (covers standard_cart + most others) */
#order-standard_cart,
#order-standard_cart *{
  color: var(--kship-text) !important;
}

/* Some installs use .orderform or #orderform instead */
.orderform,
.orderform *,
#orderform,
#orderform *{
  color: var(--kship-text) !important;
}

/* 3) Turn the big white panels/blocks dark */
#order-standard_cart .panel,
#order-standard_cart .panel-body,
#order-standard_cart .panel-heading,
#order-standard_cart .panel-footer,
#order-standard_cart .card,
#order-standard_cart .card-body,
#order-standard_cart .well,
#order-standard_cart .box,
#order-standard_cart .checkout,
#order-standard_cart .checkout-container,
#order-standard_cart .checkout-section,
#order-standard_cart .products,
#order-standard_cart .product,
#order-standard_cart .product-info,
#order-standard_cart .domain-options,
#order-standard_cart .order-summary,
#order-standard_cart #orderSummary,
#order-standard_cart .summary-container,
#order-standard_cart .view-cart-items,
#order-standard_cart .cart-body,
#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-totals,
#order-standard_cart .payment-methods,
#order-standard_cart .promo,
#order-standard_cart .apply-credit,
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading span{
  background: var(--kship-glass-dark) !important;
  border: 1px solid var(--kship-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Make headings readable */
#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
#order-standard_cart h5,
#order-standard_cart label{
  color: var(--kship-text) !important;
}

/* Muted text readable */
#order-standard_cart .text-muted,
#order-standard_cart small,
#order-standard_cart .help-block{
  color: var(--kship-text-dim) !important;
}

/* 4) Tables (cart items often render white rows) */
#order-standard_cart table,
#order-standard_cart thead,
#order-standard_cart tbody,
#order-standard_cart tr,
#order-standard_cart th,
#order-standard_cart td{
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--kship-text) !important;
}

/* If template paints alternating rows white/gray */
#order-standard_cart .table-striped > tbody > tr:nth-of-type(odd),
#order-standard_cart .table-striped > tbody > tr:nth-of-type(even){
  background: rgba(255,255,255,.04) !important;
}

/* 5) Inputs/selects readable */
#order-standard_cart input,
#order-standard_cart select,
#order-standard_cart textarea,
#order-standard_cart .form-control{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

#order-standard_cart input::placeholder,
#order-standard_cart textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* 6) Alerts/messages (often white) */
#order-standard_cart .alert,
#order-standard_cart .alert-info,
#order-standard_cart .alert-warning,
#order-standard_cart .alert-danger,
#order-standard_cart .info-box{
  background: var(--kship-glass-darker) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: var(--kship-text) !important;
}

/* 7) Modals (some checkout steps open in modal-like white boxes) */
.modal-content,
.modal-header,
.modal-body,
.modal-footer{
  background: var(--kship-glass-darker) !important;
  color: var(--kship-text) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* 8) Buttons stay readable */
#order-standard_cart .btn,
#order-standard_cart button,
#order-standard_cart input[type="submit"]{
  border-radius: 0 !important;
}
#order-standard_cart .btn-default,
#order-standard_cart .btn-secondary{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* 9) Nuke any inline “background: #fff” inside orderform */
#order-standard_cart *[style*="background:#fff"],
#order-standard_cart *[style*="background: #fff"],
#order-standard_cart *[style*="background-color:#fff"],
#order-standard_cart *[style*="background-color: #fff"],
#order-standard_cart *[style*="background:white"],
#order-standard_cart *[style*="background-color:white"]{
  background: transparent !important;
  background-color: transparent !important;
}
/* =========================================================
   DARK THEME: Header User Notifications Popover
   ========================================================= */

/* The popover shell (Bootstrap) */
.popover,
.popover-user-notifications{
  background: rgba(0,0,0,.78) !important;
  background-color: rgba(0,0,0,.78) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* If WHMCS sets a white inner container */
.popover .popover-body,
.popover-user-notifications .popover-body{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  padding: 10px 12px !important;
}

/* Titles / text */
.popover .popover-header,
.popover-user-notifications .popover-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.95) !important;
  border-radius: 0 !important;
}

/* Links */
.popover a,
.popover-user-notifications a{
  color: #9fd3ff !important; /* light blue */
  text-decoration: none !important;
}
.popover a:hover,
.popover-user-notifications a:hover{
  color: #c7e6ff !important;
  text-decoration: underline !important;
}

/* Divider lines inside notifications list */
.popover hr,
.popover-user-notifications hr,
.popover-user-notifications .dropdown-divider,
.popover-user-notifications .notification-divider{
  border-color: rgba(255,255,255,.12) !important;
  opacity: 1 !important;
}

/* Notification rows (common WHMCS markup) */
.popover-user-notifications .notification,
.popover-user-notifications .notification-item,
.popover-user-notifications li,
.popover-user-notifications .list-group-item{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Icon circles (optional: keeps them from looking washed out) */
.popover-user-notifications .notification i,
.popover-user-notifications .notification-icon i{
  filter: brightness(1.15);
}

/* Bootstrap popover arrow (important: stops white arrow) */
.bs-popover-auto[x-placement^="top"] .arrow::before,
.bs-popover-top .arrow::before{
  border-top-color: rgba(255,255,255,.16) !important;
}
.bs-popover-auto[x-placement^="top"] .arrow::after,
.bs-popover-top .arrow::after{
  border-top-color: rgba(0,0,0,.78) !important;
}

.bs-popover-auto[x-placement^="bottom"] .arrow::before,
.bs-popover-bottom .arrow::before{
  border-bottom-color: rgba(255,255,255,.16) !important;
}
.bs-popover-auto[x-placement^="bottom"] .arrow::after,
.bs-popover-bottom .arrow::after{
  border-bottom-color: rgba(0,0,0,.78) !important;
}

.bs-popover-auto[x-placement^="left"] .arrow::before,
.bs-popover-left .arrow::before{
  border-left-color: rgba(255,255,255,.16) !important;
}
.bs-popover-auto[x-placement^="left"] .arrow::after,
.bs-popover-left .arrow::after{
  border-left-color: rgba(0,0,0,.78) !important;
}

.bs-popover-auto[x-placement^="right"] .arrow::before,
.bs-popover-right .arrow::before{
  border-right-color: rgba(255,255,255,.16) !important;
}
.bs-popover-auto[x-placement^="right"] .arrow::after,
.bs-popover-right .arrow::after{
  border-right-color: rgba(0,0,0,.78) !important;
}
/* KSHIP blue hover for notification items */
.popover-user-notifications .notification:hover,
.popover-user-notifications .notification-item:hover,
.popover-user-notifications li:hover,
.popover-user-notifications .list-group-item:hover,
.popover-user-notifications a.dropdown-item:hover,
.popover-user-notifications .dropdown-item:hover{
  background: rgba(46, 140, 255, .18) !important; /* KSHIP-ish blue, low opacity */
  color: rgba(255,255,255,.96) !important;
}

/* If the clickable element is the <a>, make it fill the row so hover looks right */
.popover-user-notifications a,
.popover-user-notifications a.dropdown-item,
.popover-user-notifications .dropdown-item{
  display: block;
  padding: 10px 12px !important;
}

/* Slightly brighter link on hover (optional) */
.popover-user-notifications a:hover{
  color: #d7efff !important;
}
/* =========================================================
   KSHIP PATCH (BOTTOM): dropdowns + notifications + checkout
   ========================================================= */

/* ---------- vars (matches your low-opacity blue glass vibe) ---------- */
:root{
  --kship-blue-glass: rgba(25, 90, 170, .14);
  --kship-blue-glass-dark: rgba(25, 90, 170, .26);   /* a bit darker so links pop */
  --kship-blue-line: rgba(120,190,255,.22);

  --kship-hover: rgba(127,182,255,.12);
  --kship-hover-strong: rgba(127,182,255,.18);

  --kship-glass: rgba(0,0,0,.50);
  --kship-line: rgba(255,255,255,.12);
}

/* ---------- IMPORTANT: your blur overlay must not block popovers/menus ---------- */
body::before,
body::after{
  pointer-events: none !important;
}

/* Keep header/popovers above everything */
#header{ position: sticky !important; top: 0; z-index: 99990 !important; }
.popover{ z-index: 99999 !important; }
.popover-user-notifications{ z-index: 99999 !important; }

/* =========================================================
   1) HEADER DROPDOWNS = SAME BLUE AS TRIGGER + CLEAN ITEMS
   - darker blue background
   - NO item borders around text
   - less padding
   ========================================================= */
html body #header .dropdown-menu,
html body #header .collapsable-dropdown-menu.dropdown-menu,
html body #header .dropdown-menu.dropdown-menu-right,
html body .main-navbar-wrapper .dropdown-menu{
  background: var(--kship-blue-glass-dark) !important; /* same blue family as trigger, darker */
  border: 1px solid var(--kship-blue-line) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  /* dump bloat */
  padding: 4px !important;
  max-width: none !important;
}

/* kill theme pseudo overlays that keep things black/odd */
html body #header .dropdown-menu::before,
html body #header .dropdown-menu::after{
  content: none !important;
}

/* dropdown items: no border around text + tighter padding */
html body #header .dropdown-menu .dropdown-item{
  background: transparent !important;
  border: 0 !important;                 /* removes the border box around each item */
  margin: 0 !important;
  padding: 7px 10px !important;         /* tighter */
  color: rgba(255,255,255,.92) !important;
  line-height: 1.25 !important;
}

/* hover/active: your low-opacity blue */
html body #header .dropdown-menu .dropdown-item:hover,
html body #header .dropdown-menu .dropdown-item:focus{
  background: var(--kship-hover) !important;
  color: #fff !important;
}
html body #header .dropdown-menu .dropdown-item.active,
html body #header .dropdown-menu .dropdown-item:active{
  background: var(--kship-hover-strong) !important;
  color: #fff !important;
}

/* =========================================================
   2) NOTIFICATION POPOVER = DARK THEME + NO WHITE HOVERS
   ========================================================= */
.popover,
.popover-user-notifications{
  background: rgba(0,0,0,.78) !important;
  border: 1px solid rgba(120,190,255,.18) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* popover inner parts */
.popover .popover-header{
  background: rgba(25, 90, 170, .18) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}
.popover .popover-body{
  background: transparent !important;
  color: rgba(255,255,255,.90) !important;
  padding: 6px !important;
}

/* Arrow colors (Bootstrap uses before/after) */
.bs-popover-auto[x-placement^="bottom"] .arrow::before,
.bs-popover-bottom .arrow::before{
  border-bottom-color: rgba(120,190,255,.18) !important;
}
.bs-popover-auto[x-placement^="bottom"] .arrow::after,
.bs-popover-bottom .arrow::after{
  border-bottom-color: rgba(0,0,0,.78) !important;
}

/* The notification rows are usually list-group items */
.popover-user-notifications .list-group,
.popover-user-notifications .list-group-item{
  background: transparent !important;
  border: 0 !important;
}

/* Fix the WHITE hover you’re seeing */
.popover-user-notifications .list-group-item:hover,
.popover-user-notifications .list-group-item:focus,
.popover-user-notifications a.list-group-item:hover,
.popover-user-notifications .list-group-item-action:hover{
  background: var(--kship-hover) !important;
  color: #fff !important;
}

/* tighten padding + remove “boxed link” feel */
.popover-user-notifications .list-group-item,
.popover-user-notifications a.list-group-item,
.popover-user-notifications .list-group-item-action{
  padding: 10px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  color: rgba(255,255,255,.90) !important;
  text-decoration: none !important;
}

/* =========================================================
   3) CART COUNT BADGE (restore it even if badges were hidden)
   ========================================================= */
#header #cartItemCount,
#header .cart-btn .badge,
#header .badge.badge-info#cartItemCount,
#Secondary_Navbar-Cart .badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;

  background: rgba(73,166,255,.28) !important;
  border: 1px solid rgba(120,190,255,.30) !important;
  color: #fff !important;
}

/* If you still hide “badges” in nav somewhere, this keeps cart visible */
#header #nav .badge{ display:none !important; }
#header #cartItemCount{ display:inline-flex !important; }

/* =========================================================
   4) CHECKOUT / ORDERING: FORCE DARK (kills the unreadable white blocks)
   Covers standard_cart checkout AND common order form wrappers.
   ========================================================= */

/* standard_cart checkout shell */
#order-standard_cart,
#order-standard_cart .cart-body,
#order-standard_cart .checkout,
#order-standard_cart #checkout,
#order-standard_cart #frmCheckout,
#order-standard_cart .checkout-wrapper,
#order-standard_cart .checkout-content,
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .well,
#order-standard_cart .alert,
#order-standard_cart .section,
#order-standard_cart .sub-heading{
  background: var(--kship-glass) !important;
  border: 1px solid var(--kship-line) !important;
  color: rgba(255,255,255,.92) !important;
}

/* The “Choose Account” + account selection areas */
#order-standard_cart .account-select,
#order-standard_cart .account-select *,
#order-standard_cart .existing-client,
#order-standard_cart .new-client,
#order-standard_cart .signup,
#order-standard_cart .signup-wrapper{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
}

/* FIX: any inline white backgrounds inside checkout */
#order-standard_cart *[style*="background:#fff"],
#order-standard_cart *[style*="background: #fff"],
#order-standard_cart *[style*="background-color:#fff"],
#order-standard_cart *[style*="background-color: #fff"],
#order-standard_cart *[style*="background:white"],
#order-standard_cart *[style*="background: white"],
#order-standard_cart *[style*="rgb(255"],
#order-standard_cart .bg-white,
#order-standard_cart .bg-light{
  background: var(--kship-glass) !important;
  border-color: var(--kship-line) !important;
  color: rgba(255,255,255,.92) !important;
}

/* forms in checkout */
#order-standard_cart label,
#order-standard_cart .form-check-label{
  color: rgba(255,255,255,.88) !important;
}
#order-standard_cart input,
#order-standard_cart select,
#order-standard_cart textarea,
#order-standard_cart .form-control{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
}
#order-standard_cart input::placeholder,
#order-standard_cart textarea::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* header blocks inside product boxes (your <header> snippet) */
#order-standard_cart header,
#order-standard_cart header *{
  background: transparent !important;
}

/* =========================================================
   5) MOBILE COLLAPSED NAV SPACING (minimized header)
   ========================================================= */
@media (max-width: 991.98px){
  /* give the collapsed menu a proper dark panel */
  #header .navbar-collapse{
    background: var(--kship-blue-glass-dark) !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 8px 10px !important;
  }

  /* stack nav items clean */
  #header .navbar-nav .nav-link{
    padding: 10px 12px !important;
    margin: 0 !important;
  }

  /* dropdowns inside collapsed menu should feel flush */
  #header .navbar-collapse .dropdown-menu{
    padding: 4px !important;
    margin: 4px 0 8px !important;
  }
}
/* Bootstrap Switch: OFF handle should be red */
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off{
  background: rgba(220, 53, 69, .92) !important;  /* red */
  color: #fff !important;
  text-shadow: none !important;
}

/* Optional: slightly darker red on hover */
.bootstrap-switch:hover .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-handle-off{
  background: rgba(220, 53, 69, 1) !important;
}
/* =========================================================
   KSHIP: DARKER (but still glassy) NAV DROPDOWNS
   ========================================================= */
:root{
  /* Increase this alpha to reduce see-through (0.55 -> 0.78) */
  --kship-dd-alpha: .92;

  /* same blue family you’re already using */
  --kship-dd-blue-r: 25;
  --kship-dd-blue-g: 90;
  --kship-dd-blue-b: 170;

  --kship-dd-border: rgba(120,190,255,.22);
  --kship-dd-hover:  rgba(120,190,255,.14);
}

/* Dropdown shell */
html body #header .dropdown-menu,
html body .main-navbar-wrapper .dropdown-menu,
html body .navbar .dropdown-menu,
html body .topbar .dropdown-menu,
html body .collapsable-dropdown-menu.dropdown-menu,
html body .navbar-nav .dropdown-menu.dropdown-menu-right{
  background-color: rgba(var(--kship-dd-blue-r), var(--kship-dd-blue-g), var(--kship-dd-blue-b), var(--kship-dd-alpha)) !important;
  border: 1px solid var(--kship-dd-border) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
}

/* Items: remove “boxed” padding/border look */
html body #header .dropdown-menu .dropdown-item{
  background: transparent !important;
  border: 0 !important;                 /* removes border around text */
  padding: 10px 14px !important;        /* cleaner spacing */
  margin: 0 !important;                 /* no gaps that look like boxes */
  color: rgba(255,255,255,.92) !important;
}

/* Hover: your low-opacity KShip blue */
html body #header .dropdown-menu .dropdown-item:hover,
html body #header .dropdown-menu .dropdown-item:focus{
  background: var(--kship-dd-hover) !important;
  color: #fff !important;
}
/* =========================================================
   KSHIP: DROPDOWNS = MORE OPAQUE (EASIER TO READ)
   ========================================================= */
:root{
  /* Higher = darker / less see-through */
  --kship-dd-alpha: .86;

  --kship-dd-blue-r: 25;
  --kship-dd-blue-g: 90;
  --kship-dd-blue-b: 170;

  --kship-dd-border: rgba(120,190,255,.22);
  --kship-dd-hover:  rgba(120,190,255,.14);
}

/* Dropdown shell */
html body #header .dropdown-menu,
html body .main-navbar-wrapper .dropdown-menu,
html body .navbar .dropdown-menu,
html body .topbar .dropdown-menu,
html body .collapsable-dropdown-menu.dropdown-menu,
html body .navbar-nav .dropdown-menu.dropdown-menu-right{
  background-color: rgba(var(--kship-dd-blue-r), var(--kship-dd-blue-g), var(--kship-dd-blue-b), var(--kship-dd-alpha)) !important;
  border: 1px solid var(--kship-dd-border) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
}

/* Items: no padding/border boxes, clean list */
html body #header .dropdown-menu .dropdown-item{
  background: transparent !important;
  border: 0 !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.94) !important;
}

/* Hover: low-opacity KShip blue */
html body #header .dropdown-menu .dropdown-item:hover,
html body #header .dropdown-menu .dropdown-item:focus{
  background: var(--kship-dd-hover) !important;
  color:#fff !important;
}
/* Make dropdown background MORE opaque (less see-through) */
:root{
  /* bump this up for readability */
  --kship-blue-glass-dark: rgba(25, 90, 170, .88);
  /* optional: slightly darker border for contrast */
  --kship-blue-line: rgba(120,190,255,.26);
}

html body #header .dropdown-menu,
html body #header .collapsable-dropdown-menu.dropdown-menu,
html body #header .dropdown-menu.dropdown-menu-right,
html body .main-navbar-wrapper .dropdown-menu{
  background: var(--kship-blue-glass-dark) !important;
  border: 1px solid var(--kship-blue-line) !important;
  padding: 6px !important;          /* tiny bit more breathing room */
}

/* make items readable without boxed borders */
html body #header .dropdown-menu .dropdown-item{
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  color: rgba(255,255,255,.95) !important;
}

/* hover = kship low-opacity blue */
html body #header .dropdown-menu .dropdown-item:hover,
html body #header .dropdown-menu .dropdown-item:focus{
  background: rgba(120,190,255,.14) !important;
  color: #fff !important;
}
/* =========================================================
   WHMCS ORDER / CHECKOUT — Dark Glass Theme Override
   ========================================================= */

/* Main orderform wrappers (covers most WHMCS templates) */
html body #order-standard_cart,
html body .order-container,
html body .orderform,
html body #orderfrm,
html body .checkout,
html body .checkout-content,
html body .view-cart-items,
html body .view-cart-tabs,
html body .order-summary,
html body .cart-body,
html body .cart-sidebar {
  color: rgba(255,255,255,.92) !important;
}

/* Kill the white cards/panels/wells */
html body #order-standard_cart .panel,
html body #order-standard_cart .panel-heading,
html body #order-standard_cart .panel-body,
html body #order-standard_cart .well,
html body #order-standard_cart .card,
html body #order-standard_cart .card-header,
html body #order-standard_cart .card-body,
html body #order-standard_cart .alert,
html body #order-standard_cart .summary-container,
html body #order-standard_cart .view-cart-items-header,
html body #order-standard_cart .checkout-buttons,
html body #order-standard_cart .checkout-security-msg,
html body #order-standard_cart .domain-contact-details,
html body #order-standard_cart .sub-heading,
html body #order-standard_cart .section,
html body #order-standard_cart .form-container,
html body #order-standard_cart .payment-methods,
html body #order-standard_cart .payment-method,
html body #order-standard_cart .cc-input-container,
html body #order-standard_cart .order-product,
html body #order-standard_cart .product {
  background: rgba(12, 18, 28, .82) !important; /* darker/more opaque */
  border: 1px solid rgba(120,190,255,.22) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Headings inside checkout blocks */
html body #order-standard_cart h1,
html body #order-standard_cart h2,
html body #order-standard_cart h3,
html body #order-standard_cart h4,
html body #order-standard_cart .panel-title,
html body #order-standard_cart .section-title {
  color: #fff !important;
}

/* Paragraphs + helper text */
html body #order-standard_cart p,
html body #order-standard_cart small,
html body #order-standard_cart .text-muted,
html body #order-standard_cart .help-block,
html body #order-standard_cart .form-text {
  color: rgba(255,255,255,.72) !important;
}

/* Inputs / selects / textareas */
html body #order-standard_cart .form-control,
html body #order-standard_cart input[type="text"],
html body #order-standard_cart input[type="email"],
html body #order-standard_cart input[type="tel"],
html body #order-standard_cart input[type="password"],
html body #order-standard_cart input[type="number"],
html body #order-standard_cart select,
html body #order-standard_cart textarea {
  background: rgba(6,10,18,.65) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(120,190,255,.22) !important;
  box-shadow: none !important;
}

html body #order-standard_cart .form-control::placeholder,
html body #order-standard_cart input::placeholder,
html body #order-standard_cart textarea::placeholder {
  color: rgba(255,255,255,.45) !important;
}

/* Focus ring */
html body #order-standard_cart .form-control:focus,
html body #order-standard_cart input:focus,
html body #order-standard_cart select:focus,
html body #order-standard_cart textarea:focus {
  border-color: rgba(120,190,255,.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 .2rem rgba(120,190,255,.16) !important;
}

/* Dropdowns (Select2 common in WHMCS) */
html body #order-standard_cart .select2-container--default .select2-selection--single,
html body #order-standard_cart .select2-container--default .select2-selection--multiple {
  background: rgba(6,10,18,.65) !important;
  border: 1px solid rgba(120,190,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}
html body #order-standard_cart .select2-dropdown {
  background: rgba(12,18,28,.92) !important;
  border: 1px solid rgba(120,190,255,.22) !important;
}
html body #order-standard_cart .select2-results__option {
  color: rgba(255,255,255,.92) !important;
}
html body #order-standard_cart .select2-results__option--highlighted {
  background: rgba(120,190,255,.14) !important;
}

/* Tables / line items */
html body #order-standard_cart table,
html body #order-standard_cart .table,
html body #order-standard_cart .list-group-item {
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
}
html body #order-standard_cart .table td,
html body #order-standard_cart .table th,
html body #order-standard_cart .list-group-item {
  border-color: rgba(120,190,255,.16) !important;
}

/* Checkbox / radio labels */
html body #order-standard_cart label,
html body #order-standard_cart .custom-control-label,
html body #order-standard_cart .radio,
html body #order-standard_cart .checkbox {
  color: rgba(255,255,255,.86) !important;
}

/* Primary CTA button (Complete Order) */
html body #order-standard_cart .btn-primary,
html body #order-standard_cart button.btn-primary,
html body #order-standard_cart input.btn-primary {
  background: rgba(25, 90, 170, .88) !important;
  border: 1px solid rgba(120,190,255,.30) !important;
  color: #fff !important;
}
html body #order-standard_cart .btn-primary:hover,
html body #order-standard_cart button.btn-primary:hover {
  background: rgba(25, 90, 170, .98) !important;
}

/* Remove any lingering forced white backgrounds (common offenders) */
html body #order-standard_cart [style*="background:#fff"],
html body #order-standard_cart [style*="background: #fff"],
html body #order-standard_cart [style*="background-color:#fff"],
html body #order-standard_cart [style*="background-color: #fff"] {
  background: rgba(12, 18, 28, .82) !important;
}
/* =========================================================
   Checkout account selector (iCheck) — kill white backgrounds
   ========================================================= */

/* The whole account "tile" */
html body #order-standard_cart .account,
html body #order-standard_cart .account.active,
html body #order-standard_cart .account label.radio-inline {
  background: rgba(12, 18, 28, .82) !important;
  border: 1px solid rgba(120,190,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Text inside */
html body #order-standard_cart .account .address,
html body #order-standard_cart .account .address strong,
html body #order-standard_cart .account .address .small {
  color: rgba(255,255,255,.92) !important;
}
html body #order-standard_cart .account .address .small {
  color: rgba(255,255,255,.72) !important;
}

/* iCheck: the inline white bg is on the input + helper overlay */
html body #order-standard_cart .account .iradio_square-blue input,
html body #order-standard_cart .account .iradio_square-blue .iCheck-helper,
html body #order-standard_cart .account .icheckbox_square-blue input,
html body #order-standard_cart .account .icheckbox_square-blue .iCheck-helper {
  background: transparent !important;
}

/* Ensure the iCheck wrapper itself is dark/clean */
html body #order-standard_cart .account .iradio_square-blue,
html body #order-standard_cart .account .icheckbox_square-blue {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Optional: stronger highlight for the selected tile */
html body #order-standard_cart .account.active {
  border-color: rgba(120,190,255,.45) !important;
  box-shadow: 0 0 0 2px rgba(120,190,255,.12), 0 16px 40px rgba(0,0,0,.35) !important;
}

/* If the USD badge gets too bright */
html body #order-standard_cart .account .label.label-info {
  background: rgba(120,190,255,.18) !important;
  border: 1px solid rgba(120,190,255,.25) !important;
  color: rgba(255,255,255,.92) !important;
}
/* =========================================================
   Checkout > Choose Account — remove inner bordered boxes
   (Address row + Create New Account row)
   ========================================================= */

html body #order-standard_cart .accounts .account label.radio-inline,
html body #order-standard_cart .accounts .account.active label.radio-inline,
html body #order-standard_cart .accounts .account label,
html body #order-standard_cart .accounts .account.active label {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Kill any borders/backgrounds on the address wrapper itself */
html body #order-standard_cart .accounts .account .address,
html body #order-standard_cart .accounts .account .address strong,
html body #order-standard_cart .accounts .account .address .small {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* If WHMCS is adding a border to the "active" tile specifically */
html body #order-standard_cart .accounts .account.active {
  box-shadow: none !important;
}

/* Optional: keep a clean divider line between rows (instead of boxed borders) */
html body #order-standard_cart .accounts .account {
  border-top: 1px solid rgba(120,190,255,.18) !important;
}
html body #order-standard_cart .accounts .account:first-child {
  border-top: 0 !important;
}
/* =========================================================
   Checkout account selector (iCheck) — kill white backgrounds
   ========================================================= */

/* The whole account "tile" */
html body #order-standard_cart .account,
html body #order-standard_cart .account.active,
html body #order-standard_cart .account label.radio-inline {
  background: rgba(12, 18, 28, .82) !important;
  border: 1px solid rgba(120,190,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Text inside */
html body #order-standard_cart .account .address,
html body #order-standard_cart .account .address strong,
html body #order-standard_cart .account .address .small {
  color: rgba(255,255,255,.92) !important;
}
html body #order-standard_cart .account .address .small {
  color: rgba(255,255,255,.72) !important;
}

/* iCheck: the inline white bg is on the input + helper overlay */
html body #order-standard_cart .account .iradio_square-blue input,
html body #order-standard_cart .account .iradio_square-blue .iCheck-helper,
html body #order-standard_cart .account .icheckbox_square-blue input,
html body #order-standard_cart .account .icheckbox_square-blue .iCheck-helper {
  background: transparent !important;
}

/* Ensure the iCheck wrapper itself is dark/clean */
html body #order-standard_cart .account .iradio_square-blue,
html body #order-standard_cart .account .icheckbox_square-blue {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Optional: stronger highlight for the selected tile */
html body #order-standard_cart .account.active {
  border-color: rgba(120,190,255,.45) !important;
  box-shadow: 0 0 0 2px rgba(120,190,255,.12), 0 16px 40px rgba(0,0,0,.35) !important;
}

/* If the USD badge gets too bright */
html body #order-standard_cart .account .label.label-info {
  background: rgba(120,190,255,.18) !important;
  border: 1px solid rgba(120,190,255,.25) !important;
  color: rgba(255,255,255,.92) !important;
}

:root{
  --kship-layer-max: 1500px;
  --kship-layer-gutter: 18px;         /* space from screen edges */
  --kship-layer-bg: rgba(0,0,0,.62);  /* adjust opacity to taste */
  --kship-layer-border: rgba(120,190,255,.20);
  --kship-layer-blur: 14px;
  --kship-layer-radius: 14px;
  --kship-layer-shadow: 0 18px 55px rgba(0,0,0,.45);
}

/* Create the layer ONLY in the content area (below header, above footer) */
html body #main-body{
  position: relative;
  z-index: 0;
}

/* The “glass panel” */
html body #main-body::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);

  width: min(var(--kship-layer-max), calc(100% - (var(--kship-layer-gutter) * 2)));

  background: var(--kship-layer-bg);
  border: 1px solid var(--kship-layer-border);
  border-radius: var(--kship-layer-radius);
  box-shadow: var(--kship-layer-shadow);

  backdrop-filter: blur(var(--kship-layer-blur));
  -webkit-backdrop-filter: blur(var(--kship-layer-blur));

  pointer-events: none; /* never blocks clicks */
  z-index: 0;
}

/* Ensure ALL actual content sits above the layer */
html body #main-body > *{
  position: relative;
  z-index: 1;
}
/* DataTables / Bootstrap pagination (dark theme) */
html body ul.pagination{
  gap: 8px;
  margin: 14px 0 0;
}

html body ul.pagination .page-item .page-link{
  background: rgba(10, 18, 30, .75);
  color: rgba(235, 245, 255, .92);
  border: 1px solid rgba(120,190,255,.18);
  border-radius: 0 !important;      /* rectangle */
  padding: 6px 12px;
  box-shadow: none;
  text-decoration: none;
}

html body ul.pagination .page-item .page-link:hover{
  background: rgba(120,190,255,.14); /* kship low opacity blue hover */
  border-color: rgba(120,190,255,.28);
  color: #fff;
}

html body ul.pagination .page-item.active .page-link{
  background: rgba(120,190,255,.22);
  border-color: rgba(120,190,255,.35);
  color: #fff;
}

html body ul.pagination .page-item.disabled .page-link{
  background: rgba(10, 18, 30, .40);
  color: rgba(235,245,255,.45);
  border-color: rgba(120,190,255,.10);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

html body ul.pagination .page-item:focus,
html body ul.pagination .page-link:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(120,190,255,.18);
}
/* =========================
   Services table: dark + no radius + mobile friendly
   Targets: #tableServicesList (DataTables)
   ========================= */

/* No rounding anywhere in/around the table */
html body #tableServicesList,
html body #tableServicesList_wrapper,
html body #tableServicesList thead,
html body #tableServicesList tbody,
html body #tableServicesList tr,
html body #tableServicesList th,
html body #tableServicesList td{
  border-radius: 0 !important;
}

/* Table base */
html body #tableServicesList{
  width: 100% !important;
  background: rgba(10, 18, 30, .55);
  color: rgba(235,245,255,.92);
  border: 1px solid rgba(120,190,255,.14);
  border-collapse: collapse !important;
}

/* Header */
html body #tableServicesList thead th{
  background: rgba(10, 18, 30, .75);
  color: rgba(235,245,255,.92);
  border-bottom: 1px solid rgba(120,190,255,.18) !important;
  border-top: 0 !important;
  padding: 10px 12px !important;
  white-space: nowrap;
}

/* Body cells */
html body #tableServicesList tbody td{
  background: transparent !important;
  border-top: 1px solid rgba(120,190,255,.10) !important;
  padding: 10px 12px !important;
  vertical-align: middle;
}

/* Row hover: kship low-opacity bluish */
html body #tableServicesList tbody tr:hover td{
  background: rgba(120,190,255,.12) !important;
}

/* Links */
html body #tableServicesList a{
  color: rgba(160,210,255,.98);
  text-decoration: none;
}
html body #tableServicesList a:hover{
  color: #fff;
  text-decoration: underline;
}

/* Status labels: keep rectangle + readable */
html body #tableServicesList .label.status{
  border-radius: 0 !important;
  padding: 3px 8px;
  border: 1px solid rgba(120,190,255,.18);
  background: rgba(10,18,30,.65);
  color: rgba(235,245,255,.92);
}

/* Price small text */
html body #tableServicesList small.text-muted{
  color: rgba(235,245,255,.55) !important;
}

/* SSL icon cell spacing */
html body #tableServicesList td.ssl-info{
  width: 44px;
}
html body #tableServicesList td.ssl-info img{
  display: inline-block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

/* Avoid weird DataTables width:0 columns */
html body #tableServicesList th,
html body #tableServicesList td{
  width: auto !important;
}

/* =========================
   Mobile: stack each row into a card
   ========================= */
@media (max-width: 768px){

  /* Hide header */
  html body #tableServicesList thead{
    display: none !important;
  }

  /* Turn table into block cards */
  html body #tableServicesList,
  html body #tableServicesList tbody,
  html body #tableServicesList tr,
  html body #tableServicesList td{
    display: block !important;
    width: 100% !important;
  }

  /* Each row = card */
  html body #tableServicesList tbody tr{
    border: 1px solid rgba(120,190,255,.16) !important;
    background: rgba(10,18,30,.60) !important;
    margin: 10px 0 !important;
    padding: 10px !important;
    border-radius: 0 !important;
  }

  /* Cells become labeled rows */
  html body #tableServicesList tbody td{
    border: 0 !important;
    padding: 8px 0 !important;
  }

  /* Label for each cell using data-label attribute we add via CSS mapping below */
  html body #tableServicesList tbody td[data-label]{
    position: relative;
    padding-left: 120px !important;
    min-height: 24px;
  }
  html body #tableServicesList tbody td[data-label]::before{
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 8px;
    width: 110px;
    color: rgba(235,245,255,.55);
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: none;
    white-space: nowrap;
  }

  /* Keep the SSL icon at top-left and not huge */
  html body #tableServicesList tbody td.ssl-info{
    padding-left: 0 !important;
  }
}

/* =========================
   Add mobile labels without editing HTML:
   Map columns -> data-label using nth-child
   (1)=ssl, (2)=Product/Service, (3)=Pricing, (4)=Next Due Date, (5)=Status
   ========================= */

@media (max-width: 768px){
  html body #tableServicesList tbody td:nth-child(1){  /* ssl */
    /* no label for icon cell */
  }
  html body #tableServicesList tbody td:nth-child(2){  /* product */
    attr(data-label); /* noop */
  }
  html body #tableServicesList tbody td:nth-child(2){  content: none; }

  /* apply labels by setting data-label via CSS trick: use attribute selector + pseudo, but we need a real attribute.
     Since we can't set attributes in CSS, we do it by styling based on nth-child and using ::before content directly.
  */
  html body #tableServicesList tbody td:nth-child(2){
    position: relative; padding-left: 120px !important;
  }
  html body #tableServicesList tbody td:nth-child(2)::before{
    content: "Service";
    position: absolute; left: 0; top: 8px; width: 110px;
    color: rgba(235,245,255,.55); font-weight: 600;
  }

  html body #tableServicesList tbody td:nth-child(3){
    position: relative; padding-left: 120px !important;
  }
  html body #tableServicesList tbody td:nth-child(3)::before{
    content: "Pricing";
    position: absolute; left: 0; top: 8px; width: 110px;
    color: rgba(235,245,255,.55); font-weight: 600;
  }

  html body #tableServicesList tbody td:nth-child(4){
    position: relative; padding-left: 120px !important;
  }
  html body #tableServicesList tbody td:nth-child(4)::before{
    content: "Next Due";
    position: absolute; left: 0; top: 8px; width: 110px;
    color: rgba(235,245,255,.55); font-weight: 600;
  }

  html body #tableServicesList tbody td:nth-child(5){
    position: relative; padding-left: 120px !important;
  }
  html body #tableServicesList tbody td:nth-child(5)::before{
    content: "Status";
    position: absolute; left: 0; top: 8px; width: 110px;
    color: rgba(235,245,255,.55); font-weight: 600;
  }
}
/* =========================================
   WHMCS Order Form - Domain Selection (Dark)
   Targets the block inside .cart-body / #order-standard_cart
   ========================================= */

html body #order-standard_cart .cart-body,
html body #order-standard_cart .cart-body *{
  color: rgba(235,245,255,.92);
}

/* Page title area */
html body #order-standard_cart .cart-body .header-lined{
  border-bottom: 1px solid rgba(120,190,255,.14) !important;
  margin-bottom: 14px;
}
html body #order-standard_cart .cart-body .header-lined h1,
html body #order-standard_cart .cart-body .header-lined h2,
html body #order-standard_cart .cart-body .header-lined h3{
  color: rgba(235,245,255,.95) !important;
}

/* Cards (Categories/Actions blocks in sidebar-collapsed) */
html body #order-standard_cart .sidebar-collapsed .panel.card,
html body #order-standard_cart .sidebar-collapsed .panel.card.panel-default{
  background: rgba(10,18,30,.55) !important;
  border: 1px solid rgba(120,190,255,.14) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  border-radius: 0 !important;
}
html body #order-standard_cart .sidebar-collapsed .panel.card .card-header,
html body #order-standard_cart .sidebar-collapsed .panel.card .panel-heading{
  background: rgba(10,18,30,.72) !important;
  border-bottom: 1px solid rgba(120,190,255,.14) !important;
  border-radius: 0 !important;
}
html body #order-standard_cart .sidebar-collapsed .panel.card .panel-title{
  color: rgba(235,245,255,.92) !important;
}
html body #order-standard_cart .sidebar-collapsed .panel.card .card-body,
html body #order-standard_cart .sidebar-collapsed .panel.card .panel-body{
  background: transparent !important;
  border-radius: 0 !important;
}

/* Selects + Inputs */
html body #order-standard_cart .cart-body select.form-control,
html body #order-standard_cart .cart-body select.custom-select,
html body #order-standard_cart .cart-body input.form-control{
  background: rgba(10,18,30,.70) !important;
  color: rgba(235,245,255,.92) !important;
  border: 1px solid rgba(120,190,255,.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Option list background (browser-dependent, but helps on most) */
html body #order-standard_cart .cart-body select.form-control option,
html body #order-standard_cart .cart-body select.custom-select option{
  background: rgba(10,18,30,.95) !important;
  color: rgba(235,245,255,.92) !important;
}

/* Focus ring: subtle kship blue */
html body #order-standard_cart .cart-body select.form-control:focus,
html body #order-standard_cart .cart-body select.custom-select:focus,
html body #order-standard_cart .cart-body input.form-control:focus{
  outline: none !important;
  border-color: rgba(120,190,255,.45) !important;
  box-shadow: 0 0 0 2px rgba(120,190,255,.14) !important;
}

/* Input group (www.) */
html body #order-standard_cart .cart-body .input-group-text,
html body #order-standard_cart .cart-body .input-group-addon{
  background: rgba(10,18,30,.82) !important;
  color: rgba(235,245,255,.80) !important;
  border: 1px solid rgba(120,190,255,.18) !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}
html body #order-standard_cart .cart-body .input-group .form-control{
  border-left: 0 !important;
}

/* Domain selection options container */
html body #order-standard_cart .domain-selection-options{
  background: rgba(10,18,30,.45) !important;
  border: 1px solid rgba(120,190,255,.14) !important;
  padding: 10px 12px !important;
  border-radius: 0 !important;
}

/* Each domain option row */
html body #order-standard_cart .domain-selection-options .option{
  background: rgba(10,18,30,.40) !important;
  border: 1px solid rgba(120,190,255,.12) !important;
  border-radius: 0 !important;
  margin-bottom: 10px !important;
  padding: 10px 12px !important;
}

/* Hover: kship low-opacity bluish */
html body #order-standard_cart .domain-selection-options .option:hover{
  background: rgba(120,190,255,.10) !important;
  border-color: rgba(120,190,255,.20) !important;
}

/* Selected option: slightly stronger */
html body #order-standard_cart .domain-selection-options .option.option-selected{
  background: rgba(120,190,255,.12) !important;
  border-color: rgba(120,190,255,.28) !important;
}

/* Labels inside options */
html body #order-standard_cart .domain-selection-options .option label{
  color: rgba(235,245,255,.92) !important;
  margin-bottom: 6px !important;
}

/* Helper text / muted */
html body #order-standard_cart .cart-body .text-muted,
html body #order-standard_cart .cart-body .small,
html body #order-standard_cart .cart-body .domain-suggestions-warning,
html body #order-standard_cart .cart-body .domain-suggestions-warning p{
  color: rgba(235,245,255,.60) !important;
}

/* Domain search results headline blocks */
html body #order-standard_cart .domain-checker-result-headline,
html body #order-standard_cart .domain-lookup-result .headline{
  color: rgba(235,245,255,.92) !important;
}

/* Suggested domains list group */
html body #order-standard_cart .suggested-domains .list-group,
html body #order-standard_cart .suggested-domains .list-group-item{
  background: rgba(10,18,30,.55) !important;
  color: rgba(235,245,255,.92) !important;
  border: 1px solid rgba(120,190,255,.12) !important;
  border-radius: 0 !important;
}
html body #order-standard_cart .suggested-domains .list-group-item:hover{
  background: rgba(120,190,255,.10) !important;
}

/* Buttons remain readable on dark */
html body #order-standard_cart .cart-body .btn.btn-primary{
  border-radius: 0 !important;
}
html body #order-standard_cart .cart-body .btn.btn-add-to-cart{
  background: rgba(120,190,255,.14) !important;
  border: 1px solid rgba(120,190,255,.22) !important;
  color: rgba(235,245,255,.92) !important;
  border-radius: 0 !important;
}
html body #order-standard_cart .cart-body .btn.btn-add-to-cart:hover{
  background: rgba(120,190,255,.22) !important;
  border-color: rgba(120,190,255,.30) !important;
}

/* If WHMCS is still painting white card bodies somewhere, force it */
html body #order-standard_cart .cart-body .card-body,
html body #order-standard_cart .cart-body .panel-body{
  background: transparent !important;
}

/* Remove any inherited white background from form elements wrappers */
html body #order-standard_cart .cart-body form,
html body #order-standard_cart .cart-body .form-group,
html body #order-standard_cart .cart-body .domains-row{
  background: transparent !important;
}
/* =========================================
   Service Buttons: hover = KShip green
   Targets: .div-service-buttons button + dropdown items
   ========================================= */

:root{
  /* tweak if you have an exact brand green */
  --kship-green: #22c55e;          /* main hover green */
  --kship-green-strong: #16a34a;   /* slightly darker for active */
  --kship-green-glow: rgba(34,197,94,.22);
}

/* Base buttons in the service button row */
html body .div-service-buttons .btn.btn-default{
  border-radius: 0 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}

/* Hover / focus / open dropdown toggle */
html body .div-service-buttons .btn.btn-default:hover,
html body .div-service-buttons .btn.btn-default:focus,
html body .div-service-buttons .btn-group.open > .btn.btn-default.dropdown-toggle,
html body .div-service-buttons .btn.btn-default.dropdown-toggle[aria-expanded="true"]{
  background: rgba(34,197,94,.16) !important;
  border-color: rgba(34,197,94,.55) !important;
  color: rgba(235,245,255,.96) !important;
  box-shadow: 0 0 0 2px var(--kship-green-glow) !important;
}

/* If any buttons are "primary" in that group, keep them aligned too */
html body .div-service-buttons .btn-group-primary .btn.btn-default:hover,
html body .div-service-buttons .btn-group-secondary .btn.btn-default:hover{
  background: rgba(34,197,94,.16) !important;
  border-color: rgba(34,197,94,.55) !important;
}

/* Dropdown menu items (li.dropdown-item used by WHMCS in some places) */
html body .div-service-buttons .dropdown-menu{
  border-radius: 0 !important;
}
html body .div-service-buttons .dropdown-menu .dropdown-item{
  border-radius: 0 !important;
  transition: background-color .12s ease, color .12s ease !important;
}

/* Hover the dropdown items: green */
html body .div-service-buttons .dropdown-menu .dropdown-item:hover,
html body .div-service-buttons .dropdown-menu .dropdown-item:focus{
  background: rgba(34,197,94,.16) !important;
  color: rgba(235,245,255,.96) !important;
}

/* If your "dropdown-item" is actually an <li> (not <a>), force pointer cursor */
html body .div-service-buttons .dropdown-menu li.dropdown-item{
  cursor: pointer !important;
}

/* Optional: active/clicked */
html body .div-service-buttons .dropdown-menu .dropdown-item:active{
  background: rgba(34,197,94,.24) !important;
}
/* =========================================================
   Stark "Action Failed" alert (dark theme, high contrast)
   ========================================================= */
html body #alertModuleCustomButtonFailed.alert.alert-danger{
  border-radius: 0 !important;
  background: rgba(220, 38, 38, .22) !important;     /* deep red glass */
  border: 1px solid rgba(255, 80, 80, .85) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.45) !important;

  padding: 14px 16px !important;
  margin: 12px 0 !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 2px rgba(255, 80, 80, .25),
    0 0 22px rgba(255, 80, 80, .18) !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  animation: kship-alert-shake .28s ease-in-out 1 !important;
}

/* Add a left stripe + icon for instant recognition */
html body #alertModuleCustomButtonFailed{
  position: relative !important;
  padding-left: 46px !important;
}
html body #alertModuleCustomButtonFailed:before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 6px !important;
  background: rgba(255, 80, 80, .95) !important;
}
html body #alertModuleCustomButtonFailed:after{
  content: "⚠" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: .95 !important;
}

/* Shake keyframes */
@keyframes kship-alert-shake{
  0%{transform: translateX(0)}
  25%{transform: translateX(-6px)}
  50%{transform: translateX(6px)}
  75%{transform: translateX(-4px)}
  100%{transform: translateX(0)}
}
/* KSHIP: header account dropdown hover = green */
html body #header .dropdown-menu a.dropdown-item:hover,
html body #header .dropdown-menu a.dropdown-item:focus,
html body #header .dropdown-menu .dropdown-item:hover,
html body #header .dropdown-menu .dropdown-item:focus,
html body .main-navbar-wrapper .dropdown-menu a.dropdown-item:hover,
html body .main-navbar-wrapper .dropdown-menu a.dropdown-item:focus,
html body .main-navbar-wrapper .dropdown-menu .dropdown-item:hover,
html body .main-navbar-wrapper .dropdown-menu .dropdown-item:focus,
html body #header .dropdown-menu a:hover,
html body #header .dropdown-menu a:focus,
html body .main-navbar-wrapper .dropdown-menu a:hover,
html body .main-navbar-wrapper .dropdown-menu a:focus {
  background: rgba(38, 208, 124, 0.22) !important; /* green glow */
  color: #eafff3 !important;
  text-decoration: none !important;
}

/* Optional: a subtle left indicator line on hover */
html body #header .dropdown-menu a:hover,
html body .main-navbar-wrapper .dropdown-menu a:hover {
  box-shadow: inset 3px 0 0 rgba(38, 208, 124, 0.65) !important;
}
/* High-contrast for ONLY centered warning alerts */
.alert.alert-warning.text-center{
  background:#fff3cd !important;
  border:2px solid #000 !important;
  color:#000 !important;
  font-weight:800;
  letter-spacing:.2px;
  padding:14px 16px !important;
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.alert.alert-warning.text-center::before{
  content:"⚠ ";
  font-weight:900;
}