/* Loaders Electro World Checkout - VERSION FINALE GARANTIE */

/* ==============================================
   ANIMATION PRINCIPALE - PRIORITÉ ABSOLUE
============================================== */
@keyframes ew-simple-spin {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}

@keyframes ew-emergency-spin {
    from { transform: rotate(0deg) !important; }
    to { transform: rotate(360deg) !important; }
}

@keyframes ew-force-spin {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}

/* ==============================================
   SPINNER DE BASE - STYLES FORCÉS
============================================== */
.ew-spinner {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #f3f3f3 !important;
    border-radius: 50% !important;
    border-top: 2px solid #CBB390 !important;
    animation: ew-simple-spin 1s linear infinite !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Variantes de taille */
.ew-spinner.ew-spinner-sm {
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
}

.ew-spinner.ew-spinner-lg {
    width: 24px !important;
    height: 24px !important;
    border-width: 3px !important;
    margin-right: 10px !important;
}

.ew-spinner.ew-spinner-xl {
    width: 32px !important;
    height: 32px !important;
    border-width: 4px !important;
    margin-right: 12px !important;
}

/* ==============================================
   CONTENEURS DE LOADING
============================================== */
.ew-loading-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    color: #333 !important;
}

/* ==============================================
   BOUTONS DE CHARGEMENT
============================================== */
#ew-place-order.ew-loading,
.ew-btn-primary.ew-loading,
.ew-btn-secondary.ew-loading {
    opacity: 0.8 !important;
    cursor: not-allowed !important;
    position: relative !important;
}

#ew-place-order.ew-loading .ew-spinner,
.ew-btn-primary.ew-loading .ew-spinner,
.ew-btn-secondary.ew-loading .ew-spinner {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
    margin-right: 6px !important;
}

/* ==============================================
   SECTIONS DE CHARGEMENT
============================================== */
.ew-section.ew-loading,
.ew-cart-section.ew-loading,
.ew-shipping-section.ew-loading,
.ew-payment-section.ew-loading,
.ew-coupon-section.ew-loading {
    position: relative !important;
    opacity: 0.7 !important;
}

/* Overlay pour les sections */
.ew-section.ew-loading::before,
.ew-cart-section.ew-loading::before,
.ew-shipping-section.ew-loading::before,
.ew-payment-section.ew-loading::before,
.ew-coupon-section.ew-loading::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    z-index: 50 !important;
    border-radius: 8px !important;
    backdrop-filter: blur(1px) !important;
}

/* ==============================================
   LOADERS CENTRÉS POUR SECTIONS
============================================== */
.ew-loader,
.ew-section-loader {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #333 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    white-space: nowrap !important;
    min-width: 120px !important;
}

.ew-loader .ew-spinner,
.ew-section-loader .ew-spinner {
    width: 20px !important;
    height: 20px !important;
    border-width: 3px !important;
    margin-right: 0 !important;
}

/* ==============================================
   ITEMS DU PANIER EN COURS DE MISE À JOUR
============================================== */
.ew-cart-item.ew-updating {
    opacity: 0.6 !important;
    pointer-events: none !important;
    position: relative !important;
    transform: scale(0.98) !important;
    transition: all 0.2s ease !important;
}

.ew-cart-item.ew-updating::after {
    content: "" !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #ddd !important;
    border-radius: 50% !important;
    border-top-color: #CBB390 !important;
    animation: ew-simple-spin 1s linear infinite !important;
    z-index: 10 !important;
}

