/* ===== AUTH PAGES — login, forgot-password, reset-password ===== */

:root {
  --olive:       #38330F;
  --olive-mid:   #4e480f;
  --cream:       #F7EFD9;
  --border:      rgba(56,51,15,0.14);
  --text-muted:  rgba(56,51,15,0.5);
  --text-sub:    rgba(56,51,15,0.65);
  --error-bg:    rgba(220,60,60,0.07);
  --error-bdr:   rgba(220,60,60,0.22);
  --error-txt:   #8b1a1a;
  --success-bg:  rgba(40,100,80,0.07);
  --success-bdr: rgba(40,100,80,0.18);
  --success-txt: #1a4a38;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Page ─────────────────────────────────────────────────────── */
.auth-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  padding: 48px 24px 72px;
}

/* ── Logo ─────────────────────────────────────────────────────── */
.auth-logo {
  display: block;
  text-align: center;
  margin-bottom: 36px;
}
.auth-logo img {
  height: 44px;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* ── Card ─────────────────────────────────────────────────────── */
.auth-wrap {
  width: 100%;
  max-width: 460px;
}

.auth-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 48px 44px;
}

/* ── Header ───────────────────────────────────────────────────── */
.auth-header {
  margin-bottom: 32px;
  text-align: center;
}

.auth-header h1 {
  font-family: 'Granville', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--olive);
  margin-bottom: 8px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.auth-header p {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-sub);
  line-height: 1.6;
}

/* ── Flash ────────────────────────────────────────────────────── */
.flash {
  padding: 14px 18px;
  border-radius: 4px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 24px;
  line-height: 1.5;
}
.flash-success {
  background: var(--success-bg);
  border: 1px solid var(--success-bdr);
  color: var(--success-txt);
}
.flash-error {
  background: var(--error-bg);
  border: 1px solid var(--error-bdr);
  color: var(--error-txt);
}

/* ── Form ─────────────────────────────────────────────────────── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-group label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--olive);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}
.form-group input::placeholder { color: rgba(56,51,15,0.25); }
.form-group input:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(56,51,15,0.06);
}
.form-group.has-error input { border-color: rgba(200,50,50,0.5); }

/* Password toggle */
.input-wrap { position: relative; }
.input-wrap input { padding-right: 50px; }
.toggle-pw {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(56,51,15,0.35);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.toggle-pw:hover { color: var(--olive); }
.toggle-pw:focus-visible { outline: 2px solid var(--olive); border-radius: 2px; }

.form-error {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  color: #b91c1c;
}
.form-hint {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Submit ───────────────────────────────────────────────────── */
.btn-auth-submit {
  margin-top: 6px;
  width: 100%;
  padding: 15px;
  background: var(--olive);
  color: var(--cream);
  border: none;
  border-radius: 4px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, transform 0.15s;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1;
}
.btn-auth-submit:hover { background: var(--olive-mid); }
.btn-auth-submit:active { transform: scale(0.99); }
.btn-auth-submit:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

/* ── Footer links ─────────────────────────────────────────────── */
.auth-switch {
  text-align: center;
  margin-top: 24px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
}
.auth-switch a {
  color: var(--olive);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.auth-switch a:hover { opacity: 0.7; }

.auth-forgot {
  text-align: right;
  margin-top: -8px;
}
.auth-forgot a {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.auth-forgot a:hover { color: var(--olive); }

/* ── Sent icon ────────────────────────────────────────────────── */
.auth-sent-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(56,51,15,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--olive);
}

/* ── Back to site link (inside card) ─────────────────────────── */
.auth-back {
  display: block;
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.auth-back:hover { color: var(--olive); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 520px) {
  .auth-card { padding: 36px 24px; }
  .form-row.two-col { grid-template-columns: 1fr; }
}