/* ============================================================
   CyberVision Media — Client Portal Theme v3
   Light theme · Vibrant brand colors · Mobile-first
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  /* ── Page backgrounds ── */
  --cvm-bg:           #f4f7fc;
  --cvm-bg-2:         #edf1f9;
  --cvm-bg-3:         #e2e9f5;
  --cvm-bg-4:         #d3ddf0;
  --cvm-bg-card:      #ffffff;

  /* ── Brand / accent colors ── */
  --cvm-cyan:         #0099cc;
  --cvm-cyan-bright:  #00b4d8;
  --cvm-cyan-dim:     rgba(0, 153, 204, 0.09);
  --cvm-cyan-border:  rgba(0, 153, 204, 0.28);
  --cvm-cyan-glow:    rgba(0, 153, 204, 0.20);

  --cvm-blue:         #2563eb;
  --cvm-blue-dim:     rgba(37, 99, 235, 0.09);
  --cvm-purple:       #7c3aed;
  --cvm-purple-dim:   rgba(124, 58, 237, 0.09);
  --cvm-teal:         #0891b2;

  /* ── Status ── */
  --cvm-gold:         #f59e0b;
  --cvm-green:        #10b981;
  --cvm-orange:       #f97316;
  --cvm-red:          #ef4444;

  /* ── Text ── */
  --cvm-text:         #1e293b;
  --cvm-text-muted:   #64748b;
  --cvm-text-dim:     #94a3b8;

  /* ── Borders ── */
  --cvm-border:       rgba(0, 0, 0, 0.07);
  --cvm-border-mid:   rgba(0, 0, 0, 0.12);

  /* ── Header/nav (stays dark for brand) ── */
  --cvm-header-bg:    #0d1a2e;
  --cvm-nav-bg:       #0f1f36;
  --cvm-nav-text:     #b8cfe8;

  /* ── Typography ── */
  --cvm-font-head:    'Montserrat', Arial, sans-serif;
  --cvm-font-body:    'DM Sans', Arial, sans-serif;
  --cvm-radius:       8px;
  --cvm-radius-lg:    12px;
  --cvm-transition:   0.18s ease;
  --cvm-shadow:       0 2px 12px rgba(0, 0, 0, 0.07);
  --cvm-shadow-md:    0 4px 24px rgba(0, 0, 0, 0.10);
  --cvm-shadow-glow:  0 4px 20px rgba(0, 153, 204, 0.20);
}

/* ── Base ──────────────────────────────────────────────────── */
html, body {
  background: var(--cvm-bg) !important;
  color: var(--cvm-text) !important;
  font-family: var(--cvm-font-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased !important;
}

a {
  color: var(--cvm-cyan) !important;
  text-decoration: none !important;
  transition: color var(--cvm-transition) !important;
}
a:hover { color: var(--cvm-blue) !important; text-decoration: none !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cvm-font-head) !important;
  color: var(--cvm-text) !important;
  line-height: 1.3 !important;
}

p { color: var(--cvm-text-muted) !important; margin-bottom: 10px !important; }

/* ── Layout ────────────────────────────────────────────────── */
.center-area {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* ============================================================
   HEADER  (dark navy — brand anchor)
   ============================================================ */
header {
  background: linear-gradient(180deg, #0c1929 0%, var(--cvm-header-bg) 100%) !important;
  border-bottom: 3px solid var(--cvm-cyan) !important;
  padding: 14px 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important;
}

header .center-area {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logo */
header a:first-child { flex-shrink: 0 !important; }
header img {
  height: 64px !important;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  display: block !important;
}

/* Header controls */
.header-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* ── Search bar ─────────────────────────────────────────────── */
.search-bg {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 6px 0 14px !important;
  gap: 8px !important;
  transition: border-color var(--cvm-transition), background var(--cvm-transition) !important;
}
.search-bg:focus-within {
  border-color: var(--cvm-cyan) !important;
  background: rgba(0,180,216,0.10) !important;
  box-shadow: 0 0 0 3px rgba(0,180,216,0.14) !important;
}
.search-bg i.cvm-search-icon {
  color: rgba(255,255,255,0.50) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}
.search-bg .cvm-search-form {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.search-bg .cvm-search-input,
.search-bg input[type="text"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  font-family: var(--cvm-font-body) !important;
  font-size: 14px !important;
  width: 180px !important;
  padding: 10px 4px !important;
  box-shadow: none !important;
}
.search-bg .cvm-search-input::placeholder { color: rgba(255,255,255,0.40) !important; }
.search-bg .btn-group { display: none !important; }
.search-bg .search-block { display: none !important; }

/* ── Language dropdown (in header) ─────────────────────────── */
.lang-box .btn {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #ddeeff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
}
.lang-box .btn:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}

/* ── Account / Login button ─────────────────────────────────── */
.account-box .btn {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.20) !important;
  color: #ddeeff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  letter-spacing: 0.01em !important;
}
.account-box .btn:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.40) !important;
  color: #fff !important;
}

.account-box, .lang-box { display: inline-block !important; }
.header-separator { display: none !important; }

/* ── Cart button ────────────────────────────────────────────── */
.lang-box.pull-right .btn,
.lang-box.pull-right a.btn {
  background: var(--cvm-cyan) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  box-shadow: 0 2px 12px rgba(0,153,204,0.40) !important;
  letter-spacing: 0.02em !important;
}
.lang-box.pull-right .btn:hover,
.lang-box.pull-right a.btn:hover {
  background: var(--cvm-cyan-bright) !important;
  box-shadow: 0 4px 20px rgba(0,153,204,0.55) !important;
  transform: translateY(-1px) !important;
}

