/* ============================================================
   SBOGOOL — Dark Theme Override for Member Area
   Maps the member dashboard onto the sbogool.com design system:
     Royal navy  #001860 / #1E40C8
     Bright blue #2E6BE6
     Emerald     #19D08A   (primary "win" / CTA)
     Gold        #F5C542
   Premium dark theme. Loaded AFTER style-dashboardv6.css so it
   wins on specificity; existing font sizing (DB Heavent) is kept.
   ============================================================ */

:root {
    --navy-950: #050a24;
    --navy-900: #070f33;
    --navy-850: #0a1545;
    --navy-800: #0e1c57;
    --navy-700: #14276f;
    --blue-600: #1e40c8;
    --blue-500: #2e6be6;
    --blue-400: #5b91f5;

    --green-600: #11b679;
    --green-500: #19d08a;
    --green-400: #3de3a3;
    --green-glow: rgba(25, 208, 138, 0.45);

    --gold-500: #f5c542;
    --gold-400: #ffd66b;
    --red-500: #ff5263;

    --bg: #050a24;
    --bg-elev: #0b1440;
    --surface: rgba(255, 255, 255, 0.035);
    --surface-2: rgba(255, 255, 255, 0.06);
    --card: #0c1542;
    --card-2: #0a1235;
    --card-hover: #112063;
    --border: rgba(120, 150, 255, 0.16);
    --border-strong: rgba(120, 150, 255, 0.3);

    --text: #eaf0ff;
    --text-soft: #aebae0;
    --text-dim: #7886b5;

    --grad-brand: linear-gradient(135deg, #2e6be6 0%, #19d08a 100%);
    --grad-cta: linear-gradient(135deg, #19d08a 0%, #11b679 100%);
    --grad-blue: linear-gradient(135deg, #2e6be6 0%, #1e40c8 100%);
    --grad-gold: linear-gradient(135deg, #ffd66b 0%, #f5c542 100%);
    --grad-hero: radial-gradient(
            1100px 560px at 78% -12%,
            rgba(46, 107, 230, 0.32),
            transparent 60%
        ),
        radial-gradient(
            820px 480px at 8% 6%,
            rgba(25, 208, 138, 0.16),
            transparent 55%
        );
    --shadow-card: 0 18px 40px -20px rgba(0, 0, 0, 0.85);
    --shadow-glow: 0 10px 38px -8px var(--green-glow);
    --shadow-blue-glow: 0 10px 38px -8px rgba(46, 107, 230, 0.5);
}

/* ---------- Base ---------- */
body {
    background-color: var(--bg) !important;
    background-image: var(--grad-hero);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
}

body,
p,
a,
span,
small,
label,
li,
td,
th,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text);
}

/* ---------- Animated aurora background ----------
   Fixed layer behind all content; soft brand-coloured orbs drift
   slowly for a living, premium depth. Sits over body's static
   hero gradient so we get base dimension + gentle movement. */
.sbg-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.sbg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    will-change: transform;
    mix-blend-mode: screen;
}
.sbg-orb--blue {
    width: 48vw;
    height: 48vw;
    left: -10vw;
    top: -12vw;
    background: radial-gradient(
        circle,
        rgba(46, 107, 230, 0.65) 0%,
        transparent 68%
    );
    animation: sbg-drift-1 24s ease-in-out infinite;
}
.sbg-orb--green {
    width: 42vw;
    height: 42vw;
    right: -12vw;
    bottom: -14vw;
    background: radial-gradient(
        circle,
        rgba(25, 208, 138, 0.5) 0%,
        transparent 68%
    );
    animation: sbg-drift-2 28s ease-in-out infinite;
}
.sbg-orb--violet {
    width: 36vw;
    height: 36vw;
    left: 42vw;
    top: 32vh;
    background: radial-gradient(
        circle,
        rgba(124, 92, 255, 0.4) 0%,
        transparent 68%
    );
    animation: sbg-drift-3 32s ease-in-out infinite;
}
@keyframes sbg-drift-1 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(7vw, 8vh) scale(1.12);
    }
    66% {
        transform: translate(3vw, -4vh) scale(0.95);
    }
}
@keyframes sbg-drift-2 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(-8vw, -6vh) scale(1.1);
    }
    66% {
        transform: translate(-3vw, 5vh) scale(0.96);
    }
}
@keyframes sbg-drift-3 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-10vw, 6vh) scale(1.18);
        opacity: 0.55;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sbg-orb {
        animation: none !important;
    }
}

