/* ============================================
   Wagg & Dine - Next.js Fixes
   Overrides for issues caused by app.css (Velzon)
   This file MUST be loaded after style.css
   ============================================ */

/* Fix: Input text color - typed text must be DARK, only placeholder is white */
.login_account_form,
.create_account_form,
.forgot_password_account_form,
.password_reset_form {
  text-align: left !important;
  color: white !important;
}

.login_account_form::placeholder,
.create_account_form::placeholder,
.forgot_password_account_form::placeholder,
.password_reset_form::placeholder {
  text-align: left !important;
  color: white !important;
}

/* Fix: input[type=number] browser right-alignment */
input[type="number"].login_account_form,
input[type="number"].create_account_form,
input[type="tel"].login_account_form,
input[type="tel"].create_account_form {
  text-align: left !important;
}

/* Fix: Dropdown arrow - use CSS instead of missing Remix Icons */
.navbar .dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 0.35em;
  vertical-align: 0.2em;
  content: "" !important;
  border-top: 0.35em solid;
  border-right: 0.35em solid transparent;
  border-bottom: 0;
  border-left: 0.35em solid transparent;
  font-family: inherit !important;
}

/* Fix: Eye icon button in password field alignment */
.auth-pass-inputgroup .password-addon,
.position-relative .btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 12px;
}

/* Fix: Form control focus state */
.login_account_form:focus,
.create_account_form:focus {
  background-color: #CFBAA4 !important;
  border-color: #b5956f;
  box-shadow: none;
}

/* Fix: OTP description text */
.otp_des {
  color: #393634;
  font-family: "Aleo", serif;
  font-size: 14px;
}

/* Fix: Submit/Verify button styles (in case style.css doesn't cover) */
.mobile_no_submit_btn {
  background: black !important;
  color: white !important;
  border-radius: 10px;
  padding: 10px;
  font-family: "Aleo", serif;
}

.verifybtn {
  background: black !important;
  color: white !important;
  border-radius: 10px;
  padding: 10px;
  font-family: "Aleo", serif;
}

/* Fix: Ensure form-control has no Velzon overrides for our forms */
.login_account_container .form-control,
.create_account_container .form-control,
.forgot_password_account_container .form-control {
  border: 1px solid #CFBAA4;
}

/* Fix: Password reset page (Step 1) form */
.password_reset_form {
  text-align: left !important;
  color: #333 !important;
}

.password_reset_form::placeholder {
  text-align: left !important;
  color: white !important;
}

.password_reset_form:focus {
  background-color: #CFBAA4 !important;
  border-color: #b5956f;
  box-shadow: none !important;
}

/* Fix: Forgot password page (Step 2) form alignment */
.forgot_password_account_form:focus {
  background-color: #CFBAA4 !important;
  border-color: #b5956f;
  box-shadow: none !important;
}

/* Fix: Password eye toggle - proper vertical center */
.auth-pass-inputgroup {
  position: relative;
}

.auth-pass-inputgroup .password-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 12px;
  z-index: 5;
}

/* Fix: Disabled form fields */
.create_account_form:disabled,
.forgot_password_account_form:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Fix: Alert styling for auth pages */
.login_account_container .alert,
.create_account_container .alert,
.forgot_password_account_container .alert,
.password_reset_bg .alert {
  font-family: "Aleo", serif;
  border-radius: 10px;
}


/* Fix: Dog form inputs - text left aligned */
.add_dog_form_input,
.Update_Profile_form_input {
  text-align: left !important;
  color: white !important;
}

.add_dog_form_input::placeholder,
.Update_Profile_form_input::placeholder {
  text-align: left !important;
  color: #F7E9DC !important;
}

/* Fix: Select dropdowns text left */
select.add_dog_form_input,
select.Update_Profile_form_input {
  text-align: left !important;
  color: #F7E9DC !important;
}

select.add_dog_form_input option,
select.Update_Profile_form_input option {
  color: #F7E9DC;
}


/* Fix: Select dropdown arrow - white color */
select.add_dog_form_input,
select.Update_Profile_form_input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Fix: Address form inputs - placeholder left aligned */
.add_address_input,
.add_address_input::placeholder {
  text-align: left !important;
}

textarea.add_address_input,
textarea.add_address_input::placeholder {
  text-align: left !important;
}

select.add_dog_form_input option:disabled,
select.Update_Profile_form_input option:disabled {
  color: white !important;
}