/* src/public/css/auth-verify.css */
/* NOTE: layout.ejs loads global CSS. Keep this file page-specific only. */

.av-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25rem 0;
}

.av-card {
  padding: 1.35rem 1.35rem 1.15rem;
}

.av-title {
  margin: 0 0 0.5rem;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.av-lede {
  margin: 0 0 0.75rem;
  opacity: 0.92;
  line-height: 1.45;
}

.av-email {
  word-break: break-word;
}

.av-help {
  margin: 0 0 1rem;
  opacity: 0.75;
}

.av-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.av-actions .btn {
  flex: 1 1 240px;
  min-height: 44px;
  border-radius: 0.85rem;
}

@media (max-width: 640px) {
  .av-wrap {
    padding: 0.75rem 0;
  }
  .av-card {
    padding: 1.15rem;
  }
}

/* --- Login: true 2-column alignment --- */
.auth-login .auth-login-row {
  align-items: start; /* labels align at the same top line */
}

/* Ensure both inputs fill their columns evenly */
.auth-login .auth-login-row .form-control {
  width: 100%;
}

/* Always reserve one line under inputs so validation doesn't shift the row */
.auth-login .auth-login-row .invalid-feedback {
  display: block;
  min-height: 18px;
  margin-top: 6px;
}

/* Spacer to keep column heights identical (matches forgot link height) */
.auth-login .auth-login-spacer {
  min-height: 28px; /* tweak 24–32 if you want */
}

/* Forgot password: right aligned under password field */
.auth-login .auth-forgot-wrap {
  display: flex;
  justify-content: flex-end;
  min-height: 28px; /* matches spacer so both columns stay even */
  margin-top: 6px;
}

.auth-login .auth-forgot-link {
  text-decoration: none;
}

.auth-login .auth-forgot-link:hover {
  text-decoration: underline;
}

/* Force Email + Password to be true two-column layout */
@media (min-width: 992px) { /* matches your col-lg breakpoint */
.auth-login .auth-login-row {
  display: flex;
  gap: 16px;                 /* space between columns */
  align-items: flex-start;   /* labels align */
  flex-wrap: nowrap;         /* stay side-by-side */
}

/* Make each column equal width */
.auth-login .auth-login-row > div {
  flex: 1 1 0;
  min-width: 0;              /* prevents weird overflow */
}
}