.text-muted,
.history-link-text,
small.text-muted {
    color: var(--text-dim) !important;
}

hr {
    border-color: var(--border);
}

a:hover {
    color: var(--green-400);
}

/* ---------- Header / Navbar ---------- */
.navbar {
    background: linear-gradient(
        180deg,
        var(--navy-850) 0%,
        var(--navy-950) 100%
    ) !important;
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
}

.scroll-text {
    background: var(--navy-900);
    background-image: none;
    border-bottom: 1px solid var(--border);
}
.scroll-text a {
    color: var(--text-soft) !important;
}

/* top-nav uses gradient-clipped text in the original — reset to clean light/emerald */
.top-nav ul li a,
.top-nav ul li i,
.top-nav ul li p {
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text-soft) !important;
}
.top-nav ul li:hover a,
.top-nav ul li:hover i,
.top-nav ul li:hover p {
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    color: var(--green-400) !important;
}

/* ---------- Slide / Hero ---------- */
.slide {
    background: var(--navy-950);
}

/* ---------- Content surface ---------- */
.container.content {
    background-color: var(--card-2) !important;
    background-image: radial-gradient(
            90% 55% at 100% 0%,
            rgba(46, 107, 230, 0.22) 0%,
            transparent 55%
        ),
        radial-gradient(
            85% 55% at 0% 100%,
            rgba(25, 208, 138, 0.16) 0%,
            transparent 55%
        ),
        radial-gradient(
            70% 45% at 50% 0%,
            rgba(91, 145, 245, 0.1) 0%,
            transparent 60%
        ),
        linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: var(--shadow-card), 0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
    color: var(--text);
}

/* ---------- Page title ----------
   Shared header used on tournament / promotion / reward / affiliate
   pages. Was an old bg-nav.jpg strip with grey gradient text. Kept as an
   open section heading — NO box / border / fill (so it never reads like a
   button): just a bright glowing title flanked by tapered gradient rules. */
