/* ===================================================================
   Hoxta Dark Theme - WHMCS Client Area - Main Stylesheet
   Compatible with WHMCS v8.12.1+
   =================================================================== */

/* ============================
   CSS Variables
   ============================ */
:root {
    --bg: #070e1a;
    --bg2: #0d1829;
    --bg3: #111f35;
    --card: rgba(13, 24, 41, 0.85);
    --card-hover: rgba(20, 35, 58, 0.95);
    --text: #e8eef5;
    --text-muted: #6b7e95;
    --primary: #19c3ff;
    --primary-dark: #0ea2d4;
    --primary-glow: rgba(25, 195, 255, 0.25);
    --border: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(25, 195, 255, 0.35);
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #eab308;
    --glass: rgba(13, 24, 41, 0.5);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Dropdown-uri native — limbaj vizual „SELECT VERSIONS” / captura 3 */
    --hx-select-surface: rgba(5, 10, 22, 0.96);
    --hx-select-surface-hover: rgba(8, 16, 32, 0.98);
    --hx-select-border: rgba(25, 195, 255, 0.42);
    --hx-select-border-strong: rgba(25, 195, 255, 0.58);
    --hx-select-text: #e8eef5;
    --hx-select-option-bg: #060d1e;
}

/* ============================
   Reset & Base
   ============================ */
