/* ============================================================
   XenonHost WHMCS Theme — Dark Mode
   Matches https://xenonhost.ro design system
   Author: SniperGuard LTD
   ============================================================ */

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

/* ----------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ---------------------------------------------------------- */
:root {
    /* Backgrounds */
    --xh-bg:             #141a2b;
    --xh-bg-elev:        #1a2138;
    --xh-surface:        #212946;
    --xh-surface-2:      #2a3354;
    --xh-surface-3:      #343e66;

    /* Borders */
    --xh-border:         #2f3956;
    --xh-border-strong:  #44507a;

    /* Text */
    --xh-fg:             #f1f5f9;
    --xh-fg-muted:       #b4bdd1;
    --xh-fg-subtle:      #8a94ae;

    /* Brand */
    --xh-brand:          #3b82f6;
    --xh-brand-dark:     #2563eb;
    --xh-brand-light:    #60a5fa;
    --xh-secondary:      #6366f1;
    --xh-secondary-dark: #4f46e5;
    --xh-cyan:           #06b6d4;

    /* Semantic */
    --xh-success:        #10b981;
    --xh-warning:        #f59e0b;
    --xh-danger:         #ef4444;
    --xh-info:           #3b82f6;

    /* Radius */
    --xh-radius-sm:      6px;
    --xh-radius-md:      10px;
    --xh-radius-lg:      14px;

    /* Override Bootstrap / WHMCS variables */
    --primary:           #3b82f6;
    --secondary:         #6366f1;
    --success:           #10b981;
    --info:              #3b82f6;
    --warning:           #f59e0b;
    --danger:            #ef4444;
    --light:             #343e66;
    --dark:              #f1f5f9;

    --white:             #f1f5f9;
    --gray-100:          #343e66;
    --gray-200:          #2a3354;
    --gray-300:          #212946;
    --gray-400:          #94a3b8;
    --gray-500:          #64748b;
    --gray-600:          #475569;
    --gray-700:          #334155;
    --gray-800:          #1e293b;
    --gray-900:          #0f172a;

    /* WHMCS Twenty-One specific tokens */
    --neutral-50:        #343e66;
    --neutral-100:       #2a3354;
    --neutral-200:       #212946;
    --neutral-300:       #2f3956;
    --neutral-400:       #8a94ae;
    --neutral-500:       #64748b;
    --neutral-600:       #b4bdd1;
    --neutral-700:       #cbd5e1;
    --neutral-800:       #e2e8f0;
    --neutral-900:       #f1f5f9;
    --neutral-950:       #f8fafc;

    --text:              var(--xh-fg);
    --text-muted:        var(--xh-fg-muted);
    --text-inverted:     #141a2b;
    --border:            var(--xh-border);
    --border-muted:      var(--xh-border);
    --bg:                var(--xh-bg);
    --bg-muted:          var(--xh-surface);
    --bg-inverted:       var(--xh-fg);

    --rounding-sm:       6px;
    --rounding-md:       10px;
    --rounding-lg:       14px;
}

/* ----------------------------------------------------------
   2. GLOBAL RESETS
   ---------------------------------------------------------- */
html {
    color-scheme: dark;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    background-color: var(--xh-bg) !important;
    color: var(--xh-fg) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.7;
}

a {
    color: var(--xh-brand-light);
    transition: color 200ms ease;
}

a:hover {
    color: var(--xh-brand);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--xh-fg) !important;
    letter-spacing: -0.02em;
    font-weight: 700;
}

p, li, td, th, span, label, small {
    color: var(--xh-fg-muted);
}

::selection {
    background: rgba(59, 130, 246, 0.4);
    color: var(--xh-fg);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--xh-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--xh-surface-3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--xh-border-strong);
}

hr {
    border-color: var(--xh-border);
}

/* ----------------------------------------------------------
   3. PAGE BACKGROUND
   ---------------------------------------------------------- */
.primary-bg-color {
    background-color: var(--xh-bg) !important;
}

#main-body {
    background-color: var(--xh-bg);
}

/* ----------------------------------------------------------
   4. HEADER
   ---------------------------------------------------------- */
header.header,
#header {
    background-color: var(--xh-bg-elev) !important;
    border-bottom: 1px solid var(--xh-border);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* Top bar (logged-in user info) */
header .topbar {
    background-color: var(--xh-surface) !important;
    border-bottom: 1px solid var(--xh-border);
    color: var(--xh-fg-muted);
}

header .topbar a {
    color: var(--xh-fg-muted) !important;
}

header .topbar a:hover {
    color: var(--xh-fg) !important;
}

header .topbar .active-client .form-control,
header .topbar .input-group-text {
    background-color: var(--xh-surface-2) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg) !important;
}

/* Navbar brand — Bootstrap's .navbar-light paints this rgba(0,0,0,0.9)
   (nearly black) which is invisible on our dark header. Force it light. */
.navbar-brand,
.navbar-light .navbar-brand,
header .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
    color: #fff !important;
    font-weight: 600 !important;
}

.navbar-brand img {
    filter: brightness(1.05);
}

/* Search bar in header */
header .search .form-control {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    border-radius: var(--xh-radius-md) !important;
}

header .search .form-control::placeholder {
    color: var(--xh-fg-subtle);
}

header .search .form-control:focus {
    border-color: var(--xh-brand) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

header .search .input-group-append .btn {
    background-color: var(--xh-surface-2) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg-muted) !important;
}

/* Main navigation bar */
.main-navbar-wrapper,
header .navbar {
    background-color: transparent !important;
}

/* Main nav items. Twenty-One uses plain <a> (no .nav-link class) inside
   <li>, so target the anchor directly as well as .nav-link for safety.
   Also override Bootstrap's .navbar-light which paints these rgba(0,0,0,0.5). */
#nav > li > a,
#nav .nav-link,
.main-navbar-wrapper .navbar-nav > li > a,
.main-navbar-wrapper .navbar-nav .nav-link,
.navbar-nav > li > a,
.navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav > li > a {
    color: var(--xh-fg-muted) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    transition: color 200ms ease !important;
}

#nav > li > a:hover,
#nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.navbar-nav > li > a:hover,
.navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav > li > a:hover,
#nav .nav-item.active > a,
#nav .nav-item.show > a,
.navbar-nav .show > .nav-link,
.navbar-nav .active > .nav-link {
    color: #fff !important;
    text-decoration: none !important;
}

