/* ===========================================================================
   Eingaben: Textfelder, Einladungscode, Freiplatz-Banner.
   Gehört zu public/styles.css.
   =========================================================================== */

/* --- Felder -------------------------------------------------------------- */

.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/*
 * Die Breitenregel gehört an die ZEILE, nicht an das Feld. `flex-basis` misst
 * die Hauptachse des Elternteils: in `.fields` (Zeile) ist das die Breite, in
 * einem Spalten-Container die HÖHE. Stand die Regel am Feld selbst, wurden die
 * Felder im Begleitpersonen-Kasten (`.companions__row`, Spalte) 190 px hoch und
 * hinterließen je ~150 px Leerraum — ohne Fehler, ohne Warnung, nur ein
 * auseinandergezogener Kasten (Befund 02.09.2026).
 */
.fields > .field {
  flex: 1 1 190px;
}

.fields > .field--wide {
  flex-basis: 100%;
}

/* Das Häkchen liegt IM Feld (Figma 42:5039) — deshalb ein eigener Kasten um
   Eingabe und Bild, der die Position aufspannt. */
.field__control {
  position: relative;
  display: block;
}

.field__check {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

/*
 * `:valid`, nicht `:user-valid`: Der Entwurf zeigt die aus der Einladung
 * vorbelegten Felder bereits abgehakt, und `:user-valid` griffe erst nach der
 * ersten Eingabe. Alle Felder hier sind Pflichtfelder — leer sind sie damit
 * ungültig und das Häkchen bleibt weg.
 */
.input:valid ~ .field__check {
  opacity: 1;
}

/* Sonst liefe eine lange Adresse unter dem Häkchen hindurch. */
.field__control .input {
  padding-right: 2.5rem;
}

.field__label {
  color: var(--grau-text);
  font-size: 0.625rem;
  font-weight: 500;
}

.field__hint {
  margin: 0;
  color: var(--grau-text);
  font-size: 0.625rem;
}

.input {
  width: 100%;
  padding: 0.5rem 0.9375rem;
  border: 1px solid var(--grau-rahmen);
  border-radius: var(--radius-feld);
  background: var(--weiss);
  color: var(--gruen-text);
  font: inherit;
  font-size: 0.9375rem;
}

/* Ein Freitextfeld darf wachsen, aber nicht seitwärts aus der Karte laufen. */
textarea.input {
  min-height: 5rem;
  resize: vertical;
}

.input::placeholder {
  color: var(--grau-platzhalter);
}

.input:user-valid {
  border-color: var(--gruen-akzent);
}

.input:user-invalid {
  border-color: var(--pink);
}

/* --- Namen der Begleitpersonen (Figma VETO_Gala_V3, 0:1312) --------------- */

/* Derselbe Kasten wie beim Allergien-Block, nur mit dem hellgrünen Grund aus
   dem Entwurf statt Weiß: Er steht in Abschnitt 2 zwischen weißen Feldern und
   soll sich als zusammenhängender Block davon absetzen. */
.companions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.9375rem;
  padding: 1.25rem;
  border-radius: var(--radius-feld);
  background: var(--gruen-hell);
}

.companions__head {
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  justify-content: space-between;
}

.companions__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gruen-text);
}

/* „3 Personen" — die Zahl darin pflegt public/app.js über den Zahlenslot. */
.companions__count {
  margin: 0;
  color: var(--gruen-akzent);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.companions__hint {
  margin: 0;
  color: var(--grau-text);
  font-size: 0.75rem;
  line-height: 1.45;
}

.companions__rows {
  display: flex;
  flex-direction: column;
}

/* Die Trennlinie steht ÜBER jeder Zeile, nicht unter der letzten: so trennt
   sie auch die erste Zeile vom Hinweistext darüber, und unter der letzten
   bleibt der Fortschritt ohne doppelte Linie. */
.companions__row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.625rem;
  margin-top: 0.625rem;
  border-top: 1px solid var(--grau-rahmen);
}

.companions__row-label {
  margin: 0;
  color: var(--gruen-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.companions__progress {
  margin: 0;
  padding-top: 0.625rem;
  border-top: 1px solid var(--grau-rahmen);
  color: var(--gruen-akzent);
  font-size: 0.6875rem;
  font-weight: 700;
}

/* --- Einladungscode ------------------------------------------------------ */

/*
 * Hält Titel, Feld und Rückmeldung zusammen, solange der Code noch nicht
 * eingelöst ist. Nötig, weil `.step` (booking.css) seinen Abstand über
 * `display: flex; gap` an den DIREKTEN Kindern von `.step--coupon` setzt —
 * ohne diese Regel wären Titel, Feld und Rückmeldung nur noch ein
 * Block-Container ohne Abstand zueinander, seit P7 sie in einen eigenen
 * `<div>` gefasst hat (damit sich genau dieser Teil gegen den Streifen
 * austauschen lässt, ohne den Streifen selbst als vierten Flex-Bruder
 * mitzuzählen).
 */
[data-coupon-pending] {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.coupon__input {
  flex: 1 1 190px;
}

.coupon__feedback {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
}

.coupon__feedback[data-ok='true'] {
  color: var(--gruen-akzent);
}

.coupon__feedback[data-ok='false'] {
  /* Schrift auf hellem Grund — deshalb die dunklere Fassung (§10 Nr. 22). */
  color: var(--pink-schrift);
}

/* --- Freiplatz-Banner ---------------------------------------------------- */

.invite {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0.5rem 0.9375rem;
  border-radius: var(--radius-feld);
  background: var(--gruen-akzent);
  color: var(--weiss);
}

.invite__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.invite__line {
  font-size: 0.9375rem;
  font-weight: 500;
}

.invite__lead {
  display: block;
}

.invite__code {
  font-weight: 700;
}

.invite__note {
  font-size: 0.625rem;
}

.invite__check {
  flex: none;
}