html, body {
    font-family: var(--font) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    min-height: 100vh !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

body {
    background-color: var(--bg) !important;
    background-image: none !important;
}

/* Override ALL WHMCS container backgrounds */
#main-body,
#main-body .container,
#main-body .container-fluid,
body > .container,
body > .container-fluid,
.main-content,
.client-area-content,
.hoxta-content {
    background: transparent !important;
    color: var(--text) !important;
}

/* Topbar: o singură linie jos — override orice umbră rămasă din alte straturi */
.hoxta-topbar {
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    outline: none !important;
    background-clip: padding-box !important;
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Breadcrumb în topbar: fără chenar propriu (altfel apar 2 linii în jurul textului Client Area / Portal Home) */
.hoxta-topbar .topbar-page-meta,
.hoxta-topbar nav.topbar-breadcrumb,
.hoxta-topbar .topbar-breadcrumb a,
.hoxta-topbar .topbar-bc-current {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.hoxta-topbar .topbar-page-title {
    color: #dbeeff !important;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Kill any extra separator artifacts on portal header */
.hoxta-topbar::before,
.hoxta-topbar::after,
.hoxta-topbar .topbar-left::before,
.hoxta-topbar .topbar-left::after,
.hoxta-topbar .topbar-page-meta::before,
.hoxta-topbar .topbar-page-meta::after,
.hoxta-topbar .topbar-breadcrumb::before,
.hoxta-topbar .topbar-breadcrumb::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Align sidebar logo row with topbar and remove duplicate border under logo */
.sidebar-header {
    min-height: 68px !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: var(--bg-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Avoid compositing seams at sticky/fixed junctions */
.hoxta-main,
.hoxta-sidebar {
    transform: none !important;
    filter: none !important;
}

/* Uniform color between index content and sidebar/menu */
.hoxta-sidebar,
.sidebar-header,
.hoxta-main {
    background: var(--bg) !important;
}

/* Remove translucent mismatch artifacts in sidebar top area */
.hoxta-sidebar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ============================
   Typography Overrides
   ============================ */
h1, h2, h3, h4, h5, h6 { color: var(--text) !important; font-family: var(--font) !important; font-weight: 700; }
p, td, th, li, label, small { color: var(--text) !important; }
/* Don't force color on div/span - breaks buttons and colored elements */
a { color: var(--primary) !important; text-decoration: none !important; transition: color 0.2s; }
a:hover { color: var(--primary); }

/* ============================
   Generic card list (used by invoices / tickets / domains)
   ============================ */
.hoxta-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hoxta-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(16,26,44,.6);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    transition: .2s;
}

.hoxta-card:hover {
    background: rgba(20,32,52,.7);
    border-color: rgba(25,195,255,.12);
}

.hoxta-card-main {
    flex: 1;
    min-width: 0;
}

.hoxta-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.hoxta-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Force consistent Hoxta tabs (Domains: My Domains / Register / Transfer / DNS Manager) */
.hxo-tabs .hxo-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #8db3d2 !important;
    text-decoration: none !important;
}
.hxo-tabs .hxo-tab:hover {
    border-color: rgba(25,195,255,.36);
    background: rgba(25,195,255,.12);
    color: #b9efff !important;
}
.hxo-tabs .hxo-tab.active {
    background: linear-gradient(180deg, #1ab0ed 0%, #0e9fd9 100%);
    border-color: transparent;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.hxo-tabs .hxo-tab.active i {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ============================
   Glass Card Component
   ============================ */
.glass-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 1.75rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.3s;
}
.glass-card:hover {
    border-color: var(--border-hover) !important;
}

/* ============================
   WHMCS Panel/Bootstrap Overrides
   ============================ */
.panel,
.panel-default,
.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.panel-danger,
.well,
.card,
.panel-body,
#main-body .panel,
#main-body .panel-default,
#main-body .panel-primary,
#main-body .well,
#main-body .card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.panel-heading,
#main-body .panel-heading {
    background: rgba(25, 195, 255, 0.06) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 14px 20px !important;
}
.panel-heading .panel-title,
.panel-heading h3 {
    color: var(--text) !important;
    font-weight: 700 !important;
}

.panel-body,
#main-body .panel-body {
    background: transparent !important;
    padding: 1.25rem !important;
}

.panel-footer,
#main-body .panel-footer {
    background: rgba(25, 195, 255, 0.03) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* ============================
   Form Elements
   ============================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
select,
textarea,
#main-body .form-control,
#main-body input[type="text"],
#main-body select,
#main-body textarea {
    background: rgba(30, 45, 71, 0.5) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 0.9375rem !important;
    padding: 10px 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus,
#main-body .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(25, 195, 255, 0.1) !important;
    outline: none !important;
}
select option,
#main-body select option {
    background: var(--bg2) !important;
    color: var(--text) !important;
}

/* Unified dropdown style (all template pages) — same visual language as OS selector */
html body select.form-control:not([multiple]):not(.hxo-no-theme-select),
html body select:not([multiple]):not(.hxo-no-theme-select),
html body #main-body select:not([multiple]):not(.hxo-no-theme-select),
html body .hoxta-content select:not([multiple]):not(.hxo-no-theme-select),
html body .clientarea select:not([multiple]):not(.hxo-no-theme-select),
html body .login-page select:not([multiple]):not(.hxo-no-theme-select),
html body .register-page select:not([multiple]):not(.hxo-no-theme-select),
html body select.dom-select:not([multiple]):not(.hxo-no-theme-select) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: rgba(25, 195, 255, 0.06) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2319c3ff' d='M6 8.2L1.2 3.4h9.6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.78rem center !important;
    background-size: 0.66rem !important;
    border: 1.5px solid rgba(25, 195, 255, 0.4) !important;
    border-radius: 12px !important;
    color: #e8eef5 !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    text-align: center !important;
    line-height: 1.35 !important;
    min-height: 44px !important;
    padding: 0.65rem 2.4rem 0.65rem 0.9rem !important;
    cursor: pointer !important;
    color-scheme: dark !important;
}
html body select.form-control:not([multiple]):not(.hxo-no-theme-select):focus,
html body select:not([multiple]):not(.hxo-no-theme-select):focus,
html body #main-body select:not([multiple]):not(.hxo-no-theme-select):focus,
html body .hoxta-content select:not([multiple]):not(.hxo-no-theme-select):focus,
html body .clientarea select:not([multiple]):not(.hxo-no-theme-select):focus,
html body .login-page select:not([multiple]):not(.hxo-no-theme-select):focus,
html body .register-page select:not([multiple]):not(.hxo-no-theme-select):focus,
html body select.dom-select:not([multiple]):not(.hxo-no-theme-select):focus {
    border-color: rgba(25, 195, 255, 0.65) !important;
    background-color: rgba(25, 195, 255, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(25, 195, 255, 0.08) !important;
    outline: none !important;
}
html body select.form-control:not([multiple]):not(.hxo-no-theme-select):hover,
html body select:not([multiple]):not(.hxo-no-theme-select):hover,
html body #main-body select:not([multiple]):not(.hxo-no-theme-select):hover,
html body .hoxta-content select:not([multiple]):not(.hxo-no-theme-select):hover,
html body .clientarea select:not([multiple]):not(.hxo-no-theme-select):hover,
html body .login-page select:not([multiple]):not(.hxo-no-theme-select):hover,
html body .register-page select:not([multiple]):not(.hxo-no-theme-select):hover,
html body select.dom-select:not([multiple]):not(.hxo-no-theme-select):hover {
    border-color: rgba(25, 195, 255, 0.56) !important;
}
html body select.form-control:not([multiple]):not(.hxo-no-theme-select) option,
html body select:not([multiple]):not(.hxo-no-theme-select) option {
    background: #060d1e !important;
    color: #e8eef5 !important;
    font-weight: 700 !important;
    text-align: center !important;
}
html body select.form-control:not([multiple]):not(.hxo-no-theme-select) option:checked,
html body select:not([multiple]):not(.hxo-no-theme-select) option:checked {
    background: rgba(16, 28, 48, 0.98) !important;
    color: #ffffff !important;
}

::placeholder { color: var(--text-muted) !important; }
::-webkit-input-placeholder { color: var(--text-muted) !important; }
::-moz-placeholder { color: var(--text-muted) !important; }

/* Label */
label,
.control-label,
#main-body label {
    color: var(--text) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

/* ============================
   Buttons (stil unitar – ca „Update Password”: gradient discret, umbră ușoară)
   ============================ */
.btn-primary,
.btn.btn-primary,
#main-body .btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary {
    background: linear-gradient(180deg, #1ab0ed 0%, #0e9fd9 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-family: var(--font) !important;
    padding: 10px 20px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    letter-spacing: 0;
    transition: all 0.2s ease !important;
}

.btn-primary.btn-sm,
button.btn-primary.btn-sm,
a.btn-primary.btn-sm {
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary.btn-lg,
button.btn-primary.btn-lg,
a.btn-primary.btn-lg {
    padding: 12px 28px !important;
    font-size: 1rem !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
#main-body .btn-primary:hover {
    background: linear-gradient(180deg, #22b8f5 0%, #14a8e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
    transform: none;
}

/* Fix ALL states of link buttons */
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-default,
.btn.btn-default,
#main-body .btn-default,
.btn-secondary {
    background: rgba(30, 45, 71, 0.5) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-family: var(--font) !important;
    padding: 10px 22px !important;
    transition: all 0.2s !important;
}
.btn-default:hover,
#main-body .btn-default:hover {
    background: rgba(25, 195, 255, 0.1) !important;
    border-color: var(--border-hover) !important;
    color: var(--primary) !important;
}

.btn-success,
#main-body .btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
}

.btn-danger,
#main-body .btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--red) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
}
.btn-danger:hover,
#main-body .btn-danger:hover {
    background: rgba(239, 68, 68, 0.25) !important;
}

