/* ===========================
   OTP Login Page Styles (full)
   Put this as assets/css/otp-login.css
   =========================== */

/* Container (use either .otp-login-wrapper or .otp-card — both supported) */
.otp-login-wrapper,
.otp-card {
  max-width: 420px;
  margin: 50px auto;
  padding: 28px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  text-align: center;
  box-sizing: border-box;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Heading */
.otp-login-wrapper h2,
.otp-card h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  color: #222;
}

/* Instruction small text */
#phone-instruction,
.otp-login-wrapper small,
.otp-card small {
  color: #555;
  display: block;
  margin-top: 6px;
  font-size: 14px;
}

/* Phone input (cover different inputs) */
.otp-login-wrapper input[type="text"],
.otp-login-wrapper input[type="tel"],
.otp-card input[type="text"],
.otp-card input[type="tel"],
#otp_phone {
  width: 50px;
  height:55px;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
}

/* validation message below phone input */
#phone-validation-msg {
  color: #e3342f; /* red by default */
  display: block;
  margin-top: 3px;
  min-height: 18px;
  font-weight: 500;
}

/* Verify title & phone text */
.verify-title {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 8px;
  font-weight: 600;
}
.phone-text {
  color: #444;
  margin-bottom: 18px;
  font-size: 15px;
}

/* OTP inputs area */
.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  align-items: center;
}

/* each OTP box */
.otp-inputs input,
.otp-inputs .otp-digit {
  width: 50px;
  height: 55px;
  font-size: 24px;
  text-align: center;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  background: #fafafa;
  box-sizing: border-box;
  transition: border-color .16s ease, box-shadow .16s ease, background .12s ease;
}

/* focus look */
.otp-inputs input:focus,
.otp-inputs .otp-digit:focus {
  outline: none;
  border-color: #0073e6;
  box-shadow: 0 0 0 6px rgba(0,115,230,0.06);
  background: #fff;
}

/* Buttons - primary and secondary */
.otp-btn-send, .btn-primary {
  width: 100%;
  background: #0073e6;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  box-sizing: border-box;
}

.otp-btn-send:hover,
.btn-primary:hover { background: #0062bb; }

.otp-btn-verify {
  width: 100%;
  background: #28a745;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  box-sizing: border-box;
}

.otp-btn-back, .btn-back {
  width: 100%;
  background: #fff;
  color: #333;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e6e9ee;
  margin-top: 12px;
  cursor: pointer;
  box-sizing: border-box;
}

/* Resend text area */
.resend-text,
#resend-text {
  color: #999;
  margin-top: 12px;
  font-size: 14px;
}

/* OTP/ERROR messages */
.msg { margin-top: 10px; font-weight: 600; min-height: 20px; }

#otp-message,
#otp-error {
  display: none;
  margin-top: 10px;
  font-size: 14px;
  min-height: 20px;
}

#otp-message { color: #1f9d55; }
#otp-error { color: #d93025; }

/* If JS toggles classes for success / error ensure visibility */
#otp-message.show, #otp-message.success { display:block; color:#1f9d55; }
#otp-error.show, #otp-error.error { display:block; color:#d93025; }

/* link in resend */
#resend-text a,
#resend-text #resend-link {
  color: #0073e6;
  text-decoration: none;
}
#resend-text a:hover,
#resend-text #resend-link:hover { text-decoration: underline; }

/* small screens */
@media (max-width: 480px) {
  .otp-login-wrapper, .otp-card { padding: 18px; margin: 20px; }
  .otp-inputs { gap: 8px; }
  .otp-inputs input { width: 48px; height: 56px; font-size: 20px; }
}

/* Higher specificity fallback if theme overrides */
.otp-login-wrapper .otp-inputs input,
.otp-card .otp-inputs input,
.otp-login-wrapper #otp_phone,
.otp-card #otp_phone {
  /* repeated to increase specificity vs theme */
  border: 1px solid #e6e9ee;
  border-radius: 8px;
}

/* If a theme forcibly sets inputs, allow overrides (use sparingly) */
.otp-login-wrapper input[type="text"]:-webkit-autofill,
.otp-login-wrapper input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
}
#otp-message {
        background: #e8f5e8;
        color: #27ae60;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 15px;
        font-size: 14px;
        border: 1px solid #c8e6c9;
}

#otp-error {
		background: #ffe6e6;
        color: #d63031;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 15px;
        font-size: 14px;
        border: 1px solid #fdd;
}

/* New code here */
/* OTP Inputs (responsive) */
/* OTP Inputs (responsive) */
.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.otp-inputs input {
    width: 50px; /* Width for each OTP field */
    height: 55px; /* Height for the OTP field */
    font-size: 20px; /* Font size for OTP input */
    text-align: center;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    background: #fafafa;
    box-sizing: border-box;
    transition: border-color .16s ease, box-shadow .16s ease, background .12s ease;
}

/* Focus state of OTP inputs */
.otp-inputs input:focus {
    outline: none;
    border-color: #0073e6;
    box-shadow: 0 0 0 6px rgba(0, 115, 230, 0.06);
    background: #fff;
}

/* Mobile and smaller screens adjustment */
@media (max-width: 768px) {
    .otp-inputs input {
        width: 40px; /* Make OTP input fields smaller on mobile */
        height: 50px;
        font-size: 18px; /* Adjust font size on small screens */
    }
}

@media (max-width: 480px) {
    .otp-inputs input {
        width: 35px; /* Even smaller on very small screens */
        height: 45px;
        font-size: 16px; /* Further reduce font size for mobile */
    }
    .otp-inputs {
        gap: 8px; /* Adjust gap between inputs */
    }
}