/* ── Header dropdowns ───────────────────────────────────────── */
.dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--cvm-border-mid) !important;
  border-radius: var(--cvm-radius) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14) !important;
  padding: 8px 0 !important;
  min-width: 190px !important;
}
.dropdown-menu li a {
  color: #1e293b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
  display: block !important;
  background: transparent !important;
  background-image: none !important;
  transition: background 0.12s, color 0.12s !important;
  filter: none !important;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
  background: #e8f4ff !important;
  background-image: none !important;
  color: var(--cvm-cyan) !important;
  filter: none !important;
}
/* Kill Bootstrap's .active blue pill inside any dropdown */
.dropdown-menu li.active > a,
.dropdown-menu li > a.active {
  background: #dff0ff !important;
  background-image: none !important;
  color: var(--cvm-cyan) !important;
}
.dropdown-menu .divider { background: var(--cvm-border) !important; margin: 6px 0 !important; }
.dropdown-padding { padding: 4px 0 !important; }
.top-style { border-top: 1px solid var(--cvm-border) !important; }

/* Mobile hamburger toggle */
.cvm-nav-toggle {
  display: none !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  border-radius: var(--cvm-radius) !important;
  color: #fff !important;
  cursor: pointer !important;
  padding: 9px 14px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: background var(--cvm-transition) !important;
}
.cvm-nav-toggle:hover {
  background: rgba(255,255,255,0.18) !important;
}

/* ============================================================
   MAIN NAVIGATION  (dark — stays with header)
   ============================================================ */
.wrapper-menu {
  background: var(--cvm-nav-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.20) !important;
}
.menu-bg { background: transparent !important; }
.wrapper-menu nav { padding: 0 !important; }

.wrapper-menu .nav.nav-pills {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
}

/* ── Top-level nav items only (NOT inside .dropdown-menu) ──
   Scoped to  nav > ul > li  so it never bleeds into
   the dropdown column .nav.nav-pills inside .submenu.
   ─────────────────────────────────────────────────────────── */
.wrapper-menu .menu-bg nav > ul > li > a,
.wrapper-menu .menu-bg nav > ul > li > a.dropdown-toggle {
  color: var(--cvm-nav-text) !important;
  font-family: var(--cvm-font-head) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  padding: 18px 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.15s, background 0.15s, border-color 0.15s !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  filter: none !important;
}
.wrapper-menu .menu-bg nav > ul > li > a:hover,
.wrapper-menu .menu-bg nav > ul > li.active > a,
.wrapper-menu .menu-bg nav > ul > li.open > a {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
  background-image: none !important;
  border-bottom-color: var(--cvm-cyan) !important;
  filter: none !important;
}
.wrapper-menu .nav.nav-pills .menu-separator { display: none !important; }

.wrapper-menu .caret {
  border-top-color: currentColor !important;
  opacity: 0.6 !important;
}

/* Nav dropdown panel */
.wrapper-menu .dropdown-menu {
  background: #ffffff !important;
  margin-top: 0 !important;
  border-top: 2px solid var(--cvm-cyan) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

/* ── ORDER / SUPPORT mega-dropdown ─────────────────────────── */
.dropdown-menu.submenu {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-top: 3px solid var(--cvm-cyan) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.15) !important;
  min-width: 500px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* Top label bar */
.submenu h3 {
  flex: 0 0 100% !important;
  width: 100% !important;
  background: linear-gradient(90deg, var(--cvm-cyan-dim), transparent) !important;
  color: var(--cvm-cyan) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  padding: 10px 18px !important;
  margin: 0 0 2px !important;
  font-family: var(--cvm-font-head) !important;
  text-shadow: none !important;
  border-bottom: 1px solid rgba(0,153,204,0.12) !important;
}
/* Flex wrapper for 2-column layout */
.submenu .wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  padding: 10px 12px 0 !important;
  background: transparent !important;
  position: static !important;
  min-height: unset !important;
}
/* Two columns side by side — wide enough to show full link text */
.submenu-account-nav {
  flex: 1 1 48% !important;
  display: block !important;
  min-width: 200px !important;
  margin-top: 0 !important;
  padding-bottom: 8px !important;
}
/* Nav-header (section labels) */
.submenu-account-nav li.nav-header {
  color: var(--cvm-text-dim) !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  padding: 10px 12px 4px !important;
  font-weight: 700 !important;
  font-family: var(--cvm-font-head) !important;
}
/* Dropdown link items — use explicit high-specificity selector
   to beat .wrapper-menu .menu-bg nav > ul > li > a (#b8cfe8 light)
   ─────────────────────────────────────────────────────────────── */
.wrapper-menu .dropdown-menu .submenu-account-nav > li > a,
.dropdown-menu.submenu .submenu-account-nav > li > a,
.submenu-account-nav > li > a {
  color: #1e293b !important;            /* dark navy — always legible */
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: var(--cvm-font-body) !important;
  padding: 10px 16px !important;
  display: block !important;
  border-radius: 6px !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  background-image: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  margin: 2px 6px !important;
  line-height: 1.4 !important;
  transition: background 0.12s, border-color 0.12s, color 0.12s !important;
  filter: none !important;
}
.wrapper-menu .dropdown-menu .submenu-account-nav > li > a:hover,
.dropdown-menu.submenu .submenu-account-nav > li > a:hover,
.submenu-account-nav > li > a:hover,
.wrapper-menu .dropdown-menu .submenu-account-nav > li > a:focus,
.submenu-account-nav > li > a:focus {
  background: #e8f4ff !important;
  background-image: none !important;
  border-left-color: var(--cvm-cyan) !important;
  color: var(--cvm-cyan) !important;
  filter: none !important;
}
/* Kill Bootstrap's #0088cc active pill */
.submenu-account-nav > li.active > a,
.submenu-account-nav > li > a.active {
  background: #dff0ff !important;
  background-image: none !important;
  color: var(--cvm-cyan) !important;
  border-left-color: var(--cvm-cyan) !important;
}
/* Decorative images — remove */
.submenu-order-bg,
.submenu-support-bg,
.submenu-account-bg,
.submenu-services-bg,
.submenu-affiliates-bg { display: none !important; }

