/* ============================================================
   23 — zapis na listę oczekujących
   ============================================================ */

.ai-lista__lead {
  max-width: var(--ai-miara);
  font-size: var(--ai-size-lead);
}

.ai-lista__lead p { margin: 0 0 var(--ai-s3); }

/* Formularz po lewej, powody zapisu po prawej. Sam formularz bez powodów
   to prośba o adres bez uzasadnienia — a to jest cała treść tej sekcji. */
.ai-lista__kolumny {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ai-s5) var(--ai-s7);
  margin-top: var(--ai-s6);
  align-items: start;
}

.ai-lista__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ai-s2);
}

.ai-lista__pole {
  flex: 1 1 14rem;
  min-height: 48px;
  padding: var(--ai-s2) var(--ai-s3);
  background: var(--ai-card);
  color: var(--ai-heading);
  border: 1px solid var(--ai-line-ui);
  border-radius: var(--ai-r-sm);
  font: inherit;
  font-size: var(--ai-size-body);
}

.ai-lista__form .ai-btn { flex: none; min-height: 48px; }

.ai-lista__nota {
  margin: var(--ai-s3) 0 0;
  max-width: var(--ai-miara);
  font-size: var(--ai-size-label);
  color: var(--ai-text-mute);
}

.ai-lista__ok {
  margin: 0;
  padding: var(--ai-s3) var(--ai-s4);
  background: var(--ai-tint);
  border-left: 3px solid var(--ai-rose);
  border-radius: 0 var(--ai-r-md) var(--ai-r-md) 0;
  font-size: var(--ai-size-lead);
  color: var(--ai-heading);
}

.ai-lista__korzysci h3 {
  margin: 0 0 var(--ai-s2);
  font-size: var(--ai-size-h3);
}

.ai-lista__korzysci ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Znacznik rysowany pseudoelementem, nie znakiem listy — ma być w akcencie
   i równo odsunięty także wtedy, gdy pozycja łamie się na dwie linie. */
.ai-lista__korzysci li {
  position: relative;
  margin: 0 0 var(--ai-s2);
  padding-left: var(--ai-s4);
  font-size: var(--ai-size-small);
  line-height: 1.5;
}

.ai-lista__korzysci li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ai-rose);
}

@media (max-width: 860px) {
  .ai-lista__kolumny { grid-template-columns: 1fr; gap: var(--ai-s5); }
}

@media (max-width: 560px) {
  .ai-lista__form .ai-btn { width: 100%; }
}