/* Styles pour les prix d'or avec mise à jour automatique */

/* ========================================
   PRIX D'OR INDIVIDUELS
   ======================================== */

.max-gold-price {
    display: inline-block;
    font-family: var(--max-font-primary, "Noto Serif", serif);
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

/* Animation de mise à jour */
.max-gold-price-updating {
    opacity: 0.7;
    transform: scale(0.98);
}

.max-gold-price-updating::after {
    content: "⟳";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    animation: spin 1s linear infinite;
    font-size: 0.8em;
    color: var(--max-primary-gold, #ffd700);
}

/* Animation de mise à jour réussie */
.max-gold-price-updated {
    animation: priceUpdate 0.6s ease-out;
    background: linear-gradient(135deg,
        #f7e7b7 0%,
        #f0d592 18%,
        #d9b76a 32%,
        #b99149 46%,
        #e6c16a 60%,
        #f2de9a 76%,
        #c39a4b 88%,
        #8d6a2a 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) 
            drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}

/* Animation de rotation pour l'icône de chargement */
@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Animation de mise à jour du prix */
@keyframes priceUpdate {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)) 
                drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) 
                drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
    }
}

/* ========================================
   GESTION DES ERREURS
   ======================================== */

.max-gold-price-error {
    color: #ff4757;
    font-style: italic;
    opacity: 0.8;
}

/* ========================================
   VARIATIONS DE STYLE
   ======================================== */

/* Style pour les prix en mode "highlight" */
.max-gold-price.highlight {
    background: linear-gradient(135deg,
        #f7e7b7 0%,
        #f0d592 18%,
        #d9b76a 32%,
        #b99149 46%,
        #e6c16a 60%,
        #f2de9a 76%,
        #c39a4b 88%,
        #8d6a2a 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) 
            drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
    font-weight: 700;
    font-size: 1.1em;
}

/* Style pour les prix en mode "minimal" */
.max-gold-price.minimal {
    color: #666;
    font-weight: 400;
    font-size: 0.9em;
}

/* Style pour les prix en mode "large" */
.max-gold-price.large {
    font-size: 1.5em;
    font-weight: 700;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .max-gold-price {
        font-size: 0.9em;
    }
    
    .max-gold-price-updating::after {
        right: -15px;
        font-size: 0.7em;
    }
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

/* Réduire les animations pour les utilisateurs qui préfèrent moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    .max-gold-price {
        transition: none;
    }
    
    .max-gold-price-updating::after {
        animation: none;
    }
    
    .max-gold-price-updated {
        animation: none;
    }
}

/* ========================================
   MODE SOMBRE
   ======================================== */

@media (prefers-color-scheme: dark) {
    .max-gold-price-error {
        color: #ff6b6b;
    }
    
    .max-gold-price.minimal {
        color: #ccc;
    }
}