/* Custom Theme CSS for LimitSiz Cloud WHMCS Theme */

/* Alpine.js Cloak */
[x-cloak] { display: none !important; }

/* Clean Minimal Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Base Body Resets */
body {
    background-color: #f8fafc;
    color: #1e293b;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Glassmorphism helpers */
.glass-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.glass-dropdown {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Form controls reset */
.form-input-modern {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    transition: all 0.15s ease-in-out;
    color: #1e293b;
}

.form-input-modern:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* WHMCS Legacy Tables and Containers Modernizer */
.dataTables_wrapper, table.table {
    border-collapse: separate !important;
    border-spacing: 0 0.5rem !important;
    width: 100% !important;
}

table.table thead th {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 1rem !important;
    font-weight: 600 !important;
}

table.table tbody tr {
    background: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    border-radius: 0.75rem !important;
    transition: all 0.15s ease-in-out !important;
}

table.table tbody tr:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}

table.table tbody td {
    border: none !important;
    padding: 1rem !important;
    color: #334155 !important;
    font-size: 0.875rem !important;
}

table.table tbody tr td:first-child {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

table.table tbody tr td:last-child {
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

/* Clean Button Overrides for 3rd Party WHMCS modules */
.btn-primary {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
    border-radius: 0.75rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.btn-primary:hover {
    background-color: #6d28d9 !important;
    border-color: #6d28d9 !important;
}

.btn-default, .btn-secondary {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
    border-radius: 0.75rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
}
.btn-default:hover, .btn-secondary:hover {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

/* ============================================================
   WHMCS Custom Field Containers & Country Dropdown Modernizer
   ============================================================ */
.whmcs-custom-field-container,
.custom-input-wrap,
.custom-field-input {
    width: 100%;
}

.whmcs-custom-field-container input[type="text"],
.whmcs-custom-field-container input[type="password"],
.whmcs-custom-field-container input[type="email"],
.whmcs-custom-field-container input[type="number"],
.whmcs-custom-field-container select,
.whmcs-custom-field-container textarea,
.custom-input-wrap input[type="text"],
.custom-input-wrap input[type="password"],
.custom-input-wrap input[type="email"],
.custom-input-wrap input[type="number"],
.custom-input-wrap select,
.custom-input-wrap textarea,
.custom-field-input input[type="text"],
.custom-field-input select,
.custom-field-input textarea {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.15s ease-in-out !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.whmcs-custom-field-container input:focus,
.whmcs-custom-field-container select:focus,
.whmcs-custom-field-container textarea:focus,
.custom-input-wrap input:focus,
.custom-input-wrap select:focus,
.custom-input-wrap textarea:focus,
.custom-field-input input:focus,
.custom-field-input select:focus,
.custom-field-input textarea:focus {
    background-color: #ffffff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

.whmcs-custom-field-container select,
.custom-input-wrap select,
.custom-field-input select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
    padding-right: 2.25rem !important;
    cursor: pointer !important;
}

.whmcs-custom-field-container input[type="checkbox"],
.whmcs-custom-field-container input[type="radio"],
.custom-input-wrap input[type="checkbox"],
.custom-input-wrap input[type="radio"],
.custom-field-input input[type="checkbox"],
.custom-field-input input[type="radio"] {
    width: 1.125rem !important;
    height: 1.125rem !important;
    accent-color: #7c3aed !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin-right: 0.5rem !important;
}

.whmcs-custom-field-container label,
.custom-input-wrap label,
.custom-field-input label {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    cursor: pointer !important;
}

/* Country Dropdown Styling */
.whmcs-country-dropdown,
.whmcs-country-dropdown select,
select[name="country"],
select#country,
select#inputCountry {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 0.625rem 2.25rem 0.625rem 0.875rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
    color: #0f172a !important;
    outline: none !important;
    transition: all 0.15s ease-in-out !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.whmcs-country-dropdown select:focus,
select[name="country"]:focus,
select#country:focus,
select#inputCountry:focus {
    background-color: #ffffff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* ============================================================
   WHMCS Ajax Modal & 2FA Setup Dialog Modernizer
   ============================================================ */
#modalAjax.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem !important;
    overflow-y: auto !important;
}

#modalAjax.modal.show,
#modalAjax.modal.is-active,
#modalAjax.modal[style*="display: block"],
#modalAjax.modal[style*="display: flex"] {
    display: flex !important;
}

#modalAjax .modal-dialog {
    width: 100% !important;
    max-width: 32rem !important; /* 512px */
    margin: auto !important;
    animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#modalAjax .modal-content {
    background-color: #ffffff !important;
    border-radius: 1.5rem !important; /* rounded-3xl */
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

#modalAjax .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
}

#modalAjax .modal-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#modalAjax .modal-header button.close,
#modalAjax .modal-header .btn-close {
    background: #f1f5f9 !important;
    border: none !important;
    width: 2rem !important;
    height: 2rem !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: #64748b !important;
    cursor: pointer !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
}

#modalAjax .modal-header button.close:hover,
#modalAjax .modal-header .btn-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

#modalAjax .modal-body {
    padding: 1.5rem !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    max-height: calc(85vh - 130px) !important;
    overflow-y: auto !important;
}

/* Reset Tailwind reset for WHMCS HTML contents inside modal */
#modalAjax .modal-body p {
    margin-bottom: 0.875rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
}