/* Navbar text colour fallback (Bootstrap sets rgba(0,0,0,0.5)) */
.navbar-light .navbar-text,
.navbar-light .navbar-text a {
    color: var(--xh-fg-muted) !important;
}

/* Hamburger / toggler stroke (default is a dark SVG, invisible on dark bg) */
.navbar-light .navbar-toggler {
    color: var(--xh-fg) !important;
    border-color: var(--xh-border) !important;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28241, 245, 249, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Cart button */
.cart-btn,
.navbar .cart-btn {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    border-radius: var(--xh-radius-md) !important;
}

.cart-btn:hover {
    border-color: var(--xh-brand) !important;
    color: var(--xh-brand-light) !important;
}

.cart-btn .badge {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    color: #fff !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-md) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 0.5rem;
}

.dropdown-item {
    color: var(--xh-fg-muted) !important;
    border-radius: var(--xh-radius-sm) !important;
    padding: 0.5rem 0.75rem;
    transition: all 200ms ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--xh-surface-2) !important;
    color: var(--xh-fg) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: var(--xh-brand-light) !important;
}

.dropdown-divider {
    border-color: var(--xh-border);
}

/* Mobile hamburger */
.navbar-toggler {
    border-color: var(--xh-border) !important;
    color: var(--xh-fg) !important;
}

.navbar-toggler-icon {
    filter: invert(1) brightness(0.85);
}

/* ----------------------------------------------------------
   5. BREADCRUMBS
   Twenty-One uses <nav class="master-breadcrumb"> with a light
   #e9ecef background. Override so breadcrumbs sit on a dark bar.
   ---------------------------------------------------------- */
.breadcrumb-nav,
.master-breadcrumb,
nav.master-breadcrumb {
    background-color: var(--xh-surface) !important;
    border-bottom: 1px solid var(--xh-border) !important;
}

.breadcrumb,
.master-breadcrumb .breadcrumb {
    background-color: transparent !important;
    color: var(--xh-fg-muted) !important;
    margin: 0 !important;
}

.breadcrumb-item,
.master-breadcrumb .breadcrumb-item {
    color: var(--xh-fg-muted) !important;
}

.breadcrumb-item a,
.master-breadcrumb .breadcrumb-item a {
    color: var(--xh-fg-muted) !important;
    text-decoration: none !important;
}

.breadcrumb-item a:hover,
.master-breadcrumb .breadcrumb-item a:hover {
    color: var(--xh-brand-light) !important;
}

.breadcrumb-item.active,
.master-breadcrumb .breadcrumb-item.active {
    color: #fff !important;
    font-weight: 500 !important;
}

.breadcrumb-item + .breadcrumb-item::before,
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--xh-fg-subtle) !important;
}

/* ----------------------------------------------------------
   6. CARDS & PANELS
   ---------------------------------------------------------- */
.card {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.card:hover {
    border-color: var(--xh-border-strong) !important;
}

.card-header {
    background-color: var(--xh-surface-2) !important;
    border-bottom: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    border-radius: var(--xh-radius-lg) var(--xh-radius-lg) 0 0 !important;
}

.card-header .card-title {
    color: var(--xh-fg) !important;
    font-weight: 600;
}

.card-body {
    background-color: var(--xh-surface) !important;
    color: var(--xh-fg-muted);
}

.card-footer {
    background-color: var(--xh-surface) !important;
    border-top: 1px solid var(--xh-border) !important;
}

/* Card accent colors — override to brand gradient top border */
.card[class*="card-accent-"] {
    border-top: 3px solid var(--xh-brand) !important;
}

.card-accent-blue { border-top-color: var(--xh-brand) !important; }
.card-accent-green,
.card-accent-emerald { border-top-color: var(--xh-success) !important; }
.card-accent-gold,
.card-accent-orange,
.card-accent-sun-flower { border-top-color: var(--xh-warning) !important; }
.card-accent-red,
.card-accent-pomegranate { border-top-color: var(--xh-danger) !important; }
.card-accent-teal,
.card-accent-turquoise { border-top-color: var(--xh-cyan) !important; }
.card-accent-purple,
.card-accent-amethyst { border-top-color: var(--xh-secondary) !important; }

/* ----------------------------------------------------------
   7. SIDEBAR
   ---------------------------------------------------------- */
.sidebar .card-sidebar {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    overflow: hidden;
}

.sidebar .card-sidebar .card-header {
    background-color: var(--xh-surface-2) !important;
    border-bottom: 1px solid var(--xh-border) !important;
}

.sidebar .card-sidebar .card-header .card-title {
    color: var(--xh-fg) !important;
    font-weight: 600;
    font-size: 0.875rem;
}

.sidebar .list-group-item {
    background-color: var(--xh-surface) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg-muted) !important;
    transition: all 200ms ease;
}

.sidebar .list-group-item:hover,
.sidebar .list-group-item-action:hover {
    background-color: var(--xh-surface-2) !important;
    color: var(--xh-fg) !important;
}

.sidebar .list-group-item.active {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-color: var(--xh-border) !important;
    border-left: 3px solid var(--xh-brand) !important;
    color: var(--xh-brand-light) !important;
}

.sidebar .list-group-item .badge {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    color: #fff !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.7rem;
}

.sidebar-menu-item-icon {
    color: var(--xh-fg-subtle) !important;
}

.sidebar .list-group-item.active .sidebar-menu-item-icon {
    color: var(--xh-brand-light) !important;
}

/* ----------------------------------------------------------
   8. BUTTONS
   ---------------------------------------------------------- */
.btn {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--xh-radius-md) !important;
    transition: all 200ms ease;
    padding: 0.625rem 1.25rem;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset,
                0 8px 24px -10px rgba(59, 130, 246, 0.6) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset,
                0 12px 30px -10px rgba(59, 130, 246, 0.7) !important;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--xh-border-strong) !important;
    color: var(--xh-fg) !important;
}

.btn-outline-primary:hover {
    background-color: var(--xh-surface) !important;
    border-color: var(--xh-brand) !important;
    color: var(--xh-brand-light) !important;
}

.btn-default,
.btn-light {
    background-color: var(--xh-surface-2) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
}

.btn-default:hover,
.btn-light:hover {
    background-color: var(--xh-surface-3) !important;
    border-color: var(--xh-border-strong) !important;
    color: var(--xh-fg) !important;
}

.btn-secondary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: none !important;
    color: #fff !important;
}

.btn-secondary:hover {
    filter: brightness(1.1);
}

.btn-success {
    background-color: var(--xh-success) !important;
    border-color: var(--xh-success) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--xh-danger) !important;
    border-color: var(--xh-danger) !important;
    color: #fff !important;
}

