/* 📄 /assets/css/components.css */

/* ✅ Cartes Produits : Design Marché (Style de base pour .product-card) */
.product-card {
    background: var(--background-soft); /* Fond doux de la carte */
    border-radius: 16px; /* Coins arrondis cohérents avec le thème */
    box-shadow: var(--shadow); /* Ombre par défaut de la carte */
    overflow: hidden; /* Assure que le contenu ne dépasse pas les bords arrondis */
    display: flex; /* Active Flexbox pour la disposition interne */
    flex-direction: column; /* Empile les éléments verticalement (image, corps, barre d'actions) */
    position: relative; /* TRÈS IMPORTANT : Nécessaire pour positionner les badges et boutons flottants */
    /* Transitions douces pour les effets de survol */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    border: 1px solid transparent; /* Bordure transparente par défaut pour un effet au survol */
}

.product-card:hover {
    transform: translateY(var(--card-hover-lift-product, -4px)); /* Soulèvement subtil de la carte au survol */
    box-shadow: var(--product-card-hover-shadow); /* Ombre légèrement plus prononcée et plus douce au survol */
    border-color: var(--border-color); /* Bordure discrète qui apparaît/s'assombrit au survol */
}

/* Lien de l'image (NE DOIT PAS ÊTRE POSITIONNÉ EN ABSOLU) */
.product-card > .product-image-link { /* Cible le lien direct enfant de .product-card */
    display: block; /* Prend toute la largeur disponible dans le flux */
    text-decoration: none; /* Pas de soulignement par défaut */
    color: inherit; /* Hérite la couleur du texte */
    /* RETIRÉ : position: absolute; top; left; width; height; z-index; */
    /* Ces propriétés le sortaient du flux et causaient le problème */
}

.product-image-container { /* Conteneur pour l'image principale du produit */
    /* RETIRÉ : position: relative; car ce n'est plus nécessaire si l'overlay est dans le flux */
    width: 100%;
    aspect-ratio: 1/1; /* Force l'image à être carrée */
    background: var(--background); /* Fond pour l'espace vide autour de l'image (si elle n'est pas pleine) */
    display: flex; /* Utilise Flexbox pour centrer l'image à l'intérieur */
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* Petit padding pour que l'image ne colle pas aux bords */
    border-bottom: 1px solid var(--border-color); /* Bordure légère sous l'image pour une séparation visuelle */
    flex-shrink: 0; /* Empêche ce conteneur de rétrécir si le contenu est trop grand */
}


.product-image { /* Image du produit elle-même (utilisée pour 'display_image' souvent) */
    max-width: 95%; /* L'image est légèrement plus petite que son conteneur pour un effet visuel */
    max-height: 95%; /* S'ajuste si le conteneur est plus petit */
    object-fit: contain; /* L'image s'ajuste à l'intérieur du conteneur sans être coupée */
    border-radius: 8px; /* Coins légèrement arrondis pour l'image */
}

/* Règle générale pour les images DANS les cartes produit (à supprimer si non utilisée) */
.product-card img:not(.product-image) { /* Cible les images qui ne sont pas l'image principale */
    width: 100%;
    height: 200px; /* Exemple de hauteur, ajustez si besoin */
    object-fit: cover;
}


.product-card .product-info { /* Contenu principal de la carte produit (titre, prix, avis, infos marchand) */
    padding: 1.25rem; /* Padding suffisant pour une bonne aération autour du contenu */
    display: flex; /* Active Flexbox pour empiler les éléments */
    flex-direction: column; /* Empile les éléments verticalement */
    gap: 0.5rem; /* Espacement par défaut entre les éléments du corps de la carte */
    flex-grow: 1; /* Permet au corps de prendre tout l'espace restant verticalement dans la carte */
    /* PAS de positionnement absolu ou z-index bas, il est dans le flux normal */
}

.product-card .product-title {
    font-size: 1.15rem; /* Taille de police légèrement augmentée pour le titre du produit */
    font-weight: 600; /* Poids de police semi-gras */
    color: var(--text-main); /* Couleur principale du texte pour le titre */
    line-height: 1.4; /* Hauteur de ligne pour une meilleure lisibilité */
    margin-bottom: 0.5rem; /* Marge inférieure augmentée pour mieux séparer du bloc prix */

    /* --- AJOUTS CRUCIAUX POUR TRONQUER LE TITRE --- */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute des points de suspension (...) si le texte est coupé */
    display: -webkit-box; /* Nécessaire pour la troncature multiligne */
    -webkit-line-clamp: 2; /* Limite le texte à 2 lignes (ajustez ce nombre si vous voulez plus ou moins de lignes) */
    -webkit-box-orient: vertical; /* Nécessaire avec -webkit-line-clamp */
    white-space: normal; /* S'assure que le texte peut se casser sur plusieurs lignes */
}

