/**
 * Legacy styling for the v3 single-line CardElement used by the 3DS branch
 * (#dokan-stripe-card-element). Scoped tightly to that mount so the new
 * PaymentElement (#dokan-stripe-connect-payment-element / Express) is left
 * alone — Stripe applies the same `.StripeElement` class to every iframe
 * wrapper, so a broad selector would force a 40px height on the multi-row PE.
 */
.payment_method_dokan-stripe-connect #dokan-stripe-card-element.StripeElement,
.payment_method_dokan-stripe-connect #dokan-stripe-card-element .StripeElement {
    box-sizing: border-box;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.payment_method_dokan-stripe-connect #dokan-stripe-card-element.StripeElement--focus,
.payment_method_dokan-stripe-connect #dokan-stripe-card-element .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.payment_method_dokan-stripe-connect #dokan-stripe-card-element.StripeElement--invalid,
.payment_method_dokan-stripe-connect #dokan-stripe-card-element .StripeElement--invalid {
    border-color: #fa755a;
}

.payment_method_dokan-stripe-connect #dokan-stripe-card-element.StripeElement--webkit-autofill,
.payment_method_dokan-stripe-connect #dokan-stripe-card-element .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

/* Shared Spinner Animation */
@keyframes dokan-stripe-pe-spin {
    to {
        transform: rotate(360deg);
    }
}

.dokan-stripe-pe-express-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #635bff;
    border-radius: 50%;
    animation: dokan-stripe-pe-spin 700ms linear infinite;
    pointer-events: none;
}

/* Express Checkout mount (classic shortcode pages). */
.dokan-stripe-pe-express-wrap {
    position: relative;
    min-height: 48px;
}

.dokan-stripe-pe-express-wrap .dokan-stripe-pe-express-mount {
    position: relative;
    opacity: 0;
    transition: opacity 150ms ease;
}

.dokan-stripe-pe-express-wrap.is-ready .dokan-stripe-pe-express-mount {
    opacity: 1;
}

.dokan-stripe-pe-express-wrap > .dokan-stripe-pe-express-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
}

.dokan-stripe-pe-express-wrap.is-ready > .dokan-stripe-pe-express-spinner,
.dokan-stripe-pe-express-wrap.is-empty > .dokan-stripe-pe-express-spinner {
    display: none;
}

.dokan-stripe-pe-express-wrap.is-empty {
    display: none;
}

/* Block checkout wrapper. */
.dokan-stripe-pe-express-block {
    position: relative;
    min-height: 48px;
}

.dokan-stripe-pe-express-block-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
}

/**
 * Express Checkout loading container (shown after wallet confirmation).
 * Overlays the buttons area with a spinner.
 */
.dokan-stripe-pe-express-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dokan-stripe-pe-express-loading-overlay .dokan-stripe-pe-express-spinner {
    display: block !important;
    position: static;
    margin: 0;
}