.btn-warning {
    background-color: var(--xh-warning) !important;
    border-color: var(--xh-warning) !important;
    color: #fff !important;
}

.btn-info {
    background-color: var(--xh-brand) !important;
    border-color: var(--xh-brand) !important;
    color: #fff !important;
}

.btn-link {
    color: var(--xh-brand-light) !important;
}

.btn-link:hover {
    color: var(--xh-brand) !important;
}

/* ----------------------------------------------------------
   9. FORMS & INPUTS
   ---------------------------------------------------------- */
.form-control,
.custom-select,
select.form-control {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    border-radius: var(--xh-radius-md) !important;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.form-control::placeholder {
    color: var(--xh-fg-subtle) !important;
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--xh-surface) !important;
    border-color: var(--xh-brand) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    color: var(--xh-fg) !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--xh-surface-2) !important;
    color: var(--xh-fg-subtle) !important;
    opacity: 0.7;
}

.input-group-text {
    background-color: var(--xh-surface-2) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg-muted) !important;
    border-radius: var(--xh-radius-md) !important;
}

label {
    color: var(--xh-fg) !important;
    font-weight: 500;
    font-size: 0.875rem;
}

.form-text,
.help-block {
    color: var(--xh-fg-subtle) !important;
}

/* Custom checkbox / radio */
.custom-control-label::before {
    background-color: var(--xh-surface) !important;
    border-color: var(--xh-border-strong) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--xh-brand) !important;
    border-color: var(--xh-brand) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* ----------------------------------------------------------
   10. TABLES
   ---------------------------------------------------------- */
.table,
table {
    color: var(--xh-fg-muted);
}

.table thead th {
    background-color: var(--xh-surface-2) !important;
    border-bottom: 2px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table td,
.table th {
    border-top-color: var(--xh-border) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg-muted);
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--xh-surface) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--xh-bg-elev) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--xh-surface-2) !important;
    color: var(--xh-fg);
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    border-radius: var(--xh-radius-md) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--xh-fg-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--xh-fg-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: var(--xh-radius-sm) !important;
}

/* ----------------------------------------------------------
   11. PAGINATION
   ---------------------------------------------------------- */
.page-item .page-link {
    background-color: var(--xh-surface) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg-muted) !important;
    border-radius: var(--xh-radius-sm) !important;
    margin: 0 2px;
    transition: all 200ms ease;
}

.page-item .page-link:hover {
    background-color: var(--xh-surface-2) !important;
    border-color: var(--xh-border-strong) !important;
    color: var(--xh-fg) !important;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.page-item.disabled .page-link {
    background-color: var(--xh-surface) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg-subtle) !important;
    opacity: 0.5;
}

/* ----------------------------------------------------------
   12. ALERTS & NOTIFICATIONS
   ---------------------------------------------------------- */
.alert {
    border-radius: var(--xh-radius-md) !important;
    border: 1px solid;
    font-size: 0.875rem;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

.alert a {
    color: inherit !important;
    text-decoration: underline;
}

/* ----------------------------------------------------------
   13. BADGES
   ---------------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: 0.7rem;
    border-radius: 999px;
    padding: 0.25em 0.625em;
}

.badge-primary,
.badge-info {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    color: #fff !important;
}

.badge-success {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #6ee7b7 !important;
}

.badge-danger {
    background-color: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}

.badge-warning {
    background-color: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
}

.badge-secondary {
    background-color: var(--xh-surface-3) !important;
    color: var(--xh-fg-muted) !important;
}

/* ----------------------------------------------------------
   14. DASHBOARD TILES
   ---------------------------------------------------------- */
.tiles .tile {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg-muted) !important;
    transition: all 200ms ease;
}

.tiles .tile:hover {
    background-color: var(--xh-surface-2) !important;
    border-color: var(--xh-border-strong) !important;
    transform: translateY(-2px);
}

.tiles .tile i {
    color: var(--xh-fg-subtle) !important;
}

.tiles .tile .stat {
    color: var(--xh-fg) !important;
    font-weight: 700;
}

.tiles .tile .title {
    color: var(--xh-fg-muted) !important;
}

.tiles .tile .highlight {
    opacity: 0.9;
}

.tiles .tile .highlight.bg-color-blue { background-color: var(--xh-brand) !important; }
.tiles .tile .highlight.bg-color-green { background-color: var(--xh-success) !important; }
.tiles .tile .highlight.bg-color-orange { background-color: var(--xh-warning) !important; }
.tiles .tile .highlight.bg-color-red { background-color: var(--xh-danger) !important; }
.tiles .tile .highlight.bg-color-teal { background-color: var(--xh-cyan) !important; }
.tiles .tile .highlight.bg-color-purple { background-color: var(--xh-secondary) !important; }

/* ----------------------------------------------------------
   15. HOMEPAGE
   ---------------------------------------------------------- */

/* Homepage product cards */
.home-product-card,
.card-home-shortcut {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    transition: all 200ms ease;
}

.home-product-card:hover,
.card-home-shortcut:hover {
    border-color: var(--xh-border-strong) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -12px rgba(59, 130, 246, 0.25);
}

/* Action icon buttons (How Can We Help grid) */
.action-icon-btns a {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    color: var(--xh-fg-muted) !important;
    transition: all 200ms ease;
}

.action-icon-btns a:hover {
    border-color: var(--xh-border-strong) !important;
    color: var(--xh-fg) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -12px rgba(59, 130, 246, 0.25);
}

.action-icon-btns .ico-container i {
    color: var(--xh-brand) !important;
}

/* Domain search bar on homepage */
.domain-checker-bg,
.domain-search-container {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
}

.domain-checker-bg .domain-checker-container .form-control {
    background-color: var(--xh-surface-2) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg) !important;
}

/* ----------------------------------------------------------
   16. MODALS
   ---------------------------------------------------------- */
.modal-content {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
}

.modal-header {
    background-color: var(--xh-surface-2) !important;
    border-bottom: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) var(--xh-radius-lg) 0 0 !important;
}

.modal-header .modal-title,
.modal-header .close {
    color: var(--xh-fg) !important;
}

.modal-body {
    background-color: var(--xh-surface) !important;
    color: var(--xh-fg-muted);
}

.modal-footer {
    background-color: var(--xh-surface) !important;
    border-top: 1px solid var(--xh-border) !important;
}

.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Language / currency chooser modal */
.modal-localisation .modal-content {
    background-color: var(--xh-surface) !important;
}

