/* =============================================================================
   Bestellformular – nur was dieses Formular braucht
   =============================================================================

   Ergänzt order-ui.css. Hier stehen ausschließlich Selektoren, die es ohne
   den Bestellprozess nicht gäbe: Warenkorbzeilen, Summenblock,
   Rechnungssplits, die Zusammenfassungskarte.

   Die Trennung ist keine Kosmetik: sie ist der Test, ob order-ui.css
   wirklich eine Bibliothek ist. Wer ein zweites öffentliches Formular baut,
   lädt order-ui.css und lässt diese Datei weg.

   Nur Tokens aus order-ui.css verwenden, keine Rohwerte.
   ============================================================================= */

.card-summary {
    background: var(--color-bg-subtle);
}

/* --- Warenkorb ----------------------------------------------------------- */

.cart-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-default);
}

.cart-row:last-of-type {
    border-bottom: 0;
}

/*
    Der Name nimmt den freien Platz, Preis und Aktion sitzen rechts in einer
    Spalte – so stehen die Knöpfe aller Zeilen untereinander und nicht jeweils
    dort, wo der Eventname endet.

    `min-width: 0` ist dabei nicht optional: ein Flex-Element schrumpft ohne
    diese Angabe nicht unter seine Inhaltsbreite, ein langer Eventname würde
    Preis und Knopf also aus der Karte schieben.
*/
.cart-row-main {
    flex: 1;
    min-width: 0;
}

.cart-row-title {
    font-weight: 600;
}

/*
    Preisblock und Aktion als Raster mit FESTEN Spalten, nicht als Flexbox.

    Der Unterschied ist sichtbar: bei einer Flexbox richtet sich die Breite
    nach dem Inhalt, und eine Zeile mit Staffelpreis trägt zwei Beträge statt
    einem. Die Papierkörbe stünden dann in zwei verschiedenen Spalten – genau
    das war vorher der Fall. Mit festen Spalten sitzen sie in einer Linie,
    egal ob eine Staffel greift.

    Die erste Spalte nimmt den durchgestrichenen Listenpreis auf und bleibt
    leer, wenn es keinen gibt.
*/
.cart-row-side {
    display: grid;
    grid-template-columns: 6.5rem 6.5rem 2.25rem;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/*
    Feste Spaltenzuweisung statt Reihenfolge im Markup: der zu zahlende Preis
    sitzt IMMER in Spalte 2. Ohne diese Angabe würde er in Spalte 1 rutschen,
    sobald keine Staffel greift und der durchgestrichene Listenpreis fehlt –
    die Beträge stünden dann von Zeile zu Zeile versetzt.
*/
.cart-row-price {
    grid-column: 2;
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 700px) {
    .cart-row-side {
        grid-template-columns: auto auto 2.25rem;
    }
}

/*
    Der Listenpreis, wenn eine Mengenstaffel greift. Durchgestrichen, damit der
    Kunde den Vorteil erkennt – ohne die Linie stehen zwei Preise nebeneinander
    und die Zeile ist unverständlich.
*/
.cart-row-price-was {
    grid-column: 1;
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
    text-align: right;
}

.cart-item {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-default);
}

.cart-item:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
}

.cart-item .cart-row {
    border-bottom: 0;
}

.cart-item .field {
    margin-bottom: 0;
}

/*
 * Rückfrage zu einem Event im Warenkorb, etwa der Prioritätsmarkt bei Beyond
 * Borders. Die Trennlinie und der Abstand setzen sie von der Positionsliste
 * ab — ohne beides klebt das Auswahlfeld an der letzten Zeile und liest sich
 * wie ein Teil davon.
 */
.cart-followup {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-default);
}

.cart-followup .field {
    margin-bottom: 0;
}

/*
 * `.card-lead` zieht sich mit einem negativen Rand an die Positionsliste
 * heran. Steht die Rückfrage dazwischen, überlappt der Hinweistext sonst mit
 * „Your rate" — gemessen −10 px.
 */
