/*
 * CoinsHosting WHMCS Theme – Dark Skin
 * Matches https://coinshosting.com/
 *
 * Load order: after theme.min.css — all !important rules here WIN.
 * Root bug fix: .primary-bg-color (class) beats body (element) in specificity,
 * so both must be targeted together.
 */

/* ─── 1. CSS VARIABLES ──────────────────────────────────────────────────────── */
:root {
  --ch-ink:          #06091f;
  --ch-ink-2:        #0b1030;
  --ch-ink-3:        #121a44;
  --ch-glass:        rgba(13, 18, 50, 0.55);
  --ch-glass-strong: rgba(13, 18, 50, 0.82);
  --ch-border:       rgba(255, 255, 255, 0.08);
  --ch-border-hover: rgba(255, 255, 255, 0.18);
  --ch-crypto:       #f7931a;
  --ch-crypto-2:     #ffb547;
  --ch-neon:         #00ffa3;
  --ch-electric:     #5b8cff;
  --ch-violet:       #9a6bff;
  --ch-white:        #ffffff;
  --ch-w80:          rgba(255, 255, 255, 0.80);
  --ch-w60:          rgba(255, 255, 255, 0.60);
  --ch-w40:          rgba(255, 255, 255, 0.40);
  --ch-w10:          rgba(255, 255, 255, 0.10);
}

/* ─── 2. HTML / BODY – Root background fix ──────────────────────────────────── */

/* Solid fallback so the browser never shows white */
html {
  background-color: var(--ch-ink) !important;
  color-scheme: dark;
}

/* body.primary-bg-color: class wins in specificity over bare `body`.
   Use element+class selector so it beats the theme's .primary-bg-color rule.
   Do NOT include bare .primary-bg-color here — WHMCS reuses that class on
   inline elements (e.g. <span class="primary-bg-color">) and applying the
   page gradient + fixed attachment to a span breaks layout. */
body,
body.primary-bg-color {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--ch-white) !important;
  background:
    radial-gradient(1100px 600px at 80% -10%,  rgba(247,147,26,0.09),  transparent 60%),
    radial-gradient(900px  500px at -10%  30%,  rgba(91,140,255,0.09),  transparent 60%),
    radial-gradient(1200px 700px at 50%  120%,  rgba(154,107,255,0.09), transparent 60%),
    var(--ch-ink) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Neutralise .primary-bg-color on any non-body element (spans, divs etc.)
   so they don't inherit the page gradient. */
*:not(body).primary-bg-color {
  background: transparent !important;
  background-attachment: initial !important;
}

/* ─── 3. TYPOGRAPHY ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  color: var(--ch-white) !important;
  font-weight: 700;
}

p, span, li, dt, dd, blockquote {
  color: var(--ch-w80);
}

label, .form-control-label, .col-form-label {
  color: var(--ch-w80) !important;
}

small, .small, .text-muted {
  color: var(--ch-w60) !important;
}

a {
  color: var(--ch-crypto-2) !important;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--ch-crypto) !important;
  text-decoration: none;
}

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

code, pre, kbd, samp {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace !important;
  background: rgba(255,255,255,0.07) !important;
  color: var(--ch-neon) !important;
  border-radius: 6px;
}

pre {
  padding: 1rem !important;
  border: 1px solid var(--ch-border) !important;
}

/* ─── 4. HEADER ──────────────────────────────────────────────────────────────── */

header.header {
  background: rgba(6, 9, 31, 0.72) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
}

/* Topbar (logged-in notifications bar) */
header.header .topbar {
  background: linear-gradient(90deg,
    rgba(247,147,26,0.10),
    rgba(154,107,255,0.10),
    rgba(91,140,255,0.10)
  ) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  color: var(--ch-w80) !important;
}
header.header .topbar .btn,
header.header .topbar .active-client .btn {
  color: var(--ch-w80) !important;
}
header.header .topbar .active-client .input-group-text {
  color: var(--ch-w60) !important;
  background-color: transparent !important;
  border: 0 !important;
}
header.header .topbar .active-client .btn.btn-active-client span {
  border-bottom: 1px dashed rgba(247,147,26,0.50) !important;
}

/* Main navbar */
header.header .navbar,
header.header .main-navbar-wrapper {
  background: transparent !important;
}
header.header .navbar-brand,
header.header .navbar-brand:hover,
header.header .navbar-brand:focus {
  color: var(--ch-white) !important;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
}
header.header .navbar a,
header.header .navbar-nav a {
  color: var(--ch-w80) !important;
  font-size: 14.5px;
  transition: color 0.2s ease;
}
header.header .navbar a:hover,
header.header .navbar-nav a:hover {
  color: var(--ch-white) !important;
}
/* Animated underline on nav links */
header.header .navbar-nav > li > a {
  position: relative;
}
header.header .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  left: 0.5rem; right: 0.5rem; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ch-crypto), var(--ch-crypto-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  border-radius: 2px;
}
header.header .navbar-nav > li > a:hover::after,
header.header .navbar-nav > li.active > a::after {
  transform: scaleX(1);
}
header.header .navbar-nav > li.active > a {
  color: var(--ch-white) !important;
}

