/* ============================================================
   AGENT TOOLKIT — login / sign-up screens
   Reuses the .pw-* tokens/fields from brokers-main.css (same
   navy card, gold accents, Cormorant/Inter fonts).
============================================================ */
.auth-screen {
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.auth-card--wide { max-width: 540px; }
.auth-logo { margin: 0 auto 32px; width: 150px; }
.auth-logo img { width: 100%; height: auto; }

.auth-form { text-align: left; margin-top: 4px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .auth-row { grid-template-columns: 1fr; } }

.auth-label {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin: 0 0 6px 2px;
}
.auth-optional { color: rgba(255, 255, 255, .25); font-weight: 400; }

/* select + textarea styled to match .pw-field input */
.pw-field select,
.pw-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 2px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: .9rem;
  letter-spacing: .08em;
  padding: 14px 16px;
  outline: none;
  transition: border-color .2s;
}
.pw-field textarea { resize: vertical; min-height: 78px; }
.pw-field select:focus,
.pw-field textarea:focus { border-color: var(--gold); }
.pw-field select option { color: #111; }

/* agent-type segmented control */
.auth-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-type {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 13px 10px;
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 2px;
  color: rgba(255, 255, 255, .6);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
}
.auth-type input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.auth-type:hover { border-color: rgba(255, 255, 255, .4); }
.auth-type.is-active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(198, 161, 91, .08);
}

.auth-forgot {
  display: block;
  margin: -2px 2px 14px auto;
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .35);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}
.auth-forgot:hover { color: var(--gold); }

.auth-switch {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: rgba(255, 255, 255, .55);
  text-decoration: underline;
  cursor: pointer;
}
.auth-switch:hover { color: var(--gold); }

.auth-notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 2px;
  font-size: .78rem;
  letter-spacing: .03em;
  line-height: 1.5;
  background: rgba(198, 161, 91, .1);
  border: 1px solid rgba(198, 161, 91, .3);
  color: var(--gold-lt);
}

.auth-fineprint {
  margin-top: 14px;
  font-size: .68rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .45);
  text-align: center;
}

/* Big golden "Create an account" button on the login screen — same gold look as
   the Sign In button (.pw-submit) but larger/more prominent (requested). */
.auth-create {
  width: 100%;
  margin-top: 14px;
  background: var(--gold);
  border: none;
  border-radius: 2px;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 13px;
  cursor: pointer;
  transition: background .2s;
}
.auth-create:hover { background: var(--gold-lt); }