/* ==========================================================================
   Event Tickets Banktransfer - Öffnen-Button + Formular/Erfolgs-Modal.
   ==========================================================================
   Rein CSS-basiertes Modal (":target"), kein JavaScript zum Öffnen/Schließen nötig.

   Nutzt dieselben Design-Tokens wie das Theme (--primary/--darker/--light/--lighter), damit sich
   das Widget optisch nahtlos einfügt. Fallback-Werte im var()-Aufruf greifen, falls das Theme
   diese Variablen einmal nicht definiert (z.B. bei einem Theme-Wechsel).
   ========================================================================== */

.bank-transfer-checkout-anchor {
    display: block;
    position: relative;
}

.bank-transfer-checkout__open {
    display: block;
    width: 100%;
    box-sizing: border-box;
    /* Etwas mehr Abstand nach oben als nach unten - der Button steht direkt unter dem Block der
       anderen Zahlungsart-Buttons (PayPal, SEPA, Debit-/Kreditkarte) und soll sich davon sichtbar
       absetzen. */
    margin: 24px auto 16px;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 600;
    text-align: center;
}

.bank-transfer-checkout__open:hover {
    opacity: .9;
}

/* Exakt dieselben Breakpoints wie ".paypal-button-container" (PayPal-Widget von Tickets
   Commerce auf derselben Checkout-Seite), damit beide Buttons auf jeder Bildschirmgröße gleich
   breit sind statt nur zufällig ähnlich auszusehen.
   Wichtig: Reihenfolge vom kleinsten zum größten Breakpoint - alle drei "min-width"-Bedingungen
   treffen ab 500px gleichzeitig zu (500px ist ja auch >= 300px und >= 200px), bei gleicher
   Spezifität gewinnt die zuletzt notierte Regel. Mit "200, 300, 500" statt "500, 300, 200" gewinnt
   auf breiten Bildschirmen korrekt die 500px-Regel statt der 200px-Regel. */
@media only screen and (min-width: 200px) {
    .bank-transfer-checkout__open {
        min-width: 200px;
        max-width: 300px;
    }
}
@media only screen and (min-width: 300px) {
    .bank-transfer-checkout__open {
        min-width: 300px;
        max-width: 500px;
    }
}
@media only screen and (min-width: 500px) {
    .bank-transfer-checkout__open {
        min-width: 500px;
        max-width: 600px;
    }
}

/* Höhere Spezifität, um Hintergrund UND Textfarbe zuverlässig gegen die generische ".button"-
   Farbe aus dem Tickets-Commerce-CSS der Checkout-Seite durchzusetzen (die hatte bisher die
   orangene Hintergrundfarbe überschrieben, wodurch der Button schwarz statt orange erschien). */
.bank-transfer-checkout__open.bank-transfer-checkout__open {
    background: var(--primary, #fc7f03) !important;
    color: #fff !important;
}

/* Zustand, wenn die Sperrfrist erreicht ist (siehe $atts['sperrfrist_tage'] im Shortcode-Handler) -
   ausgegraut statt orange, kein Hover-Effekt, kein Zeiger-Cursor (ist ein <span>, kein <a> - nicht
   anklickbar). Höhere Spezifität wie oben nötig, um die orangene ".bank-transfer-checkout__open"-
   Farbe sicher zu überschreiben. */
.bank-transfer-checkout__open.bank-transfer-checkout__open--disabled {
    background: #999 !important;
    color: #eee !important;
    cursor: not-allowed;
}

.bank-transfer-checkout__open--disabled:hover {
    opacity: 1;
}

.bank-transfer-checkout-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    padding: 20px;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
}

.bank-transfer-checkout-modal:target {
    display: flex;
}

.bank-transfer-checkout-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
}