/* Dropdown in navbar */
header.header .dropdown-menu {
  background: var(--ch-glass-strong) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--ch-border-hover) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.7) !important;
}
header.header .dropdown-item {
  color: var(--ch-w80) !important;
  border-radius: 8px;
  margin: 2px 4px;
}
header.header .dropdown-item:hover,
header.header .dropdown-item:focus {
  background: rgba(255,255,255,0.07) !important;
  color: var(--ch-white) !important;
}
header.header .dropdown-item.active,
header.header .dropdown-item:active {
  background: rgba(247,147,26,0.18) !important;
  color: var(--ch-crypto-2) !important;
}

/* Search bar */
header.header .search {
  border: 1px solid var(--ch-border-hover) !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 8px !important;
}
header.header .search .btn,
header.header .search .form-control {
  background: transparent !important;
  color: var(--ch-w80) !important;
  border: 0 !important;
}
header.header .search .form-control::placeholder { color: var(--ch-w40) !important; }
header.header .search:focus-within {
  border-color: rgba(247,147,26,0.50) !important;
}

/* Cart/toolbar icon button */
header.header .toolbar .nav-link {
  border: 1px solid var(--ch-border-hover) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--ch-w80) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}
header.header .toolbar .nav-link:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.30) !important;
  color: var(--ch-white) !important;
}
header.header .toolbar .nav-link .badge {
  background-color: var(--ch-crypto) !important;
  color: var(--ch-ink) !important;
}

/* Hamburger */
header.header .btn {
  color: var(--ch-w80) !important;
}
header.header .btn.focus,
header.header .btn:focus {
  box-shadow: none !important;
}

/* ─── 5. BREADCRUMB ──────────────────────────────────────────────────────────── */

.master-breadcrumb {
  background: rgba(11, 16, 48, 0.60) !important;
  border-bottom: 1px solid var(--ch-border) !important;
}
.master-breadcrumb .breadcrumb {
  background: transparent !important;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a {
  color: var(--ch-w60) !important;
}
.master-breadcrumb .breadcrumb-item.active {
  color: var(--ch-w80) !important;
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ch-w40) !important;
}

/* ─── 6. MAIN BODY SECTION ───────────────────────────────────────────────────── */

#main-body {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* ─── 7. CARDS & PANELS ──────────────────────────────────────────────────────── */

/* All Bootstrap card backgrounds */
.card,
.mc-promo-manage,
.mc-promo-login {
  background: var(--ch-glass) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 16px !important;
  color: var(--ch-w80) !important;
}
.card-header,
.mc-promo-manage .panel-heading,
.mc-promo-login .panel-heading {
  background: rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  color: var(--ch-white) !important;
  border-radius: 16px 16px 0 0 !important;
}
.card-body,
.mc-promo-manage .content,
.mc-promo-login .content {
  background: transparent !important;
}
.card-footer {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid var(--ch-border) !important;
  border-radius: 0 0 16px 16px !important;
}
.card-title,
.mc-promo-manage .panel-heading h3,
.mc-promo-login .panel-heading h3,
.promo-container .header h3 {
  color: var(--ch-white) !important;
}
.card:hover,
.mc-promo-manage:hover,
.mc-promo-login:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -15px rgba(0,0,0,0.55) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Old Bootstrap 3-style panels */
.panel,
.promo-container {
  background: var(--ch-glass) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.panel-heading,
.promo-container .header {
  background: rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  color: var(--ch-white) !important;
  border-radius: 14px 14px 0 0 !important;
}
.panel-body { background: transparent !important; }
.panel-footer {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid var(--ch-border) !important;
  border-radius: 0 0 14px 14px !important;
}

/* Jumbotron */
.jumbotron {
  background: var(--ch-glass) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 16px !important;
  color: var(--ch-w80) !important;
}

/* ─── 8. FORMS & INPUTS ──────────────────────────────────────────────────────── */

.form-control,
.custom-select {
  background-color: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--ch-white) !important;
  border-radius: 8px !important;
}
.form-control::placeholder { color: var(--ch-w40) !important; }
.form-control:focus,
.custom-select:focus {
  background-color: rgba(255,255,255,0.09) !important;
  border-color: rgba(247,147,26,0.55) !important;
  color: var(--ch-white) !important;
  box-shadow: 0 0 0 3px rgba(247,147,26,0.15) !important;
}

.input-group-text {
  background-color: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--ch-w80) !important;
}

select.form-control option,
.custom-select option {
  background-color: var(--ch-ink-2);
  color: var(--ch-white);
}

/* Custom file upload */
.custom-file-label {
  background-color: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--ch-w80) !important;
  border-radius: 8px !important;
}
.custom-file-label::after {
  background-color: rgba(255,255,255,0.12) !important;
  color: var(--ch-w80) !important;
  border-left: 1px solid rgba(255,255,255,0.14) !important;
}

/* Checkbox / radio */
.form-check-input { accent-color: var(--ch-crypto); }

/* Form group text */
.form-group label { color: var(--ch-w80) !important; }

/* Markdown editor */
.md-editor {
  border: 1px solid var(--ch-border) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
}
.md-editor > .btn-toolbar {
  background: rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid var(--ch-border) !important;
}
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
  background: rgba(255,255,255,0.03) !important;
  color: var(--ch-w80) !important;
  border-top: 1px solid var(--ch-border) !important;
  border-bottom: 1px solid var(--ch-border) !important;
}

/* ─── 9. BUTTONS ─────────────────────────────────────────────────────────────── */

