/* Stripe-Zahlung auf der Tier-Detailseite (nur US-Besucher).
   Zweck: Knopf "Reserve or buy now", Auswahl-Sheet (Anzahlung / voller Preis), Rueckkehr-Hinweise.
   Datum: 15.09.2026. Quelle: Webseite/Abzugeben-Filter-2026-09/stripe/public/starpythons-stripe/stripe-v1.css
   Nur eigene Klassen (spf-pay*). Farben und Rundungen wie Filter v2 / Kategoriekarten. */

.spf-pay { --spf-accent: #299738; --spf-accent-dark: #21792d; --spf-accent-soft: #e6f3e8; --spf-ink: #212529; --spf-ink-2: #4d544c; --spf-muted: #7c837a;
           --spf-line: #dde2da; --spf-line-2: #c9d0c6; --spf-surface: #fff; --spf-surface-2: #f4f6f3; --spf-shadow: 0 10px 30px rgba(20, 30, 20, .16); }
/* margin-left: auto bildet das ms-auto des Nachbarn nach. Der Anfrage-Knopf
   steckt im Theme in einem Kasten mit dieser Klasse und wird dadurch nach rechts
   geschoben; ohne die Entsprechung bliebe unser Knopf links kleben und die
   beiden stuenden auf breiten Bildschirmen versetzt uebereinander. */
.spf-pay { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
/* Der Knopf traegt dieselben Klassen wie der Anfrage-Knopf daneben, bekommt vom
   Theme aber nichts ab: Dessen Regel heisst `#main a.more` und gilt nur fuer
   Verweise. Unser Element ist ein <button> - es soll einen Dialog oeffnen, kein
   Ziel ansteuern - und faellt deshalb auf Bootstraps Blau zurueck. Neben dem
   gruenen Nachbarn sah das aus wie ein Fremdkoerper.

   Statt die Auszeichnung zu einem <a> zu verbiegen, bilden wir das Aussehen hier
   nach. Die Farbe steht in einer Variablen: Wer das Theme umfaerbt, setzt
   --spf-pay-accent und muss diese Datei nicht anfassen. */
.spf-pay .spf-pay-open {
    display: inline-block;
    margin: 12px 0 8px;
    padding: 5px 25px;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background: var(--spf-pay-accent, #299738);
    border: 0;
    border-radius: 8px;
}

.spf-pay .spf-pay-open:hover,
.spf-pay .spf-pay-open:focus-visible {
    background: var(--spf-pay-accent-hover, #303030);
    color: #fff;
    text-decoration: none;
}
.spf-pay .spf-pay-test { font-size: 11px; color: #b45309; background: #fff3d6; border-radius: 999px; padding: 1px 8px; }

/* Rueckkehr-Hinweise oberhalb der Buy-Box */
.spf-pay-notice { border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; font-size: 15px; line-height: 1.5; border: 1px solid #e3e7e1; }
.spf-pay-notice-ok { background: #e6f3e8; border-color: #bfe0c6; color: #1e5a27; }
.spf-pay-notice-info { background: #f4f6f3; color: #4d544c; }
.spf-pay-notice-warn { background: #fff3d6; border-color: #f3d79b; color: #7a4a00; }

/* Sheet (mobil unten) / Dialog (Desktop mittig) */
.spf-pay-backdrop { position: fixed; inset: 0; background: rgba(20, 30, 20, .45); z-index: 1040; }
.spf-pay-backdrop[hidden], .spf-pay-sheet[hidden] { display: none !important; }
.spf-pay-sheet { --spf-accent: #299738; --spf-accent-dark: #21792d; --spf-accent-soft: #e6f3e8; --spf-ink: #212529; --spf-ink-2: #4d544c; --spf-muted: #7c837a;
                 --spf-line: #dde2da; --spf-line-2: #c9d0c6; --spf-surface: #fff; --spf-surface-2: #f4f6f3; --spf-shadow: 0 10px 30px rgba(20, 30, 20, .16);
                 position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: var(--spf-surface); color: var(--spf-ink);
                 border-radius: 16px 16px 0 0; box-shadow: var(--spf-shadow); padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
                 max-height: 92vh; overflow-y: auto; font-family: inherit; }
.spf-pay-sheet.spf-pay-in { animation: spf-pay-up .22s ease-out; }
@keyframes spf-pay-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) {
    .spf-pay-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 520px; max-width: calc(100vw - 32px); border-radius: 16px; padding: 22px 26px; }
    .spf-pay-sheet.spf-pay-in { animation: spf-pay-fade .18s ease-out; }
    @keyframes spf-pay-fade { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
}
.spf-pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.spf-pay-title { font-size: 20px; line-height: 1.25; margin: 0; color: var(--spf-ink); }
.spf-pay-close { border: 0; background: var(--spf-surface-2); color: var(--spf-ink-2); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; flex: none; padding: 0; margin: -4px -6px 0 0; }
.spf-pay-close:hover { background: var(--spf-line); }
.spf-pay-animal { margin: 0 0 12px; font-size: 15px; color: var(--spf-ink-2); }
.spf-pay-animal .spf-pay-id { color: var(--spf-muted); margin-left: 6px; }
.spf-pay-ships { background: #fff3d6; border: 1px solid #f3d79b; color: #7a4a00; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; font-size: 15px; line-height: 1.45; font-weight: 500; }
.spf-pay-shiplink { margin: 14px 0 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.spf-pay-shiplink a { color: var(--spf-accent-dark); text-decoration: underline; }
.spf-pay-shiplink .spf-pay-sep { color: var(--spf-muted); }
.spf-pay-status { font-size: 14px; color: var(--spf-muted); margin: 0 0 10px; }
.spf-pay-status[hidden] { display: none; }
.spf-pay-status.spf-pay-status-warn { color: #7a4a00; background: #fff3d6; border-radius: 10px; padding: 10px 14px; }
.spf-pay-options { display: flex; flex-direction: column; gap: 10px; }
.spf-pay-options[hidden] { display: none; }
.spf-pay-form { margin: 0; }
.spf-pay-choice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; text-align: left; border: 1px solid var(--spf-line-2); background: var(--spf-surface-2);
                  border-radius: 10px; padding: 12px 16px; cursor: pointer; font: inherit; color: var(--spf-ink); margin: 0; transition: border-color .15s, background .15s; }
.spf-pay-choice:hover, .spf-pay-choice:focus-visible { border-color: var(--spf-accent); background: var(--spf-accent-soft); outline: 0; }
.spf-pay-choice[disabled] { opacity: .6; cursor: wait; }
.spf-pay-choice-label { font-weight: 600; font-size: 16px; }
.spf-pay-choice-amount { margin-left: auto; font-weight: 700; font-size: 18px; color: var(--spf-accent-dark); white-space: nowrap; }
.spf-pay-choice-hint { flex-basis: 100%; font-size: 13px; color: var(--spf-muted); }
.spf-pay-choice-full { background: var(--spf-surface); }
.spf-pay-foot { margin: 8px 0 0; font-size: 12px; color: var(--spf-muted); }
body.spf-pay-lock { overflow: hidden; }