.btn-info,
#main-body .btn-info {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
}

.btn-warning,
#main-body .btn-warning {
    background: rgba(234, 179, 8, 0.2) !important;
    color: var(--yellow) !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
    border-radius: var(--radius-sm) !important;
}

/* ============================
   Tables
   ============================ */
.table,
.table-responsive,
table,
#main-body table,
#main-body .table {
    background: transparent !important;
    color: var(--text) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.table > thead > tr > th,
.table > thead > tr > td,
#main-body table thead th {
    background: rgba(25, 195, 255, 0.06) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
#main-body table tbody td {
    background: transparent !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text) !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}
.table > tbody > tr:hover > td,
#main-body table tbody tr:hover td {
    background: rgba(25, 195, 255, 0.04) !important;
}
.table-striped > tbody > tr:nth-child(odd) > td,
#main-body .table-striped tbody tr:nth-child(odd) td {
    background: rgba(30, 45, 71, 0.15) !important;
}

/* ============================
   Alerts
   ============================ */
.alert,
#main-body .alert {
    border-radius: var(--radius) !important;
    border: 1px solid !important;
    padding: 1rem 1.25rem !important;
}
.alert-success,
#main-body .alert-success { background: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.3) !important; color: #4ade80 !important; }
.alert-danger,
.alert-error,
#main-body .alert-danger { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #fca5a5 !important; }
.alert-warning,
#main-body .alert-warning { background: rgba(234, 179, 8, 0.1) !important; border-color: rgba(234, 179, 8, 0.3) !important; color: #fde047 !important; }
.alert-info,
#main-body .alert-info { background: rgba(25, 195, 255, 0.1) !important; border-color: rgba(25, 195, 255, 0.3) !important; color: var(--primary) !important; }

/* ============================
   Badges & Labels
   ============================ */
.label, .badge, .tag,
#main-body .label, #main-body .badge {
    font-family: var(--font) !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
}
.label-success, .badge-success { background: rgba(34, 197, 94, 0.2) !important; color: #22c55e !important; }
.label-danger, .badge-danger { background: rgba(239, 68, 68, 0.2) !important; color: #ef4444 !important; }
.label-warning, .badge-warning { background: rgba(234, 179, 8, 0.2) !important; color: #eab308 !important; }
.label-info, .badge-info { background: rgba(25, 195, 255, 0.2) !important; color: var(--primary) !important; }
.label-primary, .badge-primary { background: rgba(25, 195, 255, 0.2) !important; color: var(--primary) !important; }
.label-default, .badge-default { background: rgba(107, 126, 149, 0.2) !important; color: var(--text-muted) !important; }

/* Invoice status badges - prioritate peste #main-body table tbody td { color } */
#main-body table.invoice-table tbody td span[data-badge],
#main-body .invoices-page span[data-badge],
#main-body .glass-card table.invoice-table tbody td span[data-badge] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
}
#main-body table.invoice-table tbody td span[data-badge="paid"],
#main-body .invoices-page span[data-badge="paid"],
#main-body .glass-card table.invoice-table tbody td span[data-badge="paid"] {
    background: rgba(34, 197, 94, 0.28) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
}
#main-body table.invoice-table tbody td span[data-badge="unpaid"],
#main-body .invoices-page span[data-badge="unpaid"],
#main-body .glass-card table.invoice-table tbody td span[data-badge="unpaid"] {
    background: rgba(239, 68, 68, 0.28) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
}
#main-body table.invoice-table tbody td span[data-badge="overdue"],
#main-body .invoices-page span[data-badge="overdue"],
#main-body .glass-card table.invoice-table tbody td span[data-badge="overdue"] {
    background: rgba(239, 68, 68, 0.35) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
}
#main-body table.invoice-table tbody td span[data-badge="cancelled"],
#main-body .invoices-page span[data-badge="cancelled"],
#main-body .glass-card table.invoice-table tbody td span[data-badge="cancelled"] {
    background: rgba(122, 139, 163, 0.28) !important;
    color: #9ca3af !important;
    border: 1px solid rgba(122, 139, 163, 0.4) !important;
}
#main-body table.invoice-table tbody td span[data-badge="fraud"],
#main-body .invoices-page span[data-badge="fraud"],
#main-body .glass-card table.invoice-table tbody td span[data-badge="fraud"] {
    background: rgba(239, 68, 68, 0.32) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.55) !important;
}
#main-body table.invoice-table tbody td span[data-badge="other"],
#main-body .invoices-page span[data-badge="other"],
#main-body .glass-card table.invoice-table tbody td span[data-badge="other"] {
    background: rgba(107, 126, 149, 0.22) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Fallback: dacă un hook afișează "Paid" în .textgreen în badge "other", textul rămâne verde */
#main-body .inv-status-paid .textgreen,
#main-body .invoice-table span[data-badge="paid"] .textgreen {
    color: #22c55e !important;
}
#main-body .inv-status-other .textgreen {
    color: #22c55e !important;
}

/* ============================
   Navigation Tabs
   ============================ */
.nav-tabs,
#main-body .nav-tabs {
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
}
.nav-tabs > li > a,
#main-body .nav-tabs > li > a {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}
.nav-tabs > li > a:hover,
#main-body .nav-tabs > li > a:hover {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom-color: rgba(25, 195, 255, 0.3) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
#main-body .nav-tabs > li.active > a {
    background: transparent !important;
    color: var(--primary) !important;
    border: none !important;
    border-bottom: 2px solid var(--primary) !important;
}
.tab-content,
#main-body .tab-content {
    background: transparent !important;
    padding: 1.5rem 0 !important;
}