/* Proceed to Cart — full-width bottom CTA */
.cart-pos {
  position: static !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  border-top: 1px solid rgba(0,153,204,0.14) !important;
  text-align: center !important;
}
.cart-pos a.btn,
.cart-pos .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  background: linear-gradient(90deg, var(--cvm-cyan) 0%, var(--cvm-blue) 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  font-family: var(--cvm-font-head) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  padding: 14px 20px !important;
  border-radius: 0 0 10px 10px !important;
  border: none !important;
  text-decoration: none !important;
  transition: opacity 0.15s !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.cart-pos a.btn:hover,
.cart-pos .btn:hover {
  opacity: 0.88 !important;
  color: #fff !important;
}
/* Cart icon inside "Proceed to Cart" button */
.cart-pos .icon-c-cart,
.cart-pos [class*="icon-c-cart"],
.cart-pos i[class*="icon"] {
  font-size: 20px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumbs-box {
  background: #fff !important;
  border-bottom: 1px solid var(--cvm-border) !important;
  padding: 10px 0 !important;
}
.breadcrumb {
  background: transparent !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
}
.breadcrumb li, .breadcrumb li a { color: var(--cvm-text-muted) !important; }
.breadcrumb li.active { color: var(--cvm-cyan) !important; font-weight: 600 !important; }
.breadcrumb .divider { color: var(--cvm-text-dim) !important; padding: 0 6px !important; }

/* ============================================================
   MAIN CONTAINER
   ============================================================ */
.main-container {
  padding-top: 32px !important;
  padding-bottom: 48px !important;
  min-height: calc(100vh - 240px) !important;
}
.row.center-area.main-container { width: 100% !important; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  border-radius: var(--cvm-radius) !important;
  border: none !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  margin-bottom: 14px !important;
}
.alert-error, .alert-danger {
  background: #fff5f5 !important;
  border-left: 4px solid var(--cvm-red) !important;
  color: #c0392b !important;
}
.alert-info {
  background: #f0f8ff !important;
  border-left: 4px solid var(--cvm-cyan) !important;
  color: var(--cvm-text) !important;
}
.alert-success {
  background: #f0fdf6 !important;
  border-left: 4px solid var(--cvm-green) !important;
  color: #065f46 !important;
}
.alert .close { color: inherit !important; opacity: 0.4 !important; text-shadow: none !important; }
.alert .close:hover { opacity: 0.8 !important; }

/* ── Aside / Submenu ─────────────────────────────────────────── */
#submenu {
  background: var(--cvm-bg-card) !important;
  border: 1px solid var(--cvm-border) !important;
  border-radius: var(--cvm-radius-lg) !important;
  padding: 8px 0 !important;
  margin-bottom: 22px !important;
  box-shadow: var(--cvm-shadow) !important;
}
#submenu .nav > li > a {
  color: var(--cvm-text-muted) !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  transition: all var(--cvm-transition) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#submenu .nav > li > a:hover,
#submenu .nav > li.active > a {
  color: var(--cvm-cyan) !important;
  background: var(--cvm-cyan-dim) !important;
  border-left-color: var(--cvm-cyan) !important;
}
#submenu .nav-header {
  color: var(--cvm-text-dim) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 12px 18px 4px !important;
}

/* ============================================================
   WBOX — Content Cards
   ============================================================ */
.wbox, .newbox, .newbox1 {
  background: var(--cvm-bg-card) !important;
  border: 1px solid var(--cvm-border) !important;
  border-radius: var(--cvm-radius-lg) !important;
  box-shadow: var(--cvm-shadow) !important;
  margin-bottom: 22px !important;
  overflow: hidden !important;
}
.wbox_header, .newbox_header {
  background: linear-gradient(135deg, #f8faff 0%, #eef3ff 100%) !important;
  border-bottom: 1px solid var(--cvm-border) !important;
  border-top: 3px solid var(--cvm-cyan) !important;
  color: var(--cvm-text) !important;
  font-family: var(--cvm-font-head) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 15px 20px !important;
}
.wbox_header a, .wbox_header .btn { color: var(--cvm-cyan) !important; }
.wbox_content { padding: 20px !important; color: var(--cvm-text) !important; }

/* ============================================================
   ARTICLES — Dashboard Sections
   ============================================================ */
article {
  background: var(--cvm-bg-card) !important;
  border: 1px solid var(--cvm-border) !important;
  border-radius: var(--cvm-radius-lg) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--cvm-shadow) !important;
  overflow: hidden !important;
}
article h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--cvm-text) !important;
  border-bottom: 2px solid var(--cvm-bg-3) !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
article h2 [class*="icon-"] { color: var(--cvm-cyan) !important; font-size: 18px !important; }

/* ============================================================
   SERVICE BOXES — Dashboard Stats
   ============================================================ */