.row.text-center.page-title {
    position: relative;
    overflow: visible;
    margin: 6px 0 22px !important;
    padding: 4px 0 14px !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* soft full-width divider beneath the heading, faded at both ends */
.row.text-center.page-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 78%;
    max-width: 460px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(46, 107, 230, 0.3) 30%,
        rgba(25, 208, 138, 0.38) 70%,
        transparent
    );
}
.page-title h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin: 0 !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px;
    line-height: 1.2 !important;
    /* clean white title with a soft brand glow */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35),
        0 2px 22px rgba(46, 107, 230, 0.45);
}
/* tapered gradient rules flanking the title, brand blue → emerald */
.page-title h3::before,
.page-title h3::after {
    content: "";
    flex: 0 0 auto;
    width: 42px;
    height: 2px;
    border-radius: 999px;
    filter: drop-shadow(0 0 5px rgba(46, 107, 230, 0.5));
}
.page-title h3::before {
    background: linear-gradient(90deg, transparent, var(--blue-500) 70%, var(--green-400));
}
.page-title h3::after {
    background: linear-gradient(90deg, var(--green-400), var(--blue-500) 30%, transparent);
}
@media (max-width: 575.98px) {
    .row.text-center.page-title {
        margin: 2px 0 16px !important;
        padding: 2px 0 11px !important;
    }
    .page-title h3 {
        gap: 0;
        letter-spacing: 0.2px;
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    /* hide the decorative flanking rules on phones — keep just the title */
    .page-title h3::before,
    .page-title h3::after {
        display: none !important;
    }
    .row.text-center.page-title::after {
        width: 88%;
    }
}

/* ---------- Contact list (LINE / Telegram) — phones ----------
   On small screens hide the oversized channel logo and right-size the
   heading + caption so the text breathes and fills the row cleanly. */
@media (max-width: 575.98px) {
    .list-contact-left .icon-history-box {
        display: none !important;
    }
    .list-contact-left {
        width: 56% !important;
    }
    .list-contact-right {
        width: 44% !important;
        padding-left: 6px;
    }
    .list-contact-left h5 {
        font-size: 17px !important;
        line-height: 1.3 !important;
        margin-top: 3px !important;
    }
    .list-contact-left p.chanel {
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin-bottom: 0 !important;
    }
    /* keep the CTA button readable and contained in the narrow column */
    .list-contact-right .btn-line {
        font-size: 15px !important;
        padding: 7px 8px !important;
        line-height: 1.2;
        white-space: normal;
    }
    .list-contact-right p {
        margin-top: 6px !important;
    }
}

/* Common "white panel" surfaces inside the content area → dark cards */
.card,
.bank-box,
.affiliate-box,
.stat-content,
.cards-box,
.modal-content,
.list-group-item,
.tnm-top-reward,
.tnm-current-reward,
.tnm-player {
    background-color: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    color: var(--text);
    box-shadow: var(--shadow-card) !important;
}

.card-header {
    background-color: var(--navy-800) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
}

/* ---------- Credit box ---------- */
.credit-box {
    background-color: var(--navy-850) !important;
    background-image: radial-gradient(
            130% 130% at 0% 0%,
            rgba(46, 107, 230, 0.38) 0%,
            transparent 46%
        ),
        radial-gradient(
            130% 130% at 100% 100%,
            rgba(25, 208, 138, 0.26) 0%,
            transparent 50%
        ),
        linear-gradient(135deg, #14276f 0%, #0a1545 52%, #0e1c57 100%) !important;
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card), 0 0 0 1px rgba(46, 107, 230, 0.12) inset,
        0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}
.credit-box small {
    color: var(--text-soft);
}
.credit-box p,
.credit-box .amount {
    background: -webkit-linear-gradient(
        180deg,
        var(--green-400),
        var(--green-500)
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.credit-box .refresh {
    background: -webkit-linear-gradient(
        var(--green-400),
        var(--green-500)
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ---------- Buttons ---------- */
/* Deposit / primary action → emerald CTA */
.btn-red,
.btn-red:hover,
.btn-green,
.btn-green:hover {
    background: var(--grad-cta) !important;
    color: #042417 !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-glow);
}
.btn-red:hover,
.btn-green:hover {
    filter: brightness(1.05);
}

/* Withdraw / secondary → ghost on dark */
.btn-silver,
.btn-zinc {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
}
.btn-silver:hover,
.btn-zinc:hover {
    background: var(--card-hover) !important;
    border-color: var(--blue-400) !important;
    color: #fff !important;
}

/* Gold keeps gold (matches sbogool accent) */
.btn-gold {
    background: var(--grad-gold) !important;
    color: #3a2c00 !important;
    border-color: transparent !important;
}
.btn-gold:hover {
    filter: brightness(1.04);
    box-shadow: 0 12px 30px -10px rgba(245, 197, 66, 0.5);
}

/* Blue */
.btn-blue,
.btn-blue:hover {
    background: var(--grad-blue) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.btn-blue:hover {
    box-shadow: var(--shadow-blue-glow);
}

.btn-outline-red {
    color: var(--green-400) !important;
    border-color: var(--green-500) !important;
    background: transparent !important;
}
.btn-outline-red:hover {
    background: var(--grad-cta) !important;
    color: #042417 !important;
    border-color: transparent !important;
}

/* Bootstrap primary + success (inline magenta in template) + bg-primary */
.btn-primary,
.btn-success {
    /* background: var(--grad-blue) !important; */
    border: 1px solid transparent !important;
    color: #fff !important;
}
/* btn-success had leftover magenta from the base sheet — pull every
   state onto the same blue gradient as btn-primary for consistency */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background: var(--grad-blue) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-success:hover {
    box-shadow: var(--shadow-blue-glow);
    filter: brightness(1.05);
}
.bg-primary {
    background: var(--grad-blue) !important;
}

/* LINE button — keep brand green but use the same gradient + glow + lift
   treatment as the other CTAs so it reads as part of the set */
.btn-line,
.btn-line:hover,
a.btn-line {
    background: linear-gradient(135deg, #06c755 0%, #04a14a 100%) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 30px -10px rgba(6, 199, 85, 0.6) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.btn-line:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 38px -8px rgba(6, 199, 85, 0.7) !important;
}
.btn-line i,
.btn-line .fa-line {
    color: #fff !important;
}

/* ---------- Navigation (play + tiles) ---------- */
.play-button,
.play-button:hover {
    background: var(--grad-brand) !important;
    color: #fff !important;
    box-shadow: var(--shadow-blue-glow), var(--shadow-glow);
}
.play-button i,
.play-button p {
    color: #fff !important;
}

/* Tile buttons used images (bg-nav.jpg) → dark navy cards */
.btn-dark-tri {
    background: var(--card) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-card) !important;
    transition: transform 0.15s ease, border-color 0.2s ease,
        background 0.2s ease, box-shadow 0.2s ease;
}
.btn-dark-tri:hover {
    background: var(--card-hover) !important;
    border-color: var(--blue-400) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-glow) !important;
}
.btn-dark-tri i,
.btn-dark-tri p,
.btn-dark-tri span {
    color: var(--text) !important;
}
.btn-dark-tri:hover i,
.btn-dark-tri:hover p,
.btn-dark-tri:hover span {
    background: var(--grad-brand) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ---------- User info chips ---------- */
section.user-infor a {
    color: var(--text);
}
span.reset-password {
    background: var(--surface-2) !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--border);
}
span.statment-button {
    background: var(--blue-600) !important;
    color: #fff !important;
    border: 1px solid transparent;
}
span.reset-password i,
span.statment-button i {
    color: inherit !important;
}

/* ---------- Forms ---------- */
input.form-control,
textarea.form-control,
select,
select.form-control,
.custom-select,
.input-group-text {
    background-color: var(--navy-900) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
}
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--text-dim) !important;
}
input.form-control:focus,
textarea.form-control:focus,
select:focus,
select.form-control:focus,
.custom-select:focus {
    background-color: var(--navy-850) !important;
    border-color: var(--blue-400) !important;
    box-shadow: 0 0 0 3px rgba(46, 107, 230, 0.22) !important;
    color: var(--text) !important;
}
.input-group-text {
    background-color: var(--navy-800) !important;
}
option {
    background-color: var(--navy-900);
    color: var(--text);
}
label {
    color: var(--text-soft);
}

/* ---------- Alerts ---------- */
.alert {
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}
.alert-danger {
    background: linear-gradient(
        135deg,
        rgba(255, 82, 99, 0.16) 0%,
        rgba(255, 82, 99, 0.08) 100%
    ) !important;
    border-color: rgba(255, 82, 99, 0.4) !important;
    color: var(--text) !important;
}
.alert-danger,
.alert-danger * {
    color: #ffd0d5 !important;
}
.alert-warning {
    background: linear-gradient(
        135deg,
        rgba(245, 197, 66, 0.16) 0%,
        rgba(245, 197, 66, 0.08) 100%
    ) !important;
    border-color: rgba(245, 197, 66, 0.4) !important;
}
.alert-warning,
.alert-warning * {
    color: var(--gold-400) !important;
}
.alert-success {
    background: linear-gradient(
        135deg,
        rgba(25, 208, 138, 0.16) 0%,
        rgba(25, 208, 138, 0.08) 100%
    ) !important;
    border-color: rgba(25, 208, 138, 0.4) !important;
}
.alert-success,
.alert-success * {
    color: var(--green-400) !important;
}
.alert-info {
    background: linear-gradient(
        135deg,
        rgba(46, 107, 230, 0.16) 0%,
        rgba(46, 107, 230, 0.08) 100%
    ) !important;
    border-color: rgba(46, 107, 230, 0.4) !important;
}
.alert-info,
.alert-info * {
    color: var(--blue-400) !important;
}

/* ---------- Tables ---------- */
.table,
.table td,
.table th {
    color: var(--text);
    border-color: var(--border) !important;
}
.table thead th {
    border-bottom-color: var(--border-strong) !important;
    color: var(--text-soft);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.025);
}
.table-hover tbody tr:hover {
    background-color: var(--card-hover);
    color: #fff;
}
tr.reward-table-head,
.tnm-reward-header.card-header,
.tnm-rank-header.card-header {
    background: var(--navy-800) !important;
    background-image: none !important;
}

/* Reward / tournament value text remained dark on now-dark cards → lighten */
.tnm-top-reward h4,
.tnm-current-reward h4,
.tnm-player h4,
.dashboard-title h4,
.step-label {
    color: var(--text-soft) !important;
}
.tnm-top-reward h3 {
    color: var(--green-400) !important;
}
.tnm-current-reward h3 {
    color: var(--blue-400) !important;
}
.tnm-player h3 {
    color: var(--gold-400) !important;
}

/* ---------- Pagination ---------- */
.page-link {
    background-color: var(--navy-900) !important;
    border-color: var(--border) !important;
    color: var(--blue-400) !important;
}
.page-link:hover {
    background-color: var(--card-hover) !important;
    color: #fff !important;
}
.page-item.active .page-link {
    background-color: var(--blue-600) !important;
    border-color: var(--blue-500) !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    background-color: var(--navy-950) !important;
    color: var(--text-dim) !important;
}

/* ---------- Badges ---------- */
.badge-warning {
    background-color: var(--gold-500) !important;
    color: #3a2c00 !important;
}
.badge-secondary {
    background-color: var(--surface-2) !important;
    color: var(--text-soft) !important;
}

/* ---------- Footer ---------- */
footer {
    color: var(--text-dim);
}
footer.text-muted,
footer.text-muted p {
    color: var(--text-dim) !important;
}

/* Mobile bottom nav */
.site-footer-mobile {
    background: linear-gradient(
        180deg,
        var(--navy-850) 0%,
        var(--navy-950) 100%
    ) !important;
    border-top: 1px solid var(--border-strong) !important;
    box-shadow: 0 -10px 30px -8px rgba(46, 107, 230, 0.35) !important;
}
.site-footer-mobile a,
.site-footer-mobile i {
    color: var(--text-soft) !important;
}
.site-footer-mobile a:hover,
.site-footer-mobile i:hover {
    color: var(--green-400) !important;
}
a.m-auto.mobile-nav-center {
    color: #fff !important;
}
.bottom-nav-center-text {
    color: var(--text-soft) !important;
}
.fix-nav-bottom-active,
.fix-nav-bottom-active:hover {
    background: var(--grad-cta) !important;
    animation: none !important;
}

/* ---------- Modals / SweetAlert ---------- */
.modal-content {
    background: linear-gradient(
        180deg,
        var(--card) 0%,
        var(--card-2) 100%
    ) !important;
    border: 1px solid var(--border-strong) !important;
}
.modal-header,
.modal-footer {
    border-color: var(--border) !important;
}
.modal-backdrop {
    background-color: #02061a;
}
.close {
    color: var(--text-soft);
    text-shadow: none;
}
.swal2-popup {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong);
}
.swal2-title,
.swal2-html-container,
.swal2-content {
    color: var(--text) !important;
}

/* ---------- Misc surfaces that used the navy bg image ---------- */
.t-countdown li,
.tnm-reward-header.card-header,
.tnm-rank-header.card-header {
    box-shadow: var(--shadow-card);
}

/* ---------- Striped list rows (history / auth lists) ---------- */
.bg-even {
    background-color: var(--surface) !important;
}
.bg-odd {
    background-color: var(--surface-2) !important;
}

/* ---------- Auth (login / register) ---------- */
.btn-auth-register {
    background: var(--grad-cta) !important;
    color: #042417 !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-glow);
}
.btn-auth-register:hover {
    background: var(--grad-cta) !important;
    color: #042417 !important;
    border-color: transparent !important;
    filter: brightness(1.05);
}
.login h4,
.register h4,
.reset-password h4 {
    color: var(--text) !important;
}

/* Circular icon badge in fixed nav kept light → tint to brand */
.fixnav .fixnav-item.middle-item .fixnav-link i {
    background: var(--grad-brand) !important;
    color: #fff !important;
}

/* ============================================================
   HEADER — premium sticky bar
   ============================================================ */
.header {
    position: relative;
    z-index: 300;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 300;
    padding: 6px 0 8px !important;
    background: linear-gradient(
        180deg,
        rgba(10, 21, 69, 0.92) 0%,
        rgba(5, 10, 36, 0.94) 100%
    ) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.85);
    overflow: visible;
}
/* animated brand-gradient underline (signature blue→emerald sheen) */
.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--blue-500) 25%,
        var(--green-500) 50%,
        var(--blue-500) 75%,
        transparent 100%
    );
    background-size: 220% 100%;
    animation: sbg-sheen 7s linear infinite;
    opacity: 0.9;
}
@keyframes sbg-sheen {
    to {
        background-position: 220% 0;
    }
}