#modalAjax .modal-body p:last-child {
    margin-bottom: 0 !important;
}

#modalAjax .modal-body h3,
#modalAjax .modal-body h4,
#modalAjax .modal-body h5 {
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.9375rem !important;
}

#modalAjax .modal-body .form-group {
    margin-bottom: 1.25rem !important;
}

#modalAjax .modal-body label {
    display: block !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 0.375rem !important;
}

#modalAjax .modal-body img {
    max-width: 170px !important;
    height: auto !important;
    display: block !important;
    margin: 1rem auto !important;
    border-radius: 1rem !important;
    background: #ffffff !important;
    padding: 0.625rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

#modalAjax .modal-body input[type="text"],
#modalAjax .modal-body input[type="password"],
#modalAjax .modal-body input[type="number"],
#modalAjax .modal-body .form-control {
    width: 100% !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    color: #0f172a !important;
    outline: none !important;
    transition: all 0.15s ease-in-out !important;
    box-sizing: border-box !important;
}

#modalAjax .modal-body input[type="text"]:focus,
#modalAjax .modal-body input[type="password"]:focus,
#modalAjax .modal-body input[type="number"]:focus,
#modalAjax .modal-body .form-control:focus {
    background-color: #ffffff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* 6-digit OTP Verification code input */
#modalAjax .modal-body input[name="code"],
#modalAjax .modal-body input.twofa-code-input {
    max-width: 220px !important;
    margin: 0.75rem auto !important;
    display: block !important;
    text-align: center !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.25em !important;
    padding: 0.625rem 0.75rem !important;
    border-width: 2px !important;
}

/* Alerts inside modal */
#modalAjax .modal-body .alert {
    border-radius: 0.875rem !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    margin: 0.75rem 0 1rem 0 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

#modalAjax .modal-body .alert[style*="display: none"],
#modalAjax .modal-body .alert[style*="display:none"],
#modalAjax .modal-body .alert.hidden,
#modalAjax .modal-body .alert:empty,
#modalAjax .modal-body #twofaactivationerror {
    display: none !important;
}

#modalAjax .modal-body .alert-danger,
#modalAjax .modal-body .alert-error {
    background-color: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #be123c !important;
}

#modalAjax .modal-body .alert-warning {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
}

#modalAjax .modal-body .alert-success {
    background-color: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #065f46 !important;
}

#modalAjax .modal-body .alert-info {
    background-color: #f5f3ff !important;
    border: 1px solid #ddd6fe !important;
    color: #5b21b6 !important;
}

/* Radio buttons inside modal (e.g. 2FA module selector) */
#modalAjax .modal-body .radio,
#modalAjax .modal-body .radio-inline,
#modalAjax .modal-body label.radio {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 0.875rem 1rem !important;
    margin-bottom: 0.625rem !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    transition: all 0.15s ease !important;
}

#modalAjax .modal-body .radio:hover {
    border-color: #c4b5fd !important;
    background: #faf5ff !important;
}

#modalAjax .modal-body input[type="radio"] {
    accent-color: #7c3aed !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin: 0 !important;
}

#modalAjax .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
}

#modalAjax .modal-footer .loader {
    margin-right: auto;
    font-size: 0.75rem;
    color: #64748b;
    display: none;
}

#modalAjax .modal-footer .loader.active {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

#modalAjax .modal-footer button,
#modalAjax .modal-footer .btn {
    border-radius: 0.75rem !important;
    padding: 0.55rem 1.25rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.375rem !important;
}

#modalAjax .modal-footer .btn-default {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

#modalAjax .modal-footer .btn-default:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

#modalAjax .modal-footer .btn-primary,
#modalAjax .modal-footer .modal-submit {
    background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

#modalAjax .modal-footer .btn-primary:hover,
#modalAjax .modal-footer .modal-submit:hover {
    background: linear-gradient(135deg, #6d28d9, #4f46e5) !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
}

