/* BIDSMART_SUPPLIER_OTP_MODULE_PARITY_V7
   Brings the Supplier OTP modal in line with the Client OTP module.
   Visual/responsive rules only; signup_otp.php remains the OTP authority. */

.supplier-otp-modal-card{
  width:min(100%,470px)!important;
  padding:24px 24px 20px!important;
}

.supplier-otp-phone{
  margin-bottom:12px!important;
}

/* V7 moves Send OTP into the control row, so the old inner heading is hidden. */
.supplier-otp-modal .signup-otp-header{
  display:none!important;
}

body.supplier-signup-page .supplier-otp-modal .signup-otp-row{
  display:grid!important;
  grid-template-columns:104px minmax(150px,1fr) 120px!important;
  column-gap:10px!important;
  row-gap:10px!important;
  align-items:end!important;
  width:100%!important;
}

body.supplier-signup-page .supplier-otp-modal .signup-otp-row > *{
  min-width:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
  align-self:end!important;
  box-sizing:border-box!important;
}

body.supplier-signup-page .supplier-otp-modal #sendSignupOtp,
body.supplier-signup-page .supplier-otp-modal #signupOtpCode,
body.supplier-signup-page .supplier-otp-modal #verifySignupOtp{
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  height:46px!important;
  margin:0!important;
  border-radius:10px!important;
  line-height:1.2!important;
}

body.supplier-signup-page .supplier-otp-modal #sendSignupOtp,
body.supplier-signup-page .supplier-otp-modal #verifySignupOtp{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 10px!important;
  white-space:nowrap!important;
}

body.supplier-signup-page .supplier-otp-modal #signupOtpCode{
  display:block!important;
  padding:0 12px!important;
  text-align:center!important;
  font-size:13px!important;
  letter-spacing:.055em!important;
}

body.supplier-signup-page .supplier-otp-modal #signupOtpCode::placeholder{
  color:#9aa3ad!important;
  letter-spacing:.025em!important;
  opacity:1!important;
}

body.supplier-signup-page .supplier-otp-modal .signup-otp-status{
  margin:10px 0 0!important;
  min-height:16px!important;
}

.supplier-otp-footer{
  margin-top:14px!important;
  padding-top:13px!important;
  border-top:1px solid #edf0f2!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:14px!important;
}

.supplier-otp-footer .supplier-otp-modal-note{
  flex:1 1 auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#7a8490!important;
  font-size:9px!important;
  line-height:1.5!important;
  text-align:left!important;
}

.supplier-otp-validity{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

.supplier-otp-validity-copy{
  display:none!important;
}

.supplier-otp-countdown{
  min-width:72px!important;
  padding:8px 11px!important;
  border:1px solid #e2e6ea!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#17191d!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:950!important;
  text-align:center!important;
  font-variant-numeric:tabular-nums!important;
  box-shadow:none!important;
}

.supplier-otp-validity.is-running .supplier-otp-countdown{
  border-color:#efc8cd!important;
  background:#fff7f8!important;
  color:#c51622!important;
}

.supplier-otp-validity.is-expired .supplier-otp-countdown{
  border-color:#f0c9cd!important;
  background:#fff2f3!important;
  color:#a51c1c!important;
}

.supplier-otp-validity.is-verified .supplier-otp-countdown{
  min-width:98px!important;
  border-color:#cce8d8!important;
  background:#f1fbf5!important;
  color:#087648!important;
}

body.supplier-signup-page .supplier-otp-modal button:disabled,
body.supplier-signup-page .supplier-otp-modal input:disabled{
  cursor:not-allowed!important;
}

@media(max-width:620px){
  .supplier-otp-modal{padding:12px!important}

  .supplier-otp-modal-card{
    padding:19px!important;
    border-radius:16px!important;
  }

  body.supplier-signup-page .supplier-otp-modal .signup-otp-row{
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }

  body.supplier-signup-page .supplier-otp-modal .signup-otp-row > *{
    align-self:stretch!important;
  }

  .supplier-otp-footer{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .supplier-otp-validity{
    justify-content:flex-end!important;
    width:100%!important;
  }
}