/* radial glow behind centered logo */
.navbar .col-8 {
    position: relative;
}
.navbar .col-8::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(340px, 86%);
    height: 110%;
    pointer-events: none;
    background: radial-gradient(
        closest-side,
        rgba(46, 107, 230, 0.38),
        rgba(25, 208, 138, 0.12) 55%,
        transparent 75%
    );
    filter: blur(4px);
    z-index: 0;
}
.header-logo {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 6px 16px rgba(46, 107, 230, 0.45));
    transition: transform 0.25s ease, filter 0.25s ease;
}
.header-logo:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 8px 22px rgba(25, 208, 138, 0.55));
}

/* top-nav items → glassy pill chips with icon over label */
.top-nav {
    margin-top: 6px;
}
.top-nav ul li a {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 12px;
    border-radius: 14px;
    background: var(--surface) !important;
    border: 1px solid var(--border);
    transition: transform 0.15s ease, background 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}
.top-nav ul li a:hover {
    background: var(--card-hover) !important;
    border-color: var(--blue-400);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-glow);
}
.top-nav ul li a:hover i,
.top-nav ul li a:hover p {
    color: var(--green-400) !important;
}

/* On mobile labels are hidden → render chips as round icon buttons */
@media (max-width: 575px) {
    .top-nav ul li a {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }
}

