/* ===========================================================================
   Allergien/Unverträglichkeiten und Rechnungsanschrift (P5, Figma 1:236).
   Gehört zu public/styles.css — dieselben custom properties.

   Siehe src/views/components/allergien.ts, rechnungsanschrift.ts,
   public/zusatzangaben.js.
   =========================================================================== */

/* --- Checkbox-Zeile, geteilt von beiden Bausteinen ------------------------ */

.checkbox {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
  color: var(--gruen-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

/* Eigener runder Marker, Maße und Rand aus dem Entwurf (Figma 0:291): 20 px
   mit 1 px in der Textfarbe. Das grau berandete 24-px-Feld davor stammte vom
   Häkchen-Symbol, das den gesetzten Zustand füllt — das Symbol ist ein SVG und
   skaliert mit, die Größe des Markers muss sich ihm also nicht beugen. Das
   Grau war dabei die stillere Abweichung: Es sah nach einem inaktiven Feld
   aus, wo der Entwurf ein wartendes zeigt. */
.checkbox input[type='checkbox'] {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--gruen-text);
  border-radius: 50%;
  background: var(--weiss);
  cursor: pointer;
}

.checkbox input[type='checkbox']:checked {
  border-color: transparent;
  background-image: url('/media/icon-check-green.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.checkbox input[type='checkbox']:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

/* Die Zeile mit der Allergien-Checkbox steht im Entwurf (Figma 0:286) auf
   einer eigenen WEISSEN Fläche — Radius und Innenabstand eines Eingabefelds.
   Sie ist kein Schmuck: Ohne sie steht die Frage direkt auf dem grünen Kasten
   und liest sich als weiterer Erklärsatz statt als Bedienelement.

   Als Modifikator und nicht auf `.checkbox` selbst, weil die
   Rechnungsanschrift-Zeile im Entwurf umgekehrt gebaut ist: dort liegt die
   GRÜNE Fläche unter der Zeile (0:318), eine weiße Fläche wäre dort falsch. */
.checkbox--field {
  align-items: center;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-feld);
  background: var(--weiss);
}

/* --- Allergien/Unverträglichkeiten ----------------------------------------- */

.allergy {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.625rem;
  padding: 1.25rem;
  border: 0;
  border-radius: var(--radius-feld);
  background: var(--gruen-hell);
}

/* Überschrift und Einleitung des Kastens (Figma 1:236). Sie stehen VOR der
   Checkbox: der Absatz weist die Angabe als freiwillig aus, und wer erst nach
   dem Häkchen liest, hat sie schon gesetzt. */
.allergy__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gruen-text);
}

.allergy__intro {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--grau-text);
}

/* `<fieldset>` bringt eigene UA-Ränder mit — die Kastenwirkung übernimmt
   bereits .allergy, das Fieldset selbst soll unsichtbar bleiben. */
.allergy__details {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.allergy__textarea {
  min-height: 4.5rem;
}

.allergy__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

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

.allergy__counter {
  margin: 0;
  color: var(--grau-text);
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
}

.allergy__legal {
  margin: 0;
  color: var(--grau-text);
  font-size: 0.625rem;
  line-height: 1.4;
}

/* --- Rechnungsanschrift ----------------------------------------------------- */

/* Checkbox-Zeile UND Hinweis liegen im Entwurf (Figma 0:318) zusammen auf
   grüner Fläche — nicht nur der aufklappende Feldblock darunter. Ohne sie
   stand die Frage auf dem weißen Formulargrund und gehörte optisch zu den
   Eingabefeldern darüber statt zu ihren eigenen Feldern darunter. */
.billing {
  margin-top: 0.625rem;
  padding: 0.625rem 0.9375rem;
  border-radius: var(--radius-block);
  background: var(--gruen-hell);
}

/* Sagt, was ohne Häkchen passiert — dieselbe leise Stufe wie die Einleitung
   des Allergien-Kastens, damit die beiden Erklärzeilen gleich klingen. */
.billing__hint {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--grau-text);
}

/* Die Felder stehen jetzt IM grünen Kasten und brauchen deshalb keine eigene
   Fläche mehr — was sie von der Checkbox trennt, ist die Trennlinie aus dem
   Entwurf. Sie steht als oberer Rand DIESES Elements statt als eigene Linie:
   so ist sie genau dann sichtbar, wenn die Felder es sind, und
   public/zusatzangaben.js muss keinen dritten Zustand pflegen. Dieselbe
   Bauart wie `.companions__row`. */
.billing__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0.625rem 0 0;
  padding: 0.625rem 0 0;
  border: 0;
  border-top: 1px solid var(--grau-rahmen);
  min-width: 0;
}