/* ============================
   Dropdown Menus
   ============================ */
.dropdown-menu,
#main-body .dropdown-menu {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    padding: 6px !important;
}
.dropdown-menu > li > a,
#main-body .dropdown-menu > li > a {
    color: var(--text) !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    transition: all 0.15s !important;
}
.dropdown-menu > li > a:hover,
#main-body .dropdown-menu > li > a:hover {
    background: rgba(25, 195, 255, 0.1) !important;
    color: var(--primary) !important;
}
.dropdown-menu .divider,
#main-body .dropdown-menu .divider {
    background: var(--border) !important;
}

/* ============================
   Pagination
   ============================ */
.pagination,
#main-body .pagination {
    display: flex !important;
    gap: 4px !important;
}
.pagination > li > a,
.pagination > li > span,
#main-body .pagination > li > a {
    background: rgba(30, 45, 71, 0.4) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 14px !important;
    transition: all 0.2s !important;
}
.pagination > li > a:hover,
#main-body .pagination > li > a:hover {
    background: rgba(25, 195, 255, 0.1) !important;
    border-color: var(--border-hover) !important;
    color: var(--primary) !important;
}
.pagination > .active > a,
.pagination > .active > a:hover,
#main-body .pagination > .active > a {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

/* ============================
   Hoxta pagination (Services, Domains, Invoices, Tickets)
   ============================ */
.hoxta-pagination-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.5rem 0;
}
.hoxta-pagination-bar a,
.hoxta-pagination-bar span {
    min-width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.hoxta-pagination-bar .hoxta-page-btn {
    background: rgba(30, 45, 71, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--primary);
}
.hoxta-pagination-bar .hoxta-page-btn:hover {
    background: rgba(25, 195, 255, 0.12);
    border-color: rgba(25, 195, 255, 0.35);
    color: #7ddaff;
}
.hoxta-pagination-bar .hoxta-page-btn.hoxta-page-active,
.hoxta-pagination-bar .hoxta-page-active {
    background: linear-gradient(180deg, #1ab0ed 0%, #0e9fd9 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
.hoxta-pagination-bar .hoxta-page-ellipsis {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: default;
    font-weight: 500;
}

/* Forțare vizibilitate filtre Support Tickets (All, Open, Answered, etc.) */
.tickets-page .tickets-stats,
#main-body .tickets-page .tickets-stats,
.hoxta-content .tickets-page .tickets-stats {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 1.5rem !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

/* ============================
   Modal
   ============================ */
.modal-content,
#main-body .modal-content {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
.modal-header,
#main-body .modal-header {
    background: rgba(25, 195, 255, 0.04) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.modal-header .modal-title { color: var(--text) !important; font-weight: 700 !important; }
.modal-header .close { color: var(--text-muted) !important; opacity: 1 !important; }
.modal-body { color: var(--text) !important; }
.modal-footer {
    background: rgba(25, 195, 255, 0.02) !important;
    border-top: 1px solid var(--border) !important;
}
.modal-backdrop { background: rgba(7, 14, 26, 0.8) !important; }

/* ============================
   DataTable
   ============================ */
.dataTables_wrapper .dataTables_filter input,
#main-body .dataTables_filter input {
    background: rgba(30, 45, 71, 0.5) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 12px !important;
}
.dataTables_wrapper .dataTables_length select:not([multiple]):not(.hxo-no-theme-select) {
    background-color: var(--hx-select-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2319c3ff' d='M6 8.2L1.2 3.4h9.6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 0.6rem !important;
    border: 1.5px solid var(--hx-select-border) !important;
    color: var(--hx-select-text) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 0.35rem 1.75rem 0.35rem 0.5rem !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label {
    color: var(--text-muted) !important;
}

/* ============================
   File Upload
   ============================ */
input[type="file"],
#main-body input[type="file"] {
    background: rgba(30, 45, 71, 0.3) !important;
    border: 2px dashed rgba(25, 195, 255, 0.2) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-muted) !important;
    padding: 12px !important;
    cursor: pointer !important;
    font-family: var(--font) !important;
}
input[type="file"]:hover,
#main-body input[type="file"]:hover {
    border-color: rgba(25, 195, 255, 0.4) !important;
}
input[type="file"]::file-selector-button,
#main-body input[type="file"]::file-selector-button {
    background: var(--primary) !important;
    color: #070e1a !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    cursor: pointer !important;
    margin-right: 10px !important;
}

/* ============================
   WHMCS Specific Overrides
   ============================ */
/* Sidebar */
.sidebar-menu,
#main-body .sidebar-menu,
.list-group {
    background: transparent !important;
}
.list-group-item,
#main-body .list-group-item {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.list-group-item:hover,
#main-body .list-group-item:hover {
    background: rgba(25, 195, 255, 0.06) !important;
}
.list-group-item.active,
#main-body .list-group-item.active {
    background: rgba(25, 195, 255, 0.1) !important;
    border-color: var(--border-hover) !important;
    color: var(--primary) !important;
}

/* KB / Announcements */
.article-content,
.announcement-content,
#main-body .article-content {
    color: var(--text) !important;
}

/* WHMCS Store / Product Display overrides */
#main-body .product-pricing,
#main-body .pricing-table,
#main-body .product-features,
#main-body .store-product,
.store-product,
.product-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
}

/* WHMCs navbar override */
.navbar-default,
.navbar-fixed-top,
#main-body .navbar-default {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Tooltip */
.tooltip-inner {
    background: var(--bg2) !important;
    color: var(--text) !important;
    border-radius: 6px !important;
    border: 1px solid var(--border) !important;
}

