/* ==========================================================================
   Theme-E Wallet Styles (Withdraw & Deposit/Recharge)
   Matches Photo 2 (theme-e.anotechsolutions.shop/wallet/deposit) 100% Pixel-Perfect
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. App Header Navigation Bar (Top Bar)
   -------------------------------------------------------------------------- */
.page-wrapper > header[data-v-5a0a4930],
.page-wrapper > header,
header.hearder_bottom_border {
    background: linear-gradient(90deg, #1b53be 0%, #10368d 52%, #05184d 100%) !important;
    border-bottom: 1px solid #ffd66e !important;
    box-shadow: 0 0 24px rgba(255, 217, 104, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    height: 1.44rem !important;
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 10rem !important;
    z-index: 100 !important;
    padding: 0 .4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 500px) {
    .page-wrapper > header[data-v-5a0a4930],
    .page-wrapper > header,
    header.hearder_bottom_border {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* Back Arrow Icon */
.page-wrapper > header .back,
.page-wrapper > header .head-left .back,
.page-wrapper > header .head-left svg,
.page-wrapper > header .van-icon {
    color: #ffd152 !important;
    fill: #ffd152 !important;
    font-size: .56rem !important;
    cursor: pointer !important;
}

/* Header Title */
.page-wrapper > header .noTitle[data-v-5a0a4930],
.page-wrapper > header .head-title .noTitle,
.page-wrapper > header .head-title .route-name,
.page-wrapper > header .title {
    color: #ffffff !important;
    font-size: .45333rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Extra Icons (Customer Support headset & History note icon) */
.page-wrapper > header .extra svg,
.page-wrapper > header .extra .icon,
.page-wrapper > header .extra img,
.page-wrapper > header .extra i,
.withdrawExtra .icon {
    color: #ffd152 !important;
    fill: #ffd152 !important;
    width: .56rem !important;
    height: .56rem !important;
    font-size: .56rem !important;
    cursor: pointer !important;
    filter: drop-shadow(0 0 3px rgba(255, 209, 82, 0.5)) !important;
}

/* --------------------------------------------------------------------------
   2. Cash Balance & Withdrawable Header Cards (Photo 2 Match)
   -------------------------------------------------------------------------- */
.payment-container header,
header.h_box,
[class*="h_box"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: .26667rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .26667rem !important;
}

header .h_1,
header .h_2,
.payment-container header .h_1,
.payment-container header .h_2 {
    flex: 1 !important;
    border: 1.5px solid #ffd66e !important;
    background: #081d59 !important;
    border-radius: 10px !important;
    padding: .26667rem .2rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
}

header .h_1 .txt,
header .h_2 .txt,
.payment-container header .h_1 .txt,
.payment-container header .h_2 .txt {
    color: #ffffff !important;
    font-size: .34667rem !important;
    font-weight: 600 !important;
}

header .h_1 .money,
header .h_2 .money,
.payment-container header .h_1 .money,
.payment-container header .h_2 .money {
    color: #ffd152 !important;
    font-size: .45333rem !important;
    font-weight: 700 !important;
    margin-top: .08rem !important;
}

/* --------------------------------------------------------------------------
   3. Amount Input Box & Net Amount Received (Photo 2 Match - No Overlap)
   -------------------------------------------------------------------------- */
.amount-title,
.pay-main .amount-title {
    color: #d6e5ff !important;
    font-size: .34667rem !important;
    font-weight: 500 !important;
    margin-bottom: .16rem !important;
    text-align: left !important;
}

.Recharge__content-paymoney__money-input[data-v-aa2d3454],
.Recharge__content-paymoney__money-input {
    position: relative !important;
    height: 1.28rem !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 12px !important;
    border: 1.5px solid #ffd66e !important;
    background: #041544 !important;
    box-shadow: 0 0 14px rgba(255, 214, 110, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    padding: 0 .32rem !important;
    box-sizing: border-box !important;
}

.Recharge__content-paymoney__money-input .place-div[data-v-aa2d3454] {
    color: #ffd152 !important;
    font-size: .48rem !important;
    font-weight: 700 !important;
    padding-right: .26667rem !important;
    margin-right: .24rem !important;
    border-right: 1px solid rgba(255, 214, 110, 0.35) !important;
}

.Recharge__content-paymoney__money-input .input-wrapper input[data-v-aa2d3454],
.Recharge__content-paymoney__money-input .inp[data-v-aa2d3454] {
    color: #ffd152 !important;
    font-size: .45333rem !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

/* HIDE VUE'S DEFAULT INLINE NET AMOUNT TEXT TO PREVENT OVERLAPPING */
.Recharge__content-paymoney__money-input p,
.Recharge__content-paymoney__money-input + p,
.Recharge__content-paymoney__money-input [class*="net-amount"],
.Recharge__content-paymoney__money-input + [class*="net-amount"],
.amount-display.noGood,
.pay-amount p {
    display: none !important;
}

/* RENDER CLEAN SINGLE NET AMOUNT ROW BELOW INPUT BOX */
#theme-e-net-amount-row,
.theme-e-net-amount-row {
    display: block !important;
    color: #8ea1c1 !important;
    font-size: .34667rem !important;
    font-weight: 500 !important;
    margin: .21333rem 0 .26667rem 0 !important;
    text-align: left !important;
}

#theme-e-net-amount-row span.gold-txt,
.theme-e-net-amount-row span.gold-txt {
    color: #ffd152 !important;
    font-weight: 700 !important;
    font-size: .37333rem !important;
    margin-left: .08rem !important;
}

/* --------------------------------------------------------------------------
   4. Quick Amount Grid (12 Buttons)
   -------------------------------------------------------------------------- */
.amount-grid[data-v-b4d0eb20],
.amount-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: .21333rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: .16rem 0 .32rem 0 !important;
}

.amount-option[data-v-b4d0eb20],
.amount-option {
    height: 1.04rem !important;
    border-radius: 10px !important;
    background: #092570 !important;
    border: 1px solid #1c52d4 !important;
    color: #8ea1c1 !important;
    font-size: .37333rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.amount-option.active[data-v-b4d0eb20],
.amount-option.active {
    background: linear-gradient(180deg, #ffd66e 0%, #f5b224 100%) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    border: 1.5px solid #ffd66e !important;
    box-shadow: 0 0 12px rgba(255, 214, 110, 0.4) !important;
}

/* --------------------------------------------------------------------------
   5. Payment Methods Section
   -------------------------------------------------------------------------- */
.payment-methods .section-title {
    color: #ffffff !important;
    font-size: .37333rem !important;
    font-weight: 600 !important;
    margin-bottom: .26667rem !important;
    text-align: left !important;
}

.payment-options {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .21333rem !important;
    padding: 0 !important;
    margin-bottom: .32rem !important;
}

.payment-item {
    position: relative !important;
    min-height: 1.44rem !important;
    padding: .21333rem .16rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: #05184d !important;
    border: 1px solid #1a3375 !important;
    cursor: pointer !important;
}

.payment-item.active {
    border: 1.5px solid #ffd66e !important;
    background: linear-gradient(135deg, #0b2b7a 0%, #05184d 100%) !important;
    box-shadow: 0 0 14px rgba(255, 214, 110, 0.3) !important;
}

.payment-item .name {
    color: #8ea1c1 !important;
    font-size: .34667rem !important;
    font-weight: 600 !important;
}

.payment-item.active .name {
    color: #ffffff !important;
}

.payment-item::before,
.payment-item::after {
    display: none !important;
    content: none !important;
}

.rechargeRifts,
.payment-item .rechargeRifts {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: #ffd152 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: .26667rem !important;
    height: .34667rem !important;
    line-height: .34667rem !important;
    padding: 0 .12rem !important;
    border-radius: 0 11px 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.payment-item .recommended {
    position: absolute !important;
    top: -.13333rem !important;
    left: -.13333rem !important;
    width: .44rem !important;
    height: .44rem !important;
    background-color: #ffd152 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --------------------------------------------------------------------------
   6. Deposit Tips Box (100% Photo 2 Match)
   -------------------------------------------------------------------------- */
.deposit-tips[data-v-2a18d35a],
.deposit-tips {
    background: #072166 !important;
    border: 1.5px solid #ffd66e !important;
    border-radius: 14px !important;
    padding: .37333rem .4rem !important;
    margin: .26667rem 0 .4rem 0 !important;
    box-sizing: border-box !important;
}

.deposit-tips .section-title {
    color: #ffffff !important;
    font-size: .37333rem !important;
    font-weight: 700 !important;
    margin-bottom: .21333rem !important;
    text-align: left !important;
}

.deposit-tips .tips-list,
.deposit-tips ul {
    color: #8ea1c1 !important;
    font-size: .32rem !important;
    line-height: .48rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.deposit-tips .tips-list li,
.deposit-tips ul li {
    color: #8ea1c1 !important;
    line-height: .48rem !important;
    margin-bottom: .16rem !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: .12rem !important;
}

/* --------------------------------------------------------------------------
   7. Bottom Pay Now Button
   -------------------------------------------------------------------------- */
.pay-btn[data-v-2a18d35a],
.pay-btn {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 10rem !important;
    padding: .26667rem .4rem .4rem .4rem !important;
    background: linear-gradient(180deg, rgba(3, 12, 38, 0.8) 0%, #030c26 100%) !important;
    box-sizing: border-box !important;
    z-index: 99 !important;
}

@media screen and (max-width: 500px) {
    .pay-btn[data-v-2a18d35a],
    .pay-btn {
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
    }
}

.pay-btn .red-btn,
.pay-btn .btn_main_style {
    width: 100% !important;
    height: 1.2rem !important;
    line-height: 1.2rem !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #ffd66e 0%, #f5b224 50%, #d98a12 100%) !important;
    color: #000000 !important;
    text-align: center !important;
    font-size: .42667rem !important;
    font-weight: 700 !important;
    border: 1px solid #ffe670 !important;
    box-shadow: 0 4px 15px rgba(245, 178, 36, 0.45) !important;
    cursor: pointer !important;
}