/* Jasour payment mobile hardening v10.18 */

body.jasour-payment-v1018,
body.jasour-payment-v1018 html{
  overflow-x:hidden!important;
}

body.jasour-payment-v1018 *{
  box-sizing:border-box!important;
}

body.jasour-payment-v1018 .j17-payment-card,
body.jasour-payment-v1018 .j18-payment-card{
  width:min(100% - 20px, 760px)!important;
  max-width:760px!important;
  margin:24px auto!important;
  padding:22px!important;
  overflow:hidden!important;
}

body.jasour-payment-v1018 .j17-payment-card > *,
body.jasour-payment-v1018 .j18-payment-card > *{
  min-width:0!important;
  max-width:100%!important;
}

/* bank card box */
body.jasour-payment-v1018 .j17-bank-box,
body.jasour-payment-v1018 .j18-bank-box{
  width:100%!important;
  max-width:100%!important;
  margin:18px 0!important;
  padding:20px 16px!important;
  overflow:hidden!important;
  text-align:center!important;
}

body.jasour-payment-v1018 .j18-card-number{
  display:block!important;
  width:100%!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  font-size:clamp(22px,6.5vw,38px)!important;
  line-height:1.35!important;
  letter-spacing:.6px!important;
  color:#fff!important;
}

/* payment summary */
body.jasour-payment-v1018 .j18-summary{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
  margin:18px 0!important;
}

body.jasour-payment-v1018 .j18-summary-item{
  min-width:0!important;
  padding:13px 12px!important;
  border:1px solid rgba(246,181,27,.18)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.025)!important;
  text-align:right!important;
}

body.jasour-payment-v1018 .j18-summary-item .j18-label{
  display:block!important;
  margin-bottom:6px!important;
  color:#b9c6d2!important;
  font-size:11px!important;
}

body.jasour-payment-v1018 .j18-summary-item .j18-value{
  display:block!important;
  color:#fff!important;
  font-weight:900!important;
  font-size:16px!important;
  line-height:1.6!important;
  overflow-wrap:anywhere!important;
}

body.jasour-payment-v1018 .j18-summary-item.final{
  grid-column:1/-1!important;
  border-color:rgba(246,181,27,.45)!important;
  background:rgba(246,181,27,.08)!important;
}

body.jasour-payment-v1018 .j18-summary-item.final .j18-value{
  color:#ffd45a!important;
  font-size:19px!important;
}

/* form */
body.jasour-payment-v1018 .j17-payment-card form,
body.jasour-payment-v1018 .j18-payment-card form{
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}

body.jasour-payment-v1018 .j17-payment-card input,
body.jasour-payment-v1018 .j17-payment-card select,
body.jasour-payment-v1018 .j17-payment-card textarea,
body.jasour-payment-v1018 .j18-payment-card input,
body.jasour-payment-v1018 .j18-payment-card select,
body.jasour-payment-v1018 .j18-payment-card textarea{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

@media(max-width:640px){
  body.jasour-payment-v1018 .j17-payment-card,
  body.jasour-payment-v1018 .j18-payment-card{
    width:calc(100% - 20px)!important;
    margin:14px 10px 24px!important;
    padding:17px 13px!important;
    border-radius:16px!important;
  }

  body.jasour-payment-v1018 .j17-payment-card h1,
  body.jasour-payment-v1018 .j17-payment-card h2,
  body.jasour-payment-v1018 .j18-payment-card h1,
  body.jasour-payment-v1018 .j18-payment-card h2{
    font-size:29px!important;
    text-align:center!important;
  }

  body.jasour-payment-v1018 .j18-summary{
    grid-template-columns:1fr!important;
  }

  body.jasour-payment-v1018 .j18-summary-item.final{
    grid-column:auto!important;
  }

  body.jasour-payment-v1018 .j17-bank-box,
  body.jasour-payment-v1018 .j18-bank-box{
    padding:18px 10px!important;
  }
}