/* ==========================================================================
   HostZone WHMCS Theme — custom.css
   Child of: Twenty-One (Bootstrap 4.5.3)
   Design: Dark navy (#0d1b2a) + brand blue (#3b82f6)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (override Bootstrap vars & add HostZone tokens)
   -------------------------------------------------------------------------- */
:root {
    /* HostZone brand colours */
    --hz-navy-950:   #040d18;
    --hz-navy-900:   #0d1b2a;
    --hz-navy-800:   #112236;
    --hz-navy-700:   #1a3352;
    --hz-navy-600:   #1e4068;
    --hz-blue-600:   #2563eb;
    --hz-blue-500:   #3b82f6;
    --hz-blue-400:   #60a5fa;
    --hz-text-100:   #f1f5f9;
    --hz-text-300:   #cbd5e1;
    --hz-text-400:   #94a3b8;
    --hz-text-500:   #64748b;

    /* Override Bootstrap 4 theme colours */
    --primary:       #3b82f6;
    --secondary:     #1a3352;
    --success:       #22c55e;
    --info:          #60a5fa;
    --warning:       #f59e0b;
    --danger:        #ef4444;
    --light:         #1a3352;
    --dark:          #040d18;
}

/* --------------------------------------------------------------------------
   2. Base / Body
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body,
body.primary-bg-color {
    background-color: var(--hz-navy-900) !important;
    color: var(--hz-text-300) !important;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--hz-blue-400);
    transition: color 0.15s ease;
}
a:hover { color: #93c5fd; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { color: #ffffff; }

hr { border-color: var(--hz-navy-700); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--hz-navy-900); }
::-webkit-scrollbar-thumb { background: var(--hz-navy-700); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--hz-blue-500); }

/* --------------------------------------------------------------------------
   3. Top Bar (admin masquerade / logged-in notice)
   -------------------------------------------------------------------------- */
.topbar,
#topbar {
    background-color: var(--hz-navy-950) !important;
    border-bottom: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-400) !important;
}
.topbar a,
#topbar a { color: var(--hz-text-300) !important; }
.topbar a:hover,
#topbar a:hover { color: #ffffff !important; }

/* --------------------------------------------------------------------------
   4. Navigation / Navbar
   -------------------------------------------------------------------------- */
.navbar,
nav.navbar,
.main-navbar-wrapper,
.navbar-light {
    background-color: rgba(13, 27, 42, 0.97) !important;
    border-bottom: 1px solid var(--hz-navy-700) !important;
    box-shadow: 0 1px 20px rgba(0,0,0,0.4) !important;
}

.navbar-brand img { height: 48px; width: auto; object-fit: contain; }

.navbar-nav .nav-link,
.navbar-nav .nav-item > a,
.navbar-nav .nav-item > button {
    color: var(--hz-text-300) !important;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease;
    border-radius: 8px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item > a:hover,
.navbar-nav .nav-item > button:hover {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.05) !important;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active > a {
    color: var(--hz-blue-400) !important;
    background-color: rgba(59,130,246,0.1) !important;
}

.navbar-toggler {
    border: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}
.navbar-toggler-icon { filter: invert(70%); }

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    padding: 8px !important;
}
.dropdown-item {
    color: var(--hz-text-300) !important;
    border-radius: 8px !important;
    font-size: 0.875rem;
    padding: 0.5rem 1rem !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(255,255,255,0.05) !important;
    color: #ffffff !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: rgba(59,130,246,0.15) !important;
    color: var(--hz-blue-400) !important;
}
.dropdown-divider { border-color: var(--hz-navy-700) !important; }
.dropdown-header { color: var(--hz-text-500) !important; font-size: 0.75rem; }

/* Cart badge */
.cart-btn .badge,
.cart-count { background-color: var(--hz-blue-500) !important; }

/* --------------------------------------------------------------------------
   5. Layout — Sidebar & Content columns
   -------------------------------------------------------------------------- */
#main-body { background-color: var(--hz-navy-900); }

.container-fluid,
.container { padding-top: 0; }

