@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Teko:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Teko:wght@300..700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
body {
    overflow: hidden;
    background: #000000d6;
}
.payment25_section {
    height: 100vh;
    margin: auto;
    width: 100%;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100dvh;
    background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243E 100%);
}
.payment25_sec_sub_cont {
    height: 100%;
    overflow: scroll;
}
.payment25_sec_sub_cont::-webkit-scrollbar {
    display: none;
}
.payment25_sec_sub {
    padding: 12px 20px;
    background-attachment: scroll;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}
.payment25_upi_title {
    position: relative;
    padding: 10px 0px;
}
.payment_back_btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    cursor: pointer;
}
.payment25_upi_title h1 {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}
.amount_payable_sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 0.4px solid #4B4587;
    border-radius: 6px;
}
.amount_payable_left {
    display: flex;
    align-items: center;
    gap: 5px;
}
.amount_payable_txt {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #9D97CC;
}
.amount_payable_amount {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
}
.amount_payable_right {
    padding: 6px;
    background: linear-gradient(180deg, rgba(77, 70, 138, 0.4) 0%, rgba(56, 50, 109, 0.4) 100%);
    border: 0.4px solid #4B4587;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scanpay_upiapps_sec {
    padding: 15px 10px;
    border: 0.4px solid #4B4587;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}
.scan_pay_head {
    font-family: "Nunito", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    padding-bottom: 5px;
}
.scan_pay_box_cont {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.scan_pay_btxt {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #E4E1FF;
}
.scan_pay_left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}
.others_img_sec {
    padding: 5px;
    border: 0.5px solid #5F598B;
    display: flex;
    gap: 10px;
    justify-content: start;
    border-radius: 4px;
}
.scan_pay_stxt {
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 300;
    color: #BAB5E7;
}
.scan_pay_stxt span {
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #FF5247;
}
.payment_or_sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 auto;
    max-width: 300px;
}
.left_or_sec {
    display: block;
    width: 100%;
    height: 2px;
    border: 1px solid #7D79A933;
}
.payment_or_txt{
    font-family: "Nunito", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #7D79AA;
}
.right_or_sec {
    display: block;
    width: 100%;
    height: 2px;
    border: 1px solid #7D79A933;
}
.payment25_upi_options {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.upi_apps_ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.upi_apps_li {
    flex: 1;
    /* padding: 1px;
    background: linear-gradient(180deg, #332F66 0%, #4D4A80 100%);
    border-radius: 8px; */
}
.upi_apps_item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    /* background: #FFFFFF0A; */
    background: linear-gradient(180deg, #332F66 0%, #4D4A80 100%) padding-box, linear-gradient(180deg, #332F66 0%, #5f5c97 100%) border-box;
    border: 1px solid transparent;
    border-radius: 5px;
    background-clip: padding-box, border-box;
    cursor: pointer;
}
.upi_apps_name {
    font-family: "Nunito", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}
.payment25_paynow, .payment_done_btn, .payment_tryagain_btn {
    width: 100%;
    padding: 12px;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 700;
    background: linear-gradient(90deg, #4E54C8 0%, #8F94FB 100%);
    font-family: "Nunito", sans-serif;
}
 .payment_done_btn, .payment_tryagain_btn{
    margin-top:10px;
 }
.pay_btn_disabled {
    opacity: 0.5;
    cursor: not-allowed;
        pointer-events: none;
}
.payment25_paynow_btn {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 10px 15px 10px;
    background: #250c48;
}
.upi_apps_item.pay_upi_active {
    background: linear-gradient(90deg, #4E54C8 0%, #8F94FB 100%);
    border-radius: 5px;
    border-left-color: #4E54C8;
    border-right-color: #8F94FB;
}
.success_amount{
    color: #93F664;
}
.failed_amount{
    color: #FF5050;
}
.trans_status_sec {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    gap: 15px;
}
.trans_status_txt{
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #E4E1FF;
}
.trans_details_ul {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}
.trans_details_li {
    background: #FFFFFF0A;
    padding: 10px;
    border-radius: 5px;
}
.trans_details_txt {
    font-family: "Nunito", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
}
.trans_details_txt span{
    font-size: 16px;
    font-weight: 600;
}
*[x-apple-data-detectors],  /* iOS */
    .x-gmail-data-detectors,    /* Gmail */
    .x-gmail-data-detectors *,
    .aBn {
        border-bottom: 0 !important;
        cursor: default !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
}
.amount_payable_amount span {
    font-family: "Inter", sans-serif;
}
.payment_su_fa_value::before { 
    content: attr(data-value); 
  }
  .scan_pay_right img 
  {
max-width: 88px;
  }
@media (max-width: 549px) {
    .payment25_paynow_btn {
        position: fixed;
        width: 100%;
    }
}
@media (min-width: 550px) and (max-width: 809px) {
    .payment25_section {
        max-height: 95dvh;
        height: unset;
    }
}
@media (min-width: 810px) {
    .payment25_section {
        max-height: 95dvh;
        height: unset;
    }
}
@media (min-width: 1100px) {
    .payment25_section {
        height: unset;
        max-height: 97vh;
    }
}
@media (min-width: 550px) {
    .payment25_main_section {
        overflow-y: hidden;
        height: 100dvh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .payment25_upi_section {
        padding-bottom: 0px !important;
    }
    .payment25_sec_sub {
        row-gap: 10px;
    }
}
@media (max-width: 359px) {
    .amount_payable_txt {
        font-size: 10px;
    }
    .amount_payable_amount {
        font-size: 16px;
    }
    .amount_payable_right {
        padding: 4px;
        border-radius: 3px;
    }
    .amount_payable_right img {
        max-width: 8px;
    }
    .amount_payable_sec {
        padding: 8px;
        border-radius: 4px;
    }
    .scanpay_upiapps_sec {
        padding: 12px 8px;
        border-radius: 4px;
        row-gap: 12px;
    }
    .scan_pay_btxt {
        font-size: 10px;
    }
    .scan_pay_stxt {
        font-size: 8px;
    }
    .others_img_sec {
        padding: 4px;
        gap: 6px;
        border-radius: 3px;
    }
    .scan_pay_right img {
        max-width: 65px;
    }
    .upi_apps_item {
        gap: 8px;
        padding: 8px;
    }
}