#modalAjax .modal-footer .modal-submit.btn-danger,
#modalAjax .modal-footer .btn-danger {
    background: linear-gradient(135deg, #e11d48, #f43f5e) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25) !important;
}

#modalAjax .modal-footer .modal-submit.btn-danger:hover,
#modalAjax .modal-footer .btn-danger:hover {
    background: linear-gradient(135deg, #be123c, #e11d48) !important;
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.35) !important;
}

/* 2FA Login Challenge Container Styling */
.twofa-challenge-container {
    width: 100%;
}

.twofa-challenge-container p {
    font-size: 0.8125rem;
    color: #475569;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.twofa-challenge-container input[type="text"],
.twofa-challenge-container input[type="password"],
.twofa-challenge-container .form-control {
    width: 100% !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 1.125rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    text-align: center !important;
    letter-spacing: 0.25em !important;
    color: #0f172a !important;
    outline: none !important;
    transition: all 0.15s ease-in-out !important;
    margin-bottom: 1.25rem !important;
    box-sizing: border-box !important;
}

.twofa-challenge-container input[type="text"]:focus,
.twofa-challenge-container input[type="password"]:focus,
.twofa-challenge-container .form-control:focus {
    background-color: #ffffff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

.twofa-challenge-container input[type="submit"],
.twofa-challenge-container button[type="submit"],
.twofa-challenge-container .btn-primary {
    width: 100% !important;
    background-color: #7c3aed !important;
    border: 1px solid #7c3aed !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
    display: block !important;
}

.twofa-challenge-container input[type="submit"]:hover,
.twofa-challenge-container button[type="submit"]:hover,
.twofa-challenge-container .btn-primary:hover {
    background-color: #6d28d9 !important;
    border-color: #6d28d9 !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
}

/* ============================================================
   WHMCS Global Ajax Modal (#modalAjax) & 2FA Setup Dialog
   ============================================================ */
#modalAjax {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#modalAjax.in,
#modalAjax.show,
#modalAjax.open {
    display: flex !important;
}

#modalAjax .modal-dialog {
    width: 100% !important;
    max-width: 32rem !important; /* 512px */
    margin: auto !important;
    position: relative !important;
    z-index: 100000 !important;
}

#modalAjax .modal-content {
    background: #ffffff !important;
    border-radius: 1.5rem !important; /* 24px */
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
}

#modalAjax .modal-header {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
}

#modalAjax .modal-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

#modalAjax .modal-header .close {
    background: transparent !important;
    border: none !important;
    font-size: 1.25rem !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    padding: 0.25rem !important;
    line-height: 1 !important;
    border-radius: 0.5rem !important;
    transition: all 0.15s ease !important;
}

#modalAjax .modal-header .close:hover {
    color: #334155 !important;
    background: #e2e8f0 !important;
}

#modalAjax .modal-body {
    padding: 1.5rem !important;
    overflow-y: auto !important;
    font-size: 0.8125rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
}

#modalAjax .modal-footer {
    padding: 1rem 1.5rem !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
}

#modalAjax .modal-footer .btn-default {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

#modalAjax .modal-footer .btn-default:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
}

#modalAjax .modal-footer .modal-submit,
#modalAjax .modal-footer .btn-primary {
    background: #7c3aed !important;
    border: 1px solid #7c3aed !important;
    color: #ffffff !important;
    padding: 0.625rem 1.5rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
    transition: all 0.15s ease !important;
}

#modalAjax .modal-footer .modal-submit:hover,
#modalAjax .modal-footer .btn-primary:hover {
    background: #6d28d9 !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
}

#modalAjax .modal-footer .btn-danger {
    background: #e11d48 !important;
    border: 1px solid #e11d48 !important;
    color: #ffffff !important;
    padding: 0.625rem 1.5rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#modalAjax .modal-footer .btn-danger:hover {
    background: #be123c !important;
}

/* Injected 2FA Elements inside Modal Body */
#modalAjax .modal-body img,
#modalAjax .modal-body svg {
    margin: 0.5rem auto !important;
    padding: 0.5rem !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    max-width: 180px !important;
    max-height: 180px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

#modalAjax .modal-body input[type="text"],
#modalAjax .modal-body input[type="password"],
#modalAjax .modal-body .form-control {
    width: 100% !important;
    border-radius: 0.75rem !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

#modalAjax .modal-body input[name="code"] {
    max-width: 220px !important;
    margin: 0.75rem auto !important;
    text-align: center !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    letter-spacing: 0.25em !important;
    color: #0f172a !important;
    border-color: #7c3aed !important;
    display: block !important;
}

