/* Styles spécifiques pour l'affichage frontend des produits personnalisables */

/* Styles pour les étiquettes de sélection */
.current-color-selection,
.current-size-selection {
  display: inline-block !important;
  padding: 6px 12px !important;
  margin: 10px 0 !important;
  background-color: #f5f5f5 !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  border-left: 3px solid #000 !important;
  transition: all 0.3s ease !important;
  font-size: 14px !important;
  color: #333 !important;
  min-width: 120px !important;
}

/* Animation de mise à jour */
@keyframes pulse-selection {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background-color: #e0e0e0; }
  100% { transform: scale(1); }
}

.selection-updated {
  animation: pulse-selection 0.8s ease;
}

/* Améliorer l'apparence des cercles de couleur */
.color-swatch {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease !important;
}

.color-swatch:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.2) !important;
}

.color-swatch.active {
  transform: scale(1.2) !important;
  box-shadow: 0 0 0 3px #000 !important;
  z-index: 10 !important;
}

/* Améliorer l'apparence des boutons de taille */
.size-option {
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.size-option:hover {
  background-color: #f0f0f0 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.15) !important;
}

.size-option.selected {
  background-color: #000 !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
  font-weight: 700 !important;
}

/* Style pour le nom de la couleur sous le cercle sélectionné */
.color-swatches {
  margin-bottom: 30px !important;
}

.color-swatch.active::before {
  content: attr(title) !important;
  position: absolute !important;
  bottom: -25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #000 !important;
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  font-weight: bold !important;
}

/* Ajouter une transition douce pour les changements de couleur */
.color-swatch, .size-option {
  will-change: transform, box-shadow !important;
}

/* Améliorer la lisibilité sur mobile */
@media (max-width: 768px) {
  .color-swatches {
    justify-content: center !important;
  }
  
  .size-options {
    justify-content: center !important;
  }
  
  .current-color-selection,
  .current-size-selection {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* Styles pour les cercles de couleur spécifiques */
.color-swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 10px !important;
  position: relative !important;
  padding-bottom: 30px !important;
}

.color-swatch {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

/* Style pour les options de taille */
.size-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.size-option {
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  border: 1px solid #ccc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  background-color: white !important;
}

/* Animation pour les erreurs */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.shake-animation {
  animation: shake 0.5s ease-in-out;
}

/* Messages d'erreur */
.woocommerce-error {
  color: #721c24 !important;
  background-color: #f8d7da !important;
  padding: 10px !important;
  margin-bottom: 20px !important;
  border-radius: 5px !important;
  border-left: 4px solid #dc3545 !important;
}