/* Primary / CTA = crypto orange gradient */
.btn-primary {
  background: linear-gradient(135deg, #ffb547 0%, #f7931a 50%, #e67e00 100%) !important;
  border: none !important;
  color: var(--ch-ink) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 24px -6px rgba(247,147,26,0.55) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -8px rgba(247,147,26,0.75) !important;
  filter: brightness(1.06);
  color: var(--ch-ink) !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
  background: rgba(247,147,26,0.35) !important;
  color: rgba(6,9,31,0.55) !important;
  box-shadow: none !important;
}

/* Default / ghost buttons */
.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--ch-w80) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover {
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(255,255,255,0.32) !important;
  color: var(--ch-white) !important;
}
/* Disabled state – theme.css has !important whites here */
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--ch-w40) !important;
}

/* Info = electric blue */
.btn-info {
  background: linear-gradient(135deg, #7ca8ff, var(--ch-electric)) !important;
  border: none !important;
  color: var(--ch-ink) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.btn-info:hover { filter: brightness(1.08) !important; color: var(--ch-ink) !important; }

/* Success = neon green */
.btn-success {
  background: linear-gradient(135deg, #00ffa3, #00c97e) !important;
  border: none !important;
  color: var(--ch-ink) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* Danger */
.btn-danger {
  background: linear-gradient(135deg, #ff6b81, #c9002d) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* Warning */
.btn-warning {
  background: linear-gradient(135deg, var(--ch-crypto-2), var(--ch-crypto)) !important;
  border: none !important;
  color: var(--ch-ink) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* Link buttons */
.btn-link {
  color: var(--ch-crypto-2) !important;
}
.btn-link:hover {
  color: var(--ch-crypto) !important;
}

/* ─── 10. TABLES ─────────────────────────────────────────────────────────────── */

.table {
  color: var(--ch-w80) !important;
}
.table thead th {
  color: var(--ch-w60) !important;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
}
.table td,
.table th {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--ch-w80) !important;
}
.table-bordered,
.table-bordered th,
.table-bordered td {
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ch-white) !important;
}
.table-striped tbody tr:nth-of-type(odd) td,
.table-striped tbody tr:nth-of-type(odd) th {
  background: rgba(255,255,255,0.025) !important;
}
.table-dark {
  background: rgba(255,255,255,0.05) !important;
}

/* Override the @media print rule that whites out table cells */
@media print {
  .table td,
  .table th {
    background-color: transparent !important;
    color: #000 !important;
  }
}

/* ─── 11. NAVIGATION – Tabs & Pills ─────────────────────────────────────────── */

.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.nav-tabs .nav-link {
  color: var(--ch-w60) !important;
  border: 1px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  background: transparent !important;
  transition: all 0.2s ease;
}
.nav-tabs .nav-link:hover {
  color: var(--ch-w80) !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) rgba(255,255,255,0.08) transparent !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background: rgba(247,147,26,0.12) !important;
  border-color: rgba(247,147,26,0.30) rgba(247,147,26,0.30) transparent !important;
  color: var(--ch-crypto-2) !important;
}
.tab-content {
  background: transparent !important;
}

.nav-pills .nav-link {
  color: var(--ch-w60) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}
.nav-pills .nav-link:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--ch-white) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: rgba(247,147,26,0.18) !important;
  color: var(--ch-crypto-2) !important;
}

/* Responsive tabs (custom WHMCS component) */
.responsive-tabs-sm .nav-item a {
  color: var(--ch-w60) !important;
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.responsive-tabs-sm .nav-item a.active,
.responsive-tabs-sm .nav-item a:active {
  background: rgba(247,147,26,0.15) !important;
  color: var(--ch-crypto-2) !important;
  border-color: rgba(247,147,26,0.30) !important;
  font-weight: 600;
}
.responsive-tabs-sm .nav-item:first-child a {
  border-radius: 4px 0 0 0 !important;
}
.responsive-tabs-sm .nav-item:last-child a {
  border-radius: 0 4px 0 0 !important;
}

/* ─── 12. MODALS ─────────────────────────────────────────────────────────────── */

.modal-content {
  background: var(--ch-glass-strong) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  color: var(--ch-w80) !important;
}
.modal-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  border-radius: 16px 16px 0 0 !important;
}
.modal-title { color: var(--ch-white) !important; }
.modal-body   { background: transparent !important; color: var(--ch-w80) !important; }
.modal-footer {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid var(--ch-border) !important;
  border-radius: 0 0 16px 16px !important;
}
.modal-backdrop.show { opacity: 0.75 !important; }
.close {
  color: var(--ch-w60) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.close:hover { color: var(--ch-white) !important; }

/* Language / Currency modal override (uses .modal-localisation) */
.modal-localisation .modal-content {
  background: var(--ch-ink-2) !important;
}
.modal-localisation .modal-body {
  color: var(--ch-w80) !important;
}
.modal-localisation .h5 { color: var(--ch-white) !important; }
.modal-localisation .item-selector .item {
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--ch-w80) !important;
}
.modal-localisation .item-selector .item.active {
  background: rgba(247,147,26,0.18) !important;
  border-color: rgba(247,147,26,0.35) !important;
  color: var(--ch-crypto-2) !important;
}

/* ─── 13. DROPDOWNS ──────────────────────────────────────────────────────────── */

.dropdown-menu {
  background: var(--ch-glass-strong) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.65) !important;
}
.dropdown-item {
  color: var(--ch-w80) !important;
  border-radius: 8px;
  margin: 2px 4px;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(255,255,255,0.07) !important;
  color: var(--ch-white) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background: rgba(247,147,26,0.18) !important;
  color: var(--ch-crypto-2) !important;
}
.dropdown-divider {
  border-top: 1px solid var(--ch-border) !important;
}
.dropdown-header {
  color: var(--ch-w40) !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─── 14. ALERTS ─────────────────────────────────────────────────────────────── */

.alert {
  border-radius: 10px !important;
  border-width: 1px !important;
}
.alert-success {
  background: rgba(0,255,163,0.09) !important;
  border-color: rgba(0,255,163,0.30) !important;
  color: var(--ch-neon) !important;
}
.alert-success .alert-link { color: #00cc83 !important; }
.alert-warning {
  background: rgba(247,147,26,0.10) !important;
  border-color: rgba(247,147,26,0.35) !important;
  color: var(--ch-crypto-2) !important;
}
.alert-danger {
  background: rgba(220,53,69,0.10) !important;
  border-color: rgba(220,53,69,0.35) !important;
  color: #ff7087 !important;
}
.alert-info {
  background: rgba(91,140,255,0.10) !important;
  border-color: rgba(91,140,255,0.35) !important;
  color: #8fb3ff !important;
}
.alert-primary {
  background: rgba(247,147,26,0.10) !important;
  border-color: rgba(247,147,26,0.35) !important;
  color: var(--ch-crypto-2) !important;
}

/* ─── 15. BADGES ─────────────────────────────────────────────────────────────── */

.badge-primary { background: var(--ch-electric) !important; color: var(--ch-white) !important; }
.badge-info    { background: var(--ch-electric) !important; color: var(--ch-white) !important; }
.badge-success { background: var(--ch-neon)     !important; color: var(--ch-ink)   !important; }
.badge-warning { background: var(--ch-crypto)   !important; color: var(--ch-ink)   !important; }
.badge-danger  { background: #c9002d            !important; color: var(--ch-white) !important; }
.badge-secondary,
.badge-light   { background: rgba(255,255,255,0.14) !important; color: var(--ch-white) !important; }
.badge-dark    { background: rgba(255,255,255,0.08) !important; color: var(--ch-w80)   !important; }

/* ─── 16. LIST GROUP ─────────────────────────────────────────────────────────── */

.list-group-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--ch-w80) !important;
}
.list-group-item:first-child { border-radius: 10px 10px 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 10px 10px !important; }
.list-group-item.active {
  background: rgba(247,147,26,0.16) !important;
  border-color: rgba(247,147,26,0.30) !important;
  color: var(--ch-crypto-2) !important;
}
.list-group-item:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--ch-white) !important;
}
.list-group-item-action:focus {
  background: rgba(255,255,255,0.06) !important;
}

