/* ================================================================
   XTREMEL — WHMCS Twenty-One Complete Custom Theme
   File: /clients/templates/twenty-one/css/custom.css
   REPLACE the entire existing file with this content.
   ================================================================ */

/* ── FONTS ───────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ── VARIABLES ───────────────────────────────────────────────── */
:root {
  --x-blue:        #0057ff;
  --x-blue-dark:   #0049e0;
  --x-blue-soft:   #e4eeff;
  --x-blue-mist:   #f2f6ff;
  --x-blue-light:  #a8c8ff;
  --x-ink:         #07111f;
  --x-slate:       #526580;
  --x-white:       #ffffff;
  --x-green:       #00d48a;
  --x-amber:       #ffaa00;
  --x-red:         #ff3d5a;
  --x-radius:      14px;
  --x-radius-sm:   9px;
  --x-radius-pill: 99px;
  --x-shadow:      0 4px 24px rgba(0,60,200,0.09);
  --x-shadow-md:   0 10px 40px rgba(0,60,200,0.13);
}

/* ── BASE ────────────────────────────────────────────────────── */
body {
  font-family: 'DM Sans', sans-serif !important;
  background-color: var(--x-blue-mist) !important;
  color: var(--x-ink) !important;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.panel-title,.product-name,.navbar-brand {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  color: var(--x-ink) !important;
}
a { color: var(--x-blue) !important; transition: color 0.18s !important; }
a:hover { color: var(--x-blue-dark) !important; text-decoration: none !important; }

/* ================================================================
   HEADER
   Row 1 — Logo + Search: WHITE
   Row 2 — Nav links:     DARK INK
   ================================================================ */

/* Force the logo/search top row white — target every possible wrapper */
.navbar-header-row,
.header-top-row,
#header-top,
.navbar-top,
.top-bar,
#top-bar,
.masthead,
.site-header,
#header-container,
.header-container {
  background: var(--x-white) !important;
  background-color: var(--x-white) !important;
  border-bottom: 1px solid var(--x-blue-soft) !important;
  box-shadow: 0 2px 12px rgba(0,60,200,0.06) !important;
}

/* The first .navbar on the page = logo row → white */
body .navbar:first-of-type,
body .navbar-default:first-of-type {
  background: var(--x-white) !important;
  background-color: var(--x-white) !important;
  border-bottom: 1px solid var(--x-blue-soft) !important;
  box-shadow: 0 2px 12px rgba(0,60,200,0.06) !important;
}

/* Second .navbar = nav links row → dark */
body .navbar:nth-of-type(2),
body .navbar-default:nth-of-type(2),
#main-nav,
.navbar-main,
.main-navigation,
nav.navbar-primary {
  background: var(--x-ink) !important;
  background-color: var(--x-ink) !important;
  border: none !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.2) !important;
  margin-bottom: 0 !important;
}

/* If WHMCS uses a single navbar with two rows inside */
.navbar-default {
  background: var(--x-ink) !important;
  background-color: var(--x-ink) !important;
  border: none !important;
}

/* ── LOGO ────────────────────────────────────────────────────── */
.navbar-brand {
  padding: 10px 0 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
  color: var(--x-ink) !important;
}
.navbar-brand img {
  max-height: 38px !important;
  min-height: 28px !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* ── SEARCH BAR ──────────────────────────────────────────────── */
input[placeholder*="Search"],
input[placeholder*="search"],
input[placeholder*="knowledge"],
.navbar-search input,
#knowledgebase-search input {
  border-radius: var(--x-radius-pill) !important;
  border: 1.8px solid var(--x-blue-soft) !important;
  background: var(--x-blue-mist) !important;
  padding: 8px 20px !important;
  color: var(--x-ink) !important;
  font-size: 0.88rem !important;
  font-family: 'DM Sans', sans-serif !important;
  box-shadow: none !important;
}
input[placeholder*="Search"]:focus,
input[placeholder*="knowledge"]:focus {
  border-color: var(--x-blue) !important;
  box-shadow: 0 0 0 4px rgba(0,87,255,0.1) !important;
  background: var(--x-white) !important;
  outline: none !important;
}

/* Cart badge */
.shopping-cart .badge,
.cart-link .badge,
#cart-total-items,
a[href*="cart"] .badge {
  background: var(--x-blue) !important;
  color: white !important;
  border-radius: 99px !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}

