/* Auth pages: login, traveller sign up, password reset (OTP), approval pending */

.tp-auth-alert {
  border-radius: 12px;
  font-size: 15px;
  margin-bottom: 24px;
}

.tp-auth-alert ul {
  margin: 0;
  padding-left: 18px;
}

.tp-auth-alert ul li {
  list-style: disc;
}

/* Native selects styled like .tp-input */
.tp-auth-area .tp-review-input select.tp-input {
  width: 100%;
  padding-left: 20px;
  padding-right: 44px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23071516' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
  outline: none;
}

.tp-auth-area .tp-review-input .tp-input.is-invalid {
  border-color: #dc3545 !important;
}

.tp-auth-field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #dc3545;
}

.tp-auth-phone {
  display: flex;
  gap: 10px;
}

.tp-auth-area .tp-auth-phone select.tp-input {
  flex: 0 0 120px;
  max-width: 120px;
}

.tp-auth-lowercase {
  text-transform: lowercase;
}

.tp-auth-lowercase::placeholder {
  text-transform: none;
}

/* Password eye toggle (button variant of .tp-login-input-eye) */
button.tp-login-input-eye {
  background: none;
  border: 0;
  padding: 4px;
  line-height: 0;
  color: var(--tp-grey-1);
  right: 18px;
}

.tp-login-input-eye .open-close {
  display: inline-block;
}

.tp-login-input-eye.is-visible .open-eye {
  display: inline-block;
}

.tp-login-input-eye.is-visible .open-close {
  display: none;
}

.tp-auth-area .tp-review-input .p-relative .tp-input {
  padding-right: 56px;
}

.tp-auth-area .tp-review-input .tp-auth-otp-input.tp-input {
  text-align: center;
  letter-spacing: 10px;
  font-size: 22px !important;
  font-weight: 700;
}

.tp-auth-area .tp-review-input .tp-auth-otp-input.tp-input::placeholder {
  letter-spacing: normal;
  font-size: 15px;
  font-weight: 400;
}

.tp-auth-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--tp-theme-1);
  background: rgba(253, 70, 33, 0.1);
}

.tp-auth-icon.is-warning {
  color: #d97706;
  background: #fef3c7;
}

.tp-auth-note {
  text-align: left;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(7, 21, 22, 0.08);
  background: var(--tp-grey-3, #f7f9f9);
  margin-bottom: 30px;
}

.tp-auth-note h5 {
  font-size: 16px;
  margin-bottom: 6px;
}

.tp-auth-note p {
  font-size: 15px;
  margin-bottom: 0;
}

.tp-auth-steps {
  text-align: left;
  margin-bottom: 30px;
}

.tp-auth-steps li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--tp-grey-1);
  margin-bottom: 12px;
}

.tp-auth-steps li i {
  color: var(--tp-theme-1);
  font-size: 18px;
  line-height: 1.4;
}

.tp-auth-link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--tp-common-black);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tp-auth-link-btn:hover {
  color: var(--tp-theme-1);
}

.tp-auth-footer-text {
  font-size: 15px;
  color: #49535B;
}

.tp-auth-footer-text a {
  color: var(--tp-common-black);
  font-weight: 500;
}

.tp-auth-footer-text a:hover {
  color: var(--tp-theme-1);
}

@media (max-width: 575px) {
  .tp-auth-area .tp-auth-phone select.tp-input {
    flex-basis: 100px;
    max-width: 100px;
  }
}