/* ============================================================
   FOOTER — desktop brand block
   ============================================================ */
.site-footer-desktop {
    position: relative;
    margin-top: 36px;
    padding: 30px 0 0px; /* bottom room for the fixed bottom-nav */
    background: linear-gradient(180deg, transparent 0%, var(--navy-900) 70%);
    border-top: 1px solid var(--border);
}
.site-footer-desktop::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--blue-500),
        var(--green-500),
        transparent
    );
}
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.footer-logo {
    max-width: 150px;
    margin: 0 auto;
    filter: drop-shadow(0 4px 16px rgba(46, 107, 230, 0.45));
    transition: transform 0.25s ease;
}
.footer-logo:hover {
    transform: translateY(-2px) scale(1.03);
}
.footer-tagline {
    color: var(--text-soft) !important;
    font-size: 22px;
    margin: 0;
}
.footer-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 14px;
}
.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft) !important;
    font-size: 19px;
    transition: transform 0.18s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, color 0.2s ease;
}
.footer-badge:hover {
    transform: translateY(-2px);
    border-color: var(--blue-400);
    color: var(--text) !important;
    box-shadow: var(--shadow-blue-glow);
}
.footer-badge i {
    color: var(--green-400) !important;
}
.footer-copy {
    color: var(--text-dim) !important;
    font-size: 17px;
    margin: 8px 0 0;
    letter-spacing: 0.02em;
}