.bank-transfer-checkout-modal__box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin-top: 20vh;
    background: var(--darker, #2d2d2d);
    border-radius: 12px;
    padding: 32px 26px 26px;
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
    color: var(--light, #b5b1ae);
    /* Einheitlicher Abstand zwischen Titel, Fehlermeldung und Formular/Erfolgsanzeige - ersetzt
       die vorher uneinheitlichen Einzel-margins der Kindelemente. */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Auf breiten Bildschirmen nach links versetzt (Wunsch, insgesamt 30% - erst 10%, dann zweimal
   nochmal verschoben), auf Mobile bewusst NICHT - dort bleibt es einfach zentriert, damit bei
   wenig Platz nichts abgeschnitten wird. */
@media (min-width: 782px) {
    .bank-transfer-checkout-modal__box {
        transform: translateX(-30%);
    }
}

.bank-transfer-checkout__title {
    margin: 0;
    font-size: 18px;
}

.bank-transfer-checkout-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 16px;
    line-height: 1;
    color: var(--light, #b5b1ae) !important;
    opacity: .7;
}

.bank-transfer-checkout-modal__close:hover {
    opacity: 1;
    text-decoration: none;
}

.bank-transfer-checkout__error {
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(244,67,54,.15);
    color: #f44336;
}

.bank-transfer-checkout__success-text {
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(76,175,80,.15);
    color: #4caf50;
}

.bank-transfer-checkout__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bank-transfer-checkout__field {
    margin: 0;
}

.bank-transfer-checkout__field label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lighter, #f0f0f8);
}

.bank-transfer-checkout__field input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: var(--lighter, #f0f0f8);
    font-size: 14px;
}

/* Checkbox-Variante des Feldes ("Ich habe den Hinweis verstanden") - Label steht hier NICHT über
   dem Feld (wie bei Name/E-Mail), sondern daneben, da Text und Kästchen zusammen eine einzige
   anklickbare Zeile bilden sollen. */
.bank-transfer-checkout__field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--light, #b5b1ae);
    cursor: pointer;
}

.bank-transfer-checkout__field--checkbox input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    margin: 3px 0 0;
}

.bank-transfer-checkout__button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: var(--primary, #fc7f03);
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.bank-transfer-checkout__button:hover {
    opacity: .9;
}

.bank-transfer-checkout__button:disabled {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.4) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Höhere Spezifität + !important, genau wie bei ".bank-transfer-checkout__open" weiter oben nötig
   war: Der "Schließen"-Button in der Erfolgs-Ansicht ist ein <a class="button ...">, und solche
   Anker-Elemente hat die generische ".button"-Farbe aus dem Tickets-Commerce-Checkout-CSS schon
   einmal überschrieben (schwarz statt orange). Diese Regel stellt sicher, dass der Button auch dort
   zuverlässig orange mit weißem Text bleibt. */
.bank-transfer-checkout__button.bank-transfer-checkout__button {
    background: var(--primary, #fc7f03) !important;
    color: #fff !important;
}

/* "Info"-Hinweis, farblich an MUIs severity="info" angelehnt, aber als getönte Fläche auf
   dunklem Grund statt als heller Kasten (das MUI-Original ist für helle Oberflächen gedacht und
   wirkt im dunklen Modal wie ein Fremdkörper) - gleiches Prinzip wie Status-Badges und
   Erfolgs-/Fehlermeldungen (rgba-Tönung + kräftigerer Text-Ton). */
.bank-transfer-checkout__hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
    padding: 10px 16px;
    border-radius: 6px;
    background: rgba(2,136,209,.15);
    color: #64b5f6;
    font-size: 13px;
    line-height: 1.5;
}

.bank-transfer-checkout__hint-icon {
    flex: 0 0 auto;
    color: #64b5f6;
    font-size: 18px;
    line-height: 1.4;
}

.bank-transfer-checkout--success {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bank-transfer-checkout__details {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.bank-transfer-checkout__details td {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: var(--light, #b5b1ae);
}

.bank-transfer-checkout__details tr:last-child td {
    border-bottom: none;
}

.bank-transfer-checkout__details td:first-child {
    color: var(--primary, #fc7f03);
    font-weight: 600;
    padding-right: 14px;
    white-space: nowrap;
}