/* ----------------------------------------------------------
   17. FOOTER
   ---------------------------------------------------------- */
footer.footer,
#footer {
    background-color: var(--xh-bg-elev) !important;
    border-top: 1px solid var(--xh-border) !important;
    color: var(--xh-fg-muted);
    position: relative;
}

/* Gradient top border like the main site */
footer.footer::before,
#footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3b82f6, #6366f1, transparent);
}

footer a {
    color: var(--xh-fg-muted) !important;
}

footer a:hover {
    color: var(--xh-fg) !important;
}

footer .copyright {
    color: var(--xh-fg-subtle) !important;
    font-size: 0.8rem;
}

/* ----------------------------------------------------------
   18. LOGIN / REGISTER PAGES
   ---------------------------------------------------------- */
#login .login-container,
.login-container {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

#login .logincontainer .form-control {
    background-color: var(--xh-surface-2) !important;
    border-color: var(--xh-border) !important;
}

/* ----------------------------------------------------------
   19. ORDER FORM / CART
   ---------------------------------------------------------- */
.order-form .panel,
.order-form .card {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
}

.order-summary {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
}

/* Pricing option cards in order forms */
.order-form .package,
.order-form .pricing-option {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    transition: all 200ms ease;
}

.order-form .package:hover,
.order-form .pricing-option:hover {
    border-color: var(--xh-brand) !important;
    box-shadow: 0 10px 30px -12px rgba(59, 130, 246, 0.25);
}

.order-form .package.active,
.order-form .pricing-option.active {
    border-color: var(--xh-brand) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Standard cart — product listing cards (extend dark theme) */
#order-standard_cart .products .product {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    color: var(--xh-fg-muted) !important;
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
#order-standard_cart .products .product:hover {
    border-color: var(--xh-border-strong) !important;
    box-shadow: 0 10px 30px -12px rgba(59, 130, 246, 0.25);
}
#order-standard_cart .products .product header {
    background-color: var(--xh-surface-2) !important;
    border-bottom: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
}
#order-standard_cart .products .product header h3,
#order-standard_cart .products .product header h4,
#order-standard_cart .products .product header span,
#order-standard_cart .products .product header a,
#order-standard_cart .products .product header .title {
    color: var(--xh-fg) !important;
    font-weight: 600;
}
#order-standard_cart .products .product .product-desc,
#order-standard_cart .products .product ul,
#order-standard_cart .products .product li {
    color: var(--xh-fg-muted) !important;
}
#order-standard_cart .products .product span.feature-value {
    color: var(--xh-fg) !important;
}
#order-standard_cart .products .product div.product-pricing {
    color: var(--xh-fg) !important;
}
#order-standard_cart .products .product div.product-pricing span.price {
    color: var(--xh-fg) !important;
    font-weight: 700;
}
#order-standard_cart .products .product div.product-pricing .cycle,
#order-standard_cart .products .product div.product-pricing small,
#order-standard_cart .products .product footer .cycle {
    color: var(--xh-fg-subtle) !important;
}

/* Standard cart — product configuration page (configureproduct.tpl) */
#order-standard_cart .product-info {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-top: 1px solid var(--xh-border) !important;
    border-bottom: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    padding: 1rem 1.25rem !important;
}
#order-standard_cart .product-info .product-title,
#order-standard_cart .product-info p {
    color: var(--xh-fg) !important;
}

/* Standard cart — order summary sidebar */
#order-standard_cart .order-summary {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-bottom: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
}
#order-standard_cart .order-summary h2 {
    background-color: var(--xh-surface-2) !important;
    color: var(--xh-fg) !important;
    border-bottom: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) var(--xh-radius-lg) 0 0 !important;
}
#order-standard_cart .summary-container,
#order-standard_cart .order-summary .summary-container {
    background-color: var(--xh-surface) !important;
    color: var(--xh-fg-muted) !important;
    border-radius: 0 0 var(--xh-radius-lg) var(--xh-radius-lg) !important;
}
#order-standard_cart .order-summary .product-name,
#order-standard_cart .order-summary .product-group,
#order-standard_cart .order-summary .summary-totals,
#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .order-summary .total-due-today span,
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary p,
#order-standard_cart .order-summary td,
#order-standard_cart .order-summary th {
    color: var(--xh-fg) !important;
    background-color: transparent !important;
}
#order-standard_cart .order-summary .summary-totals {
    border-top-color: var(--xh-border) !important;
    border-bottom-color: var(--xh-border) !important;
}
#order-standard_cart .order-summary .product-group {
    color: var(--xh-fg-subtle) !important;
}

/* Collapsible cart panels (sidebar: categories, actions, currency) */
#order-standard_cart .panel-body,
#order-standard_cart .card-body,
#order-standard_cart .collapsable-card-body {
    background-color: var(--xh-surface) !important;
    color: var(--xh-fg-muted) !important;
}

/* Homepage legacy domain search (injected by WHMCS "six" header) — force dark */
.home-domain-search,
.home-domain-search.bg-white {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    padding: 1rem !important;
}
#frmDomainHomepage .form-control,
.home-domain-search .form-control,
.home-domain-search input[type="text"] {
    background-color: var(--xh-bg-elev) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg) !important;
}
#frmDomainHomepage .form-control::placeholder,
.home-domain-search .input-group-wrapper,
.home-domain-search .input-group,
.home-domain-search .p-5 {
    background: transparent !important;
    padding: 0 !important;
}
.home-domain-search .form-control::placeholder,
.home-domain-search input::placeholder {
    color: var(--xh-fg-subtle) !important;
}
.home-domain-search label,
.home-domain-search .help-block,
.home-domain-search small {
    color: var(--xh-fg-muted) !important;
}

/* reCAPTCHA — center and add dark padding around Google's white widget */
.domainchecker-homepage-captcha,
.recaptcha-container,
#google-recaptcha-domainchecker {
    display: flex !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0.5rem 0 !important;
}

/* ----------------------------------------------------------
   20. LIST GROUPS
   ---------------------------------------------------------- */
.list-group-item {
    background-color: var(--xh-surface) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg-muted) !important;
}

.list-group-item-action:hover {
    background-color: var(--xh-surface-2) !important;
    color: var(--xh-fg) !important;
}

/* ----------------------------------------------------------
   21. TABS & NAV PILLS
   ---------------------------------------------------------- */
.nav-tabs {
    border-bottom-color: var(--xh-border) !important;
}

