/* ═══════════════════════════════════════════════════════
   Auto-Refresh Animations — v2.2
   Aggiungi come <link> separato in index.html
   ═══════════════════════════════════════════════════════ */

/* ─── Row Flash: lampeggio dell'intera riga prodotto ─── */
@keyframes rowFlashUp {
    0%   { background-color: transparent; }
    8%   { background-color: rgba(34, 197, 94, 0.28); box-shadow: inset 3px 0 0 0 #22c55e; }
    40%  { background-color: rgba(34, 197, 94, 0.12); box-shadow: inset 3px 0 0 0 rgba(34, 197, 94, 0.5); }
    100% { background-color: transparent; box-shadow: none; }
}

@keyframes rowFlashDown {
    0%   { background-color: transparent; }
    8%   { background-color: rgba(239, 68, 68, 0.28); box-shadow: inset 3px 0 0 0 #ef4444; }
    40%  { background-color: rgba(239, 68, 68, 0.12); box-shadow: inset 3px 0 0 0 rgba(239, 68, 68, 0.5); }
    100% { background-color: transparent; box-shadow: none; }
}

.product-item.row-flash-up {
    animation: rowFlashUp 1.5s ease-out;
    z-index: 1;
}

.product-item.row-flash-down {
    animation: rowFlashDown 1.5s ease-out;
    z-index: 1;
}

/* ─── Status pill: pulse verde dopo refresh ─── */
@keyframes refreshPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50%  { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.status-pill.just-refreshed {
    animation: refreshPulse 1.5s ease-out;
}

/* ─── Wrapper per prezzo + variazione nella sidebar ─── */
.prod-values {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ─── Transition smooth per i valori che cambiano ─── */
.prod-price,
.prod-change,
#detailPrice,
#detailChange,
#thCurrent {
    transition: color 0.3s ease;
}