/* Auth pages */
.auth-wrap {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-surface);
}
.auth-art {
  position: relative;
  background: linear-gradient(160deg, #08436B 0%, #0E6FA4 50%, #1FA4E0 100%);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-7);
  overflow: hidden;
  color: white;
}
.auth-art::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 30% 20%, rgba(94,186,125,0.30), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(244,162,97,0.20), transparent 60%);
  pointer-events: none;
}
.auth-art-inner { position: relative; z-index: 1; max-width: 460px; }
.auth-art h2 { color: white; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: var(--s-4); }
.auth-art p { color: rgba(255,255,255,0.84); font-size: 1.05rem; }
.auth-art .quote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.4rem; line-height: 1.4; margin-top: var(--s-6); padding-left: var(--s-4); border-left: 3px solid #5EBA7D; }

.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: var(--s-7); }
.auth-form { width: 100%; max-width: 420px; }
.auth-form .brand { margin-bottom: var(--s-6); }
.auth-form h1 { font-size: 1.8rem; margin-bottom: var(--s-2); }
.auth-form p.sub { color: var(--c-muted); margin-bottom: var(--s-6); }
.auth-form .field + .field { margin-top: var(--s-4); }
.auth-form .btn { width: 100%; margin-top: var(--s-5); }
.auth-form .demo-creds {
  margin-top: var(--s-6);
  background: var(--c-primary-soft);
  border-radius: var(--r-2);
  padding: var(--s-4);
  font-size: 0.85rem;
  color: var(--c-primary-deep);
  border-left: 3px solid var(--c-primary);
}
.auth-form .demo-creds strong { display: block; margin-bottom: 6px; }
.auth-form .auth-switch { margin-top: var(--s-5); text-align: center; color: var(--c-muted); font-size: 0.9rem; }
.auth-form .auth-switch a { color: var(--c-primary); font-weight: 600; }

@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-art { padding: var(--s-6); min-height: 220px; }
}

/* ---------- Defensive overrides for browser-extension / autofill overlays ----------
   Some password managers (1Password, LastPass, Bitwarden, Dashlane) inject
   per-character icon overlays into text inputs whose autocomplete attribute
   they recognise as "save this". On the address field that produced a row of
   gray "!" bubbles instead of the typed text. We force-disable text-security
   on every text input under auth-form, and ensure a guaranteed-glyph font
   stack. (Password fields keep their normal masking from `type=password`.) */
.auth-form input[type=text],
.auth-form input[type=email],
.auth-form input[type=tel],
.auth-form input[type=date],
.reg-form input[type=text],
.reg-form input[type=email],
.reg-form input[type=tel],
.reg-form input[type=date] {
  -webkit-text-security: none !important;
          text-security: none !important;
}
#address_line {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: normal !important;
  font-feature-settings: normal !important;
  -webkit-text-security: none !important;
          text-security: none !important;
}