/*
 * DataSoft Payment — Kasse.
 *
 * Bewusst zurückhaltend und ohne feste Farben für Fläche und Schrift:
 * Das Plugin läuft in fremden Themes, und eine Kasse, die sich vom Rest
 * der Seite absetzt, weckt Zweifel an ihrer Echtheit. Übernommen werden
 * daher die Schrift und die Farben der Umgebung; eigene Werte gibt es
 * nur, wo Struktur nötig ist.
 */

.dspay {
    --dspay-line: color-mix(in srgb, currentColor 18%, transparent);
    --dspay-soft: color-mix(in srgb, currentColor 5%, transparent);
    --dspay-muted: color-mix(in srgb, currentColor 65%, transparent);
    --dspay-radius: 10px;
    container-type: inline-size;
    margin: 0 auto;
    max-width: 640px;
}

/* Ältere Browser kennen color-mix nicht. Dort greifen neutrale
   Graustufen, die auf hellem und dunklem Grund tragfähig sind. */
@supports not (color: color-mix(in srgb, currentColor 10%, transparent)) {
    .dspay {
        --dspay-line: rgba(128, 128, 128, .35);
        --dspay-soft: rgba(128, 128, 128, .08);
        --dspay-muted: rgba(128, 128, 128, .95);
    }
}

.dspay-h2 {
    font-size: 1.35rem;
    margin: 0 0 14px;
}

.dspay-h3 {
    font-size: 1.1rem;
    margin: 22px 0 12px;
}

.dspay-h4 {
    font-size: .95rem;
    margin: 0 0 10px;
}

.dspay-lead {
    margin: 0 0 12px;
}

.dspay-hint,
.dspay-legal,
.dspay-taxnote {
    color: var(--dspay-muted);
    font-size: .86rem;
    line-height: 1.55;
}

/* ------------------------------------------------ Zusammenfassung */

.dspay-summary {
    border: 1px solid var(--dspay-line);
    border-radius: var(--dspay-radius);
    padding: 18px 20px;
}

.dspay-items {
    border-collapse: collapse;
    width: 100%;
}

.dspay-items th,
.dspay-items td {
    padding: 7px 0;
    text-align: left;
}

.dspay-items td {
    text-align: right;
    white-space: nowrap;
}

.dspay-items th {
    font-weight: 400;
}

.dspay-items tfoot th,
.dspay-items tfoot td {
    border-top: 1px solid var(--dspay-line);
}

.dspay-items__net th,
.dspay-items__net td,
.dspay-items__tax th,
.dspay-items__tax td {
    border-top: 0;
    color: var(--dspay-muted);
    font-size: .88rem;
    padding: 2px 0;
}

.dspay-items__net th,
.dspay-items__net td {
    padding-top: 10px;
}

.dspay-items__total th,
.dspay-items__total td {
    font-size: 1.1rem;
    font-weight: 700;
    padding-top: 10px;
}

.dspay-qty {
    color: var(--dspay-muted);
}

/* -------------------------------------------------- Zahlungsarten */

