/* ====================================================================
   LICENCETAXI.FR — Baromètre de prix (badges + bloc live)
   ==================================================================== */


/* ============== BADGE SUR CARDS D'ANNONCES ============== */

/* Wrapper prix + badge sur la même ligne */
.annonce-card-prix-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}

.annonce-card-prix {
  margin-bottom: 0 !important;
  flex: 1 !important;
}

/* Badge baromètre (compact pour cards) */
.baro-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  flex-shrink: 0 !important;
  border: 1.5px solid !important;
}

/* 3 niveaux : 3 styles distincts */
.baro-badge.baro-bonne_affaire {
  background: rgba(16, 185, 129, 0.10) !important;
  color: #047857 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.baro-badge.baro-correct {
  background: rgba(10, 10, 10, 0.05) !important;
  color: #0a0a0a !important;
  border-color: rgba(10, 10, 10, 0.15) !important;
}

.baro-badge.baro-eleve {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #b91c1c !important;
  border-color: rgba(220, 38, 38, 0.30) !important;
}

.baro-badge svg {
  flex-shrink: 0 !important;
}

.baro-label {
  font-weight: 700 !important;
}


/* ============== BLOC LIVE sur deposer-annonce.php ============== */

.baro-live-block {
  margin-top: 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: #fdfaf3 !important;
  border-left: 4px solid #ddd !important;
  display: none !important; /* caché par défaut, JS l'affiche */
  animation: baro-live-in 0.3s ease-out !important;
}

@keyframes baro-live-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.baro-live-block.visible {
  display: block !important;
}

/* Couleurs par niveau */
.baro-live-block.baro-level-bonne_affaire {
  background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.03) 100%) !important;
  border-left-color: #10b981 !important;
}

.baro-live-block.baro-level-correct {
  background: linear-gradient(135deg, rgba(10,10,10,0.04) 0%, rgba(10,10,10,0.02) 100%) !important;
  border-left-color: #0a0a0a !important;
}

.baro-live-block.baro-level-eleve {
  background: linear-gradient(135deg, rgba(220,38,38,0.07) 0%, rgba(220,38,38,0.03) 100%) !important;
  border-left-color: #dc2626 !important;
}

.baro-live-block.baro-level-error,
.baro-live-block.baro-level-no-data {
  background: rgba(10,10,10,0.03) !important;
  border-left-color: #999 !important;
}

/* Header avec label + écart */
.baro-live-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}

.baro-live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

.baro-live-block.baro-level-bonne_affaire .baro-live-label {
  color: #047857 !important;
}

.baro-live-block.baro-level-correct .baro-live-label {
  color: #0a0a0a !important;
}

.baro-live-block.baro-level-eleve .baro-live-label {
  color: #b91c1c !important;
}

.baro-live-ecart {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  background: rgba(255,255,255,0.6) !important;
  border-radius: 100px !important;
  color: #555 !important;
}

/* Message d'aide */
.baro-live-message {
  font-size: 13px !important;
  color: #444 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Détails comparaison */
.baro-live-details {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(10,10,10,0.06) !important;
}

@media (max-width: 480px) {
  .baro-live-details { grid-template-columns: 1fr !important; }
}

.baro-live-detail {
  font-size: 11px !important;
  color: #666 !important;
}

.baro-live-detail strong {
  color: #0a0a0a !important;
  font-weight: 700 !important;
}

/* Loader pendant le calcul */
.baro-live-loading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #999 !important;
}

.baro-live-loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(10,10,10,0.15);
  border-top-color: #0a0a0a;
  border-radius: 50%;
  animation: baro-spin 0.6s linear infinite;
}

@keyframes baro-spin {
  to { transform: rotate(360deg); }
}


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

@media (max-width: 480px) {
  .baro-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  .baro-badge svg {
    width: 9px !important;
    height: 9px !important;
  }
  /* Sur très petit écran, on retourne à une ligne par-dessus l'autre */
  .annonce-card-prix-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}