/* ─── 17. PAGINATION ─────────────────────────────────────────────────────────── */

.page-item .page-link {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--ch-w80) !important;
  border-radius: 8px !important;
  margin: 0 2px;
}
.page-item .page-link:hover {
  background: rgba(255,255,255,0.10) !important;
  color: var(--ch-white) !important;
}
.page-item.active .page-link {
  background: linear-gradient(135deg, #ffb547, #f7931a) !important;
  border-color: transparent !important;
  color: var(--ch-ink) !important;
  font-weight: 600;
}
.page-item.disabled .page-link {
  background: rgba(255,255,255,0.03) !important;
  color: var(--ch-w40) !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* ─── 18. SIDEBAR ────────────────────────────────────────────────────────────── */

.sidebar .card { background: rgba(11, 16, 48, 0.65) !important; }

/* ─── 19. FOOTER ─────────────────────────────────────────────────────────────── */

footer.footer {
  background-color: var(--ch-ink-2) !important;
  border-top: 1px solid var(--ch-border) !important;
  color: var(--ch-w80) !important;
}
footer.footer .nav-link {
  color: var(--ch-w60) !important;
  transition: color 0.2s ease;
}
footer.footer .nav-link:hover { color: var(--ch-crypto-2) !important; }
footer.footer .btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--ch-w80) !important;
  border-radius: 8px !important;
}
footer.footer .btn:hover {
  background: rgba(255,255,255,0.11) !important;
  color: var(--ch-white) !important;
}
footer.footer .copyright,
footer.footer .notices {
  color: var(--ch-w40) !important;
}

/* ─── 20. POPOVER (Notifications) ────────────────────────────────────────────── */

.popover {
  background: var(--ch-glass-strong) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  color: var(--ch-w80) !important;
}
.popover-header {
  background: rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  color: var(--ch-white) !important;
  border-radius: 12px 12px 0 0 !important;
}
.popover-body { color: var(--ch-w80) !important; }
/* Arrow color patch */
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^=bottom] .arrow::after {
  border-bottom-color: var(--ch-ink-2) !important;
}
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^=top] .arrow::after {
  border-top-color: var(--ch-ink-2) !important;
}

.client-alerts li { border-bottom: 1px solid var(--ch-border) !important; }
.client-alerts li a { color: var(--ch-w80) !important; }
.client-alerts li a:hover {
  color: var(--ch-crypto-2) !important;
  background: rgba(255,255,255,0.05) !important;
}
.client-alerts li.none { color: var(--ch-w40) !important; }