.services-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 0 !important;
}
.service-box {
  flex: 1 1 200px !important;
  background: #fff !important;
  border: 1px solid var(--cvm-border) !important;
  border-top: 3px solid var(--cvm-cyan) !important;
  border-radius: var(--cvm-radius) !important;
  overflow: hidden !important;
  transition: box-shadow var(--cvm-transition), transform var(--cvm-transition) !important;
  float: none !important;
  margin: 0 !important;
  width: auto !important;
}
/* Alternate accent colors for visual variety */
.service-box:nth-child(2) { border-top-color: var(--cvm-blue) !important; }
.service-box:nth-child(3) { border-top-color: var(--cvm-purple) !important; }
.service-box:nth-child(4) { border-top-color: var(--cvm-teal) !important; }
.service-box:nth-child(5) { border-top-color: var(--cvm-orange) !important; }
.service-box:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
  transform: translateY(-2px) !important;
}
.service-box-top { padding: 22px 20px 16px !important; }
.service-box-top h4 {
  color: var(--cvm-text-dim) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin: 10px 0 4px !important;
  font-weight: 600 !important;
}
.service-count {
  color: var(--cvm-cyan) !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  font-family: var(--cvm-font-head) !important;
  line-height: 1 !important;
  display: block !important;
}
.service-box:nth-child(2) .service-count { color: var(--cvm-blue) !important; }
.service-box:nth-child(3) .service-count { color: var(--cvm-purple) !important; }
.service-box:nth-child(4) .service-count { color: var(--cvm-teal) !important; }
.service-box:nth-child(5) .service-count { color: var(--cvm-orange) !important; }
.service-title, .service-order-more {
  color: var(--cvm-text-muted) !important;
  font-size: 13px !important;
  margin: 5px 0 0 !important;
  display: block !important;
}
.service-box-bottom {
  background: var(--cvm-bg) !important;
  border-top: 1px solid var(--cvm-border) !important;
  padding: 14px 18px !important;
}
.service-border { display: flex !important; justify-content: center !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border-radius: var(--cvm-radius) !important;
  font-family: var(--cvm-font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 9px 20px !important;
  transition: all var(--cvm-transition) !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Primary / Cyan */
.c-orange-btn, .btn-primary {
  background: var(--cvm-cyan) !important;
  color: #fff !important;
  border-color: var(--cvm-cyan) !important;
  box-shadow: 0 2px 10px rgba(0,153,204,0.25) !important;
}
.c-orange-btn:hover, .btn-primary:hover {
  background: var(--cvm-blue) !important;
  color: #fff !important;
  border-color: var(--cvm-blue) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.30) !important;
  transform: translateY(-1px) !important;
}

/* Green */
.c-green-btn, .btn-success {
  background: var(--cvm-green) !important;
  color: #fff !important;
  border-color: var(--cvm-green) !important;
  box-shadow: 0 2px 10px rgba(16,185,129,0.25) !important;
}
.c-green-btn:hover, .btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 16px rgba(16,185,129,0.35) !important;
  transform: translateY(-1px) !important;
}

/* White/Ghost */
.c-white-btn {
  background: #fff !important;
  color: var(--cvm-text) !important;
  border: 1px solid var(--cvm-border-mid) !important;
}
.c-white-btn:hover {
  background: var(--cvm-cyan-dim) !important;
  border-color: var(--cvm-cyan-border) !important;
  color: var(--cvm-cyan) !important;
}

/* Grey */
.c-grey-btn, .btn-default, .btn-inverse {
  background: #f1f5f9 !important;
  color: var(--cvm-text-muted) !important;
  border: 1px solid var(--cvm-border-mid) !important;
}
.c-grey-btn:hover {
  background: #e2e8f0 !important;
  color: var(--cvm-text) !important;
}

/* Cart */
.c-cart-btn {
  background: var(--cvm-cyan) !important;
  color: #fff !important;
  border-color: var(--cvm-cyan) !important;
}

/* Mini */
.btn-mini, .btn-sm {
  padding: 5px 12px !important;
  font-size: 12px !important;
}

