/* ZONEZ — Dealer portal forms
   Figma: 2268:2098 (login), 2271:3691 (request access), 2276:4016 (success)
   All values come from the global zz-* tokens. No literal colours. */

/* ── Two-column page shell ─────────────────────────────────────────────── */

.zz-auth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zz-space-48);
  align-items: start;
}

/* ── Left: marketing column ────────────────────────────────────────────── */

.zz-auth__intro {
  display: flex;
  flex-direction: column;
  gap: var(--zz-space-16);
}

.zz-eyebrow {
  margin: 0;
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-3);
  line-height: var(--zz-leading-body-3);
  font-weight: var(--zz-weight-regular);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--zz-secondary-700);
}

.zz-auth__title {
  margin: 0;
  font-family: var(--zz-font-heading);
  font-size: var(--zz-text-display-h1);
  line-height: var(--zz-leading-display-h1);
  font-weight: var(--zz-weight-bold);
  color: var(--zz-primary-700);
}

.zz-auth__lead {
  margin: 0;
  padding-bottom: var(--zz-space-16);
  max-width: 540px;
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-1);
  line-height: var(--zz-leading-body-1);
  color: var(--zz-color-text);
}

/* Stats strip */

.zz-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--zz-space-32);
  max-width: 540px;
  padding-top: 21px;
  padding-right: var(--zz-space-20);
  border-top: var(--zz-stroke-1) solid var(--zz-color-border);
}

.zz-stat__value {
  display: block;
  font-family: var(--zz-font-heading);
  font-size: var(--zz-text-h3);
  line-height: var(--zz-leading-h3);
  font-weight: var(--zz-weight-bold);
  color: var(--zz-secondary-500);
}

.zz-stat__label {
  display: block;
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-2);
  line-height: var(--zz-leading-body-2);
  color: var(--zz-color-text);
}

/* Disclaimer box (request access) */

.zz-disclaimer {
  display: flex;
  flex-direction: column;
  gap: var(--zz-space-8);
  padding: var(--zz-space-16);
  background: var(--zz-secondary-100);
  color: var(--zz-secondary-700);
}

.zz-disclaimer__title {
  margin: 0;
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-1);
  line-height: var(--zz-leading-body-1);
  font-weight: var(--zz-weight-semibold);
}

.zz-disclaimer__body {
  margin: 0;
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-2);
  line-height: var(--zz-leading-body-2);
}

.zz-disclaimer__body strong {
  font-weight: var(--zz-weight-semibold);
}

/* ── Right: form card ──────────────────────────────────────────────────── */

.zz-form-card {
  display: flex;
  flex-direction: column;
  gap: var(--zz-space-24);
  padding: var(--zz-space-24);
  background: var(--zz-color-surface);
  border: var(--zz-stroke-1) solid var(--zz-color-border);
  box-sizing: border-box;
}

.zz-form-card__title {
  margin: 0;
  font-family: var(--zz-font-heading);
  font-size: var(--zz-text-h2);
  line-height: var(--zz-leading-h2);
  font-weight: var(--zz-weight-bold);
  color: var(--zz-primary-700);
}

.zz-form-card__lead {
  margin: var(--zz-space-4) 0 0;
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-1);
  line-height: var(--zz-leading-body-1);
  color: var(--zz-color-text);
}

/* ── WPForms overrides ─────────────────────────────────────────────────── */

.zz-form-card .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: var(--zz-space-24);
}

.zz-form-card .wpforms-field-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zz-space-16);
}

.zz-form-card .wpforms-field {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--zz-space-4) !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

.zz-form-card .wpforms-field.zz-col-full,
.zz-form-card .wpforms-field.wpforms-field-password,
.zz-form-card .wpforms-field.wpforms-field-textarea {
  grid-column: 1 / -1;
}

/* Labels */