.nav-tabs .nav-link {
    color: var(--xh-fg-muted) !important;
    border-color: transparent !important;
    transition: all 200ms ease;
}

.nav-tabs .nav-link:hover {
    border-color: var(--xh-border-strong) var(--xh-border-strong) var(--xh-border) !important;
    color: var(--xh-fg) !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--xh-surface) !important;
    border-color: var(--xh-border) var(--xh-border) var(--xh-surface) !important;
    color: var(--xh-fg) !important;
}

.nav-pills .nav-link {
    color: var(--xh-fg-muted) !important;
    border-radius: var(--xh-radius-md) !important;
    transition: all 200ms ease;
}

.nav-pills .nav-link:hover {
    background-color: var(--xh-surface-2) !important;
    color: var(--xh-fg) !important;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    color: #fff !important;
}

.tab-content {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--xh-radius-lg) var(--xh-radius-lg) !important;
    padding: 1.25rem;
}

/* ----------------------------------------------------------
   22. INVOICE / TICKET STATUS LABELS
   ---------------------------------------------------------- */
.label-status,
.status-label {
    border-radius: 999px !important;
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.25em 0.75em;
}

.label-active,
.label-paid,
.status-active {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.label-pending,
.status-pending {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.label-unpaid,
.label-overdue,
.label-cancelled,
.label-suspended,
.status-overdue,
.status-cancelled {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

/* ----------------------------------------------------------
   23. SUPPORT TICKET SYSTEM
   ---------------------------------------------------------- */
.ticket-reply {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    margin-bottom: 1rem;
}

.ticket-reply .ticket-reply-header {
    background-color: var(--xh-surface-2) !important;
    border-bottom: 1px solid var(--xh-border) !important;
}

.ticket-reply.staff-reply {
    border-left: 3px solid var(--xh-brand) !important;
}

.ticket-reply.client-reply {
    border-left: 3px solid var(--xh-secondary) !important;
}

/* Markdown / rich text in tickets */
.ticket-reply .ticket-reply-body {
    color: var(--xh-fg-muted);
}

.ticket-reply .ticket-reply-body code {
    background-color: var(--xh-surface-2);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    color: var(--xh-brand-light);
    font-family: 'JetBrains Mono', monospace;
}

.ticket-reply .ticket-reply-body pre {
    background-color: var(--xh-surface-2);
    border: 1px solid var(--xh-border);
    border-radius: var(--xh-radius-md);
    padding: 1rem;
    color: var(--xh-fg-muted);
}

/* ----------------------------------------------------------
   24. KNOWLEDGEBASE
   ---------------------------------------------------------- */
.kb-article-content {
    color: var(--xh-fg-muted);
    line-height: 1.8;
}

.kb-article-content h2,
.kb-article-content h3 {
    color: var(--xh-fg) !important;
    margin-top: 1.5rem;
}

.kb-article-content code {
    background-color: var(--xh-surface-2);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    color: var(--xh-brand-light);
}

.kb-article-content blockquote {
    border-left: 3px solid var(--xh-brand);
    padding-left: 1rem;
    color: var(--xh-fg-muted);
}

/* ----------------------------------------------------------
   25. PROGRESS BARS
   ---------------------------------------------------------- */
.progress {
    background-color: var(--xh-surface-2) !important;
    border-radius: 999px !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    border-radius: 999px !important;
}

/* ----------------------------------------------------------
   26. TOOLTIPS & POPOVERS
   ---------------------------------------------------------- */
.tooltip-inner {
    background-color: var(--xh-surface-2) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    border-radius: var(--xh-radius-sm) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.popover {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-md) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.popover-header {
    background-color: var(--xh-surface-2) !important;
    border-bottom: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
}

.popover-body {
    color: var(--xh-fg-muted) !important;
}

/* ----------------------------------------------------------
   27. ANNOUNCEMENTS
   ---------------------------------------------------------- */
.announcement-single .article-content {
    color: var(--xh-fg-muted);
}

/* ----------------------------------------------------------
   28. INVOICE
   ---------------------------------------------------------- */
.invoice-container {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
}

/* ----------------------------------------------------------
   29. NETWORK STATUS
   ---------------------------------------------------------- */
.network-issues-alert {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
    border-radius: var(--xh-radius-md) !important;
}

/* ----------------------------------------------------------
   30. FULL-PAGE LOADING OVERLAY
   ---------------------------------------------------------- */
#fullpage-loader {
    background-color: rgba(10, 10, 15, 0.92) !important;
}

#fullpage-loader .loader {
    border-top-color: var(--xh-brand) !important;
}

/* ----------------------------------------------------------
   31. UTILITY OVERRIDES
   ---------------------------------------------------------- */
.bg-light {
    background-color: var(--xh-surface) !important;
}

.bg-white {
    background-color: var(--xh-surface) !important;
}

.bg-dark {
    background-color: var(--xh-bg) !important;
}

.text-dark {
    color: var(--xh-fg) !important;
}

.text-muted {
    color: var(--xh-fg-muted) !important;
}

.text-primary {
    color: var(--xh-brand-light) !important;
}

.text-success {
    color: var(--xh-success) !important;
}

.text-danger {
    color: var(--xh-danger) !important;
}

.text-warning {
    color: var(--xh-warning) !important;
}

.text-info {
    color: var(--xh-brand-light) !important;
}

.border {
    border-color: var(--xh-border) !important;
}

.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--xh-border) !important;
}

.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ----------------------------------------------------------
   32. ORDER FORMS / CART (standard_cart order form)
   Loaded AFTER this file, so every rule needs !important
   to beat /templates/orderforms/standard_cart/css/all.min.css

   WHMCS's standard_cart uses these top-level classes on cart
   pages: .cart-body, .cart-sidebar, .panel-sidebar,
   .domain-checker-bg, .input-group-box. The body tag only has
   the generic .primary-bg-color class, so scope via these.
   ---------------------------------------------------------- */

/* Kill the light-background globe image on domain search */
.domain-checker-bg {
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--xh-surface) 90%, transparent),
        color-mix(in oklab, var(--xh-surface-2) 90%, transparent)) !important;
    background-image: none !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    padding: 2rem 1.25rem !important;
    color: var(--xh-fg) !important;
}

/* Kill Twenty-One's yellow gradient on .domain-checker-container.
   This selector has higher specificity in the parent theme so we need
   to blow away every background property. */
.domain-checker-container,
.domain-checker-bg .domain-checker-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.domain-checker-bg * {
    color: var(--xh-fg) !important;
}