.cart-followup + .card-lead {
    margin-top: var(--space-sm);
}

.badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    margin-left: 0.4rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    background: var(--color-default);
    border-radius: var(--border-radius-tiny);
    vertical-align: middle;
}

.split-block {
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    background: var(--color-bg-subtle);
    border-radius: var(--border-radius-tiny);
}

.split-row {
    display: grid;
    grid-template-columns: 1fr 180px auto;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-xs);
}

@media (max-width: 700px) {
    .repeat-row,
    .split-row {
        grid-template-columns: 1fr;
    }
}

/* --- Summenblock --------------------------------------------------------- */

.sum-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 0.4rem;
}

/*
    Der Betrag steht rechts und bricht NIE um. Ohne diese Regel reißt die
    schmale Spalte „8.300,00 €" auseinander und das Eurozeichen landet in der
    nächsten Zeile – bei einer verbindlichen Bestellung ist ein zerrissener
    Betrag das Letzte, was der Kunde sehen soll. Umbrechen darf stattdessen
    der Eventname links, der dafür Platz hat.
*/
.sum-row > :last-child {
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}

.sum-row-discount {
    color: var(--color-discount);
}

.sum-row-total {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    font-size: 1.125rem;
}

/* --- Summenblock: Positionen und Trennlinie ------------------------------ */

.sum-row-item {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}

.sum-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-sm) 0;
}


/*
    Der Absende-Knopf, abgesetzt vom Rabattcode-Feld darüber.

    Ohne den Abstand schließt er unmittelbar an die Eingabegruppe an und sieht
    aus, als gehöre er zum Einlösen des Codes. Er löst aber eine verbindliche
    Registrierung aus – das ist die folgenreichste Handlung der ganzen Seite
    und braucht eine eigene Zone.

    Nur das DIREKTE Kind, nicht jeder Knopf in der Karte. Ohne den
    Kindselektor trifft die Regel auch den „Apply"-Knopf in der
    Rabattcode-Gruppe: `width: 100%` sprengt ihn auf und `margin-top` schiebt
    ihn aus der Zeile, sodass er nicht mehr neben dem Eingabefeld sitzt.

    Die frühere Regel für `.card-summary .checkbox` ist entfallen: die
    Zustimmung steht seit dem 08.09.2026 in Abschnitt 8 des Formulars und nicht
    mehr in diesem Block.
*/
.card-summary > .btn-primary {
    width: 100%;
    margin-top: var(--space-md);
}

/*
    Positionsname im Summenblock: eine Zeile, gekürzt wird NUR die Serie.

    Der Ort steht hinter dem „|" und ist bei Loop Hours der einzige
    unterscheidende Teil — er bekommt deshalb `flex-shrink: 0` und weicht dem
    Kürzen aus. Ohne das wären vier Städte zu je 2.550 € identisch
    beschriftet.

    `min-width: 0` auf dem Behälter ist Voraussetzung dafür, dass
    `text-overflow` überhaupt greift: ein Flex-Element schrumpft sonst nicht
    unter seine Inhaltsbreite und es gibt nichts zu kürzen.
*/
.sum-row-label {
    display: flex;
    min-width: 0;
    gap: 0.25rem;
}

