/*!
 * Velocity Hosting — WHMCS Dark Theme
 * Built on top of Twenty-One
 * velocity.css v1.0.0
 */

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

/* ═══════════════════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════════════════ */
:root {
  --vel-bg:           #0f1117;
  --vel-nav:          #13161f;
  --vel-card:         #181c27;
  --vel-card-hover:   #1c2030;
  --vel-input:        #141824;
  --vel-border:       rgba(255,255,255,0.07);
  --vel-border-hover: rgba(255,255,255,0.13);
  --vel-accent:       #3b9eff;
  --vel-accent-btn:   #2d8ef0;
  --vel-accent-glow:  rgba(59,158,255,0.15);
  --vel-teal:         #00c9a7;
  --vel-teal-bg:      rgba(0,201,167,0.12);
  --vel-red:          #ef4444;
  --vel-red-bg:       rgba(239,68,68,0.12);
  --vel-yellow:       #eab308;
  --vel-yellow-bg:    rgba(234,179,8,0.12);
  --vel-green:        #22c55e;
  --vel-green-bg:     rgba(34,197,94,0.12);
  --vel-text-1:       #e8ecf4;
  --vel-text-2:       #8b95aa;
  --vel-text-3:       #4d5870;
  --vel-radius:       10px;
  --vel-radius-lg:    14px;
  --vel-radius-xl:    18px;
  --vel-shadow:       0 4px 24px rgba(0,0,0,0.45);
}

/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: var(--vel-bg) !important;
  color: var(--vel-text-1) !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--vel-bg); }
::-webkit-scrollbar-thumb { background: #252d42; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #303a52; }

/* Typography */
h1,h2,h3,h4,h5,h6 { color: var(--vel-text-1) !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; }
p { color: var(--vel-text-2) !important; }
a { color: var(--vel-accent) !important; }
a:hover { color: #fff !important; text-decoration: none !important; }
.text-muted { color: var(--vel-text-3) !important; }
small, .small { color: var(--vel-text-3) !important; }

/* ═══════════════════════════════════════════════════════
   TOPBAR (logged-in user strip)
═══════════════════════════════════════════════════════ */
.topbar {
  background: #0c0f18 !important;
  border-bottom: 1px solid var(--vel-border) !important;
  padding: 6px 0 !important;
}

.topbar .btn {
  color: var(--vel-text-3) !important;
  font-size: 12px !important;
  background: none !important;
  border: none !important;
}

.topbar .btn:hover { color: var(--vel-text-1) !important; }

.topbar .btn-active-client {
  color: var(--vel-text-2) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

.input-group.active-client .input-group-text {
  background: transparent !important;
  border-color: var(--vel-border) !important;
  color: var(--vel-text-3) !important;
  font-size: 12px !important;
}

/* ═══════════════════════════════════════════════════════
   HEADER / NAVBAR
═══════════════════════════════════════════════════════ */
#header.header {
  background: var(--vel-nav) !important;
  border-bottom: 1px solid var(--vel-border) !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Top logo bar */
.navbar.navbar-light {
  background: var(--vel-nav) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--vel-border) !important;
}

.navbar-brand { color: var(--vel-text-1) !important; }
.navbar-brand .logo-img { max-height: 34px !important; }

/* Search bar */
.navbar .input-group.search .form-control {
  background: var(--vel-input) !important;
  border-color: var(--vel-border) !important;
  color: var(--vel-text-1) !important;
  font-size: 13px !important;
}

.navbar .input-group.search .form-control::placeholder { color: var(--vel-text-3) !important; }

.navbar .input-group.search .btn {
  background: var(--vel-input) !important;
  border-color: var(--vel-border) !important;
  color: var(--vel-text-3) !important;
}

/* Cart button */
.navbar .cart-btn { color: var(--vel-text-2) !important; }
.navbar .cart-btn .badge { background: var(--vel-accent-btn) !important; }

/* Hamburger */
.navbar .btn[data-toggle="collapse"] { color: var(--vel-text-2) !important; }

/* Main nav bar */
.navbar.main-navbar-wrapper,
.navbar.navbar-expand-xl.main-navbar-wrapper {
  background: var(--vel-nav) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--vel-border) !important;
  min-height: 48px !important;
  padding: 0 !important;
}

/* Nav links */
#nav .nav-item > a,
.navbar-nav .nav-item > a,
.navbar-nav .nav-link {
  color: var(--vel-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  border-radius: var(--vel-radius) !important;
  transition: all 0.18s !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#nav .nav-item > a:hover,
.navbar-nav .nav-item > a:hover,
.navbar-nav .nav-link:hover {
  color: var(--vel-text-1) !important;
  background: rgba(255,255,255,0.06) !important;
  text-decoration: none !important;
}

#nav .nav-item.active > a,
.navbar-nav .nav-item.active > a {
  color: var(--vel-text-1) !important;
  background: rgba(59,158,255,0.1) !important;
}

/* Dropdown */
.navbar .dropdown-menu {
  background: #1c2030 !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  padding: 6px !important;
  margin-top: 4px !important;
}

.navbar .dropdown-item {
  color: var(--vel-text-2) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  transition: all 0.15s !important;
}

.navbar .dropdown-item:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--vel-text-1) !important;
}

.navbar .dropdown-divider { border-color: var(--vel-border) !important; }

/* ═══════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════ */
.master-breadcrumb {
  background: transparent !important;
  border-bottom: 1px solid var(--vel-border) !important;
  padding: 8px 0 !important;
}

.breadcrumb {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.breadcrumb-item a { color: var(--vel-text-3) !important; font-size: 12.5px !important; }
.breadcrumb-item.active { color: var(--vel-text-2) !important; font-size: 12.5px !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--vel-text-3) !important; }

/* ═══════════════════════════════════════════════════════
   MAIN BODY / LAYOUT
═══════════════════════════════════════════════════════ */
#main-body { background: var(--vel-bg) !important; padding: 24px 0 !important; }
.primary-bg-color { background: var(--vel-bg) !important; }

/* ═══════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════ */
.sidebar {
  background: var(--vel-card) !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-lg) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.sidebar .list-group { border-radius: var(--vel-radius-lg) !important; }

.sidebar .list-group-item {
  background: transparent !important;
  border-color: var(--vel-border) !important;
  color: var(--vel-text-2) !important;
  font-size: 13.5px !important;
  padding: 11px 16px !important;
  transition: all 0.15s !important;
}

.sidebar .list-group-item:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--vel-text-1) !important;
}

.sidebar .list-group-item.active {
  background: rgba(59,158,255,0.12) !important;
  border-color: var(--vel-border) !important;
  color: var(--vel-accent) !important;
  font-weight: 600 !important;
}

.sidebar .list-group-item i,
.sidebar .list-group-item .fas,
.sidebar .list-group-item .far,
.sidebar .list-group-item .fad {
  color: var(--vel-text-3) !important;
  width: 18px !important;
  margin-right: 6px !important;
}

