/* =============================================
   UDI Client Area Dark Theme
   Covers: dashboard, services, invoices, tickets,
   domains, support, account, login, register
   ============================================= */

/* ===== CLIENT AREA DASHBOARD ===== */
.client-area-home .panel,
.client-area .panel,
.clientarea-home .panel {
    background: rgba(10, 16, 32, 0.8) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
}

/* Dashboard stat boxes / summary cards */
.panel-accent-blue,
.panel-accent-green,
.panel-accent-orange,
.panel-accent-red,
.panel-accent-purple,
.panel-surround {
    background: rgba(10, 16, 32, 0.8) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    overflow: hidden;
}

.panel-accent-blue { border-left: 3px solid var(--udi-accent, #00e5ff) !important; }
.panel-accent-green { border-left: 3px solid var(--udi-accent2, #00ff88) !important; }
.panel-accent-orange { border-left: 3px solid #fbbf24 !important; }
.panel-accent-red { border-left: 3px solid #ff3d8a !important; }

/* Large stat numbers */
.panel h3.text-right,
.panel .pull-right h3,
.panel-body h3 {
    color: var(--udi-accent, #00e5ff) !important;
    font-weight: 800 !important;
}

/* Icon circles in dashboard */
.panel .icon-area,
.panel .fa,
.panel .fas,
.panel .far,
.panel i.fa {
    color: var(--udi-accent, #00e5ff) !important;
    opacity: 0.7;
}

/* ===== LOGIN / REGISTER ===== */
.login-container,
.register-container,
#login,
.logincontainer {
    background: transparent !important;
}

.login-container .panel,
.register-container .panel,
#login .panel,
.logincontainer .panel {
    background: rgba(10, 16, 32, 0.85) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

/* ===== FORM ELEMENTS ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select,
.form-control {
    background: rgba(10, 16, 32, 0.8) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--udi-text, #e8edf5) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--udi-accent, #00e5ff) !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.1) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--udi-text-muted, #7a8ba8) !important;
    opacity: 0.6;
}

label,
.control-label {
    color: var(--udi-text, #e8edf5) !important;
    font-weight: 600 !important;
}

.input-group-addon {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--udi-text-muted, #7a8ba8) !important;
    border-radius: 10px 0 0 10px !important;
}

/* Checkbox / radio */
.checkbox label,
.radio label {
    color: var(--udi-text, #e8edf5) !important;
}

/* ===== TABS (services, invoices, etc) ===== */
.nav-tabs {
    border-bottom: 2px solid rgba(255,255,255,0.05) !important;
}

.nav-tabs > li > a {
    color: var(--udi-text-muted, #7a8ba8) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    margin-bottom: -2px;
    transition: all 0.2s;
    border-radius: 0 !important;
}

.nav-tabs > li > a:hover {
    color: var(--udi-accent, #00e5ff) !important;
    background: transparent !important;
    border-bottom-color: rgba(0, 229, 255, 0.3) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--udi-accent, #00e5ff) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--udi-accent, #00e5ff) !important;
}

.tab-content {
    background: transparent !important;
    color: var(--udi-text, #e8edf5) !important;
}

/* ===== INVOICE / SERVICE STATUS BADGES ===== */
.label-success,
.badge-success,
.status-active {
    background: rgba(0, 255, 136, 0.15) !important;
    color: var(--udi-accent2, #00ff88) !important;
    border: 1px solid rgba(0, 255, 136, 0.25) !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    padding: 3px 12px !important;
}

.label-danger,
.badge-danger,
.status-overdue {
    background: rgba(255, 61, 138, 0.15) !important;
    color: #ff3d8a !important;
    border: 1px solid rgba(255, 61, 138, 0.25) !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
}

.label-warning,
.badge-warning,
.status-pending {
    background: rgba(255, 187, 36, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(255, 187, 36, 0.25) !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
}

.label-info,
.badge-info {
    background: rgba(0, 229, 255, 0.15) !important;
    color: var(--udi-accent, #00e5ff) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
}

.label-default,
.badge-default {
    background: rgba(255,255,255,0.06) !important;
    color: var(--udi-text-muted, #7a8ba8) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 100px !important;
}

/* ===== TICKET SYSTEM ===== */
.ticket-reply,
.ticket-reply-staff,
.ticket-reply-client {
    background: rgba(10, 16, 32, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    padding: 20px !important;
}

.ticket-reply-staff {
    border-left: 3px solid var(--udi-accent, #00e5ff) !important;
}

.ticket-reply-client {
    border-left: 3px solid var(--udi-accent2, #00ff88) !important;
}

.ticket-details-header {
    color: var(--udi-text-muted, #7a8ba8) !important;
}

/* ===== INVOICE ===== */
.invoice-container,
#invoice {
    background: rgba(10, 16, 32, 0.6) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    padding: 24px !important;
}

/* ===== CART / CHECKOUT ===== */
.order-summary,
.cart-body,
.shopping-cart,
.order-form {
    background: rgba(10, 16, 32, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    color: var(--udi-text, #e8edf5) !important;
}

.order-summary .total-due,
.order-summary .total {
    color: var(--udi-accent, #00e5ff) !important;
    font-weight: 800 !important;
}

/* Cart items */
.view-cart-items-header {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.item-row,
.view-cart-items .item {
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}

/* ===== PAGINATION ===== */
.pagination > li > a,
.pagination > li > span {
    background: rgba(10, 16, 32, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--udi-text-muted, #7a8ba8) !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
    transition: all 0.2s;
}

.pagination > li > a:hover {
    background: rgba(0, 229, 255, 0.08) !important;
    border-color: rgba(0, 229, 255, 0.2) !important;
    color: var(--udi-accent, #00e5ff) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--udi-accent, #00e5ff) !important;
    border-color: var(--udi-accent, #00e5ff) !important;
    color: #000 !important;
}

/* ===== DOMAIN SEARCH ===== */
.domain-checker-container,
.domain-search-container {
    background: transparent !important;
}

.domain-checker-container input,
.domain-search-container input {
    background: rgba(10, 16, 32, 0.8) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--udi-text, #e8edf5) !important;
    border-radius: 12px 0 0 12px !important;
}

.domain-checker-result,
.domain-lookup-result {
    background: rgba(10, 16, 32, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 12px !important;
    color: var(--udi-text, #e8edf5) !important;
}

.domain-available {
    color: var(--udi-accent2, #00ff88) !important;
}

.domain-unavailable {
    color: #ff3d8a !important;
}

/* ===== ANNOUNCEMENTS ===== */
.announcement-single,
.article {
    background: rgba(10, 16, 32, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    transition: all 0.3s;
}

.announcement-single:hover,
.article:hover {
    border-color: rgba(0, 229, 255, 0.1) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;
}

.announcement-single h3 a,
.article h3 a {
    color: #fff !important;
}

.announcement-single .post-date,
.article .date {
    color: var(--udi-text-muted, #7a8ba8) !important;
}

/* ===== KNOWLEDGEBASE ===== */
.kb-category,
.knowledgebase-category {
    background: rgba(10, 16, 32, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    transition: all 0.3s;
}

.kb-category:hover {
    border-color: rgba(0, 229, 255, 0.1) !important;
    transform: translateY(-3px);
}

/* ===== DROPDOWN MENUS ===== */
.dropdown-menu {
    background: rgba(10, 16, 32, 0.95) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(20px);
    padding: 8px !important;
}

.dropdown-menu > li > a {
    color: var(--udi-text, #e8edf5) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.15s;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: rgba(0, 229, 255, 0.08) !important;
    color: var(--udi-accent, #00e5ff) !important;
}

.dropdown-menu .divider {
    background: rgba(255,255,255,0.05) !important;
    margin: 4px 0 !important;
}

/* ===== PROGRESS BARS ===== */
.progress {
    background: rgba(255,255,255,0.06) !important;
    border-radius: 100px !important;
    height: 8px !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--udi-accent, #00e5ff), var(--udi-accent2, #00ff88)) !important;
    border-radius: 100px !important;
}

/* ===== TOOLTIP / POPOVER ===== */
.tooltip-inner {
    background: rgba(10, 16, 32, 0.95) !important;
    color: var(--udi-text, #e8edf5) !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
}

.popover {
    background: rgba(10, 16, 32, 0.95) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

.popover-title {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: #fff !important;
}

.popover-content {
    color: var(--udi-text, #e8edf5) !important;
}

/* ===== HELP TEXT / MUTED ===== */
.help-block,
.text-muted,
small.text-muted,
p.text-muted {
    color: var(--udi-text-muted, #7a8ba8) !important;
}

.text-primary { color: var(--udi-accent, #00e5ff) !important; }
.text-success { color: var(--udi-accent2, #00ff88) !important; }
.text-danger { color: #ff3d8a !important; }
.text-warning { color: #fbbf24 !important; }
.text-info { color: var(--udi-accent, #00e5ff) !important; }

/* ===== HR / DIVIDERS ===== */
hr {
    border-color: rgba(255,255,255,0.05) !important;
}

/* ===== GENERAL OVERRIDES ===== */
p, span, div, td, th, li {
    color: inherit;
}

.bg-primary { background: rgba(0, 229, 255, 0.08) !important; }
.bg-success { background: rgba(0, 255, 136, 0.08) !important; }
.bg-info { background: rgba(0, 229, 255, 0.08) !important; }
.bg-warning { background: rgba(255, 187, 36, 0.08) !important; }
.bg-danger { background: rgba(255, 61, 138, 0.08) !important; }

/* ===== NETWORK STATUS ===== */
.server-status .panel {
    border-radius: 12px !important;
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 768px) {
    .panel {
        border-radius: 12px !important;
    }

    .nav-tabs > li > a {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }
}

/* =============================================
   SERVICE DETAIL PAGE POLISH
   ============================================= */

/* Service header card */
.product-details-header,
.service-header,
.module-header {
    background: rgba(10,16,32,0.7) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
    padding: 24px !important;
}

/* Product icon circle */
.product-icon,
.service-icon,
.product-details-header img,
.product-details-header .product-icon {
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(0,255,136,0.08)) !important;
    border: 1px solid rgba(0,229,255,0.2) !important;
    box-shadow: 0 0 20px rgba(0,229,255,0.1) !important;
}

/* ACTIVE badge on service page */
.label-success,
.badge-success,
.status-active,
span.label-success {
    background: rgba(0,255,136,0.12) !important;
    color: var(--udi-accent2, #00ff88) !important;
    border: 1px solid rgba(0,255,136,0.25) !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    padding: 4px 14px !important;
    text-shadow: none !important;
}

/* Service detail tabs */
.nav-tabs {
    border-bottom: 2px solid rgba(255,255,255,0.06) !important;
    margin-bottom: 0 !important;
}

.nav-tabs > li > a {
    color: var(--udi-text-muted, #7a8ba8) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    padding: 12px 20px !important;
    margin-bottom: -2px !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    border-radius: 0 !important;
    transition: all 0.2s !important;
}

.nav-tabs > li > a:hover {
    color: var(--udi-accent, #00e5ff) !important;
    background: transparent !important;
    border-color: transparent !important;
    border-bottom: 2px solid rgba(0,229,255,0.3) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--udi-accent, #00e5ff) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--udi-accent, #00e5ff) !important;
}

/* Tab content area */
.tab-content {
    background: rgba(10,16,32,0.5) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    padding: 24px !important;
}

/* License key field */
.license-key,
.input-group .form-control[readonly],
input[readonly],
.module-output input[readonly] {
    background: rgba(255,61,138,0.06) !important;
    border: 1px solid rgba(255,61,138,0.15) !important;
    border-radius: 8px !important;
    color: #ff6b9d !important;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.02em !important;
    padding: 10px 14px !important;
    -webkit-text-security: disc;
}

/* Reveal / Copy buttons */
.btn-reveal,
.btn-copy,
.btn-default,
.btn-sm,
a.btn-sm,
.input-group-btn .btn {
    background: rgba(255,255,255,0.05) !important;
    color: var(--udi-text, #e8edf5) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    padding: 8px 16px !important;
    transition: all 0.2s !important;
}

.btn-reveal:hover,
.btn-copy:hover,
.btn-sm:hover,
.input-group-btn .btn:hover {
    background: rgba(0,229,255,0.08) !important;
    border-color: rgba(0,229,255,0.2) !important;
    color: var(--udi-accent, #00e5ff) !important;
}

/* Section labels like "LICENSE KEY", "MACHINES IN USE", "STATUS" */
.module-output label,
.service-detail label,
.text-uppercase,
small.text-uppercase,
.field-label {
    color: var(--udi-text-muted, #7a8ba8) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

/* Big stat numbers (like "3 / 50") */
.module-output h3,
.stat-value,
.module-output .h3 {
    color: #fff !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    margin: 4px 0 !important;
}

.module-output h3 small,
.stat-value small,
.module-output .h3 small {
    color: var(--udi-text-muted, #7a8ba8) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

/* Progress bar (machines in use) */
.progress {
    background: rgba(255,255,255,0.06) !important;
    border-radius: 100px !important;
    height: 6px !important;
    overflow: hidden !important;
    margin: 8px 0 4px !important;
    box-shadow: none !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--udi-accent, #00e5ff), var(--udi-accent2, #00ff88)) !important;
    border-radius: 100px !important;
    box-shadow: 0 0 10px rgba(0,229,255,0.3) !important;
}

/* "47 slots available" subtext */
.module-output p,
.module-output .text-muted,
.slots-text {
    color: var(--udi-text-muted, #7a8ba8) !important;
    font-size: 0.82rem !important;
}

/* Section dividers inside service page */
.module-output hr,
.service-detail hr {
    border-color: rgba(255,255,255,0.05) !important;
    margin: 20px 0 !important;
}

/* Download buttons */
.btn-download,
a.btn-download,
.downloads .btn {
    background: linear-gradient(135deg, var(--udi-accent2, #00ff88), #00cc66) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    box-shadow: 0 0 16px rgba(0,255,136,0.2) !important;
}

.btn-download:hover {
    box-shadow: 0 0 28px rgba(0,255,136,0.35) !important;
    transform: translateY(-1px);
}

/* ===== FOOTER BRANDING ===== */
footer .text-center,
footer p,
.footer-copyright {
    color: var(--udi-text-muted, #7a8ba8) !important;
    font-size: 0.8rem !important;
}

footer a {
    color: var(--udi-accent, #00e5ff) !important;
}

/* ===== SERVICE LIST TABLE ===== */
.table-list .label,
.services-table .label {
    border-radius: 100px !important;
    font-size: 0.72rem !important;
    padding: 3px 10px !important;
    font-weight: 600 !important;
}

/* ===== INVOICE DETAIL ===== */
.invoice-header {
    background: rgba(10,16,32,0.6) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.invoice-header .invoice-title {
    color: #fff !important;
    font-weight: 800 !important;
}

.invoice-header .invoice-amount {
    color: var(--udi-accent, #00e5ff) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
}

/* Pay now button */
.btn-pay,
.btn-invoice-pay,
#btnPayNow {
    background: linear-gradient(135deg, var(--udi-accent2, #00ff88), #00cc66) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 16px rgba(0,255,136,0.2) !important;
}

/* =============================================
   DASHBOARD FIX — WHITE PANELS
   ============================================= */

/* Force dark on ALL panels, cards, and containers */
div.panel,
div.panel-default,
div.panel-primary,
div.panel-info,
div.panel-success,
div.panel-warning,
div.panel-danger,
.card,
.panel-surround,
.client-home-panels .panel,
.clientarea .panel,
#main-body .panel {
    background: rgba(10,16,32,0.75) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: var(--udi-text, #e8edf5) !important;
    box-shadow: none !important;
}

/* Dashboard stat boxes (1 SERVICES, 0 QUOTES, etc) */
.panel-accent-blue,
.panel-accent-green,
.panel-accent-orange,
.panel-accent-red,
.panel-accent-purple,
.client-home-panels .row .col-sm-3 .panel,
.client-home-panels .row .col-md-3 .panel,
.overview-stats .panel,
#main-body .row > div[class*="col-"] > .panel {
    background: rgba(10,16,32,0.75) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* The colored top/left accent borders */
.panel-accent-blue,
.panel[style*="border-top-color: #3498db"],
.panel[style*="border-top-color: #1abc9c"] {
    border-top: 3px solid var(--udi-accent, #00e5ff) !important;
}

.panel[style*="border-top-color: #e67e22"] {
    border-top: 3px solid #fbbf24 !important;
}

/* Fix all panel headings */
div.panel-heading,
.panel > .panel-heading {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: #fff !important;
}

/* Fix all panel bodies */
div.panel-body,
.panel > .panel-body {
    background: transparent !important;
    color: var(--udi-text, #e8edf5) !important;
}

/* Fix panel footers */
div.panel-footer,
.panel > .panel-footer {
    background: rgba(255,255,255,0.02) !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* Dashboard stat numbers */
.panel-body h3,
.panel-body .h3 {
    color: var(--udi-accent, #00e5ff) !important;
    font-weight: 800 !important;
}

/* Dashboard stat icons */
.panel-body .fa,
.panel-body .fas,
.panel-body .far,
.panel-body i[class*="fa-"] {
    color: rgba(0,229,255,0.4) !important;
}

/* Dashboard stat labels (SERVICES, QUOTES, etc) */
.panel-body .text-muted,
.panel-body small,
.panel-body p {
    color: var(--udi-text-muted, #7a8ba8) !important;
}

/* Service listing rows */
.table > tbody > tr,
.table > tbody > tr > td {
    background: transparent !important;
    color: var(--udi-text, #e8edf5) !important;
    border-color: rgba(255,255,255,0.05) !important;
}

/* "View Details" and "View More" links */
.panel a,
.panel-footer a,
a.view-more {
    color: var(--udi-accent, #00e5ff) !important;
    text-decoration: none !important;
}

.panel a:hover,
a.view-more:hover {
    color: var(--udi-accent2, #00ff88) !important;
}

/* Your Info sidebar panel */
.client-home-panels .panel .panel-body p,
.panel-body .client-name,
.panel-body .client-email {
    color: var(--udi-text, #e8edf5) !important;
}

/* Sidebar shortcuts */
.list-group-item .fa,
.list-group-item .fas,
.list-group-item i {
    color: var(--udi-accent, #00e5ff) !important;
    margin-right: 6px;
}

/* Orange/colored border service panels */
.panel[style*="border"],
div[style*="border-color"],
div[style*="border-left"],
div[style*="border-top"] {
    border-color: rgba(0,229,255,0.2) !important;
}

/* Notification bar */
.notifications-bar,
.alert-bar,
#notifications {
    background: rgba(10,16,32,0.9) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: var(--udi-text, #e8edf5) !important;
}

/* "Logged in as" and Hello username */
.navbar-right .navbar-text,
.navbar .navbar-text {
    color: var(--udi-text-muted, #7a8ba8) !important;
}

/* Language selector */
.language-selector,
.footer .language-selector {
    background: rgba(10,16,32,0.8) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    color: var(--udi-text, #e8edf5) !important;
}

/* Nuclear option: catch any remaining white backgrounds */
#main-body *,
.main-content *,
.content-padded * {
    border-color: rgba(255,255,255,0.06);
}

/* Override inline styles that WHMCS sets */
[style*="background-color: #fff"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background: white"],
[style*="background-color:#fff"],
[style*="background:#fff"] {
    background: rgba(10,16,32,0.75) !important;
}

[style*="color: #333"],
[style*="color: #000"],
[style*="color:#333"],
[style*="color:#000"] {
    color: var(--udi-text, #e8edf5) !important;
}

[style*="border-color: #"] {
    border-color: rgba(0,229,255,0.2) !important;
}

/* =============================================
   ORDER / CONFIGURE PAGE
   ============================================= */

/* Product config box */
#order-standard_cart .product-config,
#order-standard_cart .product-info,
#order-standard_cart .sub-heading,
.order-form .product-config,
.product-configuration {
    background: rgba(10,16,32,0.75) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    color: var(--udi-text, #e8edf5) !important;
    padding: 20px !important;
}

/* Product name in config */
#order-standard_cart .product-config h3,
#order-standard_cart .product-info h3,
.product-configuration h3 {
    color: #fff !important;
    font-weight: 700 !important;
}

/* Product description in config */
#order-standard_cart .product-config p,
#order-standard_cart .product-info p,
.product-configuration p {
    color: var(--udi-text-muted, #7a8ba8) !important;
}

/* Billing cycle selector */
.billing-cycle,
.order-summary-card,
#order-standard_cart .order-summary,
.order-summary {
    background: rgba(10,16,32,0.75) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    color: var(--udi-text, #e8edf5) !important;
}

/* Billing cycle buttons */
.billing-cycle .btn,
.billing-cycle .btn-default,
.billing-cycle .btn-cycle {
    background: rgba(255,255,255,0.05) !important;
    color: var(--udi-text, #e8edf5) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}

.billing-cycle .btn.active,
.billing-cycle .btn-cycle.active,
.billing-cycle .btn.btn-primary {
    background: linear-gradient(135deg, var(--udi-accent, #00e5ff), #00b8d4) !important;
    color: #000 !important;
    border-color: var(--udi-accent, #00e5ff) !important;
}

/* Configurable options section */
.configurable-options,
#order-standard_cart .configurable-options,
.sub-heading {
    background: transparent !important;
    color: var(--udi-text, #e8edf5) !important;
}

.configurable-options label,
.configurable-options .control-label {
    color: var(--udi-text, #e8edf5) !important;
}

/* Number input for extra machine slots */
.configurable-options input[type="number"],
.configurable-options .form-control {
    background: rgba(10,16,32,0.8) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--udi-text, #e8edf5) !important;
    border-radius: 8px !important;
    width: auto !important;
}

/* Order summary card */
.order-summary .card,
.order-summary .panel,
#order-standard_cart .order-summary .card {
    background: rgba(10,16,32,0.75) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    color: var(--udi-text, #e8edf5) !important;
    overflow: hidden !important;
}

.order-summary .card-header,
.order-summary .panel-heading,
#order-standard_cart .order-summary .card-header {
    background: rgba(0,229,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.order-summary .card-body,
.order-summary .panel-body {
    background: transparent !important;
    color: var(--udi-text, #e8edf5) !important;
}

/* Summary line items */
.order-summary .line-item,
.order-summary tr,
.order-summary .item-row {
    color: var(--udi-text-muted, #7a8ba8) !important;
    border-color: rgba(255,255,255,0.04) !important;
}

.order-summary .total,
.order-summary .total-due,
.order-summary .grand-total {
    color: var(--udi-accent, #00e5ff) !important;
    font-weight: 800 !important;
    font-size: 1.3rem !important;
}

.order-summary .total small,
.order-summary .total-label {
    color: var(--udi-text-muted, #7a8ba8) !important;
}

/* Continue / checkout button */
.order-summary .btn-primary,
#order-standard_cart .btn-checkout,
#btnCompleteOrder,
a.btn-checkout {
    background: linear-gradient(135deg, var(--udi-accent, #00e5ff), #00b8d4) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 12px 28px !important;
    box-shadow: 0 0 16px rgba(0,229,255,0.2) !important;
}

/* "Have questions" bar */
.sales-contact-bar,
#order-standard_cart .sales-contact,
.promo-line {
    background: rgba(0,229,255,0.05) !important;
    border: 1px solid rgba(0,229,255,0.1) !important;
    border-radius: 10px !important;
    color: var(--udi-text-muted, #7a8ba8) !important;
}

.sales-contact-bar a,
.promo-line a {
    color: var(--udi-accent, #00e5ff) !important;
}

/* Divider lines */
#order-standard_cart hr {
    border-color: rgba(255,255,255,0.06) !important;
}

/* Promo code input */
.promo-code input,
#order-standard_cart .promo-input {
    background: rgba(10,16,32,0.8) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--udi-text, #e8edf5) !important;
    border-radius: 8px !important;
}

/* Cart view page */
.view-cart-items,
.cart-body .card,
.cart-body .panel {
    background: rgba(10,16,32,0.75) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    color: var(--udi-text, #e8edf5) !important;
}

/* Remove button in cart */
.btn-remove,
.btn-danger.btn-sm {
    background: rgba(255,61,138,0.1) !important;
    color: #ff3d8a !important;
    border: 1px solid rgba(255,61,138,0.2) !important;
    border-radius: 8px !important;
}

/* Checkout page fields */
.checkout-form .form-group label,
#frmCheckout label {
    color: var(--udi-text, #e8edf5) !important;
}

/* Payment method selector */
.payment-method,
.gateway-selector .card,
.gateway-selector .panel {
    background: rgba(10,16,32,0.75) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    color: var(--udi-text, #e8edf5) !important;
    cursor: pointer;
}

.payment-method.active,
.payment-method:hover,
.gateway-selector .card.active {
    border-color: var(--udi-accent, #00e5ff) !important;
    background: rgba(0,229,255,0.04) !important;
}

/* Nuclear: catch ALL white backgrounds in order forms */
#order-standard_cart .card,
#order-standard_cart .panel,
#order-standard_cart .well,
#order-standard_cart [style*="background"] {
    background: rgba(10,16,32,0.75) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: var(--udi-text, #e8edf5) !important;
}

#order-standard_cart .card-header,
#order-standard_cart .panel-heading {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: #fff !important;
}

#order-standard_cart .card-body,
#order-standard_cart .panel-body {
    background: transparent !important;
}

/* =============================================
   ORDER FORM WHITE BOX NUCLEAR FIX
   ============================================= */

/* Target ALL cards and white elements in order forms */
#order-standard_cart .card,
#order-standard_cart .panel,
#order-standard_cart .well,
#order-standard_cart .product-config,
#order-standard_cart .order-summary,
#order-standard_cart .sub-heading,
#order-standard_cart .view-cart-items,
#order-standard_cart .promo-code,
#order-standard_cart .checkout,
.cart-body .card,
.cart-body .panel,
.order-form .card,
.order-form .panel {
    background: rgba(10,16,32,0.75) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    color: var(--udi-text, #e8edf5) !important;
}

#order-standard_cart .card-header,
#order-standard_cart .panel-heading,
.cart-body .card-header {
    background: rgba(0,229,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: #fff !important;
}

#order-standard_cart .card-body,
#order-standard_cart .panel-body,
.cart-body .card-body {
    background: transparent !important;
    color: var(--udi-text, #e8edf5) !important;
}

#order-standard_cart .card-footer,
#order-standard_cart .panel-footer,
.cart-body .card-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* Cart item rows */
#order-standard_cart .view-cart-items .item,
#order-standard_cart .item-row,
.view-cart-items-header {
    background: rgba(10,16,32,0.5) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    color: var(--udi-text, #e8edf5) !important;
}

/* Promo code section */
#order-standard_cart .promo-code .card,
.promo-code .panel,
.tab-content .tab-pane {
    background: rgba(10,16,32,0.75) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: var(--udi-text, #e8edf5) !important;
}

/* Validate Code button */
.promo-code .btn,
#btnApplyPromo {
    background: rgba(255,255,255,0.05) !important;
    color: var(--udi-text, #e8edf5) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}

/* Empty Cart button */
#order-standard_cart .btn-danger,
.btn-empty-cart {
    background: rgba(255,61,138,0.1) !important;
    color: #ff3d8a !important;
    border: 1px solid rgba(255,61,138,0.2) !important;
    border-radius: 8px !important;
}

/* Continue Shopping link */
#order-standard_cart a.btn-link,
.continue-shopping {
    color: var(--udi-accent, #00e5ff) !important;
}

/* Configurable Options header line */
#order-standard_cart .sub-heading,
.configurable-options-heading {
    border-color: rgba(255,255,255,0.06) !important;
    color: var(--udi-text, #e8edf5) !important;
}