/* ============================================================
   FOOTER — fixed bottom navigation (glassy)
   ============================================================ */
.site-footer-mobile {
    background: linear-gradient(
        180deg,
        rgba(10, 21, 69, 0.9) 0%,
        rgba(5, 10, 36, 0.94) 100%
    ) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--border-strong) !important;
    box-shadow: 0 -14px 38px -10px rgba(46, 107, 230, 0.38) !important;
}
/* top accent line */
.site-footer-mobile::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--blue-500),
        var(--green-500),
        var(--blue-500),
        transparent
    );
    background-size: 220% 100%;
    animation: sbg-sheen 7s linear infinite;
}
.site-footer-mobile li {
    position: relative;
    flex: 1;
}
.site-footer-mobile a {
    color: var(--text-soft) !important;
    padding: 6px 0 4px;
    border-radius: 12px;
    transition: color 0.2s ease, transform 0.15s ease;
}
.site-footer-mobile li:not(:nth-child(3)) a:hover {
    color: var(--green-400) !important;
    transform: translateY(-2px);
}
.site-footer-mobile li:not(:nth-child(3)) a:hover i {
    color: var(--green-400) !important;
}
/* active route highlight */
.site-footer-mobile a.active,
.site-footer-mobile a.active i {
    color: var(--green-400) !important;
    text-shadow: 0 0 8px rgba(61, 227, 163, 0.9),
        0 0 18px rgba(61, 227, 163, 0.55) !important;
}
.site-footer-mobile a.active i {
    filter: drop-shadow(0 0 6px rgba(61, 227, 163, 0.85));
}
.site-footer-mobile i {
    transition: color 0.2s ease;
}