.sidebar .list-group-item.active i { color: var(--vel-accent) !important; }

.sidebar-section-title {
  color: var(--vel-text-3) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 16px 6px !important;
}

/* ═══════════════════════════════════════════════════════
   PANELS / CARDS
═══════════════════════════════════════════════════════ */
.panel, .card {
  background: var(--vel-card) !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-lg) !important;
  box-shadow: var(--vel-shadow) !important;
}

.panel-heading, .card-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-lg) var(--vel-radius-lg) 0 0 !important;
  padding: 14px 18px !important;
  color: var(--vel-text-1) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

.panel-body, .card-body { padding: 18px !important; }
.panel-footer, .card-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid var(--vel-border) !important;
  border-radius: 0 0 var(--vel-radius-lg) var(--vel-radius-lg) !important;
  padding: 12px 18px !important;
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--vel-radius) !important;
  padding: 8px 16px !important;
  transition: all 0.18s ease !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-primary {
  background: var(--vel-accent-btn) !important;
  color: #fff !important;
  border: none !important;
}
.btn-primary:hover {
  background: var(--vel-accent) !important;
  box-shadow: 0 0 16px var(--vel-accent-glow) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.btn-success { background: var(--vel-green) !important; color: #fff !important; border: none !important; }
.btn-success:hover { background: #16a34a !important; color: #fff !important; }

.btn-danger { background: var(--vel-red) !important; color: #fff !important; border: none !important; }
.btn-danger:hover { background: #dc2626 !important; color: #fff !important; }

.btn-warning { background: var(--vel-yellow) !important; color: #0f1117 !important; border: none !important; }

.btn-info { background: #0891b2 !important; color: #fff !important; border: none !important; }

.btn-default, .btn-secondary, .btn-light {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--vel-border) !important;
  color: var(--vel-text-2) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
  background: rgba(255,255,255,0.11) !important;
  color: var(--vel-text-1) !important;
  border-color: var(--vel-border-hover) !important;
}

.btn-link { background: none !important; color: var(--vel-accent) !important; border: none !important; }
.btn-link:hover { color: #fff !important; }

.btn-sm { padding: 5px 11px !important; font-size: 12px !important; }
.btn-lg { padding: 11px 22px !important; font-size: 14.5px !important; }

/* ═══════════════════════════════════════════════════════
   FORMS & INPUTS
═══════════════════════════════════════════════════════ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  background: var(--vel-input) !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius) !important;
  color: var(--vel-text-1) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  padding: 9px 12px !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  background: var(--vel-input) !important;
  border-color: rgba(59,158,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(59,158,255,0.12) !important;
  color: var(--vel-text-1) !important;
  outline: none !important;
}

.form-control::placeholder { color: var(--vel-text-3) !important; }
.form-control:disabled, .form-control[readonly] { background: rgba(255,255,255,0.03) !important; color: var(--vel-text-3) !important; }

label, .control-label, .col-form-label {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--vel-text-2) !important;
  margin-bottom: 5px !important;
}

.form-group { margin-bottom: 16px !important; }

.input-group-text {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--vel-border) !important;
  color: var(--vel-text-3) !important;
  font-size: 13px !important;
}

select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234d5870' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

select option { background: #1c2030 !important; color: var(--vel-text-1) !important; }

/* Checkbox / Radio */
.custom-control-label { color: var(--vel-text-2) !important; font-size: 13.5px !important; }
.custom-control-label::before { background: var(--vel-input) !important; border-color: var(--vel-border) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--vel-accent-btn) !important; border-color: var(--vel-accent-btn) !important; }

/* ═══════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════ */
.table {
  color: var(--vel-text-1) !important;
  border-color: var(--vel-border) !important;
}

.table thead th {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--vel-border) !important;
  border-top: none !important;
  color: var(--vel-text-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 12px 14px !important;
}

.table tbody td {
  border-top: 1px solid var(--vel-border) !important;
  color: var(--vel-text-1) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.table tbody tr:hover { background: rgba(255,255,255,0.03) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }
.table-hover tbody tr:hover { background: rgba(255,255,255,0.04) !important; }

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--vel-input) !important;
  border: 1px solid var(--vel-border) !important;
  color: var(--vel-text-1) !important;
  border-radius: var(--vel-radius) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--vel-text-3) !important; font-size: 12.5px !important; }

/* ═══════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--vel-radius-lg) !important;
  border: 1px solid transparent !important;
  font-size: 13.5px !important;
  padding: 13px 16px !important;
  font-family: 'Inter', sans-serif !important;
}

.alert-success { background: var(--vel-green-bg) !important; border-color: rgba(34,197,94,0.25) !important; color: #4ade80 !important; }
.alert-danger, .alert-error { background: var(--vel-red-bg) !important; border-color: rgba(239,68,68,0.25) !important; color: #f87171 !important; }
.alert-warning { background: var(--vel-yellow-bg) !important; border-color: rgba(234,179,8,0.25) !important; color: #fbbf24 !important; }
.alert-info { background: var(--vel-accent-glow) !important; border-color: rgba(59,158,255,0.25) !important; color: #60a5fa !important; }
.alert .close { color: inherit !important; opacity: 0.5 !important; }
.alert .close:hover { opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════
   BADGES & LABELS
═══════════════════════════════════════════════════════ */
.badge, .label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  letter-spacing: 0.03em !important;
}

.badge-success, .label-success { background: var(--vel-green-bg) !important; color: var(--vel-green) !important; }
.badge-danger, .label-danger   { background: var(--vel-red-bg) !important;   color: var(--vel-red) !important; }
.badge-warning, .label-warning { background: var(--vel-yellow-bg) !important; color: var(--vel-yellow) !important; }
.badge-info, .label-info       { background: var(--vel-accent-glow) !important; color: var(--vel-accent) !important; }
.badge-primary, .label-primary { background: var(--vel-accent-glow) !important; color: var(--vel-accent) !important; }
.badge-secondary { background: rgba(255,255,255,0.08) !important; color: var(--vel-text-2) !important; }

/* Status-specific */
.badge-active   { background: var(--vel-green-bg) !important; color: var(--vel-green) !important; }
.badge-pending  { background: var(--vel-yellow-bg) !important; color: var(--vel-yellow) !important; }
.badge-suspended{ background: var(--vel-red-bg) !important;   color: var(--vel-red) !important; }

/* ═══════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════ */
.pagination .page-link {
  background: var(--vel-card) !important;
  border-color: var(--vel-border) !important;
  color: var(--vel-text-2) !important;
  font-size: 13px !important;
  transition: all 0.15s !important;
}

.pagination .page-link:hover { background: var(--vel-card-hover) !important; color: var(--vel-text-1) !important; }
.pagination .page-item.active .page-link { background: var(--vel-accent-btn) !important; border-color: var(--vel-accent-btn) !important; color: #fff !important; }
.pagination .page-item.disabled .page-link { background: var(--vel-card) !important; color: var(--vel-text-3) !important; }

/* ═══════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════ */
.modal-content {
  background: #181c27 !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-xl) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}

.modal-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-xl) var(--vel-radius-xl) 0 0 !important;
  padding: 16px 20px !important;
}

.modal-title { color: var(--vel-text-1) !important; font-size: 15px !important; font-weight: 700 !important; }
.modal-body { padding: 20px !important; color: var(--vel-text-2) !important; }
.modal-footer { border-top: 1px solid var(--vel-border) !important; background: rgba(255,255,255,0.02) !important; padding: 14px 20px !important; border-radius: 0 0 var(--vel-radius-xl) var(--vel-radius-xl) !important; }
.modal-backdrop { background: rgba(0,0,0,0.75) !important; }
.modal .close { color: var(--vel-text-2) !important; opacity: 1 !important; font-size: 22px !important; }
.modal .close:hover { color: var(--vel-text-1) !important; }

/* ═══════════════════════════════════════════════════════
   LIST GROUPS
═══════════════════════════════════════════════════════ */
.list-group-item {
  background: transparent !important;
  border-color: var(--vel-border) !important;
  color: var(--vel-text-2) !important;
  font-size: 13.5px !important;
}

.list-group-item.active {
  background: rgba(59,158,255,0.12) !important;
  border-color: var(--vel-border) !important;
  color: var(--vel-accent) !important;
}

.list-group-item:hover { background: rgba(255,255,255,0.03) !important; color: var(--vel-text-1) !important; }

/* ═══════════════════════════════════════════════════════
   NAV TABS
═══════════════════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 1px solid var(--vel-border) !important;
  margin-bottom: 16px !important;
}

.nav-tabs .nav-link {
  color: var(--vel-text-3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  transition: all 0.18s !important;
  background: none !important;
}

.nav-tabs .nav-link:hover { color: var(--vel-text-1) !important; }
.nav-tabs .nav-link.active { color: var(--vel-accent) !important; border-bottom-color: var(--vel-accent) !important; background: none !important; }
.tab-content { color: var(--vel-text-2) !important; }

/* ═══════════════════════════════════════════════════════
   WELLS & HIGHLIGHTS
═══════════════════════════════════════════════════════ */
.well {
  background: var(--vel-input) !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-lg) !important;
  box-shadow: none !important;
  color: var(--vel-text-2) !important;
}

.bg-light { background: var(--vel-card) !important; }
.bg-white { background: var(--vel-card) !important; }
.bg-dark { background: #0c0f18 !important; }

hr { border-color: var(--vel-border) !important; }

/* ═══════════════════════════════════════════════════════
   CLIENT AREA HOME — WELCOME PANEL
═══════════════════════════════════════════════════════ */
.client-area-welcome,
.panel-welcome,
.welcome-panel {
  background: var(--vel-card) !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-xl) !important;
}

/* ═══════════════════════════════════════════════════════
   PRODUCT / SERVICE LIST ITEMS
═══════════════════════════════════════════════════════ */
.service-overview-panel,
.product-overview-panel {
  background: var(--vel-card) !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-lg) !important;
  transition: border-color 0.2s, transform 0.2s !important;
}

.service-overview-panel:hover,
.product-overview-panel:hover {
  border-color: rgba(59,158,255,0.25) !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════
   INVOICE / ORDER SPECIFIC
═══════════════════════════════════════════════════════ */
.invoice-total-row,
.order-total {
  background: rgba(59,158,255,0.06) !important;
  border-top: 1px solid rgba(59,158,255,0.2) !important;
  font-weight: 700 !important;
  color: var(--vel-text-1) !important;
}

/* ═══════════════════════════════════════════════════════
   TICKET SYSTEM
═══════════════════════════════════════════════════════ */
.ticket-staff-reply,
.ticket-reply-staff {
  border-left: 3px solid var(--vel-accent) !important;
  background: rgba(59,158,255,0.04) !important;
}

.ticket-client-reply,
.ticket-reply-client {
  border-left: 3px solid var(--vel-teal) !important;
}

/* ═══════════════════════════════════════════════════════
   PROGRESS BARS
═══════════════════════════════════════════════════════ */
.progress {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 99px !important;
  height: 6px !important;
}

.progress-bar { background: var(--vel-accent-btn) !important; border-radius: 99px !important; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
#footer.footer {
  background: var(--vel-nav) !important;
  border-top: 1px solid var(--vel-border) !important;
  color: var(--vel-text-3) !important;
  padding: 24px 0 !important;
  margin-top: 40px !important;
}

#footer .nav-link { color: var(--vel-text-3) !important; font-size: 13px !important; }
#footer .nav-link:hover { color: var(--vel-text-2) !important; }
#footer .copyright { color: var(--vel-text-3) !important; font-size: 12.5px !important; }

/* Language / currency modal in footer */
.modal-localisation .modal-content { background: #1c2030 !important; }

/* ═══════════════════════════════════════════════════════
   NOTIFICATIONS POPOVER
═══════════════════════════════════════════════════════ */
.popover {
  background: #1c2030 !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.popover-header { background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid var(--vel-border) !important; color: var(--vel-text-1) !important; border-radius: var(--vel-radius-lg) var(--vel-radius-lg) 0 0 !important; }
.popover-body { color: var(--vel-text-2) !important; }
.popover .arrow::after { border-bottom-color: #1c2030 !important; border-top-color: #1c2030 !important; }

.client-alerts { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.client-alerts li a { color: var(--vel-text-2) !important; padding: 10px 4px !important; display: flex !important; gap: 8px !important; font-size: 13px !important; }
.client-alerts li a:hover { color: var(--vel-text-1) !important; }

/* ═══════════════════════════════════════════════════════
   TOOLTIPS
═══════════════════════════════════════════════════════ */
.tooltip-inner { background: #1c2030 !important; color: var(--vel-text-1) !important; border: 1px solid var(--vel-border) !important; font-size: 12px !important; border-radius: 7px !important; }
.bs-tooltip-top .arrow::before { border-top-color: #1c2030 !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #1c2030 !important; }

/* ═══════════════════════════════════════════════════════
   RETURN TO ADMIN BUTTON
═══════════════════════════════════════════════════════ */
.btn-return-to-admin {
  background: var(--vel-yellow) !important;
  color: #0f1117 !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════
   FULLPAGE OVERLAY
═══════════════════════════════════════════════════════ */
#fullpage-overlay { background: rgba(8,12,20,0.9) !important; }

/* ═══════════════════════════════════════════════════════
   DOMAIN SEARCH WIDGET
═══════════════════════════════════════════════════════ */
.domain-search-panel {
  background: var(--vel-card) !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-xl) !important;
}

/* ═══════════════════════════════════════════════════════
   NETWORK ISSUE NOTIFICATIONS
═══════════════════════════════════════════════════════ */
.network-issues-bar {
  background: rgba(239,68,68,0.15) !important;
  border-bottom: 1px solid rgba(239,68,68,0.25) !important;
  color: #f87171 !important;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #main-body { padding: 16px 0 !important; }
  .container { padding: 0 16px !important; }
  .navbar.main-navbar-wrapper .container { padding: 0 16px !important; }
  .panel-body, .card-body { padding: 14px !important; }
}

/* ═══════════════════════════════════════════════════════
   UTILITY OVERRIDES
═══════════════════════════════════════════════════════ */
.text-primary { color: var(--vel-accent) !important; }
.text-success { color: var(--vel-green) !important; }
.text-danger  { color: var(--vel-red) !important; }
.text-warning { color: var(--vel-yellow) !important; }
.text-info    { color: #22d3ee !important; }
.text-dark    { color: var(--vel-text-1) !important; }
.text-light   { color: var(--vel-text-3) !important; }

.border { border-color: var(--vel-border) !important; }
.border-top    { border-top-color: var(--vel-border) !important; }
.border-bottom { border-bottom-color: var(--vel-border) !important; }

.shadow, .shadow-sm { box-shadow: var(--vel-shadow) !important; }

/* ═══════════════════════════════════════════════════════
   DASHBOARD — WELCOME BANNER
═══════════════════════════════════════════════════════ */
.vel-welcome-banner {
  background: #181c27;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 18px 22px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.vel-welcome-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vel-welcome-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a2d5a, #0d1633);
  border: 2px solid rgba(59,158,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b9eff;
  font-size: 17px;
  flex-shrink: 0;
}

.vel-welcome-name {
  font-size: 15px;
  font-weight: 700;
  color: #e8ecf4;
  margin-bottom: 2px;
}

.vel-welcome-email {
  font-size: 12px;
  color: #4d5870;
}

.vel-welcome-right {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.vel-credit-block {
  text-align: right;
  margin-right: 20px;
}

.vel-credit-label {
  font-size: 10px;
  color: #4d5870;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}

.vel-credit-amount {
  font-size: 20px;
  font-weight: 700;
  color: #e8ecf4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vel-credit-plus {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #2d8ef0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none !important;
  line-height: 1;
  transition: all 0.18s;
}

.vel-credit-plus:hover {
  background: #3b9eff;
  transform: scale(1.08);
  color: #fff !important;
}

.vel-quick-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,0.07);
  margin-left: 4px;
}

.vel-qn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
  color: #4d5870 !important;
  text-decoration: none !important;
  transition: all 0.18s;
  white-space: nowrap;
}

.vel-qn-item i {
  font-size: 19px;
  color: #8b95aa;
  transition: color 0.18s;
}

.vel-qn-item:hover {
  background: rgba(255,255,255,0.05);
  color: #e8ecf4 !important;
}

.vel-qn-item:hover i { color: #3b9eff; }

/* ═══════════════════════════════════════════════════════
   DASHBOARD — STAT TILES
═══════════════════════════════════════════════════════ */
.vel-stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.vel-stat-tile {
  background: #181c27;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none !important;
  position: relative;
  transition: all 0.2s ease;
  overflow: hidden;
}

.vel-stat-tile::after {
  content: '›';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #4d5870;
  font-size: 18px;
  transition: right 0.2s;
}

.vel-stat-tile:hover {
  background: #1c2030;
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.vel-stat-tile:hover::after { right: 12px; }

.vel-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.vel-blue   { background: rgba(59,158,255,0.12);  color: #3b9eff; }
.vel-teal   { background: rgba(0,201,167,0.12);   color: #00c9a7; }
.vel-red    { background: rgba(239,68,68,0.12);   color: #ef4444; }
.vel-yellow { background: rgba(234,179,8,0.12);   color: #eab308; }
.vel-green  { background: rgba(34,197,94,0.12);   color: #22c55e; }

.vel-stat-count {
  font-size: 24px;
  font-weight: 700;
  color: #e8ecf4;
  line-height: 1;
  margin-bottom: 3px;
}

.vel-stat-label {
  font-size: 12px;
  color: #4d5870;
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD — HOME PANEL CARDS
═══════════════════════════════════════════════════════ */
.vel-home-panels { margin-top: 4px; }

.vel-home-card {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  transition: border-color 0.2s !important;
}

.vel-home-card:hover {
  border-color: rgba(255,255,255,0.12) !important;
}

.vel-home-card .card-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 14px 18px !important;
}

.vel-home-card .card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #e8ecf4 !important;
}

.vel-home-card .card-footer {
  padding: 10px 18px !important;
  min-height: 0 !important;
}

.vel-home-card .card-footer:empty { display: none; }

/* Tile stats (old .tiles class override) */
.tiles { display: none; } /* hidden — replaced by vel-stat-tiles */

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — DASHBOARD
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .vel-stat-tiles { grid-template-columns: repeat(2, 1fr); }
  .vel-quick-nav { flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 768px) {
  .vel-welcome-banner { padding: 14px 16px; }
  .vel-welcome-right { width: 100%; justify-content: space-between; }
  .vel-quick-nav { border-left: none; padding-left: 0; margin-left: 0; }
  .vel-credit-block { margin-right: 0; }
  .vel-stat-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .vel-stat-count { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════
   FIX: HEADER / NAV (theme.css overrides with high specificity)
═══════════════════════════════════════════════════════ */
header.header {
  background-color: #13161f !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

header.header .topbar {
  background-color: #0c0f18 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

header.header .topbar .btn,
header.header .topbar .active-client .btn {
  color: rgba(255,255,255,0.5) !important;
}

header.header .topbar .active-client .btn.btn-active-client span {
  border-bottom-color: rgba(255,255,255,0.3) !important;
}

header.header .topbar .active-client .input-group-text {
  color: rgba(255,255,255,0.4) !important;
}

header.header .navbar a,
header.header .navbar-nav a,
header.header .navbar-nav .nav-link {
  color: #8b95aa !important;
}

header.header .navbar a:hover,
header.header .navbar-nav a:hover {
  color: #e8ecf4 !important;
  text-decoration: none !important;
}

header.header .toolbar .nav-link {
  border-color: rgba(255,255,255,0.1) !important;
  color: #8b95aa !important;
}

header.header .toolbar .nav-link:hover { color: #e8ecf4 !important; }
header.header .toolbar .nav-link .badge { background: #2d8ef0 !important; }

header.header .search {
  border-color: rgba(255,255,255,0.07) !important;
  background: #141824 !important;
}

header.header .search .btn { color: #4d5870 !important; }
header.header .search .form-control { background: transparent !important; }

header.header .main-navbar-wrapper {
  background-color: #13161f !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

header.header .dropdown-item.active,
header.header .dropdown-item:active {
  background-color: rgba(59,158,255,0.1) !important;
  color: #3b9eff !important;
}

/* Navbar light overrides */
.navbar.navbar-light {
  background-color: #13161f !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: BREADCRUMB
═══════════════════════════════════════════════════════ */
.master-breadcrumb {
  background-color: #0c0f18 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: BODY & PAGE BACKGROUND
═══════════════════════════════════════════════════════ */
.primary-bg-color { background-color: #0f1117 !important; }
body { background-color: #0f1117 !important; }
#main-body { background-color: #0f1117 !important; }

/* ═══════════════════════════════════════════════════════
   FIX: HOMEPAGE PRODUCT CARDS (.card-columns)
═══════════════════════════════════════════════════════ */
.card-columns .card,
.home.card-columns .card {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  transition: border-color 0.2s, transform 0.2s !important;
}

.card-columns .card:hover {
  border-color: rgba(59,158,255,0.25) !important;
  transform: translateY(-2px) !important;
}

.card-columns .card .card-body {
  background: transparent !important;
}

.card-columns .card .card-title {
  color: #e8ecf4 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.card-columns .card p {
  color: #8b95aa !important;
  font-size: 13px !important;
  margin-bottom: 16px !important;
}

/* "Browse Products" outline button on product cards */
.btn-outline-primary {
  color: #3b9eff !important;
  border: 1px solid rgba(59,158,255,0.35) !important;
  background: transparent !important;
  border-radius: 8px !important;
}

.btn-outline-primary:hover {
  background: rgba(59,158,255,0.12) !important;
  color: #60b8ff !important;
  border-color: rgba(59,158,255,0.5) !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: "HOW CAN WE HELP" ACTION ICON BUTTONS
═══════════════════════════════════════════════════════ */
.action-icon-btns a {
  background-color: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  color: #8b95aa !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.action-icon-btns a:hover {
  background-color: #1c2030 !important;
  border-color: rgba(59,158,255,0.25) !important;
  color: #e8ecf4 !important;
  transform: translateY(-2px) !important;
}

.action-icon-btns a .ico-container i {
  color: #4d5870 !important;
  transition: color 0.2s !important;
}

.action-icon-btns a:hover .ico-container i {
  color: #3b9eff !important;
}

/* Accent top borders on action icon cards */
.action-icon-btns a.card-accent-teal          { border-top: 2px solid #00c9a7 !important; }
.action-icon-btns a.card-accent-pomegranate   { border-top: 2px solid #ef4444 !important; }
.action-icon-btns a.card-accent-sun-flower    { border-top: 2px solid #eab308 !important; }
.action-icon-btns a.card-accent-asbestos      { border-top: 2px solid #8b95aa !important; }
.action-icon-btns a.card-accent-green         { border-top: 2px solid #22c55e !important; }
.action-icon-btns a.card-accent-midnight-blue { border-top: 2px solid #3b9eff !important; }
.action-icon-btns a.card-accent-gold          { border-top: 2px solid #eab308 !important; }
.action-icon-btns a.card-accent-red           { border-top: 2px solid #ef4444 !important; }
.action-icon-btns a.card-accent-blue          { border-top: 2px solid #3b9eff !important; }
.action-icon-btns a.card-accent-purple        { border-top: 2px solid #a855f7 !important; }

/* ═══════════════════════════════════════════════════════
   FIX: CLIENT HOME CARDS (services/tickets panels)
═══════════════════════════════════════════════════════ */
.client-home-cards .card,
.client-home-cards .card-header {
  background-color: #181c27 !important;
}

.client-home-cards .card-header {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.client-home-cards .list-group {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.client-home-cards .list-group .list-group-item {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  background: transparent !important;
  color: #8b95aa !important;
}

.client-home-cards .list-group .list-group-item:last-child {
  border-bottom: 0 !important;
}

.client-home-cards small { color: #4d5870 !important; }

/* ═══════════════════════════════════════════════════════
   FIX: HOMEPAGE h2 SECTION TITLES
═══════════════════════════════════════════════════════ */
h2.text-center { color: #e8ecf4 !important; }

/* ═══════════════════════════════════════════════════════
   FIX: ALL REMAINING WHITE BACKGROUNDS
═══════════════════════════════════════════════════════ */
.bg-white, .bg-light { background-color: #181c27 !important; }

/* Card defaults catching anything missed */
.card { background-color: #181c27 !important; }
.card-header { background-color: rgba(255,255,255,0.03) !important; }
.card-footer { background-color: rgba(255,255,255,0.02) !important; }

/* Inputs on white pages */
.form-control { background-color: #141824 !important; color: #e8ecf4 !important; }

/* Domain search widget */
.domain-search { background: #181c27 !important; border-color: rgba(255,255,255,0.07) !important; }

/* ═══════════════════════════════════════════════════════
   FIX: FOOTER
═══════════════════════════════════════════════════════ */
footer#footer, #footer.footer {
  background-color: #0c0f18 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

footer#footer .nav-link, #footer .nav-link { color: #4d5870 !important; }
footer#footer .nav-link:hover { color: #8b95aa !important; }
footer#footer .copyright, #footer .copyright { color: #4d5870 !important; }

/* ═══════════════════════════════════════════════════════
   FIX: MODAL LOCALISATION (language/currency)
═══════════════════════════════════════════════════════ */
.modal-localisation .modal-body { background: #1c2030 !important; }
.modal-localisation .item { color: #8b95aa !important; background: rgba(255,255,255,0.03) !important; border-radius: 8px !important; }
.modal-localisation .item.active { background: rgba(59,158,255,0.12) !important; color: #3b9eff !important; }

/* ═══════════════════════════════════════════════════════
   STORE — PRODUCT LISTING PAGE (Image 2 fix)
   billing.velocityhosting.co.uk/store/minecraft
═══════════════════════════════════════════════════════ */

/* Store sidebar */
.sidebar .card { margin-bottom: 10px !important; }

.sidebar .card-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e8ecf4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}

.sidebar .list-group-item {
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: #8b95aa !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.05) !important;
  transition: all 0.15s !important;
}

.sidebar .list-group-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #e8ecf4 !important;
  padding-left: 20px !important;
}

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
  background: rgba(59,158,255,0.12) !important;
  color: #3b9eff !important;
  border-color: rgba(255,255,255,0.05) !important;
  font-weight: 600 !important;
  padding-left: 16px !important;
}

/* Product listing cards */
.primary-content .card,
.store-products .card,
.products-list .card {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}

.primary-content .card:hover {
  border-color: rgba(59,158,255,0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
}

.primary-content .card .card-body {
  background: transparent !important;
  padding: 22px 24px !important;
}

/* Product name */
.primary-content .card .card-title,
.primary-content .card h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #e8ecf4 !important;
  margin-bottom: 12px !important;
}

/* Feature bullet points */
.primary-content .card ul,
.primary-content .card .card-body ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}

.primary-content .card ul li {
  font-size: 13px !important;
  color: #8b95aa !important;
  padding: 3px 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.primary-content .card ul li::before {
  content: '•' !important;
  color: #3b9eff !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
}

/* "Starting from" pricing */
.primary-content .card .price,
.primary-content .card .starting-from,
.primary-content .card [class*="price"] {
  color: #e8ecf4 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* Order Now button */
.primary-content .card .btn-success,
.primary-content .card a.btn-success {
  background: #22c55e !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  white-space: nowrap !important;
  transition: all 0.18s !important;
}

.primary-content .card .btn-success:hover {
  background: #16a34a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(34,197,94,0.3) !important;
}

/* Italic note text in product cards */
.primary-content .card .card-body p,
.primary-content .card .card-body p em,
.primary-content .card .card-body p i {
  font-size: 12px !important;
  color: #4d5870 !important;
  line-height: 1.5 !important;
}

/* ═══════════════════════════════════════════════════════
   CART CONFIGURE PAGE (Image 1 fix)
   cart.php?a=confproduct
═══════════════════════════════════════════════════════ */

/* Main configure card / product description box */
.store-order-container {
  color: #e8ecf4 !important;
}

.store-order-container h2 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #e8ecf4 !important;
  margin-bottom: 6px !important;
}

.store-order-container h4 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #8b95aa !important;
  margin-bottom: 10px !important;
}

.store-order-container p {
  color: #8b95aa !important;
  font-size: 13.5px !important;
}

/* Product description box (the bordered white box in image 1) */
.store-order-container .card,
.store-order-container > .container > .card,
.primary-content .store-order-container .card {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
}

/* The product spec box with bullet list */
.store-order-container .well,
.store-order-container .product-description,
div[class*="store"] .well {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  color: #8b95aa !important;
}

/* Billing cycle select */
.store-order-container select,
.payment-term select {
  background: #141824 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 9px !important;
  color: #e8ecf4 !important;
  padding: 10px 32px 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  min-width: 200px !important;
}

.store-order-container select:focus {
  border-color: rgba(59,158,255,0.4) !important;
  box-shadow: 0 0 0 3px rgba(59,158,255,0.1) !important;
}

/* "Choose Payment Term" heading */
.payment-term h4 {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #4d5870 !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

/* Domain tabs */
.store-order-container .store-domain-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.store-order-container .store-domain-tabs li a,
.store-order-container .store-domain-tabs .nav-link {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: #4d5870 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  transition: all 0.18s !important;
}

.store-order-container .store-domain-tabs li.active a,
.store-order-container .store-domain-tabs .nav-link.active {
  background: transparent !important;
  border-bottom: 2px solid #3b9eff !important;
  color: #3b9eff !important;
}

.store-order-container .store-domain-tab-content,
.store-order-container .tab-content.bg-white {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  padding: 16px 20px !important;
}

/* "Configurable Options" heading + divider */
.store-order-container h3,
.store-order-container .section-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #8b95aa !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}

/* Warning/info alert in configure page */
.store-order-container .alert-warning {
  background: rgba(234,179,8,0.1) !important;
  border: 1px solid rgba(234,179,8,0.2) !important;
  border-radius: 10px !important;
  color: #fbbf24 !important;
  font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════
   ORDER SUMMARY SIDEBAR (right column in Image 1)
═══════════════════════════════════════════════════════ */

.card-sidebar,
.order-summary-panel,
.cart-sidebar,
[class*="order-summary"],
.sidebar .card.order-summary {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Order Summary header */
.card-sidebar .card-header,
[class*="order-summary"] .card-header,
.order-summary-panel .card-header {
  background: rgba(59,158,255,0.08) !important;
  border-bottom: 1px solid rgba(59,158,255,0.15) !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #e8ecf4 !important;
  padding: 14px 18px !important;
}

/* Order summary line items */
.card-sidebar .card-body table td,
.order-summary-panel td,
[class*="order-summary"] td {
  color: #8b95aa !important;
  font-size: 13px !important;
  padding: 6px 4px !important;
  border: none !important;
}

.card-sidebar .card-body table td:last-child,
[class*="order-summary"] td:last-child {
  text-align: right !important;
  color: #e8ecf4 !important;
  font-weight: 500 !important;
}

/* Total price */
.card-sidebar .total,
[class*="order-summary"] .total,
.order-total-price {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #e8ecf4 !important;
  text-align: center !important;
  padding: 12px 0 4px !important;
  display: block !important;
}

/* "Total Due Today" label */
.card-sidebar .total-label,
[class*="order-summary"] small,
[class*="order-summary"] .text-muted {
  font-size: 11px !important;
  color: #4d5870 !important;
  text-align: center !important;
  display: block !important;
}

/* Continue button in order summary */
.card-sidebar .btn-primary,
[class*="order-summary"] .btn-primary {
  background: #2d8ef0 !important;
  border: none !important;
  border-radius: 10px !important;
  width: 100% !important;
  padding: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  justify-content: center !important;
  transition: all 0.18s !important;
}

.card-sidebar .btn-primary:hover,
[class*="order-summary"] .btn-primary:hover {
  background: #3b9eff !important;
  box-shadow: 0 0 20px rgba(59,158,255,0.3) !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════
   STORE ORDER FORM — CONFPRODUCT SPECIFIC OVERRIDES
   Targets the bordered description block
═══════════════════════════════════════════════════════ */

/* The bordered product spec/description block */
.confproduct-description,
.product-config-description,
.store-order-container > .row > .col-sm-7 > .card,
.store-order-container > .row > div > .card {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  color: #8b95aa !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

/* "Configurable Options" divider line */
.store-order-container hr {
  border-color: rgba(255,255,255,0.07) !important;
}

/* Domain validation status */
.store-order-container .domain-validation { color: #4d5870 !important; }
.store-order-container .domain-validation.ok { color: #22c55e !important; }

/* Bottom navigation buttons */
.store-order-container .btn.btn-default {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #8b95aa !important;
  border-radius: 9px !important;
}

.store-order-container .btn.btn-default:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #e8ecf4 !important;
}

.store-order-container .btn.btn-primary {
  background: #2d8ef0 !important;
  border: none !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
}

/* Upsell promoted product card */
.store-promoted-product {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
}

.store-promoted-product h3,
.store-promoted-product h4 {
  color: #e8ecf4 !important;
}

.store-promoted-product p { color: #8b95aa !important; }

.store-promoted-product ul.features li {
  color: #8b95aa !important;
  font-size: 13px !important;
}

.store-promoted-product ul.features li .fa {
  color: #22c55e !important;
}

/* ═══════════════════════════════════════════════════════
   SHOPPING CART VIEW (cart.php?a=view)
═══════════════════════════════════════════════════════ */

.cart-items-panel,
#frmCheckout .card,
.cart-view .card {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
}

/* Cart table rows */
.cart-items-table thead th {
  background: rgba(255,255,255,0.03) !important;
  color: #4d5870 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.cart-items-table tbody td {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  color: #e8ecf4 !important;
  vertical-align: middle !important;
}

/* Promo code input */
.promo-code-input {
  background: #141824 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #e8ecf4 !important;
}

/* ═══════════════════════════════════════════════════════
   HETZNER / STANDARD SERVERS MODULE (dedicated servers)
═══════════════════════════════════════════════════════ */

.server-card {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  transition: border-color 0.2s !important;
}

.server-card:hover {
  border-color: rgba(59,158,255,0.25) !important;
}

.table-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  color: #4d5870 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 10px 16px !important;
}

.search-input {
  background: #141824 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 9px !important;
  color: #e8ecf4 !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}

.name-title { color: #e8ecf4 !important; font-weight: 600 !important; font-size: 14px !important; }
.spec-label { color: #4d5870 !important; font-size: 11px !important; }
.spec-title { color: #8b95aa !important; }

/* ═══════════════════════════════════════════════════════
   GENERAL CLEANLINESS — any remaining white surfaces
═══════════════════════════════════════════════════════ */

/* Tab pane white backgrounds */
.tab-pane { background: transparent !important; }
.tab-content { background: transparent !important; }

/* Any bg-white or bg-light inside primary content */
.primary-content .bg-white,
.primary-content .bg-light,
.store-order-container .bg-white {
  background: rgba(255,255,255,0.02) !important;
}

/* Responsive tab connector for store */
.responsive-tabs-sm-connector.store {
  border-color: rgba(255,255,255,0.07) !important;
}

/* ═══════════════════════════════════════════════════════
   SERVICE CARDS — clientareaproducts page
═══════════════════════════════════════════════════════ */

/* Force the primary content area to not have a sidebar layout on services page */
.vel-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Make sure no white leaks on product details page */
.primary-content .div-service-item {
  background: #181c27 !important;
  border-color: rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}

.primary-content .div-service-status .label {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
}

.primary-content .div-service-name {
  color: #e8ecf4 !important;
  font-weight: 600 !important;
}

.primary-content .div-service-name .text-domain {
  color: #4d5870 !important;
  font-size: 12px !important;
}

/* Product details page tabs */
.primary-content .nav-tabs .nav-link {
  color: #4d5870 !important;
  font-size: 13px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  background: transparent !important;
}

.primary-content .nav-tabs .nav-link.active {
  color: #3b9eff !important;
  border-bottom-color: #3b9eff !important;
  background: transparent !important;
}

.primary-content .tab-content { background: transparent !important; }

/* ═══════════════════════════════════════════════════════
   FIX: DATATABLES WHITE BACKGROUND (invoices, emails, etc)
═══════════════════════════════════════════════════════ */

/* The main white wrapper box */
div.listtable,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody {
  background: transparent !important;
}

/* Table itself */
.dataTables_wrapper table.table-list {
  background: var(--vel-card) !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: var(--vel-radius-lg) !important;
  overflow: hidden !important;
}

/* All td cells - the main culprit */
.table-list > tbody > tr > td,
table.table-list tbody td {
  background-color: transparent !important;
  border-top: 1px solid var(--vel-border) !important;
  color: var(--vel-text-1) !important;
}

.table-list > tbody > tr:hover > td {
  background-color: rgba(255,255,255,0.03) !important;
}

/* thead */
table.table-list thead th {
  background-color: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--vel-border) !important;
  color: var(--vel-text-3) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-weight: 600 !important;
  text-align: left !important;
  padding: 12px 8px !important;
}

.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: rgba(59,158,255,0.06) !important;
  color: var(--vel-accent) !important;
}

/* Search filter input */
.dataTables_wrapper .dataTables_filter label .form-control {
  background: var(--vel-input) url("../../../assets/img/search.png") no-repeat 8px 5px !important;
  border: 1px solid var(--vel-border) !important;
  color: var(--vel-text-1) !important;
  border-radius: var(--vel-radius) !important;
}

/* "Showing X to Y of Z entries" */
.dataTables_wrapper .dataTables_info {
  color: var(--vel-text-3) !important;
  font-size: 12.5px !important;
}

/* Show entries select */
.dataTables_wrapper .dataTables_length select {
  background: var(--vel-input) !important;
  border: 1px solid var(--vel-border) !important;
  color: var(--vel-text-1) !important;
  border-radius: var(--vel-radius) !important;
  padding: 4px 28px 4px 10px !important;
}

.dataTables_wrapper .dataTables_length label {
  color: var(--vel-text-3) !important;
  font-size: 12.5px !important;
}

/* Responsive expand cell */
table.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  background-color: var(--vel-accent) !important;
}

/* DataTables child row (expanded mobile) */
table.dataTable > tbody > tr.child {
  background: rgba(255,255,255,0.02) !important;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom-color: var(--vel-border) !important;
  color: var(--vel-text-2) !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: FILTER SIDEBAR RADIO BUTTONS (icheck / fa-circle)
═══════════════════════════════════════════════════════ */

/* The filter list items */
.sidebar .view-filter-btns .list-group-item,
.view-filter-btns .list-group-item {
  background: transparent !important;
  border-color: rgba(255,255,255,0.05) !important;
  color: var(--vel-text-2) !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  border-radius: 0 !important;
}

.sidebar .view-filter-btns .list-group-item:hover,
.view-filter-btns .list-group-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--vel-text-1) !important;
}

.sidebar .view-filter-btns .list-group-item.active,
.view-filter-btns .list-group-item.active {
  background: rgba(59,158,255,0.1) !important;
  color: var(--vel-accent) !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* fa-circle / fa-dot-circle radio icon */
.view-filter-btns .list-group-item i.far,
.view-filter-btns .list-group-item i.fas {
  color: var(--vel-text-3) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.view-filter-btns .list-group-item.active i.far,
.view-filter-btns .list-group-item.active i.fas {
  color: var(--vel-accent) !important;
}

/* Badge count next to filter label */
.view-filter-btns .badge {
  margin-left: auto !important;
  background: rgba(255,255,255,0.08) !important;
  color: var(--vel-text-3) !important;
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
}

.view-filter-btns .list-group-item.active .badge {
  background: rgba(59,158,255,0.2) !important;
  color: var(--vel-accent) !important;
}

/* iCheck custom radio (if used) */
.iradio_square-blue,
.icheckbox_square-blue {
  background: var(--vel-input) !important;
  border: 1px solid var(--vel-border) !important;
  border-radius: 4px !important;
}

.iradio_square-blue.checked,
.icheckbox_square-blue.checked {
  background: var(--vel-accent-btn) !important;
  border-color: var(--vel-accent-btn) !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: VIEW MESSAGE BUTTONS (emails page)
═══════════════════════════════════════════════════════ */

/* These are btn-default rendered in the table — override to teal */
.table-list .btn-default,
.table-list a.btn-default,
.table-list .btn {
  background: rgba(0,201,167,0.12) !important;
  border: 1px solid rgba(0,201,167,0.25) !important;
  color: #00c9a7 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
  transition: all 0.18s !important;
}

.table-list .btn-default:hover,
.table-list a.btn-default:hover,
.table-list .btn:hover {
  background: rgba(0,201,167,0.2) !important;
  color: #fff !important;
  border-color: rgba(0,201,167,0.4) !important;
  transform: translateY(-1px) !important;
}

/* Paid badge in invoice table */
.table-list .label-success,
.table-list .badge-success {
  background: var(--vel-green-bg) !important;
  color: var(--vel-green) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.table-list .label-danger,
.table-list .badge-danger {
  background: var(--vel-red-bg) !important;
  color: var(--vel-red) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
}

.table-list .label-warning,
.table-list .badge-warning {
  background: var(--vel-yellow-bg) !important;
  color: var(--vel-yellow) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
}

/* Status labels in services table */
.table-list .status {
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.status-active   { background: var(--vel-green-bg) !important; color: var(--vel-green) !important; }
.status-suspended{ background: var(--vel-red-bg) !important;   color: var(--vel-red) !important; }
.status-pending  { background: var(--vel-yellow-bg) !important;color: var(--vel-yellow) !important; }
.status-cancelled{ background: rgba(139,149,170,0.12) !important; color: #8b95aa !important; }

/* ═══════════════════════════════════════════════════════
   FIX: SERVICE CARD UPGRADE BUTTONS
   (vel-svc-footer links not working/visible)
═══════════════════════════════════════════════════════ */

/* Make sure upgrade links are always clickable and visible */
.vel-svc-footer {
  display: flex !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  position: relative !important;
  z-index: 5 !important;
}

.vel-svc-footer a {
  flex: 1 !important;
  text-align: center !important;
  padding: 9px 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #00c9a7 !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  transition: background 0.18s !important;
  cursor: pointer !important;
}

.vel-svc-footer a:last-child {
  border-right: none !important;
  color: #3b9eff !important;
}

.vel-svc-footer a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: SERVICES PAGE CARD GAME IMAGES
   Use CSS background-image fallbacks per group name
═══════════════════════════════════════════════════════ */

/* If Imgur images fail, these CSS backgrounds show instead */
.vel-svc-img-wrap {
  position: relative !important;
  height: 140px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #1a2035, #252d45) !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: SIDEBAR ACTIONS SECTION
═══════════════════════════════════════════════════════ */

/* "Place a New Order" and "View Available Addons" in sidebar */
.sidebar .list-group-item-action[href*="cart"],
.sidebar .list-group-item-action[href*="addon"] {
  color: var(--vel-accent) !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: EMAIL / INVOICE PAGE SEARCH INPUT WHITE
═══════════════════════════════════════════════════════ */

/* The search box above the datatable */
.primary-content input[type="search"],
.dataTables_filter input[type="search"],
.dataTables_filter input {
  background: var(--vel-input) !important;
  border: 1px solid var(--vel-border) !important;
  color: var(--vel-text-1) !important;
  border-radius: var(--vel-radius) !important;
  padding: 7px 10px 7px 14px !important;
}

/* Make the DataTable paginator sit on dark bg */
.dataTables_wrapper .dataTables_paginate {
  background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--vel-card) !important;
  border: 1px solid var(--vel-border) !important;
  color: var(--vel-text-2) !important;
  border-radius: var(--vel-radius) !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--vel-card-hover) !important;
  color: var(--vel-text-1) !important;
  border-color: var(--vel-border-hover) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--vel-accent-btn) !important;
  border-color: var(--vel-accent-btn) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--vel-text-3) !important;
  background: rgba(255,255,255,0.02) !important;
}

/* ═══════════════════════════════════════════════════════
   FIX v3: DATATABLES — DIRECT THEME.CSS OVERRIDES
   (Targeting rules that survive even after theme.min.css patch)
═══════════════════════════════════════════════════════ */

/* Nuclear option — override EVERY background on table rows */
.table-list tbody tr td,
.table-list tbody tr th,
table.table-list tbody td,
table.dataTable tbody td,
.dataTables_wrapper tbody td {
  background-color: #181c27 !important;
  color: #e8ecf4 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.table-list tbody tr:hover td,
table.table-list tbody tr:hover td,
.dataTables_wrapper tbody tr:hover td {
  background-color: rgba(255,255,255,0.03) !important;
}

table.table-list thead th,
.table-list thead th {
  background-color: #1c2030 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: #4d5870 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-weight: 600 !important;
}

/* The table wrapper box */
.dataTables_wrapper table.table-list,
.table-container .table-list {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* table-container div that wraps the datatable */
.table-container {
  background: transparent !important;
}

/* ── "View Message" button (btn-info in emails table) ── */
.table-list .btn-info,
.table-list a.btn-info,
table .btn-info {
  background: rgba(0,201,167,0.12) !important;
  border: 1px solid rgba(0,201,167,0.25) !important;
  color: #00c9a7 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
  transition: all 0.18s !important;
  white-space: nowrap !important;
}

.table-list .btn-info:hover,
table .btn-info:hover {
  background: rgba(0,201,167,0.22) !important;
  color: #fff !important;
  border-color: rgba(0,201,167,0.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,201,167,0.2) !important;
}

/* ── Also fix btn-default in tables (other buttons) ── */
.table-list .btn-default,
.table-list .btn-sm.btn-default {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #8b95aa !important;
  border-radius: 8px !important;
}

/* ── DataTable search box ── */
.dataTables_filter input,
.dataTables_filter input[type=search] {
  background: #141824 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #e8ecf4 !important;
  border-radius: 9px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
}

/* ── DataTable length select ── */
.dataTables_length select {
  background: #141824 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #e8ecf4 !important;
  border-radius: 8px !important;
}

/* ── DataTable info text ── */
.dataTables_info { color: #4d5870 !important; }
.dataTables_length label,
.dataTables_filter label { color: #4d5870 !important; }

/* ── Pagination ── */
.dataTables_paginate .paginate_button {
  background: #181c27 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #8b95aa !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  cursor: pointer !important;
}

.dataTables_paginate .paginate_button:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #e8ecf4 !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: #2d8ef0 !important;
  border-color: #2d8ef0 !important;
  color: #fff !important;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  color: #4d5870 !important;
  background: rgba(255,255,255,0.02) !important;
  cursor: default !important;
}

/* ── Responsive dtr child rows ── */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child td {
  background: rgba(255,255,255,0.02) !important;
}