#modalAjax .modal-body input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

#modalAjax .modal-body .alert {
    border-radius: 1rem !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

#modalAjax .modal-body .alert-danger,
#modalAjax .modal-body .alert-error {
    background: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #be123c !important;
}

#modalAjax .modal-body .alert-success {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #047857 !important;
}

#modalAjax .modal-body .alert-warning {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
}

/* Dark theme, activated by the persisted html.dark preference. */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0b1120 !important;
    color: #e2e8f0 !important;
}

html.dark .bg-white {
    background-color: #111827 !important;
}

html.dark [class~="bg-white/70"],
html.dark [class~="bg-white/90"] {
    background-color: rgba(17, 24, 39, 0.85) !important;
}

html.dark [class~="bg-slate-50"],
html.dark [class~="bg-slate-50/50"],
html.dark [class~="bg-slate-50/60"],
html.dark [class~="bg-slate-50/70"],
html.dark [class~="bg-slate-50/80"],
html.dark [class~="bg-slate-50/90"] {
    background-color: #0f172a !important;
}

html.dark [class~="bg-slate-100"],
html.dark [class~="bg-slate-100/70"],
html.dark [class~="bg-slate-100/80"],
html.dark [class~="bg-slate-100/90"] {
    background-color: #1e293b !important;
}

html.dark [class~="bg-slate-200"],
html.dark [class~="bg-slate-200/60"],
html.dark [class~="bg-slate-200/70"] {
    background-color: #334155 !important;
}

html.dark [class*="text-slate-900"],
html.dark [class*="text-slate-800"] {
    color: #f1f5f9 !important;
}

html.dark [class*="text-slate-700"] {
    color: #e2e8f0 !important;
}

html.dark [class*="text-slate-600"],
html.dark [class*="text-slate-500"] {
    color: #cbd5e1 !important;
}

html.dark [class*="text-slate-400"] {
    color: #94a3b8 !important;
}

html.dark [class*="border-slate-"] {
    border-color: #334155 !important;
}

html.dark [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

html.dark .glass-header {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(51, 65, 85, 0.8);
}

html.dark .glass-dropdown {
    background: rgba(17, 24, 39, 0.97);
}

html.dark [class*="hover:bg-white"]:hover,
html.dark [class*="hover:bg-slate-50"]:hover {
    background-color: #1e293b !important;
}

html.dark [class*="hover:bg-slate-100"]:hover,
html.dark [class*="hover:bg-slate-200"]:hover {
    background-color: #334155 !important;
}

html.dark [class~="bg-purple-50"],
html.dark [class~="bg-purple-50/30"],
html.dark [class~="bg-purple-50/40"],
html.dark [class~="bg-purple-50/50"],
html.dark [class~="bg-purple-50/70"],
html.dark [class~="bg-purple-100"],
html.dark [class~="bg-indigo-50"],
html.dark [class~="bg-indigo-50/90"],
html.dark [class~="bg-indigo-100"],
html.dark [class~="bg-blue-50"],
html.dark [class~="bg-blue-50/50"],
html.dark [class~="bg-blue-100"] {
    background-color: rgba(99, 102, 241, 0.16) !important;
}

html.dark [class~="bg-emerald-50"],
html.dark [class~="bg-emerald-100"] {
    background-color: rgba(16, 185, 129, 0.14) !important;
}

html.dark [class~="bg-amber-50"],
html.dark [class~="bg-amber-50/80"],
html.dark [class~="bg-amber-100"],
html.dark [class~="bg-amber-200"] {
    background-color: rgba(245, 158, 11, 0.14) !important;
}

html.dark [class~="bg-rose-50"],
html.dark [class~="bg-rose-50/20"],
html.dark [class~="bg-rose-50/50"],
html.dark [class~="bg-rose-50/90"],
html.dark [class~="bg-rose-100"],
html.dark [class~="bg-rose-100/70"],
html.dark [class~="bg-rose-200/80"] {
    background-color: rgba(244, 63, 94, 0.14) !important;
}

html.dark [class*="text-purple-600"],
html.dark [class*="text-purple-700"],
html.dark [class*="text-indigo-600"],
html.dark [class*="text-indigo-700"] {
    color: #c4b5fd !important;
}

html.dark [class*="text-emerald-600"],
html.dark [class*="text-emerald-700"],
html.dark [class*="text-emerald-800"] {
    color: #6ee7b7 !important;
}

html.dark [class*="text-amber-600"],
html.dark [class*="text-amber-700"],
html.dark [class*="text-amber-800"] {
    color: #fcd34d !important;
}

html.dark [class*="text-rose-500"],
html.dark [class*="text-rose-600"],
html.dark [class*="text-rose-700"],
html.dark [class*="text-rose-800"] {
    color: #fda4af !important;
}

html.dark [class*="text-blue-600"],
html.dark [class*="text-blue-700"],
html.dark [class*="text-blue-800"] {
    color: #93c5fd !important;
}

html.dark .form-input-modern,
html.dark .whmcs-custom-field-container input,
html.dark .whmcs-custom-field-container select,
html.dark .whmcs-custom-field-container textarea,
html.dark .custom-input-wrap input,
html.dark .custom-input-wrap select,
html.dark .custom-input-wrap textarea,
html.dark .custom-field-input input,
html.dark .custom-field-input select,
html.dark .custom-field-input textarea,
html.dark select[name="country"],
html.dark select#country,
html.dark select#inputCountry,
html.dark .twofa-challenge-container input,
html.dark .twofa-challenge-container .form-control {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark .form-input-modern:focus,
html.dark .whmcs-custom-field-container input:focus,
html.dark .whmcs-custom-field-container select:focus,
html.dark .whmcs-custom-field-container textarea:focus,
html.dark .custom-input-wrap input:focus,
html.dark .custom-input-wrap select:focus,
html.dark .custom-input-wrap textarea:focus,
html.dark .custom-field-input input:focus,
html.dark .custom-field-input select:focus,
html.dark .custom-field-input textarea:focus {
    background-color: #111827 !important;
}

html.dark table.table tbody tr {
    background: #111827 !important;
}

html.dark table.table tbody td {
    color: #cbd5e1 !important;
}

html.dark table.table thead th {
    color: #94a3b8 !important;
}

html.dark .btn-default,
html.dark .btn-secondary,
html.dark #modalAjax .modal-content,
html.dark #modalAjax .modal-footer .btn-default {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark #modalAjax .modal-header {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark #modalAjax .modal-title,
html.dark #modalAjax .modal-body {
    color: #e2e8f0 !important;
}

html.dark #modalAjax .modal-header .close {
    color: #cbd5e1 !important;
}

