/* Carefully scoped demo UI. This is NOT a Stripe Payment Element. */
.csd-demo-panel, .csd-demo-panel *, .csd-demo-panel *::before, .csd-demo-panel *::after{box-sizing:border-box}
.csd-demo-panel{max-width:680px;color:#263145;font-family:inherit;margin:0;padding:9px 0 2px}
.csd-demo-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.csd-demo-heading{display:inline-flex;align-items:center;gap:11px;color:#086ad3;font-size:17px;font-weight:650;line-height:1.5}
.csd-demo-heading svg{flex:none}
.csd-demo-pill{display:inline-flex;padding:4px 9px;background:#f0f5ff;border:1px solid #dae5ff;border-radius:6px;font-size:11px;font-weight:600;color:#365db3;line-height:1.4}
.csd-demo-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.csd-demo-field{position:relative;margin:0 0 12px;min-width:0}
.csd-demo-field input,.wc-block-components-text-input .csd-demo-field input{display:block!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:none!important;height:62px!important;margin:0!important;padding:13px 20px!important;border:1px solid #dedfe4!important;border-radius:9px!important;background:#fff!important;color:#222b3f!important;font:inherit!important;font-size:17px!important;line-height:25px!important;letter-spacing:0!important;box-shadow:0 2px 3px rgba(16,24,40,.035)!important;outline:none!important;transition:border-color .15s,box-shadow .15s}
.csd-demo-field input::placeholder{color:#505564!important;opacity:1}
.csd-demo-field input:focus{border-color:#2a77da!important;box-shadow:0 0 0 3px rgba(37,110,223,.14)!important}
.csd-demo-field-number input{padding-right:166px!important}
.csd-demo-field-cvc input{padding-right:52px!important}
/* Compact payment-network style badges. Static, no external network requests. */
.csd-demo-card-glyph{pointer-events:none;position:absolute;display:flex;align-items:center;gap:4px;right:12px;top:50%;transform:translateY(-50%);white-space:nowrap}
.csd-demo-card-glyph .csd-brand{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:33px;height:23px;border:1px solid #e6e6e8;border-radius:3px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);font-family:Arial,sans-serif;font-size:11px;font-weight:900;line-height:1;letter-spacing:-.8px;font-style:italic}
.csd-brand-visa{color:#16449f}
.csd-demo-card-glyph .csd-brand-amex{color:#fff;background:#1479bf;font-size:9px;font-style:normal;letter-spacing:-.5px}
.csd-demo-card-glyph .csd-brand-mc{position:relative;gap:0}
.csd-demo-card-glyph .csd-brand-mc i{display:block;width:16px;height:16px;border-radius:50%;background:#eb001b}
.csd-demo-card-glyph .csd-brand-mc i+i{background:#f79e1b;margin-left:-6px;opacity:.9}
.csd-demo-card-glyph .csd-brand-up{color:#188044;font-size:6.8px;font-style:normal;letter-spacing:-.45px;border-left:4px solid #e23d3d}

.csd-demo-cvc-glyph{pointer-events:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);width:27px;height:20px;border:1px solid #d0d5df;border-radius:3px;color:#5e667a;background:#e8e9ed;font-size:13px;letter-spacing:0;display:flex;align-items:center;justify-content:center}
.csd-demo-error,.csd-demo-order-note{border:1px solid #f0b3af;border-left:4px solid #be2826;border-radius:7px;background:#fff1f1;color:#ae2923;font-size:14px;font-weight:550;line-height:1.5;padding:12px 14px;margin:6px 0 12px}
.csd-demo-error[hidden]{display:none!important}
.csd-demo-order-note{margin:14px 0 18px}
@media(max-width:490px){.csd-demo-header{align-items:flex-start}.csd-demo-row{gap:9px}.csd-demo-field input,.wc-block-components-text-input .csd-demo-field input{height:54px!important;padding:12px 13px!important;font-size:15px!important}.csd-demo-field-number input{padding-right:112px!important}.csd-demo-card-glyph{right:10px}.csd-demo-field-cvc input{padding-right:42px!important}.csd-demo-cvc-glyph{right:9px}}

@media(max-width:490px){.csd-demo-card-glyph .csd-brand-amex,.csd-demo-card-glyph .csd-brand-up{display:none}.csd-demo-field-number input{padding-right:88px!important}}
.csd-demo-wait{display:flex;align-items:center;gap:9px;margin:5px 0 12px;color:#506078;font-size:13px}
.csd-demo-wheel{display:inline-block;height:16px;width:16px;border:2px solid #bdc9da;border-top-color:#2570dc;border-radius:50%;animation:csd-demo-spin .7s linear infinite}

@keyframes csd-demo-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.csd-demo-wheel, .csd-btn-spinner, .wc-block-components-checkout-place-order-button.csd-demo-block-loading::after{animation-duration:2s}}

.csd-demo-panel [hidden]{display:none!important}
.csd-demo-panel .csd-demo-wait[hidden]{display:none!important}
.csd-demo-panel .csd-demo-wait:not([hidden]){display:flex!important}

/* v2.2: One inline notice, compact responsive spacing */
.csd-demo-panel { min-width:0; width:100%; max-width:100%; }
.csd-demo-panel .csd-demo-error { width:100%; margin:12px 0 0; padding:12px 14px; font-size:14px; line-height:1.45; border-radius:8px; border:1px solid #f1b5b3; border-left:3px solid #d92d20; background:#fef3f2; color:#b42318; overflow-wrap:anywhere; }
.csd-demo-panel .csd-demo-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.csd-demo-panel input { -webkit-appearance:none; appearance:none; }
.csd-demo-panel .csd-demo-wait { display:none!important; }

/* --- CLASSIC CHECKOUT SPINNER --- */
form.checkout #place_order.csd-demo-loading {
    position: relative !important;
    cursor: progress !important;
    pointer-events: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: transparent !important; /* Cache le texte */
    text-shadow: none !important;
}

.csd-btn-spinner {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    /* On force l'animation pour contrer les thèmes */
    animation: csd-demo-spin 0.75s linear infinite !important;
    -webkit-animation: csd-demo-spin 0.75s linear infinite !important;
    transform-origin: center center !important;
    box-sizing: border-box !important;
}

/* --- BLOCK CHECKOUT SPINNER (WooCommerce Blocks) --- */
.wc-block-components-checkout-place-order-button.csd-demo-block-loading {
    position: relative !important;
    pointer-events: none !important;
    cursor: progress !important;
    color: transparent !important;
    text-shadow: none !important;
}
.wc-block-components-checkout-place-order-button.csd-demo-block-loading::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: -10px !important;
    margin-left: -10px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: csd-demo-spin 0.75s linear infinite !important;
    transform: none !important;
}

@media(max-width:600px){
 .csd-demo-panel{padding:8px 0 0}
 .csd-demo-header{margin-bottom:10px;gap:7px}
 .csd-demo-field input,.wc-block-components-text-input .csd-demo-field input{height:54px!important;font-size:16px!important;padding-top:10px!important;padding-bottom:10px!important}
 .csd-demo-row{gap:9px}
 .csd-demo-heading{font-size:16px}
 .csd-demo-panel .csd-demo-error{font-size:13px}
}
@media(max-width:360px){
 .csd-demo-card-glyph .csd-brand-visa{display:none}
 .csd-demo-field-number input{padding-right:54px!important}
 .csd-demo-row{gap:7px}
}