/**
 * ==========================================================
 * WALLEE INLINE PAYMENT METHODS
 * ==========================================================
 */


/* ==========================================================
   WRAPPER
   ========================================================== */

.ff-wallee-inline {
    margin-top: 12px;
}


/* ==========================================================
   STATUS
   ========================================================== */

.ff-wallee-inline-status {
    display: none;

    padding: 10px 0;

    font-size: 14px;

    opacity: 0.75;
}


/* ==========================================================
   ZAHLUNGSMETHODEN GESAMTBOX
   ========================================================== */

.ff-wallee-inline-methods {
    display: flex;

    flex-direction: column;

    gap: 0;

    margin-bottom: 12px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #f0f0f0;
    border-radius: 10px;

    box-shadow:
        1px 2px 4px
        rgba(0, 0, 0, 0.10);
}


/* ==========================================================
   EINZELNES PAYMENT ITEM

   Enthält:
   - Choice
   - zugehöriges Panel
   ========================================================== */

.ff-wallee-inline-item {
    position: relative;

    width: 100%;

    background: #ffffff;

    border-top:
        1px solid #eeeeee;
}


/*
 * Oberstes Item ohne oberen Trennstrich.
 */

.ff-wallee-inline-item:first-child {
    border-top: 0;
}

.ff-wallee-inline-panel[data-configuration-id="356828"]
.ff-wallee-inline-container,

.ff-wallee-inline-panel[data-configuration-id="356829"]
.ff-wallee-inline-container,

.ff-wallee-inline-panel[data-configuration-id="356830"]
.ff-wallee-inline-container,

.ff-wallee-inline-panel[data-configuration-id="359015"]
.ff-wallee-inline-container {
    display: none !important;
}

/* Kreditkarte Container Design */
.ff-wallee-inline-panel[data-configuration-id="355770"]
.ff-wallee-inline-container {
    background-color: #fff;
    padding: 16px 12px 0;
    border-radius: .375rem;
}

/* ==========================================================
   ZAHLUNGSMETHODE / CHOICE
   ========================================================== */

.ff-wallee-inline-choice {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    gap: 14px;

    padding: 12px;

    margin: 0;

    background-color: #ffffff;

    border: 0;

    border-radius: 0;

    cursor: pointer;

    line-height: 1.2;

    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}


/* ==========================================================
   HOVER
   ========================================================== */

.ff-wallee-inline-choice:hover {
    background-color: #fcfcfc;
}


/* ==========================================================
   AUSGEWÄHLTE ZAHLUNGSMETHODE
   ========================================================== */

.ff-wallee-inline-item.is-selected
> .ff-wallee-inline-choice,

.ff-wallee-inline-choice:has(
    input[type="radio"]:checked
) {
    background-color:
        #fafafa !important;
}


/* ==========================================================
   FOKUS
   ========================================================== */

.ff-wallee-inline-choice:focus-within {
    outline: none;

    box-shadow:
        inset 0 0 0 2px
        rgb(0 116 255);

    z-index: 2;
}


/* ==========================================================
   LOGO
   ========================================================== */

.ff-wallee-inline-logo {
    display: block;

    flex: 0 0 auto;

    width: auto;
    height: 22px;

    max-width: 44px;
}


/* ==========================================================
   NAME
   ========================================================== */

.ff-wallee-inline-name {
    min-width: 0;

    font-size: 14px;

    line-height: 1.3;
}


/* ==========================================================
   PANEL

   Dieses erscheint jetzt direkt unterhalb
   der ausgewählten Zahlungsmethode.
   ========================================================== */

.ff-wallee-inline-panel {
    width: 100%;

    padding:
        12px 14px 14px;

    background:
        #fafafa;

    border-top:
        1px solid #eeeeee;
}


/*
 * Hidden muss wirklich komplett verschwinden.
 */

.ff-wallee-inline-panel[hidden] {
    display: none !important;
}


/* ==========================================================
   BESCHREIBUNG
   ========================================================== */

.ff-wallee-inline-description {
    margin:
        0 0 0px;

    color: #6f7882;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.45;

    opacity: 1;
}

/* Bei Kreditkarten Abstand unter Beschreibung. */
.ff-wallee-inline-panel[data-configuration-id="355770"]
.ff-wallee-inline-description {
    margin-bottom: 12px !important;
}


/* ==========================================================
   WALLEE IFRAME CONTAINER
   ========================================================== */

.ff-wallee-inline-container {
    width: 100%;

    min-height: 0;

    transition:
        min-height 0.15s ease-out;
}


