/* =========================================================
   NEXA DEPOSIT PAGE — DARK MODE
   ========================================================= */

html.dark-mode {
    color-scheme: dark;

    --dark-bg: #18191a;
    --dark-card: #242526;
    --dark-card-2: #3a3b3c;
    --dark-hover: #4e4f50;
    --dark-border: #3e4042;

    --dark-text: #e4e6eb;
    --dark-secondary: #b0b3b8;
    --dark-muted: #8b949e;

    --dark-blue: #4599ff;
}


/* =========================================================
   PAGE
   ========================================================= */

html.dark-mode,
html.dark-mode body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

html.dark-mode body {
    min-height: 100vh;
}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

html.dark-mode .topbar {
    background: var(--dark-card) !important;
    border-bottom: 1px solid var(--dark-border) !important;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, .35) !important;
}

html.dark-mode .brand {
    color: var(--dark-blue) !important;
}

html.dark-mode .top-actions {
    color: var(--dark-text) !important;
}

html.dark-mode .top-button {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;

    border: 1px solid var(--dark-border) !important;
}

html.dark-mode .top-button:hover {
    background: var(--dark-hover) !important;
    color: #fff !important;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

html.dark-mode .container-wallet {
    background: transparent !important;
    color: var(--dark-text) !important;
}


/* =========================================================
   BALANCE CARD
   ========================================================= */

html.dark-mode .balance-card {
    background:
        linear-gradient(
            135deg,
            #1877f2,
            #0055c7
        ) !important;

    color: #fff !important;

    box-shadow:
        0 8px 25px
        rgba(24, 119, 242, .30) !important;
}

html.dark-mode .balance-title {
    color: #fff !important;
}

html.dark-mode .balance {
    color: #fff !important;
}


/* =========================================================
   DEPOSIT CARDS
   ========================================================= */

html.dark-mode .deposit-card {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;

    border: 1px solid var(--dark-border) !important;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .30) !important;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

html.dark-mode .card-title {
    color: var(--dark-text) !important;
}

html.dark-mode .card-title i {
    color: var(--dark-blue) !important;
}


/* =========================================================
   FORM LABELS
   ========================================================= */

html.dark-mode .form-label {
    color: var(--dark-text) !important;
}


/* =========================================================
   INPUT GROUP
   ========================================================= */

html.dark-mode .input-group-text {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-border) !important;
}

html.dark-mode .form-control {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-border) !important;
}

html.dark-mode .form-control::placeholder {
    color: var(--dark-muted) !important;
}

html.dark-mode .form-control:focus {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-blue) !important;

    box-shadow:
        0 0 0 .2rem
        rgba(69, 153, 255, .15) !important;
}

html.dark-mode .text-muted {
    color: var(--dark-secondary) !important;
}


/* =========================================================
   PAYMENT GATEWAY
   ========================================================= */

html.dark-mode .gateway-label {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-border) !important;
}

html.dark-mode .gateway-label:hover {
    background: var(--dark-hover) !important;
    color: #fff !important;

    border-color: var(--dark-blue) !important;
}


/* SELECTED GATEWAY */

html.dark-mode
.gateway-option
input:checked
+ .gateway-label {

    background:
        rgba(24, 119, 242, .15) !important;

    color: var(--dark-blue) !important;

    border-color:
        var(--dark-blue) !important;
}


/* Gateway icons */

html.dark-mode .gateway-icon {
    color: inherit !important;
}


/* =========================================================
   PAYMENT BUTTON
   ========================================================= */

html.dark-mode .pay-button {
    background: #1877f2 !important;
    color: #fff !important;

    border: none !important;
}

html.dark-mode .pay-button:hover {
    background: #166fe5 !important;
    color: #fff !important;
}

html.dark-mode .pay-button:disabled {
    background: #3b6fb5 !important;
    color: #dbe8f8 !important;
    opacity: .8;
}


/* =========================================================
   SECURITY INFORMATION
   ========================================================= */

html.dark-mode .security-info {
    background:
        rgba(24, 119, 242, .12) !important;

    color: var(--dark-secondary) !important;

    border:
        1px solid
        rgba(69, 153, 255, .20) !important;
}

html.dark-mode .security-info i {
    color: #4ade80 !important;
}


/* =========================================================
   HISTORY
   ========================================================= */