@keyframes sbg-pulse {
    0%,
    100% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}
.site-footer-mobile li:nth-child(3) img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

/* ============================================================
   DEPOSIT button — primary money-in action, made to stand out.
   Scoped to the credit box so register/login/fullscreen .btn-red
   elsewhere keep the standard CTA treatment.
   ============================================================ */
.button-box .btn-red,
.deposit-mobile-button a {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        #3de3a3 0%,
        #19d08a 50%,
        #10b277 100%
    ) !important;
    color: #042417 !important;
    border: 1px solid rgba(61, 227, 163, 0.55) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 12px 30px -8px rgba(25, 208, 138, 0.6),
        0 0 0 1px rgba(25, 208, 138, 0.25) inset !important;
    animation: sbg-deposit-glow 2.4s ease-in-out infinite;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    z-index: 0;
}
/* glossy shine sweeping across to catch the eye */
.button-box .btn-red::before,
.deposit-mobile-button a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transform: skewX(-20deg);
    animation: sbg-shine 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.button-box .btn-red i,
.deposit-mobile-button a i {
    position: relative;
    z-index: 2;
    color: #042417 !important;
}
.button-box .btn-red:hover,
.deposit-mobile-button a:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.05);
    box-shadow: 0 16px 42px -6px rgba(25, 208, 138, 0.78) !important;
}
@keyframes sbg-deposit-glow {
    0%,
    100% {
        box-shadow: 0 12px 30px -8px rgba(25, 208, 138, 0.5),
            0 0 0 1px rgba(25, 208, 138, 0.25) inset;
    }
    50% {
        box-shadow: 0 14px 38px -6px rgba(25, 208, 138, 0.85),
            0 0 0 1px rgba(61, 227, 163, 0.45) inset;
    }
}
@keyframes sbg-shine {
    0% {
        left: -60%;
    }
    55% {
        left: 130%;
    }
    100% {
        left: 130%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .button-box .btn-red,
    .deposit-mobile-button a {
        animation: none;
    }
    .button-box .btn-red::before,
    .deposit-mobile-button a::before {
        display: none;
    }
}

/* Index (SEO) footer text block — readable on dark */
.footer-text {
    margin: 0 auto 14px;
    padding: 16px 18px;
    max-width: 920px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.footer-text p {
    color: var(--text-dim) !important;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}
.footer-text a {
    color: var(--blue-400) !important;
}
.footer-text a:hover {
    color: var(--green-400) !important;
}
.footer-copyright p {
    color: var(--text-dim) !important;
}

/* ============================================================
   DEPOSIT PAGE — modern, colorful polish
   ============================================================ */

/* Bank logo box — keep the bank-brand colour but add gloss + glow */
.bank-box {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.02) 42%,
        rgba(0, 0, 0, 0.22) 100%
    ) !important;
    box-shadow: 0 16px 38px -18px rgba(0, 0, 0, 0.75),
        0 0 26px -6px rgba(46, 107, 230, 0.28) !important;
}

