/* BIDSMART_CLIENT_OTP_MODAL_TIMER_FIX_V2
   Fixes the hidden Client OTP controls and adds a visible 5-minute validity timer.
   No backend OTP/session logic changes. */

/* Keep the old inline OTP hidden ONLY while it is still inside the page form. */
body.client-register-page .client-register-form > .client-otp-final,
body.client-register-page .client-final-panel > .client-otp-final{
  display:none!important;
}

/* Once moved inside the modal, force the original OTP controls visible. */
body.client-register-page .client-create-otp-mount .client-otp-final{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  width:100%!important;
  height:auto!important;
  overflow:visible!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body.client-register-page .client-create-otp-mount .client-otp-row{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr) 132px!important;
  gap:9px!important;
  align-items:center!important;
  width:100%!important;
}

body.client-register-page .client-create-otp-mount #sendClientOtp,
body.client-register-page .client-create-otp-mount #clientOtpCode,
body.client-register-page .client-create-otp-mount #verifyClientOtp{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

/* OTP validity timer */
.client-create-otp-validity{
  margin:0 0 13px!important;
  padding:10px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  border:1px solid #e2e7eb!important;
  border-radius:11px!important;
  background:#fafbfc!important;
}

.client-create-otp-validity-copy{
  display:grid!important;
  gap:2px!important;
}

.client-create-otp-validity-copy span{
  color:#78828d!important;
  font-size:8.5px!important;
  font-weight:850!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}

.client-create-otp-validity-copy strong{
  color:#49535e!important;
  font-size:9.5px!important;
  font-weight:800!important;
}

.client-create-otp-countdown{
  flex:0 0 auto!important;
  min-width:67px!important;
  padding:7px 9px!important;
  border:1px solid #e1e5e9!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#17191d!important;
  font-variant-numeric:tabular-nums!important;
  text-align:center!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
}

.client-create-otp-validity.is-running{
  border-color:#ead6d8!important;
  background:#fffafa!important;
}

.client-create-otp-validity.is-running .client-create-otp-countdown{
  border-color:#ebc7ca!important;
  color:#c51622!important;
}

.client-create-otp-validity.is-expired{
  border-color:#f0c9cd!important;
  background:#fff2f3!important;
}

.client-create-otp-validity.is-expired .client-create-otp-countdown{
  border-color:#e9b9bd!important;
  background:#fff!important;
  color:#a51c1c!important;
}

.client-create-otp-validity.is-verified{
  border-color:#cde7da!important;
  background:#f1faf5!important;
}

.client-create-otp-validity.is-verified .client-create-otp-countdown{
  border-color:#c6e5d5!important;
  color:#087648!important;
}

/* clearer status spacing */
body.client-register-page .client-create-otp-mount .client-otp-status{
  margin-top:10px!important;
  min-height:16px!important;
}

@media(max-width:620px){
  body.client-register-page .client-create-otp-mount .client-otp-row{
    grid-template-columns:1fr!important;
  }

  .client-create-otp-validity{
    align-items:flex-start!important;
  }
}