/* --- AMÉLIORATION DIFFÉRENCIATION DES PRIX --- */
.product-card .product-pricing {
    display: flex; /* Active Flexbox pour aligner les prix côte à côte */
    align-items: baseline; /* Aligne les prix sur la ligne de base (partie inférieure du texte) */
    gap: 0.5rem; /* Espacement entre le prix actuel et le prix barré */
    flex-wrap: wrap; /* Permet aux prix de passer à la ligne sur mobile si l'espace est insuffisant */
    font-weight: bold; /* Le prix principal est en gras */
}

/* Style du prix actuel (le plus important, souvent le prix promo) */
.product-card .product-pricing .current-price {
    font-size: 1.3rem; /* Grande taille pour le prix actuel/promo pour le mettre en valeur */
    color: var(--primary); /* Couleur primaire pour le prix le plus important */
}

/* Style du prix de base (barré) */
.product-card .product-pricing .base-price {
    text-decoration: line-through; /* Applique une ligne barrée sur le prix de base */
    font-size: 0.95rem; /* Petite taille pour le prix de base barré */
    color: var(--text-muted); /* Couleur estompée pour le prix ancien */
    font-weight: normal; /* Poids de police normal pour le prix de base */
}

.product-card .product-promo { /* Si c'est un texte de promotion séparé */
    color: var(--product-promo-color); /* Utilisation de la variable pour les promotions */
    font-weight: bold;
    font-size: 0.95rem;
}

.product-card .badges, /* Conteneur général pour les badges */
.product-card .rating, /* Conteneur pour les étoiles d'évaluation */
.product-card .merchant-info { /* Conteneur pour les informations du marchand */
    font-size: 0.8rem; /* Taille de police légèrement réduite pour les informations secondaires */
    color: var(--text-muted); /* Couleur de texte estompée */
}

/* ⭐ Badges Produit (éléments flottants sur la carte) */
.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espacement vertical entre les badges */
    z-index: 901; /* TRÈS HAUT : S'assure que les badges sont au-dessus de tout */
    pointer-events: none; /* Le conteneur lui-même n'est pas cliquable */
}
/* Les badges individuels sont cliquables s'ils ont des actions (normalement non) */
.product-badges .badge {
    pointer-events: auto; /* Permet les clics sur les badges (si un badge a une action) */
    padding: 4px 8px;
    font-size: 0.7rem;
    border-radius: 8px;
    font-weight: bold;
    color: white; /* Couleur du texte par default pour les badges colorés */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombre légère pour les badges */
}

/* Attribution des couleurs distinctes aux badges */
.badge-new { background: var(--badge-new-bg); } /* Badge "Nouveau" (ex: bleu primaire) */
.badge-promo { background: var(--badge-promo-bg); } /* Badge "Promo" (ex: vert secondaire) */
.badge-out-of-stock { /* Badge "Épuisé" (corrigé la classe, était badge-stock) */
    background: var(--badge-sold-out-bg); /* Utilisation de la variable pour le badge "Épuisé" (ex: gris muted) */
}


/* ⭐ Notation Étoiles */
.rating.stars {
    font-size: 0.95rem; /* Taille légèrement ajustée pour les étoiles */
    color: var(--accent); /* Couleur des étoiles (jaune accent) */
}

.rating.stars .review-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 0.25rem; /* Petit espace à gauche du nombre d'avis */
}

/* ❤️ Like / ⭐ Favori : Boutons Flottants sur la carte */
.product-actions-float {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espacement réduit pour une meilleure compacité */
    z-index: 900; /* TRÈS HAUT : S'assure qu'ils sont au-dessus de tout sauf des badges */
    pointer-events: none; /* Le conteneur lui-même n'est pas cliquable */
}

/* Style de base des boutons Like/Favoris */
.like-btn,
.favorite-btn {
    background: var(--background-soft); /* Fond doux et neutre du bouton */
    border-radius: 50%; /* Bouton rond */
    width: 36px; /* Taille du bouton */
    height: 36px;
    font-size: 1.1rem; /* Taille de l'icône à l'intérieur */
    color: var(--text-muted); /* Couleur par default de l'icône (gris neutre) */
    border: 1px solid var(--border-color); /* Bordure discrète */
    display: flex; /* Flexbox pour centrer l'icône */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease; /* Transition douce pour les effets */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Ombre légère */
    pointer-events: auto; /* TRÈS IMPORTANT : Permet les clics sur les boutons individuels */
}

/* Style au survol des boutons Like/Favoris (quand non encore aimés/favoris) */
.like-btn:hover,
.favorite-btn:hover {
    background: var(--primary); /* Fond primaire au survol */
    color: white; /* Icône blanche au survol */
    transform: scale(1.1); /* Agrandissement subtil */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée au survol */
}

