/* ============================================================
   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:#ffffff !important;
    background-attachment:fixed !important;
    color:#211f38;
}
body.dark-mode{
    background:linear-gradient(135deg,#020a1a 0%,#04122e 55%,#030d22 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:#ffffff !important;
    border:1px solid #cbdcef !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 6px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.08) !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,.07) !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:#f7fafd !important;
    border-color:#dde7f2 !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,.07) !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:#ffffff !important;
    border:1px solid #cbdcef !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 6px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.08) !important;
}
body.dark-mode .market-header-card,
body.dark-mode .suggestions-box,
body.dark-mode .suggestion-item{
    background:rgba(255,255,255,.07) !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:#ffffff !important;
    border:1px solid #cbdcef !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 6px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.08) !important;
}
body.dark-mode .web-card,
body.dark-mode .web-tabs{
    background:rgba(255,255,255,.07) !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; }

/* ============================================================
   AMBIENT BLUE GLOW ORBS + CARD SHINE
   Large blurred azure orbs drift slowly behind the layout,
   and cards catch a light sweep on hover.
============================================================ */
body{
    position:relative;
    overflow-x:hidden;
}
body::before{
    content:"";
    position:fixed;
    width:700px;
    height:700px;
    top:-260px;
    left:-240px;
    background:radial-gradient(circle, rgba(14,165,233,.14), transparent 70%);
    filter:blur(120px);
    z-index:-2;
    pointer-events:none;
    animation:orbDriftA 18s ease-in-out infinite alternate;
}
body::after{
    content:"";
    position:fixed;
    width:650px;
    height:650px;
    right:-220px;
    bottom:-220px;
    background:radial-gradient(circle, rgba(37,99,235,.12), transparent 70%);
    filter:blur(120px);
    z-index:-2;
    pointer-events:none;
    animation:orbDriftB 22s ease-in-out infinite alternate;
}
@keyframes orbDriftA{
    0%   { transform:translate(0,0) scale(1); }
    100% { transform:translate(120px,90px) scale(1.15); }
}
@keyframes orbDriftB{
    0%   { transform:translate(0,0) scale(1.1); }
    100% { transform:translate(-110px,-80px) scale(1); }
}
body.dark-mode::before{
    background:radial-gradient(circle, rgba(56,189,248,.42), transparent 70%);
}
body.dark-mode::after{
    background:radial-gradient(circle, rgba(59,130,246,.38), transparent 70%);
}

/* --- card shine sweep on hover --- */
.card,
.market-header-card,
.web-card,
.product-card,
.wallet-card,
.deposit-history-card{
    position:relative;
    overflow:hidden;
}
.card::before,
.market-header-card::before,
.web-card::before,
.product-card::before,
.wallet-card::before,
.deposit-history-card::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-60%;
    width:70%;
    height:300%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform:rotate(20deg);
    transition:left 1s ease;
    pointer-events:none;
    z-index:1;
}
.card:hover::before,
.market-header-card:hover::before,
.web-card:hover::before,
.product-card:hover::before,
.wallet-card:hover::before,
.deposit-history-card:hover::before{
    left:150%;
}
body.dark-mode .card::before,
body.dark-mode .market-header-card::before,
body.dark-mode .web-card::before,
body.dark-mode .product-card::before,
body.dark-mode .wallet-card::before,
body.dark-mode .deposit-history-card::before{
    background:linear-gradient(90deg, transparent, rgba(125,211,252,.18), transparent);
}

/* ============================================================
   MOBILE BOTTOM GAP FIX
   background-attachment:fixed is unreliable on mobile browsers,
   and anything below <body> falls through to the browser's
   default white. Painting <html> too closes the gap.
============================================================ */
html{
    background:#ffffff;
    min-height:100%;
}
html.dark-mode,
body.dark-mode{
    background-color:#04122e;
}
body{
    min-height:100vh;
    background-color:#ffffff;
}
body.dark-mode{
    background-color:#04122e !important;
}

/* On mobile, drop fixed attachment (buggy) and let the colour
   underneath carry the full scroll height instead. */
@media (max-width:900px){
    body,
    body.dark-mode{
        background-attachment:scroll !important;
    }
    body.dark-mode{
        background:#04122e !important;
    }
    body:not(.dark-mode){
        background:#ffffff !important;
    }
    /* stop the iOS rubber-band bounce revealing white */
    html, body{
        overscroll-behavior-y:none;
    }
}

/* ============================================================
   SHARED PAGE HEADER CARD (title + balance + view wallet)
   Rendered by includes/header.php on every page that sets
   $pageHeading. Keeps the balance visible site-wide.
============================================================ */
.page-header-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:#ffffff;
    border:1px solid #cbdcef;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 6px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.08);
    border-radius:18px;
    padding:24px 30px;
    margin-bottom:24px;
}
.page-header-left h1{
    margin:0 0 6px;
    font-size:24px;
    font-weight:800;
    color:#0f172a;
}
.page-header-left p{
    margin:0;
    color:#64748b;
    font-size:15px;
}
.page-header-right{
    text-align:right;
    flex-shrink:0;
}
.page-header-balance{
    font-size:26px;
    font-weight:800;
    background:linear-gradient(90deg,#0284c7,#2563eb);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    line-height:1.2;
}
.page-header-link{
    font-size:13px;
    color:#64748b;
    text-decoration:none;
}
.page-header-link:hover{ text-decoration:underline; }

body.dark-mode .page-header-card{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 8px 32px rgba(0,0,0,.35);
}
body.dark-mode .page-header-left h1{ color:#f1f5f9; }
body.dark-mode .page-header-left p{ color:#94a3b8; }
body.dark-mode .page-header-balance{
    background:linear-gradient(90deg,#38bdf8,#60a5fa);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
body.dark-mode .page-header-link{ color:#94a3b8; }

@media(max-width:640px){
    /* keep title left / balance right on one row instead of wrapping */
    .page-header-card{
        flex-wrap:nowrap;
        align-items:center;
        gap:14px;
        padding:18px 20px;
    }
    .page-header-left{
        flex:1;
        min-width:0;
    }
    .page-header-left h1{
        font-size:18px;
        margin-bottom:4px;
    }
    .page-header-left p{
        font-size:13px;
        line-height:1.4;
    }
    .page-header-right{
        text-align:right;
        flex-shrink:0;
    }
    .page-header-balance{ font-size:20px; }
    .page-header-link{ font-size:12px; }
}