/* ==========================================================================
   SA/HIEG — Shared styles for sign-in / sign-up / verify-email
   ========================================================================== */

:root {
  --maroon: #7a1f2b;
  --maroon-dark: #5c1620;
  --navy: #1c2b4a;
  --navy-dark: #121d33;
  /* Accent used on the sign-in (dark) card: icons, links, focus ring.
     Was gold (#c9a227) — now navy blue to match the site palette. */
  --gold: #1c2b4a;
  --ink: #1a1a1a;
  --muted: #6b7280;
  --card-bg: rgba(255, 255, 255, 0.08);
  --card-bg-light: #ffffff;
  --border: rgba(255, 255, 255, 0.18);
  --error: #d64545;
  --success: #2e7d32;

  --font-display: 'Oswald', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
}

/* ---- Page shell ---------------------------------------------------- */
.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page--centered { justify-content: center; }

.page__bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('../assets/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* .page__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 40px);
} */

.page__scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0, 0, 0, 0.144));
}

/* ---- Banner ---------------------------------------------------------- */
.banner {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 10px 22px;
  margin: 14px 0 0 0;
  background: rgba(255, 255, 255, 0.375);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(241, 180, 180, 0.641);
  animation: slide-in-left 0.8s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .auth-card,
  .banner {
    animation: none;
  }
}
.banner__logo { height: 54px; width: auto; object-fit: contain; }

/* ---- Content layout --------------------------------------------------- */
.content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 20px 60px;
  flex-wrap: wrap;
}

.content--centered { justify-content: center; }

.brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand__logo { max-width: 680px; width: 100%; height: auto; margin-left: 60px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35)); }

/* ---- Auth card --------------------------------------------------------- */
.auth-card {
  width: 100%;
  max-width: 400px;              /* compact so the page fits viewport */
  padding: 28px 32px;             /* tighter padding — no scroll needed */
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  color: #fff;
}

/* On the sign-in page only (`.content`, not `.content--centered`), shift
   the auth-card toward the centre so it sits further from the right edge. */
.content:not(.content--centered) .auth-card {
  margin-right: 40px;
}

.auth-card--light {
  background: var(--card-bg-light);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

/* ---- Sign-up card ----------------------------------------------------
   Wider than the sign-in card so First / Middle / Last Name fit on one
   row, but kept compact so the whole form fits viewport without
   scrolling. */
.auth-card--narrow {
  max-width: 580px;
  padding: 24px 28px;
}
.auth-card--verify { text-align: center; }

.auth-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 6px;
  margin: 0 0 4px;
}

.auth-card__title--dark { color: var(--navy); }
.auth-card__title--center { text-align: center; }

.auth-card__subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin: 0 0 18px;
}

.auth-card__subtitle--dark { color: var(--muted); }
.auth-card__subtitle--center { text-align: center; margin-bottom: 4px; }

.auth-card__signup {
  text-align: center;
  font-size: 13px;
  margin: 14px 0 0;
  color: rgba(255,255,255,0.75);
}

.auth-card__signup--dark { color: var(--muted); }
.auth-card__signup a { color: var(--gold); font-weight: 600; text-decoration: none; }
.auth-card__signup--dark a { color: var(--maroon); }
.auth-card__signup a:hover { text-decoration: underline; }

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.auth-card {
  animation: slide-in-left 0.8s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .auth-card {
    animation: none;
  }
}
/* ---- Form fields --------------------------------------------------- */
.field { margin-bottom: 14px; }

.field__row { display: flex; justify-content: space-between; align-items: center; }

.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.85);
}

.field__label--dark { color: var(--navy); }

.field__control { position: relative; }

.field__input {
  width: 100%;
  padding: 12px 42px 12px 14px;
  font-size: 14.5px;
  font-family: var(--font-body);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field__input::placeholder { color: rgba(255,255,255,0.45); }

.field__input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(28, 43, 74, 0.25);
}

