/* ── Mobile OTP full-page loader ─────────────────────────────────────────── */
.mol-site-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none !important;
  align-items: center;
  justify-content: center;
}

.mol-site-loader.mol-site-loader--active {
  display: flex !important;
}

.mobile-otp-login-form,
.mobile-otp-signup-form,
.mobile-otp-signup-container {
  position: relative;
}

.mol-recaptcha-wrap {
  margin: 0;
  padding: 0;
}

/* Invisible reCAPTCHA — hidden from layout, still in DOM for Firebase */
.mol-recaptcha-wrap--invisible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  min-height: 0 !important;
}

.mol-site-loader__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.mol-site-loader__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  min-width: 180px;
}

.mol-site-loader__spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  border: 4px solid #e8e8e8;
  border-top-color: #0073aa;
  border-radius: 50%;
  animation: mol-spin 0.8s linear infinite;
}

.mol-site-loader__text {
  margin: 0;
  font-size: 15px;
  color: #333;
  font-family: Arial, sans-serif;
}

@keyframes mol-spin {
  to { transform: rotate(360deg); }
}

.mobile-otp-login-form .mol_message.error,
.mobile-otp-signup-form .mol_signup_message.error {
  color: #c0392b;
}

.mobile-otp-login-form .mol_message.success,
.mobile-otp-signup-form .mol_signup_message.success {
  color: #28a745;
}

/* Progress bar in card */
@font-face {
    font-family: 'LarabieCompressedBold';
    src: url('../font/Larabiefont-Compressed-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
/* @font-face {
    font-family: 'LarabieCompressedBold';
    src: url('fonts/Larabiefont-Compressed-Bold.woff2') format('woff2'),
         url('fonts/Larabiefont-Compressed-Bold.woff') format('woff'),
         url('fonts/Larabiefont-Compressed-Bold.ttf') format('truetype');
} */

.progress-wrapper{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .progress-track{
    flex:1;
    height:18px;
    background:var(--track);
    border-radius:999px;
    overflow:hidden;
    position:relative;
    background: #fcb800;
  }

  .progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--fill-start),var(--fill-end));
    border-radius:999px;
    transition:width 900ms cubic-bezier(.2,.9,.3,1);
    box-shadow:0 4px 10px rgba(6,11,64,0.08) inset;
    background: #000000;
    float: right;
  }

  .progress-info{
    min-width:64px;
    text-align:center;
    font-weight:700;
    color:var(--muted);
    font-size:1.4rem;
  }
.limitotr {
	display: flex;
	align-items: center;
	font-size: 16px;
	background: #e7e7e7;
	padding: 20px;
	border-radius: 10px;
  margin-bottom: 40px;
}
.limitotr .col-md--6 {
    width:50%;
}
.limitotr .col-sm-12 {
    width:100%;
}

  /* small screens */
  @media (max-width:420px){
    .progress-info{ min-width:56px; font-size:0.85rem; }
  }

/**************   New Created Card Css   *****************/
.card {
	border-radius: 11px;
	padding: 30px;
	box-sizing: border-box;
	position: relative;
	color: var(--accent);
	overflow: hidden;
  background-image: url('../images/background.png');
  background-color: #171717;
	/*background: radial-gradient(900px 900px at 15% 70%, rgba(255,255,255,0.02), transparent 10%), radial-gradient(700px 700px at 85% 30%, rgba(255,255,255,0.02), transparent 10%), linear-gradient(180deg, #151515 0%, #0f0f0f 100%);*/
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  width: 465px;
  background-size: cover;
  background-repeat: no-repeat;
}

/* top-right badge */
.top-right {
  position:absolute;
  right:48px;
  top:40px;
  display:flex;
  gap:12px;
  align-items:center;
}

.jiologo {
	width: 66px;
}

.second-row {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.chip-img {
	display: inline-block;
}
.chip-wifi img{
  width: 22px;
}
.chip-img img {
	width: 46px;
	height: auto !important;
}

.card-numbers {
	margin-top: 10px;
	font-family: var(--digit-font);
	/* font-size: 47px; */
  font-size: 29px;
	letter-spacing: 6px;
	color: #FFF;
  /* font-family: 'LarabieCompressedBold', Arial, sans-serif; */
}

.bottom-row {
	margin-top: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bottom-row .card-holder-otr {
	width: 40%;
}

.bottom-row .expiry .label,
.bottom-row .card-holder-otr .card-holder{
  font-size: 13px;
  color: #FFFBFB;
}

.bottom-row .expiry .date,
.bottom-row .card-holder-otr .name{
  font-weight: 500;
  font-size: 17px;
  color: #FFFBFB;
}
.right-bottom .muted.small img {
	width: 50px;
}
@media screen and (min-width: 425px) and (max-width: 768px) {
  /* Your special CSS for large mobiles goes here */
  .card-numbers {
      /*font-size: 23px;*/
     font-size: 20px !important;
  }
  .card
  {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: -webkit-fill-available;
  }
}
@media only screen and (max-width: 767px) {
  .card {
      width: 100%;
      max-width: 430px;
      padding: 20px;
  }
  .card-numbers {
      /*font-size: 23px;*/
      font-size: 15px;
  }
  .bottom-row .card-holder-otr {
      width: 35%;
  }
  .bottom-row {
      margin-top: 20px;
      align-items: flex-start;
  }
  .second-row {
    margin-top: 15px;
  }
  .bottom-row .expiry .date, .bottom-row .card-holder-otr .name {
      font-size: 14px;
  }
  .limitotr {
  flex-direction: column;
  gap:20px;
      
  }
}