/* Sidebar */
.sidebar {
    background-color: transparent !important;
}
.sidebar .card,
.sidebar .panel {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 12px !important;
}
.sidebar .list-group-item {
    background-color: transparent !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar .list-group-item:hover,
.sidebar .list-group-item.active {
    background-color: rgba(59,130,246,0.1) !important;
    color: var(--hz-blue-400) !important;
}
.sidebar .list-group-item.active { border-left: 3px solid var(--hz-blue-500) !important; }

/* Primary content area */
.primary-content { padding-top: 2rem; padding-bottom: 2rem; }

/* --------------------------------------------------------------------------
   6. Cards / Panels
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
    transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important; }

.card-title,
.card-header {
    background-color: var(--hz-navy-700) !important;
    border-bottom: 1px solid var(--hz-navy-700) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 11px 11px 0 0 !important;
    padding: 0.75rem 1rem !important;
}
.card-body { color: var(--hz-text-300) !important; }
.card-footer {
    background-color: var(--hz-navy-800) !important;
    border-top: 1px solid var(--hz-navy-700) !important;
    border-radius: 0 0 11px 11px !important;
    color: var(--hz-text-400) !important;
}

/* Coloured card headers */
.card-title.bg-primary,
.card-header.bg-primary { background-color: var(--hz-blue-600) !important; }
.card-title.bg-success,
.card-header.bg-success { background-color: #16a34a !important; }
.card-title.bg-danger,
.card-header.bg-danger  { background-color: #dc2626 !important; }
.card-title.bg-warning,
.card-header.bg-warning { background-color: #d97706 !important; color: #ffffff !important; }
.card-title.bg-info,
.card-header.bg-info    { background-color: #0284c7 !important; }

/* Info/stat boxes on dashboard */
.card-stat { text-align: center; }
.card-stat .stat-value { font-size: 2rem; font-weight: 800; color: var(--hz-blue-400); }
.card-stat .stat-label { font-size: 0.75rem; color: var(--hz-text-500); text-transform: uppercase; letter-spacing: 0.05em; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 8px !important;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.15s ease !important;
}

.btn-primary,
.btn-primary:not(:disabled) {
    background-color: var(--hz-blue-500) !important;
    border-color: var(--hz-blue-500) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.3) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--hz-blue-600) !important;
    border-color: var(--hz-blue-600) !important;
    box-shadow: 0 4px 16px rgba(59,130,246,0.4) !important;
}

.btn-success {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}
.btn-success:hover { background-color: #15803d !important; border-color: #15803d !important; }

.btn-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}
.btn-danger:hover { background-color: #b91c1c !important; border-color: #b91c1c !important; }

.btn-warning {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}
.btn-warning:hover { background-color: #b45309 !important; border-color: #b45309 !important; }

.btn-default,
.btn-secondary,
.btn-light {
    background-color: transparent !important;
    border: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
    background-color: rgba(255,255,255,0.05) !important;
    border-color: rgba(59,130,246,0.4) !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    border-color: var(--hz-blue-500) !important;
    color: var(--hz-blue-400) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: rgba(59,130,246,0.1) !important;
    color: var(--hz-blue-400) !important;
}

.btn-link { color: var(--hz-blue-400) !important; }
.btn-link:hover { color: #93c5fd !important; }

/* --------------------------------------------------------------------------
   8. Forms & Inputs
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: var(--hz-navy-950) !important;
    border: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
    border-radius: 8px !important;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--hz-navy-950) !important;
    border-color: var(--hz-blue-500) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
    outline: none;
}
.form-control::placeholder { color: var(--hz-text-500) !important; }

/* Catch controls that are not consistently tagged with .form-control in WHMCS output */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.custom-select {
    background-color: var(--hz-navy-950) !important;
    border: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus,
.custom-select:focus {
    background-color: var(--hz-navy-950) !important;
    border-color: var(--hz-blue-500) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--hz-text-500) !important;
}

/* File inputs and native upload buttons frequently remain light in browsers */
input[type="file"] {
    background-color: var(--hz-navy-950) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 8px !important;
    color: var(--hz-text-300) !important;
    padding: 0.35rem 0.45rem !important;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: rgba(59,130,246,0.16) !important;
    color: var(--hz-blue-400) !important;
    border: 1px solid rgba(59,130,246,0.35) !important;
    border-radius: 6px !important;
    padding: 0.32rem 0.65rem !important;
    margin-right: 0.6rem !important;
    cursor: pointer !important;
}

/* Prevent browser autofill from turning fields light yellow/white */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hz-text-300) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--hz-navy-950) inset !important;
    box-shadow: 0 0 0px 1000px var(--hz-navy-950) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Select2 controls often render with light defaults unless explicitly themed */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown {
    background: var(--hz-navy-950) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-results__option {
    color: var(--hz-text-300) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-selection--multiple .select2-search__field {
    background: var(--hz-navy-950) !important;
    color: var(--hz-text-300) !important;
    border-color: var(--hz-navy-700) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--hz-text-500) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-results__option[aria-selected=true] {
    background: rgba(59,130,246,0.12) !important;
    color: #ffffff !important;
}

.input-group-text {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-400) !important;
    border-radius: 8px !important;
}

.form-control[disabled],
.form-control[readonly] {
    background-color: var(--hz-navy-800) !important;
    color: var(--hz-text-500) !important;
    opacity: 0.7;
}

/* Select / option */
select.form-control option {
    background-color: var(--hz-navy-800);
    color: var(--hz-text-300);
}

.form-group label,
label { color: var(--hz-text-300) !important; font-size: 0.875rem; font-weight: 500; }

/* Custom checkboxes & radios */
.custom-control-label::before {
    background-color: var(--hz-navy-950) !important;
    border-color: var(--hz-navy-700) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--hz-blue-500) !important;
    border-color: var(--hz-blue-500) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
}

/* Password strength */
#pstrength { color: var(--hz-text-400) !important; }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table {
    color: var(--hz-text-300) !important;
    border-color: var(--hz-navy-700) !important;
}
.table thead th {
    background-color: var(--hz-navy-700) !important;
    border-color: var(--hz-navy-700) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.table tbody tr { border-color: var(--hz-navy-700) !important; }
.table tbody td { border-color: var(--hz-navy-700) !important; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(17,34,54,0.6) !important;
}
.table-hover tbody tr:hover {
    background-color: rgba(59,130,246,0.05) !important;
    color: #ffffff !important;
}
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--hz-navy-700) !important; }

/* DataTables overrides */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info { color: var(--hz-text-400) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--hz-navy-950) !important;
    border: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--hz-text-400) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--hz-blue-600) !important;
    border-color: var(--hz-blue-600) !important;
    color: #ffffff !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(59,130,246,0.1) !important;
    border-color: var(--hz-navy-700) !important;
    color: #ffffff !important;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   10. Modals
   -------------------------------------------------------------------------- */
