/* ==============================================
   OTP Buttons (Send OTP / Verify OTP)
   ============================================== */
.btn-outline-otp {
  display: inline-block;
  background-color: #ff8242;       /* solid Boba orange */
  color: #fff;                     /* white text */
  border: 1px solid #ff8242;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 4px;
  height: 38px;
  line-height: 1.3;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(255,130,66,0.2);
}

.btn-outline-otp:hover,
.btn-outline-otp:focus {
  background-color: #e86f2f;       /* darker orange on hover */
  border-color: #e86f2f;
  color: #fff;
  box-shadow: 0 3px 8px rgba(232,111,47,0.3);
  text-decoration: none;
}

.btn-outline-otp:disabled,
.btn-outline-otp[disabled] {
  background-color: #ffb48a;       /* muted orange for disabled */
  border-color: #ffb48a;
  color: #fff;
  opacity: 0.75;
  cursor: not-allowed;
}

/* Hide Forgot Password link in Sign-Up popup only */
.siginupcontainer .forgetPasswordClick {
  display: none !important;
}

/* =========================================================
   Compress vertical spacing below Sign In / Sign Up titles
   ========================================================= */
.siginincontainer h3.text-center,
.siginupcontainer h3.text-center {
  margin-bottom: 6px !important;   /* reduce gap below title */
}

.siginincontainer form#login,
.siginupcontainer form#register {
  margin-top: 8px !important;     /* tighten spacing above form */
}

/* ---------------------------------------------
   Force color for bottom "Sign Up" link
--------------------------------------------- */
.login-form-popup .bottom-links a.signUpClick {
  color: #3B82F6 !important;   /* 🔵 bright blue — stands out */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-form-popup .bottom-links a.signUpClick:hover {
  color: #2563EB !important;   /* darker blue on hover */
  text-decoration: underline;
}

/* ---------------------------------------------
   Subtle grey color for "Forgot Password" link
--------------------------------------------- */
.login-form-popup .bottom-links a.forgetPasswordClick {
  color: #9CA3AF !important; /* light gray (Tailwind gray-400) */
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-form-popup .bottom-links a.forgetPasswordClick:hover {
  color: #6B7280 !important; /* darker gray on hover */
  text-decoration: underline;
}

/* ---------------------------------------------
   Bottom "Already have an account? Sign in" styling (Sign-Up popup)
--------------------------------------------- */
.login-form-popup .bottom-links a.signInClick {
  color: #3B82F6 !important;   /* 🔵 bright blue, matches Sign Up link */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-form-popup .bottom-links a.signInClick:hover {
  color: #2563EB !important;   /* darker blue hover */
  text-decoration: underline;
}

/* Optional: neutralize the plain text before the link if theme colors it */
.login-form-popup .bottom-links {
  color: #555;
}

/* Restrict to mobile popup only */
#app-view-login-popup .siginincontainer .bottom-links .signUpClick {
  display: none !important; /* hides "Not a member? Sign up" */
}

#app-view-login-popup .siginupcontainer .bottom-links .signInClick {
  display: none !important; /* hides "Already have an account? Sign in" */
}

/* Only change top bar color in mobile popup */
#app-view-login-popup .login-form-pop-tabs {
  background-color: #739f2d !important;
}

/* Prevent mobile browsers from zooming when focusing input fields */
#app-view-login-popup input,
#app-view-login-popup select,
#app-view-login-popup textarea {
  font-size: 16px !important; /* minimum size to prevent zoom */
}

/* for submit form only *****/
/* Submit-page OTP UI tweaks */
.lp-submit-have-account .otp-forgot-wrapper {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
}

.lp-submit-have-account .otp-forgot-wrapper a {
  color: #ff8242;
  text-decoration: none;
}

.lp-submit-have-account .otp-forgot-wrapper a:hover {
  text-decoration: underline;
}

.lp-submit-have-account .boba-otp-sep {
  margin: 0 8px;
  color: #ccc;
}

.lp-submit-have-account .otp-input-group input {
  flex: 1;
}

.lp-submit-have-account .btn-outline-otp {
  border: 1px solid #ff8242;
  color: #ff8242;
  background: transparent;
}

.lp-submit-have-account .btn-outline-otp:hover {
  background: #ff8242;
  color: #fff;
}

.lp-submit-have-account .otp-forgot-wrapper {
  margin-top: 8px;
}