/* Breadcrumb */
.breadcrumb,
#main-body .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
}
.breadcrumb > li,
.breadcrumb > li > a { color: var(--text-muted) !important; font-size: 0.8125rem !important; }
.breadcrumb > .active { color: var(--primary) !important; }

/* ============================
   Cart / Domain Search Overrides
   ============================ */
#main-body .domain-checker-container,
#main-body .domain-search,
#main-body #order-standard_cart,
#main-body .order-form-content,
.domain-checker-container,
.domain-search,
.order-form-content {
    background: transparent !important;
    color: var(--text) !important;
}

#main-body .domain-checker-container .panel,
#main-body .domain-checker-container .well,
#main-body .order-form-content .panel,
.domain-results .panel,
.domain-results .well {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

/* Input group in domain search */
#main-body .input-group .form-control,
.domain-search .input-group .form-control {
    background: rgba(30, 45, 71, 0.5) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
#main-body .input-group-btn .btn,
.domain-search .input-group-btn .btn {
    background: var(--primary) !important;
    color: #070e1a !important;
    border: none !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    font-weight: 700 !important;
}

/* ============================
   Utility
   ============================ */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--green) !important; }
.text-danger { color: var(--red) !important; }
.text-warning { color: var(--yellow) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-info { color: var(--primary) !important; }

.bg-primary { background-color: rgba(25, 195, 255, 0.15) !important; }
.bg-success { background-color: rgba(34, 197, 94, 0.15) !important; }
.bg-danger { background-color: rgba(239, 68, 68, 0.15) !important; }
.bg-warning { background-color: rgba(234, 179, 8, 0.15) !important; }
.bg-info { background-color: rgba(25, 195, 255, 0.15) !important; }

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

/* ============================
   Responsive
   ============================ */
@media (max-width: 768px) {
    .glass-card { padding: 1.25rem; }
    .table-responsive { border: none !important; }
    .info-grid { grid-template-columns: 1fr; }
}

/* ============================
   Animations
   ============================ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.glass-card { animation: fadeIn 0.3s ease-out; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(25, 195, 255, 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(25, 195, 255, 0.4); }


/* ============================
   FINAL OVERRIDE - Button Text Colors
   (forțăm text alb pe toate butoanele primare)
   ============================ */
.btn-primary,
.btn.btn-primary,
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active,
button.btn-primary,
input[type="submit"].btn-primary,
#main-body .btn-primary,
#main-body a.btn-primary {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* New Ticket button and any themed primary buttons */
.btn-new-ticket,
.btn-new-ticket:link,
.btn-new-ticket:visited,
.btn-new-ticket:hover,
.btn-new-ticket:active,
a[class*="btn-new"],
a[class*="btn-submit"],
.st2-btn-submit,
.st2-btn-submit:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    background: linear-gradient(180deg, #1ab0ed 0%, #0e9fd9 100%) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px !important;
}
.btn-new-ticket:hover,
a[class*="btn-new"]:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

/* reCAPTCHA: interiorul iframe e controlat de Google (fără culoare custom). Aici e doar „rama” din jur, în paleta Hoxta. */
.hxo-recaptcha-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hxo-recaptcha-box:hover {
    border-color: var(--border-hover);
}

/* reCAPTCHA v2 Invisible / v3: container minimal. */
.hxo-recaptcha-box--invisible {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 0.35rem 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.hxo-recaptcha-box--invisible:hover {
    border: none !important;
}

/* Ascunde insigna din colț; mențiunea reCAPTCHA poate fi în paginile Politici / Termeni de pe site. */
body .grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Invoice payment - Hoxta native alignment */
#main-body .hxo-pay-page {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0.35rem 0.35rem 0.8rem;
    font-family: "Inter", -apple-system, sans-serif;
    color: var(--text, #e8eef5);
}
#main-body .hxo-pay-form {
    width: 100%;
}
#main-body .hxo-pay-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.64fr) minmax(390px, 1fr);
    gap: 1.35rem;
    margin: 0 !important;
}
#main-body .hxo-pay-col-form,
#main-body .hxo-pay-col-summary {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}
#main-body .hxo-pay-card {
    background: var(--bg-card, rgba(16, 26, 44, 0.55));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border, rgba(30, 45, 71, 0.8));
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(2, 8, 23, 0.28);
    padding: 1.15rem;
}
#main-body .hxo-pay-head {
    margin: -1.15rem -1.15rem 1rem;
    padding: 0.82rem 1.15rem;
    border-bottom: 1px solid var(--border, rgba(30, 45, 71, 0.8));
    border-radius: 12px 12px 0 0;
    background: rgba(30, 45, 71, 0.28);
}
#main-body .hxo-pay-title {
    margin: 0;
    color: var(--text, #e8eef5);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}
#main-body .hxo-pay-title-summary {
    font-size: 1.64rem;
    letter-spacing: 0.01em;
}
#main-body .hxo-pay-subtitle {
    margin: 0.32rem 0 0;
    color: var(--text-muted, #7a8ba3);
    font-size: 0.9rem;
}
#main-body .hxo-pay-subtitle strong {
    color: var(--primary, #19c3ff);
    font-weight: 700;
}
#main-body .hxo-pay-card .form-group {
    margin-bottom: 0.95rem;
}
#main-body .hxo-pay-card .gateway-errors {
    margin: 0 0 0.95rem 0 !important;
}
#main-body .hxo-pay-card .gateway-errors:empty {
    display: none !important;
}
#main-body .hxo-pay-card .hxo-pay-method-row {
    margin-top: 0.55rem !important;
    margin-bottom: 1.05rem !important;
    padding-top: 0.45rem;
    border-top: 0 !important;
}
#main-body .hxo-pay-card .hxo-pay-method-row + .cc-details,
#main-body .hxo-pay-card .hxo-pay-method-row + .bank-details {
    margin-top: 0.4rem;
}
#main-body .hxo-pay-card-form .form-group.row {
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#main-body .hxo-pay-card-form .form-group.row > [class*="col-"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#main-body .hxo-pay-card .control-label,
#main-body .hxo-pay-card label {
    color: var(--text-muted, #7a8ba3) !important;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.35;
    text-align: left !important;
    margin-bottom: 0.38rem !important;
}
#main-body .hxo-pay-card .radio-inline,
#main-body .hxo-pay-card .checkbox-inline {
    color: var(--text, #e8eef5) !important;
    font-size: 0.9rem;
}
#main-body .hxo-pay-page .hxo-pay-card input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0 0.38rem 0 0;
    border-radius: 50%;
    border: 2px solid rgba(122, 139, 163, 0.8);
    background: rgba(7, 14, 28, 0.7);
    display: inline-block;
    vertical-align: -2px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#main-body .hxo-pay-page .hxo-pay-card input[type="radio"]:hover {
    border-color: rgba(25, 195, 255, 0.72);
}
#main-body .hxo-pay-page .hxo-pay-card input[type="radio"]:checked {
    border-color: #19c3ff;
    background:
        radial-gradient(circle at center, #19c3ff 0 3px, transparent 3px),
        rgba(7, 14, 28, 0.72);
    box-shadow: 0 0 10px rgba(25, 195, 255, 0.3);
}
#main-body .hxo-pay-page .hxo-pay-card input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(25, 195, 255, 0.2);
}
#main-body .hxo-pay-card input[type="text"],
#main-body .hxo-pay-card input[type="email"],
#main-body .hxo-pay-card input[type="tel"],
#main-body .hxo-pay-card input[type="password"],
#main-body .hxo-pay-card input[type="number"],
#main-body .hxo-pay-card select,
#main-body .hxo-pay-card textarea {
    width: 100%;
    min-height: 46px;
    background: rgba(30, 45, 71, 0.45) !important;
    border: 1px solid rgba(30, 45, 71, 0.85) !important;
    border-radius: 8px !important;
    color: var(--text, #e8eef5) !important;
    font-size: 0.95rem !important;
    padding: 0.62rem 0.76rem !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#main-body .hxo-pay-card input::placeholder,
#main-body .hxo-pay-card textarea::placeholder {
    color: rgba(122, 139, 163, 0.9) !important;
}
#main-body .hxo-pay-card input:focus,
#main-body .hxo-pay-card select:focus,
#main-body .hxo-pay-card textarea:focus {
    border-color: rgba(25, 195, 255, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(25, 195, 255, 0.1) !important;
}
#main-body .hxo-pay-card .field-error-msg {
    display: block;
    margin-top: 0.24rem;
    margin-bottom: 0.18rem;
    color: #fca5a5 !important;
    font-size: 0.78rem;
}
#main-body .hxo-pay-card .cc-details {
    margin-bottom: 1.08rem !important;
}
#main-body .hxo-pay-page #cvvWhereLink,
#main-body .hxo-pay-page #stripeCvcWhere {
    display: none !important;
}
#main-body .hxo-pay-card #inputDescriptionContainer {
    margin-top: 0.9rem !important;
}
#main-body .hxo-pay-submit-wrap {
    margin-top: 1.28rem;
    text-align: left;
}
#main-body .hxo-btn-submit {
    min-height: 46px;
    min-width: 210px;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 0.72rem 1.1rem !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #19c3ff 0%, #0ea5e9 100%) !important;
    box-shadow: 0 6px 18px rgba(25, 195, 255, 0.34);
    transition: all 0.2s ease !important;
}
#main-body .hxo-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(25, 195, 255, 0.42);
    background: linear-gradient(135deg, #2dd4ff 0%, #19c3ff 100%) !important;
}
#main-body .hxo-pay-card .btn-link {
    color: var(--primary, #19c3ff) !important;
    text-decoration: none !important;
    font-size: 0.86rem !important;
}
#main-body .hxo-pay-card .btn-link:hover {
    color: #00d4ff !important;
}
#main-body .hxo-pay-card .alert {
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    line-height: 1.45;
    padding: 0.72rem 0.82rem !important;
}
#main-body .hxo-pay-card .alert-warning,
#main-body .hxo-pay-alert.alert-warning {
    background: rgba(234, 179, 8, 0.1) !important;
    border-color: rgba(234, 179, 8, 0.25) !important;
    color: #fde68a !important;
}
#main-body .hxo-pay-card .alert-danger,
#main-body .hxo-pay-alert.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #fecaca !important;
}
#main-body .hxo-pay-card .hxo-alert.alert-danger {
    position: relative;
    margin: 0 0 1rem 0 !important;
    padding: 0.76rem 0.86rem 0.74rem 1rem !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-left: 3px solid rgba(248, 113, 113, 0.65) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(94, 25, 34, 0.24) 0%, rgba(50, 17, 24, 0.18) 100%) !important;
}
#main-body .hxo-pay-card .hxo-alert.alert-danger strong {
    display: block;
    margin: 0 0 0.26rem 0;
    color: #ffb7bf !important;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