html.dark #modalAjax .modal-body input[type="text"],
html.dark #modalAjax .modal-body input[type="password"],
html.dark #modalAjax .modal-body input[type="number"],
html.dark #modalAjax .modal-body .form-control {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark #modalAjax .modal-body .alert-danger,
html.dark #modalAjax .modal-body .alert-error {
    background: rgba(244, 63, 94, 0.14) !important;
    border-color: #9f1239 !important;
    color: #fda4af !important;
}

html.dark #modalAjax .modal-body .alert-success {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: #047857 !important;
    color: #6ee7b7 !important;
}

html.dark #modalAjax .modal-body .alert-warning {
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: #b45309 !important;
    color: #fcd34d !important;
}

html.dark footer {
    background-color: #111827 !important;
    border-color: #334155 !important;
}

@media (prefers-reduced-motion: no-preference) {
    html.dark body,
    html.dark .glass-header,
    html.dark .glass-dropdown {
        transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
    }
}

/* ==========================================================================
   WHMCS Order Form Domain Selection Steps (Legacy & Fallback Modernizer)
   ========================================================================== */

.domain-selection-options {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 0.875rem !important;
    margin: 1.5rem 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html:not(.dark) .domain-selection-options .option,
html:not(.dark) .domain-selection-options > div,
html:not(.dark) .domain-selection-options > label {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

.domain-selection-options .option,
.domain-selection-options > div,
.domain-selection-options > label {
    border-radius: 1rem !important;
    padding: 1rem 1.25rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 0 !important;
}

html:not(.dark) .domain-selection-options .option:hover,
html:not(.dark) .domain-selection-options > label:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
}

html:not(.dark) .domain-selection-options .option.active,
html:not(.dark) .domain-selection-options .option:has(input:checked),
html:not(.dark) .domain-selection-options > label:has(input:checked) {
    border-color: #7c3aed !important;
    background: rgba(124, 58, 237, 0.05) !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15) !important;
}

.domain-selection-options input[type="radio"] {
    accent-color: #7c3aed !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.domain-input-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    align-items: center !important;
    margin: 1.25rem 0 !important;
    flex-wrap: wrap !important;
}

