/* =====================================================
   RQNET DARK BLUE GLASSMORPHISM THEME
   Versi: 2.0 (Optimized & Cleaned)
   Target: WHMCS Twenty-One / Portal Home
   ===================================================== */

/* =========================================
   1. GLOBAL BACKGROUND & TYPOGRAPHY
   ========================================= */
html, body {
    background: linear-gradient(180deg, #03142f 0%, #082b63 50%, #03142f 100%) !important;
    background-attachment: fixed !important;
    color: #ffffff !important;
}

a {
    color: #66b5ff !important;
    text-decoration: none;
}

a:hover {
    color: #99ccff !important;
}

.sub-heading {
    color: #ffffff !important; /* Diperbaiki dari BLACK agar konsisten dengan dark mode */
}

.font-size-24 {
    color: #ffffff !important;
}

/* =========================================
   2. LAYOUT & CONTAINER TRANSPARENCY
   ========================================= */
#main-body, .main-body, .main-content, 
.wrapper, .content-wrapper, section, 
.container, .container-fluid, .row {
    background: transparent !important;
}

/* =========================================
   3. HEADER & NAVIGATION
   ========================================= */
.listtable, .sorting, .sorting_asc, .sorting_disabled, .dataTables_filter {
    background-color: red !important;
}
.master-breadcrumb, .breadcrumb, 
.home-domain-search, .input-group-wrapper,
.navbar, .navbar-light, .main-navbar-wrapper, 
.navbar-expand-xl, #header, .header {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

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

.master-breadcrumb {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Menu Links */
.navbar a, 
.navbar-light .navbar-nav .nav-link,
.nav-link {
    color: #ffffff !important;
    background: transparent !important;
}

/* Dropdown Menu */
.dropdown-menu {
    background: #06285c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dropdown-item {
    color: #ffffff !important;
}

.dropdown-item:hover {
    background: #ffffff !important;
    color: #000000 !important;
}

/* =========================================
   4. CARDS, PANELS & GLASS EFFECT
   ========================================= */
.p-5, .product, .card, .card-footer, 
.panel, .tile, .well, 
.client-home-panels .panel, .client-home-panels .card,
.domain-checker-container, .dataTables_wrapper,
.ico-container, .card-accent-teal, .card-accent-pomegranate,
.card-accent-sun-flower, .card-accent-asbestos,
.card-accent-green, .card-accent-midnight-blue {
    background: rgba(9, 45, 105, 0.85) !important;
    border: 1px solid rgba(60, 140, 255, 0.2) !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25) !important;
}

.card-header, .panel-heading {
    background: rgba(0, 120, 255, 0.15) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(60, 140, 255, 0.1) !important;
}

/* =========================================
   5. FORMS & INPUTS
   ========================================= */
.form-control, .form-select, input, select, textarea {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important; /* Diperbaiki dari #ffff */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

select option {
    background: #082b63 !important; /* Agar opsi dropdown terbaca di dark mode */
    color: #ffffff !important;
}

.input-group, .domain-promo-box, .account, 
.spotlight-tlds, .spotlight-tld, .domain-available, 
.panel-price, .view-cart-empty, .item {
    background: transparent !important;
    color: #ffffff !important;
}

/* =========================================
   6. TABLES
   ========================================= */
.table, .table-striped, .table-hover, .table-responsive {
    background: transparent !important;
    border: none !important;
}

.table td, .table th {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Pagination */
.paginate_button.disabled, 
.paginate_button.disabled a, 
.paginate_button.disabled .page-link {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #999999 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* =========================================
   7. BUTTONS
   ========================================= */
.btn-primary {
    background: linear-gradient(90deg, #0078ff, #00a8ff) !important;
    border: none !important;
    color: #ffffff !important;
}

.btn, .btn-default, .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-add-to-cart {
    background: linear-gradient(90deg, #0078ff, #00b0ff) !important;
    color: #ffffff !important;
    border: none !important;
}

/* =========================================
   8. SIDEBAR & MARKDOWN EDITOR
   ========================================= */
.sidebar, .sidebar .card, .sidebar .panel, 
.list-group-item {
    background: rgba(6, 35, 85, 0.9) !important;
    color: #ffffff !important;
    border: none !important;
}

textarea.markdown-editor, .md-editor textarea, 
.md-input, textarea#inputMessage, .md-preview {
    background: #082452 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.md-editor > .md-header {
    background: #0a2d66 !important;
}

/* =========================================
   9. DOMAIN CHECKER & UTILITIES
   ========================================= */
.label, .option, .domain-selection-options, 
.domain-searching, .domain-checker-bg,
#frmProductDomain, #DomainSearchResults, 
#domainSearchContainer {
    background: rgba(10, 45, 102, 0.75) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.item-domain {
    font-size: 20px;
}

.guest-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Sembunyikan elemen yang tidak diperlukan */
.topbar, .domain-pricing, .form-inline {
    display: none !important;
}

/* =========================================
   10. FOOTER
   ========================================= */
footer, .footer, footer.footer {
    background: transparent !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* =========================================
   11. MODALS
   ========================================= */
.modal, .modal-content, .modal-body, 
.modal-header, .modal-footer {
    color: #ffffff !important;
    background: rgba(10, 45, 102, 0.95) !important;
    border: 1px solid rgba(60, 140, 255, 0.2) !important;
}

/* =========================================
   12. NEXUS MOBILE TABLE FIX
   ========================================= */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper {
    overflow-x: visible !important;
}

.dataTables_wrapper .table {
    min-width: auto !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .client-home-panels .table, .table {
        font-size: 11px;
    }
    .table td, .table th {
        padding: 6px 4px !important;
    }
}

/* =========================================
   13. HOSTING STORE (ORDER CART)
   ========================================= */
#order-standard_cart .products .product {
    background: rgba(9, 45, 105, 0.95) !important;
    border: 1px solid rgba(0, 120, 255, 0.25) !important;
    border-radius: 24px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s ease !important;
}

#order-standard_cart .products .product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(0, 120, 255, 0.25) !important;
}

#order-standard_cart .products .product header {
    background: #ffffff !important;
    color: #222222 !important;
    padding: 10px 15px !important;
    border-bottom: none !important;
    border-radius: 24px 24px 0 0 !important;
}

#order-standard_cart .products .product header span {
    color: #222222 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

#order-standard_cart .products .product .product-desc {
    color: rgba(255, 255, 255, 0.85) !important;
    min-height: 80px !important;
    font-size: 14px !important;
}

#order-standard_cart .products .product footer {
    background: transparent !important;
    border-top: none !important;
}

#order-standard_cart .products .product footer .price {
    font-size: 26px !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

#order-standard_cart .products .product footer .btn {
    background: linear-gradient(90deg, #0078ff, #00b0ff) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    width: 100% !important;
    font-weight: 600 !important;
    padding: 12px !important;
}

/* Highlight Produk Populer */
#product2 {
    border: 2px solid #00b0ff !important;
    transform: scale(1.03);
    position: relative;
    z-index: 10;
}

