:root {
    
    --color-primary:      33, 150, 243;   
    --color-primary-dark: 21, 101, 192;   
    --color-secondary:    13,  21,  71;   
    --color-common:       #0d1547;
    --color-two:          #00050e;

    
    --primary:            #2196f3;
    --primary-dark:       #1976d2;
    --primary-darker:     #1565c0;
    --primary-light:      #e3f2fd;
    --border-primary-light: #bbdefb;
}

.btn-success,
.btn-success:disabled,
.btn-success.disabled {
    background-color: #2196f3 !important;
    border-color: #1976d2 !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    background-color: #1976d2 !important;
    border-color: #1565c0 !important;
}
.btn-success .badge { color: #2196f3 !important; }

.btn.btn-action {
    background-color: #2196f3 !important;
    border-color: #1976d2 !important;
}
.btn.btn-action:hover {
    background-color: #1976d2 !important;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: #2196f3 !important;
    border-color: #1976d2 !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #1976d2 !important;
    border-color: #1565c0 !important;
}

#order-standard_cart .card-header,
#order-standard_cart .panel-heading,
.sidebar .card-header,
.sidebar .panel-heading {
    background: linear-gradient(135deg, #0d1547 0%, #1565c0 100%) !important;
    border: none !important;
    padding: 11px 16px !important;
    color: #fff !important;
}

#order-standard_cart .card-header h3,
#order-standard_cart .card-header .card-title,
#order-standard_cart .panel-heading h3,
#order-standard_cart .panel-heading .panel-title,
.sidebar .card-header h3,
.sidebar .card-header .card-title,
.sidebar .panel-heading h3,
.sidebar .panel-heading .panel-title {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#order-standard_cart .card-header .card-minimise,
#order-standard_cart .panel-heading .card-minimise,
.sidebar .card-header .card-minimise,
.sidebar .panel-heading .card-minimise {
    color: rgba(255,255,255,0.7) !important;
    font-size: 11px !important;
}

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover {
    background-color: #2196f3 !important;
    border-left-color: #1565c0 !important;
    color: #fff !important;
}

#order-standard_cart .list-group-item,
#order-standard_cart .list-group-item:link,
#order-standard_cart .list-group-item:visited,
#order-standard_cart .list-group-item a,
#order-standard_cart .list-group-item a:link,
#order-standard_cart .list-group-item a:visited,
#order-standard_cart .cart-sidebar a,
#order-standard_cart .cart-sidebar a:link,
#order-standard_cart .cart-sidebar a:visited {
    color: #2d3748 !important;
    background-color: #ffffff !important;
    text-decoration: none !important;
}
#order-standard_cart .list-group-item:hover,
#order-standard_cart .list-group-item:focus,
#order-standard_cart .list-group-item a:hover,
#order-standard_cart .list-group-item a:focus,
#order-standard_cart .cart-sidebar a:hover {
    color: #1565c0 !important;
    background-color: #eef3fb !important;
    text-decoration: none !important;
}

#order-standard_cart .list-group-item.active,
#order-standard_cart .list-group-item.active:link,
#order-standard_cart .list-group-item.active:visited,
#order-standard_cart .list-group-item.active:hover,
#order-standard_cart .list-group-item.active:focus {
    background: linear-gradient(90deg, #e8f0fe 0%, #f4f7ff 100%) !important;
    border-left: 3px solid #1565c0 !important;
    color: #1565c0 !important;
    font-weight: 700 !important;
}

#order-standard_cart .cart-sidebar .list-group-item {
    border-left: 3px solid transparent !important;
    border-bottom: 1px solid #f1f5fb !important;
    transition: background 0.14s, color 0.14s !important;
}

#tableServicesList .status.status-active,
#tableServicesList .status.status-open,
.label.status-active,
span.status-active {
    background: #2196f3 !important;
    color: #ffffff !important;
    border-color: #1565c0 !important;
}

#tableServicesList .status.status-completed,
.label.status-completed,
span.status-completed {
    background: #43a047 !important;
    color: #ffffff !important;
}

#tableServicesList .status.status-suspended,
.label.status-suspended,
span.status-suspended {
    background: #f57c00 !important;
    color: #ffffff !important;
}

#tableServicesList .status.status-terminated,
#tableServicesList .status.status-cancelled,
.label.status-terminated,
.label.status-cancelled {
    background: #e53935 !important;
    color: #ffffff !important;
}

#tableServicesList .status.status-pending,
.label.status-pending {
    background: #ffc107 !important;
    color: #333 !important;
}

.product-status-active {
    background-color: #2196f3 !important;
}

.label-success,
.progress-bar-success,
.tld-filters a.badge-success,
.requestor-type-owner,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
    background-color: #2196f3 !important;
}

.popover-user-notifications ul li i.far.fa-check-circle,
.popover-user-notifications ul li i.fas.fa-check-circle {
    color: #2196f3 !important;
}

section#home-banner .btn.search {
    background-color: #2196f3 !important;
}

