/* BIDSMART_CLIENT_OTP_MODAL_AFTER_CREATE_V1
   Client OTP appears only after Create Client Account is clicked.
   Existing signup_otp.php and server-side OTP verification remain unchanged. */

/* Hide the old inline OTP block before JS moves it into the modal. */
body.client-register-page .client-otp-final{
  display:none!important;
}

.client-create-otp-modal{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
  background:rgba(15,23,42,.54)!important;
  backdrop-filter:blur(7px)!important;
}

.client-create-otp-modal.is-open{
  display:flex!important;
}

.client-create-otp-card{
  width:min(100%,470px)!important;
  padding:24px!important;
  border:1px solid rgba(255,255,255,.7)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 28px 80px rgba(0,0,0,.24)!important;
}

.client-create-otp-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-bottom:16px!important;
}

.client-create-otp-kicker{
  display:block!important;
  margin-bottom:6px!important;
  color:#c51622!important;
  font-size:9px!important;
  font-weight:950!important;
  letter-spacing:.13em!important;
}

.client-create-otp-head h3{
  margin:0!important;
  color:#17191d!important;
  font-size:25px!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  font-weight:900!important;
}

.client-create-otp-head p{
  margin:7px 0 0!important;
  color:#707b86!important;
  font-size:11px!important;
  line-height:1.5!important;
}

.client-create-otp-close{
  flex:0 0 36px!important;
  width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #e1e6ea!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#4e5863!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:none!important;
}

.client-create-otp-close:hover{
  background:#f6f7f8!important;
  color:#17191d!important;
}

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

.client-create-otp-phone span{
  color:#7b8590!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}

.client-create-otp-phone strong{
  color:#17191d!important;
  font-size:13px!important;
  font-weight:900!important;
}

/* The existing OTP element is moved here, keeping its original IDs/listeners. */
.client-create-otp-mount .client-otp-final{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.client-create-otp-mount .client-otp-final .client-form-section-head{
  display:none!important;
}

.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;
}

.client-create-otp-mount .client-otp-row button,
.client-create-otp-mount .client-otp-row input{
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  height:46px!important;
  margin:0!important;
  border-radius:10px!important;
}

.client-create-otp-mount .client-otp-row input{
  padding:0 12px!important;
  border:1px solid #d9dfe5!important;
  background:#fff!important;
  color:#17191d!important;
  text-align:center!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
  box-shadow:none!important;
}

.client-create-otp-mount .client-otp-row input:focus{
  border-color:#cf4a53!important;
  box-shadow:0 0 0 3px rgba(197,22,34,.08)!important;
  outline:none!important;
}

.client-create-otp-mount #sendClientOtp{
  padding:0 10px!important;
  border:1px solid #d8dee4!important;
  background:#fff!important;
  color:#242a31!important;
  font-size:10px!important;
  font-weight:900!important;
  box-shadow:none!important;
}

.client-create-otp-mount #sendClientOtp:hover{
  border-color:#c51622!important;
  background:#fff8f8!important;
  color:#c51622!important;
}

.client-create-otp-mount #verifyClientOtp{
  padding:0 10px!important;
  border:1px solid #d31722!important;
  background:#d31722!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
  box-shadow:0 7px 16px rgba(211,23,34,.14)!important;
}

.client-create-otp-mount #verifyClientOtp:hover{
  background:#b80f19!important;
  border-color:#b80f19!important;
}

.client-create-otp-mount .client-otp-status{
  margin:10px 1px 0!important;
  min-height:16px!important;
  color:#707b86!important;
  font-size:9.5px!important;
  line-height:1.45!important;
}

.client-create-otp-mount .client-otp-status.is-success{color:#087648!important}
.client-create-otp-mount .client-otp-status.is-error{color:#a51c1c!important}
.client-create-otp-mount .client-otp-status.is-info{color:#66717d!important}

.client-create-otp-note{
  margin:15px 0 0!important;
  padding-top:13px!important;
  border-top:1px solid #edf0f2!important;
  color:#7a8490!important;
  font-size:9px!important;
  line-height:1.5!important;
  text-align:center!important;
}

body.client-create-otp-open{
  overflow:hidden!important;
}

@media(max-width:620px){
  .client-create-otp-modal{padding:12px!important}
  .client-create-otp-card{
    padding:19px!important;
    border-radius:16px!important;
  }
  .client-create-otp-head h3{font-size:21px!important}
  .client-create-otp-mount .client-otp-row{
    grid-template-columns:1fr!important;
  }
}