/* ============================================================
   AURORA GLASS THEME — loads after all other stylesheets.
   Gradient backgrounds, frosted-glass cards, indigo→purple accents.
   Light + dark mode. Remove this one file to restore the old look.
============================================================ */

/* ---------- PAGE BACKGROUNDS ---------- */
body{
    background:linear-gradient(135deg,#ffffff 0%,#f2f8ff 45%,#eaf4ff 100%) !important;
    background-attachment:fixed !important;
    color:#211f38;
}
body.dark-mode{
    background:linear-gradient(135deg,#061426 0%,#08213f 55%,#0a1a33 100%) !important;
    background-attachment:fixed !important;
    color:#e9e6fa;
}
body.dark-mode .main-content{
    background:transparent !important;
}

/* ---------- GLASS CARD TREATMENT ---------- */
.sidebar,
.topbar,
.mobile-header,
.card,
.service-box,
.preview-box,
.info-box,
.request-box,
.request-card,
.wallet-card,
.modal-content,
.deposits-header-card,
.deposit-history-card,
.hero-card,
.empty{
    background:rgba(255,255,255,.68) !important;
    border:1px solid rgba(255,255,255,.85) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 32px rgba(2,132,199,.10) !important;
}
.card, .service-box, .preview-box, .info-box, .request-box,
.wallet-card, .deposits-header-card, .deposit-history-card{
    border-radius:18px !important;
}

body.dark-mode .sidebar,
body.dark-mode .topbar,
body.dark-mode .mobile-header,
body.dark-mode .card,
body.dark-mode .service-box,
body.dark-mode .preview-box,
body.dark-mode .info-box,
body.dark-mode .request-box,
body.dark-mode .request-card,
body.dark-mode .wallet-card,
body.dark-mode .modal-content,
body.dark-mode .deposits-header-card,
body.dark-mode .deposit-history-card,
body.dark-mode .hero-card,
body.dark-mode .empty{
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 8px 32px rgba(0,0,0,.35) !important;
}

/* Inner surfaces (slightly more solid than cards) */
.service-fee, .amount-input-box, .ngn-preview, .bank-details-box,
.payment-tabs, .tabs, .upload-box, .extra-card, .deposit-reference-box,
.modal-header{
    background:rgba(255,255,255,.55) !important;
    border-color:rgba(2,132,199,.18) !important;
}
body.dark-mode .service-fee,
body.dark-mode .amount-input-box,
body.dark-mode .ngn-preview,
body.dark-mode .bank-details-box,
body.dark-mode .payment-tabs,
body.dark-mode .tabs,
body.dark-mode .upload-box,
body.dark-mode .extra-card,
body.dark-mode .deposit-reference-box,
body.dark-mode .modal-header{
    background:rgba(255,255,255,.05) !important;
    border-color:rgba(255,255,255,.12) !important;
}

/* ---------- SIDEBAR ---------- */
.nav-item.active{
    background:rgba(2,132,199,.12) !important;
    box-shadow:none !important;
    color:#1d5fa8 !important;
}
.nav-item.active i{ color:#0ea5e9 !important; }
.nav-item:hover{ background:rgba(2,132,199,.08) !important; }
.logo-icon, .user-avatar{
    background:linear-gradient(135deg,#0284c7,#2563eb) !important;
}
body.dark-mode .nav-item.active{
    background:rgba(56,189,248,.14) !important;
    color:#bae0fd !important;
}
body.dark-mode .nav-item.active i{ color:#7dd3fc !important; }
body.dark-mode .nav-item:hover{ background:rgba(56,189,248,.08) !important; }

/* ---------- TEXT ---------- */
h1, h2, h3, h4, .logo-text, .user-name,
.fee-price, .deposit-amount, .topbar-balance{ color:#211f38; }
.subtitle, .user-email, .upload-content p, .support-text,
.min-deposit-note, .deposit-date{ color:#6d6890 !important; }

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4,
body.dark-mode p, body.dark-mode label,
body.dark-mode .logo-text, body.dark-mode .user-name,
body.dark-mode .fee-price, body.dark-mode .deposit-amount,
body.dark-mode .topbar-balance, body.dark-mode .modal-body td,
body.dark-mode .check-list li, body.dark-mode .fee-left,
body.dark-mode .extra-card .name, body.dark-mode .amount-heading,
body.dark-mode .dollar-sign, body.dark-mode .amount-input-box input,
body.dark-mode .ngn-preview strong, body.dark-mode .bank-row strong,
body.dark-mode .user-name, body.dark-mode .request-card h3,
body.dark-mode .empty h3{
    color:#f1efff !important;
}
body.dark-mode .subtitle, body.dark-mode .user-email,
body.dark-mode .upload-content p, body.dark-mode .support-text,
body.dark-mode .min-deposit-note, body.dark-mode .deposit-date,
body.dark-mode .ngn-preview, body.dark-mode .bank-row,
body.dark-mode .nav-item, body.dark-mode .deposit-method{
    color:#a8a3d0 !important;
}

/* Accent-colored headings */
.service-box h2, .upload-content h3{
    background:linear-gradient(90deg,#0284c7,#2563eb);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
}
body.dark-mode .service-box h2, body.dark-mode .upload-content h3{
    background:linear-gradient(90deg,#7dd3fc,#93c5fd);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
}

/* ---------- BUTTONS ---------- */
.create-btn, .confirm-btn, .proceed-btn, .topbar-topup,
.payment-tab.active, .btn-primary, .upload-icon{
    background:linear-gradient(90deg,#0284c7,#2563eb) !important;
    color:#ffffff !important;
    border:none !important;
}
.create-btn:hover, .confirm-btn:hover, .proceed-btn:not(:disabled):hover,
.topbar-topup:hover{
    filter:brightness(1.08);
}
.proceed-btn:disabled{
    background:linear-gradient(90deg,#7dd3fc,#93c5fd) !important;
    color:#ffffff !important;
}
body.dark-mode .create-btn, body.dark-mode .confirm-btn,
body.dark-mode .proceed-btn, body.dark-mode .topbar-topup,
body.dark-mode .payment-tab.active{
    background:linear-gradient(90deg,#38bdf8,#60a5fa) !important;
    color:#1e1b38 !important;
}

/* keep the insufficient-funds state amber and readable */
.confirm-btn.insufficient{
    background:linear-gradient(90deg,#f59e0b,#f97316) !important;
    color:#fff !important;
}
body.dark-mode .confirm-btn.insufficient{
    color:#3b1c05 !important;
}

/* secondary buttons */
.view-btn, .refresh-btn, .topbar-theme-btn, .collapse-btn{
    background:rgba(2,132,199,.10) !important;
    border:1px solid rgba(2,132,199,.22) !important;
    color:#1d5fa8 !important;
}
body.dark-mode .view-btn, body.dark-mode .refresh-btn,
body.dark-mode .topbar-theme-btn, body.dark-mode .collapse-btn{
    background:rgba(56,189,248,.12) !important;
    border:1px solid rgba(56,189,248,.25) !important;
    color:#bae0fd !important;
}

/* ---------- ACCENTS & DETAILS ---------- */
.upload-box{ border-style:dashed !important; }
.extra-card:has(input[type="checkbox"]:checked){
    border-color:#8b5cf6 !important;
    background:rgba(139,92,246,.10) !important;
}
.extra-card input[type="checkbox"]:checked ~ .check{
    background:#8b5cf6 !important;
    border-color:#8b5cf6 !important;
}
.extra-card .price{ color:#0ea5e9 !important; }
body.dark-mode .extra-card .price{ color:#7dd3fc !important; }

.form-group input:focus, .form-group textarea:focus{
    border-color:#8b5cf6 !important;
    box-shadow:0 0 0 3px rgba(139,92,246,.15);
}
body.dark-mode input, body.dark-mode textarea, body.dark-mode select{
    background:rgba(255,255,255,.06) !important;
    border-color:rgba(255,255,255,.15) !important;
    color:#f1efff !important;
}

.deposits-total{
    background:linear-gradient(90deg,#0284c7,#2563eb);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
}
body.dark-mode .deposits-total{
    background:linear-gradient(90deg,#7dd3fc,#93c5fd);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
}

.check-list li i{ color:#8b5cf6 !important; }
body.dark-mode .check-list li i{ color:#7dd3fc !important; }

.proof-upload:hover{ border-color:#8b5cf6 !important; }
.proof-upload i, .proof-text{ color:#0ea5e9 !important; }
body.dark-mode .proof-upload i, body.dark-mode .proof-text{ color:#7dd3fc !important; }
.proof-upload.has-file i, .proof-upload.has-file .proof-text{ color:#16a34a !important; }

/* ---------- MARKETPLACE (Aurora treatment) ---------- */
.market-header-card,
.suggestions-box,
.suggestion-item{
    background:rgba(255,255,255,.68) !important;
    border:1px solid rgba(255,255,255,.85) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 32px rgba(2,132,199,.10) !important;
}
body.dark-mode .market-header-card,
body.dark-mode .suggestions-box,
body.dark-mode .suggestion-item{
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 8px 32px rgba(0,0,0,.35) !important;
}

/* product rows — glass instead of flat dark */
/* product-row styling handled in marketplace.css (deep purple #1c0333) */

/* category chips — glass with violet active state */
.cat-chip,
body.dark-mode .cat-chip{
    background:#1c0333 !important;
    color:#e9dcff !important;
    border:1px solid #2e0a4f !important;
    backdrop-filter:none !important;
}
.cat-chip i,
body.dark-mode .cat-chip i{ color:#7dd3fc !important; }
.cat-chip.active,
body.dark-mode .cat-chip.active{
    background:linear-gradient(90deg,#0284c7,#2563eb) !important;
    color:#fff !important;
    border-color:transparent !important;
    box-shadow:0 6px 16px rgba(2,132,199,.35) !important;
}
.cat-chip.active i,
body.dark-mode .cat-chip.active i{ color:#fff !important; }

/* buy button — gradient */
.buy-btn{
    background:linear-gradient(90deg,#0284c7,#2563eb) !important;
    color:#fff !important;
}
.buy-btn:hover{ filter:brightness(1.08); }
.buy-btn.disabled{
    background:rgba(148,163,184,.3) !important;
    color:#94a3b8 !important;
}

/* accent-colored numbers */
.market-balance,
.product-price,
.suggestion-price{
    background:linear-gradient(90deg,#0284c7,#2563eb);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
}
body.dark-mode .market-balance,
body.dark-mode .product-price,
body.dark-mode .suggestion-price{
    background:linear-gradient(90deg,#7dd3fc,#93c5fd);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
}
.suggestions-title{ color:#0ea5e9 !important; }
body.dark-mode .suggestions-title{ color:#7dd3fc !important; }
.suggestion-name{ color:#211f38 !important; }
body.dark-mode .suggestion-name{ color:#f1efff !important; }

/* ---------- WEBSITES CATALOG (Aurora glass) ---------- */
.web-card,
.web-tabs{
    background:rgba(255,255,255,.68) !important;
    border:1px solid rgba(255,255,255,.85) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 32px rgba(2,132,199,.10) !important;
}
body.dark-mode .web-card,
body.dark-mode .web-tabs{
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 8px 32px rgba(0,0,0,.35) !important;
}
.web-card-body h3{ color:#211f38 !important; }
body.dark-mode .web-card-body h3{ color:#f1efff !important; }
.web-price{
    background:linear-gradient(90deg,#0284c7,#2563eb);
    -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
body.dark-mode .web-price{
    background:linear-gradient(90deg,#7dd3fc,#93c5fd);
    -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
.web-tab.active{ color:#0284c7 !important; }
body.dark-mode .web-tab.active{ background:rgba(56,189,248,.14) !important; color:#bae0fd !important; }