#product2::before {
    content: "PALING POPULER";
    position: absolute;
    top: -12px;
    right: 20px;
    background: #00b0ff;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    z-index: 99;
    box-shadow: 0 2px 10px rgba(0, 176, 255, 0.4);
}
/* =========================================
   FIX FINAL: ORDER SUMMARY - BRUTE FORCE
   Target: Semua container putih di checkout
   ========================================= */

/* 1. TARGET SEMUA KEMUNGKINAN CONTAINER PUTIH */
/* Menggunakan kombinasi selector yang sangat luas */
body.page-cart .card,
body.page-cart .panel,
body.page-cart .well,
body.page-cart .alert-info,
body.page-cart .alert-success,
body.page-cart .table-responsive,
body.page-cart div[class*="summary"],
body.page-cart div[class*="total"],
body.page-cart div[class*="order"],
#order-summary,
#cart-summary,
.cart-total,
.panel-order-summary,

.order-summary,
.view-cart-tabs
 {
    background: rgba(9, 45, 105, 0.9) !important; /* Biru gelap opaque */
    border: 1px solid rgba(60, 140, 255, 0.2) !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25) !important;
    color: #ffffff !important;
}
.summary-container, .tab-content, .view-cart-tabs {
    background-color: transparent !important;
}
.nav-tabs {
   background: rgba(0, 120, 255, 0.15) !important;
}
/* 2. PAKSA TEKS DI DALAMNYA JADI PUTIH */
body.page-cart .card *,
body.page-cart .panel *,
body.page-cart .well *,
body.page-cart div[class*="summary"] *,
body.page-cart div[class*="total"] *,
body.page-cart div[class*="order"] * {
    color: #ffffff !important;
}

/* Kecualikan input field agar tetap bisa dibaca */
body.page-cart .card input,
body.page-cart .panel input,
body.page-cart .well input,
body.page-cart div[class*="summary"] input,
body.page-cart div[class*="total"] input,
body.page-cart div[class*="order"] input {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(60, 140, 255, 0.3) !important;
}

/* 3. TOMBOL CHECKOUT & CONTINUE SHOPPING */
.btn-checkout,
a.btn-success,
button[type="submit"].btn-success,
.continue-shopping,
a.btn-default {
    background: linear-gradient(90deg, #0078ff, #00b0ff) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 120, 255, 0.3) !important;
    border-radius: 6px !important;
}

.btn-checkout:hover,
a.btn-success:hover,
.continue-shopping:hover {
    background: linear-gradient(90deg, #005ecb, #008ecc) !important;
    transform: translateY(-2px);
}

/* Khusus tombol Continue Shopping (secondary) */
.nav-link,
.continue-shopping,
a.btn-default {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.continue-shopping:hover,
a.btn-default:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}
/*
.view-cart-tabs {
    background-color: transparent !important;
} */