/* ── NAV LINKS (dark bar) ────────────────────────────────────── */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:focus {
  color: rgba(255,255,255,0.75) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 14px 16px !important;
  transition: color 0.18s, background 0.18s !important;
}
.navbar-default .navbar-nav > li > a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.07) !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  color: #ffffff !important;
  background: rgba(0,87,255,0.4) !important;
}
.navbar-default .navbar-nav.navbar-right > li > a,
.navbar-right > li > a {
  color: rgba(255,255,255,0.8) !important;
}
.navbar-right > li > a:hover { color: #ffffff !important; }

/* Dropdowns */
.navbar-default .navbar-nav .dropdown-menu,
.navbar-nav .open .dropdown-menu {
  background: #0f1e35 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--x-radius) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
  padding: 6px !important;
}
.navbar-default .navbar-nav .dropdown-menu > li > a {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.86rem !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.navbar-default .navbar-nav .dropdown-menu > li > a:hover {
  background: rgba(0,87,255,0.3) !important;
  color: #ffffff !important;
}
.divider, .dropdown-divider { border-color: rgba(255,255,255,0.1) !important; }

/* Mobile nav */
.navbar-toggle { border-color: rgba(255,255,255,0.2) !important; margin-top: 10px !important; }
.navbar-toggle .icon-bar { background: rgba(255,255,255,0.8) !important; }
.navbar-toggle:hover { background: rgba(255,255,255,0.1) !important; }
@media (max-width: 767px) {
  .navbar-default .navbar-collapse {
    background: var(--x-ink) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }
  .navbar-default .navbar-nav > li > a {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 13px 20px !important;
  }
}

/* ── BREADCRUMB ──────────────────────────────────────────────── */
.breadcrumb, ol.breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
  margin-bottom: 0 !important;
  font-size: 0.82rem !important;
}
.breadcrumb > li a { color: var(--x-slate) !important; }
.breadcrumb > li + li::before { color: var(--x-slate) !important; }
.breadcrumb > .active { color: var(--x-ink) !important; font-weight: 600 !important; }
.breadcrumb-bar, .breadcrumb-wrapper {
  background: var(--x-blue-mist) !important;
  border-bottom: 1px solid var(--x-blue-soft) !important;
  padding: 6px 0 !important;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--x-radius-pill) !important;
  transition: all 0.22s !important;
  border: none !important;
}
.btn-primary, .btn-success, .btn-cart, .btn-checkout,
a.btn-primary, a.btn-success, input[type="submit"].btn-primary {
  background: var(--x-blue) !important;
  border-color: var(--x-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0,87,255,0.28) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-cart:hover,
a.btn-primary:hover, input[type="submit"].btn-primary:hover {
  background: var(--x-blue-dark) !important;
  border-color: var(--x-blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(0,87,255,0.36) !important;
  color: #ffffff !important;
}
.btn-default {
  background: transparent !important;
  border: 1.8px solid rgba(0,87,255,0.22) !important;
  color: var(--x-ink) !important;
}
.btn-default:hover {
  border-color: var(--x-blue) !important;
  color: var(--x-blue) !important;
  background: var(--x-blue-mist) !important;
}
.btn-danger { background: var(--x-red) !important; border-color: var(--x-red) !important; color: #fff !important; }
.btn-link { color: var(--x-blue) !important; }

/* ── PANELS ──────────────────────────────────────────────────── */
.panel {
  border-radius: var(--x-radius) !important;
  border: 1.5px solid var(--x-blue-soft) !important;
  box-shadow: var(--x-shadow) !important;
  background: var(--x-white) !important;
  overflow: hidden !important;
  transition: all 0.25s !important;
}
.panel:hover {
  border-color: rgba(0,87,255,0.18) !important;
  box-shadow: var(--x-shadow-md) !important;
}
.panel-heading {
  background: var(--x-blue-mist) !important;
  border-bottom: 1px solid var(--x-blue-soft) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  color: var(--x-ink) !important;
  padding: 14px 20px !important;
}
.panel-body { background: var(--x-white) !important; }
.panel-footer { background: var(--x-blue-mist) !important; border-top: 1px solid var(--x-blue-soft) !important; }

/* ── PRODUCT / ORDER ─────────────────────────────────────────── */
.product-addon, .product-list-item, .productbox, .package, .package-box {
  border-radius: var(--x-radius) !important;
  border: 1.5px solid var(--x-blue-soft) !important;
  box-shadow: var(--x-shadow) !important;
  background: var(--x-white) !important;
  transition: all 0.25s !important;
}
.product-addon:hover, .productbox:hover, .package:hover, .package-box:hover {
  border-color: rgba(0,87,255,0.25) !important;
  box-shadow: var(--x-shadow-md) !important;
  transform: translateY(-4px) !important;
}
.product-name, .package-name, h2.package-name {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
}
.price, .product-price, .package-price, h2.price, span.price {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--x-blue) !important;
}

/* ── FORMS ───────────────────────────────────────────────────── */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], select, textarea {
  font-family: 'DM Sans', sans-serif !important;
  border-radius: var(--x-radius-sm) !important;
  border: 1.8px solid var(--x-blue-soft) !important;
  background: var(--x-blue-mist) !important;
  color: var(--x-ink) !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  font-size: 0.92rem !important;
  padding: 10px 14px !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--x-blue) !important;
  box-shadow: 0 0 0 4px rgba(0,87,255,0.1) !important;
  background: var(--x-white) !important;
  outline: none !important;
}
label { font-size: 0.85rem !important; font-weight: 600 !important; color: var(--x-ink) !important; margin-bottom: 5px !important; }

