/* Slider avant/après côte à côte */


.beforeafter-slider  .add2cart {
  position: relative;
  text-align: center;
  bottom: 5px;
  margin: 20px auto 10px auto;
  width: 100%;
}



.slick-slide
{ border: 2px solid #ddd;  
 margin :5px
}
.beforeafter-comparison {
    display: flex;
    margin: 0px 10px 15px 10px;

    padding: 5px;
    background: #f9f9f9;
}

.beforeafter-comparison .before-image,
.beforeafter-comparison .after-image {
    width: 46%;
    height: auto;
    object-fit: cover;
    margin : 2%
    
}

/* Bouton "Utile" */
.beforeafter-vote {
    text-align: center;
    margin: 10px 0;
}

.helpful-btn {
    padding: 5px 15px;
    font-size: 14px;
}

/* Liste des produits */
.beforeafter-products {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.beforeafter-products .product-item {
    display: flex;
    width: calc(50% - 15px);
    border: 1px solid #eee;
    padding: 10px;
    background: #fff;
    width: 100%;
}

.beforeafter-products .product-info {
    margin-left: 10px;
}

.beforeafter-products .product-info h4 {
    font-size: 14px;
    margin: 0 0 5px 0;
}

.beforeafter-products .price {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.beforeafter-products .add-to-cart {
    padding: 3px 8px;
    font-size: 12px;
}


.products-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.products-horizontal img {
    width:60%;
}

.products-horizontal {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-evenly;
    align-content: center;
}

.products-horizontal .product-item a, .products-horizontal .product-item {
	text-align: -webkit-center;
}


/**
 * Styles pour la section de vote du module BeforeAfter
 */
 
 .ba-vote-section-text {
    margin: 0px 15px 0px 15px; 
} 

.ba-vote-section {
    margin: 15px; /* Espace au-dessus de la section de vote */
     /* Espace intérieur haut */

    display: flex; /* Utiliser flexbox pour aligner les éléments */
    align-items: center; /* Centrer verticalement les éléments */
    flex-wrap: wrap; /* Permettre le retour à la ligne si l'espace manque */
    gap: 8px; /* Espace entre les éléments (bouton, compteur, texte) */
}

/* Style de base du bouton Like */
.ba-like-button {
    /* Utilise les styles .btn.btn-default de Prestashop/Bootstrap */
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; /* Transitions douces */
}

/* Style de l'icône dans le bouton */
.ba-like-button i {
    margin-right: 5px; /* Espace entre l'icône et le texte "Like" */
}

/* Style du bouton pendant le traitement AJAX */
.ba-like-button.processing {
    cursor: wait; /* Curseur d'attente */
    opacity: 0.7; /* Rendre légèrement transparent */
}
/* Icone spinner (FontAwesome est inclus dans PS 1.6) */
.ba-like-button.processing i.icon-spinner {
    /* L'animation .icon-spin est gérée par FontAwesome */
}


/* Style du bouton lorsqu'il est désactivé (déjà voté) */
.ba-like-button.voted,
.ba-like-button:disabled { /* Cible aussi l'état disabled initial */
    background-color: #5cb85c; /* Vert succès */
    border-color: #4cae4c;
    color: #fff; /* Texte blanc */
    opacity: 0.8; /* Légèrement transparent pour indiquer l'inactivité */
    cursor: default; /* Curseur par défaut (non cliquable) */
}

/* Empêcher le changement de style au survol quand déjà voté/désactivé */
.ba-like-button.voted:hover,
.ba-like-button:disabled:hover {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
}

/* Style de l'icône Check quand voté */
.ba-like-button.voted i.icon-check {
     color: #fff; /* Assurer que l'icône est visible sur fond vert */
}

/* Style du compteur de likes */
.ba-like-count {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
}

/* Style du libellé "Likes" */
.ba-like-label {
    font-size: 0.9em;
    color: #777;
}

/* Style du message "Voted today" (si affiché) */
.ba-already-voted-msg {
    font-size: 0.85em;
    color: #5cb85c; /* Vert, pour correspondre au bouton voté */
    font-style: italic;
    margin-left: 5px; /* Petit espace supplémentaire */
}


/* Responsive */
@media (max-width: 768px) {
    .beforeafter-products .product-item {
        width: 100%;
    }
}