.modal-content {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 64px rgba(0,0,0,0.6) !important;
    color: var(--hz-text-300) !important;
}
.modal-header {
    border-bottom: 1px solid var(--hz-navy-700) !important;
    background-color: var(--hz-navy-700) !important;
    border-radius: 15px 15px 0 0 !important;
}
.modal-title { color: #ffffff !important; font-weight: 600; }
.modal-header .close {
    color: var(--hz-text-400) !important;
    text-shadow: none;
    opacity: 0.8;
}
.modal-header .close:hover { color: #ffffff !important; opacity: 1; }
.modal-footer {
    border-top: 1px solid var(--hz-navy-700) !important;
    background-color: var(--hz-navy-800) !important;
    border-radius: 0 0 15px 15px !important;
}
.modal-backdrop { background-color: rgba(4,13,24,0.8) !important; }

/* --------------------------------------------------------------------------
   11. Alerts / Flash Messages
   -------------------------------------------------------------------------- */
.alert {
    border-radius: 10px !important;
    border-width: 0 0 0 4px !important;
    font-size: 0.875rem;
}
.alert-success {
    background-color: rgba(22,163,74,0.12) !important;
    border-color: #16a34a !important;
    color: #86efac !important;
}
.alert-danger,
.alert-error {
    background-color: rgba(220,38,38,0.12) !important;
    border-color: #dc2626 !important;
    color: #fca5a5 !important;
}
.alert-warning {
    background-color: rgba(217,119,6,0.12) !important;
    border-color: #d97706 !important;
    color: #fcd34d !important;
}
.alert-info {
    background-color: rgba(59,130,246,0.12) !important;
    border-color: var(--hz-blue-500) !important;
    color: var(--hz-blue-400) !important;
}
.alert .close { color: inherit !important; opacity: 0.7; }
.alert .close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   12. Badges
   -------------------------------------------------------------------------- */
.badge { border-radius: 6px !important; font-weight: 600; font-size: 0.7rem; }
.badge-primary  { background-color: var(--hz-blue-600) !important; color: #fff !important; }
.badge-success  { background-color: #16a34a !important; color: #fff !important; }
.badge-danger   { background-color: #dc2626 !important; color: #fff !important; }
.badge-warning  { background-color: #d97706 !important; color: #fff !important; }
.badge-info     { background-color: #0284c7 !important; color: #fff !important; }
.badge-secondary{ background-color: var(--hz-navy-700) !important; color: var(--hz-text-300) !important; }
.badge-light    { background-color: rgba(255,255,255,0.1) !important; color: var(--hz-text-300) !important; }
.badge-dark     { background-color: var(--hz-navy-950) !important; color: var(--hz-text-300) !important; }

/* Status-specific badges */
.badge-active   { background-color: rgba(22,163,74,0.15) !important; color: #86efac !important; border: 1px solid rgba(22,163,74,0.3) !important; }
.badge-pending  { background-color: rgba(217,119,6,0.15) !important; color: #fcd34d !important; border: 1px solid rgba(217,119,6,0.3) !important; }
.badge-suspended{ background-color: rgba(220,38,38,0.15) !important; color: #fca5a5 !important; border: 1px solid rgba(220,38,38,0.3) !important; }
.badge-cancelled{ background-color: rgba(100,116,139,0.15) !important; color: #94a3b8 !important; border: 1px solid rgba(100,116,139,0.3) !important; }

/* --------------------------------------------------------------------------
   13. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb {
    background-color: transparent !important;
    border: none !important;
    padding: 0.75rem 0 !important;
    font-size: 0.8125rem;
}
.breadcrumb-item a { color: var(--hz-blue-400) !important; }
.breadcrumb-item a:hover { color: #93c5fd !important; }
.breadcrumb-item.active { color: var(--hz-text-400) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--hz-text-500) !important; }

/* --------------------------------------------------------------------------
   14. Pagination
   -------------------------------------------------------------------------- */
.pagination .page-link {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
    border-radius: 8px !important;
    margin: 0 2px;
    transition: all 0.15s ease;
}
.pagination .page-link:hover {
    background-color: rgba(59,130,246,0.1) !important;
    border-color: var(--hz-blue-500) !important;
    color: #ffffff !important;
}
.pagination .page-item.active .page-link {
    background-color: var(--hz-blue-500) !important;
    border-color: var(--hz-blue-500) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.4) !important;
}
.pagination .page-item.disabled .page-link {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-500) !important;
}

/* --------------------------------------------------------------------------
   15. Tabs & Pills
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--hz-navy-700) !important;
}
.nav-tabs .nav-link {
    color: var(--hz-text-400) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 1rem;
    background-color: transparent !important;
    transition: color 0.15s ease;
}
.nav-tabs .nav-link:hover { color: #ffffff !important; border-bottom-color: var(--hz-navy-700) !important; }
.nav-tabs .nav-link.active {
    color: var(--hz-blue-400) !important;
    background-color: transparent !important;
    border-bottom-color: var(--hz-blue-500) !important;
}

.nav-pills .nav-link {
    color: var(--hz-text-400) !important;
    border-radius: 8px !important;
    font-size: 0.875rem;
    background-color: transparent !important;
}
.nav-pills .nav-link:hover { background-color: rgba(255,255,255,0.05) !important; color: #ffffff !important; }
.nav-pills .nav-link.active {
    background-color: rgba(59,130,246,0.12) !important;
    color: var(--hz-blue-400) !important;
}

.tab-content { border: none !important; }
.tab-pane { padding-top: 1.25rem; }

/* --------------------------------------------------------------------------
   16. List Groups
   -------------------------------------------------------------------------- */
.list-group-item {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}
.list-group-item:hover { background-color: rgba(255,255,255,0.04) !important; }
.list-group-item.active {
    background-color: rgba(59,130,246,0.12) !important;
    border-color: var(--hz-blue-500) !important;
    color: var(--hz-blue-400) !important;
}
.list-group-item-action { transition: background-color 0.15s ease; }
.list-group-item-success { background-color: rgba(22,163,74,0.12) !important; color: #86efac !important; }
.list-group-item-danger  { background-color: rgba(220,38,38,0.12) !important; color: #fca5a5 !important; }
.list-group-item-warning { background-color: rgba(217,119,6,0.12) !important; color: #fcd34d !important; }

/* --------------------------------------------------------------------------
   17. Progress Bars
   -------------------------------------------------------------------------- */
.progress {
    background-color: var(--hz-navy-700) !important;
    border-radius: 8px !important;
    height: 8px;
}
.progress-bar {
    background-color: var(--hz-blue-500) !important;
    border-radius: 8px !important;
}
.progress-bar-success { background-color: #16a34a !important; }
.progress-bar-danger  { background-color: #dc2626 !important; }
.progress-bar-warning { background-color: #d97706 !important; }

/* --------------------------------------------------------------------------
   18. Well / Pre / Code
   -------------------------------------------------------------------------- */
.well {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 10px !important;
    color: var(--hz-text-300) !important;
    box-shadow: none !important;
}

pre, code {
    background-color: var(--hz-navy-950) !important;
    color: #86efac !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 6px;
    font-size: 0.8125rem;
}
pre { padding: 1rem; overflow-x: auto; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
footer,
#footer {
    background-color: var(--hz-navy-950) !important;
    border-top: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-400) !important;
}
footer h3, footer h4, footer h5 { color: #ffffff !important; }
footer a { color: var(--hz-text-400) !important; }
footer a:hover { color: var(--hz-blue-400) !important; }

/* Language / currency bar */
.footer-bottom-bar {
    border-top: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-500) !important;
}

/* --------------------------------------------------------------------------
   20. Login / Register page (auth cards)
   -------------------------------------------------------------------------- */
.auth-card,
.login-card,
.register-card {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 48px rgba(0,0,0,0.5) !important;
}

/* Auth hero glow */
.auth-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(59,130,246,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   21. Invoice specific
   -------------------------------------------------------------------------- */
.invoice-details, .invoice-totals { color: var(--hz-text-300) !important; }
.invoice-header { border-bottom: 2px solid var(--hz-blue-500) !important; }
.invoice-total  { color: var(--hz-blue-400) !important; font-weight: 700; }

/* --------------------------------------------------------------------------
   22. Support Tickets
   -------------------------------------------------------------------------- */
.ticket-reply {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 10px !important;
    padding: 1.25rem !important;
}
.ticket-reply.staff-reply {
    background-color: rgba(59,130,246,0.06) !important;
    border-color: rgba(59,130,246,0.2) !important;
}
.ticket-reply .reply-header { color: var(--hz-text-400) !important; font-size: 0.8125rem; }
.ticket-reply .reply-body   { color: var(--hz-text-300) !important; }

/* --------------------------------------------------------------------------
   23. Domain / Service status indicators
   -------------------------------------------------------------------------- */
.status-active   { color: #86efac !important; }
.status-pending  { color: #fcd34d !important; }
.status-suspended{ color: #fca5a5 !important; }
.status-expired  { color: var(--hz-text-500) !important; }

/* --------------------------------------------------------------------------
   24. Misc utility overrides
   -------------------------------------------------------------------------- */
.text-muted        { color: var(--hz-text-500) !important; }
.text-primary      { color: var(--hz-blue-400) !important; }
.text-success      { color: #86efac !important; }
.text-danger       { color: #fca5a5 !important; }
.text-warning      { color: #fcd34d !important; }
.text-info         { color: var(--hz-blue-400) !important; }
.bg-primary        { background-color: var(--hz-blue-600) !important; }
.bg-success        { background-color: #16a34a !important; }
.bg-danger         { background-color: #dc2626 !important; }
.bg-warning        { background-color: #d97706 !important; }
.bg-info           { background-color: #0284c7 !important; }
.bg-light          { background-color: var(--hz-navy-800) !important; }
.bg-white          { background-color: var(--hz-navy-800) !important; }
.bg-dark           { background-color: var(--hz-navy-950) !important; }

/* Remove Bootstrap's white backgrounds on jumbotrons */
.jumbotron {
    background-color: var(--hz-navy-800) !important;
    border-radius: 16px !important;
    color: var(--hz-text-300) !important;
}

/* Popovers / Tooltips */
.popover {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    border-radius: 10px !important;
}
.popover-header {
    background-color: var(--hz-navy-700) !important;
    border-color: var(--hz-navy-700) !important;
    color: #ffffff !important;
    border-radius: 9px 9px 0 0 !important;
}
.popover-body { color: var(--hz-text-300) !important; }
.bs-popover-auto[x-placement^=top] .arrow::after,
.bs-popover-top .arrow::after { border-top-color: var(--hz-navy-800) !important; }
.bs-popover-auto[x-placement^=bottom] .arrow::after,
.bs-popover-bottom .arrow::after { border-bottom-color: var(--hz-navy-800) !important; }

.tooltip-inner {
    background-color: var(--hz-navy-700) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 0.8125rem;
}

/* Spinner */
.spinner-border,
.spinner-grow { color: var(--hz-blue-400) !important; }

/* Print */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .card { background: #fff !important; border: 1px solid #ddd !important; }
    .navbar, footer, .sidebar { display: none !important; }
}

/* --------------------------------------------------------------------------
   26. Order Form / Shopping Cart (aggressive parent-theme overrides)
   -------------------------------------------------------------------------- */

/* Package / plan selection list */
#packageList .card,
#packageList > .card,
#productList .card,
.package-list .card,
.package-list-item,
.package-content,
.order-form-packages .card {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}
#packageList .card-header,
#productList .card-header,
.package-list .card-header {
    background-color: var(--hz-navy-700) !important;
    color: #ffffff !important;
    border-color: var(--hz-navy-700) !important;
}
#packageList .card-body,
#productList .card-body {
    background-color: var(--hz-navy-800) !important;
    color: var(--hz-text-300) !important;
}
#packageList .btn-link,
#productList .btn-link {
    color: var(--hz-text-300) !important;
    font-weight: 500;
    text-decoration: none !important;
}
#packageList .btn-link:hover,
#productList .btn-link:hover { color: #ffffff !important; }
#packageList .btn-link[aria-expanded="true"] { color: var(--hz-blue-400) !important; }

/* Plan feature lists */
#packageList .list-group-item,
#productList .list-group-item,
.package-addons .list-group-item {
    background-color: transparent !important;
    border-color: rgba(26,51,82,0.7) !important;
    color: var(--hz-text-400) !important;
    padding: 0.5rem 0.75rem !important;
}

/* Addon options */
#addons .card,
.addon-box,
.addon-item-box {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}

/* Cart sidebar on order pages */
#cart-sidebar > .card,
#cart-sidebar .panel,
.order-sidebar .card,
.cart-items-list {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}

/* Domain search */
.domain-search-results .card,
.domain-pricing-table .card,
#domainSearchResults .card {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}

/* Order review / checkout summary */
#orderSummary,
#checkoutForm .card,
.checkout-panel,
.review-order-box {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}

/* Payment method selection */
#paymentGatewaySelector .card,
.payment-method-option {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
    cursor: pointer;
    transition: border-color 0.15s ease !important;
}
#paymentGatewaySelector .card:hover { border-color: var(--hz-blue-500) !important; }
#paymentGatewaySelector .card.active { 
    border-color: var(--hz-blue-500) !important;
    background-color: rgba(59,130,246,0.08) !important;
}

/* Order step indicators */
.steps-indicator li,
.order-step { color: var(--hz-text-400) !important; }
.steps-indicator li.active,
.order-step.active { color: var(--hz-blue-400) !important; }
.steps-indicator li.complete,
.order-step.complete { color: #86efac !important; }

/* Configure product page */
body.template-cartproductdetails .card,
body.template-cartaddons .card,
body.template-cartdomaincontact .card,
body.template-cartdomains .card,
body.template-checkout .card {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}

/* ---- General "everything must be dark" sweep ---- */
/* Targets any remaining light panels/cards in order forms */
.order-form-wrapper .card,
.order-form-wrapper .panel,
.order-form-wrapper .panel-default,
.order-form-wrapper .well,
.order-form-wrapper .list-group-item {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}

/* ---- standard_cart / hosti_cart product cards (use .product, not .card) ---- */
#order-standard_cart .products .product {
    background: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 12px !important;
    color: var(--hz-text-300) !important;
}
#order-standard_cart .products .product header {
    background: var(--hz-navy-900) !important;
    border-bottom: 1px solid var(--hz-navy-700) !important;
    border-radius: 11px 11px 0 0 !important;
}
#order-standard_cart .products .product header span {
    color: #ffffff !important;
}
#order-standard_cart .products .product .product-desc,
#order-standard_cart .products .product .product-desc ul li,
#order-standard_cart .products .product .product-desc p {
    color: var(--hz-text-300) !important;
}
#order-standard_cart .products .product footer {
    background: transparent !important;
    border-top: 1px solid var(--hz-navy-700) !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    text-align: center !important;
}
/* "Order Now" → HostZone blue instead of green */
#order-standard_cart .products .product footer a,
#order-standard_cart .products .product footer a.primary__btn,
#order-standard_cart .products .product footer a.btn-order-now {
    background-color: var(--hz-blue-500) !important;
    border-color: var(--hz-blue-500) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}
#order-standard_cart .products .product footer a:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}
/* Addon panel button green → blue */
#order-standard_cart .panel-addon .panel-add,
#order-standard_cart .panel-addon-selected .panel-add {
    background-color: var(--hz-blue-500) !important;
    color: #ffffff !important;
}
/* Product config info box */
#order-standard_cart .product-info {
    background-color: var(--hz-navy-800) !important;
    border-top-color: var(--hz-navy-700) !important;
    border-bottom-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}
#order-standard_cart .product-info .product-title { color: #ffffff !important; }
/* Order summary box */
#order-standard_cart .order-summary {
    background-color: var(--hz-navy-700) !important;
    border-bottom-color: var(--hz-navy-700) !important;
    border-radius: 12px !important;
}
#order-standard_cart .order-summary h2 {
    background-color: var(--hz-navy-700) !important;
    color: #ffffff !important;
    border-radius: 11px 11px 0 0 !important;
}
#order-standard_cart .summary-container {
    background-color: var(--hz-navy-800) !important;
    color: var(--hz-text-300) !important;
    border-radius: 0 0 11px 11px !important;
}
#order-standard_cart .order-summary .product-name { color: #ffffff !important; }
#order-standard_cart .order-summary .product-group { color: var(--hz-text-400) !important; }
#order-standard_cart .order-summary .summary-totals {
    border-top-color: var(--hz-navy-700) !important;
    border-bottom-color: var(--hz-navy-700) !important;
}
#order-standard_cart .order-summary .total-due-today .amt { color: #ffffff !important; }
/* Sidebar in order form */
#order-standard_cart .cart-sidebar h3 { color: #ffffff !important; }
#order-standard_cart .cart-sidebar .list-group-item { color: var(--hz-text-300) !important; }
#order-standard_cart .cart-sidebar .list-group-item.active,
#order-standard_cart .cart-sidebar .list-group-item.active a { color: var(--hz-blue-400) !important; font-weight: 600; }

/* ---- Domain selection form ---- */
#order-standard_cart .domain-selection-options .option {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}
#order-standard_cart .domain-selection-options .option:hover {
    background-color: var(--hz-navy-700) !important;
}
#order-standard_cart .domain-selection-options .option-selected {
    background-color: var(--hz-navy-700) !important;
    border-color: var(--hz-blue-500) !important;
}
#order-standard_cart .domain-selection-options label,
#order-standard_cart .domain-selection-options .option-selected label {
    color: var(--hz-text-300) !important;
}
/* Domain search input box and textarea */
#order-standard_cart .domain-checker-advanced textarea,
#order-standard_cart .domain-input-group textarea,
.domain-checker-container .input-group-box,
.domain-checker-container textarea {
    background-color: var(--hz-navy-900) !important;
    border: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
    border-radius: 8px !important;
}
/* Multiselect toggle buttons (Include TLDs, Maximum Length) */
#order-standard_cart .domain-checker-advanced .multiselect,
.domain-checker-advanced .multiselect {
    background-color: var(--hz-navy-700) !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}
/* Domain results */
#domainSearchResults .domain-checker-available { color: #4ade80 !important; }
#domainSearchResults .domain-checker-unavailable { color: #f87171 !important; }

/* ---- Markdown editor (support ticket message box) ---- */
.md-editor,
div.md-editor {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    border-radius: 8px !important;
}
.md-editor .md-header,
.md-editor > .btn-toolbar {
    background-color: var(--hz-navy-700) !important;
    border-bottom-color: var(--hz-navy-700) !important;
    border-radius: 8px 8px 0 0 !important;
}
.md-editor .md-header .btn,
.md-editor > .btn-toolbar .btn {
    background-color: transparent !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}
.md-editor .md-header .btn:hover,
.md-editor > .btn-toolbar .btn:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}
.md-editor textarea,
.md-editor .md-input {
    background-color: var(--hz-navy-900) !important;
    color: var(--hz-text-300) !important;
    border-color: var(--hz-navy-700) !important;
}
.md-editor .md-footer {
    background-color: var(--hz-navy-700) !important;
    border-top-color: var(--hz-navy-700) !important;
    color: var(--hz-text-400) !important;
    border-radius: 0 0 8px 8px !important;
}
.md-editor .md-preview {
    background-color: var(--hz-navy-900) !important;
    color: var(--hz-text-300) !important;
}

/* ---- Login / Register pages (twenty-one parent template) ---- */
.login-form .card,
.register-form .card {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 48px rgba(0,0,0,0.5) !important;
}
.login-form .card-footer,
.register-form .card-footer {
    background-color: var(--hz-navy-900) !important;
    border-top-color: var(--hz-navy-700) !important;
    border-radius: 0 0 16px 16px !important;
}
.login-form .card .text-muted,
.register-form .card .text-muted { color: #94a3b8 !important; }
.login-form .input-group-text,
.register-form .input-group-text {
    background-color: var(--hz-navy-700) !important;
    border-color: var(--hz-navy-700) !important;
    color: #94a3b8 !important;
}
.login-form .btn-reveal-pw {
    background-color: var(--hz-navy-700) !important;
    border-color: var(--hz-navy-700) !important;
    color: #94a3b8 !important;
}
.providerLinkingFeedback { display: none; }

/* ---- Announcements (twenty-one parent template) ---- */
.announcements .announcement {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--hz-navy-700) !important;
}
.announcements .announcement:last-child { border-bottom: none !important; }
.announcements .announcement h1 { font-size: 1.125rem !important; font-weight: 700; margin-bottom: 0.5rem; }
.announcements .announcement h1 a { color: #ffffff !important; text-decoration: none !important; }
.announcements .announcement h1 a:hover { color: var(--hz-blue-400) !important; }
.announcements .announcement .list-inline-item { color: #64748b !important; font-size: 0.8125rem; }
.announcements .announcement article { color: var(--hz-text-400) !important; font-size: 0.9rem; line-height: 1.7; margin-bottom: 0.75rem; }
.announcements .announcement .btn-default {
    background: transparent !important;
    border-color: var(--hz-navy-700) !important;
    color: var(--hz-blue-400) !important;
    font-size: 0.8125rem !important;
}
.announcements .announcement .btn-default:hover {
    border-color: var(--hz-blue-500) !important;
    color: #ffffff !important;
}

/* ---- btn-link: accordion/plan-card buttons must be light on dark bg ---- */
.btn-link,
button.btn-link,
a.btn-link {
    color: var(--hz-text-300) !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.btn-link:hover,
button.btn-link:hover { color: #ffffff !important; text-decoration: none !important; }
.btn-link[aria-expanded="true"] { color: var(--hz-blue-400) !important; }

/* ---- Panel / collapse headings (order form sidebar) ---- */
.panel-title,
.panel-title > a,
.panel-title > button,
.panel-heading a,
.panel-heading button {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ---- Accordion card header buttons ---- */
.accordion .card-header > button,
.accordion .card-header > a {
    color: var(--hz-text-300) !important;
    text-decoration: none !important;
    width: 100%;
    text-align: left;
}
.accordion .card-header > button:hover,
.accordion .card-header > a:hover { color: #ffffff !important; }
.accordion .card-header > button[aria-expanded="true"] { color: var(--hz-blue-400) !important; }

/* --------------------------------------------------------------------------
   25. Responsive tweaks
   -------------------------------------------------------------------------- */

/* Explicit nav responsive — works even if Bootstrap responsive CSS fails */
@media (min-width: 768px) {
    #hz-nav-toggle             { display: none !important; }
    #hz-nav-menu               { display: none !important; }
}
@media (max-width: 767.98px) {
    #hz-navbar .d-none.d-md-flex { display: none !important; }
    #hz-nav-toggle               { display: flex !important; }
}

@media (max-width: 991.98px) {
    .primary-content { padding-top: 1rem; }
    .sidebar { margin-bottom: 1.5rem; }
    .navbar-collapse {
        background-color: var(--hz-navy-900) !important;
        border-top: 1px solid var(--hz-navy-700) !important;
        padding: 1rem;
    }
}

@media (max-width: 767.98px) {
    .table-responsive-sm td,
    .table-responsive-sm th { font-size: 0.8125rem; }
    .btn { font-size: 0.8125rem; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   27. Domain & Service Renewals page
   -------------------------------------------------------------------------- */

/* Container background (standard_cart sets #f8f8f8) */
.domain-renewals,
.service-renewals,
#order-standard_cart .domain-renewals,
#order-standard_cart .service-renewals {
    background-color: var(--hz-navy-800) !important;
    border-top: 1px solid var(--hz-navy-700) !important;
}

/* Individual domain row */
.domain-renewals .domain-renewal,
.service-renewals .service-renewal {
    background-color: var(--hz-navy-800) !important;
    border-bottom: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
}

/* Alternating row (standard_cart sets #f4f4f4) */
.domain-renewals .domain-renewal:nth-child(even),
.service-renewals .service-renewal:nth-child(even) {
    background-color: rgba(17,34,54,0.7) !important;
}

/* Domain name heading */
.domain-renewals .domain-renewal h3,
.service-renewals .service-renewal h3 {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

/* Expiry / info text */
.domain-renewals .domain-renewal p,
.service-renewals .service-renewal p {
    color: var(--hz-text-400) !important;
    font-size: 0.875rem !important;
}

/* Bootstrap 3 .label badges (used by standard_cart) */
.domain-renewals .domain-renewal .label,
.service-renewals .service-renewal .label {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    line-height: 1.4;
}
.label-success { background-color: rgba(22,163,74,0.2) !important; color: #86efac !important; }
.label-warning { background-color: rgba(217,119,6,0.2) !important; color: #fcd34d !important; }
.label-danger  { background-color: rgba(220,38,38,0.2) !important; color: #fca5a5 !important; }
.label-info    { background-color: rgba(59,130,246,0.15) !important; color: var(--hz-blue-400) !important; }
.label-grey,
.label-default { background-color: rgba(100,116,139,0.2) !important; color: #94a3b8 !important; }

/* Add to Cart / Renew button */
.btn-add-renewal-to-cart,
.btn-add-service-renewal-to-cart {
    background-color: var(--hz-blue-500) !important;
    border-color: var(--hz-blue-500) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
}
.btn-add-renewal-to-cart:hover,
.btn-add-service-renewal-to-cart:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}
/* Added-to-cart state */
.btn-add-renewal-to-cart.added,
.btn-add-renewal-to-cart:disabled {
    background-color: rgba(22,163,74,0.2) !important;
    border-color: #16a34a !important;
    color: #86efac !important;
}

/* Domain filter search input */
.form-control.domain-renewals-filter,
.form-control.service-renewals-filter {
    background-color: var(--hz-navy-900) !important;
    background-image: none !important;
    border: 1px solid var(--hz-navy-700) !important;
    color: var(--hz-text-300) !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
}

/* "header-lined" section heading */
#order-standard_cart .header-lined {
    border-bottom: 1px solid var(--hz-navy-700) !important;
    margin-bottom: 1.25rem !important;
}
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h2 {
    color: #ffffff !important;
}

/* Addon renewals */
.addon-renewals > div {
    border-color: var(--hz-navy-700) !important;
    background-color: var(--hz-navy-800) !important;
}

/* Secondary cart sidebar (right column containing Order Summary) */
#order-standard_cart .secondary-cart-sidebar .order-summary {
    background-color: var(--hz-navy-700) !important;
}

/* ---- Twenty-one .label.status-* classes (invoices, tickets, etc.) ---- */
.label.status { color: #ffffff !important; font-size: 0.75rem !important; font-weight: 600 !important; border-radius: 20px !important; padding: 3px 10px !important; }
.status-paid,     .label.status-paid     { background-color: rgba(22,163,74,0.85)   !important; color: #ffffff !important; }
.status-unpaid,   .label.status-unpaid   { background-color: rgba(220,38,38,0.85)   !important; color: #ffffff !important; }
.status-cancelled,.label.status-cancelled{ background-color: rgba(100,116,139,0.7)  !important; color: #ffffff !important; }
.status-refunded, .label.status-refunded { background-color: rgba(217,119,6,0.85)   !important; color: #ffffff !important; }
.status-collections { background-color: rgba(44,62,80,0.9) !important; color: #ffffff !important; }

/* --------------------------------------------------------------------------
   28. Module area buttons (e.g. DirectAdmin, cPanel login buttons)
   -------------------------------------------------------------------------- */
.module-client-area input[type="submit"],
.module-client-area input[type="button"],
.module-client-area .button,
input[type="submit"].button {
    background-color: var(--hz-blue-500) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    transition: background-color 0.15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.3) !important;
}
.module-client-area input[type="submit"]:hover,
.module-client-area input[type="button"]:hover,
.module-client-area .button:hover,
input[type="submit"].button:hover {
    background-color: #2563eb !important;
}

/* --------------------------------------------------------------------------
   29. Product / Service details page
   -------------------------------------------------------------------------- */

/* Outer container card */
.clientarea-product-details .card,
body.template-clientareaproductdetails .card {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
}

/* Product status card (the icon + name + status bar block) */
.product-status {
    background-color: var(--hz-navy-800) !important;
    border: 1px solid var(--hz-navy-700) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Icon area — replace light #efefef with dark navy */
div.product-details div.product-icon {
    background-color: var(--hz-navy-700) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 24px 30px 20px !important;
}

/* Font Awesome icon stack inside product-icon */
div.product-details div.product-icon .fa-circle {
    color: rgba(59,130,246,0.18) !important;
}
div.product-details div.product-icon .fa-inverse {
    color: var(--hz-blue-400) !important;
}

/* Product name and group name */
div.product-details div.product-icon h3 {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0.5rem 0 0.2rem !important;
}
div.product-details div.product-icon h4 {
    color: var(--hz-text-400) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* Status bar at bottom of product card */
.product-status-text {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 8px 10px !important;
    border-radius: 0 0 11px 11px !important;
}
.product-status-active   { background-color: rgba(22,163,74,0.85)  !important; }
.product-status-pending  { background-color: rgba(217,119,6,0.85)  !important; }
.product-status-suspended{ background-color: rgba(30,64,175,0.85)  !important; }
.product-status-terminated,
.product-status-cancelled{ background-color: rgba(100,116,139,0.6) !important; }
.product-status-fraud    { background-color: rgba(220,38,38,0.85)  !important; }

/* Tab content panel below the product card */
div.product-details-tab-container {
    background-color: var(--hz-navy-800) !important;
    border-color: var(--hz-navy-700) !important;
}

/* Product action buttons (Renew, Upgrade, Cancel) */
.product-actions-wrapper .btn-success {
    background-color: rgba(22,163,74,0.15) !important;
    border-color: rgba(22,163,74,0.4) !important;
    color: #86efac !important;
}
.product-actions-wrapper .btn-success:hover {
    background-color: rgba(22,163,74,0.3) !important;
    color: #ffffff !important;
}
.product-actions-wrapper .btn-danger {
    background-color: rgba(220,38,38,0.12) !important;
    border-color: rgba(220,38,38,0.3) !important;
    color: #fca5a5 !important;
}
.product-actions-wrapper .btn-danger:hover {
    background-color: rgba(220,38,38,0.25) !important;
    color: #ffffff !important;
}