html.dark-mode .history-title {
    color: var(--dark-text) !important;
}

html.dark-mode .history-item {
    color: var(--dark-text) !important;

    border-bottom-color:
        var(--dark-border) !important;
}

html.dark-mode .history-item:last-child {
    border-bottom-color: transparent !important;
}


/* =========================================================
   HISTORY ICON
   ========================================================= */

html.dark-mode .history-icon {
    background:
        rgba(24, 119, 242, .15) !important;

    color: var(--dark-blue) !important;

    border:
        1px solid
        rgba(69, 153, 255, .15) !important;
}


/* =========================================================
   HISTORY TEXT
   ========================================================= */

html.dark-mode .history-content {
    color: var(--dark-text) !important;
}

html.dark-mode .history-content strong {
    color: var(--dark-text) !important;
}

html.dark-mode .history-amount {
    color: #4ade80 !important;
}

html.dark-mode .history-date {
    color: var(--dark-secondary) !important;
}


/* =========================================================
   STATUS — PENDING
   ========================================================= */

html.dark-mode .status.pending {
    background:
        rgba(234, 179, 8, .18) !important;

    color: #facc15 !important;

    border:
        1px solid
        rgba(250, 204, 21, .15) !important;
}


/* =========================================================
   STATUS — SUCCESSFUL
   ========================================================= */

html.dark-mode .status.successful {
    background:
        rgba(22, 163, 74, .18) !important;

    color: #4ade80 !important;

    border:
        1px solid
        rgba(74, 222, 128, .15) !important;
}


/* =========================================================
   STATUS — FAILED
   ========================================================= */

html.dark-mode .status.failed {
    background:
        rgba(220, 38, 38, .18) !important;

    color: #f87171 !important;

    border:
        1px solid
        rgba(248, 113, 113, .15) !important;
}


/* =========================================================
   EMPTY HISTORY
   ========================================================= */

html.dark-mode .deposit-card
div[style*="text-align:center"] {

    color: var(--dark-secondary) !important;
}

html.dark-mode .deposit-card
div[style*="text-align:center"] i {

    color: var(--dark-muted) !important;
}


/* =========================================================
   BOOTSTRAP OVERRIDES
   ========================================================= */

