@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
 * {
     -webkit-tap-highlight-color: transparent;
}
 body {
     background-color: #f0f0f0;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: "Inter", sans-serif;
     /* overflow: hidden; */
     height: 100dvh;
}
 .pay_upi_section {
     display: flex;
     justify-content: center;
     height: 100dvh;
}
 .payment_container {
     background: #f0f0f3;
     max-width: 550px;
     width: 100%;
     position: relative;
    }
.payment_container::-webkit-scrollbar{
    display: none;
    width: 0;
}
 .payment_header {
     background: linear-gradient(144.08deg, #ebfeff 21.01%, rgba(255, 244, 254, 0.567708) 54.93%, #ecffeb 99.48%);
     border-radius: 0px 0px 32px 32px;
     padding: 10px 10px 10px 10px;
}
 .logo_pay {
     box-shadow: -3px 3px 7px 4px #aeaec080;
     color: #F0F0F3;
     border-radius: 50%;
     padding: 10px;
}
 .logo_pay .payment_header a {
     display: inline-block;
}
 .payment_header img.back_icon {
     background: #f0f0f3;
     border: 2px solid;
     border-image-source: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
     box-shadow: 4px 4px 12px 0px #AEAEC080, -4px -4px 5px 0px #FFFFFF;
     border-radius: 50%;
     padding: 5px;
     cursor: pointer;
}
 .Payable_amt {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
 .Payable_amt p {
     font-family: "Inter", sans-serif;
     font-size: 14px;
     font-weight: 500;
     text-align: center;
     color: #999ba1;
     margin: 10px 0px 5px;
}
 p.pay_amt {
     font-family: "Inter", sans-serif;
     font-size: 24px;
     font-weight: 700;
     text-align: center;
     color: #282828;
     margin: 0;
}
 .payment_types {
     padding: 15px 10px;
}
 .payment_types ul {
     display: flex;
     justify-content: center;
     gap: 5px;
     align-items: center;
     list-style-type: none;
     border: 1px solid;
     background: #f0f0f3;
     border-image-source: linear-gradient(91.44deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.6) 100%);
     box-shadow: inset -5px -5px 4px rgba(255, 255, 255, 0.4), inset 5px 5px 4px rgba(174, 174, 192, 0.4);
     border-radius: 50px;
     padding: 6px 4px;
     margin: 10px 0;
}
 .payment_types ul li {
     border-radius: 50px;
     flex-shrink: 1;
     text-align: center;
     width: 50%;
     padding: 13px 7px;
     font-family: "Inter", sans-serif;
     font-size: 14px;
     font-weight: 600;
     text-align: center;
     border: 2px solid transparent;
     cursor: pointer;
}
 .payment_types ul li.deff_pay_types.active {
     background: #f0f0f3;
     border: 2px solid;
     border-image-source: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
     box-shadow: 5px 5px 10px 0px #aeaec033, -5px -5px 5px 0px #ffffff66, 2px 2px 4px 0px #ffffff inset, -2px -2px 4px 0px #0000001a inset;
     box-shadow: -5px -5px 5px 0px #ffffff66;
     box-shadow: 2px 2px 4px 0px #ffffff inset;
     box-shadow: -2px -2px 4px 0px #0000001a inset;
}
 .payment_scan {
     display: none;
}
 .payment_scan.active {
     display: block;
}
 .payment_scan .scner_cnts {
     box-shadow: 5px 5px 20px 0px #aeaec080;
     border-radius: 10px 0px 0px 0px;
     padding: 20px 14px 14px 14px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background: #f0f0f3;
     border-radius: 10px;
     /* margin-top: 15px; */
}
 .scaner {
     max-width: 110px;
     width: 100%;
}
 .scner_info {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 5px 10px;
     text-align: center;
}
 .scner_info p {
     font-family: "Inter", sans-serif;
     font-size: 13px;
     font-weight: 500;
     text-align: center;
     color: #282828;
     margin: 0 0 8px;
     text-wrap: balance;
}
 p.scan_timer {
     padding: 2px 9px 2px 9px;
}
 .scner_timer_main p.counter_upi {
     font-size: 12px;
     font-weight: 500;
     margin: 0;
     font-family: "Inter", sans-serif;
     color: #ffffff;
}
 .scner_timer_main {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
}
 .scner_timer {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 5px;
     margin: 0;
     text-align: center;
     color: #ffffff;
     background: #d4574f;
     padding: 7px 10px;
     border-radius: 14px;
}
 .scner_timer_main p {
     font-family: "Inter", sans-serif;
     font-size: 12px;
     font-weight: 400;
     text-align: center;
     color: #999ba1;
     margin: 0 0 8px;
}
 .payment_deff_typs {
     /* padding: 15px 0 0 0; */
     display: none;
}
 .payment_deff_typs.active {
     display: block;
}
 .deff_paymts {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #f0f0f3;
     box-shadow: 0px 2px 3px 4px #aeaec045;
     padding: 12px 10px;
     border-radius: 6px;
     margin-bottom: 10px;
     cursor: pointer;
}
 .paymt_name {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 8px;
}
.paymt_name img{
    max-width: 30px;
}
 .paymt_name p.pay_name {
     font-size: 14px;
     font-family: "Inter", sans-serif;
     text-align: center;
     color: #1a1a1a;
     margin: 0;
}
/* input*/
 input[type="radio"] {
     position: relative;
     width: 16px;
     height: 16px;
     margin-right: 8px;
     appearance: none;
     border: 1px solid #D9D9D9;
     border-radius: 50%;
     cursor: pointer;
     outline: none;
     transition: border-color 0.3s, background-color 0.3s;
     background: #F0F0F3;
}
 input[type="radio"]:checked {
     background-color: #007BFF;
     border-color: #007BFF;
}
 input[type="radio"]::before {
     content: '';
     position: absolute;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #F0F0F3;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: opacity 0.3s;
}
 input[type="radio"]:checked::before {
     opacity: 1;
     background: #F0F0F3;
}
 .pay_now_main {
     display: flex;
     justify-content: center;
     align-items: center;
     width: calc(100% - 20px);
     position: fixed;
     bottom: 0px;
     padding: 10px;
     background: #f0f0f3;
     border-radius: 0 0 32px 32px;
}
 .pay_now_main button {
     background: #EBE9FE;
     border-radius: 10px;
     padding: 15px 10px;
     border: none;
     width: 100%;
     color  : #000000;
     cursor: pointer;
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 600;
     text-align: center;
     box-shadow: 5px 5px 20px 0px #AEAEC080;
     box-shadow: -5px -5px 20px 0px #FFFFFF;
}
 .pay_now_main button.pay_btn_disabled {
     background: #d1d2d5;
     color: #82848d;
     box-shadow: 5px 5px 20px 0px #aeaec080;
     cursor: not-allowed;
     pointer-events: none;
}
 /* @supports (-webkit-touch-callout: none) {
     .pay_upi_section {
         padding-bottom: 60px;
    }
} */
/* succss section payment_status_succss*/
.payment_status_succss .payment_header,.payment_status_failed .payment_header{
    padding: 20px 5px 10px;
}
.Payable_amt p.succes_text{
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #32BA7C;    
    text-align: center;
    margin: 5px 0px;
}
.detains_main{
    padding: 15px 10px;
    margin: 25px 0px 10px;
}
.payment_details{
    background: #F0F0F3;
    box-shadow: 5px 5px 20px 5px #AEAEC080;    
    padding: 15px 10px;    
    border-radius: 10px;
    text-align: center;
    margin-bottom: 10px;
}
.pay_details_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 2px solid #EAEAEA
}
.payment_details p.details_heading{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;    
    text-align: center;
    color: #2E2E2E;
    margin: 0;
}
p.lft_txt_details{
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #2E2E2E;
    margin: 0;
}
p.rgt_txt_details{
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    color: #676767;
}
.done_btn_main,.try_btn_main{
    background: #EBE9FE;
    box-shadow: 5px 5px 20px 5px #AEAEC080;
    padding: 10px 20px;
    border-radius: 10px;
    text-align: center;
    margin-top: 20px;
}
.done_btn_main button.done_btn,.try_btn_main button.try_again_btn{
    width: 100%;
    border: none;
    background: transparent;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #000000;
    cursor: pointer;
}
/* succss section payment_status_failed*/
.Payable_amt p.failed_text{
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #FF6174;    
    text-align: center;
    margin: 5px 0px;
}
.payment_status_succss p.pay_amt{
    margin-bottom: 10px;
}
.scaner img{
max-width: 100%;
}
@media screen and (min-width: 551px) {
     body {
         overflow: hidden;
    }
     .pay_upi_section {
         align-items: center;
         background: rgba(0, 0, 0, 0.6);
         -webkit-backdrop-filter: blur(2px) !important;
         backdrop-filter: blur(2px) !important;
         width: 100vw;
    }
     .payment_container {
         border-radius: 32px;
         height: 95%;
         overflow-y: auto;
    }
     .pay_now_main button {
         width: 96%;
    }
     .pay_now_main button.pay_btn_disabled {
         box-shadow: unset;
    }
     .payment_header {
         border-radius: 32px;
    }
     .deff_paymts {
         box-shadow: 5px 5px 20px 0px #aeaec080;
         padding: 16px 10px;
    }
     .pay_now_main {
         position: sticky;
         width: calc(100% - 20px);
    }
     .payment_types {
         padding: 10px 20px 30px;
    }
     .payment_types ul li, .paymt_name p.pay_name {
         font-size: 16px;
    }
}
 @media screen and (min-width: 699px) {
     .payment_container {
         height: unset;
    }
     .pay_now_main {
         bottom: 10px;
    }
    .pa_sc_ll{
        padding-bottom:0px!important;
     }
}
@media screen and (min-width: 620px) and (max-height: 850px){
    .payment_container{
        height: 95%;
    }
    .pa_sc_ll{
        padding-bottom:0px!important;
     }
}
 @media screen and (max-width: 360px) {
     .payment_types ul li {
         font-size: 12px;
    }
}

@media screen and (min-width: 414px) and (max-height:416px){
    .payment_container {
        height: unset;
   }
}
@media screen and (min-width: 1200px){
    .payment_container {
        height: unset;
   }
}