/* ── ALERTS ──────────────────────────────────────────────────── */
.alert { border-radius: var(--x-radius-sm) !important; border: none !important; font-size: 0.9rem !important; }
.alert-success { background: rgba(0,212,138,0.1) !important; border-left: 4px solid var(--x-green) !important; color: #00845a !important; }
.alert-info    { background: rgba(0,87,255,0.07) !important; border-left: 4px solid var(--x-blue) !important; color: var(--x-blue) !important; }
.alert-warning { background: rgba(255,170,0,0.1) !important; border-left: 4px solid var(--x-amber) !important; color: #a06b00 !important; }
.alert-danger  { background: rgba(255,61,90,0.08) !important; border-left: 4px solid var(--x-red) !important; color: #c0002e !important; }

/* ── TABLES ──────────────────────────────────────────────────── */
.table { font-size: 0.9rem !important; }
.table > thead > tr > th {
  font-family: 'Syne', sans-serif !important; font-weight: 700 !important;
  background: var(--x-blue-mist) !important; border-bottom: 2px solid var(--x-blue-soft) !important;
  color: var(--x-ink) !important; font-size: 0.82rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important;
}
.table > tbody > tr > td { border-color: var(--x-blue-soft) !important; vertical-align: middle !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--x-blue-mist) !important; }
.table-hover > tbody > tr:hover { background: rgba(0,87,255,0.04) !important; }

/* ── BADGES ──────────────────────────────────────────────────── */
.label, .badge { border-radius: 99px !important; font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 0.72rem !important; padding: 3px 10px !important; }
.label-success, .badge-success { background: var(--x-green) !important; color: var(--x-ink) !important; }
.label-primary, .badge-primary { background: var(--x-blue) !important; color: #fff !important; }
.label-warning, .badge-warning { background: var(--x-amber) !important; color: var(--x-ink) !important; }
.label-danger,  .badge-danger  { background: var(--x-red) !important; color: #fff !important; }
.status-active   { color: #00845a !important; font-weight: 700 !important; }
.status-pending  { color: #a06b00 !important; font-weight: 700 !important; }
.status-suspended, .status-terminated { color: var(--x-red) !important; font-weight: 700 !important; }

/* ── TABS ────────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--x-blue-soft) !important; }
.nav-tabs > li > a { font-family: 'Syne', sans-serif !important; font-weight: 600 !important; color: var(--x-slate) !important; border: none !important; font-size: 0.88rem !important; }
.nav-tabs > li > a:hover { background: var(--x-blue-mist) !important; color: var(--x-blue) !important; border: none !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
  color: var(--x-blue) !important; border: none !important; border-bottom: 3px solid var(--x-blue) !important; background: transparent !important; font-weight: 700 !important;
}

/* ── MODALS ──────────────────────────────────────────────────── */
.modal-content { border-radius: var(--x-radius) !important; border: 1.5px solid var(--x-blue-soft) !important; box-shadow: 0 24px 80px rgba(0,0,0,0.18) !important; }
.modal-header { background: var(--x-blue-mist) !important; border-bottom: 1px solid var(--x-blue-soft) !important; border-radius: var(--x-radius) var(--x-radius) 0 0 !important; }
.modal-title { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; }

/* ── FOOTER ──────────────────────────────────────────────────── */
#footer, footer, .footer {
  background: var(--x-ink) !important;
  color: rgba(255,255,255,0.5) !important;
  border-top: none !important;
  margin-top: 60px !important;
  padding: 28px 0 !important;
  font-size: 0.84rem !important;
  text-align: center !important;
}
#footer a, footer a, .footer a { color: rgba(255,255,255,0.5) !important; }
#footer a:hover, footer a:hover { color: var(--x-blue-light) !important; }
#footer a[href*="whmcs"], .footer a[href*="whmcs"] { opacity: 0.3 !important; font-size: 0.75rem !important; }

/* ── MISC ────────────────────────────────────────────────────── */
.pagination > li > a, .pagination > li > span { color: var(--x-blue) !important; border-color: var(--x-blue-soft) !important; border-radius: var(--x-radius-sm) !important; margin: 0 2px !important; }
.pagination > .active > a, .pagination > .active > span { background: var(--x-blue) !important; border-color: var(--x-blue) !important; color: #fff !important; }
.domain-available   { color: #00845a !important; font-weight: 700 !important; }
.domain-unavailable { color: var(--x-red) !important; font-weight: 700 !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--x-blue-mist); }
::-webkit-scrollbar-thumb { background: var(--x-blue-soft); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--x-blue); }