/* Danger / Warning */
.btn-danger { background: var(--cvm-red) !important; border-color: var(--cvm-red) !important; color: #fff !important; }
.btn-danger:hover { background: #dc2626 !important; }
.btn-warning { background: var(--cvm-gold) !important; border-color: var(--cvm-gold) !important; color: #fff !important; }

/* ============================================================
   TABLES
   ============================================================ */
.table, table.styled-table, table.fullscreen {
  color: var(--cvm-text) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
.table th, table.styled-table th, table.fullscreen th {
  background: #f8faff !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid var(--cvm-border-mid) !important;
  color: var(--cvm-text-muted) !important;
  font-family: var(--cvm-font-head) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 13px 16px !important;
  font-weight: 700 !important;
}
.table td, table.styled-table td {
  border: none !important;
  border-bottom: 1px solid var(--cvm-border) !important;
  color: var(--cvm-text) !important;
  padding: 13px 16px !important;
  vertical-align: middle !important;
  font-size: 14px !important;
}
tr.styled-row:hover td { background: #f8fbff !important; }
tr.empty-row { display: none !important; }

.table-details {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--cvm-border) !important;
  margin-bottom: 14px !important;
}
.detailed-info { text-align: center !important; min-width: 80px !important; }
.detailed-info span {
  color: var(--cvm-cyan) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  font-family: var(--cvm-font-head) !important;
  display: block !important;
  line-height: 1.1 !important;
}
.detailed-info p { color: var(--cvm-text-muted) !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; margin: 4px 0 0 !important; }

.right-btns { margin-left: auto !important; }
.td-rel { position: relative !important; }
.left-row-side { position: absolute !important; left: -16px !important; top: 0 !important; bottom: 0 !important; width: 4px !important; border-radius: 0 2px 2px 0 !important; }
.right-row-side { position: absolute !important; right: -16px !important; top: 0 !important; bottom: 0 !important; width: 4px !important; border-radius: 2px 0 0 2px !important; }

.invoices-box, .table-responsive-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── Status Labels ──────────────────────────────────────────── */
.label-Answered, .label-Active, .label-Client-Reply, .label-Paid {
  background: #d1fae5 !important; color: #065f46 !important;
  border-radius: 5px !important; padding: 3px 10px !important;
  font-size: 12px !important; font-weight: 700 !important;
}
.label-Unpaid, .label-Expired {
  background: #fee2e2 !important; color: #991b1b !important;
  border-radius: 5px !important; padding: 3px 10px !important;
  font-size: 12px !important; font-weight: 700 !important;
}
.label-In-Progress {
  background: #fef3c7 !important; color: #92400e !important;
  border-radius: 5px !important; padding: 3px 10px !important;
  font-size: 12px !important; font-weight: 700 !important;
}
.label-Open, .label-Pending {
  background: #dbeafe !important; color: #1e40af !important;
  border-radius: 5px !important; padding: 3px 10px !important;
  font-size: 12px !important; font-weight: 700 !important;
}
.Unpaid-label   { color: var(--cvm-red) !important; font-weight: 700 !important; }
.Open-label     { color: var(--cvm-blue) !important; font-weight: 700 !important; }
.Answered-label { color: var(--cvm-green) !important; font-weight: 700 !important; }
.Unpaid-row   { background: var(--cvm-red) !important; }
.Open-row     { background: var(--cvm-blue) !important; }
.Answered-row { background: var(--cvm-green) !important; }
.Paid-row     { background: var(--cvm-green) !important; }
.Active-row   { background: var(--cvm-green) !important; }

.icon-link { color: var(--cvm-cyan) !important; font-size: 15px !important; opacity: 0.7 !important; }
.icon-link:hover { opacity: 1 !important; color: var(--cvm-blue) !important; }

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs {
  border-bottom: 2px solid var(--cvm-border-mid) !important;
  display: flex !important;
  flex-wrap: wrap !important;
}
.nav-tabs > li > a {
  background: #f1f5f9 !important;
  border: 1px solid var(--cvm-border-mid) !important;
  border-bottom: none !important;
  color: var(--cvm-text-muted) !important;
  border-radius: var(--cvm-radius) var(--cvm-radius) 0 0 !important;
  margin-right: 4px !important;
  margin-bottom: -2px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  transition: all var(--cvm-transition) !important;
}
.nav-tabs > li > a:hover { background: #e8eef8 !important; color: var(--cvm-cyan) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  background: #fff !important;
  border-bottom: 2px solid #fff !important;
  color: var(--cvm-cyan) !important;
}
.nav-tabs > li.custom-tab > a { color: var(--cvm-green) !important; }
.nav-tabs > li.custom-tab > a:hover { color: #059669 !important; }
.table-nav { margin: 0 !important; border-bottom: none !important; }
.table-nav .tab-left, .table-nav .tab-right { display: none !important; }
.tab-content { padding-top: 14px !important; overflow: visible !important; }

/* ============================================================
   FORMS
   ============================================================ */
label, label.styled {
  color: var(--cvm-text-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  display: block !important;
}
input.styled,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select.styled,
select,
textarea {
  background: #fff !important;
  border: 1.5px solid #d1d9e6 !important;
  border-radius: var(--cvm-radius) !important;
  color: var(--cvm-text) !important;
  padding: 11px 15px !important;
  font-family: var(--cvm-font-body) !important;
  font-size: 15px !important;
  transition: border-color var(--cvm-transition), box-shadow var(--cvm-transition) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
input.styled:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--cvm-cyan) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,153,204,0.12) !important;
  background: #fff !important;
}
input[type="checkbox"],
input[type="radio"] { accent-color: var(--cvm-cyan) !important; width: auto !important; }

.form-actions {
  background: #f8faff !important;
  border-top: 1px solid var(--cvm-border) !important;
  padding: 16px 20px !important;
  margin-top: 20px !important;
  border-radius: 0 0 var(--cvm-radius) var(--cvm-radius) !important;
  overflow: hidden !important;
}
select option { background: #fff !important; color: var(--cvm-text) !important; }

/* ============================================================
   ROOT / HOME PAGE
   ============================================================ */
section.root h1 {
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-bottom: 32px !important;
  color: var(--cvm-text) !important;
  text-align: center !important;
  letter-spacing: -0.02em !important;
}

/* Portal cards grid */
.p15 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  padding: 0 0 28px !important;
}
@media (max-width: 900px) {
  .p15 { grid-template-columns: 1fr !important; }
}

.root-item {
  background: #fff !important;
  border: 1px solid var(--cvm-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  box-shadow: var(--cvm-shadow) !important;
  position: relative !important;
}
/* Cyan top accent on first card */
.root-item:nth-child(1)::before {
  content: "" !important;
  display: block !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--cvm-cyan), var(--cvm-cyan-bright)) !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
}
.root-item:nth-child(2)::before {
  content: "" !important;
  display: block !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--cvm-blue), var(--cvm-purple)) !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
}
.root-item:nth-child(3)::before {
  content: "" !important;
  display: block !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--cvm-purple), var(--cvm-teal)) !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
}
.root-item:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.12) !important;
  transform: translateY(-4px) !important;
}
.root-item a {
  color: var(--cvm-text) !important;
  display: flex !important;
  align-items: center !important;
  padding: 32px 26px !important;
  gap: 22px !important;
  text-decoration: none !important;
}
.root-item a:hover { color: var(--cvm-text) !important; }

/* Icon circle */
.root-item-bg {
  flex-shrink: 0 !important;
  width: 58px !important;
  height: 58px !important;
  background: var(--cvm-cyan-dim) !important;
  border: 1.5px solid var(--cvm-cyan-border) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  transition: background 0.2s, border-color 0.2s !important;
  color: var(--cvm-cyan) !important;
}
.root-item:nth-child(2) .root-item-bg {
  background: var(--cvm-blue-dim) !important;
  border-color: rgba(37,99,235,0.28) !important;
  color: var(--cvm-blue) !important;
}
.root-item:nth-child(3) .root-item-bg {
  background: var(--cvm-purple-dim) !important;
  border-color: rgba(124,58,237,0.28) !important;
  color: var(--cvm-purple) !important;
}
.root-item:hover .root-item-bg {
  background: rgba(0,153,204,0.14) !important;
  border-color: var(--cvm-cyan) !important;
}