.zz-form-card .wpforms-field-label,
.zz-form-card label.wpforms-field-label {
  display: flex !important;
  align-items: center !important;
  gap: var(--zz-space-4) !important;
  margin: 0 !important;
  font-family: var(--zz-font-body) !important;
  font-size: var(--zz-text-body-1) !important;
  line-height: var(--zz-leading-body-1) !important;
  font-weight: var(--zz-weight-semibold) !important;
  color: var(--zz-color-heading) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.zz-form-card .wpforms-required-label {
  font-size: var(--zz-text-body-2) !important;
  line-height: var(--zz-leading-body-2) !important;
  font-weight: var(--zz-weight-regular) !important;
  color: var(--zz-red-light) !important;
  margin: 0 !important;
}

/* Inputs */

.zz-form-card input[type="text"],
.zz-form-card input[type="email"],
.zz-form-card input[type="password"],
.zz-form-card input[type="tel"],
.zz-form-card input[type="url"],
.zz-form-card input[type="number"] {
  width: 100% !important;
  max-width: none !important;
  padding: var(--zz-space-12) !important;
  border: 1.5px solid var(--zz-color-border) !important;
  border-radius: var(--zz-radius-2) !important;
  background: var(--zz-color-surface) !important;
  font-family: var(--zz-font-body) !important;
  font-size: var(--zz-text-body-1) !important;
  line-height: var(--zz-leading-body-1) !important;
  color: var(--zz-color-heading) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.zz-form-card input::placeholder {
  color: var(--zz-neutral-400) !important;
  opacity: 1 !important;
}

.zz-form-card input:focus {
  border-color: var(--zz-primary-700) !important;
  box-shadow: 0 0 0 var(--zz-stroke-3) var(--zz-primary-50) !important;
}

/* ── Password rule hints ───────────────────────────────────────────────── */

.zz-pw-rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zz-space-4) var(--zz-space-16);
  margin-top: var(--zz-space-2);
}

.zz-pw-rule {
  display: inline-flex;
  align-items: center;
  gap: var(--zz-space-4);
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-3);
  line-height: var(--zz-leading-body-3);
  color: var(--zz-neutral-400);
  transition: color 0.15s;
}

.zz-pw-rule svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.zz-pw-rule.is-met {
  color: var(--zz-secondary-600);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.zz-form-card .wpforms-submit-container {
  padding: 0 !important;
  margin: 0 !important;
}

.zz-btn,
.zz-form-card button.wpforms-submit,
.zz-form-card input[type="submit"].wpforms-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: var(--zz-space-8) var(--zz-space-16) !important;
  border: 1.5px solid var(--zz-primary-700) !important;
  border-radius: 0 !important;
  background: var(--zz-primary-700) !important;
  color: var(--zz-color-inverse) !important;
  font-family: var(--zz-font-body) !important;
  font-size: var(--zz-text-body-2) !important;
  line-height: var(--zz-leading-body-2) !important;
  font-weight: var(--zz-weight-semibold) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s !important;
}

.zz-btn:hover,
.zz-btn:focus-visible,
.zz-form-card button.wpforms-submit:hover,
.zz-form-card button.wpforms-submit:focus {
  background: var(--zz-primary-500) !important;
  border-color: var(--zz-primary-500) !important;
  color: var(--zz-color-inverse) !important;
}

.zz-btn--outline {
  background: var(--zz-color-surface) !important;
  color: var(--zz-primary-700) !important;
}

.zz-form-card button.wpforms-submit[disabled] {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

/* ── Divider + cross link ──────────────────────────────────────────────── */

.zz-divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--zz-color-border);
}

.zz-crosslink {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--zz-space-8);
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-1);
  line-height: var(--zz-leading-body-1);
  color: var(--zz-color-text);
}

.zz-crosslink a {
  font-size: var(--zz-text-h4);
  line-height: var(--zz-leading-h4);
  font-weight: var(--zz-weight-bold);
  color: var(--zz-primary-700);
  text-decoration: none;
}

.zz-crosslink a:hover,
.zz-crosslink a:focus-visible {
  color: var(--zz-primary-500);
  text-decoration: underline;
}

/* ── Errors + notices ──────────────────────────────────────────────────── */