/* ==========================================================
   ALTER PANEL-WRAPPER

   Wird bei mehreren Zahlungsmethoden nicht mehr für
   die Panels benötigt.

   Bei nur einer Methode bleibt er kompatibel.
   ========================================================== */

.ff-wallee-inline-panels {
    width: 100%;
}


/*
 * Falls nur eine Zahlungsmethode vorhanden ist,
 * steht deren Panel weiterhin im alten Wrapper.
 */

.ff-wallee-inline-panels
> .ff-wallee-inline-panel {
    border:
        1px solid #eeeeee;

    border-radius:
        10px;
}


/* ==========================================================
   ERROR
   ========================================================== */

.ff-wallee-inline-error[hidden] {
    display: none;
}


.ff-wallee-inline-error {
    margin-top: 10px;

    color: #b91c1c;

    font-size: 14px;
}


/*
 * Fehlerrahmen am eigentlichen Wallee-Feld.
 */

.ff-wallee-inline.ff-el-is-error
.ff-wallee-inline-container {
    border-radius: 6px;

    box-shadow:
        0 0 0 1px
        #b91c1c;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .ff-wallee-inline-choice {
        gap: 12px;

        padding:
            14px 11px;
    }


    .ff-wallee-inline-panel {
        padding:
            11px 11px 13px;
    }


    .ff-wallee-inline-logo {
        height: 21px;

        max-width: 42px;
    }


    .ff-wallee-inline-name {
        font-size: 14px;
		font-weight: 500;
    }


    .ff-wallee-inline-description {
        margin-bottom: 0px;
        font-size: 12.5px;
    }

}


/* ==========================================================
   DARK MODE
   ========================================================== */

@media (prefers-color-scheme: dark) {

    .ff-wallee-inline-item {
        border-color:
            rgba(255, 255, 255, 0.25);
    }


    .ff-wallee-inline-error {
        color: #f87171;
    }

}

/* ==========================================================
   SEITEN-OVERLAY BEIM METHODENWECHSEL

   Zwischen dem Klick auf eine andere Zahlungsmethode und dem
   fertigen Wallee-iframe ist das Panel ein leerer, fast null
   hoher Kasten. Jeder Klick in dieser Zeit wirft den laufenden
   Aufbau wieder weg, deshalb wird die Seite so lange gesperrt.

   Sichtbarkeit steuert wallee-inline.js ueber .is-visible.
   ========================================================== */

.ff-wallee-overlay {

    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(255, 255, 255, 0.75);

    /* Ueber Avadas Sticky-Header und die Wallee-iframes. */
    z-index: 999999;

    cursor: wait;

    /* Kein Touch-Scrolling durch das Overlay hindurch. Wheel und
       Touchmove faengt zusaetzlich das JS ab. */
    touch-action: none;

    overscroll-behavior: contain;


    /* Ausgeblendeter Grundzustand: Ein sehr schneller Wechsel
       (Handler steht schon, kein Ajax) soll nicht als Flackern
       durchschlagen. */
    opacity: 0;

    pointer-events: none;

    transition: opacity 0.15s ease;
}


.ff-wallee-overlay.is-visible {

    opacity: 1;

    pointer-events: auto;
}


.ff-wallee-overlay-spinner {

    width: 40px;
    height: 40px;

    border:
        3px solid rgba(33, 35, 38, 0.15);

    border-top-color: #212326;

    border-radius: 50%;

    animation:
        ff-wallee-spin 0.7s linear infinite;
}


@keyframes ff-wallee-spin {

    to { transform: rotate(360deg); }
}


@media (prefers-reduced-motion: reduce) {

    .ff-wallee-overlay {

        transition: none;
    }


    .ff-wallee-overlay-spinner {

        animation-duration: 2.4s;
    }
}


/* ==========================================================
   VALIDIERUNGSHINWEIS BEIM BEZAHLVERSUCH

   Gleiche Optik wie die Fehlermeldung nach einer abgelehnten
   Zahlung (WalleeProcessor::maybeRenderFailureNotice), damit
   beide als dieselbe Art von Meldung gelesen werden.
   ========================================================== */

.ff-wallee-validation-notice {

    margin: 0 0 18px;

    padding: 14px 16px;

    border: 1px solid #f5c2c7;

    border-left-width: 4px;

    border-radius: 6px;

    background: #fdf2f2;

    color: #842029;

    line-height: 1.45;
}


.ff-wallee-validation-notice p {

    margin: 6px 0 0;
}


.ff-wallee-validation-notice ul {

    margin: 8px 0 0;

    padding-left: 20px;
}


.ff-wallee-validation-notice li {

    margin: 0 0 4px;
}


.ff-wallee-validation-notice li:last-child {

    margin-bottom: 0;
}