/* Account details panel */
.bank-info-text small {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dim) !important;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(46, 107, 230, 0.12);
    border: 1px solid rgba(46, 107, 230, 0.25);
}
p.bank-acc-name {
    color: var(--text) !important;
}
/* The account number is the hero — gradient + spacing so it pops */
p.bank-acc-num {
    background: linear-gradient(
        135deg,
        var(--green-400) 0%,
        var(--blue-400) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

/* Copy button — emerald-tinted ghost with accent icon */
.copy-button {
    background: rgba(25, 208, 138, 0.1) !important;
    border: 1px solid rgba(25, 208, 138, 0.35) !important;
    color: var(--green-400) !important;
    transition: background 0.2s ease, border-color 0.2s ease,
        transform 0.15s ease;
}
.copy-button:hover {
    background: rgba(25, 208, 138, 0.18) !important;
    border-color: var(--green-500) !important;
    transform: translateY(-2px);
    text-decoration: none;
}
.copy-button p,
.copy-button i {
    color: var(--green-400) !important;
}

/* History link */
.history-link-text {
    transition: color 0.2s ease;
}
.history-link-text:hover {
    color: var(--green-400) !important;
}

/* ---------- QR deposit modal ---------- */
/* QR image needs a white field to scan — frame it like a glowing ticket */
.qr-image {
    background: #fff !important;
    border: 6px solid #fff !important;
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--border-strong),
        0 18px 42px -18px rgba(0, 0, 0, 0.85), 0 0 32px -6px var(--green-glow);
}

/* Receiver / amount box — replace the dated grey dashed border */
.deposit-box {
    border: 2px dashed rgba(120, 150, 255, 0.4) !important;
    border-radius: 16px !important;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-card);
}

/* Quick-amount chips — modern interactive pills */
.badge.pointer:hover,
.badge-secondary.pointer:hover {
    background: var(--grad-blue) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-glow);
}
#modal-qr .badge {
    font-size: 100%;
}

/* ---------- Solid background utilities on dark ---------- */
.bg-danger {
    background: linear-gradient(135deg, #ff5263 0%, #d83b4b 100%) !important;
}
.bg-warning {
    background: var(--grad-gold) !important;
}
.bg-success {
    background: var(--grad-cta) !important;
}
.bg-info {
    background: var(--grad-blue) !important;
}
.text-danger {
    color: #ff8a96 !important;
}
.text-success {
    color: var(--green-400) !important;
}