/* ─── 21. TOOLTIPS ───────────────────────────────────────────────────────────── */

.tooltip-inner {
  background-color: var(--ch-ink-2) !important;
  color: var(--ch-w80) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
}
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^=top] .arrow::before {
  border-top-color: var(--ch-ink-2) !important;
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
  border-bottom-color: var(--ch-ink-2) !important;
}

/* ─── 22. PROGRESS ───────────────────────────────────────────────────────────── */

.progress {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  height: 8px;
}
.progress-bar {
  background: linear-gradient(90deg, var(--ch-crypto), var(--ch-crypto-2)) !important;
  border-radius: 999px !important;
}

/* ─── 23. BACKGROUND UTILITY OVERRIDES ───────────────────────────────────────── */

/* Bootstrap's .bg-white has !important — we match it */
.bg-white  { background-color: rgba(255,255,255,0.06) !important; }
.bg-light  { background-color: rgba(255,255,255,0.05) !important; }
.bg-dark   { background-color: var(--ch-ink-2)        !important; }
.text-dark { color: var(--ch-w80)                     !important; }
.text-body { color: var(--ch-w80)                     !important; }
.border    { border-color: var(--ch-border)           !important; }
.border-top,
.border-bottom,
.border-left,
.border-right { border-color: var(--ch-border)        !important; }

/* ─── 24. STORE / CART PAGES ──────────────────────────────────────────────────── */

/* Landing page product options */
.landing-page .hero { color: var(--ch-white) !important; }
.landing-page .hero h2,
.landing-page .hero h3 { color: var(--ch-white) !important; }
.landing-page .product-options { background: transparent !important; }
.landing-page .product-options .item {
  background: var(--ch-glass) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px);
}
.landing-page .product-options h4,
.landing-page .product-options span,
.landing-page .product-options p { color: var(--ch-w80) !important; }
.landing-page .product-options .price { color: var(--ch-crypto-2) !important; }
.landing-page .product-options .item .btn {
  background: rgba(255,255,255,0.10) !important;
  color: var(--ch-white) !important;
}
.landing-page .navbar .navbar-nav > li > a {
  color: var(--ch-w80) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.landing-page .navbar .navbar-nav > li.active > a {
  background: rgba(247,147,26,0.15) !important;
  color: var(--ch-crypto-2) !important;
}
.landing-page .content-block { color: var(--ch-w80) !important; }

/* Store order box, product list */
.order-box,
.store-product-list .product,
.product-addons-container,
.store-order-container {
  background: var(--ch-glass) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 14px !important;
  color: var(--ch-w80) !important;
  backdrop-filter: blur(14px);
}

.store-order-container .store-domain-tabs li a {
  color: var(--ch-w60) !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.store-order-container .store-domain-tabs li a.active {
  background: rgba(247,147,26,0.15) !important;
  color: var(--ch-crypto-2) !important;
  border-color: rgba(247,147,26,0.30) !important;
}

/* ─── 25. DOMAIN SEARCH ──────────────────────────────────────────────────────── */

/* bg-white class removed from template (domain-search.tpl) so this no longer
   fights Bootstrap specificity. Styles apply cleanly to .home-domain-search. */
.home-domain-search {
  background: rgba(13,18,50,0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 16px !important;
  color: var(--ch-white) !important;
}
.home-domain-search *,
.home-domain-search h2,
.home-domain-search p,
.home-domain-search label {
  color: var(--ch-white) !important;
}
/* ID selector (specificity 1,0,0) definitively beats any class-level rule */
#frmDomainHomepage .form-control,
#frmDomainHomepage input[type="text"],
#frmDomainHomepage input[name="domain"] {
  background-color: rgba(13, 18, 50, 0.80) !important;
  color: var(--ch-white) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 8px 0 0 8px !important;
  -webkit-text-fill-color: var(--ch-white) !important;
}
#frmDomainHomepage .form-control::placeholder,
#frmDomainHomepage input[name="domain"]::placeholder {
  color: rgba(255,255,255,0.40) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.40) !important;
}
/* Override browser autofill which injects its own background via box-shadow */
#frmDomainHomepage input:-webkit-autofill,
#frmDomainHomepage input:-webkit-autofill:hover,
#frmDomainHomepage input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px rgba(13, 18, 50, 0.95) inset !important;
  -webkit-text-fill-color: var(--ch-white) !important;
  caret-color: var(--ch-white);
}
.home-domain-search .form-control {
  background-color: rgba(13, 18, 50, 0.80) !important;
  color: var(--ch-white) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 8px 0 0 8px !important;
}
.home-domain-search .form-control::placeholder {
  color: rgba(255,255,255,0.40) !important;
}
.home-domain-search .input-group-append {
  background: transparent !important;
}
.home-domain-search .tld-logos {
  list-style: none !important;
  padding: 0 !important;
}
.home-domain-search .tld-logos li {
  color: var(--ch-w60) !important;
}
.home-domain-search .btn-link {
  color: var(--ch-crypto-2) !important;
}

/* ─── 26. ACTION ICON BUTTONS (card-accent links on homepage) ────────────────── */

/* theme.css: .action-icon-btns a { background-color: #fff; color: #666 }
   Never overridden — white cards with grey text. Replace with dark glass. */
.action-icon-btns a {
  background: rgba(13,18,50,0.65) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-w80) !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}