/*
    `min-width: 0` muss auf JEDER Ebene stehen, nicht nur auf dem Behälter.

    Dieses Element ist selbst Flex-Item von `.sum-row-label` und behält ohne
    die Angabe seine Inhaltsbreite als Mindestbreite – `text-overflow` findet
    dann nichts zu kürzen und der Name schiebt die Seite auf. Mit einem
    überlangen Produktnamen gemessen: 9 px waagerechter Überlauf statt
    Kürzung.
*/
.sum-row-series {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    Der Teil hinter dem Trennstrich — bei Loop Hours die Stadt.

    `flex-shrink: 1` statt `0`, obwohl die Stadt eigentlich nie gekürzt werden
    soll: Ortsnamen sind kurz und passen immer, dort ändert sich nichts. Die
    Angabe ist ein Netz für den Fall, dass hinter dem Strich einmal etwas
    Langes steht.

    Am 14.09.2026 genau das passiert: Ein Produkt hiess „Shared Table | Loop
    Leisure DACH & EUR Spring 2027". Mit `flex-shrink: 0` und `nowrap` konnte
    der zweite Teil weder schrumpfen noch umbrechen — er lief über den Preis
    und aus der Karte heraus. Der Name ist inzwischen korrigiert, die Zeile
    darf daran trotzdem nicht zerbrechen.
*/
.sum-row-city {
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    Bei Loop Hours steht hinter der Serie ein Ort. Ohne feste Breite nimmt die
    Serie jeweils den Rest — und der faellt je nach Ortslaenge anders aus. Die
    Trennstriche standen dadurch an fuenf verschiedenen Stellen untereinander
    (gemessen: 1099, 1101, 1114, 1119, 1137 px).

    Mit fester Breite kuerzt die Serie immer gleich weit, und die Orte stehen in
    einer Linie. Die Klasse setzt die Vorlage nur, wenn ein Ort folgt — bei den
    grossen Loops nutzt der Name weiterhin die volle Zeile.
*/
.sum-row-label-with-city .sum-row-series {
    flex: 0 0 8.5rem;
    max-width: 8.5rem;
}

@media (max-width: 1100px) {
    .sum-row-label-with-city .sum-row-series {
        flex-basis: 6.5rem;
        max-width: 6.5rem;
    }
}

/*
    Kontrollblock der Rechnungsaufteilung.

    Bewusst als abgesetzter Block mit Rahmen und nicht als weitere Zeile im
    Fließtext: er ist die einzige Stelle, an der der Kunde erkennt, ob seine
    Aufteilung aufgeht. Vorher stand hier nur „0,00 € of 21.900,00 €" in der
    normalen Zeilenoptik — die Zahl, auf die es ankommt, war nicht als solche
    erkennbar.

    Die Statusfarbe steckt im Rahmen und im Ergebnisbetrag, nicht in einer
    Hintergrundfläche: der Block liegt in `.split-block`, der selbst schon
    getönt ist, und zwei gestapelte Flächen ergeben Grau auf Grau.
*/
.split-total {
    padding: var(--space-sm);
    margin-top: var(--space-sm);
    background: var(--color-white);
    border-left: 3px solid var(--color-border);
    border-radius: var(--border-radius-tiny);
}

.split-total-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.split-total-sum {
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/*
    Die Ergebniszeile trägt die Aussage und ist deshalb die einzige, die
    hervorgehoben wird. `tabular-nums` oben sorgt dafür, dass die drei Beträge
    stellengenau untereinander stehen – bei proportionalen Ziffern wandern die
    Kommas und der Vergleich wird mühsam.
*/
.split-total-result {
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-border);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-main);
}

/*
    Abstand zum „+ Add invoice address"-Knopf darunter. Ohne ihn beginnt der
    Knopf direkt an der farbigen Kante des Kontrollblocks und wirkt, als
    gehöre er hinein.
*/
.split-total + .btn-secondary {
    margin-top: var(--space-md);
}

.split-total-open {
    border-left-color: var(--color-warning);
}

.split-total-open .split-total-result {
    color: var(--color-warning);
}

.split-total-ok {
    border-left-color: var(--color-discount);
}

.split-total-ok .split-total-result {
    color: var(--color-discount);
}

/*
    Der Papierkorb liegt hier auf getöntem Grund. Sein Standard-Hover ist
    ebenfalls getönt – auf `.split-block` wäre er damit unsichtbar. Weiß
    hebt sich vom Untergrund ab, die Rückmeldung bleibt also erhalten.
*/
.split-block .btn-icon:hover,
.split-block .btn-icon:focus-visible {
    background: var(--color-white);
}


/* --- Bestätigung nach dem Absenden --------------------------------------- */

/*
    Schmale, zentrierte Spalte. Nach dem Absenden gibt es nur noch drei
    Aussagen – Bestellung ist da, hier ist die Nummer, das passiert als
    Nächstes. Für so wenig Inhalt ist die Mitte der richtige Ort; linksbündig
    wäre sie nur nötig, wenn eine Betragsliste zu vergleichen wäre.

    Bewusst ohne Karte und ohne Symbol: es gibt keinen Inhalt, der eingerahmt
    werden müsste, und ein grüner Kreis ist die Optik einer erledigten
    Aufgabe, nicht die eines Geschäftsvorgangs.
*/
.receipt {
    max-width: 560px;
    margin: var(--space-lg) auto 4rem;
    text-align: center;
}

.receipt-title {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-xs);
}