html:not(.dark) .domain-input-group .input-group-addon {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

.domain-input-group .input-group-addon {
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

html:not(.dark) .domain-input-group input[type="text"],
html:not(.dark) .domain-input-group .form-control {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

.domain-input-group input[type="text"],
.domain-input-group .form-control {
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    flex: 1 1 200px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    height: auto !important;
}

html:not(.dark) .domain-input-group input[type="text"]:focus,
html:not(.dark) .domain-input-group .form-control:focus {
    background: #ffffff !important;
    border-color: #7c3aed !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

html:not(.dark) .domain-input-group select,
html:not(.dark) .domain-input-group select.form-control {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

.domain-input-group select,
.domain-input-group select.form-control {
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    flex: 0 0 auto !important;
    min-width: 110px !important;
    cursor: pointer !important;
    height: auto !important;
}

.domain-input-group .btn-primary,
.domain-input-group button[type="submit"] {
    background: #7c3aed !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.domain-input-group .btn-primary:hover,
.domain-input-group button[type="submit"]:hover {
    background: #6d28d9 !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Domain Lookup Results Modernization */
html:not(.dark) .domain-lookup-results,
html:not(.dark) #primaryLookupResult {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.domain-lookup-results,
#primaryLookupResult {
    border-radius: 1.25rem !important;
    padding: 1.25rem !important;
    margin-top: 1.25rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

.domain-available {
    border-radius: 1rem !important;
    padding: 1.25rem !important;
}

html:not(.dark) .domain-available {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #065f46 !important;
}

.domain-unavailable {
    border-radius: 1rem !important;
    padding: 1.25rem !important;
}

html:not(.dark) .domain-unavailable {
    background: rgba(244, 63, 94, 0.08) !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
    color: #9f1239 !important;
}

/* ==========================================================================
   STRICT DARK MODE OVERRIDES FOR DOMAIN STEPS
   ========================================================================== */

html.dark .domain-selection-options .option,
html.dark .domain-selection-options > div,
html.dark .domain-selection-options > label {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

html.dark .domain-selection-options .option:hover,
html.dark .domain-selection-options > label:hover {
    background: #253349 !important;
    border-color: #475569 !important;
}

html.dark .domain-selection-options .option.active,
html.dark .domain-selection-options .option:has(input:checked),
html.dark .domain-selection-options > label:has(input:checked) {
    border-color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.16) !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3) !important;
}

html.dark .domain-input-group .input-group-addon {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
}

html.dark .domain-input-group input[type="text"],
html.dark .domain-input-group .form-control {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
}

html.dark .domain-input-group input[type="text"]:focus,
html.dark .domain-input-group .form-control:focus {
    background: #1e293b !important;
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

html.dark .domain-input-group select,
html.dark .domain-input-group select.form-control {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
}

html.dark .domain-lookup-results,
html.dark #primaryLookupResult {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
}

html.dark .domain-available {
    background: rgba(16, 185, 129, 0.14) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}

html.dark .domain-unavailable {
    background: rgba(244, 63, 94, 0.14) !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
    color: #fda4af !important;
}

/* ==========================================================================
   WHMCS CORE & MODULE COMPATIBILITY SUITE (ANTI-BROKEN CSS)
   ========================================================================== */

/* 1. Alerts & System Notifications */
.alert {
    position: relative;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.alert h2, .alert h3, .alert h4 {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.alert ul {
    margin: 0.25rem 0 0 1.25rem;
    padding: 0;
    list-style-type: disc;
}

.alert li {
    margin-bottom: 0.25rem;
}

.alert-danger, .alert-error {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.alert-success {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

.alert-link {
    font-weight: 700;
    text-decoration: underline;
}

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

html.dark .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #86efac !important;
}

html.dark .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fde047 !important;
}

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

/* 2. Standard Form Controls & Input Groups */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label,
.control-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin-bottom: 0.5rem;
}

.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="search"].form-control,
select.form-control,
textarea.form-control {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: #0f172a;
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    border-radius: 0.75rem;
}

.input-group > .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-prepend,
.input-group-append,
.input-group-addon,
.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    text-align: center;
    white-space: nowrap;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-addon:first-child {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    border-right: 0;
}

.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-addon:last-child {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    border-left: 0;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

html.dark .form-group label,
html.dark .control-label {
    color: #94a3b8;
}

html.dark .form-control,
html.dark input.form-control,
html.dark select.form-control,
html.dark textarea.form-control {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

html.dark .form-control:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
}

html.dark .input-group-prepend,
html.dark .input-group-append,
html.dark .input-group-addon,
html.dark .input-group-text {
    background-color: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* 3. Cards, Panels & Wells */
.card,
.panel,
.panel-default {
    background-color: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.card-header,
.panel-heading {
    padding: 1rem 1.25rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title,
.panel-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: inherit;
    margin: 0;
}

.card-body,
.panel-body {
    padding: 1.25rem;
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.6;
}

.card-footer,
.panel-footer {
    padding: 0.875rem 1.25rem;
    background-color: #f8fafc;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
    color: #64748b;
}

.well {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    color: #334155;
}

html.dark .card,
html.dark .panel,
html.dark .panel-default {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

html.dark .card-header,
html.dark .panel-heading {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

html.dark .card-body,
html.dark .panel-body,
html.dark .well {
    background-color: #1e293b;
    color: #cbd5e1;
}

html.dark .card-footer,
html.dark .panel-footer {
    background-color: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

/* 4. Sidebars & List Groups */
.card-sidebar {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.card-sidebar .card-header {
    padding: 0.875rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
}

.list-group {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    margin: 0;
    gap: 0.25rem;
}

.list-group-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    background-color: transparent;
    border: none;
    border-radius: 0.75rem;
    transition: all 0.15s ease-in-out;
}

.list-group-item:hover,
.list-group-item-action:hover {
    background-color: #f5f3ff;
    color: #7c3aed;
}

.list-group-item.active,
.list-group-item-action.active {
    background-color: #f5f3ff;
    color: #7c3aed;
    font-weight: 700;
}

.sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
}

.sidebar-menu-item-icon {
    font-size: 0.9375rem;
    color: #7c3aed;
}

html.dark .card-sidebar {
    background: #1e293b;
    border-color: #334155;
}

html.dark .card-sidebar .card-header {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

html.dark .list-group-item {
    color: #cbd5e1;
}

html.dark .list-group-item:hover,
html.dark .list-group-item-action:hover,
html.dark .list-group-item.active {
    background-color: rgba(124, 58, 237, 0.15);
    color: #c4b5fd;
}

/* 5. Navigation Tabs & Pills */
.nav-tabs,
.nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
    list-style: none;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    border: none;
    border-radius: 0.75rem;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    color: #7c3aed;
    background-color: #f8fafc;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: #ffffff;
    background-color: #7c3aed;
    box-shadow: 0 2px 8px -1px rgba(124, 58, 237, 0.3);
}

html.dark .nav-tabs,
html.dark .nav-pills {
    border-color: #334155;
}

html.dark .nav-tabs .nav-link,
html.dark .nav-pills .nav-link {
    color: #94a3b8;
}

html.dark .nav-tabs .nav-link:hover,
html.dark .nav-pills .nav-link:hover {
    background-color: #1e293b;
    color: #c4b5fd;
}

/* 6. Badges & Semantic Pills */
.badge,
.label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    border: 1px solid transparent;
}

.badge-success, .label-success {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.badge-danger, .label-danger {
    background-color: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

.badge-warning, .label-warning {
    background-color: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.badge-info, .label-info {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.badge-secondary, .badge-default, .label-default {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

.badge-primary, .label-primary {
    background-color: #f5f3ff;
    border-color: #ddd6fe;
    color: #6d28d9;
}

html.dark .badge-success, html.dark .label-success {
    background-color: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

html.dark .badge-danger, html.dark .label-danger {
    background-color: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.3);
    color: #fda4af;
}

html.dark .badge-warning, html.dark .label-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fde047;
}

html.dark .badge-info, html.dark .label-info {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

html.dark .badge-secondary, html.dark .label-default {
    background-color: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* 7. Breadcrumbs & Pagination */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin-bottom: 1.5rem;
    list-style: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    background: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    padding-right: 0.5rem;
    color: #94a3b8;
    font-weight: 700;
}

.breadcrumb-item a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb-item a:hover {
    color: #7c3aed;
}

.breadcrumb-item.active {
    color: #0f172a;
    font-weight: 700;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    padding: 1rem 0;
    list-style: none;
}

.page-item .page-link,
.paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

.page-item .page-link:hover,
.paginate_button:hover {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ddd6fe;
}

.page-item.active .page-link,
.paginate_button.current {
    background: #7c3aed !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 2px 8px -1px rgba(124, 58, 237, 0.3);
}

html.dark .page-item .page-link,
html.dark .paginate_button {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

html.dark .page-item .page-link:hover,
html.dark .paginate_button:hover {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

/* 8. WHMCS Grid System Compatibility */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col, .col-auto,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    position: relative;
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1024px) {
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Minimal WHMCS Core Dropdown Compatibility (for external jQuery .open / .show calls) */
.dropdown.open > .dropdown-menu,
.dropdown.show > .dropdown-menu {
    display: block !important;
}

/* ==========================================================================
   Order Summary & Cart Configuration (#producttotal) Theme Harmony Styling
   ========================================================================== */
#producttotal,
.order-summary-content {
    font-family: inherit !important;
    font-size: 0.8125rem;
    color: #475569;
    max-height: none !important;
    overflow: visible !important;
}

.dark #producttotal,
.dark .order-summary-content {
    color: #94a3b8;
}

/* Hide unstyled raw product name/group spans returned by WHMCS since the card header already displays them */
#producttotal > span.product-name,
#producttotal > span.product-group {
    display: none !important;
}

/* Base Product row (first clearfix) */
#producttotal > .clearfix:first-of-type {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.25rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.dark #producttotal > .clearfix:first-of-type {
    border-bottom-color: #334155 !important;
}

#producttotal > .clearfix:first-of-type .pull-left,
#producttotal > .clearfix:first-of-type .float-left {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.8125rem !important;
}

.dark #producttotal > .clearfix:first-of-type .pull-left,
.dark #producttotal > .clearfix:first-of-type .float-left {
    color: #f8fafc !important;
}

#producttotal > .clearfix:first-of-type .pull-right,
#producttotal > .clearfix:first-of-type .float-right {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.8125rem !important;
}

.dark #producttotal > .clearfix:first-of-type .pull-right,
.dark #producttotal > .clearfix:first-of-type .float-right {
    color: #f8fafc !important;
}

/* Configuration rows */
#producttotal .clearfix,
#producttotal .row,
#producttotal div[class*="summary"],
#producttotal .product-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.35rem 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
    font-size: 0.75rem !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
}

.dark #producttotal .clearfix,
.dark #producttotal .row,
.dark #producttotal div[class*="summary"],
.dark #producttotal .product-info {
    border-bottom-color: rgba(51, 65, 85, 0.6) !important;
}

/* Left Label: Options, Config */
#producttotal .pull-left,
#producttotal .float-left {
    float: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    text-align: left !important;
    font-weight: 400 !important;
}

.dark #producttotal .pull-left,
.dark #producttotal .float-left {
    color: #94a3b8 !important;
}

/* Right Price: Clean, matching Inter font, right-aligned */
#producttotal .pull-right,
#producttotal .float-right,
#producttotal .float-end,
#producttotal .price {
    float: none !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    color: #475569 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    margin-left: 0.5rem !important;
}

.dark #producttotal .pull-right,
.dark #producttotal .float-right,
.dark #producttotal .float-end,
.dark #producttotal .price {
    color: #cbd5e1 !important;
}

/* Summary Totals Section (Setup fees, Billing cycle total) */
#producttotal .summary-totals {
    margin-top: 0.625rem !important;
    padding-top: 0.5rem !important;
    border-top: 1.5px solid #e2e8f0 !important;
}

.dark #producttotal .summary-totals {
    border-top-color: #334155 !important;
}

#producttotal .summary-totals .clearfix {
    padding: 0.3rem 0 !important;
    border-bottom: none !important;
}

#producttotal .summary-totals .pull-left,
#producttotal .summary-totals .float-left {
    font-weight: 600 !important;
    color: #334155 !important;
}

.dark #producttotal .summary-totals .pull-left,
.dark #producttotal .summary-totals .float-left {
    color: #e2e8f0 !important;
}

