.td-modal{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.7);

z-index:999999;

}

.td-modal-content{

    position:relative;

    width:90%;

    max-width:950px;

    max-height:107vh;

    overflow:hidden;

    background:#121a2b;

    border-radius:18px;

    padding:18px;

    margin:auto;

}

.td-close{

position:absolute;

color:#FFF !important;

right:25px;

top:20px;

font-size:30px;

cursor:pointer;

}

.td-title{

color:#E6AE31;
font-size: 20px;

text-align:center;

margin-bottom:15px;

}

.td-progress{

display:flex;

align-items:center;

justify-content:center;

margin-bottom:15px;
padding-left: 70px;
padding-right: 70px;

}

.td-step{

text-align:center;

}
.td-step p{

text-align:center;
color:#FFF;

}

.td-step span{

width:40px;

height:40px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#4b5563;

color:#fff;

margin:auto;

font-weight:bold;

}

.td-step.active span{

background:#E6AE31;

color:#77151D;

}

.td-line{

height:3px;

background:#444;

flex:1;

margin:0 10px;

}

#tdStep1 input,

#tdStep1 textarea{

width:100%;

padding:7px;

margin-bottom:15px;

background:#1f2937;

border:1px solid #867231;

color:#fff;

border-radius:8px;

}

#tdStep1 textarea{

height:60px;

}

#tdStep1 button{

width:100%;

padding:7px;

background:#E6AE31;

color:#77151D;

font-size:18px;

font-weight:bold;

border:none;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

#tdStep1 button:hover{

background:#ffb300;

}
.td-row{

display:flex;

gap:20px;

margin-bottom:15px;

}

.td-col{

flex:1;

}

.td-col input{

width:100%;

}

@media(max-width:768px){

.td-row{

display:block;

}

.td-col{

margin-bottom:15px;

}

}

/*==========================
STEP-2
==========================*/

.td-payment-success{

background:#222929;

padding:5px;
border: 1px solid #E6AE31;

border-radius:8px;

text-align:center;

font-size:16px;
font-weight: 600;

margin-bottom:15px;

}

.tick{

color:#FFF;

font-size:20px;

margin-right:10px;

}
.scan{
    color:#fff;
}
.td-payment-success #tdAmountText{
    color:#FFF;
}
#upiText{
    color:#FFF;
    text-align: center;
}

.td-payment-wrapper{

display:flex;

gap:30px;
align-items:flex-start;

}

.td-left{

width:40%;

text-align:center;

}

.td-right{

width:60%;

background:#172133;

padding:20px;

border-radius:10px;

}

#tdQRCode{

display:flex;

justify-content:center;

margin-bottom:7px;

}

.td-amount-badge{

background:#E6AE31;
width: 100%;

padding:2px 2px;

border-radius:30px;

font-size:18px;

font-weight:bold;

color:#77151D;

margin:15px auto;

display:inline-block;

}
.td-amount-badge p{
    text-align: center;
    color: #FFF;
}

.td-upi-box{

display:flex;

justify-content:space-between;

background:#222f45;

padding:8px;

border-radius:8px;

margin-top:15px;

}

.td-upi-box button{

background:#E6AE31;

border:none;

padding:4px 15px;

border-radius:6px;

cursor:pointer;

}

.td-bank-table{

width:100%;

border-collapse:collapse;

margin-top:20px;

}

.td-bank-table td{

padding:5px 0;

border-bottom:1px solid #333;

color:#fff;

}

.td-upi-buttons{

display:flex;

gap:10px;

margin-top:20px;

flex-wrap:wrap;

}

.td-upi-buttons button{

background:#243247;

color:#fff;

border:none;

padding:7px 7px;

border-radius:6px;

cursor:pointer;

}

.td-footer-buttons{

display:flex;

justify-content:space-between;

margin-top:25px;
align-items:center;

margin-top:20px;

}

.td-footer-buttons button{

padding:7px 15px;

border:none;

border-radius:8px;

font-size:16px;

cursor:pointer;

}

#paymentDone{

background:#E6AE31;

color:#77151D;

font-weight:bold;

}

#tdBack1{

background:#444;

color:#fff;

}

/* STEP 3 */

.td-upload-box{

background:#172133;

padding:30px;

border-radius:10px;

text-align:center;

}
.td-upload-box p{
    color:#FFF;
}

.td-upload-box input{

margin-top:20px;

}

#previewImage{

margin-top:20px;

}

#previewImage img{

max-width:220px;

border-radius:10px;

}

.message{
    border-bottom: 1px solid #162130 !important;
    margin-bottom: 20px;
}