.receipt-lead {
    margin: 0 0 var(--space-lg);
    color: var(--color-text-muted);
}

/*
    Die Bestellnummer ist das Einzige, was der Aussteller abschreibt oder am
    Telefon nennt – sie trägt deshalb die Markenfarbe und die größte Schrift
    nach dem Titel.
*/
.receipt-number {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    background: var(--color-bg-subtle);
    border-radius: var(--border-radius-small);
}

.receipt-number-label {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.receipt-number-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.receipt-block {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.receipt-block-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    margin: 0 0 var(--space-sm);
}

.receipt-text {
    margin: 0 0 var(--space-sm);
    color: var(--color-text-muted);
}

/*
    Die Adresse in eigener Zeile und umbruchfest. Im Fließtext brach sie mitten
    im Namen um („clara@test-" / „danke.local") und sah wie ein Fehler aus.
    `overflow-wrap` greift erst, wenn sie allein breiter als die Spalte ist –
    dann ist ein Umbruch besser als ein Überlauf.
*/
.receipt-email {
    margin: 0 0 var(--space-md);
    font-weight: 600;
    color: var(--color-text-main);
    overflow-wrap: anywhere;
}

/*
 * Abweichende Rechnungsanschrift.
 *
 * Das Ankreuzfeld bekommt Abstand nach oben, damit es sich von den Feldern der
 * Registrierungsanschrift löst. Der Block darunter wird eingerückt und
 * abgesetzt — er gehört sichtbar zum Häkchen, nicht zum Abschnitt darüber.
 */
.billing-switch {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-default);
}

.billing-block {
    margin-top: var(--space-sm);
    padding: var(--space-sm) 0 0 var(--space-md);
    border-left: 2px solid var(--color-primary);
}

.billing-block .field:last-child {
    margin-bottom: 0;
}

/*
 * Hinweis auf die Ersparnis durch eine weitere Messe (Andis Wunsch 3).
 *
 * In der Rabattfarbe, nicht in der Markenfarbe: Es ist dieselbe Aussage wie die
 * Rabattzeilen im Summenblock — „hier wird es günstiger". Ein Kasten statt
 * Fließtext, damit er zwischen Positionsliste und Preisstufe nicht untergeht.
 */
.upsell {
    margin: var(--space-md) 0 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-subtle);
    border-left: 3px solid var(--color-discount);
    border-radius: var(--border-radius-tiny);
    color: var(--color-discount);
    font-size: 0.9375rem;
}

.upsell + .card-lead {
    margin-top: var(--space-sm);
}

/*
 * Geteilter Tisch: Partnerfeld, Eignungsbestätigung, Hinweis zur Warteliste.
 *
 * Die Bestätigung sieht aus wie die AGB-Zustimmung weiter unten — sie ist vom
 * selben Rang: eine Zusicherung, auf die Loop sich später beruft.
 */
.shared-table-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    font-size: 0.9375rem;
    line-height: 1.5;
    cursor: pointer;
}

.shared-table-check input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.shared-table-note {
    margin: var(--space-sm) 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}