/*
 * Zahlung: Auswahlkacheln, Kartenfelder, Fehlerzeile.
 *
 * Achtung bei `display`: Jede Regel, die es setzt, schlägt das
 * `hidden`-Attribut aus dem Browser-Stylesheet aus. Der Guard
 * `[hidden] { display: none !important }` in styles.css hält das zusammen —
 * die Kartenfelder und die Fehlerzeile hängen daran.
 */

/* --- Zahlungskacheln ----------------------------------------------------- */

.pay-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.pay-tile {
  flex: 1 1 150px;
  min-width: 150px;
  cursor: pointer;
}
@media (max-width: 380px) {
  .pay-tile {
    flex-basis: 100%;
  }
}

.pay-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pay-tile__body {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  height: 61px;
  padding: 1.125rem;
  border: 3px solid transparent;
  border-radius: var(--radius-feld);
  background: var(--weiss);
  box-shadow: var(--spur);
}

.pay-tile__input:checked + .pay-tile__body {
  border-color: var(--gruen-akzent);
  background: rgb(25 170 129 / 5%);
}

.pay-tile__input:focus-visible + .pay-tile__body {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

.pay-tile__mark {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  min-width: 0;
}

.pay-tile__text {
  font-size: 0.75rem;
  font-weight: 700;
}

.pay-tile__logo {
  height: 20px;
  width: auto;
}

.pay-tile__check {
  flex: none;
}

.pay-tile__input:checked + .pay-tile__body .pay-tile__check {
  content: url('/media/icon-check-green.svg');
}

/*
 * Der weiße Kasten um die vier Kartenfelder (Figma 42:1423). Dieselbe Fläche
 * und derselbe Schatten wie eine Zahlungskachel darüber — er gehört sichtbar
 * zu der Kachel, die ihn aufklappt.
 */
.card-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding: 1.125rem;
  border-radius: var(--radius-feld);
  background: var(--weiss);
  box-shadow: var(--spur);
}

/* Kartensymbol und „Karte" — die Wiederholung der gewählten Kachel (42:1424). */
.card-box__head {
  display: flex;
  flex: 1 1 100%;
  gap: 0.25rem;
  align-items: center;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
}

.card-box__icon {
  flex: none;
}

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

.card-field--wide {
  flex: 1 1 100%;
}

.card-field--half {
  flex: 1 1 8rem;
}

/* Wie `.field__label` in form.css — es ist dieselbe Beschriftung, nur in
   einem anderen Kasten. Der Entwurf setzt sie hier enger (42:1431). */
.card-field__label {
  color: var(--grau-text);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
}

/*
 * Der Behälter, in den Mollie sein iframe hängt. Die Mindesthöhe steht hier,
 * weil ein frisch montiertes iframe kurz keine hat — ohne sie ruckelte das
 * Formular beim Auswählen der Karte. KEIN Schatten: den trägt der Kasten
 * außen herum, die Felder darin sind flach (42:1432).
 */
.card-field__host {
  min-height: 1.125rem;
  padding: 0.5rem 0.9375rem;
  border: 1px solid var(--gruen-akzent);
  border-radius: var(--radius-feld);
  background: var(--weiss);
  /* NICHT weglassen: Der Inhalt ist inline (Mollies iframe, lokal das
     Blindfeld), und ein inline-Kind spannt eine Zeilenbox in der HÖHE DES
     ELTERNTEILS auf — geerbt wären das 24 px aus `body`, und das Feld wäre
     42 statt 36 px hoch. Sichtbar wird das erst im Vergleich mit dem Entwurf
     (42:1432: 34 px), nicht beim Ansehen. */
  line-height: 1.125rem;
}

/*
 * Das Blindfeld der lokalen Attrappe (`card-fields.ts`). Es steht an der
 * Stelle von Mollies iframe und muss deshalb aussehen wie dessen Inhalt:
 * Größe, Farbe und Platzhalterfarbe kommen aus derselben Quelle wie
 * `FELD_STIL` in `public/pay/card.js`. Laufen die beiden auseinander, zeigt
 * die Attrappe etwas, das es deployed nicht gibt — und das wäre schlimmer
 * als gar keine Vorschau.
 */
.card-field__mock {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gruen-text);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.card-field__mock::placeholder {
  color: rgb(13 43 28 / 50%);
}

/*
 * Der Fokusring gehört um den FELDKASTEN, nicht um das Blindfeld darin.
 *
 * Das Blindfeld ist randlos und sitzt 15 px innerhalb des Kastens; die globale
 * Regel `:focus-visible` aus styles.css zeichnete ihre 3 px deshalb quer über
 * den grünen Rand — ein pinker Balken mitten im Feld statt eines Rings darum
 * (Befund 03.09.2026). Bei jedem anderen Feld der Seite trägt das Element mit
 * dem Rand auch den Fokus; hier sind es zwei, und die Regel muss umziehen.
 *
 * `:focus-within` und nicht `:focus-visible`: Der Ring soll an dem Element
 * hängen, das den Fokus UMGIBT, und ein Kasten selbst bekommt nie einen.
 */
.card-field__mock:focus-visible {
  outline: none;
}

.card-field__host:focus-within {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
}

.card-field__error:empty {
  display: none;
}

.card-field__error {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  /* Schrift, nicht Fläche: --pink käme auf 4,00 und reicht dafür nicht
     (Konzept §10 Nr. 22). */
  color: var(--pink-schrift);
}

.pay-error {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-feld);
  background: rgb(241 0 160 / 8%);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--pink-schrift);
}