@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Color+Emoji&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=Noto+Color+Emoji&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.2s linear;
    font-family: "Inter", sans-serif;
    -webkit-tap-highlight-color: transparent; 
}
::-webkit-scrollbar {  display: none;}

body{
    overscroll-behavior:none!important;
    }

    .payment7_main_section {
        background: radial-gradient(circle, rgba(9,21,121,0.7959558823529411) 0%, rgba(255,255,255,1) 100%);
      }

      .payment7_section {
        background: linear-gradient(0deg, #020912 8.68%, #1E4985 60.7%, #0B203C 90.34%, #0B203C 94.08%);
        height: 100vh;
        margin: auto;
        width: 100%;
        max-width: 550px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100dvh;
      }
      @media (min-width: 550px) and (max-width: 809px) {
        .payment7_section {
          max-height: 95dvh;
          height: unset;
        }
      }

      @media (min-width: 810px){
        .payment7_section {
          max-height: 95dvh;
          height: unset;
        }
      }
      @media (min-width:1100px){
        .payment7_section{
          height: unset;
          max-height: 97vh;
        }
      }

      .payment7_sec_sub_cont{
        height: 90%;
        overflow: scroll;
        padding:5px 15px 15px;
      }

      .payment7_paynow_btn {
        position: sticky;
        bottom: 0;
        display: flex;
        justify-content: center;
        padding: 10px 15px 10px;
        background: #0a1128;
      }
      @media (max-width:549px){
        .payment7_paynow_btn{
          position: fixed;
          width: 100%;
        }
      }

      .payment7_paynow {
        width: 100%;
        padding: 18px;
        background: linear-gradient(180deg, #224F9B 0%, #0C1B35 100%);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        font-weight: 600;
        text-transform: uppercase;
      }
      .pay_btn_disabled {
        opacity: 0.5;
        cursor: not-allowed;
          pointer-events: none;
      }

    @media (min-width: 550px) {
        .payment7_main_section {
          overflow: hidden;
          height: 100dvh;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .slt_pymt_mthd {

        display: flex;
        text-align: center;
        color: #ffffff;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-size: 16px;
        margin: 0;
        padding: 15px 0;
        font-family: Roboto;
        font-weight: 600;
        line-height: 16.41px;
        text-align: center;
    
    }
    .payment_title {
        position: relative;
    }
    .arrw_backed {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor:pointer;
    }
    
    .Amount_PayAble
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .AmountPayAble
    {
    font-family: Inter;
    font-size: 12px;
    font-weight: 500;
    line-height: 14.52px;
    text-align: left;
    color: #628ECA;
    }
    
    .AmountCount
    {
        font-family: Roboto;
    font-size: 28px;
    font-weight: 700;
    line-height: 32.81px;
    text-align: left;
    color: #F9F9F9;
    padding:10px 0px;
    }
    
    .QR_code
    {
        display: flex;
        justify-content: center;
    }
    .QR_Code_Section
    {
        width: 100%;
    height:270px;
    padding: 5px;
    gap: 10px;
    border-radius: 12px;
    background: linear-gradient(0deg, #3B66AB 7.21%, #1B3663 85.13%);
    }
    
    .Scan_pay
    {
        font-family: Roboto;
    font-size: 14px;
    font-weight: 600;
    line-height: 16.41px;
    text-align: center;
    color:#fff;
    padding:5px 0px;
    }
    .QR_Img_scanner
    {
        display:flex;
        justify-content: center;
        padding:5px 0px;
    }
    .QR_Img_scanner img
    {
        width:152px;
    }
    .QR_timEr
    {
        font-family: Roboto;
    font-size: 12px;
    font-weight: 300;
    line-height: 14.06px;
    text-align: center;
    color:#fff;
    padding:5px 0px;
    }
    
    .QR_timEr_span
    {
        font-family: Roboto;
    font-size: 12px;
    font-weight: 600;
    line-height: 14.06px;
    text-align: center;
    color: #F95050;
    }
    .Qr_InStruCtion
    {
        font-family: Roboto;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0.02em;
    text-align: center;
    color:#fff;
    }
    .QR_gpay_info
    {
        display: flex;
        justify-content: center;
        gap:10px;
        padding:5px 0px;
    }
    .QR_gpay_info li{
    display: inline-block;
    }



    .PaYmenT_OpTion
{
    display: flex;
    gap:10px;
    flex-direction: column;
    margin-top:15px;
}
.PaYmenT_OpTion_p{
    font-family: Roboto;
font-size: 16px;
font-weight: 600;
line-height: 18.75px;
text-align: left;
color:#fff;
}
.PayMent_Choose_Option
{
    display: flex;
    flex-direction: column;
width:100%;
height:auto;
/* padding: 5px; */
gap: 2px;
border-radius: 12px;
background: linear-gradient(0deg, #1B3663 14.87%, #3B66AB 92.79%);
}
.no-flex {
    align-self: flex-start; /* Override the centering */
  }

  .CPayMent_Section
{
    display:flex;
}

.cpaymeNT
{
    font-family: Roboto;
font-size: 16px;
font-weight: 500;
line-height: 18.75px;
text-align: left;
color:#fff;
}

.cpayMent_seLect
{
    display: flex;
    align-items: center;
    gap:5px;
}
.cpayMent_seLect_span
{
    font-family: Roboto;
font-size: 16px;
font-weight: 500;
line-height: 18.75px;
text-align: left;
color:#fff;
}

.SeLect_Payment_option
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #0D2340A6;
    padding:7px 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.SelEct_lefT_align
{
    display: flex;
    align-items: center;
    gap:10px;
}

/* Hide default radio button */
.Cus_rad_btn input[type="radio"] {
    display: none;
  }
  
  /* Style the custom radio button */
  .Cus_rad_btn label {
    display: inline-block;
    width: 18px; /* Adjust size */
    height: 18px; /* Adjust size */
    border-radius: 50%;
    border: 1px solid #fff; /* Default border color */
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
  }
  
  /* Style when radio button is checked */
  .Cus_rad_btn input[type="radio"]:checked + label {
    background-color: #007bff; /* Background color when selected */
    border-color: #007bff; /* Border color when selected */
  }
  
  /* Add a dot in the center of the custom radio button */
  .Cus_rad_btn label::after {
    content: '';
    display: block;
    width: 12px; /* Size of the dot */
    height: 12px; /* Size of the dot */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s;
  }
  
  /* Dot color when radio button is checked */
  .Cus_rad_btn input[type="radio"]:checked + label::after {
    background-color: #fff; /* Dot color when selected */
  }
  .borD_clr
  {
    border-bottom:none;
  }

  @supports (-webkit-touch-callout: none) {
    @media only screen and (max-width:549px)
    {
        body
        {
            background: #010913!important;
        }
    }
}

/*screen 2*/

.SuCess_Msg_Section
{
    width: 100%;
height:auto;
padding: 10px 5px;
border-radius: 12px;
background: linear-gradient(0deg, #3B66AB 7.21%, #1B3663 85.13%);
}

.Sucess_Notif
{
text-align: center;
padding:5px 0px;
}
.Sucess_Notif_Msg
{
  font-family: Roboto;
font-size: 14px;
font-weight: 600;
line-height: 16.41px;
text-align: center;
color:#fff;
padding:5px 0px;
}
.Sucess_Notif_ConT
{
  font-family: Roboto;
font-size: 12px;
font-weight: 400;
line-height: 14.06px;
letter-spacing: 0.01em;
text-align: center;
color:#fff;
padding:5px 0px;
}
.Success_Payment_Info
{
  display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid transparent;
    border-image: radial-gradient(46.42% 207.35% at 50% 50.49%, #F3F6F9 0%, rgba(51, 89, 152, 0) 100%);
    border-image-slice: 1;
    padding:9px 10px;
    -webkit-tap-highlight-color: transparent;
}
.Success_Payment_Info:last-child
{
  border:none;
}
.suCCess_PayMent_DetA
{
  color:#fff;
}
.suCCess_PayMent_DetAL
{
  font-family: Roboto;
font-size: 16px;
font-weight: 600;
line-height: 18.75px;
text-align: left;
color:#fff;
}
.suCCess_PayMent_DetAR
{
  font-family: Roboto;
font-size: 16px;
font-weight: 400;
line-height: 18.75px;
letter-spacing: 0.01em;
text-align: center;
color:#fff;
}
.Order_Success_Btn
{
  padding-top:15px;
}
.SuCCess_bTn_Suc {
  width: 100%;
  padding: 18px;
  background: linear-gradient(180deg, #224F9B 0%, #0C1B35 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
}

/*Screen 3*/

.FailuRe_Msg_Section
{
    width: 100%;
height:auto;
padding: 10px 5px;
border-radius: 12px;
background: linear-gradient(0deg, #3B66AB 7.21%, #1B3663 85.13%);
}

.FailUre_Notif
{
text-align: center;
padding:5px 0px;
}
.FailuRe_Notif_Msg
{
  font-family: Roboto;
font-size: 14px;
font-weight: 600;
line-height: 16.41px;
text-align: center;
color:#fff;
padding:5px 0px;
}
.FaiLuRE_Notif_ConT
{
  font-family: Roboto;
font-size: 12px;
font-weight: 400;
line-height: 14.06px;
letter-spacing: 0.01em;
text-align: center;
color:#fff;
padding:5px 0px;
}
.FaiLuRE_Payment_Info
{
  display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid transparent;
    border-image: radial-gradient(46.42% 207.35% at 50% 50.49%, #F3F6F9 0%, rgba(51, 89, 152, 0) 100%);
    border-image-slice: 1;
    padding:9px 10px;
    -webkit-tap-highlight-color: transparent;
}
.FaiLuRE_Payment_Info:last-child
{
  border:none;
}
.suCCess_PayMent_DetA
{
  color:#fff;
}
.FailURE_PayMent_DetAL
{
  font-family: Roboto;
font-size: 16px;
font-weight: 600;
line-height: 18.75px;
text-align: left;
color:#fff;
}
.FailURE_PayMent_DetAR
{
  font-family: Roboto;
font-size: 16px;
font-weight: 400;
line-height: 18.75px;
letter-spacing: 0.01em;
text-align: center;
color:#fff;
}
.Order_Success_Btn
{
  padding-top:15px;
  padding-bottom:10px;
}
.FailUrE_bTn_Suc {
  width: 100%;
  padding: 18px;
  background: linear-gradient(180deg, #224F9B 0%, #0C1B35 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
}
.payment7_suc_fail_sub_cont{
  height: 100%;
  padding:5px 15px 15px;
}