/* =============================================================================
   Auth Modal — Login / Signup / Password Reset
   Embedded once into landing.html (and optionally into dashboard pages so
   the user can sign in without leaving the page).

   Three modes controlled by data-mode attribute:
     #authModal[data-mode="sign-in"]      — login form
     #authModal[data-mode="sign-up"]      — signup form (with newsletter checkbox)
     #authModal[data-mode="reset-password"] — password reset form
   ============================================================================= */

.auth-modal {
  display: none;                          /* shown via JS: openAuthModal() */
  position: fixed; inset: 0;
  background: rgba(42, 34, 56, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  align-items: center; justify-content: center;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.auth-modal-card {
  background: #FAF5EE;
  border-radius: 18px;
  width: 100%; max-width: 420px;
  padding: 36px 32px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  position: relative;
  max-height: 90vh; overflow-y: auto;
}

.auth-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: #5C5470;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.auth-modal-close:hover { background: rgba(0,0,0,0.06); }

.auth-modal-eyebrow {
  font-size: 11px; font-weight: 800; color: #7C72B3;
  letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 8px;
}

/* Brand logo at the top of the modal (replaces the old text eyebrow). */
.auth-modal-logo {
  display: block;
  height: 26px; width: auto;
  max-width: 60%;
  margin: 0 0 14px;       /* left-aligned, like the old eyebrow text */
  object-fit: contain;
}

.auth-modal-title {
  font-size: 26px; font-weight: 900; color: #2A2238;
  letter-spacing: -0.3px; margin: 0 0 6px;
}

.auth-modal-subtitle {
  font-size: 14px; color: #5C5470;
  margin: 0 0 22px; line-height: 1.5;
}

.auth-modal-field {
  margin-bottom: 14px;
}
.auth-modal-field label {
  display: block; font-size: 12px; font-weight: 700;
  color: #2A2238; margin-bottom: 5px;
}
.auth-modal-field input {
  width: 100%; padding: 11px 14px;
  border: 1px solid #E8E2D8; border-radius: 8px;
  font-size: 14px; font-family: inherit;
  background: white; color: #2A2238;
  box-sizing: border-box;
}
.auth-modal-field input:focus {
  outline: none; border-color: #7C72B3;
  box-shadow: 0 0 0 3px rgba(124, 114, 179, 0.15);
}

.auth-modal-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 22px;
  font-size: 13px; color: #5C5470; line-height: 1.45;
  cursor: pointer;
}
.auth-modal-checkbox input { margin-top: 2px; }

.auth-modal-submit {
  width: 100%; padding: 13px 18px;
  background: #7C72B3; color: white;
  border: none; border-radius: 9px;
  font-size: 14px; font-weight: 800; font-family: inherit;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s;
}
.auth-modal-submit:hover { background: #6b60a3; }
.auth-modal-submit:disabled { background: #aca3d0; cursor: not-allowed; }

.auth-modal-error {
  background: #fdf0f0; color: #c0392b;
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; margin-bottom: 14px;
  display: none;                            /* shown via JS when error string set */
}
.auth-modal-error:not(:empty) { display: block; }

.auth-modal-success {
  background: #e7f2e8; color: #3a7d4a;
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; margin-bottom: 14px;
  display: none;
}
.auth-modal-success:not(:empty) { display: block; }

.auth-modal-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 13px; color: #5C5470;
}
.auth-modal-footer a {
  color: #7C72B3; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.auth-modal-footer a:hover { text-decoration: underline; }

.auth-modal-divider {
  height: 1px; background: #E8E2D8;
  margin: 18px 0 14px;
}

.auth-modal-legal {
  font-size: 11px; color: #8B829F;
  margin-top: 16px; line-height: 1.5;
  text-align: center;
}
.auth-modal-legal a { color: #7C72B3; }

/* Mode-based visibility — controlled by data-mode on #authModal */
.auth-modal[data-mode="sign-in"] .auth-mode-sign-in,
.auth-modal[data-mode="sign-up"] .auth-mode-sign-up,
.auth-modal[data-mode="reset-password"] .auth-mode-reset,
.auth-modal[data-mode="check-email"] .auth-mode-check-email,
.auth-modal[data-mode="set-password"] .auth-mode-set-password {
  display: block;
}
.auth-modal .auth-mode-sign-in,
.auth-modal .auth-mode-sign-up,
.auth-modal .auth-mode-reset,
.auth-modal .auth-mode-check-email,
.auth-modal .auth-mode-set-password {
  display: none;
}

/* Check-email success state — shown after signup, before email confirmation */
.auth-mode-check-email .check-email-icon {
  width: 56px; height: 56px; margin: 0 auto 18px;
  background: #E7F2E8; color: #3A8A4F;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900;
}
.auth-mode-check-email .check-email-email {
  display: block; margin: 8px 0 18px;
  padding: 10px 14px; background: var(--brand-light, #ECEAF5);
  border-radius: 8px; color: var(--brand, #7C72B3);
  font-weight: 700; word-break: break-all;
}
.auth-mode-check-email .check-email-hint {
  font-size: 13px; color: var(--text-soft, #6B6562);
  line-height: 1.55; margin-bottom: 8px;
}
.auth-mode-check-email .check-email-resend-row {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line, #E5DED6);
  font-size: 13px; color: var(--text-soft, #6B6562);
}
.auth-mode-check-email .check-email-resend-row a {
  color: #7C72B3; cursor: pointer; font-weight: 700;
}
.auth-mode-check-email .check-email-resend-status {
  display: inline-block; margin-left: 8px; font-size: 12px;
}