/* Text */
.item-info h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--cvm-text) !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em !important;
}
.item-info p {
  font-size: 13px !important;
  color: var(--cvm-text-muted) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ── Announcements ──────────────────────────────────────────── */
.shadow { display: none !important; }
.news-container {
  background: #fff !important;
  border: 1px solid var(--cvm-border) !important;
  border-radius: var(--cvm-radius) !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
  transition: box-shadow var(--cvm-transition) !important;
}
.news-container:hover { box-shadow: var(--cvm-shadow-md) !important; }
.news-container .date {
  flex-shrink: 0 !important;
  background: var(--cvm-cyan-dim) !important;
  border-radius: var(--cvm-radius) !important;
  padding: 12px 14px !important;
  text-align: center !important;
  min-width: 56px !important;
}
.news-container .date p { margin: 0 !important; font-size: 11px !important; color: var(--cvm-text-dim) !important; }
.news-container .date .day { font-size: 24px !important; font-weight: 700 !important; font-family: var(--cvm-font-head) !important; color: var(--cvm-cyan) !important; line-height: 1 !important; }
.news-body h4 a { color: var(--cvm-text) !important; font-weight: 700 !important; font-size: 15px !important; }
.news-body h4 a:hover { color: var(--cvm-cyan) !important; }
.news-body p { color: var(--cvm-text-muted) !important; font-size: 14px !important; }
.news-btns { padding-top: 14px !important; display: flex !important; gap: 10px !important; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
#loginbox_container {
  max-width: 480px !important;
  margin: 48px auto !important;
}
#loginbox_container .wbox { margin: 0 !important; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: linear-gradient(180deg, #0c1929 0%, #0a1520 100%) !important;
  border-top: 3px solid var(--cvm-cyan) !important;
  color: #8aacc8 !important;
  font-size: 14px !important;
  padding: 32px 0 22px !important;
  margin-top: 48px !important;
  text-shadow: none !important;
}
footer a { color: #8aacc8 !important; }
footer a:hover { color: var(--cvm-cyan) !important; }
.footer-underline { display: none !important; }

.footer-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}
.footer-nav li a {
  color: #8aacc8 !important;
  padding: 6px 14px !important;
  border-radius: var(--cvm-radius) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all var(--cvm-transition) !important;
}
.footer-nav li a:hover {
  background: rgba(0,153,204,0.12) !important;
  color: var(--cvm-cyan) !important;
}
.footer-copyrights { color: #5a7a9a !important; font-size: 13px !important; padding-top: 4px !important; }
.footer-copyrights a { color: var(--cvm-cyan) !important; }

/* ============================================================
   MISC
   ============================================================ */
.ribbon { background: var(--cvm-cyan) !important; color: #fff !important; font-weight: 700 !important; }
.badge { background: var(--cvm-cyan) !important; color: #fff !important; font-weight: 700 !important; }
.progress { background: var(--cvm-bg-3) !important; border-radius: 4px !important; }
.bar, .progress-bar { background: var(--cvm-cyan) !important; }
.well { background: #f8faff !important; border: 1px solid var(--cvm-border-mid) !important; box-shadow: none !important; border-radius: var(--cvm-radius) !important; color: var(--cvm-text) !important; }
hr { border-color: var(--cvm-border) !important; border-top: 1px solid var(--cvm-border) !important; }
code, pre { background: #f1f5f9 !important; color: var(--cvm-blue) !important; border-color: var(--cvm-border) !important; border-radius: var(--cvm-radius) !important; }

.pagination > li > a, .pagination > li > span { background: #fff !important; border-color: var(--cvm-border-mid) !important; color: var(--cvm-text) !important; }
.pagination > li > a:hover { background: var(--cvm-cyan-dim) !important; color: var(--cvm-cyan) !important; border-color: var(--cvm-cyan-border) !important; }
.pagination > .active > a { background: var(--cvm-cyan) !important; border-color: var(--cvm-cyan) !important; color: #fff !important; }

.darkshadow { background: #fff !important; border: 1px solid var(--cvm-border-mid) !important; box-shadow: var(--cvm-shadow) !important; }
#welcomeback { background: #f0f8ff !important; border: 1px solid var(--cvm-cyan-border) !important; border-radius: var(--cvm-radius) !important; padding: 14px 18px !important; margin-bottom: 18px !important; }

.modal-backdrop { background: rgba(0,0,0,0.5) !important; }
.modal { background: #fff !important; border: 1px solid var(--cvm-border-mid) !important; border-radius: var(--cvm-radius-lg) !important; color: var(--cvm-text) !important; }
.modal-header { background: linear-gradient(135deg, #f8faff, #eef3ff) !important; border-bottom: 1px solid var(--cvm-border) !important; border-top: 3px solid var(--cvm-cyan) !important; }
.modal-header h3 { color: var(--cvm-text) !important; }
.modal-footer { background: #f8faff !important; border-top: 1px solid var(--cvm-border) !important; }
.modal .close { color: var(--cvm-text) !important; text-shadow: none !important; opacity: 0.4 !important; }
.modal .close:hover { opacity: 0.8 !important; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cvm-cyan); }

/* ============================================================
   RESPONSIVE — TABLET  (768px – 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .center-area { max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; }
  header img { height: 54px !important; }
  .wrapper-menu .nav.nav-pills > li > a { padding: 14px 14px !important; font-size: 12px !important; }
  .search-bg .search-block input[type=text] { width: 110px !important; }
  .service-box { flex: 1 1 180px !important; }
  .root-item { flex: 1 1 200px !important; }
}

/* ============================================================
   RESPONSIVE — MOBILE  (max 767px)
   ============================================================ */
@media (max-width: 767px) {

  html, body { font-size: 14px !important; }

  .center-area { padding-left: 14px !important; padding-right: 14px !important; }

  header { padding: 10px 0 !important; }
  header .center-area {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }
  header img { height: 48px !important; }

  /* Hide desktop controls on mobile */
  .search-bg   { display: none !important; }
  .account-box { display: none !important; }
  .lang-box    { display: none !important; }
  /* Keep cart button */
  .lang-box.pull-right { display: inline-block !important; }

  /* Show hamburger */
  .cvm-nav-toggle { display: inline-flex !important; align-items: center !important; }

  /* Mobile nav */
  .wrapper-menu .center-area { padding: 0 !important; }
  .wrapper-menu nav { display: none; }
  .wrapper-menu nav.cvm-nav-open { display: block !important; }

  .wrapper-menu .nav.nav-pills { flex-direction: column !important; }
  .wrapper-menu .nav.nav-pills > li {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  .wrapper-menu .nav.nav-pills > li > a {
    border-bottom: none !important;
    padding: 15px 20px !important;
    font-size: 14px !important;
    justify-content: flex-start !important;
  }

  /* Mobile dropdowns */
  .wrapper-menu .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.04) !important;
    border: none !important;
    border-left: 3px solid var(--cvm-cyan-border) !important;
    border-radius: 0 !important;
    border-top: none !important;
    padding: 4px 0 4px 10px !important;
    margin: 0 !important;
    display: none !important;
  }
  .wrapper-menu li.open .dropdown-menu { display: block !important; }
  .wrapper-menu .dropdown-menu li a {
    color: var(--cvm-nav-text) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  .wrapper-menu .dropdown-menu li a:hover {
    background: rgba(0,153,204,0.10) !important;
    color: var(--cvm-cyan) !important;
  }

  /* Bootstrap row fix */
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  [class*="span"] {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-bottom: 14px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Service boxes */
  .services-container { flex-direction: column !important; gap: 12px !important; }
  .service-box { flex: none !important; width: 100% !important; }
  .service-box:hover { transform: none !important; }

  /* Root page */
  .p15 { flex-direction: column !important; gap: 12px !important; }
  .root-item { flex: none !important; width: 100% !important; }
  .root-item:hover { transform: none !important; }
  .root-item a { padding: 20px 18px !important; gap: 16px !important; }

  /* Tables */
  article .invoices-box, .invoices-box { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table { min-width: 500px !important; }

  /* Forms */
  .form-actions .left,
  .form-actions .right {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  .log-in-form .btn,
  .log-in-form button { width: 100% !important; justify-content: center !important; }

  /* Login */
  #loginbox_container { margin: 20px 0 !important; }

  /* News */
  .news-container { flex-direction: column !important; gap: 12px !important; }

  /* Tabs */
  .nav-tabs { flex-wrap: wrap !important; }
  .nav-tabs > li > a { padding: 8px 13px !important; font-size: 12px !important; }

  /* Cards */
  article { padding: 18px !important; }
  .wbox_content { padding: 16px !important; }
  .table-details { gap: 16px !important; flex-wrap: wrap !important; }

  /* Footer */
  .footer-nav { flex-direction: column !important; gap: 0 !important; }
  .footer-copyrights { float: none !important; margin-top: 16px !important; padding-top: 14px !important; border-top: 1px solid rgba(255,255,255,0.07) !important; }

  /* Main container */
  .main-container { padding-top: 18px !important; padding-bottom: 32px !important; }
  #submenu { margin-bottom: 18px !important; }

  /* Sidebar + content */
  .fullside #submenu { width: 100% !important; float: none !important; margin-right: 0 !important; }
  .fullside section,
  .fullside > section { width: 100% !important; float: none !important; margin-left: 0 !important; }
  .emptyside > section { width: 100% !important; }

  section { min-width: unset !important; width: 100% !important; max-width: 100% !important; }
  aside#submenu { width: 100% !important; float: none !important; margin-right: 0 !important; }

  .main-container { overflow-x: hidden !important; }
  .row { overflow-x: hidden !important; }
}

/* ============================================================
   CLIENTAREA.CSS HARD OVERRIDES
   ============================================================ */

header {
  height: auto !important;
  min-height: unset !important;
}

.wrapper-menu,
.menu-bg {
  height: auto !important;
  min-height: unset !important;
  overflow: visible !important;
  position: relative !important;
}
.wrapper-menu { z-index: 200 !important; }

.search-bg {
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  box-sizing: border-box !important;
}

.account-box,
.lang-box {
  height: auto !important;
  min-height: unset !important;
  margin-top: 0 !important;
}

.header-controls > * {
  float: none !important;
  vertical-align: middle !important;
}
.header-controls .btn-group {
  display: inline-flex !important;
  align-items: center !important;
}

.drop-submenu.open > a,
.drop-submenu:hover > a,
.nav.nav-pills .dropdown.open > a {
  background: rgba(255,255,255,0.08) !important;
  background-image: none !important;
  filter: none !important;
  color: #fff !important;
}

.drop-submenu .dropdown-menu:after {
  border-bottom-color: #ffffff !important;
}

.dropdown-menu {
  position: absolute !important;
  z-index: 1000 !important;
}
.wrapper-menu .dropdown-menu { z-index: 900 !important; }

.wrapper-menu,
.wrapper-menu .menu-bg,
.wrapper-menu nav,
.wrapper-menu .nav.nav-pills {
  overflow: visible !important;
}

.center-area {
  width: 100% !important;
  max-width: 1280px !important;
  box-sizing: border-box !important;
}

.row.center-area.main-container {
  overflow: hidden !important;
}

/* ── Products page — override inline styles ── */
.product-list,
.product-list .product-item,
.product-list .panel,
.product-list .panel-default,
.product-list .panel-body,
.panel-group,
.panel-default,
.panel-body {
  background: #fff !important;
  color: var(--cvm-text) !important;
  border-color: var(--cvm-border-mid) !important;
}
.panel-heading, .panel-title {
  background: #f8faff !important;
  color: var(--cvm-text) !important;
  border-color: var(--cvm-border) !important;
}
.product-price,
[style*="color: #"] {
  color: inherit;
}
/* Brutal override for inline color/background styles on product cards */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"] {
  background: #fff !important;
  color: var(--cvm-text) !important;
}
[style*="background:#f"],
[style*="background: #f"] {
  background: var(--cvm-bg) !important;
  color: var(--cvm-text) !important;
}

/* ============================================================
   BUG FIXES — v3.1
   ============================================================ */

/* ── FIX 1: cvm-mobile-search removed from mainmenu.tpl.
   This rule kept as safety net in case it ever re-appears.
   ─────────────────────────────────────────────────────────── */
.cvm-mobile-search { display: none !important; }

/* ── FIX 2: Bootstrap .nav-stacked borders in dropdowns ─────
   Bootstrap 2 adds clearfix pseudo-elements and border-top
   between stacked items. These render visible space even when
   the <ul> has no real children (only whitespace from Smarty).
   ─────────────────────────────────────────────────────────── */
.dropdown-menu .nav-stacked,
.submenu .nav-stacked {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dropdown-menu .nav-stacked > li + li,
.submenu .nav-stacked > li + li {
  border-top: none !important;
  margin-top: 0 !important;
}
/* Remove Bootstrap clearfix table pseudo-elements height */
.submenu .submenu-account-nav::before,
.submenu .submenu-account-nav::after {
  display: none !important;
  content: none !important;
}
/* Nuke any Bootstrap-injected border on pills inside dropdown */
.dropdown-menu .nav-pills > li > a,
.submenu .nav-pills > li > a {
  border: none !important;
  background: transparent !important;
}
/* Collapse empty column: if the <ul> has no <li> children,
   shrink it to zero so it leaves no visual gap.
   Chrome 105+ supports :has() */
.submenu .submenu-account-nav:not(:has(> li)) {
  flex: 0 0 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Fallback for older browsers: rely on min-height 0 + no border */
.submenu .submenu-account-nav {
  border: none !important;
  outline: none !important;
  list-style: none !important;
  min-height: 0 !important;
}

/* ── FIX 3: clientarea.css nav height bounce + blue gradient flash
   clientarea.css sets:
     .menu-bg nav > ul > li          { height: 62px }
     .menu-bg nav > ul > li:hover    { height: 100px }  ← causes layout jump
     .menu-bg nav > ul > li > a:hover { background-image: linear-gradient(#67bdff,#0c88e6); filter:... }
     .drop-submenu.open > a          { background-image: linear-gradient !important }
   All of these must be overridden.
   ─────────────────────────────────────────────────────────── */

/* Kill the height jump (the "bounce") */
.menu-bg nav > ul > li,
.menu-bg nav > ul > li:hover,
.wrapper-menu .nav.nav-pills > li,
.wrapper-menu .nav.nav-pills > li:hover {
  height: auto !important;
  min-height: 0 !important;
}
/* Nuke the blue gradient + filter on nav link hover */
.menu-bg nav > ul > li > a,
.menu-bg nav > ul > li > a:hover,
.menu-bg nav > ul > li > a:focus,
.menu-bg nav ul li a.active {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  zoom: normal !important;
}
/* Re-apply our desired hover state cleanly (top-level only) */
.wrapper-menu .menu-bg nav > ul > li > a:hover,
.wrapper-menu .menu-bg nav > ul > li.open > a,
.wrapper-menu .menu-bg nav > ul > li.active > a {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
  background-image: none !important;
  border-bottom: 3px solid var(--cvm-cyan) !important;
  filter: none !important;
}
/* Kill open/active gradient from clientarea.css */
.drop-submenu.open > a,
.drop-submenu:hover > a,
.nav.nav-pills .dropdown.open > a,
.drop-submenu.open > a:hover {
  background: rgba(255,255,255,0.08) !important;
  background-image: none !important;
  background-color: rgba(255,255,255,0.08) !important;
  filter: none !important;
  -webkit-filter: none !important;
  color: #fff !important;
  border-bottom: 3px solid var(--cvm-cyan) !important;
}

/* nav_resize() width fix */
.wrapper-menu,
.wrapper-menu .menu-bg {
  width: 100% !important;
  max-width: 100% !important;
}
.wrapper-menu nav.center-area {
  display: block !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.wrapper-menu .nav.nav-pills {
  width: 100% !important;
}

/* ── FIX 4: Ensure submenu wrapper h3 stays full-width ──────
   Without this, h3 sits beside the ul columns instead of
   spanning the full dropdown width.
   ─────────────────────────────────────────────────────────── */
.submenu .wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
}
.submenu .wrapper > h3 {
  flex: 0 0 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.submenu .wrapper > .cart-pos {
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* ── FIX 5: Breadcrumb strip full-width background ──────────
   The .breadcrumbs-box doesn't have a wrapping full-width div,
   so its background bleeds correctly only if it's block.
   ─────────────────────────────────────────────────────────── */
.breadcrumbs-box {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Remove double padding: breadcrumbs-box already has .center-area */
.breadcrumbs-box.center-area {
  max-width: 100% !important;
}

/* ── FIX 6: section tag min-width from clientarea.css ───────
   clientarea.css sets section { min-width: 678px } which
   breaks mobile. The global override is in the main block but
   repeat here to ensure it wins over any later-loaded sheet.
   ─────────────────────────────────────────────────────────── */
section {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ── FIX 7: Belt-and-suspenders — hide any stray form inside
   the nav wrapper that might be injected by HostBill plugins.
   ─────────────────────────────────────────────────────────── */
.wrapper-menu > .menu-bg > nav > form {
  display: none !important;
}