/*======================================
ADD FUNDS
PART 1
LAYOUT
======================================*/


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

#depositForm{

    width:100%;

    max-width:var(--container-lg);

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

    padding:0 var(--space-4) var(--space-8);

}


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

.wallet-balance-card{

    position:relative;

    overflow:hidden;

    width:100%;

    max-width:var(--container-lg);

    margin:0 auto var(--space-6);

    padding:var(--space-7);

    border-radius:var(--radius-xl);

    background:var(--gradient-primary);

    color:var(--text);

    box-shadow:var(--shadow-lg);

}


.wallet-balance-card::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-100px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}


.wallet-balance-card::after{

    content:"";

    position:absolute;

    bottom:-70px;

    left:-60px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}


.wallet-balance-card>*{

    position:relative;

    z-index:2;

}


.wallet-balance-card small{

    display:block;

    color:rgba(255,255,255,.75);

    font-size:var(--font-sm);

    margin-bottom:var(--space-3);

    letter-spacing:.5px;

}


.wallet-balance-card h1{

    margin:0;

    font-size:clamp(2.4rem,5vw,3.8rem);

    font-weight:var(--weight-extrabold);

    color:var(--text);

    line-height:1.1;

}


.wallet-balance-card p{

    margin-top:var(--space-4);

    color:rgba(255,255,255,.88);

    font-size:var(--font-md);

    max-width:550px;

}


/*======================================
DEPOSIT CARD
======================================*/

.deposit-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:var(--space-6);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.deposit-card:hover{

    border-color:var(--primary);

    box-shadow:var(--shadow-lg);

    transform:translateY(-3px);

}


.deposit-card h3{

    margin:0;

    color:var(--text);

    font-size:var(--font-xl);

    font-weight:var(--weight-bold);

}


.deposit-card>p{

    margin-top:var(--space-2);

    margin-bottom:var(--space-6);

    color:var(--text-muted);

    line-height:1.7;

}


/*======================================
AMOUNT INPUT
======================================*/

.input-group{

    display:flex;

    align-items:center;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:0 var(--space-5);

    transition:var(--transition);

}


.input-group:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}


.input-group span{

    font-size:1.5rem;

    font-weight:var(--weight-bold);

    color:var(--primary);

    flex-shrink:0;

}


.input-group input{

    width:100%;

    background:transparent;

    border:none;

    outline:none;

    padding:20px 18px;

    color:var(--text);

    font-size:1.25rem;

    font-weight:var(--weight-semibold);

}


.input-group input::placeholder{

    color:var(--text-muted);

}


/*======================================
TABLET
======================================*/

@media(max-width:768px){

    .wallet-balance-card{

        padding:var(--space-6);

        border-radius:var(--radius-lg);

    }

    .deposit-card{

        padding:var(--space-5);

    }

}


/*======================================
PHONE
======================================*/

@media(max-width:480px){

    #depositForm{

        padding:0 var(--space-3) var(--space-8);

    }

    .wallet-balance-card{

        padding:var(--space-5);

    }

    .wallet-balance-card h1{

        font-size:2.2rem;

    }

    .deposit-card{

        padding:var(--space-4);

    }

    .input-group{

        padding:0 var(--space-4);

    }

    .input-group input{

        padding:18px 14px;

        font-size:1.1rem;

    }

}

/*======================================
ADD FUNDS
PART 2
PAYMENT METHODS
======================================*/


/*======================================
PAYMENT GRID
======================================*/

.payment-method-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:var(--space-5);

}


.payment-option{

    display:block;

}


.payment-option input{

    display:none;

}


/*======================================
PAYMENT CARD
======================================*/

.payment-card{

    display:flex;

    align-items:center;

    gap:var(--space-5);

    padding:var(--space-5);

    background:var(--surface);

    border:2px solid var(--border);

    border-radius:var(--radius-lg);

    cursor:pointer;

    transition:var(--transition);

    min-height:95px;

}


.payment-card:hover{

    border-color:var(--primary);

    background:var(--card-hover);

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}


.payment-option input:checked + .payment-card{

    border-color:var(--primary);

    background:rgba(37,99,235,.10);

    box-shadow:0 0 0 4px rgba(37,99,235,.10);

}


/*======================================
LOGO
======================================*/

.payment-logo{

    width:60px;

    height:60px;

    object-fit:contain;

    flex-shrink:0;

    border-radius:var(--radius);

    background:#ffffff;

    padding:6px;

}


.payment-card h4{

    margin:0;

    color:var(--text);

    font-size:var(--font-lg);

    font-weight:var(--weight-bold);

}


.payment-card small{

    display:block;

    margin-top:6px;

    color:var(--text-muted);

    text-transform:uppercase;

    letter-spacing:.5px;

}


/*======================================
PAYMENT PREVIEW
======================================*/

#paymentPreview{

    margin-top:var(--space-5);

}


.payment-preview-header{

    display:flex;

    align-items:center;

    gap:var(--space-5);

    margin-bottom:var(--space-6);

    padding-bottom:var(--space-5);

    border-bottom:1px solid var(--border);

}


.preview-logo{

    width:70px;

    height:70px;

    object-fit:contain;

    border-radius:var(--radius);

    background:#ffffff;

    padding:8px;

}


.payment-preview-header h2{

    margin:0;

    color:var(--text);

    font-size:1.4rem;

    font-weight:var(--weight-bold);

}


.payment-preview-header small{

    display:block;

    margin-top:6px;

    color:var(--text-muted);

}


/*======================================
DETAIL ROW
======================================*/

.detail-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:var(--space-5);

    padding:14px 0;

    border-bottom:1px solid var(--border);

}


.detail-row:last-child{

    border-bottom:none;

}


.detail-row span{

    color:var(--text-muted);

}


.detail-row strong{

    color:var(--text);

    text-align:right;

    word-break:break-word;

}


/*======================================
COPY BOX
======================================*/

.wallet-copy-box{

    display:flex;

    align-items:center;

    gap:var(--space-3);

    margin-top:var(--space-5);

}


.wallet-copy-box input{

    flex:1;

    height:54px;

    padding:0 var(--space-4);

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    color:var(--text);

    outline:none;

}


.wallet-copy-box input:focus{

    border-color:var(--primary);

}


.wallet-copy-box button{

    height:54px;

    padding:0 var(--space-6);

    border:none;

    border-radius:var(--radius);

    background:var(--primary);

    color:var(--text);

    font-weight:var(--weight-bold);

    cursor:pointer;

    transition:var(--transition);

}


.wallet-copy-box button:hover{

    background:var(--primary-hover);

}


/*======================================
TABLET
======================================*/

@media(max-width:768px){

    .payment-method-grid{

        grid-template-columns:1fr;

    }

}


/*======================================
PHONE
======================================*/

@media(max-width:480px){

    .payment-card{

        padding:var(--space-4);

        gap:var(--space-4);

    }

    .payment-logo{

        width:50px;

        height:50px;

    }

    .payment-preview-header{

        flex-direction:column;

        align-items:flex-start;

        text-align:left;

    }

    .wallet-copy-box{

        flex-direction:column;

    }

    .wallet-copy-box input,

    .wallet-copy-box button{

        width:100%;

    }

    .detail-row{

        flex-direction:column;

        align-items:flex-start;

    }

    .detail-row strong{

        text-align:left;

    }

}