@import url("/connexion/auth.css");

/* The registration page shares NARKE's login system; these overrides let the
   longer form flow naturally without changing the login screen. */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(0, 19, 33, 0) 0%, #001321 100%) bottom / 100% 142px no-repeat,
    url("/pages/assets/narke-water-reference.png") center bottom / 100% 114px no-repeat,
    radial-gradient(ellipse at 50% 57%, rgba(0, 164, 209, .14), transparent 50%),
    #001321;
}
.hero-art {
  width: 100%;
  aspect-ratio: 498 / 316;
  overflow: hidden;
  background: #031f35;
}
.hero-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.auth-card {
  min-height: 0;
  margin-bottom: 0;
  padding-bottom: 34px;
}
.auth-card h1 {
  font-size: 22px;
  line-height: 1.3;
}
.auth-subtitle { margin-bottom: 16px; }
.auth-card form { gap: 12px; }
.phone-field .field-icon {
  width: 42px;
  flex-basis: 42px;
  border-right: 1px solid rgba(169, 210, 230, .48);
}
.phone-field { padding-left: 14px; }
.phone-input, .password-field input, .auth-card form > .field {
  font-size: 16px;
}
.auth-card form > .field {
  height: 45px;
  min-height: 45px;
}
.auth-card .primary-button { margin-top: 2px; }
.form-divider { margin-bottom: 4px; }
.switch-copy { margin-top: 0; }
.password-toggle { touch-action: manipulation; }
.referral-input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 16px;
}
.referral-input::placeholder { color: #d1e0e9; opacity: 1; }
.referral-field:focus-within {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(0, 223, 255, .36), 0 0 0 2px rgba(0, 223, 255, .16);
}
.auth-page .auth-card input:focus-visible {
  outline: 2px solid var(--cyan-soft);
  outline-offset: 2px;
}
@media (max-width: 380px) {
  .auth-page { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .auth-card form { gap: 11px; }
  .auth-card h1 { font-size: 20px; }
}