.text-primary { color: #2196f3 !important; }

.panel.panel-accent-green,
.panel.panel-accent-emerald {
    border-top-color: #2196f3 !important;
}
.bg-color-green,
.bg-color-emerald { background-color: #2196f3 !important; }

.verification-banner.success {
    background-color: #e3f2fd !important;
    border-bottom-color: #bbdefb !important;
    color: #1565c0 !important;
}

.navbar .megamenu .mega-menu-item a i,
.navbar .menu-item a i {
    background: #e3f2fd !important;   
    color: #1565c0 !important;
}

.navbar .megamenu .mega-menu-item a:hover,
.navbar .menu-item a:hover {
    border: 1px solid #bbdefb !important;   
}

.vps-plan-details .disk-type {
    background: #1976d2 !important;   
}

* {
    scrollbar-color: #2196f3 transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #2196f3 !important;
}

@media (min-width: 1200px) {

    
    .top-bar {
        background: #080e2e !important;
        border-bottom: 1px solid rgba(33, 150, 243, 0.15) !important;
        padding: 7px 0 !important;
    }

    .top-bar .country-select {
        color: rgba(255, 255, 255, 0.60) !important;
        font-size: 12.5px !important;
        letter-spacing: 0.02em;
        transition: color 0.2s ease;
    }

    .top-bar .country-select:hover {
        color: #2196f3 !important;
    }

    .top-bar .country-select i {
        color: rgba(33, 150, 243, 0.7);
    }

    .top-bar .country-select::after {
        color: rgba(255, 255, 255, 0.35) !important;
    }

    .top-bar-dropdown button {
        color: rgba(255, 255, 255, 0.60) !important;
        font-size: 12.5px !important;
        letter-spacing: 0.02em;
        background: transparent !important;
        border: none;
        transition: color 0.2s ease;
    }

    .top-bar-dropdown button::after {
        color: rgba(255, 255, 255, 0.35) !important;
    }

    .top-bar-dropdown button:hover,
    .top-bar-dropdown button.show {
        color: #2196f3 !important;
    }

    .top-bar-dropdown .dropdown-menu {
        border-radius: 10px !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
        padding: 6px !important;
        margin-top: 8px !important;
    }

    .top-bar-dropdown .dropdown-menu li a {
        border-radius: 6px;
        font-size: 13px;
        padding: 7px 12px !important;
        transition: background 0.15s ease;
    }

    .top-bar-dropdown .dropdown-menu li a:hover {
        color: #2196f3 !important;
        background: #f0f7ff !important;
    }

    
    .main-header {
        background: #ffffff !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(13, 21, 71, 0.08) !important;
        box-shadow: 0 2px 20px rgba(13, 21, 71, 0.07) !important;
    }

    .main-header .logo img {
        max-height: 54px !important;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .main-header .logo:hover img {
        opacity: 0.85;
        transform: scale(1.02);
    }

    
    .header-support ul.support-item-web .call-no {
        font-size: 13px !important;
        color: #64748b !important;
        letter-spacing: 0.01em;
        display: flex !important;
        align-items: center;
        gap: 5px;
    }

    .header-support ul.support-item-web .call-no strong {
        color: #0d1547 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em;
    }

    
    .main-header .header-support .cart-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: #f0f7ff;
        border: 1.5px solid #bfdbfe;
        border-radius: 10px;
        transition: all 0.22s ease;
    }

    .main-header .header-support .cart-icon:hover {
        background: #dbeafe;
        border-color: #2196f3;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(33, 150, 243, 0.20);
    }

    .main-header .header-support .cart-icon img {
        height: 20px !important;
        width: 20px !important;
    }

    .main-header .header-support .cart-icon .count {
        top: -6px !important;
        inset-inline-end: -6px !important;
        min-width: 18px;
        height: 18px;
        font-size: 10px !important;
        font-weight: 700 !important;
        background: #22c55e !important;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(34, 197, 94, 0.35);
    }

    
    
    header.header,
    .main-header.header {
        background: linear-gradient(135deg, #080e2e 0%, #0d1547 50%, #0a1a5c 100%) !important;
        padding: 0 !important;
        border-bottom: 2px solid rgba(33, 150, 243, 0.25);
        box-shadow: 0 4px 28px rgba(8, 14, 46, 0.45);
        position: sticky !important;
        top: 0;
        z-index: 999;
    }

    
    .navbar a,
    .navbar a:focus {
        padding: 17px 15px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.80) !important;
        letter-spacing: 0.018em;
        position: relative;
        transition: color 0.2s ease, background 0.2s ease !important;
    }

    
    .navbar > ul > li > a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: #2196f3;
        transition: width 0.25s ease;
        border-radius: 2px 2px 0 0;
    }

    .navbar > ul > li:hover > a::after {
        width: 55%;
    }

    .navbar > ul > li:hover > a {
        background: rgba(33, 150, 243, 0.08) !important;
        color: #ffffff !important;
    }

    .navbar .active > a,
    .navbar .active > a:focus {
        color: #ffffff !important;
    }

    
    .navbar a i.bi-chevron-down,
    .navbar a:focus i.bi-chevron-down {
        opacity: 0.5;
        transition: transform 0.22s ease, opacity 0.22s ease;
        margin-inline-start: 4px !important;
    }

    .navbar li:hover > a i.bi-chevron-down {
        transform: rotate(180deg);
        opacity: 1;
        color: #2196f3;
    }

    
    .navbar .menu-account-btn,
    .navbar .menu-account-btn:focus {
        background: linear-gradient(135deg, #2196f3, #1565c0) !important;
        padding: 10px 22px !important;
        border-radius: 8px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.025em;
        color: #ffffff !important;
        transition: all 0.22s ease !important;
        box-shadow: 0 3px 14px rgba(33, 150, 243, 0.40);
        border: none;
    }

    .navbar .menu-account-btn::after {
        display: none !important;
    }

    .navbar .menu-account-btn:hover,
    .navbar .menu-account-btn:focus:hover {
        background: linear-gradient(135deg, #42a5f5, #1976d2) !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(33, 150, 243, 0.50) !important;
    }

    
    .navbar .dropdown ul {
        top: calc(100% + 6px) !important;
        border-radius: 14px !important;
        box-shadow: 0 20px 60px rgba(8, 14, 46, 0.18), 0 0 0 1px rgba(13, 21, 71, 0.08) !important;
        padding: 8px !important;
        border: 1px solid rgba(33, 150, 243, 0.10) !important;
        background: #ffffff !important;
        animation: headerDropdownIn 0.2s ease forwards;
    }

    .navbar .dropdown:hover > ul {
        top: 100% !important;
    }

    @keyframes headerDropdownIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    
    .navbar .menu-item a {
        border-radius: 9px !important;
        padding: 9px 12px !important;
        transition: background 0.15s ease, border-color 0.15s ease !important;
        border: 1px solid transparent !important;
    }

    .navbar .menu-item a:hover {
        background: #f0f7ff !important;
        border-color: #bfdbfe !important;
    }

    
    .navbar .menu-item a i {
        background: linear-gradient(135deg, #e8f5e9, #e3f2fd) !important;
        color: #0d1547 !important;
        border-radius: 8px !important;
        padding: 10px !important;
        font-size: 15px !important;
        transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
        margin-top: 2px;
    }

    .navbar .menu-item a:hover i {
        background: linear-gradient(135deg, #2196f3, #1565c0) !important;
        color: #ffffff !important;
        transform: scale(1.05);
    }

    
    .navbar .menu-item a .info .heading {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #0d1547 !important;
        line-height: 1.4;
    }

    .navbar .menu-item a .info .content {
        font-size: 12px !important;
        color: #94a3b8 !important;
        line-height: 1.5;
        margin-top: 1px;
    }

}

.pricing-item {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    position: relative !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
    box-shadow: 0 2px 14px rgba(13, 21, 71, 0.07) !important;
}

.pricing-item:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 24px 60px rgba(13, 21, 71, 0.15) !important;
    border-color: #90caf9 !important;
}

.pricing-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2196f3 0%, #1565c0 100%);
    z-index: 2;
}

.pricing-item .pricing-heading {
    background: linear-gradient(145deg, #080e2e 0%, #0d1547 60%, #0a1d6e 100%) !important;
    padding: 18px 22px 38px !important;   
    position: relative !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.pricing-item .pricing-heading::after {
    content: '';
    position: absolute;
    bottom: -40px; right: -30px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(33,150,243,0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.pricing-item .pricing-heading .name {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.10) !important;
    color: #90caf9 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    padding: 4px 13px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

.pricing-item .pricing-heading .monthly-price,
.pricing-item .pricing-heading .quarterly-price,
.pricing-item .pricing-heading .semiannual-price,
.pricing-item .pricing-heading .yearly-price,
.pricing-item .pricing-heading .biannual-price {
    text-align: right !important;
    margin: 0 !important;
}

.pricing-item .pricing-heading h4.title {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
}

.pricing-item .pricing-heading h4.title .durection {
    position: absolute !important;
    bottom: 11px !important;
    right: 22px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.45) !important;
    letter-spacing: 0.04em !important;
    text-transform: capitalize !important;
    vertical-align: baseline !important;
}

[dir="rtl"] .pricing-item .pricing-heading,
html[lang="ar"] .pricing-item .pricing-heading {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .pricing-item .pricing-heading .monthly-price,
[dir="rtl"] .pricing-item .pricing-heading .quarterly-price,
[dir="rtl"] .pricing-item .pricing-heading .semiannual-price,
[dir="rtl"] .pricing-item .pricing-heading .yearly-price,
[dir="rtl"] .pricing-item .pricing-heading .biannual-price,
html[lang="ar"] .pricing-item .pricing-heading .monthly-price,
html[lang="ar"] .pricing-item .pricing-heading .quarterly-price,
html[lang="ar"] .pricing-item .pricing-heading .semiannual-price,
html[lang="ar"] .pricing-item .pricing-heading .yearly-price,
html[lang="ar"] .pricing-item .pricing-heading .biannual-price {
    text-align: left !important;
}

[dir="rtl"] .pricing-item .pricing-heading h4.title .durection,
html[lang="ar"] .pricing-item .pricing-heading h4.title .durection {
    right: auto !important;
    left: 22px !important;
}

.pricing-item .pricing_body {
    padding: 22px 26px 26px !important;
    background: #ffffff !important;
}

.pricing-item .pricing_body ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pricing-item .pricing_body ul li {
    padding: 9px 0 9px 28px !important;
    position: relative !important;
    font-size: 13.5px !important;
    color: #374151 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    line-height: 1.5 !important;
}

.pricing-item .pricing_body ul li:last-child {
    border-bottom: none !important;
}

.pricing-item .pricing_body ul li strong {
    display: block !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
}

.pricing-item .pricing_body ul li small {
    display: block !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
}

.pricing-item .pricing_body ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    line-height: 19px;
}

.pricing-item .pricing_body a.btn-01 {
    display: block !important;
    background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    width: 100% !important;
    margin-top: 20px !important;
    transition: all 0.22s ease !important;
    box-shadow: 0 4px 14px rgba(33,150,243,0.32) !important;
    letter-spacing: 0.02em !important;
}

.pricing-item .pricing_body a.btn-01:hover {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(33,150,243,0.45) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.vps-wrapper {
    margin-top: 70px !important;
}

[dir="rtl"] .pricing-item .pricing_body ul li,
html[lang="ar"] .pricing-item .pricing_body ul li {
    padding: 9px 28px 9px 0 !important;
}

[dir="rtl"] .pricing-item .pricing_body ul li::before,
html[lang="ar"] .pricing-item .pricing_body ul li::before {
    left: auto !important;
    right: 0 !important;
}

footer.footer-main {
    background: #080e2e !important;
    border-top: 3px solid #2196f3 !important;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
}

footer.footer-main .footer-list h5 {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #ffffff !important;
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
    line-height: 1.4 !important;
    position: static !important;
}

footer.footer-main .footer-list h5::before,
footer.footer-main .footer-list h5::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    position: static !important;
}

footer.footer-main .footer-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

footer.footer-main .footer-list a {
    color: rgba(255, 255, 255, 0.50) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
    transition: color 0.18s ease, padding-left 0.18s ease !important;
    display: block !important;
    line-height: 1.6 !important;
}

footer.footer-main .footer-list a::before,
footer.footer-main .footer-list a::after {
    display: none !important;
    content: none !important;
}

footer.footer-main .footer-list a:hover {
    color: #2196f3 !important;
    padding-left: 6px !important;
    text-decoration: none !important;
}

footer.footer-main .border-top {
    border-color: rgba(255, 255, 255, 0.08) !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
}

footer.footer-main .border-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

footer.footer-main .footer-logo img {
    max-height: 36px !important;
    opacity: 0.9 !important;
}

footer.footer-main .footer-social-media {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

footer.footer-main .footer-social-media a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

footer.footer-main .footer-social-media a:hover {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

footer.footer-main .footer-social-media a svg {
    fill: currentColor !important;
    width: 14px !important;
    height: 14px !important;
}

footer.footer-main .footer-legal-links {
    padding: 14px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    margin-top: 4px !important;
}

footer.footer-main .footer-legal-links a {
    color: rgba(255, 255, 255, 0.40) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: color 0.18s !important;
}

@font-face {
    font-family: 'Roboto Fallback';
    src: local('Arial');
    ascent-override:  92.67%;
    descent-override: 24.39%;
    line-gap-override: 0%;
    size-adjust: 100.06%;
}

:root {
    --font-primary: 'Roboto', 'Roboto Fallback', sans-serif;
}

.mob-screen-page-slider {
    min-height: 73px;
    overflow: hidden;
    contain: layout;
}

.top-bar {
    min-height: 40px;
}
.main-header {
    min-height: 80px;
}

footer.footer-main .footer-legal-links a:hover {
    color: #2196f3 !important;
}

footer.footer-main .footer-legal-links span {
    color: rgba(255, 255, 255, 0.18) !important;
    margin: 0 6px !important;
}

footer.footer-main .copyright-text,
footer.footer-main .copyright-text a {
    color: rgba(255, 255, 255, 0.28) !important;
    font-size: 12px !important;
}

[dir="rtl"] footer.footer-main .footer-list a:hover,
html[lang="ar"] footer.footer-main .footer-list a:hover {
    padding-left: 0 !important;
    padding-right: 6px !important;
}

[dir="rtl"] footer.footer-main .footer-social-media,
html[lang="ar"] footer.footer-main .footer-social-media {
    justify-content: flex-start !important;
}

.legal-hero {
    background: linear-gradient(135deg, #080e2e 0%, #0d1547 60%, #162172 100%);
    padding: 48px 0 36px;
    border-bottom: 3px solid #2196f3;
}

.legal-hero-badge {
    display: inline-block;
    background: rgba(33, 150, 243, 0.15);
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 4px 14px;
    margin-bottom: 14px;
    display: block;
    width: fit-content;
}

.legal-hero h1 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.legal-layout {
    background: #f0f4f9;
    padding: 36px 0 60px;
    min-height: 65vh;
}

.legal-sidebar {
    position: sticky;
    top: 88px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(13, 21, 71, 0.06);
}

.legal-sidebar-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8;
    padding: 0 4px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.legal-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0;
}

.legal-nav-link {
    display: block;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 13.5px;
    color: #475569;
    text-decoration: none !important;
    font-weight: 400;
    transition: all 0.18s ease;
    border-left: 3px solid transparent;
    line-height: 1.4;
}

.legal-nav-link:hover {
    background: #f1f5f9;
    color: #0d1547;
    text-decoration: none !important;
}

.legal-nav-link.active {
    background: #e3f2fd;
    color: #1565c0;
    font-weight: 600;
    border-left-color: #2196f3;
}

.legal-sidebar-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 12px 0;
}

.legal-contact-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 13px;
    color: #2196f3;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.18s;
}

.legal-contact-link:hover {
    background: #e3f2fd;
    color: #1565c0;
    text-decoration: none !important;
}

.legal-content {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 36px 40px;
    box-shadow: 0 2px 10px rgba(13, 21, 71, 0.06);
}

.legal-page-title {
    font-size: 20px;
    font-weight: 800;
    color: #0d1547;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 2px solid #f1f5f9;
    letter-spacing: -0.01em;
}

.legal-content h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0d1547 !important;
    margin-top: 26px !important;
    margin-bottom: 10px !important;
    padding: 8px 14px !important;
    border-left: 3px solid #2196f3 !important;
    background: #f8fafc !important;
    border-radius: 0 6px 6px 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.legal-content h3.service-block {
    background: #0d1547 !important;
    color: #ffffff !important;
    border-left-color: #2196f3 !important;
    margin-top: 32px !important;
}

.legal-content p {
    font-size: 14px;
    color: #475569;
    line-height: 1.85;
    margin-bottom: 14px;
}

.legal-content a {
    color: #2196f3;
    text-decoration: none;
}

.legal-content a:hover {
    color: #1565c0;
    text-decoration: underline;
}

.legal-content ul.bullet-list,
.legal-content ul:not(.legal-nav) {
    margin: 8px 0 16px 8px !important;
    padding: 0 !important;
    list-style: none !important;
}

.legal-content ul.bullet-list li,
.legal-content ul:not(.legal-nav) li {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.8 !important;
    margin-bottom: 4px !important;
    padding-left: 18px !important;
    position: relative !important;
    list-style: none !important;
    background: none !important;
    border: none !important;
}

.legal-content ul.bullet-list li::before,
.legal-content ul:not(.legal-nav) li::before {
    content: '›' !important;
    position: absolute !important;
    left: 0 !important;
    color: #2196f3 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    display: block !important;
}

.legal-contact-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 24px;
    margin-top: 28px;
}

.legal-contact-box ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-contact-box ul li {
    font-size: 13.5px !important;
    color: #475569 !important;
    list-style: none !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.legal-contact-box ul li::before {
    display: none !important;
    content: none !important;
}

.legal-contact-box ul li strong {
    color: #0d1547;
    font-weight: 600;
}

.legal-contact-box ul li a {
    color: #2196f3;
}

.legal-agreement {
    margin-top: 24px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 10px;
    border-left: 4px solid #2196f3;
    font-size: 13.5px;
    color: #1565c0;
    font-weight: 500;
    text-align: center;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .legal-sidebar {
        position: static;
        margin-bottom: 20px;
    }

    .legal-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .legal-nav-link {
        padding: 6px 14px;
        font-size: 12.5px;
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .legal-nav-link.active {
        border-left: none;
        border-bottom-color: #2196f3;
    }
}

@media (max-width: 767px) {
    .legal-hero { padding: 28px 0 20px; }
    .legal-hero h1 { font-size: 22px; }
    .legal-content { padding: 20px 18px; }
    .legal-layout { padding: 16px 0 40px; }
}

.dash-hero {
    background: linear-gradient(135deg, #080e2e 0%, #0d1547 55%, #162172 100%);
    border-radius: 16px;
    padding: 32px 36px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 24px rgba(8,14,46,0.18);
}

.dash-hero-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dash-hero-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2196f3, #1565c0);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(33,150,243,0.3);
}

.dash-hero-text {
    flex: 1;
    min-width: 180px;
}

.dash-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.3;
}

.dash-hero-title span { color: #64b5f6; }

.dash-hero-sub {
    font-size: 13.5px;
    color: #94a3b8;
    margin: 0;
}

.dash-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #2196f3;
    color: #fff !important;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}
.dash-btn-primary:hover { background: #1976d2; color: #fff !important; }

.dash-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: #94a3b8 !important;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.2s;
    white-space: nowrap;
}
.dash-btn-outline:hover {
    background: rgba(255,255,255,0.08);
    color: #fff !important;
    border-color: rgba(255,255,255,0.3);
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.dash-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 14px;
    padding: 20px 18px;
    text-decoration: none !important;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.dash-stat-card::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
}
.dash-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.15);
    text-decoration: none !important;
}
.dash-stat-blue   { background: linear-gradient(135deg, #1565c0, #2196f3); }
.dash-stat-indigo { background: linear-gradient(135deg, #311b92, #5c6bc0); }
.dash-stat-cyan   { background: linear-gradient(135deg, #006064, #00acc1); }
.dash-stat-green  { background: linear-gradient(135deg, #1b5e20, #43a047); }
.dash-stat-red    { background: linear-gradient(135deg, #b71c1c, #ef5350); }

.dash-stat-icon {
    font-size: 26px;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
}
.dash-stat-info { flex: 1; }
.dash-stat-number {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 3px;
}
.dash-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dash-stat-arrow {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
}

.dash-search-wrap { margin-bottom: 24px; }

.dash-search-form {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.dash-search-form:focus-within {
    border-color: #2196f3;
    box-shadow: 0 0 0 3px rgba(33,150,243,0.12);
}
.dash-search-icon {
    color: #94a3b8;
    font-size: 15px;
    margin-right: 10px;
}
.dash-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 14px;
    color: #334155;
    padding: 14px 0;
}
.dash-search-btn {
    background: #2196f3;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.dash-search-btn:hover { background: #1976d2; }

.dash-quick-actions {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.dash-qa-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 8px;
    text-decoration: none !important;
    color: #334155 !important;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
}
.dash-qa-item i {
    font-size: 22px;
    color: #2196f3;
}
.dash-qa-item:hover {
    background: #e3f2fd;
    border-color: #90caf9;
    color: #1565c0 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33,150,243,0.12);
}
.dash-qa-item:hover i { color: #1565c0; }

.dash-panels { margin-top: 24px; }
.dash-panels-full { margin-bottom: 20px; }
.dash-panels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.dash-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfd;
}
.dash-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: #0d1547;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-panel-title i { color: #2196f3; }
.dash-panel-btn {
    font-size: 12px;
    background: #e3f2fd;
    color: #1565c0 !important;
    padding: 5px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
    white-space: nowrap;
}
.dash-panel-btn:hover {
    background: #bbdefb;
    color: #0d47a1 !important;
    text-decoration: none;
}
.dash-panel-body {
    padding: 16px 20px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
}
.dash-panel-list { display: flex; flex-direction: column; }
.dash-panel-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
    color: #334155 !important;
    text-decoration: none !important;
    transition: background 0.15s;
}
.dash-panel-list-item:last-child { border-bottom: none; }
.dash-panel-list-item:hover {
    background: #f8fafc;
    color: #0d1547 !important;
    text-decoration: none !important;
}
.dash-panel-list-item.active {
    background: #e3f2fd;
    color: #1565c0 !important;
    font-weight: 600;
}
.dash-panel-list-item i:not(.dash-list-arrow) { color: #2196f3; width: 16px; }
.dash-panel-list-item span { flex: 1; }
.dash-list-arrow {
    color: #cbd5e1;
    font-size: 11px;
    margin-left: auto;
}
.dash-panel-footer {
    padding: 10px 20px;
    background: #fafbfd;
    border-top: 1px solid #f1f5f9;
    font-size: 12.5px;
    color: #64748b;
}

.dash-badge {
    display: inline-block;
    background: #ef5350;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    line-height: 1.4;
    min-width: 18px;
    text-align: center;
}

.promo-container .header,
.promo-container > .header {
    background: #ffffff !important;
    background-image: none !important;
    color: #0d1547 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 18px !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: none !important;
}
.promo-container .header h3,
.promo-container .header * {
    color: #0d1547 !important;
    text-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.promo-container .header a,
.promo-container .promotions-slider-control a {
    color: #2196f3 !important;
    background: none !important;
    background-image: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    width: auto !important;
}

.promo-container {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.promo-container .carousel-control {
    background-image: none !important;
    background: rgba(0,0,0,0.15) !important;
    width: 36px !important;
    height: 36px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    opacity: 0.7 !important;
}
.promo-container .carousel-control:hover {
    opacity: 1 !important;
    background: rgba(33,150,243,0.85) !important;
}

.primary-content .panel-heading,
.primary-content .card-header,
.primary-content .panel > .panel-heading,
.primary-content .panel-primary > .panel-heading,
.primary-content .panel-default > .panel-heading {
    background: #f8faff !important;
    background-color: #f8faff !important;
    background-image: none !important;
    color: #0d1547 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 18px !important;
    position: relative !important;
    z-index: 2 !important;
}

.primary-content .panel-heading *,
.primary-content .panel-heading h3,
.primary-content .panel-heading .panel-title,
.primary-content .card-header *,
.primary-content .card-header h3 {
    color: #0d1547 !important;
    text-shadow: none !important;
}

.primary-content .panel-heading a,
.primary-content .card-header a {
    color: #2196f3 !important;
    opacity: 1 !important;
    background: none !important;
    background-image: none !important;
    width: auto !important;
    text-shadow: none !important;
}

.primary-content .carousel-control,
.mb-3 .carousel-control {
    background-image: none !important;
    background: rgba(0,0,0,0.2) !important;
    width: 36px !important;
    height: 36px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    opacity: 0.7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.primary-content .carousel-control.left  { left: 8px !important; }
.primary-content .carousel-control.right { right: 8px !important; }
.primary-content .carousel-control:hover,
.mb-3 .carousel-control:hover {
    opacity: 1 !important;
    background: rgba(33,150,243,0.85) !important;
}

.primary-content .mb-3 .panel,
.primary-content > .panel {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.svc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.svc-toolbar-left { display: flex; align-items: center; }
.svc-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.svc-count {
    font-size: 13px;
    font-weight: 700;
    color: #0d1547;
    background: #e3f2fd;
    padding: 5px 12px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.svc-count i { color: #2196f3; }

.svc-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.svc-search-wrap i {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
    z-index: 1;
}
.svc-search {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 7px 14px 7px 34px !important;
    font-size: 13px !important;
    color: #334155 !important;
    background: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    width: 220px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.svc-search::-webkit-input-placeholder { color: #94a3b8; }
.svc-search::-moz-placeholder           { color: #94a3b8; }
.svc-search:-ms-input-placeholder       { color: #94a3b8; }
.svc-search::placeholder                { color: #94a3b8; }
.svc-search:focus {
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 3px rgba(33,150,243,0.12) !important;
}

.svc-filter-btns { display: flex; gap: 6px; }
.svc-filter-btn {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.2s;
}
.svc-filter-btn:hover {
    background: #e3f2fd;
    border-color: #90caf9;
    color: #1565c0;
}
.svc-filter-btn.active {
    background: #2196f3;
    border-color: #1976d2;
    color: #fff;
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.svc-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.svc-card:hover {
    box-shadow: 0 6px 24px rgba(13,21,71,0.1);
    transform: translateY(-2px);
}

.svc-ribbon {
    width: 4px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 14px 0 0 14px;
}
.svc-ribbon-active      { background: #2196f3; }
.svc-ribbon-suspended   { background: #f57c00; }
.svc-ribbon-terminated,
.svc-ribbon-cancelled   { background: #e53935; }
.svc-ribbon-pending     { background: #ffc107; }
.svc-ribbon-completed   { background: #43a047; }
.svc-ribbon-fraud       { background: #9c27b0; }

.svc-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 14px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.svc-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.svc-icon-server  { background: #e3f2fd; color: #1565c0; }
.svc-icon-hosting { background: #e8f5e9; color: #2e7d32; }
.svc-icon-cloud   { background: #ede7f6; color: #512da8; }
.svc-icon-server i  { color: #1565c0; }
.svc-icon-hosting i { color: #2e7d32; }
.svc-icon-cloud i   { color: #512da8; }

.svc-header-info { flex: 1; min-width: 0; }
.svc-product-name {
    font-size: 14px;
    font-weight: 700;
    color: #0d1547;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.svc-domain-link {
    font-size: 11.5px;
    color: #2196f3 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.svc-domain-link:hover { color: #1565c0 !important; text-decoration: underline !important; }
.svc-domain-link i { font-size: 9px; }

.svc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}
.svc-status-active      { background: #e3f2fd; color: #1565c0; }
.svc-status-suspended   { background: #fff3e0; color: #e65100; }
.svc-status-terminated,
.svc-status-cancelled   { background: #ffebee; color: #c62828; }
.svc-status-pending     { background: #fffde7; color: #f57f17; }
.svc-status-completed   { background: #e8f5e9; color: #1b5e20; }
.svc-status-fraud       { background: #f3e5f5; color: #6a1b9a; }

.svc-card-body {
    padding: 14px 16px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.svc-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.svc-info-icon {
    width: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    flex-shrink: 0;
}
.svc-info-label {
    color: #64748b;
    flex-shrink: 0;
    min-width: 90px;
    font-size: 12.5px;
}
.svc-info-value {
    color: #0f172a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    text-align: right;
}
.svc-cycle {
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}

.svc-ip-row .svc-info-icon { color: #2196f3; }
.svc-ip-badge {
    font-family: 'Courier New', monospace;
    font-size: 12.5px;
    font-weight: 700;
    background: #e3f2fd;
    color: #0d1547;
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: 0.3px;
}
.svc-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.svc-copy-btn:hover { color: #2196f3; background: #e3f2fd; }
.svc-copy-btn.copied { color: #43a047; }

.svc-ssl-icon { width: 18px; height: 18px; object-fit: contain; }
.svc-ssl-label { font-size: 11.5px; font-weight: 500; color: #43a047; }

.svc-duedate { font-size: 12.5px; }
.svc-overdue   { color: #e53935 !important; font-weight: 700; }
.svc-due-soon  { color: #f57c00 !important; font-weight: 600; }
.svc-due-warning { color: #f9a825 !important; }

.svc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px 11px 20px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfd;
}
.svc-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2196f3;
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 7px;
    text-decoration: none !important;
    transition: background 0.2s;
}
.svc-manage-btn:hover {
    background: #1565c0;
    color: #fff !important;
    text-decoration: none !important;
}
.svc-server-tag {
    font-size: 11px;
    font-weight: 600;
    color: #1565c0;
    background: #e3f2fd;
    padding: 3px 9px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.svc-no-results,
.svc-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}
.svc-no-results i,
.svc-empty-icon i {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 14px;
    display: block;
}
.svc-no-results p,
.svc-empty-state p {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 0;
}
.svc-empty-state h3 {
    color: #0d1547;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}
.svc-empty-state .btn { margin-top: 20px; }

@media (max-width: 1199px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .svc-grid { grid-template-columns: 1fr; }
    .svc-toolbar { flex-direction: column; align-items: stretch; }
    .svc-toolbar-right { flex-direction: column; align-items: stretch; }
    .svc-search-wrap { width: 100%; }
    .svc-search { width: 100%; }
    .svc-filter-btns { justify-content: flex-start; }
    .svc-info-label { min-width: 80px; }
}

@media (max-width: 1199px) {
    .dash-quick-actions { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-panels-grid { grid-template-columns: 1fr; }
    .dash-quick-actions { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575px) {
    .dash-hero { padding: 20px 18px; }
    .dash-hero-title { font-size: 18px; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dash-stat-number { font-size: 24px; }
    .dash-quick-actions { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .dash-hero-actions { width: 100%; }
    .dash-hero-inner { gap: 14px; }
}

.brand-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    aspect-ratio: 378 / 100; 
}

@media (max-width: 991px) {
    .brand-logo { height: 38px; }
}

@media (max-width: 575px) {
    .brand-logo { height: 32px; }
}

.brand-logo-footer {
    display: block;
    height: 46px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    aspect-ratio: 378 / 100; 
}

@media (max-width: 767px) {
    .brand-logo-footer { height: 38px; }
}

@media (max-width: 575px) {
    .brand-logo-footer { height: 32px; }
}

#registration {
    padding: 0 !important;
}

#registration .label {
    padding: 0;
    margin-bottom: 5px;
    display: block;
    text-align: start;
}

#registration select.field {
    padding: 10px 15px;
}

.highlight:after {
    content: unset;
}

section#main-body:has(section.form-account-page) {
    padding: 0;
}

section#main-body:has(.php-email-form),
section#main-body:has(section.top-up-banner) {
    background-color: #ffffff;
    padding: 0 !important;
}

section#main-body:has(.php-email-form) label,
section#main-body:has(section.top-up-banner) label {
    font-weight: 500;
}

.services-one .icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.product-details {
    background:    #fff;
    border-radius: 20px;
    border:        none;
    box-shadow:    0 8px 40px rgba(13,21,71,0.12);
    padding:       0;
    margin-bottom: 32px;
    overflow:      hidden;
}
.product-details > .row { margin: 0; }

.product-details .row > .col-md-6:first-child {
    background:  linear-gradient(160deg, #0d1547 0%, #1a237e 55%, #1565c0 100%);
    padding:     26px 24px 20px;
    text-align:  center;
    border-right: none;
    position:    relative;
}

.product-details .row > .col-md-6:first-child::before,
.product-details .row > .col-md-6:first-child::after {
    content:       '';
    position:      absolute;
    border-radius: 50%;
    background:    rgba(255,255,255,0.04);
    pointer-events: none;
}
.product-details .row > .col-md-6:first-child::before {
    width:  240px; height: 240px;
    top:    -80px; right:  -60px;
}
.product-details .row > .col-md-6:first-child::after {
    width:  140px; height: 140px;
    bottom: -40px; left:   -40px;
}

.product-details .product-status,
.product-details .product-status-active,
.product-details .product-status-suspended,
.product-details .product-status-terminated,
.product-details .product-status-cancelled,
.product-details .product-status-pending {
    background:       transparent !important;
    background-image: none        !important;
    border:           none        !important;
    border-radius:    0           !important;
    box-shadow:       none        !important;
    padding:          0           !important;
    margin:           0           !important;
    text-align:       center      !important;
}

.product-details .product-icon,
.product-details .product-icon.text-center {
    background:    transparent !important;
    background-image: none     !important;
    border:        none        !important;
    border-radius: 0           !important;
    box-shadow:    none        !important;
    padding:       0           !important;
    margin:        0           !important;
}

.product-details .product-icon .fa-stack {
    font-size:     26px !important;
    display:       inline-block !important;
    margin:        0 auto 10px !important;
    filter:        drop-shadow(0 6px 16px rgba(0,0,0,0.25));
}

.product-details .product-icon .fa-stack .fa-circle,
.product-details .product-icon .fa-stack .fa-stack-2x {
    color: #fff !important;
}

.product-details .product-icon .fa-stack .fa-stack-1x,
.product-details .product-icon .fa-stack .fa-inverse {
    color: #0d1547 !important;
}

.product-details .product-icon h3 {
    font-size:      1.25rem          !important;
    font-weight:    700              !important;
    color:          #fff             !important;
    margin:         0 0 3px          !important;
    letter-spacing: 0.01em;
    text-shadow:    0 1px 4px rgba(0,0,0,0.2);
}

.product-details .product-icon h4 {
    font-size:      0.82rem          !important;
    color:          rgba(255,255,255,0.7) !important;
    font-weight:    400              !important;
    margin:         0 0 12px         !important;
    padding:        0                !important;
    text-transform: none             !important;
    letter-spacing: normal           !important;
    border:         none             !important;
    border-top:     none             !important;
    background:     none             !important;
}

.product-details .product-status-text {
    background: transparent !important;
    border:     none        !important;
    padding:    0           !important;
    margin:     0 0 16px    !important;
    text-align: center      !important;
}

.product-details .product-status-active  .product-status-text,
.product-details .product-status-active  .product-status-text .label,
.product-details .product-status-active  .product-status-text .btn {
    display:        inline-block              !important;
    width:          auto                      !important;
    background:     rgba(0,200,120,0.18)      !important;
    border:         1.5px solid rgba(0,230,140,0.6) !important;
    border-radius:  20px                      !important;
    padding:        5px 22px                  !important;
    font-size:      11px                      !important;
    font-weight:    700                       !important;
    letter-spacing: 0.12em                    !important;
    text-transform: uppercase                 !important;
    color:          #5dffbe                   !important;
    text-shadow:    0 0 10px rgba(0,230,140,0.5) !important;
    box-shadow:     0 0 12px rgba(0,200,120,0.3) !important;
    line-height:    1.6                       !important;
}

.product-details .product-status-suspended  .product-status-text,
.product-details .product-status-suspended  .product-status-text .label,
.product-details .product-status-suspended  .product-status-text .btn {
    display:        inline-block              !important;
    width:          auto                      !important;
    background:     rgba(220,53,69,0.18)      !important;
    border:         1.5px solid rgba(239,68,68,0.6) !important;
    border-radius:  20px                      !important;
    padding:        5px 22px                  !important;
    font-size:      11px                      !important;
    font-weight:    700                       !important;
    letter-spacing: 0.12em                    !important;
    text-transform: uppercase                 !important;
    color:          #ff8a8a                   !important;
    text-shadow:    none                      !important;
    box-shadow:     0 0 10px rgba(220,53,69,0.25) !important;
    line-height:    1.6                       !important;
}

.product-details .product-status-terminated .product-status-text,
.product-details .product-status-terminated .product-status-text .label,
.product-details .product-status-terminated .product-status-text .btn,
.product-details .product-status-cancelled  .product-status-text,
.product-details .product-status-cancelled  .product-status-text .label,
.product-details .product-status-cancelled  .product-status-text .btn {
    display:        inline-block              !important;
    width:          auto                      !important;
    background:     rgba(255,255,255,0.1)     !important;
    border:         1.5px solid rgba(255,255,255,0.25) !important;
    border-radius:  20px                      !important;
    padding:        5px 22px                  !important;
    font-size:      11px                      !important;
    font-weight:    700                       !important;
    letter-spacing: 0.12em                    !important;
    text-transform: uppercase                 !important;
    color:          rgba(255,255,255,0.65)    !important;
    text-shadow:    none                      !important;
    box-shadow:     none                      !important;
    line-height:    1.6                       !important;
}

.product-details .product-status-pending    .product-status-text,
.product-details .product-status-pending    .product-status-text .label,
.product-details .product-status-pending    .product-status-text .btn {
    display:        inline-block              !important;
    width:          auto                      !important;
    background:     rgba(255,193,7,0.18)      !important;
    border:         1.5px solid rgba(255,193,7,0.5) !important;
    border-radius:  20px                      !important;
    padding:        5px 22px                  !important;
    font-size:      11px                      !important;
    font-weight:    700                       !important;
    letter-spacing: 0.12em                    !important;
    text-transform: uppercase                 !important;
    color:          #ffe082                   !important;
    text-shadow:    none                      !important;
    box-shadow:     none                      !important;
    line-height:    1.6                       !important;
}

.product-details .product-actions-wrapper {
    margin-top:  0                            !important;
    padding-top: 14px                         !important;
    border-top:  1px solid rgba(255,255,255,0.12) !important;
    position:    relative;
    z-index:     1;
}
.product-details .product-actions-wrapper .col-xs-12 {
    padding-left:  0    !important;
    padding-right: 0    !important;
    margin-bottom: 7px !important;
}
.product-details .product-actions-wrapper .col-xs-12:last-child {
    margin-bottom: 0 !important;
}
.product-details .product-actions-wrapper .btn {
    border-radius:   10px                        !important;
    font-weight:     600                         !important;
    font-size:       0.875rem                    !important;
    padding:         10px 16px                   !important;
    letter-spacing:  0.02em                      !important;
    transition:      transform 0.12s, box-shadow 0.15s !important;
}

.product-details .product-actions-wrapper .btn-primary {
    background:  rgba(255,255,255,0.18)      !important;
    border-color: rgba(255,255,255,0.35)     !important;
    color:       #fff                        !important;
    backdrop-filter: blur(4px);
}
.product-details .product-actions-wrapper .btn-primary:hover {
    background:  rgba(255,255,255,0.28)      !important;
    transform:   translateY(-1px);
    box-shadow:  0 5px 18px rgba(0,0,0,0.2)  !important;
}

.product-details .product-actions-wrapper .btn-danger {
    background:  rgba(220,53,69,0.75)        !important;
    border-color: rgba(239,68,68,0.6)        !important;
    color:       #fff                        !important;
}
.product-details .product-actions-wrapper .btn-danger:hover {
    background:  rgba(220,53,69,0.9)         !important;
    transform:   translateY(-1px);
    box-shadow:  0 5px 18px rgba(220,53,69,0.4) !important;
}

.product-details .product-actions-wrapper .btn-success {
    background:  rgba(0,180,100,0.7)         !important;
    border-color: rgba(0,200,120,0.5)        !important;
    color:       #fff                        !important;
}

.product-details .col-md-6.text-center {
    padding:    22px 32px 22px 32px !important;
    text-align: left                !important;
    background: linear-gradient(180deg, #fff 0%, #f7f9ff 100%);
    border-left: 1px solid #eef1f8 !important;
    
    font-size:   0.93rem;
    font-weight: 700;
    color:       #1a2940;
    line-height: 1.3;
}

.product-details .col-md-6.text-center::before {
    content:        '';
    display:        block;
    width:          32px;
    height:         3px;
    border-radius:  2px;
    background:     linear-gradient(90deg, #1565c0, #42a5f5);
    margin-bottom:  16px;
}

.product-details .col-md-6.text-center h4 {
    font-size:      9.5px               !important;
    text-transform: uppercase           !important;
    letter-spacing: 0.13em              !important;
    color:          #94a3b8             !important;
    font-weight:    700                 !important;
    margin:         13px 0 2px         !important;
    padding:        0                   !important;
    border:         none                !important;
    background:     none                !important;
    display:        flex                !important;
    align-items:    center              !important;
    gap:            7px                 !important;
}

.product-details .col-md-6.text-center h4::before {
    content:       '';
    display:       inline-block;
    width:         5px;
    height:        5px;
    min-width:     5px;
    border-radius: 50%;
    background:    #1565c0;
}
.product-details .col-md-6.text-center h4:first-of-type {
    margin-top: 0 !important;
}

@media (max-width: 991px) {
    .product-details .row > .col-md-6:first-child {
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    .product-details .col-md-6.text-center {
        padding:     18px 20px 20px !important;
        border-left: none           !important;
        border-top:  1px solid #eef1f8 !important;
    }
    .product-details .col-md-6.text-center::before {
        margin-bottom: 18px;
    }
}

.sidebar {
    margin-bottom: 0 !important;
}

.sidebar .card-sidebar {
    border:        none !important;
    border-radius: 14px !important;
    box-shadow:    0 2px 18px rgba(13,21,71,0.09) !important;
    overflow:      hidden !important;
    margin-bottom: 14px !important;
    background:    #fff !important;
}

.sidebar .card-sidebar .card-header {
    background: linear-gradient(135deg, #0d1547 0%, #1565c0 100%) !important;
    border:     none !important;
    padding:    11px 16px !important;
}
.sidebar .card-sidebar .card-header h3.card-title {
    color:          #fff !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin:         0 !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            8px !important;
}

.sidebar .card-sidebar .card-header h3.card-title > i:not(.card-minimise) {
    opacity:   0.8;
    font-size: 0.88em;
}

.sidebar .card-sidebar .card-header .card-minimise {
    color:      rgba(255,255,255,0.65) !important;
    font-size:  11px !important;
    margin-left: auto !important;
    transition: transform 0.2s !important;
}

.sidebar .card-sidebar .list-group-flush {
    border-radius: 0 !important;
}

.sidebar .card-sidebar .list-group-item,
.sidebar .card-sidebar .list-group-item:visited,
.sidebar .card-sidebar .list-group-item a,
.sidebar .card-sidebar .list-group-item a:visited {
    border:        none !important;
    border-bottom: 1px solid #f1f5fb !important;
    border-left:   3px solid transparent !important;
    padding:       9px 14px 9px 13px !important;
    font-size:     13px !important;
    font-weight:   500 !important;
    color:         #2d3748 !important;
    background:    #fff !important;
    display:       flex !important;
    align-items:   center !important;
    gap:           9px !important;
    text-decoration: none !important;
    transition:    background 0.14s, color 0.14s, border-left-color 0.14s, padding-left 0.14s !important;
}
.sidebar .card-sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

.sidebar .card-sidebar .list-group-item.active {
    background:        linear-gradient(90deg, #e8f0fe 0%, #f4f7ff 100%) !important;
    color:             #1565c0 !important;
    font-weight:       700 !important;
    border-left-color: #1565c0 !important;
}

.sidebar .card-sidebar .list-group-item:hover:not(.active):not(.disabled) {
    background:        #f5f8ff !important;
    color:             #1565c0 !important;
    border-left-color: rgba(21,101,192,0.35) !important;
}

.sidebar .card-sidebar .list-group-item .sidebar-menu-item-icon {
    color:      #b0bec5 !important;
    font-size:  12px !important;
    width:      15px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    transition: color 0.14s !important;
}
.sidebar .card-sidebar .list-group-item:hover .sidebar-menu-item-icon,
.sidebar .card-sidebar .list-group-item.active .sidebar-menu-item-icon {
    color: #1565c0 !important;
}

.sidebar .card-sidebar .list-group-item.disabled {
    color:   #b0bec5 !important;
    opacity: 0.7 !important;
    cursor:  not-allowed !important;
}

.sidebar .card-sidebar .badge {
    background:    #1565c0 !important;
    color:         #fff !important;
    border-radius: 10px !important;
    padding:       2px 8px !important;
    font-size:     10px !important;
    margin-left:   0 !important;
    margin-right:  8px !important;
    font-weight:   700 !important;
    flex-shrink:   0;
}
.sidebar .card-sidebar .list-group-item.active .badge {
    background: #fff !important;
    color:      #1565c0 !important;
}

.sidebar .card-sidebar .card-body {
    padding:   12px 16px !important;
    font-size: 13px !important;
    color:     #4a5568 !important;
}

.sidebar .card-sidebar .card-footer {
    background:  #f7f9ff !important;
    border-top:  1px solid #eef1f8 !important;
    padding:     12px 16px !important;
    font-size:   12.5px !important;
    color:       #4a5568 !important;
    text-align:  center !important;
}
.sidebar .card-sidebar .card-footer a {
    color:       #1565c0 !important;
    font-weight: 600 !important;
}
.sidebar .card-sidebar .card-footer img {
    max-width:    56px !important;
    margin-bottom: 8px !important;
}

.sidevar .card {
    border-radius: 12px !important;
    overflow:      hidden !important;
    box-shadow:    0 2px 12px rgba(13,21,71,0.08) !important;
    margin-bottom: 14px !important;
    border:        none !important;
}
.sidevar .card .card-header {
    background: linear-gradient(135deg, #0d1547 0%, #1565c0 100%) !important;
    border:     none !important;
    padding:    11px 16px !important;
}
.sidevar .card .card-header h3.card-title {
    color:          #fff !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin:         0 !important;
}
.sidevar .card .card-body {
    padding: 12px !important;
}
.sidevar .card .form-control {
    border-radius: 8px !important;
    font-size:     13px !important;
    border-color:  #d8e3f0 !important;
}

.ng-hero,.ng-section,.ng-section-alt,.ng-section-dark,.ng-cta-section { box-sizing:border-box; }
.ng-gradient-text { background:linear-gradient(135deg,#2196f3 0%,#64b5f6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.ng-hero {
  background: linear-gradient(135deg,#060e24 0%,#0d1547 55%,#1565c0 100%);
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}
.ng-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse 70% 60% at 80% 50%,rgba(33,150,243,.18) 0%,transparent 70%);
  pointer-events:none;
}
.ng-hero .container { position:relative; z-index:1; }
.ng-hero h1 { font-size:clamp(2rem,5vw,3.2rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:20px; }
.ng-hero p { font-size:1.1rem; color:rgba(255,255,255,.78); line-height:1.8; margin-bottom:28px; }
.ng-hero-badge {
  display:inline-block;
  background:rgba(33,150,243,.18);
  border:1px solid rgba(33,150,243,.4);
  color:#64b5f6;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:6px 16px;
  border-radius:50px;
  margin-bottom:20px;
}
.ng-hero-list { list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:10px; }
.ng-hero-list li { color:rgba(255,255,255,.85); font-size:.98rem; display:flex; align-items:center; gap:10px; }
.ng-hero-list li::before { content:'✓'; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:rgba(33,150,243,.25); border-radius:50%; color:#64b5f6; font-size:.75rem; font-weight:900; flex-shrink:0; }
.ng-hero-price { font-size:1rem; color:rgba(255,255,255,.65); margin-bottom:32px; }
.ng-hero-price strong { font-size:1.5rem; color:#fff; font-weight:900; }
.ng-hero-img { text-align:center; }
.ng-hero-img img { max-width:100%; filter:drop-shadow(0 20px 40px rgba(0,0,0,.4)); }

.ng-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#2196f3,#1565c0);
  color:#fff !important;
  padding:14px 32px;
  border-radius:50px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 18px rgba(33,150,243,.35);
}
.ng-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(33,150,243,.5); color:#fff !important; }
.ng-btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent;
  color:#fff !important;
  padding:13px 30px;
  border-radius:50px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  border:2px solid rgba(255,255,255,.4);
  cursor:pointer;
  transition:all .2s;
}
.ng-btn-outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7); color:#fff !important; }
.ng-btn-dark {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#2196f3,#1565c0);
  color:#fff !important;
  padding:13px 28px;
  border-radius:50px;
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 14px rgba(33,150,243,.3);
}
.ng-btn-dark:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(33,150,243,.45); color:#fff !important; }

.ng-section { padding:80px 0; background:#fff; }
.ng-section-alt { padding:80px 0; background:#f7f9fc; }
.ng-section-dark { padding:80px 0; background:linear-gradient(135deg,#060e24 0%,#0d1547 100%); }
.ng-section-head { margin-bottom:52px; }
.ng-section-head h2 { font-size:clamp(1.7rem,3.5vw,2.6rem); font-weight:900; color:#0d1547; line-height:1.2; margin-bottom:14px; }
.ng-section-dark .ng-section-head h2 { color:#fff; }
.ng-section-head p { font-size:1.05rem; color:#6b7a99; max-width:600px; margin:0 auto; line-height:1.8; }
.ng-section-dark .ng-section-head p { color:rgba(255,255,255,.68); }
.ng-section-tag {
  display:inline-block;
  background:#e3f2fd;
  color:#1565c0;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:5px 14px;
  border-radius:50px;
  margin-bottom:14px;
}
.ng-section-dark .ng-section-tag { background:rgba(33,150,243,.2); color:#64b5f6; }

.ng-features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.ng-feature-card {
  background:#fff;
  border:1.5px solid #e8edf5;
  border-radius:20px;
  padding:36px 28px;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.ng-feature-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(13,21,71,.1); border-color:#bbdefb; }
.ng-section-alt .ng-feature-card { background:#fff; }
.ng-section-dark .ng-feature-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.ng-section-dark .ng-feature-card:hover { background:rgba(255,255,255,.1); border-color:rgba(33,150,243,.4); }
.ng-feature-icon { width:64px; height:64px; background:linear-gradient(135deg,#e3f2fd,#bbdefb); border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.ng-feature-icon img { width:32px; height:32px; object-fit:contain; }
.ng-section-dark .ng-feature-icon { background:rgba(33,150,243,.2); }
.ng-feature-card h4 { font-size:1.1rem; font-weight:800; color:#0d1547; margin-bottom:10px; }
.ng-section-dark .ng-feature-card h4 { color:#fff; }
.ng-feature-card p { font-size:.92rem; color:#6b7a99; line-height:1.75; margin:0; }
.ng-section-dark .ng-feature-card p { color:rgba(255,255,255,.65); }
.ng-checklist { list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:7px; }
.ng-checklist li { font-size:.9rem; color:#6b7a99; display:flex; align-items:center; gap:8px; }
.ng-checklist li::before { content:'✓'; color:#2196f3; font-weight:900; font-size:.8rem; }
.ng-section-dark .ng-checklist li { color:rgba(255,255,255,.65); }

.ng-services-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.ng-service-item {
  background:#fff;
  border:1.5px solid #e8edf5;
  border-radius:16px;
  padding:24px 16px;
  text-align:center;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.ng-service-item:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(13,21,71,.09); border-color:#bbdefb; }
.ng-si-icon { width:48px; height:48px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; }
.ng-si-icon img { width:40px; height:40px; object-fit:contain; }
.ng-service-item h5 { font-size:.88rem; font-weight:700; color:#0d1547; margin:0; }

.ng-tabs-wrap { background:#fff; border-radius:20px; border:1.5px solid #e8edf5; overflow:hidden; box-shadow:0 8px 32px rgba(13,21,71,.06); }
.ng-tabs-nav { display:flex; border-bottom:1.5px solid #e8edf5; overflow-x:auto; scrollbar-width:none; }
.ng-tabs-nav::-webkit-scrollbar { display:none; }
.ng-tab-btn {
  flex:1; min-width:130px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:22px 16px; font-size:.88rem; font-weight:700; color:#6b7a99;
  background:transparent; border:none; border-bottom:3px solid transparent;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.ng-tab-btn img { width:26px; height:26px; opacity:.5; transition:opacity .2s; }
.ng-tab-btn.active { color:#2196f3; border-bottom-color:#2196f3; background:#f0f8ff; }
.ng-tab-btn.active img { opacity:1; }
.ng-tab-btn:hover:not(.active) { color:#0d1547; background:#f8faff; }
.ng-tab-body { padding:56px 48px; }
.ng-tab-pane { display:none; }
.ng-tab-pane.active { display:block; }
.ng-tab-pane h2 { font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; color:#0d1547; margin-bottom:16px; line-height:1.2; }
.ng-tab-pane h3 { font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:800; color:#0d1547; margin-bottom:16px; line-height:1.2; }
.ng-tab-pane p { font-size:1rem; color:#6b7a99; line-height:1.8; }

.ng-faq-list { display:flex; flex-direction:column; gap:14px; max-width:800px; margin-left:auto; margin-right:auto; }
.ng-faq-item {
  background:#fff;
  border:1.5px solid #e8edf5;
  border-radius:16px;
  overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.ng-faq-item[open] { border-color:#bbdefb; box-shadow:0 6px 24px rgba(33,150,243,.1); }
.ng-section-alt .ng-faq-item { background:#fff; }
.ng-faq-item summary {
  padding:20px 24px;
  font-size:1rem; font-weight:700; color:#0d1547;
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  user-select:none;
}
.ng-faq-item summary::-webkit-details-marker { display:none; }
.ng-faq-item summary::after { content:'+'; font-size:1.4rem; color:#2196f3; font-weight:300; flex-shrink:0; transition:transform .25s; }
.ng-faq-item[open] summary::after { content:'−'; }
.ng-faq-item p { padding:0 24px 20px; margin:0; font-size:.95rem; color:#6b7a99; line-height:1.8; }

.ng-pricing-wrap {}
.ng-billing-pills {
  display:flex; align-items:center; justify-content:center; gap:8px;
  flex-wrap:wrap; margin-bottom:48px;
}
.ng-billing-pills input[type="radio"] { display:none; }
.ng-billing-pills label {
  padding:10px 24px; border-radius:50px;
  border:1.5px solid #e8edf5;
  font-size:.88rem; font-weight:700; color:#6b7a99;
  cursor:pointer; transition:all .2s;
  background:#fff;
}
.ng-billing-pills input[type="radio"]:checked + label { background:#2196f3; border-color:#2196f3; color:#fff; box-shadow:0 4px 14px rgba(33,150,243,.35); }

.ng-specs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ng-spec-card {
  background:#fff;
  border:1.5px solid #e8edf5;
  border-radius:18px;
  padding:28px 24px;
  text-align:center;
  transition:transform .22s,box-shadow .22s;
}
.ng-spec-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(13,21,71,.08); }
.ng-spec-card h5 { font-size:.85rem; color:#aab4c4; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:8px; }
.ng-spec-card p { font-size:1.15rem; font-weight:800; color:#0d1547; margin:0; }

.ng-counter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.ng-counter-card { text-align:center; }
.ng-counter-card .ng-count-num { font-size:clamp(2rem,4vw,3rem); font-weight:900; color:#fff; line-height:1; display:block; }
.ng-counter-card .ng-count-label { font-size:.9rem; color:rgba(255,255,255,.65); margin-top:8px; display:block; }

.ng-apps-strip { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center; }
.ng-app-logo {
  width:64px; height:64px;
  background:#fff;
  border:1.5px solid #e8edf5;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  padding:10px;
  transition:transform .2s,box-shadow .2s;
}
.ng-app-logo:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(13,21,71,.1); }
.ng-app-logo img { width:38px; height:38px; object-fit:contain; }

.ng-cta-section {
  padding:80px 0;
  background:linear-gradient(135deg,#060e24 0%,#0d1547 55%,#1565c0 100%);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.ng-cta-section::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 80% at 50% 50%,rgba(33,150,243,.18) 0%,transparent 70%);
  pointer-events:none;
}
.ng-cta-section .container { position:relative; z-index:1; }
.ng-cta-section h2 { font-size:clamp(1.7rem,3.5vw,2.8rem); font-weight:900; color:#fff; margin-bottom:16px; }
.ng-cta-section p { font-size:1.05rem; color:rgba(255,255,255,.75); margin-bottom:36px; max-width:560px; margin-left:auto; margin-right:auto; }
.ng-cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.ng-split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.ng-split-reverse { direction:rtl; }
.ng-split-reverse > * { direction:ltr; }
.ng-split-text h2 { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:900; color:#0d1547; margin-bottom:16px; line-height:1.25; }
.ng-section-dark .ng-split-text h2 { color:#fff; }
.ng-split-text p { font-size:1rem; color:#6b7a99; line-height:1.8; margin-bottom:20px; }
.ng-section-dark .ng-split-text p { color:rgba(255,255,255,.68); }
.ng-split-img { text-align:center; }
.ng-split-img img { max-width:100%; border-radius:16px; }

.ng-domain-search-bar { display:flex; gap:0; max-width:600px; background:#fff; border-radius:50px; overflow:hidden; border:2px solid rgba(33,150,243,.3); box-shadow:0 8px 28px rgba(0,0,0,.18); }
.ng-domain-search-bar form { display:flex; flex:1; width:100%; align-items:stretch; }
.ng-domain-search-bar input { flex:1; min-width:0; padding:16px 24px; border:none; outline:none; font-size:1rem; background:transparent; color:#0d1547; }
.ng-domain-search-bar button { flex-shrink:0; background:linear-gradient(135deg,#2196f3,#1565c0); color:#fff; border:none; padding:0 28px; font-weight:700; font-size:.95rem; cursor:pointer; transition:opacity .2s; white-space:nowrap; border-radius:0 50px 50px 0; }
.ng-domain-search-bar button:hover { opacity:.9; }
.ng-domain-tld-pills { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; justify-content:center; }
.ng-tld-pill { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:50px; padding:6px 16px; color:rgba(255,255,255,.85); font-size:.82rem; font-weight:600; }
.ng-domain-table-wrap { background:#fff; border-radius:20px; border:1.5px solid #e8edf5; overflow:hidden; box-shadow:0 8px 32px rgba(13,21,71,.06); }
.ng-domain-table-wrap table { width:100%; border-collapse:collapse; }
.ng-domain-table-wrap thead th { background:#f7f9fc; padding:14px 20px; font-size:.8rem; font-weight:800; color:#0d1547; text-transform:uppercase; letter-spacing:.07em; border-bottom:1.5px solid #e8edf5; }
.ng-domain-table-wrap tbody tr { border-bottom:1px solid #f0f4f8; transition:background .15s; }
.ng-domain-table-wrap tbody tr:last-child { border-bottom:none; }
.ng-domain-table-wrap tbody tr:hover { background:#f7f9fc; }
.ng-domain-table-wrap tbody td { padding:14px 20px; font-size:.92rem; color:#4a5568; }
.ng-domain-table-wrap tbody td:first-child { font-weight:700; color:#0d1547; }

.ng-policy-wrap { max-width:860px; margin:0 auto; }
.ng-policy-wrap h2 { font-size:1.5rem; font-weight:800; color:#0d1547; margin:40px 0 14px; }
.ng-policy-wrap h3 { font-size:1.15rem; font-weight:700; color:#0d1547; margin:28px 0 10px; }
.ng-policy-wrap p,.ng-policy-wrap li { font-size:.96rem; color:#4a5568; line-height:1.85; }
.ng-policy-wrap ul { padding-left:20px; margin-bottom:18px; }
.ng-policy-wrap a { color:#2196f3; }

@media (max-width:991px) {
  .ng-hero { padding:64px 0 56px; }
  .ng-section,.ng-section-alt,.ng-section-dark,.ng-cta-section { padding:64px 0; }
  .ng-features-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
  .ng-services-grid { grid-template-columns:repeat(3,1fr); }
  .ng-pricing-grid { grid-template-columns:repeat(2,1fr); }
  .ng-specs-grid { grid-template-columns:repeat(2,1fr); }
  .ng-counter-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
  .ng-split { grid-template-columns:1fr; gap:40px; }
  .ng-split-reverse { direction:ltr; }
  .ng-tab-body { padding:36px 28px; }
}
@media (max-width:575px) {
  .ng-hero h1 { font-size:1.75rem; }
  .ng-features-grid { grid-template-columns:1fr; }
  .ng-services-grid { grid-template-columns:repeat(2,1fr); }
  .ng-pricing-grid { grid-template-columns:1fr; }
  .ng-pricing-card.featured { transform:scale(1); }
  .ng-specs-grid { grid-template-columns:1fr 1fr; }
  .ng-counter-grid { grid-template-columns:1fr 1fr; }
  .ng-billing-pills label { padding:9px 18px; font-size:.8rem; }
  .ng-tab-btn { min-width:100px; font-size:.8rem; padding:16px 10px; }
  .ng-tab-body { padding:24px 16px; }
  .ng-domain-search-bar { flex-direction:column; border-radius:20px; }
  .ng-domain-search-bar form { flex-direction:column; }
  .ng-domain-search-bar input { border-radius:20px 20px 0 0; padding:16px 20px; }
  .ng-domain-search-bar button { padding:16px 24px; border-radius:0 0 20px 20px; font-size:1rem; width:100%; justify-content:center; display:flex; align-items:center; gap:8px; }
}

.ng-pricing-card ul li { font-size:.93rem; }
.ng-pricing-card ul p {
  font-size:.9rem; color:#4a5568; line-height:1.7; margin:0 0 10px;
}
.ng-pricing-card ul p:last-child { margin-bottom:0; }
.ng-pricing-card ul a {
  color:#1565c0; text-decoration:none; font-weight:500; word-break:break-word;
}
.ng-pricing-card ul a:hover { text-decoration:underline; }
.ng-pricing-card.featured ul p { color:rgba(255,255,255,.85); }
.ng-pricing-card.featured ul a { color:#90caf9; }

.ng-pricing-card .card-desc {
  font-size:.9rem; color:#4a5568; line-height:1.7;
  margin:0 0 24px; word-break:break-word;
}
.ng-pricing-card .card-desc li {
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:8px; font-size:.9rem; color:#4a5568; line-height:1.5;
}
.ng-pricing-card .card-desc li::before {
  content:'✓'; color:#2196f3; font-weight:900; font-size:.8rem;
  margin-top:3px; flex-shrink:0;
}
.ng-pricing-card.featured .card-desc { color:rgba(255,255,255,.85); }
.ng-pricing-card.featured .card-desc li { color:rgba(255,255,255,.85); }
.ng-pricing-card.featured .card-desc li::before { color:#90caf9; }
.ng-pricing-card.featured .card-desc a { color:#90caf9; }

.ng-pricing-card ul { word-break:break-word; }

.ng-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: end;
}

.ng-pricing-grid:has(> .ng-pricing-card:only-child) {
  grid-template-columns: minmax(280px, 420px);
  justify-content: center;
}
.ng-pricing-card:only-child {
  max-width: 420px;
  margin-inline: auto;
  width: 100%;
}

.ng-pricing-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 40px 32px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 2px 12px rgba(13,21,71,.05);
}

.ng-pricing-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 5px;
  background: var(--card-color, #e2e8f0);
  border-radius: 0 6px 6px 0;
}
.ng-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(13,21,71,.10);
}

.ng-pricing-card.featured {
  background: linear-gradient(150deg, #0d1547 0%, #1565c0 100%);
  border: none;
  box-shadow: 0 28px 64px rgba(13,21,71,.28);
  transform: translateY(-14px);
  z-index: 2;
}
.ng-pricing-card.featured::before {
  background: var(--card-color, #22c55e);
}
.ng-pricing-card.featured:hover {
  transform: translateY(-20px);
}

.ng-pricing-card .badge-featured {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-color, #22c55e);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 24px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

.ng-pricing-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
  text-transform: none;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.ng-pricing-card h3::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--card-color, #2196f3);
  box-shadow: 0 0 0 3px rgba(33,150,243,.18);
}
.ng-pricing-card.featured h3 {
  color: #fff;
}
.ng-pricing-card.featured h3::before {
  background: var(--card-color, #22c55e);
  box-shadow: 0 0 0 3px rgba(255,255,255,.2);
}

.ng-pricing-card .ng-price {
  font-size: 2.8rem;
  font-weight: 900;
  color: #0d1547;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 2px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ng-pricing-card.featured .ng-price { color: #fff; }
.ng-pricing-card .ng-price span {
  font-size: 1rem;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0;
}
.ng-pricing-card.featured .ng-price span { color: rgba(255,255,255,.55); }

.ng-pricing-card hr {
  border: none;
  border-top: 1px solid #eef2f8;
  margin: 24px 0;
}
.ng-pricing-card.featured hr { border-top-color: rgba(255,255,255,.12); }

.ng-pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex-grow: 1;
  word-break: break-word;
}
.ng-pricing-card ul li {
  font-size: .95rem;
  color: #475569;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  line-height: 1.55;
}
.ng-pricing-card ul li::before {
  content: '';
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #eff6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%232196f3' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.ng-pricing-card.featured ul li { color: rgba(255,255,255,.85); }
.ng-pricing-card.featured ul li::before {
  background: rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%2393c5fd' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.ng-pricing-card ul p { font-size:.93rem; color:#475569; margin:0 0 6px; line-height:1.6; }
.ng-pricing-card ul a { color:#1565c0; text-decoration:none; font-weight:500; }
.ng-pricing-card ul a:hover { text-decoration:underline; }
.ng-pricing-card.featured ul p { color:rgba(255,255,255,.82); }
.ng-pricing-card.featured ul a { color:#93c5fd; }

.ng-pricing-btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: 50px;
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(135deg, #1565c0, #2196f3);
  color: #fff !important;
  margin-top: 30px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(33,150,243,.28);
}
.ng-pricing-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(33,150,243,.42);
  color: #fff !important;
  text-decoration: none;
}
.ng-pricing-card.featured .ng-pricing-btn {
  background: #fff;
  color: #1565c0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.ng-pricing-card.featured .ng-pricing-btn:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  color: #1565c0 !important;
}

@media (max-width: 991px) {
  .ng-pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .ng-pricing-card.featured { transform: none; }
  .ng-pricing-card.featured:hover { transform: translateY(-6px); }
}
@media (max-width: 575px) {
  .ng-pricing-grid { grid-template-columns: 1fr; }
  .ng-pricing-card { padding: 36px 24px 28px; }
}

.ng-contact-card {
    border-radius: 20px;
    overflow: visible;
}
.ng-contact-form-body {
    padding: 48px;
}
.ng-feature-icon {
    margin: 0 auto 20px;
}
.ng-form-input {
    border-radius: 12px;
    padding: 12px 16px;
    border: 1.5px solid #e8edf5;
    font-size: 0.95rem;
}
.ng-form-textarea {
    height: 160px;
    resize: vertical;
}
.ng-btn-submit {
    border-radius: 12px;
    padding: 14px;
}
@media (max-width: 575px) {
    .ng-contact-form-body {
        padding: 28px 20px;
    }
}

.ng-trust-bar {
    background: #fff;
    border-top: 1px solid #e8edf5;
    border-bottom: 1px solid #e8edf5;
    padding: 28px 0;
}
.ng-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.ng-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ng-trust-num {
    font-size: 2rem;
    font-weight: 800;
    color: #0d1547;
    line-height: 1;
}
.ng-trust-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}
@media (max-width: 575px) {
    .ng-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .ng-trust-num  { font-size: 1.5rem; }
}

.ng-checklist { list-style: none; padding: 0; margin: 0; }
.ng-checklist li {
    padding: 6px 0 6px 28px;
    position: relative;
    color: #4a5568;
    font-size: 0.95rem;
}
.ng-checklist li::before {
    content: '\2713'; 
    position: absolute;
    left: 0;
    color: #1565c0;
    font-weight: 700;
}

.ng-tab-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
}

.ng-text-link {
    color: #2196f3;
    text-decoration: none;
    font-weight: 500;
}
.ng-text-link:hover {
    color: #1565c0;
    text-decoration: underline;
}

.ng-vps-tiers-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    width: 100%;
}

.ng-vps-group {
    padding: 28px 24px 24px;
    min-width: 0;
}

.ng-vps-group--shared    { flex: 1; }
.ng-vps-group--dedicated { flex: 1; }

.ng-vps-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.ng-vps-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #999;
    white-space: nowrap;
}

.ng-vps-group-cards {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.ng-vps-group-cards .ng-vps-ov-card {
    flex: 1;
}

.ng-vps-group-divider {
    width: 1px;
    background: #e4e4e4;
    flex-shrink: 0;
    margin: 20px 0;
}

.ng-vps-ov-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 32px 24px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.ng-vps-ov-card:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    border-color: #c5d8f5;
}

.ng-vps-ov-img-icon {
    width: 140px;
    height: 140px;
    object-fit: contain;
    margin-bottom: 16px;
    flex-shrink: 0;
    display: block;
}

.ng-vps-ov-sub {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin: 0 0 8px;
    letter-spacing: 0;
    text-transform: none;
}

.ng-vps-ov-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0d1547 !important;
    margin: 0 0 18px;
}

.ng-vps-ov-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    flex: 1;
    width: 100%;
    text-align: left;
}
.ng-vps-ov-list li {
    font-size: 0.9rem;
    color: #444;
    padding: 6px 0 6px 26px;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
}
.ng-vps-ov-list li:last-child { border-bottom: none; }
.ng-vps-ov-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 700;
    color: #9ca3af;
}

.ng-vps-ov-price {
    margin-bottom: 20px;
    text-align: center;
}
.ng-vps-ov-from {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #2196f3;
    margin-bottom: 4px;
    letter-spacing: 0;
    text-transform: lowercase;
}
.ng-vps-ov-amount {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    line-height: 1.1;
}
.ng-vps-ov-unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: #999;
    margin-left: 2px;
}

.ng-vps-ov-btn {
    display: block;
    text-align: center;
    padding: 11px 24px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    background: transparent;
    color: #111;
    border: 2px solid #d1d5db;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
    margin-top: auto;
}
.ng-vps-ov-btn:hover {
    background: #111;
    border-color: #111;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.ng-vps-ov-os {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 4px 12px;
    margin-bottom: 16px;
    letter-spacing: 0.3px;
}
.ng-vps-ov-os--linux {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}
.ng-vps-ov-os--both {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

.ng-vps-switch-row {
    display: flex;
    gap: 20px;
    max-width: 700px;
    margin: 0 auto;
}
.ng-vps-switch-row .ng-vps-ov-card {
    flex: 1;
}
@media (max-width: 640px) {
    .ng-vps-switch-row { flex-direction: column; }
}

@media (max-width: 991px) {
    .ng-vps-tiers-row {
        flex-direction: column;
        border-radius: 12px;
    }
    .ng-vps-group--shared,
    .ng-vps-group--dedicated { flex: none; width: 100%; }
    .ng-vps-group-divider {
        width: auto;
        height: 1px;
        margin: 0;
    }
    .ng-vps-group {
        padding: 20px 16px 16px;
    }
    .ng-vps-group-cards {
        gap: 12px;
    }
    
    .ng-vps-switch-row {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .ng-vps-group-cards {
        flex-direction: column;
    }
    .ng-vps-ov-img-icon {
        width: 100px;
        height: 100px;
    }
    .ng-vps-ov-card {
        padding: 24px 18px 20px;
    }
    .ng-vps-ov-list {
        text-align: left;
    }
    .ng-vps-switch-row {
        flex-direction: column;
    }
}

html[dir="rtl"] .ng-vps-group-cards    { flex-direction: row-reverse; }
html[dir="rtl"] .ng-vps-ov-list        { text-align: right; }
html[dir="rtl"] .ng-vps-ov-list li     { padding-left: 0; padding-right: 26px; }
html[dir="rtl"] .ng-vps-ov-list li::before { left: auto; right: 0; }
html[dir="rtl"] .ng-vps-ov-card        { text-align: right; }

nav.navbar.navbar-default #nav-ssl .navbar-nav > li > a {
    background: transparent !important;
    color: #2d3748 !important;
    font-weight: 500 !important;
    transition: color 0.15s ease, background 0.15s ease;
}
nav.navbar.navbar-default #nav-ssl .navbar-nav > li > a:hover,
nav.navbar.navbar-default #nav-ssl .navbar-nav > li > a:focus {
    background: rgba(22, 55, 83, 0.07) !important;
    color: #163753 !important;
}
nav.navbar.navbar-default #nav-ssl .navbar-nav > li.active > a,
nav.navbar.navbar-default #nav-ssl .navbar-nav > li.active > a:hover,
nav.navbar.navbar-default #nav-ssl .navbar-nav > li.active > a:focus {
    background: linear-gradient(135deg, #0d1547 0%, #1565c0 100%) !important;
    color: #ffffff !important;
    border-radius: 4px;
}

.dash-panels .dash-panel-list.list-group {
    border-top: none !important;
}
.dash-panels .dash-panel-list-item.list-group-item {
    padding: 12px 20px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
}

.dash-panels .dash-panel.card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
    margin-bottom: 20px !important;
}
.dash-panels .dash-panel-header.card-header {
    background: #fafbfd !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.dash-panels .dash-panel-body.card-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 16px 20px !important;
}
.dash-panels .dash-panel-footer.card-footer {
    background: #fafbfd !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 10px 20px !important;
}

.dash-panel-list-item .div-service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.dash-panel-list-item .div-service-status { flex-shrink: 0; }
.dash-panel-list-item .div-service-name   { flex: 1; min-width: 0; }
.dash-panel-list-item .div-service-name span { display: block; }
.dash-panel-list-item .div-service-name .text-domain {
    font-size: 12px;
    color: #64748b;
}

.dash-panels .dash-panel-list.list-group .dash-panel-list-item.list-group-item .div-service-buttons {
    display: flex !important;
    flex-shrink: 0;
    gap: 6px;
    align-items: center;
}

nav.navbar.navbar-default {
    background-color: #f7f9ff !important;
    border-color: #dce8ff !important;
    box-shadow: 0 2px 8px rgba(13,21,71,0.07) !important;
    border-radius: 0 0 10px 10px;
    margin-bottom: 24px !important;
}

/* =================================================================
   NG HOST VIP — DYNAMIC DARK MODE SYSTEM
   Time-based (Cairo / Africa/Cairo) · Manual toggle · Session-only
   ================================================================= */

/* ── Smooth transitions on all switchable elements ──────────────── */
body,
body .panel, body .card, body .panel-body, body .card-body,
body .panel-heading, body .card-header, body .panel-footer, body .card-footer,
body .table, body .table th, body .table td,
body .form-control, body input[type="text"], body input[type="email"],
body input[type="password"], body select, body textarea,
body .btn-default, body .list-group-item, body .well,
body .main-header, body .dropdown-menu, body .modal-content,
body .modal-header, body .modal-footer, body .breadcrumb,
body .pagination > li > a, body .page-link,
body .nav-tabs > li > a, body .tab-content,
body .alert, body nav.navbar.navbar-default {
    transition:
        background-color 0.30s ease,
        border-color     0.30s ease,
        color            0.25s ease,
        box-shadow       0.30s ease !important;
}

/* ── Dark Mode Toggle Button ────────────────────────────────────── */
html.ng-theme-switching,
html.ng-theme-switching *,
html.ng-theme-switching *::before,
html.ng-theme-switching *::after {
    transition: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

.ng-mode-picker {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.ng-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 70px;
    height: 34px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.18);
    cursor: pointer;
    padding: 0 10px 0 30px;
    flex-shrink: 0;
    vertical-align: middle;
    position: relative;
    color: rgba(255,255,255,0.75);
    transition: background 0.22s ease, border-color 0.22s ease,
                transform 0.22s ease, box-shadow 0.22s ease;
}
body.light-mode .ng-mode-toggle,
body:not(.dark-mode) .ng-mode-toggle {
    background: #ffffff;
    border-color: #d8e2ef;
    color: #1565c0;
    box-shadow: 0 1px 3px rgba(13,21,71,0.08);
}
body.light-mode .ng-mode-toggle:hover,
body:not(.dark-mode) .ng-mode-toggle:hover {
    background: #eaf4ff;
    border-color: #90caf9;
    color: #0d47a1;
    box-shadow: 0 5px 14px rgba(33,150,243,0.22);
}
.ng-mode-toggle:hover {
    background: rgba(56,139,253,0.15);
    border-color: #388bfd;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(56,139,253,0.30);
}
.ng-mode-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(56,139,253,0.30); }
.ng-mode-toggle svg {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 10px;
    transition: transform 0.30s ease, opacity 0.30s ease;
    stroke: currentColor;
}
.ng-mode-label {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}
.ng-mode-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 116px;
    padding: 6px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #d8e2ef;
    box-shadow: 0 14px 36px rgba(13,21,71,0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    z-index: 10000;
}
.ng-mode-picker.open .ng-mode-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ng-mode-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    color: #475569;
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}
.ng-mode-menu button:hover,
.ng-mode-menu button.active {
    background: #eaf4ff;
    color: #1565c0;
}
body.dark-mode .ng-mode-menu {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}
body.dark-mode .ng-mode-menu button {
    color: #c9d1d9;
}
body.dark-mode .ng-mode-menu button:hover,
body.dark-mode .ng-mode-menu button.active {
    background: #1f3a5f;
    color: #ffffff;
}
[dir="rtl"] .ng-mode-toggle {
    padding: 0 30px 0 10px;
}
[dir="rtl"] .ng-mode-toggle svg {
    left: auto;
    right: 10px;
}
[dir="rtl"] .ng-mode-menu {
    right: auto;
    left: 0;
}
/* Light mode: moon visible, sun hidden */
.ng-mode-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.4); }
.ng-mode-toggle .icon-moon { opacity: 1; transform: rotate(0deg)  scale(1);   }
/* Dark mode: sun visible, moon hidden */
body.dark-mode .ng-mode-toggle .icon-sun  { opacity: 1; transform: rotate(0deg)   scale(1);   }
body.dark-mode .ng-mode-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.4); }
/* Tooltip */
.ng-mode-toggle::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0d1117;
    color: #e6edf3;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 5px;
    border: 1px solid #30363d;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    font-weight: 500;
    letter-spacing: 0.01em;
    z-index: 9999;
}
.ng-mode-toggle:hover::after { opacity: 1; }

/* RTL tooltip fix */
[dir="rtl"] .ng-mode-toggle::after { left: auto; right: 50%; transform: translateX(50%); }

/* ══════════════════════════════════════════════════════════════════
   ANTI-FOUC: neutral dark background from the very first frame
   ──────────────────────────────────────────────────────────────────
   header.tpl <head> script adds 'ng-dm-pending' to <html> instantly.
   These rules fire immediately (before footer script runs) to colour
   the body and every top-level container dark — so no white appears.
   footer.tpl's inline initMode() removes 'ng-dm-pending' and adds
   'dark-mode' to <body> → all body.dark-mode rules take over.
   ══════════════════════════════════════════════════════════════════ */
html.ng-dm-pending,
html.ng-dm-pending body {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
}
/* Cover every direct child of body (nav, header, main sections, footer…) */
html.ng-dm-pending body > * {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
}
/* Key layout wrappers one level deeper */
html.ng-dm-pending .top-bar,
html.ng-dm-pending .navbar,
html.ng-dm-pending nav,
html.ng-dm-pending header,
html.ng-dm-pending .panel,
html.ng-dm-pending .card,
html.ng-dm-pending .ng-hero,
html.ng-dm-pending .ng-section,
html.ng-dm-pending .ng-section-alt,
html.ng-dm-pending .ng-cta-section,
html.ng-dm-pending .ng-pricing-card,
html.ng-dm-pending .ng-feature-card,
html.ng-dm-pending .sidebar,
html.ng-dm-pending .container,
html.ng-dm-pending .container-fluid,
html.ng-dm-pending footer {
    background-color: #0d1117 !important;
}

/* ── Dark Mode — CSS Variable Overrides ─────────────────────────── */
body.dark-mode {
    --primary:             #388bfd;
    --primary-dark:        #1f6feb;
    --primary-darker:      #1158c7;
    --primary-light:       #1f3a5f;
    --border-primary-light: #264f8a;
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    color-scheme: dark;
}

/* ── Main Header (logo + cart row) ─────────────────────────────── */
body.dark-mode .main-header {
    background: #0d1117 !important;
    border-bottom-color: #21262d !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
}
body.dark-mode .header-support ul.support-item-web .call-no { color: #8b949e !important; }
body.dark-mode .header-support ul.support-item-web .call-no strong { color: #e6edf3 !important; }
body.dark-mode .main-header .header-support .cart-icon {
    background: #1f3a5f !important;
    border-color: #264f8a !important;
}
body.dark-mode .main-header .header-support .cart-icon:hover {
    background: #264f8a !important;
    border-color: #388bfd !important;
    box-shadow: 0 6px 18px rgba(56,139,253,0.25) !important;
}
body.dark-mode .main-header .header-support .cart-icon .count {
    border-color: #0d1117 !important;
}

/* ── Top Bar ────────────────────────────────────────────────────── */
body.dark-mode .top-bar {
    background: #080b0f !important;
    border-bottom-color: #21262d !important;
}
body.dark-mode .top-bar-dropdown button { color: rgba(255,255,255,0.55) !important; }
body.dark-mode .top-bar-dropdown .dropdown-menu {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
}
body.dark-mode .top-bar-dropdown .dropdown-menu li a { color: #c9d1d9 !important; }
body.dark-mode .top-bar-dropdown .dropdown-menu li a:hover {
    background: #21262d !important;
    color: #388bfd !important;
}

/* ── Navbar Dropdown (mega-menu / sub-menu) ─────────────────────── */
body.dark-mode .navbar .dropdown ul,
body.dark-mode .navbar .menu-item,
body.dark-mode .navbar .megamenu {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.65) !important;
}
body.dark-mode .navbar .menu-item a,
body.dark-mode .navbar .megamenu .mega-menu-item a { color: #c9d1d9 !important; border-color: #21262d !important; }
body.dark-mode .navbar .menu-item a:hover,
body.dark-mode .navbar .megamenu .mega-menu-item a:hover {
    background: #21262d !important;
    border-color: #388bfd !important;
    color: #79b8ff !important;
}
body.dark-mode .navbar .menu-item a i,
body.dark-mode .navbar .megamenu .mega-menu-item a i {
    background: #1f3a5f !important;
    color: #388bfd !important;
}
body.dark-mode .navbar .menu-item a:hover i,
body.dark-mode .navbar .megamenu .mega-menu-item a:hover i {
    background: linear-gradient(135deg,#388bfd,#1f6feb) !important;
    color: #fff !important;
}
body.dark-mode .navbar .menu-item a .info .heading { color: #e6edf3 !important; }
body.dark-mode .navbar .menu-item a .info .content { color: #8b949e !important; }

/* ── WHMCS Client Area Navbar (nav.navbar.navbar-default) ────────── */
body.dark-mode nav.navbar.navbar-default {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
body.dark-mode nav.navbar.navbar-default .navbar-nav > li > a {
    color: #c9d1d9 !important;
}
body.dark-mode nav.navbar.navbar-default .navbar-nav > li > a:hover,
body.dark-mode nav.navbar.navbar-default .navbar-nav > li.active > a {
    color: #388bfd !important;
    background-color: #1f3a5f !important;
}
body.dark-mode nav.navbar.navbar-default .navbar-nav > .open > a,
body.dark-mode nav.navbar.navbar-default .navbar-nav > .open > a:hover {
    background-color: #21262d !important;
    color: #388bfd !important;
}

/* ── Language Popup ─────────────────────────────────────────────── */
body.dark-mode .theme-language-popup { background-color: rgba(8,11,15,0.96) !important; }
body.dark-mode .theme-language-popup .inner { background-color: #161b22 !important; border-color: #30363d !important; }
body.dark-mode .theme-language-popup .country-list li a { color: #c9d1d9 !important; border-color: #21262d !important; }
body.dark-mode .theme-language-popup .country-list li a:hover { background: #21262d !important; color: #388bfd !important; }

/* ── Page Background & Content ──────────────────────────────────── */
body.dark-mode #main-body,
body.dark-mode .content-wrapper,
body.dark-mode section.content,
body.dark-mode .clientarea-wrap { background-color: #0d1117 !important; }

/* ── Panels / Cards ─────────────────────────────────────────────── */
body.dark-mode .panel,
body.dark-mode .card {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}
body.dark-mode .panel-body,
body.dark-mode .card-body { background-color: #161b22 !important; color: #e6edf3 !important; }
body.dark-mode .panel-default > .panel-heading,
body.dark-mode .card-header {
    background-color: #21262d !important;
    border-bottom-color: #30363d !important;
    color: #e6edf3 !important;
}
body.dark-mode .panel-default > .panel-heading .panel-title,
body.dark-mode .card-header .card-title { color: #e6edf3 !important; }
body.dark-mode .panel-footer,
body.dark-mode .card-footer {
    background-color: #1a1f28 !important;
    border-top-color: #30363d !important;
    color: #8b949e !important;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
body.dark-mode .sidebar { background-color: #13181f !important; }
body.dark-mode .sidebar .list-group-item {
    background-color: #13181f !important;
    border-color: #1e2530 !important;
    color: #c9d1d9 !important;
}
body.dark-mode .sidebar .list-group-item:hover,
body.dark-mode .sidebar .list-group-item:focus {
    background-color: #1c2330 !important;
    color: #388bfd !important;
    border-left-color: #388bfd !important;
}
body.dark-mode .sidebar .list-group-item.active,
body.dark-mode .sidebar .list-group-item.active:focus,
body.dark-mode .sidebar .list-group-item.active:hover {
    background-color: #1f3a5f !important;
    border-left-color: #388bfd !important;
    color: #79b8ff !important;
}
/* Sidebar panel headers stay branded */
body.dark-mode #order-standard_cart .card-header,
body.dark-mode #order-standard_cart .panel-heading,
body.dark-mode .sidebar .card-header,
body.dark-mode .sidebar .panel-heading {
    background: linear-gradient(135deg,#0d2952 0%,#1565c0 100%) !important;
}

/* ── Order Cart Sidebar Items ───────────────────────────────────── */
body.dark-mode #order-standard_cart .list-group-item,
body.dark-mode #order-standard_cart .list-group-item a,
body.dark-mode #order-standard_cart .cart-sidebar a {
    color: #c9d1d9 !important;
    background-color: #161b22 !important;
}
body.dark-mode #order-standard_cart .list-group-item:hover,
body.dark-mode #order-standard_cart .list-group-item a:hover,
body.dark-mode #order-standard_cart .cart-sidebar a:hover {
    color: #388bfd !important;
    background-color: #21262d !important;
}
body.dark-mode #order-standard_cart .list-group-item.active {
    background: linear-gradient(90deg,#1f3a5f 0%,#21262d 100%) !important;
    border-left: 3px solid #388bfd !important;
    color: #79b8ff !important;
}

/* ── Tables ─────────────────────────────────────────────────────── */
body.dark-mode .table { color: #e6edf3 !important; border-color: #30363d !important; }
body.dark-mode .table th,
body.dark-mode .table thead th {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark-mode .table td { border-color: #21262d !important; color: #e6edf3 !important; }
body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.025) !important; }
body.dark-mode .table-hover tbody tr:hover { background-color: rgba(56,139,253,0.07) !important; }
body.dark-mode .table-bordered,
body.dark-mode .table-bordered td,
body.dark-mode .table-bordered th { border-color: #30363d !important; }

/* ── Forms ──────────────────────────────────────────────────────── */
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}
body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    background-color: #0d1117 !important;
    border-color: #388bfd !important;
    color: #e6edf3 !important;
    box-shadow: 0 0 0 3px rgba(56,139,253,0.18) !important;
}
body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder { color: #656d76 !important; }
body.dark-mode .input-group-addon,
body.dark-mode .input-group-text {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark-mode label,
body.dark-mode .form-group label { color: #c9d1d9 !important; }
body.dark-mode .help-block,
body.dark-mode .form-text { color: #8b949e !important; }
body.dark-mode .checkbox label,
body.dark-mode .radio label { color: #c9d1d9 !important; }

/* ── Buttons ────────────────────────────────────────────────────── */
body.dark-mode .btn-default {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .btn-default:hover {
    background-color: #30363d !important;
    color: #e6edf3 !important;
}
body.dark-mode .btn-link { color: #388bfd !important; }
body.dark-mode .btn-link:hover { color: #79b8ff !important; }
body.dark-mode .btn-danger {
    background-color: #da3633 !important;
    border-color: #b91c1c !important;
}
body.dark-mode .btn-warning {
    background-color: #d29922 !important;
    border-color: #b07d11 !important;
    color: #0d1117 !important;
}

/* ── Alerts ─────────────────────────────────────────────────────── */
body.dark-mode .alert-success {
    background-color: #0d2919 !important;
    border-color: #2ea043 !important;
    color: #3fb950 !important;
}
body.dark-mode .alert-info {
    background-color: #1a3050 !important;
    border-color: #388bfd !important;
    color: #79b8ff !important;
}
body.dark-mode .alert-warning {
    background-color: #271c09 !important;
    border-color: #d29922 !important;
    color: #e3b341 !important;
}
body.dark-mode .alert-danger {
    background-color: #300e0e !important;
    border-color: #f85149 !important;
    color: #f85149 !important;
}
body.dark-mode .alert .close { color: inherit !important; opacity: 0.65 !important; }

/* ── Badges / Labels ────────────────────────────────────────────── */
body.dark-mode .badge-default,
body.dark-mode .label-default { background-color: #30363d !important; color: #8b949e !important; }
body.dark-mode .badge-success,
body.dark-mode .label-success,
body.dark-mode .label.status-active,
body.dark-mode span.status-active,
body.dark-mode .label.status-completed,
body.dark-mode span.status-completed {
    background-color: #0d2919 !important;
    color: #3fb950 !important;
    border: 1px solid #2ea043 !important;
}
body.dark-mode .badge-warning,
body.dark-mode .label-warning,
body.dark-mode .label.status-pending,
body.dark-mode span.status-pending {
    background-color: #271c09 !important;
    color: #e3b341 !important;
    border: 1px solid #d29922 !important;
}
body.dark-mode .badge-danger,
body.dark-mode .label-danger,
body.dark-mode .label.status-terminated,
body.dark-mode .label.status-cancelled,
body.dark-mode span.status-terminated,
body.dark-mode span.status-cancelled {
    background-color: #300e0e !important;
    color: #f85149 !important;
    border: 1px solid #da3633 !important;
}
body.dark-mode .badge-info,
body.dark-mode .label-info {
    background-color: #1a3050 !important;
    color: #79b8ff !important;
    border: 1px solid #388bfd !important;
}
body.dark-mode .label.status-suspended,
body.dark-mode span.status-suspended {
    background-color: #2a1800 !important;
    color: #f0883e !important;
    border: 1px solid #c56d13 !important;
}
/* Override existing brand-colored status badges in dark mode */
body.dark-mode #tableServicesList .status.status-active { background: #0d2919 !important; color: #3fb950 !important; border-color: #2ea043 !important; }
body.dark-mode #tableServicesList .status.status-completed { background: #0d2919 !important; color: #3fb950 !important; }
body.dark-mode #tableServicesList .status.status-suspended { background: #2a1800 !important; color: #f0883e !important; }
body.dark-mode #tableServicesList .status.status-terminated,
body.dark-mode #tableServicesList .status.status-cancelled { background: #300e0e !important; color: #f85149 !important; }
body.dark-mode #tableServicesList .status.status-pending { background: #271c09 !important; color: #e3b341 !important; }

/* ── Modals ─────────────────────────────────────────────────────── */
body.dark-mode .modal-content {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.75) !important;
}
body.dark-mode .modal-header {
    background-color: #21262d !important;
    border-bottom-color: #30363d !important;
    color: #e6edf3 !important;
}
body.dark-mode .modal-title { color: #e6edf3 !important; }
body.dark-mode .modal-footer { background-color: #21262d !important; border-top-color: #30363d !important; }
body.dark-mode .modal-body { color: #c9d1d9 !important; }
body.dark-mode .close { color: #8b949e !important; text-shadow: none !important; opacity: 0.8; }
body.dark-mode .close:hover { color: #e6edf3 !important; opacity: 1; }

/* ── Dropdowns (Bootstrap) ──────────────────────────────────────── */
body.dark-mode .dropdown-menu {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
body.dark-mode .dropdown-menu > li > a,
body.dark-mode .dropdown-item { color: #c9d1d9 !important; }
body.dark-mode .dropdown-menu > li > a:hover,
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus { background-color: #21262d !important; color: #388bfd !important; }
body.dark-mode .dropdown-divider,
body.dark-mode .divider { border-color: #21262d !important; }

/* ── List Groups ────────────────────────────────────────────────── */
body.dark-mode .list-group-item {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .list-group-item:hover { background-color: #21262d !important; color: #e6edf3 !important; }
body.dark-mode .list-group-item.active {
    background-color: #1f3a5f !important;
    border-color: #388bfd !important;
    color: #79b8ff !important;
}

/* ── Wells ──────────────────────────────────────────────────────── */
body.dark-mode .well {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
    box-shadow: none !important;
}

/* ── Tabs ───────────────────────────────────────────────────────── */
body.dark-mode .nav-tabs { border-bottom-color: #30363d !important; }
body.dark-mode .nav-tabs > li > a,
body.dark-mode .nav-tabs .nav-link { color: #8b949e !important; border-color: transparent !important; }
body.dark-mode .nav-tabs > li > a:hover,
body.dark-mode .nav-tabs .nav-link:hover {
    color: #c9d1d9 !important;
    border-color: #30363d !important;
    background-color: #21262d !important;
}
body.dark-mode .nav-tabs > li.active > a,
body.dark-mode .nav-tabs .nav-link.active {
    background-color: #161b22 !important;
    border-color: #30363d #30363d #161b22 !important;
    color: #e6edf3 !important;
}
body.dark-mode .tab-content {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    border-top: none !important;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
body.dark-mode .breadcrumb { background-color: #161b22 !important; border-color: #21262d !important; }
body.dark-mode .breadcrumb > li + li::before,
body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #656d76 !important; }
body.dark-mode .breadcrumb a,
body.dark-mode .breadcrumb-item a { color: #388bfd !important; }
body.dark-mode .breadcrumb-item.active { color: #8b949e !important; }

/* ── Pagination ─────────────────────────────────────────────────── */
body.dark-mode .pagination > li > a,
body.dark-mode .page-link {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #388bfd !important;
}
body.dark-mode .pagination > li > a:hover,
body.dark-mode .page-link:hover {
    background-color: #21262d !important;
    border-color: #388bfd !important;
    color: #79b8ff !important;
}
body.dark-mode .pagination > .active > a,
body.dark-mode .page-item.active .page-link {
    background-color: #388bfd !important;
    border-color: #388bfd !important;
    color: #fff !important;
}
body.dark-mode .pagination > .disabled > a,
body.dark-mode .page-item.disabled .page-link {
    background-color: #0d1117 !important;
    border-color: #21262d !important;
    color: #656d76 !important;
}

/* ── Progress Bar ───────────────────────────────────────────────── */
body.dark-mode .progress { background-color: #21262d !important; }

/* ── Popovers ───────────────────────────────────────────────────── */
body.dark-mode .popover { background-color: #161b22 !important; border-color: #30363d !important; }
body.dark-mode .popover-header { background-color: #21262d !important; border-bottom-color: #30363d !important; color: #e6edf3 !important; }
body.dark-mode .popover-body { color: #c9d1d9 !important; }
body.dark-mode .tooltip-inner { background-color: #388bfd !important; }

/* ── Verification Banner ────────────────────────────────────────── */
body.dark-mode .verification-banner { background-color: #1a3050 !important; border-bottom-color: #264f8a !important; color: #79b8ff !important; }
body.dark-mode .verification-banner.success { background-color: #0d2919 !important; border-bottom-color: #2ea043 !important; color: #3fb950 !important; }

/* ── Dashboard Stats ────────────────────────────────────────────── */
body.dark-mode .stat-box,
body.dark-mode .stat-card,
body.dark-mode .welcome-box,
body.dark-mode .dash-panel {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}
body.dark-mode .dash-panel-list-item { border-color: #21262d !important; }
body.dark-mode .dash-panel-list-item:hover { background-color: #1c2330 !important; }
body.dark-mode .dash-panel-list-item .div-service-name span { color: #e6edf3 !important; }
body.dark-mode .dash-panel-list-item .div-service-name .text-domain { color: #8b949e !important; }

/* ── Pricing Cards ──────────────────────────────────────────────── */
body.dark-mode .pricing-item {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.4) !important;
}
body.dark-mode .pricing-item:hover {
    box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important;
    border-color: #388bfd !important;
}
body.dark-mode .pricing-item .pricing_body ul li::before {
    background: #1f3a5f !important;
    color: #388bfd !important;
}

/* ── Typography & Utilities ─────────────────────────────────────── */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e6edf3 !important; }
body.dark-mode p { color: #c9d1d9 !important; }
body.dark-mode a:not(.btn):not(.nav-link):not(.list-group-item):not(.dropdown-item):not(.ng-mode-toggle) {
    color: #388bfd;
}
body.dark-mode a:not(.btn):not(.nav-link):not(.list-group-item):not(.dropdown-item):not(.ng-mode-toggle):hover {
    color: #79b8ff;
}
body.dark-mode .text-muted { color: #8b949e !important; }
body.dark-mode .text-dark  { color: #c9d1d9 !important; }
body.dark-mode small,
body.dark-mode .small { color: #8b949e !important; }
body.dark-mode hr { border-color: #21262d !important; }

/* ── Scrollbar ──────────────────────────────────────────────────── */
body.dark-mode * { scrollbar-color: #388bfd #21262d; }
body.dark-mode ::-webkit-scrollbar-track { background-color: #21262d !important; }
body.dark-mode ::-webkit-scrollbar-thumb { background-color: #388bfd !important; }

/* ── Footer ─────────────────────────────────────────────────────── */
body.dark-mode .footer-main {
    background-color: #080b0f !important;
    border-top: 1px solid #21262d !important;
}
body.dark-mode .footer-main .footer-list h5 { color: #e6edf3 !important; }
body.dark-mode .footer-main .footer-list a { color: #8b949e !important; }
body.dark-mode .footer-main .footer-list a:hover { color: #388bfd !important; }
body.dark-mode .footer-main .border-top,
body.dark-mode .footer-main .border-bottom { border-color: #21262d !important; }
body.dark-mode .footer-main .copyright-text { color: #656d76 !important; }
body.dark-mode .footer-main .footer-legal-link { color: #8b949e !important; }
body.dark-mode .footer-main .footer-legal-link:hover { color: #388bfd !important; }
body.dark-mode .footer-legal-sep { color: #30363d !important; }
body.dark-mode .footer-social-media svg path { fill: #8b949e !important; }
body.dark-mode .footer-social-media a:hover svg path { fill: #388bfd !important; }

/* ── Scroll to Top ──────────────────────────────────────────────── */
body.dark-mode #scrolltoTop { background-color: #388bfd !important; color: #fff !important; }

/* ── Bootstrap Switch ───────────────────────────────────────────── */
body.dark-mode .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background-color: #30363d !important;
    color: #8b949e !important;
}

/* ── Invoice View ───────────────────────────────────────────────── */
body.dark-mode .invoice-table th { background-color: #21262d !important; color: #8b949e !important; }
body.dark-mode .invoice-table td { border-color: #21262d !important; color: #c9d1d9 !important; }

/* =================================================================
   CUSTOM TEMPLATE SECTIONS — NG HOST VIP specific classes
   ================================================================= */

/* ── Page Sections ──────────────────────────────────────────────── */
body.dark-mode .ng-section {
    background-color: #0d1117 !important;
}
body.dark-mode .ng-section-alt {
    background-color: #080b0f !important;
}
/* Text inside sections */
body.dark-mode .ng-section h1,  body.dark-mode .ng-section h2,
body.dark-mode .ng-section h3,  body.dark-mode .ng-section h4,
body.dark-mode .ng-section h5,  body.dark-mode .ng-section h6,
body.dark-mode .ng-section-alt h1, body.dark-mode .ng-section-alt h2,
body.dark-mode .ng-section-alt h3, body.dark-mode .ng-section-alt h4,
body.dark-mode .ng-section-alt h5, body.dark-mode .ng-section-alt h6 {
    color: #e6edf3 !important;
}
body.dark-mode .ng-section p,
body.dark-mode .ng-section-alt p { color: #c9d1d9 !important; }

/* ── Section Tag / Badge ────────────────────────────────────────── */
body.dark-mode .ng-section-tag {
    background-color: #1f3a5f !important;
    border-color: #388bfd !important;
    color: #79b8ff !important;
}

/* ── Service Items (icon cards) ─────────────────────────────────── */
body.dark-mode .ng-service-item {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
body.dark-mode .ng-service-item:hover {
    background-color: #1c2330 !important;
    border-color: #388bfd !important;
    box-shadow: 0 8px 24px rgba(56,139,253,0.18) !important;
}
body.dark-mode .ng-service-item h3,
body.dark-mode .ng-service-item h4 { color: #e6edf3 !important; }
body.dark-mode .ng-service-item p   { color: #8b949e !important; }
body.dark-mode .ng-service-item .icon,
body.dark-mode .ng-service-item i {
    background: #1f3a5f !important;
    color: #388bfd !important;
}

/* ── Feature Cards ──────────────────────────────────────────────── */
body.dark-mode .ng-feature-card {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
body.dark-mode .ng-feature-card:hover {
    border-color: #388bfd !important;
    box-shadow: 0 8px 28px rgba(56,139,253,0.18) !important;
}
body.dark-mode .ng-feature-card h3,
body.dark-mode .ng-feature-card h4,
body.dark-mode .ng-feature-card h5 { color: #e6edf3 !important; }
body.dark-mode .ng-feature-card p   { color: #8b949e !important; }
body.dark-mode .ng-feature-card .icon,
body.dark-mode .ng-feature-card i {
    background: #1f3a5f !important;
    color: #388bfd !important;
}

/* ── Tabs Wrapper & Buttons ─────────────────────────────────────── */
body.dark-mode .ng-tabs-wrap {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}
body.dark-mode .ng-tab-btn {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark-mode .ng-tab-btn:hover,
body.dark-mode .ng-tab-btn.active {
    background-color: #1f3a5f !important;
    border-color: #388bfd !important;
    color: #79b8ff !important;
}
body.dark-mode .ng-tab-content { background-color: #161b22 !important; }

/* ── FAQ Items ──────────────────────────────────────────────────── */
body.dark-mode .ng-faq-item,
body.dark-mode details.ng-faq-item {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}
body.dark-mode .ng-faq-item summary,
body.dark-mode details.ng-faq-item > summary {
    color: #e6edf3 !important;
    background-color: #161b22 !important;
}
body.dark-mode .ng-faq-item summary:hover { color: #388bfd !important; }
body.dark-mode .ng-faq-item[open] summary { color: #388bfd !important; }
body.dark-mode .ng-faq-item .answer,
body.dark-mode details.ng-faq-item p { color: #8b949e !important; }

/* ── Language Popup Content Wrap ────────────────────────────────── */
body.dark-mode .content-wrap {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

/* ── Decorative Lines ───────────────────────────────────────────── */
body.dark-mode .lines { background-color: #30363d !important; }
body.dark-mode .lines span { background-color: #388bfd !important; }

/* ── Swiper / Review Slider ─────────────────────────────────────── */
body.dark-mode .swiper-button-next,
body.dark-mode .swiper-button-prev {
    background-color: #21262d !important;
    color: #388bfd !important;
    border-color: #30363d !important;
}
body.dark-mode .swiper-button-next:hover,
body.dark-mode .swiper-button-prev:hover {
    background-color: #388bfd !important;
    color: #fff !important;
}
body.dark-mode .swiper-pagination-bullet { background: #30363d !important; }
body.dark-mode .swiper-pagination-bullet-active { background: #388bfd !important; }

/* ── Review / Testimonial Dots ──────────────────────────────────── */
body.dark-mode .rv-spot-dot {
    background-color: #30363d !important;
    border-color: #30363d !important;
}
body.dark-mode .rv-spot-dot.active,
body.dark-mode .rv-spot-dot:hover { background-color: #388bfd !important; }

/* ── Review Cards ───────────────────────────────────────────────── */
body.dark-mode .ng-review-card,
body.dark-mode .ng-review-item,
body.dark-mode [class*="review-card"],
body.dark-mode [class*="testimonial"] {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

/* ── Domain Search Box ──────────────────────────────────────────── */
body.dark-mode .domain-search-box,
body.dark-mode .domain-search-wrap,
body.dark-mode [class*="domain-search"] {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

/* ── Counters / Stats Section ───────────────────────────────────── */
body.dark-mode .ng-counter-box,
body.dark-mode .ng-stats-section,
body.dark-mode [class*="counter"],
body.dark-mode [class*="stat-"] {
    background-color: transparent !important;
}
body.dark-mode .ng-counter-box h2,
body.dark-mode .ng-counter-box .count { color: #388bfd !important; }
body.dark-mode .ng-counter-box p,
body.dark-mode .ng-counter-box span   { color: #8b949e !important; }

/* ── Plan / Hosting Cards ───────────────────────────────────────── */
body.dark-mode .ng-plan-card,
body.dark-mode .ng-hosting-item,
body.dark-mode [class*="plan-card"],
body.dark-mode [class*="hosting-item"] {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

/* ── Section Titles inside any section ─────────────────────────── */
body.dark-mode .section-title,
body.dark-mode .ng-section-title  { color: #e6edf3 !important; }
body.dark-mode .section-subtitle,
body.dark-mode .ng-section-subtitle { color: #8b949e !important; }

/* ── Testimonials / Reviews Section ────────────────────────────── */
body.dark-mode .testmonilas-section,
body.dark-mode .testimonials-section,
body.dark-mode [class*="testmonial"],
body.dark-mode [class*="testimonial"] {
    background-image: none !important;
    background-color: #080b0f !important;
}
/* Slider prev/next buttons */
body.dark-mode button[id$="-prev"],
body.dark-mode button[id$="-next"],
body.dark-mode [id$="-prev"],
body.dark-mode [id$="-next"] {
    background-color: #21262d !important;
    color: #388bfd !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
body.dark-mode button[id$="-prev"] *,
body.dark-mode button[id$="-next"] * { color: #388bfd !important; fill: #388bfd !important; }
/* section-gap generic */
body.dark-mode .section-gap {
    background-image: none !important;
}

/* ── Mobile Nav Overlay ─────────────────────────────────────────── */
body.dark-mode .mobile-nav {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
}
body.dark-mode .mobile-nav li a { color: #c9d1d9 !important; }
body.dark-mode .mobile-nav li a:hover { color: #388bfd !important; }

/* ── Global catch-all: any remaining white bg inside dark-mode ──── */
body.dark-mode section:not([class*="hero"]):not([class*="banner"]) {
    background-color: inherit;
}

/* =================================================================
   LOGO SWAP — colored in light mode, white in dark mode
   FOUC-safe: html.ng-dm-pending hides light logo before body.dark-mode
   ================================================================= */
.logo-dark { display: none !important; }
html.ng-dm-pending .logo-dark,
body.dark-mode .logo-dark { display: inline-block !important; }
html.ng-dm-pending .logo-light,
body.dark-mode .logo-light { display: none !important; }

/* =================================================================
   MOBILE NAV TOGGLE (hamburger / X icon)
   ================================================================= */
body.dark-mode .mobile-nav-toggle { color: #e6edf3 !important; }
body.dark-mode i.mobile-nav-toggle { color: #e6edf3 !important; }

/* =================================================================
   STICKY NAVBAR (.header) — dark background
   ================================================================= */
body.dark-mode .header {
    background-color: #161b22 !important;
    border-bottom: 1px solid #21262d !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
}
body.dark-mode .header .navbar > ul > li > a { color: #c9d1d9 !important; }
body.dark-mode .header .navbar > ul > li > a:hover,
body.dark-mode .header .navbar > ul > li.active > a,
body.dark-mode .header .navbar > ul > li.menu-account-btn > a { color: #e6edf3 !important; }

/* =================================================================
   REDUCE BLUE ACCENTS — subtler icon backgrounds, neutral cart
   ================================================================= */

/* Service item icons */
body.dark-mode .ng-service-item .icon,
body.dark-mode .ng-service-item > i {
    background: rgba(56,139,253,0.10) !important;
    color: #388bfd !important;
}

/* Feature card icons */
body.dark-mode .ng-feature-card .icon,
body.dark-mode .ng-feature-card > i {
    background: rgba(56,139,253,0.10) !important;
    color: #388bfd !important;
}

/* Navbar mega-menu icons — less saturated */
body.dark-mode .navbar .menu-item a i,
body.dark-mode .navbar .megamenu .mega-menu-item a i {
    background: rgba(56,139,253,0.10) !important;
    color: #388bfd !important;
}
body.dark-mode .navbar .menu-item a:hover i,
body.dark-mode .navbar .megamenu .mega-menu-item a:hover i {
    background: rgba(56,139,253,0.20) !important;
    color: #79b8ff !important;
}

/* Cart icon — neutral dark grey instead of blue */
body.dark-mode .main-header .header-support .cart-icon {
    background: #21262d !important;
    border-color: #30363d !important;
}
body.dark-mode .main-header .header-support .cart-icon:hover {
    background: #30363d !important;
    border-color: #388bfd !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* Section tag badge — very subtle blue tint, not solid */
body.dark-mode .ng-section-tag {
    background-color: rgba(56,139,253,0.08) !important;
    border-color: rgba(56,139,253,0.25) !important;
    color: #79b8ff !important;
}


/* =================================================================
   HERO SECTION (.ng-hero) & CTA SECTION (.ng-cta-section)
   Override bright blue gradient → subtle dark mode background
   ================================================================= */

/* Main hero — kill the bright blue gradient */
body.dark-mode .ng-hero {
    background: linear-gradient(135deg, #080b0f 0%, #0d1117 55%, #111620 100%) !important;
}

/* Radial glow — very faint instead of noticeable blue */
body.dark-mode .ng-hero::before {
    background: radial-gradient(ellipse 70% 60% at 80% 50%,
        rgba(56,139,253,0.06) 0, transparent 70%) !important;
}

/* Hero badge pill */
body.dark-mode .ng-hero-badge {
    background: rgba(56,139,253,0.08) !important;
    border-color: rgba(56,139,253,0.20) !important;
    color: #79b8ff !important;
}

/* Hero checklist icon circles */
body.dark-mode .ng-hero-list li::before {
    background: rgba(56,139,253,0.10) !important;
    color: #388bfd !important;
}

/* CTA section — same treatment as hero */
body.dark-mode .ng-cta-section {
    background: linear-gradient(135deg, #080b0f 0%, #0d1117 55%, #111620 100%) !important;
    border-top: 1px solid #21262d !important;
    border-bottom: 1px solid #21262d !important;
}

body.dark-mode .ng-cta-section::before {
    background: radial-gradient(ellipse 50% 80% at 50% 50%,
        rgba(56,139,253,0.05) 0, transparent 70%) !important;
}

/* =================================================================
   PRICING CARDS (.ng-pricing-card) — dark mode
   ================================================================= */

body.dark-mode .ng-pricing-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
body.dark-mode .ng-pricing-card:hover {
    box-shadow: 0 20px 48px rgba(0,0,0,0.6) !important;
    border-color: #388bfd !important;
}
/* Featured (popular) card — tone down the bright blue gradient */
body.dark-mode .ng-pricing-card.featured {
    background: linear-gradient(150deg, #0d1a2e 0%, #0f3460 100%) !important;
    border: 1px solid #1f3a5f !important;
    box-shadow: 0 28px 64px rgba(0,0,0,0.55) !important;
}
body.dark-mode .ng-pricing-card h3 { color: #e6edf3 !important; }
body.dark-mode .ng-pricing-card .ng-price { color: #e6edf3 !important; }
body.dark-mode .ng-pricing-card .ng-price > span { color: #8b949e !important; }
body.dark-mode .ng-pricing-card .card-desc,
body.dark-mode .ng-pricing-card ul p { color: #8b949e !important; }
body.dark-mode .ng-pricing-card ul li,
body.dark-mode .ng-pricing-card .card-desc li { color: #c9d1d9 !important; }
body.dark-mode .ng-pricing-card ul a { color: #388bfd !important; }
body.dark-mode .ng-pricing-card ul a:hover { color: #79b8ff !important; }
/* Separator line inside card */
body.dark-mode .ng-pricing-card hr,
body.dark-mode .ng-pricing-card .ng-card-divider { border-color: #21262d !important; }

/* =================================================================
   BILLING PILLS TOGGLE (Monthly / Yearly)
   ================================================================= */

body.dark-mode .ng-billing-pills label {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark-mode .ng-billing-pills input[type="radio"]:checked + label {
    background: #388bfd !important;
    border-color: #388bfd !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(56,139,253,0.30) !important;
}

/* =================================================================
   VPS TYPE SELECTOR CARDS (.ng-vps-ov-card)
   ================================================================= */

body.dark-mode .ng-vps-ov-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
body.dark-mode .ng-vps-ov-card:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,0.6) !important;
    border-color: #388bfd !important;
    transform: translateY(-5px);
}
body.dark-mode .ng-vps-ov-title { color: #e6edf3 !important; }
body.dark-mode .ng-vps-group-label { color: #656d76 !important; }
body.dark-mode .ng-vps-ov-sub { color: #8b949e !important; }
body.dark-mode .ng-vps-ov-list li {
    color: #c9d1d9 !important;
    border-bottom-color: #21262d !important;
}
body.dark-mode .ng-vps-ov-from { color: #388bfd !important; }
body.dark-mode .ng-vps-ov-amount { color: #e6edf3 !important; }
body.dark-mode .ng-vps-ov-unit { color: #656d76 !important; }
body.dark-mode .ng-vps-ov-btn {
    color: #c9d1d9 !important;
    border-color: #30363d !important;
    background: transparent !important;
}
body.dark-mode .ng-vps-ov-btn:hover {
    background: #21262d !important;
    border-color: #388bfd !important;
    color: #e6edf3 !important;
}
/* OS badge (Linux & Windows) */
body.dark-mode .ng-vps-ov-os--both,
body.dark-mode .ng-vps-ov-os--linux {
    background: rgba(56,139,253,0.10) !important;
    color: #79b8ff !important;
    border-color: rgba(56,139,253,0.25) !important;
}
/* Group divider line */
body.dark-mode .ng-vps-group-head { border-bottom-color: #21262d !important; }
body.dark-mode .ng-vps-group-divider { background: #21262d !important; }

/* =================================================================
   CART ICON — make SVG visible in dark mode
   ================================================================= */

body.dark-mode .cart-icon img,
body.dark-mode .logo-mob ~ .header-support .cart-icon img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.85;
}
/* Cart count badge border */
body.dark-mode .cart-icon .count {
    border-color: #0d1117 !important;
}

/* =================================================================
   HIDE MOBILE NAV HAMBURGER ON DESKTOP (≥ 1200px)
   Force-hide .mobile-nav-show since the theme's display:none gets
   overridden by other flex/positioning rules at desktop width.
   ================================================================= */
@media (min-width: 1200px) {
    .mobile-nav-show,
    .mobile-nav-toggle.mobile-nav-show,
    i.mobile-nav-show { display: none !important; }
}

/* =================================================================
   CLIENT AREA DASHBOARD — Complete Dark Mode
   Classes: dash-hero, dash-stats, dash-search, dash-qa, dash-panel
   ================================================================= */

/* ── Hero banner ────────────────────────────────────────────────── */
body.dark-mode .dash-hero {
    background: linear-gradient(135deg, #080b0f 0%, #0d1117 55%, #111827 100%) !important;
    border-color: #21262d !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}
body.dark-mode .dash-hero-title { color: #e6edf3 !important; }
body.dark-mode .dash-hero-sub   { color: #8b949e !important; }
body.dark-mode .dash-btn-outline {
    color: #8b949e !important;
    border-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode .dash-btn-outline:hover {
    color: #e6edf3 !important;
    border-color: rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.05) !important;
}

/* ── Stat cards — keep gradients but slightly muted ─────────────── */
body.dark-mode .dash-stat-blue   { background: linear-gradient(135deg,#0d2952,#1565c0) !important; }
body.dark-mode .dash-stat-indigo { background: linear-gradient(135deg,#1a0d52,#3949ab) !important; }
body.dark-mode .dash-stat-cyan   { background: linear-gradient(135deg,#003540,#007c91) !important; }
body.dark-mode .dash-stat-green  { background: linear-gradient(135deg,#0d3318,#2e7d32) !important; }
body.dark-mode .dash-stat-red    { background: linear-gradient(135deg,#5c0000,#c62828) !important; }
body.dark-mode .dash-stat-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.45) !important;
}
body.dark-mode .dash-stat-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
    transform: translateY(-3px) !important;
}

/* ── Knowledge Base search bar ──────────────────────────────────── */
body.dark-mode .dash-search-form {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
body.dark-mode .dash-search-form:focus-within {
    border-color: #388bfd !important;
    box-shadow: 0 0 0 3px rgba(56,139,253,0.15) !important;
}
body.dark-mode .dash-search-icon { color: #656d76 !important; }
body.dark-mode .dash-search-input {
    color: #e6edf3 !important;
    background: transparent !important;
}
body.dark-mode .dash-search-input::placeholder { color: #656d76 !important; }
body.dark-mode .dash-search-btn {
    background: #388bfd !important;
    color: #fff !important;
}
body.dark-mode .dash-search-btn:hover { background: #1f6feb !important; }

/* ── Quick Actions grid ─────────────────────────────────────────── */
body.dark-mode .dash-qa-item {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .dash-qa-item:hover {
    background: #1c2330 !important;
    border-color: #388bfd !important;
    color: #e6edf3 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
}
/* Icons inside quick action cards */
body.dark-mode .dash-qa-item i {
    color: #388bfd !important;
}
body.dark-mode .dash-qa-item:hover i { color: #79b8ff !important; }
body.dark-mode .dash-qa-item span { color: inherit !important; }

/* ── Dashboard Panels ───────────────────────────────────────────── */
body.dark-mode .dash-panel {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}
body.dark-mode .dash-panel-header {
    background: #1c2330 !important;
    border-bottom-color: #30363d !important;
}
body.dark-mode .dash-panel-title {
    color: #e6edf3 !important;
}
body.dark-mode .dash-panel-title i { color: #388bfd !important; }
body.dark-mode .dash-panel-btn {
    background: rgba(56,139,253,0.12) !important;
    color: #79b8ff !important;
}
body.dark-mode .dash-panel-btn:hover {
    background: rgba(56,139,253,0.22) !important;
    color: #b8d4ff !important;
}
body.dark-mode .dash-panel-body {
    color: #c9d1d9 !important;
}
body.dark-mode .dash-panel-body a { color: #388bfd !important; }
body.dark-mode .dash-panel-body a:hover { color: #79b8ff !important; }

/* ── Panel list items & separators (الخطوط) ─────────────────────── */
body.dark-mode .dash-panel-list-item {
    color: #c9d1d9 !important;
    background: transparent !important;
    border-bottom-color: #21262d !important;
}
body.dark-mode .dash-panel-list-item:hover {
    background: #1c2330 !important;
    color: #e6edf3 !important;
}
body.dark-mode .dash-panel-list-item.active {
    background: #1f3a5f !important;
    color: #79b8ff !important;
}
body.dark-mode .dash-panel-list-item i {
    color: #388bfd !important;
}
body.dark-mode .dash-list-arrow { color: #30363d !important; }

/* ── Panel footer ───────────────────────────────────────────────── */
body.dark-mode .dash-panel-footer {
    background: #1a1f28 !important;
    border-top-color: #21262d !important;
    color: #8b949e !important;
}
body.dark-mode .dash-panel-footer a { color: #388bfd !important; }

/* ── Badges ─────────────────────────────────────────────────────── */
body.dark-mode .dash-badge { background: #da3633 !important; color: #fff !important; }

/* ── Addon wrappers inside dashboard ────────────────────────────── */
body.dark-mode .addon-wrapper .panel,
body.dark-mode .addon-wrapper .card { background: #161b22 !important; border-color: #30363d !important; }

/* =================================================================
   SIDEBAR SPECIFICITY FIX
   ng-custom.min.css uses .sidebar .card-sidebar .list-group-item
   (specificity 0,3,0) + :visited pseudo = 0,4,0 which beats our
   previous rule (0,3,1). We match or exceed that specificity here.
   ================================================================= */

/* ── Card wrapper ───────────────────────────────────────────────── */
body.dark-mode .sidebar .card-sidebar {
    background: #13181f !important;
    border-color: #21262d !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

/* ── Collapsable body wrapper ───────────────────────────────────── */
body.dark-mode .sidebar .card-sidebar .collapsable-card-body,
body.dark-mode .sidebar .collapsable-card-body {
    background: #13181f !important;
}

/* ── Card body (YOUR INFO text area) ────────────────────────────── */
body.dark-mode .sidebar .card-sidebar .card-body,
body.dark-mode .sidebar .card-body {
    background: #13181f !important;
    color: #c9d1d9 !important;
}

/* ── All list items — override ng-custom's !important rules ─────── */
body.dark-mode .sidebar .card-sidebar .list-group-item,
body.dark-mode .sidebar .card-sidebar .list-group-item:link,
body.dark-mode .sidebar .card-sidebar .list-group-item:visited,
body.dark-mode .sidebar .card-sidebar .list-group-item a,
body.dark-mode .sidebar .card-sidebar .list-group-item a:link,
body.dark-mode .sidebar .card-sidebar .list-group-item a:visited {
    background: #13181f !important;
    color: #c9d1d9 !important;
    border-bottom-color: #1e2530 !important;
    border-left-color: transparent !important;
}

/* ── Active item ────────────────────────────────────────────────── */
body.dark-mode .sidebar .card-sidebar .list-group-item.active,
body.dark-mode .sidebar .card-sidebar .list-group-item.active:link,
body.dark-mode .sidebar .card-sidebar .list-group-item.active:visited,
body.dark-mode .sidebar .card-sidebar .list-group-item.active:hover,
body.dark-mode .sidebar .card-sidebar .list-group-item.active:focus {
    background: #1f3a5f !important;
    color: #79b8ff !important;
    border-left-color: #388bfd !important;
    font-weight: 700 !important;
}

/* ── Hover state ────────────────────────────────────────────────── */
body.dark-mode .sidebar .card-sidebar .list-group-item:hover:not(.active):not(.disabled),
body.dark-mode .sidebar .card-sidebar .list-group-item:focus:not(.active) {
    background: #1c2330 !important;
    color: #388bfd !important;
    border-left-color: rgba(56,139,253,0.4) !important;
}

/* ── Icons inside list items ────────────────────────────────────── */
body.dark-mode .sidebar .card-sidebar .list-group-item .sidebar-menu-item-icon {
    color: #388bfd !important;
}
body.dark-mode .sidebar .card-sidebar .list-group-item i { color: #388bfd !important; }
body.dark-mode .sidebar .card-sidebar .list-group-item.active i,
body.dark-mode .sidebar .card-sidebar .list-group-item.active .sidebar-menu-item-icon {
    color: #79b8ff !important;
}

/* ── Card footer ────────────────────────────────────────────────── */
body.dark-mode .sidebar .card-sidebar .card-footer,
body.dark-mode .sidebar .card-footer {
    background: #13181f !important;
    border-top-color: #1e2530 !important;
    color: #8b949e !important;
}

/* ── Sidebar card header (YOUR INFO, CONTACTS, etc.) ───────────── */
body.dark-mode .sidebar .card-sidebar .card-header,
body.dark-mode .sidebar .card-header {
    background: linear-gradient(135deg, #0d2952 0%, #1565c0 100%) !important;
    border-bottom: none !important;
}
body.dark-mode .sidebar .card-sidebar .card-header .card-title,
body.dark-mode .sidebar .card-header .card-title { color: #fff !important; }
body.dark-mode .sidebar .card-sidebar .card-header .card-minimise { color: rgba(255,255,255,0.7) !important; }

/* ── List group separator lines (الخطوط) ────────────────────────── */
body.dark-mode .sidebar .list-group-flush .list-group-item {
    border-bottom-color: #1e2530 !important;
}
body.dark-mode .sidebar .list-group-flush .list-group-item:last-child {
    border-bottom: none !important;
}

/* =================================================================
   DASH-PANELS HEADER & FOOTER — specificity fix
   ng-custom uses .dash-panels .dash-panel-X.card-X (0,3,0 + !important)
   We need body.dark-mode .dash-panels .dash-panel-X.card-X (0,4,1)
   ================================================================= */

body.dark-mode .dash-panels .dash-panel.card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}
body.dark-mode .dash-panels .dash-panel-header.card-header {
    background: #1c2330 !important;
    border-bottom-color: #30363d !important;
}
body.dark-mode .dash-panels .dash-panel-footer.card-footer {
    background: #13181f !important;
    border-top-color: #21262d !important;
    color: #8b949e !important;
}
body.dark-mode .dash-panels .dash-panel-footer.card-footer a { color: #388bfd !important; }
body.dark-mode .dash-panels .dash-panel-footer.card-footer a:hover { color: #79b8ff !important; }

/* ── Dash panel list items (transparent bg shows card bg) ────────── */
body.dark-mode .dash-panels .dash-panel-list.list-group { border-top: none !important; }
body.dark-mode .dash-panels .dash-panel-list-item.list-group-item {
    background: transparent !important;
    border-bottom-color: #21262d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .dash-panels .dash-panel-list-item.list-group-item:hover {
    background: rgba(56,139,253,0.06) !important;
    color: #e6edf3 !important;
}

/* =================================================================
   SHOPPING CART (#order-standard_cart) — complete dark mode
   All selectors match or exceed ng-custom/whmcs specificity.
   ================================================================= */

/* ── Cart card/panel containers ─────────────────────────────────── */
body.dark-mode #order-standard_cart .card,
body.dark-mode #order-standard_cart .panel {
    background: #161b22 !important;
    border-color: #30363d !important;
}
body.dark-mode #order-standard_cart .card-body,
body.dark-mode #order-standard_cart .panel-body {
    background: #161b22 !important;
    color: #c9d1d9 !important;
}
body.dark-mode #order-standard_cart .card-footer,
body.dark-mode #order-standard_cart .panel-footer {
    background: #13181f !important;
    border-top-color: #21262d !important;
    color: #8b949e !important;
}

/* ── Cart sidebar list items — all pseudo-classes ───────────────── */
body.dark-mode #order-standard_cart .list-group-item,
body.dark-mode #order-standard_cart .list-group-item:link,
body.dark-mode #order-standard_cart .list-group-item:visited,
body.dark-mode #order-standard_cart .list-group-item a,
body.dark-mode #order-standard_cart .list-group-item a:link,
body.dark-mode #order-standard_cart .list-group-item a:visited,
body.dark-mode #order-standard_cart .cart-sidebar a,
body.dark-mode #order-standard_cart .cart-sidebar a:link,
body.dark-mode #order-standard_cart .cart-sidebar a:visited {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
    border-bottom-color: #21262d !important;
}
body.dark-mode #order-standard_cart .list-group-item:hover,
body.dark-mode #order-standard_cart .list-group-item:focus,
body.dark-mode #order-standard_cart .list-group-item a:hover,
body.dark-mode #order-standard_cart .cart-sidebar a:hover {
    background-color: #1c2330 !important;
    color: #388bfd !important;
}
body.dark-mode #order-standard_cart .list-group-item.active,
body.dark-mode #order-standard_cart .list-group-item.active:link,
body.dark-mode #order-standard_cart .list-group-item.active:visited,
body.dark-mode #order-standard_cart .list-group-item.active:hover,
body.dark-mode #order-standard_cart .list-group-item.active:focus {
    background: #1f3a5f !important;
    border-left-color: #388bfd !important;
    color: #79b8ff !important;
}

/* ── Order Summary (right panel) ────────────────────────────────── */
body.dark-mode #order-standard_cart .order-summary {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
body.dark-mode #order-standard_cart .summary-container {
    background-color: #161b22 !important;
    border-radius: 0 !important;
}
body.dark-mode #order-standard_cart .summary-container .order-summary-list .summary-list-item {
    border-bottom-color: #21262d !important;
    color: #c9d1d9 !important;
}
body.dark-mode #order-standard_cart .order-summary h2,
body.dark-mode #order-standard_cart .order-summary .subtotal,
body.dark-mode #order-standard_cart .order-summary-list .summary-list-item { color: #c9d1d9 !important; }

/* ── Cart sub-heading (Product/Options | Price/Cycle table header) ─ */
body.dark-mode #order-standard_cart .sub-heading,
body.dark-mode #order-standard_cart .sub-heading-borderless {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}
body.dark-mode #order-standard_cart .sub-heading span,
body.dark-mode #order-standard_cart .sub-heading-borderless span { color: #e6edf3 !important; }

/* ── Cart empty / product rows ──────────────────────────────────── */
body.dark-mode #order-standard_cart .products .product {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode #order-standard_cart .products .product h5 { color: #e6edf3 !important; }

/* ── Promo code section ─────────────────────────────────────────── */
body.dark-mode #order-standard_cart #frmPromoCode,
body.dark-mode #order-standard_cart .promo-code-wrap { background: #161b22 !important; border-color: #30363d !important; }

/* ── Cart body main content area ────────────────────────────────── */
body.dark-mode .cart-body { background: #0d1117 !important; }
body.dark-mode .cart-body .secondary-cart-body { background: #0d1117 !important; }
body.dark-mode .cart-body .header-lined { border-color: #21262d !important; color: #e6edf3 !important; }

/* ── Checkout form frmCheckout ──────────────────────────────────── */
body.dark-mode #frmCheckout .card,
body.dark-mode #frmCheckout .panel { background: #161b22 !important; border-color: #30363d !important; }
body.dark-mode #frmCheckout .card-body,
body.dark-mode #frmCheckout .panel-body { background: #161b22 !important; color: #c9d1d9 !important; }

/* =================================================================
   CSS VARIABLE OVERRIDES — fixes ALL whmcs.css var(--gray-light),
   var(--white), var(--border-color) etc. in one shot.
   These cascade into hundreds of whmcs.css rules automatically.
   ================================================================= */
body.dark-mode {
    --gray-light:        #161b22;
    --white:             #161b22;
    --border-color:      #30363d;
    --border-color-inner:#21262d;
    --body-color:        #c9d1d9;
    --heading-color:     #e6edf3;
    --color-body:        #c9d1d9;
    --color-white:       #e6edf3;
    --color-dark:        #e6edf3;
    --color-default:     #c9d1d9;
    --dark:              #e6edf3;
    --bs-body-bg:        #0d1117;
    --bs-body-color:     #c9d1d9;
    --bs-border-color:   #30363d;
    --bs-gray:           #8b949e;
    --primary:           #388bfd;
    --primary-dark:      #1f6feb;
    --primary-light:     #79b8ff;
}

/* =================================================================
   PRODUCT LISTING CARDS — feature list text visibility
   ================================================================= */
body.dark-mode #order-standard_cart .feature-list li,
body.dark-mode #order-standard_cart .features li,
body.dark-mode #order-standard_cart ul.features li { color: #c9d1d9 !important; }
body.dark-mode #order-standard_cart .features li i,
body.dark-mode #order-standard_cart ul.features li i { color: #388bfd !important; }

/* Product cards in product listing step */
body.dark-mode #order-standard_cart .product-list .product,
body.dark-mode #order-standard_cart .product-list .product-box {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode #order-standard_cart .product-list .product h3,
body.dark-mode #order-standard_cart .product-list .product-box h3,
body.dark-mode #order-standard_cart .product-list .product .product-name,
body.dark-mode #order-standard_cart .product-list .product-box .product-name { color: #e6edf3 !important; }
body.dark-mode #order-standard_cart .product-list .product .price,
body.dark-mode #order-standard_cart .product-list .product-box .price { color: #79b8ff !important; }

/* =================================================================
   CART TABLE & EMPTY STATE
   ================================================================= */
body.dark-mode #order-standard_cart table,
body.dark-mode #order-standard_cart .table {
    background: #161b22 !important;
    color: #c9d1d9 !important;
}
body.dark-mode #order-standard_cart .table th,
body.dark-mode #order-standard_cart .table td {
    background: #161b22 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}
body.dark-mode #order-standard_cart .table thead th {
    background: #21262d !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}
body.dark-mode #order-standard_cart .table tbody tr:hover td {
    background: #1c2330 !important;
}
/* Empty cart row */
body.dark-mode #order-standard_cart .table .empty-row td,
body.dark-mode #order-standard_cart .no-products td,
body.dark-mode #order-standard_cart tr.empty td {
    background: #161b22 !important;
    color: #8b949e !important;
}

/* =================================================================
   PRODUCT CONFIGURATION PAGE — form controls, legends, fieldsets
   ================================================================= */
body.dark-mode #order-standard_cart legend,
body.dark-mode #order-standard_cart fieldset legend {
    color: #e6edf3 !important;
    border-bottom-color: #30363d !important;
}
body.dark-mode #order-standard_cart .form-control,
body.dark-mode #order-standard_cart input[type="text"],
body.dark-mode #order-standard_cart input[type="email"],
body.dark-mode #order-standard_cart input[type="number"],
body.dark-mode #order-standard_cart select,
body.dark-mode #order-standard_cart textarea {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}
body.dark-mode #order-standard_cart .form-control:focus,
body.dark-mode #order-standard_cart input:focus,
body.dark-mode #order-standard_cart select:focus,
body.dark-mode #order-standard_cart textarea:focus {
    border-color: #388bfd !important;
    box-shadow: 0 0 0 0.2rem rgba(56,139,253,0.2) !important;
}
body.dark-mode #order-standard_cart label { color: #c9d1d9 !important; }
body.dark-mode #order-standard_cart .help-block,
body.dark-mode #order-standard_cart .form-text { color: #8b949e !important; }

/* Configuration option rows */
body.dark-mode #order-standard_cart .configoptions .form-group,
body.dark-mode #order-standard_cart .configoptions .row {
    border-bottom-color: #21262d !important;
}

/* =================================================================
   DOMAIN CHECKER CONTAINER
   ================================================================= */
body.dark-mode .domain-checker-container .input-group-box,
body.dark-mode .domain-checker-container .input-group {
    background: #0d1117 !important;
    border-color: #30363d !important;
}
body.dark-mode .domain-checker-container input[type="text"],
body.dark-mode .domain-checker-container .form-control {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}
body.dark-mode .domain-checker-container .tld-list .tld-item {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .domain-checker-container .tld-list .tld-item .tld-price { color: #79b8ff !important; }

/* =================================================================
   GLOBAL FORM CONTROLS (client area — outside cart)
   ================================================================= */
body.dark-mode .form-control,
body.dark-mode input[type="text"]:not(.search-input),
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="tel"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}
body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #388bfd !important;
    box-shadow: 0 0 0 0.2rem rgba(56,139,253,0.15) !important;
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
}
body.dark-mode .input-group-text {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode label { color: #c9d1d9; }
body.dark-mode .help-block,
body.dark-mode small.form-text { color: #8b949e !important; }

/* =================================================================
   SPOTLIGHT REVIEWS WIDGET (data-rv-widget="spotlight")
   Widget uses inline style="background:#fff" — override with !important
   ================================================================= */

/* Outer card wrapper */
body.dark-mode [data-rv-widget="spotlight"] > div {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 8px 48px rgba(0,0,0,0.5) !important;
}

/* Review body text (#334155 inline) */
body.dark-mode [data-rv-widget="spotlight"] p {
    color: #c9d1d9 !important;
}

/* Title, name and other text divs with navy inline color */
body.dark-mode [data-rv-widget="spotlight"] [id$="-panel"] div {
    color: #c9d1d9 !important;
}
body.dark-mode [data-rv-widget="spotlight"] [id$="-panel"] > div > div {
    color: #e6edf3 !important;
}

/* Prev/Next navigation buttons */
body.dark-mode [data-rv-widget="spotlight"] button[id$="-prev"],
body.dark-mode [data-rv-widget="spotlight"] button[id$="-next"] {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}

/* Inactive dot bullets (#e2e8f0 inline) */
body.dark-mode .rv-spot-dot {
    background: #30363d !important;
}

/* =================================================================
   ADDON PRICING STRIP & PRODUCT CONFIG PRICE DISPLAY
   The gray strip showing "EGP 210 Monthly + EGP 840 Setup Fee"
   ================================================================= */
body.dark-mode #order-standard_cart input[readonly],
body.dark-mode #order-standard_cart input[disabled],
body.dark-mode #order-standard_cart .pricingfield,
body.dark-mode #order-standard_cart .price-row,
body.dark-mode #order-standard_cart .pricetotal,
body.dark-mode #order-standard_cart .addons .price {
    background-color: #21262d !important;
    color: #8b949e !important;
    border-color: #30363d !important;
}

/* Addon section container */
body.dark-mode #order-standard_cart .addons,
body.dark-mode #order-standard_cart .addons .addon {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode #order-standard_cart .addons .addon label { color: #c9d1d9 !important; }
body.dark-mode #order-standard_cart .addons .addon .addon-description,
body.dark-mode #order-standard_cart .addons .addon small { color: #8b949e !important; }

/* =================================================================
   ORDER CONFIGURE SECTION HEADER (card-block, header-lined)
   ================================================================= */
body.dark-mode #frmConfigureDomains .card-block {
    background: #161b22 !important;
    border-color: #30363d !important;
}

/* Configure section heading strip */
body.dark-mode #order-standard_cart .cart-body .header-lined {
    background: transparent !important;
    border-bottom-color: #30363d !important;
}
body.dark-mode #order-standard_cart .cart-body .header-lined h2,
body.dark-mode #order-standard_cart .cart-body .header-lined h3,
body.dark-mode #order-standard_cart .cart-body .header-lined .section-title {
    color: #79b8ff !important;
}
body.dark-mode #order-standard_cart .cart-body .header-lined p,
body.dark-mode #order-standard_cart .cart-body .header-lined small {
    color: #8b949e !important;
}

/* Fallback: any light card-block in the order/configure flow */
body.dark-mode .cart-body .card-block,
body.dark-mode .cart-body .panel-block {
    background: #161b22 !important;
    border-color: #30363d !important;
}

/* =================================================================
   SSL UPSELL PROMO CARD (.mc-promo / .mc-promos / .store-promoted-product)
   Real class names confirmed via DevTools inspection
   ================================================================= */
body.dark-mode .mc-promos,
body.dark-mode .mc-promo {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
}
body.dark-mode .mc-promo .body,
body.dark-mode .mc-promo .body.clearfix {
    background: #161b22 !important;
    color: #c9d1d9 !important;
}
body.dark-mode .mc-promo h3,
body.dark-mode .mc-promo h4 { color: #e6edf3 !important; }
body.dark-mode .mc-promo p { color: #c9d1d9 !important; }
body.dark-mode .mc-promo ul li,
body.dark-mode .mc-promo ul li i { color: #c9d1d9 !important; }
body.dark-mode .mc-promo ul li i { color: #388bfd !important; }

/* .store-promoted-product (order.tpl variant) */
body.dark-mode .store-promoted-product {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    color: #c9d1d9 !important;
}
body.dark-mode .store-promoted-product h3,
body.dark-mode .store-promoted-product h4 { color: #e6edf3 !important; }
body.dark-mode .store-promoted-product ul.features li { color: #c9d1d9 !important; }
body.dark-mode .store-promoted-product ul.features li i { color: #388bfd !important; }

/* .promo-banner variant */
body.dark-mode .promo-banner,
body.dark-mode .promo-banner-rounded {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
}
body.dark-mode .promo-banner .panel-body { background: #161b22 !important; }
body.dark-mode .promo-banner h3 { color: #e6edf3 !important; }
body.dark-mode .promo-banner h4,
body.dark-mode .promo-banner ul li,
body.dark-mode .promo-banner p { color: #c9d1d9 !important; }
body.dark-mode .promo-banner ul li i { color: #388bfd !important; }

/* =================================================================
   OS TEMPLATE PICKER (.ngco-tc-* classes)
   Confirmed via DevTools — custom widget with ngco-tc- prefix
   ================================================================= */
body.dark-mode .ngco-tc-wrap {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
/* Toggle header bar — widget injects linear-gradient(#f7f9fd,#eef3fb) via <style> tag */
body.dark-mode .ngco-tc-toggle {
    background: #1c2330 !important;
    border-bottom-color: #30363d !important;
}
body.dark-mode .ngco-tc-toggle:hover {
    background: #21262d !important;
}

/* =================================================================
   NGCO VERSION PICKER POPUP (.ngco-popup-*)
   Injected via widget <style> tag with #fff backgrounds
   ================================================================= */
body.dark-mode .ngco-popup {
    background: #161b22 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}
body.dark-mode .ngco-popup-head {
    border-bottom-color: #30363d !important;
    background: #1c2330 !important;
}
body.dark-mode .ngco-popup-head h4 { color: #e6edf3 !important; }
body.dark-mode .ngco-popup-close {
    background: #30363d !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}
body.dark-mode .ngco-popup-close:hover {
    background: #388bfd !important;
    color: #fff !important;
}
body.dark-mode .ngco-popup-body { background: #161b22 !important; }
body.dark-mode .ngco-popup-item {
    background: #0d1117 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .ngco-popup-item:hover {
    border-color: #388bfd !important;
    background: #1c2330 !important;
    color: #e6edf3 !important;
}
body.dark-mode .ngco-popup-item.active {
    border-color: #388bfd !important;
    background: rgba(56,139,253,0.12) !important;
    color: #79b8ff !important;
}

/* =================================================================
   MY PRODUCTS & SERVICES PAGE (svc-* classes from ng-custom.min.css)
   ================================================================= */

/* Toolbar count badge */
body.dark-mode .svc-count {
    background: rgba(56,139,253,0.15) !important;
    color: #79b8ff !important;
}

/* Search input — overrides ng-custom's !important rules */
body.dark-mode .svc-search {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
    box-shadow: none !important;
}
body.dark-mode .svc-search-wrap i {
    color: #484f58 !important;
}
body.dark-mode .svc-search:focus {
    border-color: #388bfd !important;
    box-shadow: 0 0 0 3px rgba(56,139,253,0.15) !important;
}
/* Placeholder colour in dark mode */
body.dark-mode .svc-search::-webkit-input-placeholder { color: #484f58 !important; }
body.dark-mode .svc-search::-moz-placeholder           { color: #484f58 !important; }
body.dark-mode .svc-search:-ms-input-placeholder       { color: #484f58 !important; }
body.dark-mode .svc-search::placeholder                { color: #484f58 !important; }

/* Filter pills (Active / Suspended / Pending) */
body.dark-mode .svc-filter-btn {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark-mode .svc-filter-btn:hover {
    background: #1c2330 !important;
    border-color: #388bfd !important;
    color: #79b8ff !important;
}
body.dark-mode .svc-filter-btn.active {
    background: #388bfd !important;
    border-color: #1f6feb !important;
    color: #fff !important;
}

/* Service card */
body.dark-mode .svc-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
body.dark-mode .svc-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.5) !important;
}
body.dark-mode .svc-card-header {
    border-bottom-color: #21262d !important;
}
body.dark-mode .svc-card-footer {
    background: #13181f !important;
    border-top-color: #21262d !important;
}

/* Card text */
body.dark-mode .svc-product-name { color: #e6edf3 !important; }
body.dark-mode .svc-info-label   { color: #8b949e !important; }
body.dark-mode .svc-info-value   { color: #c9d1d9 !important; }
body.dark-mode .svc-cycle        { color: #8b949e !important; }

/* Icon badge backgrounds */
body.dark-mode .svc-icon-server  { background: rgba(33,150,243,0.15) !important; color: #79b8ff !important; }
body.dark-mode .svc-icon-hosting { background: rgba(67,160,71,0.15) !important;  color: #56d364 !important; }
body.dark-mode .svc-icon-cloud   { background: rgba(81,45,168,0.15) !important;  color: #bc8cff !important; }
body.dark-mode .svc-icon-server i  { color: #79b8ff !important; }
body.dark-mode .svc-icon-hosting i { color: #56d364 !important; }
body.dark-mode .svc-icon-cloud i   { color: #bc8cff !important; }

/* Status pills */
body.dark-mode .svc-status-active    { background: rgba(33,150,243,0.15) !important; color: #79b8ff !important; }
body.dark-mode .svc-status-suspended { background: rgba(245,124,0,0.15) !important;  color: #f0883e !important; }
body.dark-mode .svc-status-terminated,
body.dark-mode .svc-status-cancelled { background: rgba(229,57,53,0.15) !important;  color: #f85149 !important; }
body.dark-mode .svc-status-pending   { background: rgba(255,193,7,0.15) !important;  color: #e3b341 !important; }
body.dark-mode .svc-status-completed { background: rgba(67,160,71,0.15) !important;  color: #56d364 !important; }
body.dark-mode .svc-status-fraud     { background: rgba(156,39,176,0.15) !important; color: #bc8cff !important; }

/* IP badge */
body.dark-mode .svc-ip-badge {
    background: rgba(56,139,253,0.12) !important;
    color: #79b8ff !important;
}
body.dark-mode .svc-copy-btn { color: #8b949e !important; }
body.dark-mode .svc-copy-btn:hover {
    color: #388bfd !important;
    background: rgba(56,139,253,0.10) !important;
}

/* Server tag */
body.dark-mode .svc-server-tag {
    background: rgba(56,139,253,0.12) !important;
    color: #79b8ff !important;
}

/* Empty state / no results */
body.dark-mode .svc-empty-state,
body.dark-mode .svc-no-results {
    background: #161b22 !important;
    border-color: #30363d !important;
}
body.dark-mode .svc-empty-state h3 { color: #e6edf3 !important; }
body.dark-mode .svc-empty-state p,
body.dark-mode .svc-no-results p   { color: #8b949e !important; }

/* =================================================================
   AUTH PAGES — Login / Register / Password Reset (.nga-* classes)
   Split layout: dark-blue left panel (.nga-brand) + white right (.nga-form-side)
   ================================================================= */

/* Right panel — white → dark */
body.dark-mode .nga-form-side {
    background: #161b22 !important;
}

/* Page heading */
body.dark-mode .nga-head h3 { color: #e6edf3 !important; }
body.dark-mode .nga-head p  { color: #8b949e !important; }

/* Section dividers (PERSONAL INFORMATION, LOCATION) */
body.dark-mode .nga-lbl { color: #8b949e !important; }

/* Icon circle on reset page */
body.dark-mode .nga-icon-wrap,
body.dark-mode .nga-reset-icon {
    background: rgba(56,139,253,0.12) !important;
    color: #388bfd !important;
}

/* Form inputs */
body.dark-mode .nga-inp {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}
body.dark-mode .nga-inp:focus {
    background: #0d1117 !important;
    border-color: #388bfd !important;
    box-shadow: 0 0 0 3px rgba(56,139,253,0.15) !important;
}
body.dark-mode .nga-inp::placeholder { color: #484f58 !important; }

/* Password toggle eye icon */
body.dark-mode .nga-pw-toggle { color: #8b949e !important; }
body.dark-mode .nga-pw-toggle:hover { color: #388bfd !important; }

/* Remember me / checkbox label */
body.dark-mode .nga-chk { color: #8b949e !important; }

/* Divider "or continue with" */
body.dark-mode .nga-divider { color: #484f58 !important; }
body.dark-mode .nga-divider::before,
body.dark-mode .nga-divider::after { background: #30363d !important; }

/* Register / create account link */
body.dark-mode .nga-reg { color: #8b949e !important; }

/* Section separator lines (PERSONAL INFORMATION hr) */
body.dark-mode .nga-form-side hr,
body.dark-mode .nga-form-side .nga-sep { border-color: #30363d !important; }

/* Section title labels inside login form side */
body.dark-mode .nga-form-side .nga-section-title,
body.dark-mode .nga-form-side [class*="section-title"],
body.dark-mode .nga-form-side .form-section-title { color: #388bfd !important; }

/* =================================================================
   REGISTER PAGE (.nga-reg-* classes — separate layout from login)
   ================================================================= */
body.dark-mode .nga-reg-card {
    background: #161b22 !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) !important;
}
body.dark-mode .nga-reg-body {
    background: #161b22 !important;
}

/* "PERSONAL INFORMATION" / "LOCATION" section dividers */
body.dark-mode .nga-section-title {
    color: #79b8ff !important;
    border-bottom-color: #30363d !important;
}

/* Phone country code dropdown */
body.dark-mode .intl-tel-input .country-list {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
body.dark-mode .intl-tel-input .country-list .country { color: #c9d1d9 !important; }
body.dark-mode .intl-tel-input .country-list .country.highlight { background-color: #21262d !important; }
body.dark-mode .intl-tel-input .country-list .country:hover { background-color: #1c2330 !important; }
body.dark-mode .intl-tel-input .country-list .dial-code { color: #8b949e !important; }
body.dark-mode .intl-tel-input .country-list .divider { border-bottom-color: #30363d !important; }

/* =================================================================
   MAILING LIST OPT-IN BOX (.nga-marketing) — register page
   ================================================================= */
body.dark-mode .nga-marketing {
    background: #1c2330 !important;
    border: 1px solid #30363d !important;
    border-radius: 10px !important;
    color: #c9d1d9 !important;
}
body.dark-mode .nga-marketing h5,
body.dark-mode .nga-marketing h6,
body.dark-mode .nga-marketing strong { color: #e6edf3 !important; }
body.dark-mode .nga-marketing p,
body.dark-mode .nga-marketing small { color: #8b949e !important; }

/* Bootstrap toggle switch (Yes/No) — label divider and default off handle */
body.dark-mode .bootstrap-switch .bootstrap-switch-label {
    background: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .bootstrap-switch {
    border-color: #30363d !important;
    background: #21262d !important;
}
body.dark-mode .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
body.dark-mode .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
    background: #21262d !important;
    color: #8b949e !important;
}

/* =================================================================
   LEGAL PAGES (Privacy Policy / Terms of Service / AUP / Refund)
   Classes: legal-layout, legal-sidebar, legal-content, legal-*
   ================================================================= */

/* Page background */
body.dark-mode .legal-layout {
    background: #0d1117 !important;
}

/* Left sidebar card */
body.dark-mode .legal-sidebar {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
}
body.dark-mode .legal-sidebar-label {
    color: #8b949e !important;
    border-bottom-color: #21262d !important;
}
body.dark-mode .legal-sidebar-divider { background: #21262d !important; }

/* Nav links */
body.dark-mode .legal-nav-link {
    color: #8b949e !important;
}
body.dark-mode .legal-nav-link:hover {
    background: #1c2330 !important;
    color: #e6edf3 !important;
}
body.dark-mode .legal-nav-link.active {
    background: rgba(56,139,253,0.12) !important;
    color: #79b8ff !important;
    border-left-color: #388bfd !important;
}
body.dark-mode .legal-contact-link:hover {
    background: rgba(56,139,253,0.10) !important;
    color: #79b8ff !important;
}

/* Main content area */
body.dark-mode .legal-content {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
}
body.dark-mode .legal-page-title {
    color: #e6edf3 !important;
    border-bottom-color: #30363d !important;
}
body.dark-mode .legal-content p { color: #c9d1d9 !important; }
body.dark-mode .legal-content ul li,
body.dark-mode .legal-content ul.bullet-list li,
body.dark-mode .legal-content ul:not(.legal-nav) li { color: #c9d1d9 !important; }

/* Section headings h3 (with light blue bg + !important) */
body.dark-mode .legal-content h3 {
    background: #1c2330 !important;
    color: #e6edf3 !important;
    border-left-color: #388bfd !important;
}
body.dark-mode .legal-content h3.service-block {
    background: #0d2952 !important;
    color: #e6edf3 !important;
}

/* Contact info box at bottom */
body.dark-mode .legal-contact-box {
    background: #13181f !important;
    border-color: #30363d !important;
}
body.dark-mode .legal-contact-box ul li { color: #c9d1d9 !important; }
body.dark-mode .legal-contact-box ul li strong { color: #e6edf3 !important; }

/* Agreement banner */
body.dark-mode .legal-agreement {
    background: rgba(56,139,253,0.10) !important;
    color: #79b8ff !important;
    border-left-color: #388bfd !important;
}
body.dark-mode .ngco-tc-body {
    background: #161b22 !important;
}
body.dark-mode .ngco-tc-tabs {
    background: #13181f !important;
    border-bottom-color: #30363d !important;
}
body.dark-mode .ngco-tc-tab {
    background: #13181f !important;
    color: #8b949e !important;
    border-color: transparent !important;
}
body.dark-mode .ngco-tc-tab.active {
    background: #161b22 !important;
    color: #388bfd !important;
    border-bottom-color: #388bfd !important;
}
body.dark-mode .ngco-tc-tab:hover:not(.active) {
    background: #1c2330 !important;
    color: #c9d1d9 !important;
}
body.dark-mode .ngco-tc-card {
    background: #0d1117 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .ngco-tc-card:hover {
    background: #161b22 !important;
    border-color: #388bfd !important;
}
body.dark-mode .ngco-tc-card span,
body.dark-mode .ngco-tc-card small { color: #8b949e !important; }
/* Selected state (light blue bg rgb(240,246,255)) */
body.dark-mode .ngco-tc-selected {
    background: rgba(56,139,253,0.10) !important;
    border-color: #388bfd !important;
}

/* Toggle header — "OS Template" title and "Choose an option..." */
body.dark-mode .ngco-tc-toggle-title { color: #e6edf3 !important; }
body.dark-mode .ngco-tc-toggle-sel   { color: #8b949e !important; }
body.dark-mode .ngco-tc-toggle-arrow { color: #8b949e !important; }

/* Card label names (Ubuntu, Debian, etc.) — dark navy in light mode → light in dark */
body.dark-mode .ngco-tc-card-label   { color: #e6edf3 !important; }

/* "X versions ›" links — soften the electric blue */
body.dark-mode .ngco-tc-card-versions { color: #79b8ff !important; }

/* =================================================================
   ADDON PRICING STRIP (.panel-price)
   Confirmed class — shows "EGP 210 Monthly + EGP 840 Setup Fee"
   ================================================================= */
body.dark-mode .panel-price {
    background: #21262d !important;
    color: #8b949e !important;
    border-color: #30363d !important;
}

/* =================================================================
   PRODUCT CONFIGURABLE OPTIONS SECTION
   Parent: .product-configurable-options → .secondary-cart-body
   ================================================================= */
body.dark-mode .product-configurable-options {
    background: transparent !important;
}
body.dark-mode .secondary-cart-body .product-configurable-options .form-group select,
body.dark-mode .secondary-cart-body .product-configurable-options .form-group .form-control {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}

/* =================================================================
   BUTTONS — .btn-01 / .btn-02
   color: var(--color-white) gets overridden by global dark-mode link color (#388bfd)
   because these are <a> tags — force white text on colored buttons
   ================================================================= */
body.dark-mode .btn-01,
body.dark-mode .btn-01:hover,
body.dark-mode .btn-01:focus,
body.dark-mode .btn-01:visited {
    color: #ffffff !important;
}
body.dark-mode .btn-02,
body.dark-mode .btn-02:hover,
body.dark-mode .btn-02:focus,
body.dark-mode .btn-02:visited {
    color: #ffffff !important;
}

/* =================================================================
   INVOICE PAGE — viewinvoice.php (standalone template, custom.css injected)
   body bg: #efefef → dark | .invoice-container: #fff → dark card
   td.total-row: #f8f8f8 → raised dark | text: inherit dark mode colors
   ================================================================= */
body.dark-mode .invoice-container,
html.dark-mode .invoice-container {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
html.dark-mode body,
body.dark-mode {
    background-color: #0d1117 !important;
}
body.dark-mode .invoice-container td.total-row,
html.dark-mode .invoice-container td.total-row {
    background-color: #1c2330 !important;
    color: #c9d1d9 !important;
}
body.dark-mode .invoice-container table,
html.dark-mode .invoice-container table {
    color: #c9d1d9 !important;
}
body.dark-mode .invoice-container th,
html.dark-mode .invoice-container th {
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark-mode .invoice-container td,
html.dark-mode .invoice-container td {
    border-color: #21262d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .invoice-container h1,
body.dark-mode .invoice-container h2,
body.dark-mode .invoice-container h3,
body.dark-mode .invoice-container h4,
html.dark-mode .invoice-container h1,
html.dark-mode .invoice-container h2,
html.dark-mode .invoice-container h3,
html.dark-mode .invoice-container h4 {
    color: #e6edf3 !important;
}
body.dark-mode .invoice-container p,
html.dark-mode .invoice-container p {
    color: #c9d1d9 !important;
}
/* Invoice status colors — keep recognizable */
body.dark-mode .unpaid, html.dark-mode .unpaid { color: #f85149 !important; }
body.dark-mode .paid,   html.dark-mode .paid   { color: #3fb950 !important; }
body.dark-mode .draft,  html.dark-mode .draft  { color: #8b949e !important; }
body.dark-mode .refunded, html.dark-mode .refunded { color: #79b8ff !important; }
body.dark-mode .cancelled, html.dark-mode .cancelled { color: #8b949e !important; }
/* Payment method select */
body.dark-mode .invoice-container select,
html.dark-mode .invoice-container select {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}
/* Dividers */
body.dark-mode .invoice-container hr,
html.dark-mode .invoice-container hr {
    border-color: #30363d !important;
}

/* =================================================================
   CHECKOUT PAGE — Mailing list opt-in + misc light elements
   .marketing-email-optin: near-white rgb(248,248,248) mailing box
   .apply-credit-container: light gray credit balance box
   .generate-password btn: very light blue button
   ================================================================= */
body.dark-mode .marketing-email-optin {
    background: #1c2330 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    color: #c9d1d9 !important;
}
body.dark-mode .marketing-email-optin h3,
body.dark-mode .marketing-email-optin h4,
body.dark-mode .marketing-email-optin strong {
    color: #e6edf3 !important;
}
body.dark-mode .marketing-email-optin p,
body.dark-mode .marketing-email-optin label {
    color: #8b949e !important;
}
/* Credit balance container */
body.dark-mode .apply-credit-container {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
}
/* Generate Password button */
body.dark-mode .generate-password {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #79b8ff !important;
}

/* =================================================================
   CART — "Secured by NG HOST VIP" badge
   <strong> inside .ng-secured-badge has color:rgb(13,21,71) dark navy
   ================================================================= */
body.dark-mode .ng-secured-badge strong {
    color: #79b8ff !important;
}
body.dark-mode .ng-secured-badge {
    color: #8b949e !important;
}
body.dark-mode .ng-secured-badge .fas.fa-lock {
    color: #388bfd !important;
}

/* =================================================================
   DOMAIN SEARCH RESULTS — cart.php?a=add&domain=register
   .spotlight-tld: white dashed box "test.com is unavailable"
   .tt-domain-list-wrap.bg-white: Bootstrap bg-white TLD list
   .tld-row.highlighted: light blue suggested domain row
   ================================================================= */
body.dark-mode .spotlight-tld {
    background: #161b22 !important;
    border-color: #388bfd !important;
    color: #c9d1d9 !important;
}
body.dark-mode .spotlight-tld .domain-lookup-result,
body.dark-mode .spotlight-tld span,
body.dark-mode .spotlight-tld p {
    color: #c9d1d9 !important;
}
/* Bootstrap bg-white override on TLD wrap */
body.dark-mode .tt-domain-list-wrap,
body.dark-mode .bg-white.tt-domain-list-wrap {
    background: #161b22 !important;
    background-color: #161b22 !important;
}
/* TLD alternative cards (.online / .host / .club etc.) */
body.dark-mode .spotlight-tld-results .spotlight-tld,
body.dark-mode [class*="tld-card"],
body.dark-mode .tld-row {
    background: #0d1117 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
/* Highlighted "Suggested Domains" row */
body.dark-mode .tld-row.highlighted,
body.dark-mode .filtered-row.highlighted {
    background: rgba(56,139,253,0.08) !important;
}
/* TLD domain name text */
body.dark-mode .tld-row .tld,
body.dark-mode .tld-row .domain-name {
    color: #e6edf3 !important;
}
/* Unavailable badge */
body.dark-mode .spotlight-tld .unavailable,
body.dark-mode .btn-unavailable {
    background: #21262d !important;
    color: #8b949e !important;
    border-color: #30363d !important;
}

/* =================================================================
   SITELOCK PAGE + similar service cards (.services-one)
   .services-one: light gray rgb(247,247,247) feature cards
   .number-box: white "01/02/03" circle badges
   .custom-check: white checkmark icon bg
   ================================================================= */
body.dark-mode .services-one {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}
body.dark-mode .services-one h4,
body.dark-mode .services-one h3 {
    color: #e6edf3 !important;
}
body.dark-mode .services-one p {
    color: #8b949e !important;
}
body.dark-mode .number-box {
    background: rgba(56,139,253,0.10) !important;
    color: #388bfd !important;
    border: 1px solid rgba(56,139,253,0.2) !important;
}
body.dark-mode .custom-check {
    background: rgba(56,139,253,0.10) !important;
    color: #388bfd !important;
}

/* =================================================================
   REVIEWS PAGE — reviews.php
   ================================================================= */

/* ── "Share Your Experience" form card (was white) ── */
body.dark-mode .rv-form-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    border-left-color: #2196f3 !important;   /* keep the blue left accent */
    box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
}
body.dark-mode .rv-form-title {
    color: #e6edf3 !important;
    border-bottom-color: #30363d !important;
}
body.dark-mode .rv-label {
    color: #8b949e !important;
}

/* ── Yes / No vote buttons (was white) ── */
body.dark-mode .rv-vote {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark-mode .rv-vote:hover {
    background: #1c2330 !important;
    border-color: #388bfd !important;
    color: #79b8ff !important;
}

/* ── Verified badge (dark blue text → bright blue) ── */
body.dark-mode .rv-badge-verified {
    background: rgba(56,139,253,0.12) !important;
    color: #79b8ff !important;
    border-color: rgba(56,139,253,0.3) !important;
}

/* ── Login card (not-logged-in variant) ── */
body.dark-mode .rv-login-card {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
body.dark-mode .rv-login-title {
    color: #e6edf3 !important;
}
body.dark-mode .rv-login-text {
    color: #8b949e !important;
}

/* ── Review cards ── */
body.dark-mode .rv-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
body.dark-mode .rv-card-name {
    color: #e6edf3 !important;
}
body.dark-mode .rv-card-date,
body.dark-mode [class*="rv-"][class*="date"],
body.dark-mode [class*="rv-"][class*="time"] {
    color: #8b949e !important;
}
body.dark-mode .rv-card-body,
body.dark-mode .rv-card-body p {
    color: #c9d1d9 !important;
}

/* ── Verified badge (old class name fallback) ── */
body.dark-mode .rv-verified {
    background: rgba(56,139,253,0.12) !important;
    color: #79b8ff !important;
    border-color: rgba(56,139,253,0.3) !important;
}

/* ── Distribution bar track ── */
body.dark-mode .rv-dist-track {
    background: rgba(255,255,255,0.08) !important;
}

/* ── "All Reviews" header ── */
body.dark-mode .rv-reviews-header-title {
    color: #e6edf3 !important;
}

/* ── Review title above card ── */
body.dark-mode .rv-review-title-above {
    color: #79b8ff !important;
}

/* ── Star picker numbers (dark mode) — colors managed by JS paintStars() ── */
body.dark-mode .rv-star-num {
    color: #6b7280;
}
/* ── Rating description text (dark mode) ── */
body.dark-mode .rv-rating-desc {
    color: #79b8ff;
}

/* =================================================================
   PRODUCT DETAILS PAGE — clientarea.php?action=productdetails
   Custom mikrotik module: .content-area / .quick-link / .server-item
   ================================================================= */

/* Main content wrapper — light gray #f4f7fa → dark */
body.dark-mode .content-area {
    background: #0d1117 !important;
}

/* Quick-link buttons ("إدارة السيرفرات" / "الوصول للأجهزة") */
body.dark-mode .quick-link {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #79b8ff !important;
}
body.dark-mode .quick-link:hover {
    background: #1c2330 !important;
    border-color: #388bfd !important;
}

/* Server list rows */
body.dark-mode .server-item {
    background: #161b22 !important;
    border-color: #30363d !important;
}
body.dark-mode .server-item .server-title {
    color: #e6edf3 !important;
}
body.dark-mode .server-item .detail-label {
    color: #8b949e !important;
}
body.dark-mode .server-item .server-details {
    color: #c9d1d9 !important;
}

/* Service group header — replaces bright green gradient with dark theme */
body.dark-mode .service-header-box {
    background: linear-gradient(135deg, #1c2330 0%, #21262d 100%) !important;
    border: 1px solid rgba(56,139,253,0.25) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
body.dark-mode .service-header-box .service-title,
body.dark-mode .service-header-box .service-info {
    color: #e6edf3 !important;
}

/* =================================================================
   CODEGUARD PAGE — store/codeguard
   .content-block.pricing: lime green rgb(148,200,61) + bg image
   .content-block.faqs: near-white rgb(246,246,246)
   .irs-line: slider track white
   ================================================================= */
body.dark-mode .landing-page.codeguard .content-block.pricing {
    background: #161b22 !important;
    background-image: none !important;
}
body.dark-mode .landing-page.codeguard .content-block.pricing h2,
body.dark-mode .landing-page.codeguard .content-block.pricing h3,
body.dark-mode .landing-page.codeguard .content-block.pricing p,
body.dark-mode .landing-page.codeguard .content-block.pricing label {
    color: #c9d1d9 !important;
}
body.dark-mode .landing-page.codeguard .content-block.pricing .feature-icons span,
body.dark-mode .landing-page.codeguard .content-block.pricing .feature-icons p {
    color: #8b949e !important;
}
/* Slider (ion range slider) */
body.dark-mode .irs-line,
body.dark-mode .irs-line-left,
body.dark-mode .irs-line-mid,
body.dark-mode .irs-line-right {
    background: #30363d !important;
    border-color: #21262d !important;
}
body.dark-mode .irs-bar,
body.dark-mode .irs-bar-edge {
    background: #1f6feb !important;
    border-color: #1f6feb !important;
}
body.dark-mode .irs-slider {
    background: #388bfd !important;
    border-color: #1f6feb !important;
}
body.dark-mode .irs-from,
body.dark-mode .irs-to,
body.dark-mode .irs-single {
    background: #388bfd !important;
    color: #ffffff !important;
}
body.dark-mode .irs-grid-text { color: #8b949e !important; }
body.dark-mode .irs-min, body.dark-mode .irs-max { color: #8b949e !important; background: #21262d !important; }
/* FAQ section */
body.dark-mode .landing-page.codeguard .content-block.faqs {
    background: #0d1117 !important;
}
body.dark-mode .landing-page.codeguard .content-block.faqs h1,
body.dark-mode .landing-page.codeguard .content-block.faqs h2,
body.dark-mode .landing-page.codeguard .content-block.faqs h3,
body.dark-mode .landing-page.codeguard .content-block.faqs h4 {
    color: #79b8ff !important;
}
body.dark-mode .landing-page.codeguard .content-block.faqs p {
    color: #c9d1d9 !important;
}

/* =================================================================
   SSL CERTIFICATES PAGE — store/ssl-certificates
   .validation-levels: light blue rgb(50,123,167) outer section
   .item: white DV/OV/EV type cards
   .item .btn: gray Buy button
   .content-block.detailed-info: near-white comparison section
   .panel-heading: light rgb(248,250,255) accordion headers
   ================================================================= */
body.dark-mode .validation-levels {
    background: #161b22 !important;
}
body.dark-mode .validation-levels h2,
body.dark-mode .validation-levels h3 {
    color: #e6edf3 !important;
}
/* DV / OV / EV selection cards */
body.dark-mode .validation-levels .item {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
}
body.dark-mode .validation-levels .item h4 {
    color: #e6edf3 !important;
}
body.dark-mode .validation-levels .item span,
body.dark-mode .validation-levels .item p {
    color: #8b949e !important;
}
/* Gray Buy button → blue */
body.dark-mode .validation-levels .item .btn {
    background: #388bfd !important;
    color: #ffffff !important;
    border-color: #1f6feb !important;
}
body.dark-mode .validation-levels .item .btn:hover {
    background: #1f6feb !important;
    color: #ffffff !important;
}
/* Comparison table outer wrapper */
body.dark-mode .content-block.detailed-info {
    background: #0d1117 !important;
}
/* SSL comparison tab nav — #nav-ssl — inactive <a> have color:rgb(45,55,72) dark navy */
body.dark-mode #nav-ssl .nav.navbar-nav li > a,
body.dark-mode .landing-page.ssl .navbar-nav li > a {
    color: #c9d1d9 !important;
    border: 1px solid #30363d !important;
    background: transparent !important;
}
body.dark-mode #nav-ssl .nav.navbar-nav li > a:hover,
body.dark-mode .landing-page.ssl .navbar-nav li > a:hover {
    color: #e6edf3 !important;
    background: #1c2330 !important;
    border-color: #388bfd !important;
}
body.dark-mode #nav-ssl .nav.navbar-nav li.active > a,
body.dark-mode .landing-page.ssl .navbar-nav li.active > a {
    color: #ffffff !important;
}
/* Accordion panel headers — override Bootstrap .panel-default > .panel-heading */
body.dark-mode .panel-heading,
body.dark-mode .panel .panel-heading,
body.dark-mode .panel-default > .panel-heading,
body.dark-mode .panel-group .panel-heading {
    background: #161b22 !important;
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #e6edf3 !important;
}
body.dark-mode .panel-heading .panel-title,
body.dark-mode .panel-heading .panel-title a,
body.dark-mode .panel-heading .panel-title > a {
    color: #e6edf3 !important;
}
body.dark-mode .panel-heading .panel-title a:hover {
    color: #79b8ff !important;
}
/* Accordion chevron/arrow icon color */
body.dark-mode .panel-heading .fas,
body.dark-mode .panel-heading .far,
body.dark-mode .panel-heading .fal,
body.dark-mode .panel-heading .panel-title a i,
body.dark-mode .panel-heading .panel-title i,
body.dark-mode .panel-heading .panel-title a span {
    color: #388bfd !important;
}
/* SSL trust badge wrapper (browser mockup) */
body.dark-mode .validation-levels .wrapper {
    background: #1c2330 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
}
/* Orange "Browsers have changed" standout section */
body.dark-mode .standout-1 {
    background: #161b22 !important;
    background-image: none !important;
}
body.dark-mode .standout-1 h2,
body.dark-mode .standout-1 h3,
body.dark-mode .standout-1 p {
    color: #c9d1d9 !important;
}
/* White browser mockup card inside standout */
body.dark-mode .standout-1 .wrapper {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
}
body.dark-mode .standout-1 .wrapper p { color: #8b949e !important; }

/* =================================================================
   .ng-section-dark — dark blue gradient section (Grow Your Hosting Business etc.)
   gradient: linear-gradient(135deg, #060e24, #0d1547) clashes with dark mode palette
   Override: remove gradient, use flat dark bg to match rest of site
   ================================================================= */
body.dark-mode .ng-section-dark {
    background: #0d1117 !important;
    background-image: none !important;
}

/* =================================================================
   PRICING CARDS — .ng-pricing-btn
   Regular button: blue gradient (already correct)
   Featured card button: white bg + blue text (light-mode design)
   In dark mode → change to blue gradient + white text to match theme
   ================================================================= */
body.dark-mode .ng-pricing-card.featured .ng-pricing-btn {
    background: linear-gradient(135deg, #1f6feb, #388bfd) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(56,139,253,0.35) !important;
}
body.dark-mode .ng-pricing-card.featured .ng-pricing-btn:hover {
    background: linear-gradient(135deg, #388bfd, #79b8ff) !important;
    color: #ffffff !important;
}

/* =================================================================
   SHARED HOSTING PAGE — Technical Specs cards + App logo containers
   .ng-spec-card: white bg, text already correct dark-mode colors
   .ng-app-logo: white bg wrapping app/software logo images
   ================================================================= */
body.dark-mode .ng-spec-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
body.dark-mode .ng-spec-card h5,
body.dark-mode .ng-spec-card h4,
body.dark-mode .ng-spec-card h3 {
    color: #8b949e !important;
    letter-spacing: 0.08em;
}
body.dark-mode .ng-spec-card p {
    color: #c9d1d9 !important;
}
/* App/software logo container */
body.dark-mode .ng-app-logo {
    background: #1c2330 !important;
    border-color: #30363d !important;
}

/* =================================================================
   DOMAIN TRANSFER FORM — Input & Select visibility
   .input class has border: 0px — invisible on dark bg
   Fix: add visible border + subtle bg so fields stand out
   ================================================================= */
body.dark-mode .domain-transfer-wrap .input,
body.dark-mode .domaintrans-form .input {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}
body.dark-mode .domain-transfer-wrap .input:focus,
body.dark-mode .domaintrans-form .input:focus {
    border-color: #388bfd !important;
    box-shadow: 0 0 0 3px rgba(56,139,253,0.15) !important;
    outline: none !important;
}
body.dark-mode .domain-transfer-wrap .input::placeholder,
body.dark-mode .domaintrans-form .input::placeholder {
    color: #484f58 !important;
}
/* Select — keep native browser arrow only, no custom image */
body.dark-mode .domaintrans-form select.input {
    background-image: none !important;
}

/* =================================================================
   DOMAIN TRANSFER PAGE — Outer container + TLD cards
   Outer: .upside.bg-white (Bootstrap bg-white class forces white)
   Cards: .domain-tld-price — rgba(13,21,71,0.1) on white = light gray
   ================================================================= */
body.dark-mode .upside {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
body.dark-mode .domain-tld-price {
    background: rgba(56,139,253,0.07) !important;
    border: 1px solid #30363d !important;
}
body.dark-mode .domain-tld-price:hover {
    background: rgba(56,139,253,0.14) !important;
    border-color: #388bfd !important;
}
body.dark-mode .domain-tld-price .name { color: #e6edf3 !important; }
body.dark-mode .domain-tld-price .content { color: #8b949e !important; }
body.dark-mode .domain-tld-price .starting { color: #8b949e !important; }
body.dark-mode .domain-tld-price .tldprice { color: #388bfd !important; }
body.dark-mode .domain-tld-price .link { color: #79b8ff !important; }
/* Icon circle in services section on transfer page */
body.dark-mode .services-two .icon {
    background: rgba(56,139,253,0.12) !important;
    color: #388bfd !important;
}

/* =================================================================
   DOMAIN PROMOS PAGE — TLD table (.domain-tld-table)
   Outer container: .upside — already handled above
   TR alternating rows: rgb(249,249,249) — must override per-row
   TD text: rgb(13,21,71) dark navy — must fix
   ================================================================= */
body.dark-mode .domain-tld-table table {
    background: #161b22 !important;
}
body.dark-mode .domain-tld-table table tbody tr {
    background: #0d1117 !important;
}
body.dark-mode .domain-tld-table table tbody tr:nth-child(even) {
    background: #161b22 !important;
}
body.dark-mode .domain-tld-table table tbody tr:hover {
    background: #1c2330 !important;
}
body.dark-mode .domain-tld-table table td {
    color: #c9d1d9 !important;
    border-color: #21262d !important;
}
body.dark-mode .domain-tld-table table td:first-child {
    color: #e6edf3 !important;
    font-weight: 600 !important;
}
body.dark-mode .domain-tld-table table th {
    border-color: transparent !important;
}

/* =================================================================
   DOMAIN SEARCH — TLD PRICING TABLE (.ng-domain-table-wrap)
   Confirmed via DevTools: wrap=white, th=rgb(247,249,252), td text=rgb(13,21,71)
   No classes on table/thead/tr/th/td — all targeted via parent
   ================================================================= */
body.dark-mode .ng-domain-table-wrap {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
/* Header row */
body.dark-mode .ng-domain-table-wrap table th {
    background: #1c2330 !important;
    color: #8b949e !important;
    border-bottom-color: #30363d !important;
}
/* Data rows */
body.dark-mode .ng-domain-table-wrap table td {
    color: #c9d1d9 !important;
    border-bottom-color: #21262d !important;
    border-color: #21262d !important;
}
body.dark-mode .ng-domain-table-wrap table tr {
    border-bottom: 1px solid #21262d !important;
}
body.dark-mode .ng-domain-table-wrap table tbody tr:hover {
    background: #1c2330 !important;
}
/* TLD name column — make it stand out slightly */
body.dark-mode .ng-domain-table-wrap table td:first-child {
    color: #e6edf3 !important;
    font-weight: 600 !important;
}

/* =================================================================
   CLIENT AREA — MY INVOICES LIST (clientarea.php?action=invoices)
   White offender: div.listtable (background: rgb(255,255,255))
   Also: td cells inside listtable are white via inherited/default bg
   ================================================================= */
body.dark-mode .listtable {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}
body.dark-mode .listtable td {
    background-color: #161b22 !important;
    border-color: #21262d !important;
}
body.dark-mode .listtable tbody tr:hover td {
    background-color: #1c2330 !important;
}
body.dark-mode .listtable tbody tr.odd td {
    background-color: #0d1117 !important;
}
body.dark-mode .listtable tbody tr.even td {
    background-color: #161b22 !important;
}
/* DataTables info bottom border was white */
body.dark-mode .dataTables_info {
    border-color: #30363d !important;
    color: #8b949e !important;
}
/* Show entries label */
body.dark-mode .dataTables_length label {
    color: #8b949e !important;
}
body.dark-mode .dataTables_length select {
    background-color: #1c2330 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}

/* =================================================================
   MANAGE PRODUCT PAGE (clientarea.php?action=productdetails)
   1) .product-details.clearfix — white billing info card (right side)
   2) .lu-tile.lu-tile--btn    — white VPS management tiles
   3) .lu-widget               — VM info widget panel
   4) .lu-preloader-container  — white loading overlay inside widget
   ================================================================= */
body.dark-mode .product-details.clearfix {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
/* Right billing info card — has white-to-lightblue gradient as background-image
   Values are bare text nodes so color must be set directly on the container */
body.dark-mode .product-details .col-md-6.text-center {
    background: #161b22 !important;
    background-image: none !important;
    border-radius: 0 12px 12px 0 !important;
    color: #c9d1d9 !important;
}
body.dark-mode .product-details .col-md-6.text-center h4 {
    color: #8b949e !important;
    font-size: 0.7em !important;
    letter-spacing: 0.05em !important;
}
body.dark-mode .product-details.clearfix h3,
body.dark-mode .product-details.clearfix h4,
body.dark-mode .product-details.clearfix strong,
body.dark-mode .product-details.clearfix label,
body.dark-mode .product-details.clearfix .label-title {
    color: #e6edf3 !important;
}
body.dark-mode .product-details.clearfix p,
body.dark-mode .product-details.clearfix span,
body.dark-mode .product-details.clearfix td,
body.dark-mode .product-details.clearfix li {
    color: #c9d1d9 !important;
}
/* VPS management tiles (.lu-tile) */
body.dark-mode .lu-tile {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .lu-tile:hover {
    background-color: #1c2330 !important;
    border-color: #388bfd !important;
}
body.dark-mode .lu-tile--btn {
    background-color: #161b22 !important;
    color: #388bfd !important;
}
body.dark-mode .lu-tile .lu-tile__title,
body.dark-mode .lu-tile .lu-tile__icon {
    color: #388bfd !important;
}
/* VM info widget */
body.dark-mode .lu-widget {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .lu-widget * {
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}
body.dark-mode .lu-widget h1,
body.dark-mode .lu-widget h2,
body.dark-mode .lu-widget h3,
body.dark-mode .lu-widget h4,
body.dark-mode .lu-widget strong {
    color: #e6edf3 !important;
}
/* White loading overlay inside widget */
body.dark-mode .lu-preloader-container,
body.dark-mode .lu-preloader-container--full-screen {
    background-color: rgba(13, 17, 23, 0.86) !important;
}

/* =================================================================
   MANAGE PRODUCT — BACKUPS / SERVICE MANAGEMENT PAGES (.lu-* widgets)
   1) .lu-progress__bar track — light gray background
   2) .lu-top__search  — white search box
   3) .lu-form-indicator — white checkbox
   4) .lu-switch__handle — white toggle knob (keep white — it's the handle)
   ================================================================= */
/* Progress bar track */
body.dark-mode .lu-progress__bar {
    background-color: #21262d !important;
}
body.dark-mode .lu-progress__bar.lu-progressbar--primary {
    background-color: #21262d !important;
}
/* Filled part of progress bar */
body.dark-mode .lu-progress__fill,
body.dark-mode .lu-progressbar__fill {
    background-color: #388bfd !important;
}
/* Search box */
body.dark-mode .lu-top__search,
body.dark-mode .lu-input-group.lu-top__search {
    background-color: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
    color: #c9d1d9 !important;
}
body.dark-mode .lu-top__search input,
body.dark-mode .lu-top__search .lu-input {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border: none !important;
}
body.dark-mode .lu-top__search .lu-input::placeholder {
    color: #8b949e !important;
}
body.dark-mode .lu-top__search .lu-input-group__addon,
body.dark-mode .lu-top__search svg,
body.dark-mode .lu-top__search i {
    color: #8b949e !important;
    background-color: transparent !important;
}
/* Checkbox — .lu-form-indicator */
body.dark-mode .lu-form-indicator {
    background-color: #21262d !important;
    border-color: #30363d !important;
}
body.dark-mode input:checked + .lu-form-indicator,
body.dark-mode .lu-checkbox--checked .lu-form-indicator {
    background-color: #388bfd !important;
    border-color: #388bfd !important;
}
/* Table rows in lu-widget */
body.dark-mode .lu-widget table tr {
    border-color: #21262d !important;
}
body.dark-mode .lu-widget table tr:hover {
    background-color: #1c2330 !important;
}
/* lu-widget text overrides */
body.dark-mode .lu-widget .lu-text-muted,
body.dark-mode .lu-widget .lu-label {
    color: #8b949e !important;
}

/* =================================================================
   MANAGE PRODUCT — MODAL DIALOGS (.lu-modal)
   Reinstall / confirm modals — white content area + light alerts
   ================================================================= */
body.dark-mode .lu-modal__content {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .lu-modal__top,
body.dark-mode .lu-top {
    color: #e6edf3 !important;
    border-bottom-color: #30363d !important;
}
body.dark-mode .lu-top__title,
body.dark-mode .lu-modal__content h1,
body.dark-mode .lu-modal__content h2,
body.dark-mode .lu-modal__content h3,
body.dark-mode .lu-modal__content h4,
body.dark-mode .lu-modal__content strong {
    color: #e6edf3 !important;
}
body.dark-mode .lu-modal__content p,
body.dark-mode .lu-modal__content span,
body.dark-mode .lu-modal__content label {
    color: #c9d1d9 !important;
}
/* Close (X) button */
body.dark-mode .lu-modal__content .lu-btn--link,
body.dark-mode .lu-modal__content .lu-btn--default {
    color: #8b949e !important;
}
body.dark-mode .lu-modal__content .lu-btn--link:hover {
    color: #e6edf3 !important;
}
/* Danger alert (red/pink → dark red) */
body.dark-mode .lu-alert--danger {
    background-color: rgba(248, 81, 73, 0.12) !important;
    border-color: rgba(248, 81, 73, 0.3) !important;
    color: #ffa198 !important;
}
body.dark-mode .lu-alert--danger * { color: #ffa198 !important; }
/* Info alert (light blue → dark blue) */
body.dark-mode .lu-alert--info {
    background-color: rgba(56, 139, 253, 0.1) !important;
    border-color: rgba(56, 139, 253, 0.3) !important;
    color: #79b8ff !important;
}
body.dark-mode .lu-alert--info * { color: #79b8ff !important; }
/* Warning alert */
body.dark-mode .lu-alert--warning {
    background-color: rgba(210, 153, 34, 0.12) !important;
    border-color: rgba(210, 153, 34, 0.3) !important;
    color: #e3b341 !important;
}
body.dark-mode .lu-alert--warning * { color: #e3b341 !important; }
/* Success alert */
body.dark-mode .lu-alert--success {
    background-color: rgba(63, 185, 80, 0.12) !important;
    border-color: rgba(63, 185, 80, 0.3) !important;
    color: #56d364 !important;
}
body.dark-mode .lu-alert--success * { color: #56d364 !important; }
/* Password / text inputs inside modal */
body.dark-mode .lu-modal__content input,
body.dark-mode .lu-modal__content .lu-input,
body.dark-mode .lu-modal__content textarea {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
/* Modal overlay backdrop */
body.dark-mode .lu-modal__overlay,
body.dark-mode .lu-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}
/* Search input — all.min.css sets:
   .dataTables_wrapper .dataTables_filter label .form-control {
       background: url(search.svg) #fff no-repeat ...;  ← white bg + image
   }
   Must use the FULL background shorthand (not just background-color) to reset image too */
body.dark-mode .dataTables_wrapper .dataTables_filter label .form-control,
body.dark-mode .dataTables_wrapper .dataTables_filter label input[type="search"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #0d1117 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5.5' stroke='%238b949e' stroke-width='2' fill='none'/%3E%3Cline x1='12.5' y1='12.5' x2='18' y2='18' stroke='%238b949e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-size: 18px 18px !important;
    color: #c9d1d9 !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding-left: 36px !important;
}
body.dark-mode .dataTables_filter input[type="search"]::-webkit-search-cancel-button,
body.dark-mode .dataTables_filter input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none !important;
}

/* ── Knowledgebase articles — override all admin inline styles ── */
/* 1. Force all text light — catches ANY dark inline color the admin writes */
body.dark-mode article.tt-new-content * {
    color: #c9d1d9 !important;
}
/* Restore intentional light colors on dark admin backgrounds */
body.dark-mode article.tt-new-content [style*="color:#fff"],
body.dark-mode article.tt-new-content [style*="color:#FFF"],
body.dark-mode article.tt-new-content [style*="color:#ffffff"],
body.dark-mode article.tt-new-content [style*="color:#FFFFFF"] { color: #f0f6fc !important; }
body.dark-mode article.tt-new-content [style*="color:#90caf9"] { color: #90caf9 !important; }
body.dark-mode article.tt-new-content [style*="color:#bbdefb"] { color: #bbdefb !important; }
body.dark-mode article.tt-new-content a { color: #79b8ff !important; }
/* 2. Light blue info boxes */
body.dark-mode article.tt-new-content [style*="#f0f4ff"] {
    background-color: rgba(33,150,243,0.10) !important;
    border-color: rgba(33,150,243,0.35) !important;
}
/* 3. Light blue-gray section headers */
body.dark-mode article.tt-new-content [style*="#e8edf8"] {
    background-color: rgba(21,101,192,0.18) !important;
}
/* 4. White backgrounds */
body.dark-mode article.tt-new-content [style*="background-color:#ffffff"],
body.dark-mode article.tt-new-content [style*="background-color: #ffffff"] {
    background-color: #0d1117 !important;
}
/* 5. Light pink/red section headers */
body.dark-mode article.tt-new-content [style*="#fbe9e7"] {
    background-color: rgba(244,67,54,0.12) !important;
}
/* 6. Yellow/amber recommendation boxes (#fff8e1 with #ffc107 border) */
body.dark-mode article.tt-new-content [style*="#fff8e1"] {
    background-color: rgba(255,193,7,0.10) !important;
    border-color: rgba(255,193,7,0.40) !important;
}
/* 7. Light green boxes (#e8f5e9 with #81c784 border) */
body.dark-mode article.tt-new-content [style*="#e8f5e9"] {
    background-color: rgba(76,175,80,0.10) !important;
    border-color: rgba(129,199,132,0.35) !important;
}
/* Very light green (#f0fdf4) */
body.dark-mode article.tt-new-content [style*="#f0fdf4"] {
    background-color: rgba(76,175,80,0.08) !important;
    border-color: rgba(76,175,80,0.30) !important;
}
/* Very light blue (#eff6ff) */
body.dark-mode article.tt-new-content [style*="#eff6ff"] {
    background-color: rgba(33,150,243,0.10) !important;
    border-color: rgba(33,150,243,0.30) !important;
}
/* Light amber (#fffbeb) */
body.dark-mode article.tt-new-content [style*="#fffbeb"] {
    background-color: rgba(245,158,11,0.10) !important;
    border-color: rgba(245,158,11,0.35) !important;
}
/* White via background shorthand — use semicolon to avoid matching #fff8e1, #fffbeb etc. */
body.dark-mode article.tt-new-content [style*="background:#fff;"],
body.dark-mode article.tt-new-content [style*="background: #fff;"],
body.dark-mode article.tt-new-content [style*="background:#ffffff;"],
body.dark-mode article.tt-new-content [style*="background: #ffffff;"] {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}
/* 8. Light indigo/purple boxes (#e8eaf6) */
body.dark-mode article.tt-new-content [style*="#e8eaf6"] {
    background-color: rgba(63,81,181,0.15) !important;
}
/* 9. Blue-grey neutral boxes (#eceff1) */
body.dark-mode article.tt-new-content [style*="#eceff1"] {
    background-color: #1c2330 !important;
    border-color: #30363d !important;
}
/* 10. Light blue info boxes (#e3f2fd) */
body.dark-mode article.tt-new-content [style*="#e3f2fd"] {
    background-color: rgba(33,150,243,0.12) !important;
}
/* n8n article light cards / table rows / inline code */
body.dark-mode article.tt-new-content [style*="#fafbfd"],
body.dark-mode article.tt-new-content [style*="#f4f7fb"] {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}
body.dark-mode article.tt-new-content [style*="#eef3fb"] {
    background-color: rgba(33,150,243,0.12) !important;
    border-color: rgba(56,139,253,0.35) !important;
}
body.dark-mode article.tt-new-content [style*="#e0e5ed"],
body.dark-mode article.tt-new-content [style*="#bbdefb"] {
    border-color: #30363d !important;
}
body.dark-mode article.tt-new-content [style*="#ffebee"],
body.dark-mode article.tt-new-content [style*="#ffcdd2"] {
    background-color: rgba(248,81,73,0.10) !important;
    border-color: rgba(248,81,73,0.35) !important;
}
body.dark-mode article.tt-new-content [style*="#fff3e0"] {
    background-color: rgba(245,158,11,0.12) !important;
    border-color: rgba(245,158,11,0.35) !important;
}
/* 11. Light gray neutral boxes */
body.dark-mode article.tt-new-content [style*="#f8fafc"] {
    background-color: #1c2330 !important;
    border-color: #30363d !important;
}
/* 12. Table borders */
body.dark-mode article.tt-new-content table,
body.dark-mode article.tt-new-content td,
body.dark-mode article.tt-new-content tr {
    border-color: #30363d !important;
}
/* 13. Light pink/red (#fff5f5 — "Permanently Blocked Ports" danger boxes) */
body.dark-mode article.tt-new-content [style*="#fff5f5"] {
    background-color: rgba(211,47,47,0.08) !important;
    border-color: rgba(211,47,47,0.30) !important;
}
/* 14. Light sky-blue (#f0f9ff — "Ports Available Upon Request" info boxes) */
body.dark-mode article.tt-new-content [style*="#f0f9ff"] {
    background-color: rgba(33,150,243,0.10) !important;
    border-color: rgba(33,150,243,0.30) !important;
}

/* ── Announcements page — Bootstrap .bg-white override ── */
/* Bootstrap .bg-white has !important — higher specificity + !important beats it */
body.dark-mode .tt-news-wrap.bg-white,
body.dark-mode .announcements .bg-white,
body.dark-mode .primary-content .bg-white {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
}

/* ── Server Status / Network Status page — override admin inline styles ── */
/* CSS !important overrides inline style="" attributes (as long as inline has no !important) */
body.dark-mode .list-group-item {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
}
body.dark-mode .list-group-item *:not(a):not(.btn):not([class*="label"]) {
    color: #c9d1d9 !important;
}
/* Admin info boxes: light-blue → dark-blue tint */
body.dark-mode .list-group-item [style*="#f1f5ff"],
body.dark-mode .list-group-item [style*="f1f5ff"] {
    background: rgba(13, 110, 253, 0.12) !important;
    border-color: rgba(13, 110, 253, 0.4) !important;
}
/* Admin warning boxes: yellow → dark-amber tint */
body.dark-mode .list-group-item [style*="#fff3cd"],
body.dark-mode .list-group-item [style*="fff3cd"],
body.dark-mode .list-group-item [style*="ffeeba"] {
    background: rgba(255, 193, 7, 0.12) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}
/* Admin white table rows */
body.dark-mode .list-group-item [style*="background-color: #ffffff"],
body.dark-mode .list-group-item [style*="background-color:#ffffff"],
body.dark-mode .list-group-item [style*="background: #fff"],
body.dark-mode .list-group-item [style*="background:#fff"] {
    background-color: #1c2330 !important;
}
/* Table borders */
body.dark-mode .list-group-item table,
body.dark-mode .list-group-item td,
body.dark-mode .list-group-item tr {
    border-color: #30363d !important;
}

/* ── View Ticket page — reply body & markdown editor ── */
body.dark-mode .ticket-reply,
body.dark-mode .markdown-content {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .ticket-reply *,
body.dark-mode .markdown-content * {
    color: #c9d1d9 !important;
}
body.dark-mode .md-header,
body.dark-mode .md-header.btn-toolbar {
    background-color: #1c2330 !important;
    border-color: #30363d !important;
}
body.dark-mode .md-footer {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark-mode .md-editor {
    border-color: #30363d !important;
}
body.dark-mode .custom-file-label {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .custom-file-label::after {
    background-color: #1c2330 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}

/* ── Renew Services page ── */
body.dark-mode .service-renewals {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}
body.dark-mode .service-renewal {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    border-bottom: 1px solid #30363d !important;
}
body.dark-mode .service-renewal h3,
body.dark-mode .service-renewal h4 {
    color: #e6edf3 !important;
}
body.dark-mode .service-renewal p,
body.dark-mode .service-renewal small,
body.dark-mode .service-renewal .text-muted {
    color: #8b949e !important;
}
body.dark-mode .div-renewal-ineligible,
body.dark-mode .div-renewal-ineligible * {
    color: #8b949e !important;
    border-color: #30363d !important;
}
body.dark-mode .service-renewals select {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
/* Search icon: replace white search.png with dark SVG */
body.dark-mode .service-renewals-filter.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5.5' stroke='%238b949e' stroke-width='2' fill='none'/%3E%3Cline x1='12.5' y1='12.5' x2='18' y2='18' stroke='%238b949e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-position: 8px 5px !important;
    background-size: 20px 20px !important;
}

/* Dark mode icon brightness */
body.dark-mode i,
body.dark-mode .fas,
body.dark-mode .far,
body.dark-mode .fal,
body.dark-mode .fab,
body.dark-mode svg:not(.brand-logo):not(.logo-light):not(.logo-dark) {
    color: #ffffff !important;
    stroke: currentColor;
}
body.dark-mode svg:not(.brand-logo):not(.logo-light):not(.logo-dark) path,
body.dark-mode svg:not(.brand-logo):not(.logo-light):not(.logo-dark) circle,
body.dark-mode svg:not(.brand-logo):not(.logo-light):not(.logo-dark) line {
    stroke: currentColor;
}
body.dark-mode .ng-services-grid .ng-si-icon img {
    filter: brightness(0) invert(1) !important;
}
body.dark-mode .ng-be-icons .ng-feature-icon img {
    filter: brightness(0) invert(1) !important;
}
body.dark-mode .ng-tabs-wrap .ng-tab-icon {
    filter: brightness(0) invert(1) !important;
}
body.dark-mode .ng-tabs-wrap .ng-tabs-nav .ng-tab-btn > img {
    filter: brightness(0) invert(1) !important;
}

/* ── lu-selectize custom dropdowns (Edit Server modal, VPS config) ── */
body.dark-mode .lu-selectize-control,
body.dark-mode .lu-selectize-input,
body.dark-mode .lu-selectize-input.lu-form-control {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark-mode .lu-selectize-input .item {
    color: #c9d1d9 !important;
}
body.dark-mode .lu-selectize-dropdown {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
body.dark-mode .lu-selectize-dropdown .option {
    color: #c9d1d9 !important;
}
body.dark-mode .lu-selectize-dropdown .option:hover,
body.dark-mode .lu-selectize-dropdown .option.active {
    background-color: #1c2330 !important;
    color: #e6edf3 !important;
}
body.dark-mode .lu-selectize-dropdown .optgroup-header {
    color: #8b949e !important;
    background-color: #0d1117 !important;
}