.action-icon-btns a .ico-container i {
  color: var(--ch-w40) !important;
  transition: color 0.25s ease !important;
}
.action-icon-btns a:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--ch-border-hover) !important;
  color: var(--ch-white) !important;
  transform: translateY(-4px);
}
.action-icon-btns a:hover .ico-container i {
  color: var(--ch-crypto-2) !important;
}

/* Keep each card-accent border-top colour vivid on dark background */
.action-icon-btns a.card-accent-teal          { border-top-color: #00aba9 !important; }
.action-icon-btns a.card-accent-pomegranate   { border-top-color: #c0392b !important; }
.action-icon-btns a.card-accent-sun-flower    { border-top-color: #f1c40f !important; }
.action-icon-btns a.card-accent-asbestos      { border-top-color: #7f8c8d !important; }
.action-icon-btns a.card-accent-green         { border-top-color: #5cb85c !important; }
.action-icon-btns a.card-accent-midnight-blue { border-top-color: var(--ch-electric) !important; }
.action-icon-btns a.card-accent-gold          { border-top-color: var(--ch-crypto-2) !important; }
.action-icon-btns a.card-accent-blue          { border-top-color: var(--ch-electric) !important; }
.action-icon-btns a.card-accent-purple        { border-top-color: var(--ch-violet)   !important; }
.action-icon-btns a.card-accent-amethyst      { border-top-color: var(--ch-violet)   !important; }
.action-icon-btns a.card-accent-turquoise     { border-top-color: #1abc9c !important; }
.action-icon-btns a.card-accent-emerald       { border-top-color: #2ecc71 !important; }

/* ─── 27. ANNOUNCEMENTS ──────────────────────────────────────────────────────── */

.announcement {
  border-bottom: 1px solid var(--ch-border) !important;
  padding-bottom: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.announcement:last-child {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Title */
.announcement h1 { font-size: 1.4rem !important; }
.announcement h1,
.announcement h1 a { color: var(--ch-white) !important; }
.announcement h1 a:hover { color: var(--ch-crypto-2) !important; }

/* Date/meta row — .text-muted on li is overridden here with higher specificity */
.announcements .list-inline { margin-bottom: 0.5rem !important; }
.announcements .list-inline-item {
  color: var(--ch-w60) !important;
  font-size: 0.85rem !important;
}
.announcements .list-inline-item i,
.announcements .list-inline-item .fa,
.announcements .list-inline-item .far,
.announcements .list-inline-item .fas {
  color: var(--ch-w40) !important;
  margin-right: 4px;
}

/* Body — WHMCS injects arbitrary HTML; .announcement-body wrapper
   (added to announcements.tpl) lets us override inline styles via specificity */
article.announcement-body {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ch-w80) !important;
}
/* Force every descendant — catches inline color="..." and style="color:#333" */
article.announcement-body *,
article.announcement-body p,
article.announcement-body div,
article.announcement-body span,
article.announcement-body table,
article.announcement-body td,
article.announcement-body tr {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ch-w80) !important;
}
/* But keep links readable */
article.announcement-body a {
  color: var(--ch-crypto-2) !important;
}
article.announcement-body a:hover {
  color: var(--ch-crypto) !important;
}

/* ─── 26. INVOICE PAGES ───────────────────────────────────────────────────────── */

/* invoice.css resets body to #fff — re-apply our dark base */
body.invoice-body,
.invoice-container {
  background-color: var(--ch-ink) !important;
  color: var(--ch-w80) !important;
}
.invoice-table thead th {
  background: rgba(255,255,255,0.06) !important;
  color: var(--ch-w60) !important;
  border-bottom: 2px solid rgba(255,255,255,0.10) !important;
}
.invoice-table tfoot tr td {
  background: rgba(255,255,255,0.04) !important;
}

/* ─── 27. OAUTH PAGES ────────────────────────────────────────────────────────── */

.oauth-container,
.oauth-card {
  background: var(--ch-glass) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 16px !important;
  color: var(--ch-w80) !important;
}

/* ─── 28. MISC WHMCS COMPONENTS ──────────────────────────────────────────────── */

/* Flash messages */
.flashmessage,
.flash-message { border-radius: 10px !important; }

/* Ticket view */
.ticket-message,
.ticket-reply {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 12px !important;
  color: var(--ch-w80) !important;
}

/* Knowledge base */
.kbarticle-tags .badge { background: rgba(255,255,255,0.10) !important; color: var(--ch-w80) !important; }

/* Downloads */
.download-item { border-bottom: 1px solid var(--ch-border) !important; }

/* Active product panel */
.active-product-panel,
.active-products-services-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 12px !important;
}

/* Admin masquerade bar */
.btn-return-to-admin {
  background: rgba(247,147,26,0.85) !important;
  color: var(--ch-ink) !important;
}
.btn-return-to-admin:hover {
  background: var(--ch-crypto) !important;
  color: var(--ch-ink) !important;
}

/* Error pages */
.error-page { color: var(--ch-w80) !important; }

/* ─── 29. SCROLLBAR ──────────────────────────────────────────────────────────── */

::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb    { background: rgba(255,255,255,0.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(247,147,26,0.45); }

/* ─── 30. SELECTION & FOCUS ──────────────────────────────────────────────────── */

::selection { background: rgba(247,147,26,0.30); color: var(--ch-white); }
*:focus-visible { outline: 2px solid rgba(247,147,26,0.55) !important; outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   ORDER FORM (#order-standard_cart) — DARK THEME
   The standard_cart template injects its own light-themed CSS after our file.
   These rules override that CSS to make the checkout/store pages dark.
   IMPORTANT: backdrop-filter and transform on cards are explicitly removed here
   because standard_cart uses CSS floats — stacking context breaks the layout.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Reset layout-breaking overrides inside order form ── */
#order-standard_cart .card,
#order-standard_cart .panel,
#order-standard_cart .mc-promo-manage,
#order-standard_cart .mc-promo-login {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transition: none !important;
}
#order-standard_cart .card:hover,
#order-standard_cart .panel:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── Sidebar list items: restore flat corners ── */
#order-standard_cart .list-group-item,
#order-standard_cart .cart-sidebar .list-group-item {
  background: rgba(255,255,255,0.05) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  color: var(--ch-w80) !important;
  padding: 8px 15px;
}
#order-standard_cart .list-group-item:first-child,
#order-standard_cart .list-group-item:last-child {
  border-radius: 0 !important;
}
#order-standard_cart .list-group-item:last-child {
  border-bottom: 0 !important;
}
#order-standard_cart .list-group-item.active,
#order-standard_cart .list-group-item-action:active {
  background: rgba(247,147,26,0.18) !important;
  color: var(--ch-crypto-2) !important;
  font-weight: 600;
}
#order-standard_cart .list-group-item:hover {
  background: rgba(255,255,255,0.08) !important;
  color: var(--ch-white) !important;
}
#order-standard_cart .list-group-item a {
  color: var(--ch-w80) !important;
}

/* ── Panels/Cards inside order form ── */
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .card-sidebar {
  background: rgba(13,18,50,0.70) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
}
#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
  background: rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--ch-white) !important;
}
#order-standard_cart .panel-body,
#order-standard_cart .card-body {
  background: transparent !important;
  color: var(--ch-w80) !important;
}
#order-standard_cart .panel-title,
#order-standard_cart .card-title {
  color: var(--ch-white) !important;
}
#order-standard_cart h3 {
  color: var(--ch-white) !important;
}

