/* SumUp Pay – Frontend
   Bewusst zurückhaltend und überschreibbar. Alle Werte hängen an den
   Variablen unten – ein Theme kann sie an einer Stelle umsetzen, statt
   Regeln zu überschreiben. */

.spay-form-wrap,
.spay-confirm {
    /* Eine eigene Textfarbe, statt die des Themes zu erben: ein Theme, das
       auf seinem Abschnitt weiße Schrift setzt, machte sonst Auswahltexte
       und Eingaben unlesbar – die Beschriftungen blieben sichtbar, weil sie
       eine eigene Farbe tragen. Wer die Farbe ändern will, setzt hier eine
       andere; das Formular bleibt in jedem Theme lesbar. */
    --spay-text: #1f2328;
    --spay-accent: #00a759;          /* Fokus, Auswahl */
    --spay-action: #1d4ed8;          /* Absenden-Knopf */
    --spay-action-hover: #1e40af;
    --spay-link: #1d4ed8;
    --spay-border: #d1d5db;
    --spay-label: #8c8c8c;
    --spay-hint: #6b7280;
    --spay-error: #dc2626;
    --spay-radius: 6px;
    --spay-gap: 16px;

    width: 100%;
    color: var(--spay-text);
}

.spay-form-wrap *,
.spay-confirm * { box-sizing: border-box; }

/* Sprungziel nach einem Redirect – per Fragment #spay-form-<id> aus
   Submission::fail() oder per scrollIntoView aus form.js. Der Abstand hält das
   Ziel unter einem fixierten Theme-Kopf; wer einen höheren Kopf hat, setzt
   hier einen größeren Wert. */
.spay-form-wrap,
.spay-confirm {
    scroll-margin-top: 80px;
}

/* --- Raster ------------------------------------------------------------- */

.spay-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spay-gap);
}

.spay-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    min-width: 0;
}

.spay-field--full       { width: 100%; }
.spay-field--half       { width: calc(50% - (var(--spay-gap) / 2)); }
.spay-field--third      { width: calc(33.333% - (var(--spay-gap) * 2 / 3)); }
.spay-field--two-thirds { width: calc(66.666% - (var(--spay-gap) / 3)); }

@media (max-width: 600px) {
    .spay-field--half,
    .spay-field--third,
    .spay-field--two-thirds { width: 100%; }
}

.spay-field[hidden] { display: none; }

/* --- Beschriftungen ----------------------------------------------------- */

.spay-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--spay-label);
    line-height: 1.35;
}

.spay-label a,
.spay-choice a {
    color: var(--spay-link);
    text-decoration: underline;
}

.spay-required {
    margin-left: 2px;
    color: var(--spay-error);
}

/* --- Eingaben ----------------------------------------------------------- */

.spay-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--spay-border);
    border-radius: var(--spay-radius);
    background: #fff;
    color: var(--spay-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .15s;
}

.spay-input:focus {
    outline: none;
    border: 1px solid var(--spay-accent);
    box-shadow: none;
}

textarea.spay-input {
    min-height: 110px;
    resize: vertical;
}

.spay-input--file {
    border-style: dashed;
    background: #f9fafb;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.spay-input--file:hover {
    border-color: var(--spay-accent);
    background: #f0fdf6;
}

.spay-input:disabled {
    background: #f3f4f6;
    color: #9ca3af;
}

/* --- Auswahlfelder ------------------------------------------------------ */

.spay-choices {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spay-choices > .spay-label {
    margin-bottom: 4px;
    padding: 0;
}

.spay-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--spay-text);
    cursor: pointer;
}

.spay-choice input[type="radio"],
.spay-choice input[type="checkbox"] {
    width: auto;
    flex-shrink: 0;
    accent-color: var(--spay-accent);
}

.spay-choice--single {
    align-items: flex-start;
    padding: 0;
}

.spay-choice--single input[type="checkbox"] {
    margin-top: 3px;
}

/* --- Layoutbausteine ---------------------------------------------------- */

