/* Cache le container "bulle" que WooCommerce ajoute automatiquement autour du
   contenu de payment_fields() (le div.payment_box + le triangle ::before du theme).
   Notre payment_fields() n'affiche rien au repos ; showIframe() detache la section
   et la re-attache directement sur form.checkout donc on ne casse rien. */
li.wc_payment_method.payment_method_borderpay_embedded,
.wc_payment_method.payment_method_borderpay_embedded > .payment_box,
.payment_box.payment_method_borderpay_embedded {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.payment_box.payment_method_borderpay_embedded::before,
.wc_payment_method.payment_method_borderpay_embedded > .payment_box::before {
    display: none !important;
}
/* Cache aussi le label et le radio du mode paiement puisqu'il est unique. */
li.wc_payment_method.payment_method_borderpay_embedded > input[type="radio"],
li.wc_payment_method.payment_method_borderpay_embedded > label {
    display: none !important;
}

#card-payment-section {
    margin-top: 24px;
    background: var(--blanc, #FFFFFF);
    border: 1px solid var(--trait, #D8D8DC);
    border-radius: 3px;
    overflow: hidden;
}

.card-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--encre-2, #60606A);
    font-family: var(--texte, 'Barlow', Arial, Helvetica, sans-serif);
    font-size: 14px;
}

.card-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--trait, #D8D8DC);
    border-top-color: var(--bleu, #001489);
    border-radius: 50%;
    animation: card-spin 0.7s linear infinite;
}

@keyframes card-spin {
    to { transform: rotate(360deg); }
}

#card-payment-wrap {
    width: 100%;
    padding: 20px;
}

#pay-iframe {
    width: 100%;
    height: 320px;
    border: none;
    display: block;
}

@media (max-width: 480px) {
    #card-payment-section {
        margin-top: 18px;
    }

    #card-payment-wrap {
        padding: 16px;
    }

    #pay-iframe {
        height: 400px;
    }
}