.domain-checker-bg .h1,
.domain-checker-bg .h2,
.domain-checker-bg .h3,
.domain-checker-bg p,
.domain-checker-bg label {
    color: var(--xh-fg) !important;
}

.domain-checker-container p,
.domain-checker-container .lead {
    color: var(--xh-fg-muted) !important;
}

/* Hide the decorative large globe icon (fa-globe fa-4x) — redundant with our design */
.domain-checker-bg .fa-globe.fa-4x,
.domain-checker-bg i.fa-4x {
    display: none !important;
}

/* Input group box — the search field container */
.input-group-box {
    background-color: var(--xh-surface-2) !important;
    border: 2px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    padding: 4px !important;
    box-shadow: 0 8px 30px -10px rgba(59, 130, 246, 0.3) !important;
    overflow: hidden !important;
}

.input-group-box:focus-within {
    border-color: var(--xh-brand) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18),
                0 8px 30px -10px rgba(59, 130, 246, 0.5) !important;
}

.input-group-box .form-control,
#inputDomain {
    background-color: transparent !important;
    border: none !important;
    color: var(--xh-fg) !important;
    font-size: 1rem !important;
    padding: 0.875rem 1.25rem !important;
    box-shadow: none !important;
    outline: none !important;
}

.input-group-box .form-control:focus,
#inputDomain:focus {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.input-group-box .form-control::placeholder,
#inputDomain::placeholder {
    color: var(--xh-fg-subtle) !important;
}

.input-group-box .btn,
.input-group-box .input-group-btn .btn,
#btnCheckAvailability {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: var(--xh-radius-md) !important;
    margin: 0 !important;
}

.input-group-box .btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Cart sidebar panels (Categorii / Actiuni / Alege moneda) */
.cart-sidebar .panel,
.cart-sidebar .panel-sidebar,
.cart-sidebar .card-sidebar {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
}

.cart-sidebar .panel-heading,
.cart-sidebar .card-header {
    background-color: var(--xh-surface-2) !important;
    border-bottom: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    padding: 0.875rem 1rem !important;
}

.cart-sidebar .panel-heading .panel-title,
.cart-sidebar .card-header h3,
.cart-sidebar .card-header .card-title {
    color: var(--xh-fg) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
}

.cart-sidebar .panel-heading i,
.cart-sidebar .card-header i {
    color: var(--xh-brand-light) !important;
}

.cart-sidebar .list-group,
.cart-sidebar .collapsable-card-body {
    background-color: var(--xh-surface) !important;
}

.cart-sidebar .list-group-item,
.cart-sidebar a.list-group-item,
.cart-sidebar .list-group-item-action,
.cart-sidebar a.list-group-item-action {
    background-color: var(--xh-surface) !important;
    border-top: 1px solid var(--xh-border) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    color: var(--xh-fg) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    transition: all 200ms ease !important;
}

.cart-sidebar .list-group-item:first-child,
.cart-sidebar .list-group-item-action:first-child {
    border-top: none !important;
}

