/* ==========================================================================
   LIVE PRICES BAR ANIMATIONS - Dark Background Optimized
   ========================================================================== */

/* Price bar elements - only apply to elements within live-prices-bar */
.live-prices-bar .gbpm-price-display {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

/* Animations for the live prices bar elements only */
.live-prices-bar .gbpm-price-display.price-up {
    animation: priceBarUpAnimation 4s ease-out !important;
}

.live-prices-bar .gbpm-price-display.price-down {
    animation: priceBarDownAnimation 4s ease-out !important;
}

/* Generic price animations for archive/shop pages (white backgrounds) */
/* Ensure visibility and theme-override safety (do NOT change spacing) */
.price-up,
.price-down {
    display: inline-block;
    border-radius: 3px;
}
.price-up { animation: gbpm-generic-flash-green 4s ease-out !important; }
.price-down { animation: gbpm-generic-flash-red 4s ease-out !important; }

@keyframes gbpm-generic-flash-green {
    0% { background-color: rgba(76, 175, 80, 0.3); }
    25% { background-color: rgba(76, 175, 80, 0.3); }
    100% { background-color: transparent; }
}

@keyframes gbpm-generic-flash-red {
    0% { background-color: rgba(244, 67, 54, 0.3); }
    25% { background-color: rgba(244, 67, 54, 0.3); }
    100% { background-color: transparent; }
}

/* Dark background optimized animations with brighter colors */
@keyframes priceBarUpAnimation {
    0% { background-color: transparent; }
    50% { background-color: rgba(88, 207, 92, 0.7); } /* Brighter Green with 70% opacity */
    100% { background-color: transparent; }
}

@keyframes priceBarDownAnimation {
    0% { background-color: transparent; }
    50% { background-color: rgba(250, 62, 49, 0.7); } /* Brighter Red with 70% opacity */
    100% { background-color: transparent; }
}