#main-body .hxo-pay-card .hxo-alert.alert-danger ul {
    margin: 0 !important;
    padding-left: 1rem !important;
}
#main-body .hxo-pay-card .hxo-alert.alert-danger ul li {
    margin: 0.08rem 0;
    color: #ffd4da !important;
    font-size: 0.91rem;
    line-height: 1.38;
}
#main-body .hxo-pay-card .alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    color: #86efac !important;
}
#main-body .hxo-pay-card-summary .invoice-summary {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#main-body .hxo-pay-card-summary .invoice-summary h2 {
    display: none !important;
}
#main-body .hxo-pay-card-summary .invoice-summary .invoice-summary-table {
    background: linear-gradient(180deg, rgba(14, 27, 47, 0.84) 0%, rgba(11, 22, 39, 0.9) 100%);
    border: 1px solid rgba(84, 118, 161, 0.34);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 0.58rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
#main-body .hxo-pay-card-summary .invoice-summary table {
    margin-bottom: 0 !important;
    table-layout: fixed;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
#main-body .hxo-pay-card-summary .invoice-summary table td,
#main-body .hxo-pay-card-summary .invoice-summary .table-condensed > tbody > tr > td,
#main-body .hxo-pay-card-summary .invoice-summary .table-condensed > thead > tr > th {
    color: #dceafd !important;
    border-color: rgba(65, 100, 138, 0.3) !important;
    font-size: 0.93rem !important;
    padding: 0.66rem 0.88rem !important;
}
#main-body .hxo-pay-card-summary .invoice-summary .table > tbody > tr:first-child td {
    background: rgba(32, 52, 79, 0.74) !important;
    color: #ebf4ff !important;
    text-transform: uppercase;
    letter-spacing: 0.065em;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    border-bottom: 1px solid rgba(84, 120, 162, 0.42) !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}