html.dark-mode .bg-white {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .text-dark {
    color: var(--dark-text) !important;
}

html.dark-mode .text-secondary {
    color: var(--dark-secondary) !important;
}

html.dark-mode .border {
    border-color: var(--dark-border) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

html.dark-mode a {
    color: inherit;
}

html.dark-mode a:hover {
    color: inherit;
}


/* =========================================================
   BUTTONS
   ========================================================= */

html.dark-mode button {
    color: var(--dark-text);
}


/* =========================================================
   SWEETALERT2
   ========================================================= */

html.dark-mode .swal2-popup {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;

    border:
        1px solid
        var(--dark-border) !important;
}

html.dark-mode .swal2-title {
    color: var(--dark-text) !important;
}

html.dark-mode .swal2-html-container {
    color: var(--dark-secondary) !important;
}

html.dark-mode .swal2-content {
    color: var(--dark-secondary) !important;
}


/* =========================================================
   SWEETALERT INPUT
   ========================================================= */

html.dark-mode .swal2-input,
html.dark-mode .swal2-textarea,
html.dark-mode .swal2-select {

    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;

    border-color:
        var(--dark-border) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

html.dark-mode * {
    scrollbar-color:
        #4e4f50
        #18191a;
}

html.dark-mode *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-mode *::-webkit-scrollbar-track {
    background: #18191a;
}

html.dark-mode *::-webkit-scrollbar-thumb {
    background: #4e4f50;
    border-radius: 10px;
}

html.dark-mode *::-webkit-scrollbar-thumb:hover {
    background: #666;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    html.dark-mode .container-wallet {
        background: var(--dark-bg) !important;
    }

    html.dark-mode .deposit-card {
        background: var(--dark-card) !important;
    }

    html.dark-mode .topbar {
        background: var(--dark-card) !important;
    }

    html.dark-mode .balance-card {
        box-shadow:
            0 5px 18px
            rgba(0, 0, 0, .35) !important;
    }

}

        * {
            box-sizing: border-box;
        }


        body {

            margin: 0;

            background: #f0f2f5;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            color: #050505;

        }


        .topbar {

            height: 64px;

            background: #fff;

            border-bottom:
                1px solid #ddd;

            display: flex;

            align-items: center;

            padding:
                0 20px;

            position: sticky;

            top: 0;

            z-index: 1000;

        }


        .brand {

            color: #1877f2;

            font-size: 23px;

            font-weight: 800;

            text-decoration: none;

        }


        .top-actions {

            margin-left: auto;

            display: flex;

            gap: 8px;

        }


        .top-button {

            width: 40px;

            height: 40px;

            border-radius: 50%;

            background: #e4e6eb;

            color: #050505;

            display: flex;

            align-items: center;

            justify-content: center;

            text-decoration: none;

        }


        .container-wallet {

            max-width: 900px;

            margin:
                25px auto;

            padding:
                0 15px;

        }


        .balance-card {

            background:
                linear-gradient(
                    135deg,
                    #1877f2,
                    #0055c7
                );

            color: #fff;

            padding: 28px;

            border-radius: 18px;

            margin-bottom: 20px;

            box-shadow:
                0 8px 25px
                rgba(24,119,242,.20);

        }


        .balance-title {

            opacity: .85;

            font-size: 14px;

        }


        .balance {

            font-size: 38px;

            font-weight: 800;

            margin-top: 5px;

        }


        .deposit-card {

            background: #fff;

            padding: 25px;

            border-radius: 14px;

            box-shadow:
                0 1px 3px
                rgba(0,0,0,.12);

            margin-bottom: 20px;

        }


        .card-title {

            font-size: 20px;

            font-weight: 700;

            margin-bottom: 20px;

        }


        .form-label {

            font-weight: 600;

        }


        .form-control {

            min-height: 50px;

            border-radius: 9px;

        }


        .gateway-grid {

            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 12px;

            margin-top: 8px;

        }


        .gateway-option {

            position: relative;

        }


        .gateway-option input {

            position: absolute;

            opacity: 0;

        }


        .gateway-label {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            min-height: 65px;

            border:
                2px solid #ddd;

            border-radius: 10px;

            cursor: pointer;

            font-weight: 700;

            transition: .2s;

        }


        .gateway-label:hover {

            border-color: #1877f2;

        }


        .gateway-option
        input:checked
        + .gateway-label {

            border-color: #1877f2;

            background: #eef5ff;

            color: #1877f2;

        }


        .gateway-icon {

            font-size: 22px;

        }


        .pay-button {

            width: 100%;

            min-height: 52px;

            border: 0;

            border-radius: 10px;

            background: #1877f2;

            color: #fff;

            font-size: 16px;

            font-weight: 700;

            margin-top: 15px;

        }


        .pay-button:hover {

            background: #166fe5;

        }


        .security-info {

            background: #eef5ff;

            padding: 14px;

            border-radius: 9px;

            font-size: 13px;

            color: #455;

            margin-top: 15px;

        }


        .history-title {

            font-size: 19px;

            font-weight: 700;

            margin-bottom: 10px;

        }


        .history-item {

            display: flex;

            align-items: center;

            gap: 12px;

            padding: 14px 0;

            border-bottom:
                1px solid #eee;

        }


        .history-item:last-child {

            border-bottom: 0;

        }


        .history-icon {

            width: 42px;

            height: 42px;

            min-width: 42px;

            border-radius: 50%;

            background: #e7f0ff;

            color: #1877f2;

            display: flex;

            align-items: center;

            justify-content: center;

        }


        .history-content {

            flex: 1;

        }


        .history-amount {

            font-weight: 700;

        }


        .history-date {

            color: #65676b;

            font-size: 12px;

            margin-top: 3px;

        }


        .status {

            padding:
                5px 9px;

            border-radius: 20px;

            font-size: 11px;

            font-weight: 700;

            text-transform: capitalize;

        }


        .status.pending {

            background: #fff4cc;

            color: #806000;

        }


        .status.successful {

            background: #e8f8ee;

            color: #16803a;

        }


        .status.failed {

            background: #ffe8e8;

            color: #b42318;

        }


        @media (
            max-width: 600px
        ) {

            .container-wallet {

                margin-top: 12px;

                padding:
                    0 10px;

            }


            .gateway-grid {

                grid-template-columns: 1fr;

            }


            .balance {

                font-size: 32px;

            }


            .deposit-card {

                padding: 18px;

            }

        }