/* ── Product listing cards ── */
#order-standard_cart .products .product {
  background: rgba(13,18,50,0.65) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: var(--ch-w80) !important;
}
#order-standard_cart .products .product header {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
#order-standard_cart .products .product header span {
  color: var(--ch-white) !important;
}
#order-standard_cart .products .product header .qty {
  color: var(--ch-w60) !important;
}
#order-standard_cart .products .product div.product-pricing span.price {
  color: var(--ch-crypto-2) !important;
  font-weight: 700;
}

/* ── Product info bar ── */
#order-standard_cart .product-info {
  background: rgba(255,255,255,0.05) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--ch-w80) !important;
}
#order-standard_cart .product-info .product-title {
  color: var(--ch-white) !important;
}

/* ── Sub-heading dividers ──
   Original uses height:0 + border-top + position:relative span — long text
   overflows the zero-height container and overlaps elements below.
   Replace with flexbox "line with centred label" pattern. */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless {
  height: auto !important;
  border-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  margin-bottom: 28px !important;
  overflow: visible !important;
}
#order-standard_cart .sub-heading::before,
#order-standard_cart .sub-heading::after {
  content: '' !important;
  flex: 1 1 0 !important;
  height: 1px !important;
  background: rgba(255,255,255,0.10) !important;
  display: block !important;
}
#order-standard_cart .sub-heading-borderless::before,
#order-standard_cart .sub-heading-borderless::after {
  display: none !important;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
  /* Reset the original positioning hack */
  position: static !important;
  top: auto !important;
  display: block !important;
  /* Constrain and wrap */
  flex: 0 1 auto !important;
  max-width: 70% !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  padding: 2px 8px !important;
  background: transparent !important;
  color: var(--ch-crypto-2) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* ── Order summary sidebar ── */
#order-standard_cart .order-summary {
  background: rgba(247,147,26,0.15) !important;
  border-bottom: 3px solid rgba(247,147,26,0.40) !important;
  border-radius: 8px !important;
}
#order-standard_cart .order-summary h2 {
  color: var(--ch-crypto-2) !important;
}
#order-standard_cart .summary-container {
  background: rgba(13,18,50,0.70) !important;
  color: var(--ch-w80) !important;
  border-radius: 0 0 8px 8px !important;
}
#order-standard_cart .order-summary .product-name {
  color: var(--ch-white) !important;
}
#order-standard_cart .order-summary .product-group {
  color: var(--ch-w60) !important;
}
#order-standard_cart .order-summary .summary-totals {
  border-top-color: rgba(255,255,255,0.10) !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}
#order-standard_cart .order-summary .total-due-today .amt {
  color: var(--ch-crypto-2) !important;
}
#order-standard_cart .order-summary .recurring-charges {
  color: var(--ch-w60) !important;
}
#order-standard_cart .order-summary .btn-continue-shopping {
  color: var(--ch-w80) !important;
}

/* ── Labels and text ── */
#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc {
  color: var(--ch-w80) !important;
}
#order-standard_cart .panel-addon .panel-body label {
  color: var(--ch-white) !important;
}
#order-standard_cart .field-help-text {
  color: var(--ch-w60) !important;
}
#order-standard_cart .info-text-sm {
  color: var(--ch-w60) !important;
}