#producttotal .summary-totals .pull-right,
#producttotal .summary-totals .float-right {
    font-weight: 700 !important;
    color: #0f172a !important;
}

.dark #producttotal .summary-totals .pull-right,
.dark #producttotal .summary-totals .float-right {
    color: #f8fafc !important;
}

/* Recurring Totals if present */
#producttotal .recurring-totals {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.7rem !important;
    color: #64748b !important;
    margin-top: 0.25rem !important;
}

.dark #producttotal .recurring-totals {
    color: #94a3b8 !important;
}

/* Total Due Today - Sleek modern SaaS total summary card */
#producttotal .total-due-today {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 0.875rem !important;
    padding: 0.875rem 1rem !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

.dark #producttotal .total-due-today {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

#producttotal .total-due-today span:not(.amt) {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
}

.dark #producttotal .total-due-today span:not(.amt) {
    color: #94a3b8 !important;
}

#producttotal .total-due-today .amt {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #7c3aed !important;
    font-family: inherit !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.025em !important;
    margin-left: 0.5rem !important;
    white-space: nowrap !important;
}

.dark #producttotal .total-due-today .amt {
    color: #a78bfa !important;
}

#producttotal table {
    width: 100% !important;
    border-collapse: collapse !important;
}

#producttotal table td {
    padding: 0.25rem 0 !important;
}