/* Style quand le produit est "aimé" */
.like-btn.liked {
    background: transparent; /* Fond transparent (comme demandé) */
    border-color: transparent; /* Bordure transparente (comme demandé) */
    color: var(--icon-liked-color); /* Couleur du coeur (rouge) */
}
/* Style quand le produit est "en favori" */
.favorite-btn.favorited {
    background: transparent; /* Fond transparent (comme demandé) */
    border-color: transparent; /* Bordure transparente (comme demandé) */
    color: var(--icon-favorited-color); /* Couleur de l'étoile (jaune) */
}

/* Au survol d'un bouton déjà aimé/favori (garde la couleur active sans fond) */
.like-btn.liked:hover {
    background: rgba(var(--icon-liked-color-rgb), 0.1); /* Légère opacité de fond */
    border-color: var(--icon-liked-color); /* Bordure colorée */
    color: var(--icon-liked-color); /* Icône reste colorée */
    transform: scale(1.1);
    box-shadow: none;
}
.favorite-btn.favorited:hover {
    background: rgba(var(--icon-favorited-color-rgb), 0.1); /* Légère opacité de fond */
    border-color: var(--icon-favorited-color); /* Bordure colorée */
    color: var(--icon-favorited-color); /* Icône reste colorée */
    transform: scale(1.1);
    box-shadow: none;
}

.like-btn .count,
.favorite-btn .count {
    font-size: 0.7rem;
    font-weight: bold;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.like-btn:hover .count,
.favorite-btn:hover .count {
    transform: scale(1.1);
}

/* 🌙 Dark Mode pour les boutons flottants */
.dark-theme .like-btn,
.dark-theme .favorite-btn {
    background: var(--background); /* Fond plus sombre en mode sombre */
    border-color: var(--border-color);
    color: var(--text-main); /* Texte principal en mode sombre */
}
/* Style pour les boutons aimés/favoris en mode sombre */
.dark-theme .like-btn.liked {
    background: transparent;
    border-color: transparent;
    color: var(--icon-liked-color); /* Utilise la variable dark mode */
}
.dark-theme .favorite-btn.favorited {
    background: transparent;
    border-color: transparent;
    color: var(--icon-favorited-color); /* Utilise la variable dark mode */
}
/* Survol des boutons aimés/favoris en mode sombre */
.dark-theme .like-btn.liked:hover {
    background: rgba(var(--icon-liked-color-rgb), 0.1);
    border-color: var(--icon-liked-color);
    color: var(--icon-liked-color);
}
.dark-theme .favorite-btn.favorited:hover {
    background: rgba(var(--icon-favorited-color-rgb), 0.1);
    border-color: var(--icon-favorited-color);
    color: var(--icon-favorited-color);
}


/* 🛍️ Barre d'Actions Produit (en bas de carte) */
.product-actions-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    z-index: 3; /* Un z-index supérieur à l'overlay de lien, mais inférieur aux boutons flottants */
    pointer-events: auto; /* Assure que la barre est cliquable */
}

.icon-button { /* Boutons avec icône (panier, etc.) */
    background: transparent; /* Fond transparent par défaut (comme demandé) */
    color: var(--text-muted); /* Couleur d'icône neutre (gris) */
    border: none;
    font-size: 1.1rem;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto; /* Assure que le bouton est cliquable */
}

.icon-button:hover {
    background: var(--icon-button-hover-bg); /* Fond primaire au survol (variable pour flexibilité) */
    color: var(--icon-button-hover-color); /* Texte blanc au survol (variable pour flexibilité) */
    transform: scale(1.02);
}

.icon-button:disabled {
    background: var(--border-color);
    color: white;
    cursor: not-allowed;
    pointer-events: none; /* Les boutons désactivés ne doivent pas être cliquables */
}

/* ✅ Carte Boutique (Style de base pour .store-card) */
.store-card-wrapper {
    padding: 0.5rem;
}

.store-card {
    background: var(--background-soft);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid transparent;
}

.store-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover-default);
    border-color: var(--border-color);
}

.store-card .store-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.store-card .store-logo img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    object-fit: cover;
}

.store-card .store-meta h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-main);
}

.store-card .store-meta p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.store-card .store-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.follow-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.follow-btn:hover {
    background: var(--secondary);
    transform: scale(1.02);
}

.follow-btn.following {
    background: var(--secondary);
}

/* --- BOUTON CONTACT (SOUS CARTE BOUTIQUE) --- */
.contact-toggle { /* Style du bouton "Contacter" (sous la carte boutique) */
    background: transparent; /* Fond transparent par défaut (comme demandé) */
    color: var(--primary); /* Couleur primaire pour le texte/icône */
    border: 1px solid var(--primary); /* Bordure de la couleur primaire */
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-toggle:hover {
    background: var(--primary); /* Fond primaire au survol */
    color: white; /* Texte blanc au survol */
    transform: scale(1.02);
}

.store-card .store-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    height: 100px;
    overflow: hidden;
}

.store-card .store-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}