/* ── Addon panels ── */
#order-standard_cart .panel-addon .panel-price {
  background: rgba(255,255,255,0.08) !important;
  color: var(--ch-w80) !important;
}
#order-standard_cart .panel-addon .panel-add {
  background: linear-gradient(135deg, #00ffa3, #00c97e) !important;
  color: var(--ch-ink) !important;
  border-radius: 0 0 6px 6px !important;
}

/* ── Form controls inside order form ── */
#order-standard_cart .form-control,
#order-standard_cart .field {
  background-color: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--ch-white) !important;
  border-radius: 6px !important;
}
#order-standard_cart .form-control:focus,
#order-standard_cart .field:focus {
  background-color: rgba(255,255,255,0.10) !important;
  border-color: rgba(247,147,26,0.55) !important;
  box-shadow: 0 0 0 3px rgba(247,147,26,0.12) !important;
}
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly],
#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly] {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--ch-w40) !important;
}
#order-standard_cart .form-control::placeholder,
#order-standard_cart .field::placeholder {
  color: var(--ch-w40) !important;
}
#order-standard_cart .field-icon i {
  color: var(--ch-w60) !important;
}

/* ── Domain selection options ── */
#order-standard_cart .domain-selection-options .option {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: var(--ch-w80) !important;
}
#order-standard_cart .domain-selection-options .option-selected {
  background: rgba(247,147,26,0.12) !important;
  border-color: rgba(247,147,26,0.30) !important;
}

/* ── Credit / payment containers ── */
#order-standard_cart .apply-credit-container {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: var(--ch-w80) !important;
}
#order-standard_cart .cc-input-container {
  background: rgba(13,18,50,0.65) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
  color: var(--ch-w80) !important;
}
#order-standard_cart .cc-input-container .existing-cc-grid {
  color: var(--ch-w80) !important;
}

/* ── Cart item list ── */
#order-standard_cart .view-cart-items-header {
  background: rgba(247,147,26,0.20) !important;
  color: var(--ch-crypto-2) !important;
  border-radius: 8px 8px 0 0 !important;
}
#order-standard_cart .view-cart-items .item {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ch-w80) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#order-standard_cart .view-cart-items .item:nth-child(even) {
  background: rgba(255,255,255,0.07) !important;
}
#order-standard_cart .view-cart-items .item-domain {
  color: var(--ch-electric) !important;
}
#order-standard_cart .btn-remove-from-cart {
  color: var(--ch-w60) !important;
}
#order-standard_cart .btn-remove-from-cart:hover {
  color: #ff6b81 !important;
}

/* ── Cart tabs ── */
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded=true],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true] {
  background: rgba(247,147,26,0.12) !important;
  border-color: rgba(247,147,26,0.25) rgba(247,147,26,0.25) transparent !important;
  color: var(--ch-crypto-2) !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
  background: rgba(13,18,50,0.55) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 0 8px 8px !important;
  color: var(--ch-w80) !important;
}

/* ── Promotion code box ── */
#order-standard_cart .view-cart-promotion-code {
  background: rgba(255,255,255,0.04) !important;
  border: 1px dashed rgba(255,255,255,0.18) !important;
  color: var(--ch-w80) !important;
  border-radius: 8px !important;
}

/* ── Gateway checkout box ── */
#order-standard_cart .view-cart-gateway-checkout {
  background: rgba(13,18,50,0.55) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: var(--ch-w80) !important;
}

/* ── Empty cart button ── */
#order-standard_cart .empty-cart .btn {
  background: rgba(247,147,26,0.20) !important;
  border: 1px solid rgba(247,147,26,0.35) !important;
  color: var(--ch-crypto-2) !important;
  border-radius: 0 0 8px 8px !important;
}

/* ── Transfer eligible banners ── */
#order-standard_cart .transfer-eligible {
  background: rgba(0,255,163,0.08) !important;
  border-color: rgba(0,255,163,0.25) !important;
  color: var(--ch-neon) !important;
}
#order-standard_cart .transfer-not-eligible {
  background: rgba(255,255,255,0.05) !important;
  color: var(--ch-w60) !important;
}

/* ── Domain pricing table ── */
#order-standard_cart .domain-pricing .tld-row.highlighted {
  background: rgba(91,140,255,0.06) !important;
}
#order-standard_cart .domain-pricing .tld-pricing-header div {
  background: rgba(255,255,255,0.07) !important;
  border-bottom-color: rgba(91,140,255,0.40) !important;
  color: var(--ch-w80) !important;
  border-radius: 4px 4px 0 0 !important;
}

/* ── Spotlight TLDs ── */
#order-standard_cart .spotlight-tld,
.spotlight-tld {
  background: rgba(13,18,50,0.70) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: var(--ch-w80) !important;
}
.spotlight-tlds {
  background: rgba(255,255,255,0.03) !important;
}

/* ── Header-lined section titles ── */
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h2 {
  color: var(--ch-white) !important;
}

/* ── Sidebar collapsed (mobile) ── */
#order-standard_cart .sidebar-collapsed {
  background: rgba(13,18,50,0.65) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
}

/* ── Generic row/table elements in order form ── */
#order-standard_cart table {
  color: var(--ch-w80) !important;
}
#order-standard_cart table th,
#order-standard_cart table td {
  color: var(--ch-w80) !important;
  border-color: rgba(255,255,255,0.08) !important;
}