.ew-cart-item.ew-removing {
    opacity: 0.4 !important;
    transform: scale(0.95) !important;
    background: rgba(231, 76, 60, 0.1) !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

.ew-cart-item.ew-updated {
    background: rgba(203, 179, 144, 0.15) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 2px 8px rgba(203, 179, 144, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* ==============================================
   CONTRÔLES DÉSACTIVÉS
============================================== */
.ew-qty-input:disabled {
    background: #f5f5f5 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    color: #999 !important;
}

.ew-qty-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ==============================================
   ANIMATIONS POUR ÉLÉMENTS SPÉCIFIQUES
============================================== */
.ew-cart-count.ew-count-updating {
    transform: scale(0.8) !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
}

.ew-cart-count.ew-count-updated {
    transform: scale(1.1) !important;
    background: var(--ew-success, #00a859) !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.ew-total-amount.ew-total-updating {
    opacity: 0.6 !important;
    transform: scale(0.95) !important;
    transition: all 0.2s ease !important;
}

.ew-total-amount.ew-total-updated {
    color: var(--ew-success, #00a859) !important;
    font-weight: 700 !important;
    transform: scale(1.05) !important;
    transition: all 0.4s ease !important;
}

/* ==============================================
   TRANSITIONS GLOBALES
============================================== */
.ew-cart-count,
.ew-total-amount,
.ew-cart-item,
.ew-cart-items,
.ew-summary-content,
.ew-section {
    transition: all 0.2s ease !important;
}

/* ==============================================
   RESPONSIVE
============================================== */
@media (max-width: 768px) {
    .ew-spinner {
        width: 16px !important;
        height: 16px !important;
    }

    .ew-loader,
    .ew-section-loader {
        padding: 12px 16px !important;
        font-size: 13px !important;
        min-width: 100px !important;
    }

    .ew-loader .ew-spinner,
    .ew-section-loader .ew-spinner {
        width: 18px !important;
        height: 18px !important;
    }

    .ew-cart-item.ew-updating::after {
        width: 14px !important;
        height: 14px !important;
        top: 10px !important;
        right: 10px !important;
    }
}

@media (max-width: 480px) {
    .ew-spinner {
        width: 14px !important;
        height: 14px !important;
        margin-right: 6px !important;
    }

    .ew-loader,
    .ew-section-loader {
        padding: 10px 14px !important;
        font-size: 12px !important;
        min-width: 90px !important;
    }
}

/* ==============================================
   ACCESSIBILITÉ
============================================== */
@media (prefers-reduced-motion: reduce) {
    .ew-spinner {
        animation: none !important;
        border-top-color: #ff6b6b !important;
        border-right-color: #ff6b6b !important;
        opacity: 0.8 !important;
    }

    .ew-cart-item,
    .ew-section,
    .ew-total-amount,
    .ew-cart-count {
        transition: none !important;
        transform: none !important;
    }

    .ew-cart-item.ew-updating {
        opacity: 0.6 !important;
        transform: none !important;
    }

    .ew-cart-item.ew-updating::after {
        display: none !important;
    }

    .ew-loader::before,
    .ew-section-loader::before {
        content: "⟳ " !important;
        margin-right: 4px !important;
    }
}

/* ==============================================
   ÉTATS D'ERREUR ET DE SUCCÈS
============================================== */
.ew-cart-item.ew-error {
    background: rgba(231, 76, 60, 0.1) !important;
    border: 1px solid rgba(231, 76, 60, 0.3) !important;
    border-radius: 6px !important;
}

.ew-cart-item.ew-success {
    background: rgba(0, 168, 89, 0.1) !important;
    border: 1px solid rgba(0, 168, 89, 0.3) !important;
    border-radius: 6px !important;
}

/* ==============================================
   SPINNERS SPÉCIALISÉS
============================================== */
.ew-spinner-button {
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
    margin: 0 4px 0 0 !important;
}

.ew-spinner-section {
    width: 24px !important;
    height: 24px !important;
    border-width: 3px !important;
    margin: 0 !important;
}

.ew-spinner-cart {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
    margin: 0 !important;
}

/* ==============================================
   CONTENEURS AVEC HAUTEUR FIXE
============================================== */
.ew-cart-items-container {
    min-height: 200px !important;
    position: relative !important;
}

.ew-cart-items-container.ew-loading {
    min-height: 200px !important;
}

/* ==============================================
   SURCHARGE DE SÉCURITÉ
============================================== */
* .ew-spinner {
    animation: ew-simple-spin 1s linear infinite !important;
}

*[class*="ew-spinner"] {
    animation: ew-simple-spin 1s linear infinite !important;
}

/* Force l'animation même si d'autres CSS interferent */
.ew-checkout-container .ew-spinner,
.ew-checkout-container *[class*="spinner"] {
    animation: ew-force-spin 1s linear infinite !important;
}

/* ==============================================
   DEBUG ET DÉVELOPPEMENT
============================================== */
.ew-debug-spinner {
    border: 2px solid red !important;
    border-top: 2px solid blue !important;
    animation: ew-emergency-spin 0.5s linear infinite !important;
}

/* Indicateur visuel temporaire pour debugging */
.ew-spinner::before {
    /* Peut être utilisé pour debug si nécessaire */
}

/* ==============================================
   FALLBACKS ET COMPATIBILITÉ
============================================== */

/* Si l'animation CSS ne fonctionne pas, au moins avoir un indicateur visuel */
@supports not (animation: ew-simple-spin 1s linear infinite) {
    .ew-spinner {
        border-top-color: #ff6b6b !important;
        border-right-color: #ff6b6b !important;
        transform: rotate(45deg) !important;
    }
}

/* Support pour les anciens navigateurs */
.no-cssanimations .ew-spinner {
    border-top-color: #ff6b6b !important;
    border-right-color: #ff6b6b !important;
    opacity: 0.8 !important;
}

/* ==============================================
   STYLES DE PRIORITÉ MAXIMALE
============================================== */
html .ew-checkout-container .ew-spinner,
body .ew-checkout-container .ew-spinner {
    animation: ew-force-spin 1s linear infinite !important;
    display: inline-block !important;
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid #CBB390 !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
}

/* Cette règle devrait toujours fonctionner */
[class*="ew-spinner"] {
    animation: ew-simple-spin 1s linear infinite !important;
}