/* ── mod-price-index ─────────────────────────────────────── */
.vdm-price-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  margin: 3px 0 4px; width: fit-content;
  line-height: 1.6; letter-spacing: .01em;
}
.vdm-price-badge--low  { background: rgba(29,158,117,.12); color: #1a6b3a; }
.vdm-price-badge--high { background: rgba(255,100,50,.12);  color: #b33000; }
.vdm-price-badge--mid  { background: rgba(100,100,100,.08); color: #555;    }

.vdm-price-badge-pop {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  margin-bottom: 6px; width: fit-content;
}

/* ── Flèche animée (v2.20.1) — micro-bounce dans le sens du message ──
   « moins cher » ↓ rebondit vers le bas, « plus cher » ↑ vers le haut :
   l'animation RENFORCE le sens, elle n'est pas décorative. transform pur
   (GPU), amplitude 2px, une seule couche animée par badge. Le texte reste
   parfaitement figé et lisible. */
.vdm-price-arrow {
    display: inline-block;
    will-change: transform;
}

/* ── 4 animations pilotées par le widget (data-arrow-anim sur le wrap) ──
   La classe est posée sur .vdm-crs-wrap ; les flèches en héritent, donc
   zéro modif du JS de price-index. Défaut = bounce (comportement d'avant).
   Toutes transform/opacity pur (GPU), une seule couche animée par badge. */

/* Bounce — rebond dans le SENS du message (le défaut) */
.vdm-crs-wrap[data-arrow-anim="bounce"] .vdm-price-arrow--down,
.vdm-crs-wrap:not([data-arrow-anim]) .vdm-price-arrow--down { animation: vdm-arrow-down 1.8s ease-in-out infinite; }
.vdm-crs-wrap[data-arrow-anim="bounce"] .vdm-price-arrow--up,
.vdm-crs-wrap:not([data-arrow-anim]) .vdm-price-arrow--up   { animation: vdm-arrow-up   1.8s ease-in-out infinite; }
@keyframes vdm-arrow-down { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes vdm-arrow-up   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* Pulse — la flèche pulse (scale) */
.vdm-crs-wrap[data-arrow-anim="pulse"] .vdm-price-arrow { animation: vdm-arrow-pulse 1.6s ease-in-out infinite; }
@keyframes vdm-arrow-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.28); } }

/* Fade — apparition douce en boucle (opacity) */
.vdm-crs-wrap[data-arrow-anim="fade"] .vdm-price-arrow { animation: vdm-arrow-fade 1.8s ease-in-out infinite; }
@keyframes vdm-arrow-fade { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Aucune (data-arrow-anim="none") : rien à déclarer, aucune règle ne matche. */

/* Sécurité perf : tout coupé sur mobile (rien qui tourne pendant le scroll). */
@media (max-width: 600px) {
    .vdm-crs-wrap .vdm-price-arrow { animation: none !important; }
}
/* Cohérence perf v2.19 : card hors écran → flèche en pause. Pur CSS. */
.vdm-off-screen .vdm-price-arrow { animation-play-state: paused !important; }

/* Accessibilité. */
@media (prefers-reduced-motion: reduce) {
    .vdm-crs-wrap .vdm-price-arrow { animation: none !important; }
}

/* ── Fallback bounce pour les contextes SANS widget de réglage ──────
   Grille Nearby (.vdm-nb-grid) et cards SXC (.sxc-card) n'ont pas le
   panneau Elementor du carrousel : elles gardent le bounce par défaut.
   Le carrousel Vandeto, lui, est piloté par data-arrow-anim ci-dessus. */
.vdm-nb-grid .vdm-price-arrow--down,
.sxc-card    .vdm-price-arrow--down { animation: vdm-arrow-down 1.8s ease-in-out infinite; }
.vdm-nb-grid .vdm-price-arrow--up,
.sxc-card    .vdm-price-arrow--up   { animation: vdm-arrow-up   1.8s ease-in-out infinite; }
@media (max-width: 600px) {
    .vdm-nb-grid .vdm-price-arrow, .sxc-card .vdm-price-arrow { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .vdm-nb-grid .vdm-price-arrow, .sxc-card .vdm-price-arrow { animation: none !important; }
}