.cart-sidebar .list-group-item:hover,
.cart-sidebar .list-group-item-action:hover,
.cart-sidebar a.list-group-item:hover {
    background-color: var(--xh-surface-2) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.cart-sidebar .list-group-item.active,
.cart-sidebar .list-group-item-action.active {
    background-color: color-mix(in oklab, var(--xh-brand) 22%, var(--xh-surface)) !important;
    color: #fff !important;
    border-left: 3px solid var(--xh-brand) !important;
    padding-left: calc(1rem - 3px) !important;
}

/* Force consistent, legible height on ALL select boxes so the
   option text doesn't clip top and bottom (the bug in the screenshot) */
select.form-control,
select.custom-select,
.cart-body select,
.cart-sidebar select {
    min-height: 48px !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 0.625rem 2.25rem 0.625rem 1rem !important;
    background-color: var(--xh-surface-2) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    font-size: 0.9rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.875rem center !important;
    background-size: 16px !important;
}

select.form-control option,
select.custom-select option,
.cart-body select option {
    background-color: var(--xh-surface) !important;
    color: var(--xh-fg) !important;
}

/* On mobile the sidebar stacks ABOVE the search form, creating clutter.
   Hide the Categories panel on mobile so the domain search is the hero. */
@media (max-width: 991px) {
    .cart-sidebar .panel-sidebar:first-child,
    .cart-sidebar .card-sidebar:first-child,
    .cart-sidebar [menuItemName="Categories"] {
        display: none !important;
    }
}

/* Domain availability results */
.domain-checker-available,
.domain-available {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
    border-radius: var(--xh-radius-md) !important;
}

.domain-checker-unavailable,
.domain-unavailable,
.domain-error {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
    border-radius: var(--xh-radius-md) !important;
}

.domain-checker-invalid,
.domain-invalid {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #fcd34d !important;
    border-radius: var(--xh-radius-md) !important;
}

.domain-checker-result-headline {
    color: var(--xh-fg) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

/* TLD suggestion chips / pills */
.domain-suggestion,
.domain-suggestions .domain {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    border-radius: var(--xh-radius-md) !important;
}

.domain-suggestion:hover {
    border-color: var(--xh-brand) !important;
}

/* Order summary box */
.cart-body .order-summary,
.order-summary {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
}

/* Page headings on cart pages */
.cart-body h1,
.cart-body h2,
.cart-body h3,
.primary-content > h1,
.primary-content > h2 {
    color: var(--xh-fg) !important;
}

/* Radio / checkbox labels inside cart */
.cart-body label,
.cart-sidebar label {
    color: var(--xh-fg) !important;
}

/* Cart body wrapper background consistency */
.cart-body,
.cart-body .container,
.cart-body .row {
    color: var(--xh-fg) !important;
}

/* Primary content area text visibility */
.cart-body .primary-content,
.cart-body .primary-content p,
.cart-body .primary-content li,
.cart-body .primary-content span {
    color: var(--xh-fg-muted);
}

/* Domain promo boxes (.domain-promo-box).
   Twenty-One sets bg #f9f9f9, border #ddd, color #333 and .small #999 —
   the "Add Web Hosting" / "Transfer your domain" upsells that sit
   below the domain checker on cart.php. Dark-theme them. */
.domain-promo-box {
    background-color: var(--xh-surface) !important;
    background: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    border-radius: var(--xh-radius-lg) !important;
    padding: 1.5rem !important;
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

.domain-promo-box h3 {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
}

.domain-promo-box p,
.domain-promo-box .small,
.domain-promo-box p.small {
    color: var(--xh-fg-muted) !important;
}

.domain-promo-box p.text-warning {
    color: var(--xh-warning) !important;
}

.domain-promo-box p.text-primary {
    color: var(--xh-brand-light) !important;
}

.domain-promo-box p.text-muted,
.domain-promo-box .text-muted {
    color: var(--xh-fg-subtle) !important;
}

.domain-promo-box i.fa-4x,
.domain-promo-box i {
    color: var(--xh-fg-subtle) !important;
    opacity: 0.55 !important;
}

/* Upsell buttons inside promo boxes — orange btn-warning becomes
   brand-consistent warning, btn-primary stays the brand gradient */
.domain-promo-box .btn-warning {
    background: linear-gradient(135deg, var(--xh-warning) 0%, #fb923c 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: var(--xh-radius-md) !important;
    text-shadow: none !important;
}

.domain-promo-box .btn-warning:hover {
    filter: brightness(1.1) !important;
}

.domain-promo-box .btn-primary {
    background: linear-gradient(135deg, var(--xh-brand) 0%, var(--xh-secondary) 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: var(--xh-radius-md) !important;
}

.domain-promo-box .btn-primary:hover {
    filter: brightness(1.1) !important;
}

/* ----------------------------------------------------------
   32b. TLD PRICING GRID (Twenty-One wraps it in .bg-white)
   ---------------------------------------------------------- */

/* Outer wrapper heading */
.domain-pricing {
    color: var(--xh-fg) !important;
    margin-top: 2rem !important;
}

.domain-pricing h3,
.domain-pricing h4,
.domain-pricing .h3,
.domain-pricing .h4 {
    color: var(--xh-fg) !important;
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
}

/* Kill the white container wrapping the grid */
.domain-pricing .bg-white {
    background-color: var(--xh-bg) !important;
    background: transparent !important;
    border-radius: var(--xh-radius-lg) !important;
    overflow: hidden !important;
    border: 1px solid var(--xh-border) !important;
}

/* Filter chips (Popular / Geographic / Technology / Novelty / Other) */
.tld-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

.tld-filters .badge,
.tld-filters a.badge,
.tld-filters .badge-secondary,
.tld-filters a.badge-secondary {
    background-color: var(--xh-surface-2) !important;
    color: var(--xh-fg-muted) !important;
    border: 1px solid var(--xh-border) !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    transition: all 200ms ease !important;
}

.tld-filters .badge:hover,
.tld-filters a.badge:hover,
.tld-filters .badge.active {
    background-color: color-mix(in oklab, var(--xh-brand) 18%, var(--xh-surface-2)) !important;
    color: #fff !important;
    border-color: color-mix(in oklab, var(--xh-brand) 45%, var(--xh-border)) !important;
}

/* TLD grid header row.
   Twenty-One paints every inner column with #efefef / #f5f5f5
   (plus a 6px #97b5d2 border-bottom and :nth-child(odd) zebra).
   We have to blow away the background AND border on every inner div
   to let our dark surface-2 show through. */
.domain-pricing .tld-pricing-header,
.tld-pricing-header {
    background-color: var(--xh-surface-2) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--xh-border-strong) !important;
    padding: 0.5rem 0 !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.domain-pricing .tld-pricing-header .tld-column,
.domain-pricing .tld-pricing-header .col-md-4,
.domain-pricing .tld-pricing-header .col-md-8,
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4,
.domain-pricing .tld-pricing-header .col-4,
.domain-pricing .tld-pricing-header > div,
.domain-pricing .tld-pricing-header div:nth-child(odd),
.domain-pricing .tld-pricing-header div:nth-child(even) {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    color: #fff !important;
    height: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* TLD rows. Twenty-One gives each .tld-row a light-grey bottom border
   (#f5f5f5) and paints .two-row-center with a 2px #c7d7e6 right border.
   Override both so the rows blend into the dark grid. */
.domain-pricing .tld-row,
.tld-row {
    background-color: var(--xh-surface) !important;
    color: var(--xh-fg) !important;
    border-bottom: 1px solid var(--xh-border) !important;
    padding: 1rem 0 !important;
    transition: background-color 200ms ease !important;
}

.domain-pricing .tld-row:hover,
.tld-row:hover {
    background-color: var(--xh-surface-2) !important;
}

.domain-pricing .tld-row:last-child,
.tld-row:last-child {
    border-bottom: none !important;
}

.tld-row strong,
.tld-row b {
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.tld-row small {
    color: var(--xh-fg-muted) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    opacity: 0.85 !important;
}

.tld-row .text-center,
.tld-row .col-xs-4,
.tld-row .col-4 {
    color: #fff !important;
    font-weight: 600 !important;
}

.domain-pricing .two-row-center,
.tld-row .two-row-center {
    display: flex !important;
    align-items: center !important;
    border-right: 1px solid var(--xh-border) !important;
}

/* Global .bg-white kill-switch inside cart (defensive) */
.cart-body .bg-white,
.domain-checker-container .bg-white,
.domain-pricing .bg-white {
    background-color: transparent !important;
}

/* Domain suggestions list rows */
.domain-suggestions .list-group-item,
.domain-lookup-result .list-group-item {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    color: var(--xh-fg) !important;
    margin-bottom: 0.375rem !important;
    border-radius: var(--xh-radius-md) !important;
}

/* Page intro heading */
.cart-body h1,
.primary-content > h1 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.75rem !important;
}

/* "Incarcati informatiile..." intro paragraph below the H1 */
.cart-body .primary-content > p,
.primary-content > p.lead {
    color: var(--xh-fg-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

/* ----------------------------------------------------------
   32c. STORE LANDING PAGES (.landing-page.* in store.css)
   Twenty-One ships a full light-theme stylesheet for product
   landing pages (sitebuilder, ssl, codeguard, wp-toolkit,
   mail-services, marketgoo, nordvpn, sitelock, weebly, etc.),
   with solid white sections, #f6f6f6 zebra stripes, and #bbb
   check-mark icons. These rules dark-theme the shared skeleton
   and the specific pricing-table comparison grid.
   ---------------------------------------------------------- */

/* Kill white section backgrounds on store landing pages */
.landing-page .features,
.landing-page .faq,
.landing-page .hero,
.landing-page .product-options,
.landing-page .pricing,
.landing-page .summary,
.wp-toolkit,
.wp-toolkit .hero-cta,
.wp-toolkit .features {
    background-color: transparent !important;
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page h5,
.landing-page h6,
.landing-page p,
.landing-page li,
.landing-page span,
.landing-page td,
.landing-page label {
    color: var(--xh-fg) !important;
}

.landing-page .tagline,
.landing-page .lead {
    color: var(--xh-fg-muted) !important;
}

/* Feature blocks (grid of features above the comparison table) */
.landing-page .feature-block,
.landing-page .faq-block {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
}

.landing-page .feature-block .title,
.landing-page .feature-block h4,
.landing-page .faq-title {
    color: #fff !important;
    font-weight: 600 !important;
}

.landing-page .feature-block p,
.landing-page .faq-block p {
    color: var(--xh-fg-muted) !important;
}

/* Nav tabs inside landing pages */
.landing-page .nav-tabs {
    border-bottom: 1px solid var(--xh-border) !important;
    margin-bottom: 1.5rem !important;
}

.landing-page .nav-tabs .nav-link {
    background-color: transparent !important;
    color: var(--xh-fg-muted) !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
}

.landing-page .nav-tabs .nav-link:hover {
    color: var(--xh-fg) !important;
    border-color: var(--xh-border) !important;
}

.landing-page .nav-tabs .nav-link.active {
    background-color: var(--xh-surface) !important;
    color: #fff !important;
    border: 1px solid var(--xh-border) !important;
    border-bottom: 1px solid var(--xh-surface) !important;
}

/* ==========================================================
   Pricing-table comparison grid (div-based "table" with
   .pricing-table-row > .col-primary + .col-plans-N cells).
   Twenty-One paints the wrapper white, adds a #f6f6f6 zebra
   stripe on even rows, and colors check-marks #bbb.
   ========================================================== */

.landing-page .pricing-table,
.pricing-table {
    background-color: var(--xh-surface) !important;
    background: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    overflow: hidden !important;
    margin: 2rem 0 !important;
    font-weight: 500 !important;
    color: var(--xh-fg) !important;
}

/* Zebra kill: Twenty-One sets :not(.col-heading):nth-child(even) */
.landing-page .pricing-table-row,
.pricing-table-row,
.landing-page .pricing-table-row:not(.col-heading):nth-child(even),
.landing-page .pricing-table-row:not(.col-heading):nth-child(odd),
.pricing-table-row:nth-child(even),
.pricing-table-row:nth-child(odd) {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--xh-fg) !important;
    border-bottom: 1px solid var(--xh-border) !important;
}

/* Give the zebra a subtle surface-2 tint so rows are still scannable */
.landing-page .pricing-table-row:not(.col-heading):nth-child(even),
.pricing-table-row:not(.col-heading):nth-child(even) {
    background-color: var(--xh-surface-2) !important;
    background: var(--xh-surface-2) !important;
}

/* Heading row (the "One Page / Unlimited / Store / ..." header) */
.landing-page .pricing-table-row.col-heading,
.pricing-table-row.col-heading {
    background-color: var(--xh-bg-elev) !important;
    background: var(--xh-bg-elev) !important;
    border-bottom: 1px solid var(--xh-border-strong) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.78rem !important;
}

.landing-page .pricing-table-row.col-heading div,
.pricing-table-row.col-heading div {
    color: var(--xh-fg-muted) !important;
}

.landing-page .pricing-table-row.col-heading .col-primary,
.pricing-table-row.col-heading .col-primary {
    color: #fff !important;
}

/* Feature name (left) and plan value (right) cells */
.landing-page .pricing-table-row .col-primary,
.pricing-table-row .col-primary {
    color: var(--xh-fg) !important;
    font-weight: 600 !important;
}

.landing-page .pricing-table-row .col-plans-1,
.landing-page .pricing-table-row .col-plans-2,
.landing-page .pricing-table-row .col-plans-3,
.landing-page .pricing-table-row .col-plans-4,
.landing-page .pricing-table-row .col-plans-5,
.pricing-table-row [class^="col-plans-"] {
    color: var(--xh-fg) !important;
    font-weight: 600 !important;
}

/* Check-mark icons — Twenty-One uses #bbb. Brand them up. */
.landing-page .pricing-table i,
.landing-page .pricing-table .fa-check,
.pricing-table i.fas.fa-check,
.pricing-table i.fa-check {
    color: var(--xh-success) !important;
}

.landing-page .pricing-table .fa-times,
.pricing-table i.fa-times {
    color: var(--xh-fg-subtle) !important;
    opacity: 0.5 !important;
}

/* Last row rounded bottom, no border */
.landing-page .pricing-table-row:last-child,
.pricing-table-row:last-child {
    border-bottom: none !important;
}

/* Product preview images and info containers */
.landing-page .preview-text {
    color: var(--xh-fg) !important;
}

/* Announcements page — dark cards */
.announcements .announcement {
    background-color: var(--xh-surface) !important;
    border: 1px solid var(--xh-border) !important;
    border-radius: var(--xh-radius-lg) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
.announcements .announcement h1 {
    margin-top: 0;
}
.announcements .announcement h1 a {
    color: var(--xh-brand-light) !important;
}
.announcements .announcement h1 a:hover {
    color: var(--xh-brand) !important;
}
.announcements .announcement article,
.announcements .announcement article p,
.announcements .announcement article * {
    background-color: transparent !important;
    color: var(--xh-fg-muted) !important;
}
.announcements .announcement .text-muted {
    color: var(--xh-fg-subtle) !important;
}

/* Global bg-white fallback — force dark anywhere it leaks through */
.bg-white:not(.keep-white) {
    background-color: var(--xh-surface) !important;
    color: var(--xh-fg) !important;
}

/* Bootstrap 3 legacy buttons — dark variant */
.btn-default,
.btn-secondary.btn-default {
    background-color: var(--xh-surface-2) !important;
    border-color: var(--xh-border) !important;
    color: var(--xh-fg) !important;
}
.btn-default:hover,
.btn-secondary.btn-default:hover {
    background-color: var(--xh-surface-3) !important;
    border-color: var(--xh-border-strong) !important;
    color: var(--xh-fg) !important;
}

/* ----------------------------------------------------------
   33. PRINT OVERRIDE (keep invoices readable)
   ---------------------------------------------------------- */
@media print {
    body {
        background-color: #fff !important;
        color: #000 !important;
    }

    .card,
    .table,
    .invoice-container {
        background-color: #fff !important;
        border-color: #ddd !important;
        color: #000 !important;
    }

    .card-header {
        background-color: #f5f5f5 !important;
        color: #000 !important;
    }

    .table td,
    .table th {
        color: #000 !important;
        border-color: #ddd !important;
    }
}