.field__input--light {
  background: #f7f7f8;
  border: 1px solid #e2e2e6;
  color: var(--ink);
}

.field__input--light::placeholder { color: #9a9aa2; }

.field__input--light:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.12);
}

.field__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.field__icon--dark { color: #9a9aa2; }

.field__icon--button {
  pointer-events: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.field__forgot {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--gold);
  text-decoration: none;
}

.field__forgot:hover { text-decoration: underline; }

.field__error {
  color: var(--error);
  font-size: 12.5px;
  margin: 6px 0 0;
}

/* ---- Alerts ---------------------------------------------------------- */
.form-alert {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  background: rgba(214, 69, 69, 0.12);
  border: 1px solid rgba(214, 69, 69, 0.35);
  color: var(--error);
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.1s, opacity 0.15s, box-shadow 0.15s;
}

.btn:disabled { opacity: 0.65; cursor: not-allowed; }
.btn:not(:disabled):active { transform: scale(0.98); }

.btn--primary {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(122, 31, 43, 0.35);
}

.btn--primary:not(:disabled):hover { box-shadow: 0 10px 26px rgba(122, 31, 43, 0.45); }

.btn--google {
  background: #fff;
  border: 1px solid #e2e2e6;
  color: #3c4043;
}

.btn--google svg { width: 20px; height: 20px; }
.btn--google:hover { background: #f7f7f8; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.2);
}

.link-button {
  background: none;
  border: none;
  color: var(--maroon);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
}

.link-button:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }

/* ---- OTP / verify page ------------------------------------------------- */
.verify-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(122, 31, 43, 0.1);
  color: var(--maroon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.verify-email-address {
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 24px;
}

.otp-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.otp-input {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid #e2e2e6;
  background: #f7f7f8;
  color: var(--ink);
  outline: none;
}

.otp-input:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.12);
}

.verify-timer {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 20px;
}

#countdown { font-weight: 700; color: var(--maroon); }

/* ---- Footer ------------------------------------------------------------
   Sits over the light sandy portion of the background image, so it needs
   a strong dark shadow to stay readable. Text is bumped to near-white and
   given a heavy multi-layer shadow that reads against both light and dark
   patches of the background. */
.page__footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.3px;
}

/* ---- Responsive ---------------------------------------------------------
   Mobile/tablet breakpoint intentionally removed for now — laptop/desktop
   only. Re-add a <=720px block here to bring mobile support back. */

   /* ---- Field hints ------------------------------------------------------ */
.field__hint {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0 0;
  line-height: 1.4;
}
/* ---- Privacy checkbox on sign-up ------------------------------------- */
.field--checkbox {
  margin-top: 4px;
  margin-bottom: 20px;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.5;
}

.checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--maroon);
  cursor: pointer;
}

.checkbox span { flex: 1; }

.checkbox .link-button {
  font-size: inherit;
  color: var(--maroon);
  padding: 0;
  text-align: left;
}

/* ---- Privacy link on the sign-in page (dark card) -------------------- */
.auth-card__privacy {
  text-align: center;
  margin: 14px 0 0;
}

.link-button--light {
  color: var(--gold);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
}
.link-button--light:hover { text-decoration: underline; }

/* ---- Hide browser-native password reveal buttons ---------------------
   Microsoft Edge / Chromium adds a built-in eye icon inside password
   inputs by default, which stacks on top of our custom toggle and
   makes fields look like they have two eye icons. Suppress it so only
   our own icon shows. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
}
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---- Gold icons on the dark sign-in card ----------------------------- */
.auth-card:not(.auth-card--light) .field__icon {
  color: var(--gold);
}

/* ---- Multi-column row inside auth cards ------------------------------ */
.field-row {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.field-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.field-row .field {
  margin-bottom: 0;
}

/* On narrower screens, stack them so labels don't get cramped */
@media (max-width: 520px) {
  .field-row--3 {
    grid-template-columns: 1fr;
  }
}