#main-body .hxo-pay-card-summary .invoice-summary .table > tbody > tr td:first-child {
    width: 68%;
    line-height: 1.3;
    color: #deebfb !important;
    font-weight: 600 !important;
}
#main-body .hxo-pay-card-summary .invoice-summary .table > tbody > tr td:last-child {
    width: 32%;
    text-align: right !important;
    font-weight: 800;
    font-family: "JetBrains Mono", "Inter", monospace;
    font-size: 0.97rem !important;
    white-space: nowrap;
    color: #f4f9ff !important;
}
#main-body .hxo-pay-card-summary .invoice-summary .table > tbody > tr:nth-child(2) td {
    padding-top: 0.72rem !important;
    padding-bottom: 0.72rem !important;
}
#main-body .hxo-pay-card-summary .invoice-summary .table > tbody > tr:nth-child(2) td:first-child {
    font-size: 0.98rem !important;
    line-height: 1.22;
    color: #edf5ff !important;
    font-weight: 700 !important;
}
#main-body .hxo-pay-card-summary .invoice-summary .table td.total-row {
    color: #d2e6fb !important;
    font-weight: 650 !important;
}
#main-body .hxo-pay-card-summary .invoice-summary .table > tbody > tr:last-child td {
    color: #22c4ff !important;
    font-weight: 800 !important;
    background: linear-gradient(90deg, rgba(24, 57, 86, 0.72) 0%, rgba(16, 41, 66, 0.66) 100%) !important;
    border-top: 1px solid rgba(100, 157, 207, 0.54) !important;
    text-shadow: 0 0 10px rgba(34, 196, 255, 0.22);
}
#main-body .hxo-pay-card-summary .invoice-summary p {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    color: #e2efff !important;
    font-size: 1rem;
    line-height: 1.38;
    font-weight: 700;
    padding: 0.68rem 0.78rem !important;
    background: rgba(15, 34, 58, 0.62);
    border: 1px solid rgba(77, 115, 157, 0.32);
    border-radius: 12px;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-modern-stack {
    display: grid;
    gap: 0.68rem;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-item-card,
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-meta-card,
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-total-band,
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-kpi-grid {
    border: 1px solid rgba(80, 112, 149, 0.34);
    background: linear-gradient(180deg, rgba(15, 30, 52, 0.84) 0%, rgba(11, 22, 39, 0.9) 100%);
    border-radius: 12px;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-item-card {
    padding: 0.62rem 0.8rem 0.74rem;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-item-label {
    color: #9dc0e6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.69rem;
    font-weight: 700;
    margin-bottom: 0.42rem;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-item-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-item-desc {
    color: #f2f8ff;
    font-size: 1.02rem;
    line-height: 1.2;
    font-weight: 700;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-item-amount {
    color: #ffffff;
    font-size: 1.02rem;
    font-family: "JetBrains Mono", "Inter", monospace;
    font-weight: 800;
    white-space: nowrap;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    background: rgba(10, 21, 38, 0.75);
    border: 1px solid rgba(90, 125, 167, 0.34);
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-meta-card {
    padding: 0.36rem 0.78rem;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.42rem 0;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-meta-row + .hxo-meta-row {
    border-top: 1px solid rgba(71, 103, 140, 0.26);
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-meta-row span {
    color: #cfe2f9;
    font-size: 0.93rem;
    font-weight: 600;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-meta-row strong {
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 800;
    font-family: "JetBrains Mono", "Inter", monospace;
    white-space: nowrap;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-total-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.66rem 0.8rem;
    border-color: rgba(86, 157, 205, 0.48);
    background: linear-gradient(90deg, rgba(25, 61, 95, 0.7) 0%, rgba(16, 43, 69, 0.74) 100%);
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-total-band span {
    color: #38cbff;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-total-band strong {
    color: #24c6ff;
    font-size: 1.03rem;
    font-weight: 900;
    font-family: "JetBrains Mono", "Inter", monospace;
    text-shadow: 0 0 8px rgba(36, 198, 255, 0.2);
    white-space: nowrap;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.58rem 0.78rem;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-kpi-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-kpi-tile span {
    color: #d5e7fb;
    font-size: 0.92rem;
    font-weight: 700;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-kpi-tile strong {
    color: #ffffff;
    font-size: 0.94rem;
    font-family: "JetBrains Mono", "Inter", monospace;
    font-weight: 800;
    white-space: nowrap;
}
#main-body .hxo-pay-card-summary .hxo-summary-modern .hxo-kpi-tile-due strong {
    color: #25c8ff;
}
#main-body .hxo-pay-col-summary .invoice-summary strong {
    color: #ffffff !important;
    font-weight: 800;
}
#main-body .hxo-pay-alert {
    margin-top: 0.95rem !important;
}
#main-body .hxo-pay-col-summary .hxo-pay-card-summary {
    position: sticky;
    top: 1rem;
}
@media (max-width: 1200px) {
    #main-body .hxo-pay-layout {
        grid-template-columns: minmax(0, 1.58fr) minmax(350px, 1fr);
    }
}
@media (max-width: 992px) {
    #main-body .hxo-pay-page {
        max-width: 100%;
        padding: 0.12rem 0 0.6rem;
    }
    #main-body .hxo-pay-layout {
        display: block !important;
    }
    #main-body .hxo-pay-card {
        margin-bottom: 0.8rem;
    }
    #main-body .hxo-pay-head {
        margin: -1.15rem -1.15rem 0.9rem;
    }
    #main-body .hxo-pay-title {
        font-size: 1.25rem;
    }
    #main-body .hxo-pay-title-summary {
        font-size: 1.32rem;
    }
    #main-body .hxo-btn-submit {
        width: 100%;
        min-width: 0;
    }
    #main-body .hxo-pay-col-summary .hxo-pay-card-summary {
        position: static;
    }
}