.zz-form-card .wpforms-field label.wpforms-error,
.zz-form-card .wpforms-field em.wpforms-error {
  margin: var(--zz-space-2) 0 0 !important;
  font-family: var(--zz-font-body) !important;
  font-size: var(--zz-text-body-3) !important;
  line-height: var(--zz-leading-body-3) !important;
  font-style: normal !important;
  color: var(--zz-red-primary) !important;
}

.zz-form-card input.wpforms-error {
  border-color: var(--zz-red-primary) !important;
}

.zz-form-card .wpforms-error-container {
  grid-column: 1 / -1;
  padding: var(--zz-space-12) var(--zz-space-16) !important;
  border: var(--zz-stroke-1) solid var(--zz-red-primary) !important;
  background: var(--zz-color-surface-soft) !important;
  color: var(--zz-red-primary) !important;
  font-family: var(--zz-font-body) !important;
  font-size: var(--zz-text-body-2) !important;
  line-height: var(--zz-leading-body-2) !important;
}

.zz-form-card .wpforms-error-container ul,
.zz-form-card .wpforms-error-container li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Success panel (Figma 2276:4016) ───────────────────────────────────── */

.zz-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zz-space-24);
  padding: var(--zz-space-24);
  background: var(--zz-color-surface);
  border: var(--zz-stroke-1) solid var(--zz-color-border);
}

.zz-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zz-space-16);
  border-radius: var(--zz-radius-full);
  background: var(--zz-secondary-300);
  color: var(--zz-color-inverse);
}

.zz-success__text {
  display: flex;
  flex-direction: column;
  gap: var(--zz-space-4);
  width: 100%;
  text-align: center;
}

.zz-success__title {
  margin: 0;
  font-family: var(--zz-font-heading);
  font-size: var(--zz-text-h2);
  line-height: var(--zz-leading-h2);
  font-weight: var(--zz-weight-bold);
  color: var(--zz-primary-700);
}

.zz-success__body {
  margin: 0;
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-1);
  line-height: var(--zz-leading-body-1);
  color: var(--zz-color-text);
}

/* WPForms wraps the confirmation; strip its default chrome. */
.wpforms-confirmation-container-full:has(.zz-success),
.wpforms-confirmation-container:has(.zz-success) {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Status notice (account under review) ──────────────────────────────── */

.zz-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zz-space-16);
  max-width: 640px;
  padding: var(--zz-space-32);
  background: var(--zz-color-surface);
  border: var(--zz-stroke-1) solid var(--zz-color-border);
}

.zz-notice__title {
  margin: 0;
  font-family: var(--zz-font-heading);
  font-size: var(--zz-text-h2);
  line-height: var(--zz-leading-h2);
  font-weight: var(--zz-weight-bold);
  color: var(--zz-primary-700);
}

.zz-notice__body {
  margin: 0;
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-1);
  line-height: var(--zz-leading-body-1);
  color: var(--zz-color-text);
}

.zz-notice__note {
  margin: 0;
  font-family: var(--zz-font-body);
  font-size: var(--zz-text-body-2);
  line-height: var(--zz-leading-body-2);
  color: var(--zz-color-muted);
}

.zz-notice__note a {
  color: var(--zz-primary-700);
  font-weight: var(--zz-weight-semibold);
  text-decoration: none;
}

.zz-notice__note a:hover,
.zz-notice__note a:focus-visible {
  color: var(--zz-primary-500);
  text-decoration: underline;
}

/* The shared .zz-btn is full-width for form cards; here it hugs its label. */
.zz-notice .zz-btn {
  width: auto !important;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .zz-auth {
    grid-template-columns: 1fr;
    gap: var(--zz-space-40);
  }

  .zz-auth__title {
    font-size: var(--zz-text-h1);
    line-height: var(--zz-leading-h1);
  }
}

@media (max-width: 680px) {
  .zz-form-card,
  .zz-notice {
    padding: var(--zz-space-20);
  }

  .zz-form-card .wpforms-field-container {
    grid-template-columns: 1fr;
  }

  .zz-crosslink a {
    font-size: var(--zz-text-body-1);
    line-height: var(--zz-leading-body-1);
  }
}