.spay-divider {
    margin: 8px 0;
    border: none;
    border-top: 1px solid #e5e7eb;
}

.spay-heading {
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--spay-text);
}

.spay-html {
    font-size: 14px;
    line-height: 1.6;
    color: var(--spay-text);
}

.spay-html p { margin: 0 0 8px; }
.spay-html p:last-child { margin-bottom: 0; }

/* --- Hinweise und Fehler ------------------------------------------------ */

.spay-hint {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--spay-hint);
}

.spay-error {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--spay-error);
}

/* Rabattcode mit eigenem Knopf: geprüft wird auf Klick, nicht beim Tippen. */
.spay-redeem {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.spay-redeem .spay-input {
    flex: 1 1 auto;
    min-width: 0;
}

.spay-redeem__button {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid var(--spay-border, #d1d5db);
    border-radius: var(--spay-radius, 6px);
    background: transparent;
    color: var(--spay-text);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.spay-redeem__button:hover {
    border-color: var(--spay-accent, #2563eb);
    color: var(--spay-accent, #2563eb);
}

@media (max-width: 480px) {
    .spay-redeem {
        flex-wrap: wrap;
    }
    .spay-redeem__button {
        width: 100%;
        padding: 10px 18px;
    }
}

/* Steht bewusst außerhalb der Preisbox: sonst verschwindet die Meldung
   zusammen mit der Box, und der Kunde sieht weder Preis noch Grund. */
.spay-quote-error {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.08);
    font-size: 14px;
    line-height: 1.4;
    color: var(--spay-error);
}

.spay-quote-error[hidden] {
    display: none;
}

.spay-field--error .spay-input {
    border-color: #ef4444;
}

.spay-field--error .spay-input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.spay-notice {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: var(--spay-radius);
    font-size: 15px;
}

.spay-notice--error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.spay-notice--success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

/* --- Preisvorschau ------------------------------------------------------ */

.spay-summary {
    margin-top: var(--spay-gap);
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: var(--spay-radius);
    background: #f9fafb;
    font-size: 15px;
}

.spay-summary__lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.spay-summary__line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.spay-summary__line--discount { color: #166534; }
.spay-summary__line--clamp    { color: var(--spay-hint); font-style: italic; }

.spay-summary__total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-weight: 700;
}

.spay-summary__hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--spay-hint);
}

/* --- Absenden ----------------------------------------------------------- */

.spay-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.spay-submit {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 28px;
    border: none;
    border-radius: var(--spay-radius);
    background: var(--spay-action);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.spay-submit:hover:not(:disabled)  { background: var(--spay-action-hover); }
.spay-submit:active:not(:disabled) { transform: scale(.98); }

.spay-submit:disabled {
    opacity: .7;
    cursor: wait;
}

.spay-submit__price { font-weight: 400; opacity: .85; }

.spay-status {
    margin: 0;
    font-size: 14px;
    color: var(--spay-hint);
}

/* --- Honeypot ----------------------------------------------------------- */

/* Bewusst außerhalb des Sichtfelds statt display:none – ein einfacher Bot
   soll das Feld „sehen“ und ausfüllen. */
.spay-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Bestätigungsseite --------------------------------------------------
   Übernommen aus dem Vorgänger-Plugin: mittige Karte, Statussymbol,
   Detailtabelle und ein Download-KNOPF je Dokument. Ein unterstrichener Link
   wird nach einer Zahlung schlicht übersehen. */

.spay-confirm {
    padding: 40px 24px;
    text-align: center;
}

.spay-confirm__icon {
    margin-bottom: 20px;
    line-height: 0;
}

.spay-confirm--success .spay-confirm__icon { color: #16a34a; }
.spay-confirm--pending .spay-confirm__icon { color: #d59f0d; }
.spay-confirm--error   .spay-confirm__icon { color: var(--spay-error); }

.spay-confirm--success .spay-confirm__icon svg { animation: spay-check .6s ease-out; }
.spay-confirm--pending .spay-confirm__icon svg { animation: spay-spin 1.4s linear infinite; }

@keyframes spay-check {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes spay-spin {
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spay-confirm__icon svg { animation: none !important; }
}

/* Überschriften mit Nachdruck: ein Theme, das auf seinem Abschnitt weiße
   Schrift setzt, ließ Titel und Zwischenüberschriften sonst unsichtbar auf
   hellem Grund stehen – das Markup war da, nur nicht zu lesen. */
.spay-confirm .spay-confirm__title {
    margin: 0 0 8px;
    font-size: 24px !important;
    font-weight: 700;
    line-height: 1.3;
    color: var(--spay-text) !important;
}

.spay-confirm .spay-confirm__lead {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.5;
    color: #6b7280 !important;
}

.spay-confirm h3 {
    margin: 0 0 16px;
    font-size: 12px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #374151 !important;
}

/* Detailkarte */
.spay-confirm__details {
    margin: 32px 0;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    text-align: left;
}

.spay-confirm__table {
    width: 100%;
    border-collapse: collapse;
}

.spay-confirm__table th,
.spay-confirm__table td {
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 15px;
    vertical-align: top;
}

.spay-confirm__table tr:last-child th,
.spay-confirm__table tr:last-child td { border-bottom: none; }

.spay-confirm .spay-confirm__table th {
    width: 140px;
    padding-right: 16px;
    font-weight: 500;
    text-align: left;
    color: #6b7280 !important;
}

.spay-confirm .spay-confirm__table td {
    text-align: right;
    font-weight: 600;
    color: var(--spay-text) !important;
}

.spay-confirm__table code {
    padding: 2px 8px;
    border-radius: 4px;
    background: #e5e7eb;
    font-size: 13px;
    font-weight: 400;
}

/* Bankverbindung */
.spay-confirm__bank {
    margin: 24px 0;
    padding: 20px 24px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: #fffbeb;
    text-align: left;
}

.spay-confirm .spay-confirm__bank h3 { color: #92400e !important; }

.spay-confirm__bank pre {
    margin: 0 0 10px;
    padding: 12px 14px;
    border-radius: var(--spay-radius);
    background: #fff;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.spay-confirm__bank p {
    margin: 4px 0;
    font-size: 15px;
    color: #78350f;
}

/* Downloads als Knopf, nicht als Link */
.spay-confirm__documents { margin: 32px 0 0; }

.spay-download,
.spay-download:link,
.spay-download:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 6px 10px;
    padding: 14px 32px;
    border: none;
    border-radius: 8px;
    background: #16a34a;
    box-shadow: 0 2px 8px rgba(22, 163, 74, .25);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.spay-download:hover  { background: #15803d; color: #fff; }
.spay-download:active { transform: scale(.98); color: #fff; }

.spay-download svg { flex-shrink: 0; }

/* Wie geht es weiter */
.spay-confirm__next {
    margin: 32px 0 0;
    padding: 24px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    text-align: left;
}

.spay-confirm .spay-confirm__next h3 {
    margin: 0 0 12px;
    font-size: 16px !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #166534 !important;
}

.spay-confirm .spay-confirm__next p {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.7;
    color: #15803d !important;
}

.spay-confirm__next p:last-child { margin-bottom: 0; }

.spay-confirm__ref {
    font-size: 14px;
    color: var(--spay-hint);
}

@media (max-width: 480px) {
    .spay-confirm          { padding: 28px 16px; }
    .spay-confirm__details { padding: 18px 16px; }
    .spay-confirm__table th { width: 110px; font-size: 14px; }
    .spay-confirm__table td { font-size: 14px; }
    .spay-download          { width: 100%; justify-content: center; margin: 0 0 10px; }
}

/* Ein ausgeblendeter Baustein verschwindet – auch Überschrift, Trennlinie
   und HTML-Block, die im Raster keine .spay-field-Klasse tragen. */
.spay-grid > [hidden] { display: none; }