/* Twenty-One invoice-payment fallback polished in Hoxta style */
#main-body #frmPayment {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
}
#main-body #frmPayment > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(360px, 1fr);
    gap: 1.35rem;
    margin: 0 !important;
}
#main-body #frmPayment > .row > .col-md-7,
#main-body #frmPayment > .row > .col-md-5 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}
#main-body #frmPayment .card {
    background: var(--bg-card, rgba(16, 26, 44, 0.55));
    border: 1px solid var(--border, rgba(30, 45, 71, 0.8));
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(2, 8, 23, 0.28);
}
#main-body #frmPayment .card .card-body {
    padding: 1.1rem 1.1rem 1.2rem !important;
}
#main-body #frmPayment .card .card-title {
    margin: -1.1rem -1.1rem 0.95rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border, rgba(30, 45, 71, 0.8));
    background: rgba(30, 45, 71, 0.28);
    color: var(--text, #e8eef5);
    font-size: 1.45rem;
    font-weight: 700;
}
#main-body #frmPayment .form-group.row {
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#main-body #frmPayment .form-group.row > [class*="col-"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#main-body #frmPayment label {
    color: var(--text-muted, #7a8ba3) !important;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.36rem !important;
    text-align: left !important;
}
#main-body #frmPayment input[type="text"],
#main-body #frmPayment input[type="email"],
#main-body #frmPayment input[type="tel"],
#main-body #frmPayment input[type="password"],
#main-body #frmPayment input[type="number"],
#main-body #frmPayment select,
#main-body #frmPayment textarea {
    width: 100%;
    min-height: 46px;
    background: rgba(30, 45, 71, 0.45) !important;
    border: 1px solid rgba(30, 45, 71, 0.85) !important;
    border-radius: 8px !important;
    color: var(--text, #e8eef5) !important;
    font-size: 0.95rem !important;
    padding: 0.62rem 0.76rem !important;
}
#main-body #frmPayment .field-error-msg {
    display: block;
    margin-top: 0.2rem;
    color: #fca5a5 !important;
    font-size: 0.78rem;
}
#main-body #frmPayment #btnSubmit {
    min-height: 46px;
    min-width: 210px;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 0.72rem 1.1rem !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #19c3ff 0%, #0ea5e9 100%) !important;
    box-shadow: 0 6px 18px rgba(25, 195, 255, 0.34);
}
#main-body #frmPayment .submit-container {
    margin-top: 1.2rem !important;
}
#main-body #frmPayment .submit-container .text-center {
    text-align: left !important;
}
#main-body #frmPayment .alert-warning {
    background: rgba(234, 179, 8, 0.1) !important;
    border-color: rgba(234, 179, 8, 0.25) !important;
    color: #fde68a !important;
}
#main-body #frmPayment .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #fecaca !important;
}
#main-body #frmPayment .invoice-summary {
    background: var(--bg-card, rgba(16, 26, 44, 0.55)) !important;
    border: 1px solid var(--border, rgba(30, 45, 71, 0.8)) !important;
    border-radius: 12px;
    padding: 0.9rem;
}
#main-body #frmPayment .invoice-summary h2 {
    color: var(--text, #e8eef5) !important;
    margin-top: 0;
}
#main-body #frmPayment .invoice-summary .table td {
    border-color: rgba(65, 100, 138, 0.3) !important;
}
@media (max-width: 992px) {
    #main-body #frmPayment > .row {
        grid-template-columns: 1fr;
    }
}

/* Payment UI cleanups for Twenty-One engine */
#main-body #frmPayment #cvvWhereLink,
#main-body #frmPayment #stripeCvcWhere {
    display: none !important;
}

#main-body #frmPayment #billingAddressChoice {
    margin-bottom: 0.7rem !important;
}

#main-body #frmPayment .alert.alert-danger {
    border-radius: 10px !important;
    padding: 0.72rem 0.82rem !important;
    margin-bottom: 0.9rem !important;
}