.dspay-methods {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.dspay-method {
    margin: 0;
}

.dspay-method__label {
    align-items: flex-start;
    border: 1px solid var(--dspay-line);
    border-radius: var(--dspay-radius);
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    transition: border-color .15s, background-color .15s;
}

.dspay-method__label:hover {
    background: var(--dspay-soft);
}

/* Die gewählte Zahlungsart muss ohne Zweifel erkennbar sein, sonst
   klickt der Kunde auf „zahlen“ und weiß nicht, womit. */
.dspay-method__label:has(input:checked) {
    background: var(--dspay-soft);
    border-color: currentColor;
}

.dspay-method__label:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dspay-method input[type="radio"] {
    flex: none;
    margin: 3px 0 0;
}

.dspay-method__body {
    display: block;
}

.dspay-method__head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dspay-method__title {
    font-weight: 600;
}

.dspay-method__hint {
    color: var(--dspay-muted);
    display: block;
    font-size: .88rem;
    line-height: 1.5;
    margin-top: 3px;
}

.dspay-method__brands {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.dspay-brand {
    border: 1px solid var(--dspay-line);
    border-radius: 4px;
    color: var(--dspay-muted);
    font-size: .74rem;
    letter-spacing: .02em;
    padding: 2px 7px;
    white-space: nowrap;
}

.dspay-badge {
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 8px;
    text-transform: uppercase;
}

.dspay-badge--test {
    background: #fcf0d4;
    color: #7a5c00;
}

/* ------------------------------------------------------ Aktionen */

/* Fläche und Schrift der Schaltfläche stehen bewusst fest.
   currentColor wäre hier falsch: Es löst sich gegen die Schriftfarbe
   des Elements selbst auf, und sobald diese für den Text überschrieben
   wird, ergibt das Fläche und Schrift in derselben Farbe — die
   Schaltfläche verschwindet. Die Werte lassen sich über die beiden
   Eigenschaften von außen setzen, etwa auf die Akzentfarbe des Themes. */
.dspay {
    --dspay-btn-bg: #1c6b45;
    --dspay-btn-fg: #fff;
}

.dspay-button {
    background: var(--dspay-btn-bg);
    border: 0;
    border-radius: 8px;
    color: var(--dspay-btn-fg);
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 13px 26px;
    text-decoration: none;
}

.dspay-button:hover,
.dspay-button:focus {
    background: color-mix(in srgb, var(--dspay-btn-bg) 85%, #000);
    color: var(--dspay-btn-fg);
    text-decoration: none;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .dspay-button:hover,
    .dspay-button:focus {
        opacity: .9;
    }
}

.dspay-button:focus-visible {
    outline: 2px solid var(--dspay-btn-bg);
    outline-offset: 3px;
}

.dspay-actions {
    margin: 20px 0 0;
}

.dspay-legal {
    margin: 12px 0 0;
}

/* -------------------------------------------------------- Zustände */

.dspay-state {
    border: 1px solid var(--dspay-line);
    border-left-width: 4px;
    border-radius: var(--dspay-radius);
    margin: 0 0 18px;
    padding: 16px 20px;
}

.dspay-state > :first-child {
    margin-top: 0;
}

.dspay-state > :last-child {
    margin-bottom: 0;
}

.dspay-state--ok {
    border-left-color: #2f7a35;
}

.dspay-state--wait {
    border-left-color: #b8860b;
}

.dspay-state--stop {
    border-left-color: #a33;
}

.dspay-error {
    border: 1px solid #a33;
    border-left-width: 4px;
    border-radius: var(--dspay-radius);
    margin: 16px 0;
    padding: 12px 16px;
}

.dspay-empty {
    color: var(--dspay-muted);
}

/* --------------------------------------------------- Bankverbindung */

.dspay-instructions {
    border: 1px solid var(--dspay-line);
    border-radius: var(--dspay-radius);
    margin: 16px 0 0;
    padding: 18px 20px;
}

.dspay-bank {
    border-collapse: collapse;
    margin: 0 0 14px;
    width: 100%;
}

.dspay-bank th,
.dspay-bank td {
    border-top: 1px solid var(--dspay-line);
    padding: 8px 0;
    text-align: left;
    vertical-align: top;
}

.dspay-bank tr:first-child th,
.dspay-bank tr:first-child td {
    border-top: 0;
}

.dspay-bank th {
    color: var(--dspay-muted);
    font-size: .86rem;
    font-weight: 400;
    padding-right: 16px;
    white-space: nowrap;
    width: 38%;
}

/* IBAN und Verwendungszweck werden abgetippt oder kopiert. Eine
   Schrift mit gleichen Zeichenbreiten verhindert Zahlendreher. */
.dspay-bank__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    word-break: break-all;
}

/* ------------------------------------------------------- Schmal */

@container (max-width: 460px) {
    .dspay-summary,
    .dspay-instructions {
        padding: 14px 16px;
    }

    .dspay-bank th,
    .dspay-bank td {
        display: block;
        width: auto;
    }

    .dspay-bank td {
        border-top: 0;
        padding-top: 0;
    }

    .dspay-button {
        display: block;
        text-align: center;
        width: 100%;
    }
}