/* ============================================================
   Wasp · affiliate program page (affiliates.html)
   The application form only; the page itself is the legal.css
   document layout. Inherits main.css tokens. No color beyond the
   palette: the accent marks focus and the consent link, nothing else.
   ============================================================ */

.aff-apply { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

.aff-form {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.25rem;
}

.aff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.aff-field {
  display: grid;
  gap: .45rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.aff-label {
  color: var(--white);
  font-weight: 600;
  font-size: .95rem;
  padding: 0;
}
.aff-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
  margin-left: .35rem;
}

.aff-hint {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}

.aff-form input[type="text"],
.aff-form input[type="email"],
.aff-form select,
.aff-form textarea {
  width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--outline);
  border-radius: .75rem;
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  padding: .8rem 1rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.aff-form textarea { resize: vertical; min-height: 5.5rem; }
.aff-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - .95rem) 55%;
  background-size: .3rem .3rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.aff-form select option { color: var(--onyx); }
.aff-form input::placeholder,
.aff-form textarea::placeholder { color: var(--muted); }
.aff-form input:focus,
.aff-form select:focus,
.aff-form textarea:focus { border-color: var(--alabaster); }
.aff-form .is-invalid { border-color: var(--urgent); }

.aff-choices {
  grid-template-columns: repeat(auto-fit, minmax(9rem, max-content));
  column-gap: .6rem;
}
.aff-choices legend { margin-bottom: .45rem; }
.aff-choices .aff-hint { grid-column: 1 / -1; }
.aff-choices label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1rem;
  border: 1px solid var(--outline);
  border-radius: 999px;
  color: var(--alabaster);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.aff-choices label:has(input:checked) { border-color: var(--alabaster); color: var(--white); }
.aff-choices.is-invalid label { border-color: var(--urgent); }
.aff-choices input,
.aff-consent input { accent-color: var(--slate); margin: 0; }

.aff-consent {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: var(--alabaster);
  line-height: 1.55;
  cursor: pointer;
}
.aff-consent input { margin-top: .3rem; flex: none; width: 1rem; height: 1rem; }
.aff-consent.is-invalid { color: var(--white); }
.aff-consent.is-invalid input { outline: 1px solid var(--urgent); outline-offset: 2px; }

.aff-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: .25rem;
}
.aff-actions button {
  padding: 1rem 1.9rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--onyx);
  font-weight: 650;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.aff-actions button:hover { transform: translateY(-2px); }
.aff-actions button:disabled { opacity: .6; transform: none; cursor: progress; }
.aff-note { margin: 0; color: var(--muted); font-size: .95rem; }
.aff-note.is-error { color: var(--urgent); }

.aff-done {
  margin-top: 1.75rem;
  padding: 1.5rem;
  border: 1px solid var(--outline);
  border-radius: 1.25rem;
  outline: none;
}
.aff-done[hidden] { display: none; }
.aff-done h3 { margin: 0 0 .5rem; color: var(--white); font-size: 1.3rem; font-weight: 650; }

@media (max-width: 640px) {
  .aff-grid { grid-template-columns: minmax(0, 1fr); }
  .aff-choices { grid-template-columns: minmax(0, 1fr); }
  .aff-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .aff-actions button,
  .aff-actions button:hover { transition: none; transform: none; }
}