/**
 * MODULE PRODUCTCOMMENTS - AVIS PRODUITS
 * Design system NOVA IP - camera-videosurveillance.fr
 * 
 * PRINCIPE : Réutiliser au maximum les composants existants
 * - Boutons : classes existantes
 * - Inputs : styles form-elements.css
 * - Variables : variables.css
 * - Icônes : Lucide uniquement (migration TPL après)
 * 
 * Structure :
 * 1. Section "Note" (sous CTA produit)
 * 2. Étoiles Lucide (simple stylisation)
 * 3. Bloc commentaires (header + liste + footer)
 * 4. Item commentaire
 * 5. Footer (pagination + bouton)
 * 6. Modales (formulaire + confirmation)
 * 7. Responsive
 * 8. Quick View (notes dans modale)
 * 9. Product List Reviews (notes dans cards)
 * 10. Thumbnail Container (ajustements hauteurs)
 * 11. Overrides natifs PrestaShop
 */

/* ==========================================
   1. SECTION "NOTE" (sous CTA produit)
   ========================================== */

.product-comments-additional-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* Note moyenne + étoiles */
.product-comments-additional-info .comments-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.product-comments-additional-info .comments-note > span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
}

/* Liens (Lire avis + Donner avis) */
.product-comments-additional-info .additional-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.product-comments-additional-info .link-comment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.product-comments-additional-info .link-comment:hover {
  color: var(--mx-blue-600);
  text-decoration: none;
}

/* Icônes Lucide */
.product-comments-additional-info .link-comment svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* Masquer Material Icons temporairement */
.product-comments-additional-info .material-icons {
  display: none !important;
}

/* Séparateur entre liens */
.product-comments-additional-info .post-product-comment {
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-color);
}

/* ==========================================
   2. ÉTOILES LUCIDE (simple stylisation)
   ========================================== */

/* Container étoiles */
.grade-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Étoiles individuelles (Lucide) */
.grade-stars svg {
  width: 20px;
  height: 20px;
  color: var(--mx-orange-500);
  stroke-width: 2;
}

/* Étoiles vides */
.grade-stars svg:not([fill]) {
  fill: none;
  color: var(--mx-gray-300);
}

/* Étoiles pleines */
.grade-stars svg[fill="currentColor"] {
  fill: var(--mx-orange-500);
  color: var(--mx-orange-500);
}

/* Variante petites étoiles */
.small-stars svg {
  width: 16px;
  height: 16px;
}

/* Masquer ancien système étoiles PNG */
.grade-stars .star-content,
.grade-stars .star,
.grade-stars .star-on {
  display: none !important;
}

/* ==========================================
   3. BLOC COMMENTAIRES (header + liste + footer)
   ========================================== */

/* Wrapper global */
#product-comments-list-header,
#product-comments-list,
#product-comments-list-footer {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

#product-comments-list-header {
  margin-bottom: var(--space-4);
}

#product-comments-list-footer {
  margin-top: var(--space-4);
}

/* Header : titre + note */
#product-comments-list-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

#product-comments-list-header .comments-nb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
}

#product-comments-list-header .comments-nb svg {
  width: 24px;
  height: 24px;
  color: var(--mx-gray-700);
}

#product-comments-list-header .comments-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#product-comments-list-header .comments-note > span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
}

/* Empty state */
#empty-product-comment {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--mx-gray-50);
  border-radius: var(--radius-md);
}

/* ==========================================
   4. ITEM COMMENTAIRE
   ========================================== */

.product-comment-list-item {
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  background: var(--mx-gray-50);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .product-comment-list-item {
    grid-template-columns: 200px 1fr;
  }
}

/* Colonne gauche : infos */
.product-comment-list-item .comment-infos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-comment-list-item .comment-date,
.product-comment-list-item .comment-author {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
}

.product-comment-list-item .comment-author {
  font-weight: var(--fw-medium);
}

/* Colonne droite : contenu */
.product-comment-list-item .comment-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-comment-list-item .comment-content .h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  margin: 0;
}

.product-comment-list-item .comment-content p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--mx-gray-700);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Boutons like/dislike/report */
.product-comment-list-item .comment-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.product-comment-list-item .comment-buttons a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.product-comment-list-item .comment-buttons a:hover {
  color: var(--mx-blue-600);
}

.product-comment-list-item .comment-buttons svg {
  width: 16px;
  height: 16px;
}

/* ==========================================
   5. FOOTER (pagination + bouton)
   ========================================== */

#product-comments-list-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

/* Pagination */
#product-comments-list-pagination ul {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

#product-comments-list-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
  background: var(--mx-gray-100);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

#product-comments-list-pagination ul li span:hover {
  background: var(--mx-gray-200);
  color: var(--mx-gray-900);
}

#product-comments-list-pagination ul li.active span {
  background: var(--mx-blue-500);
  color: white;
  cursor: default;
}

#product-comments-list-pagination ul li.disabled span {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ==========================================
   6. MODALES (formulaire + confirmation)
   ========================================== */

/* Modal header */
.product-comment-modal .modal-header {
  border: none;
  padding: var(--space-8) var(--space-8) var(--space-4);
}

.product-comment-modal .modal-header .h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  margin: 0;
}

/* Modal body */
.product-comment-modal .modal-body {
  padding: var(--space-4) var(--space-8) var(--space-8);
}

/* Produit en en-tête */
.product-comment-modal .modal-product {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--mx-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.product-comment-modal .product-cover img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.product-comment-modal .product-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-900);
}

/* Note avec étoiles */
.product-comment-modal .criterion-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.product-comment-modal .criterion-rating label {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-900);
}

/* Étoiles cliquables */
.product-comment-modal .grade-stars svg {
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.product-comment-modal .grade-stars svg:hover {
  transform: scale(1.1);
}

/* Form groups - utilise form-elements.css existant */
.product-comment-modal .form-group {
  margin-bottom: var(--space-6);
}

.product-comment-modal label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-900);
}

.product-comment-modal .required {
  color: var(--mx-error);
  margin-left: var(--space-1);
}

/* Inputs et textarea - hérite de form-elements.css */
/* .product-comment-modal input[type="text"],
.product-comment-modal textarea {
  Styles définis dans form-elements.css
} */

/* Boutons modal */
.product-comment-modal .post-comment-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Utiliser les boutons existants du design system */
.product-comment-modal .btn-comment,
.btn-comment,
.btn-comment-inverse,
.post-product-comment {
  /* Override natif PrestaShop avec nos boutons */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: white;
  background: var(--mx-blue-600);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.product-comment-modal .btn-comment:hover,
.btn-comment:hover,
.post-product-comment:hover {
  background: var(--mx-blue-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.product-comment-modal .btn-comment-inverse,
.btn-comment-inverse {
  background: white;
  color: var(--mx-gray-700);
  border: 1px solid var(--border-color);
}

.product-comment-modal .btn-comment-inverse:hover,
.btn-comment-inverse:hover {
  background: var(--mx-gray-50);
  border-color: var(--mx-gray-400);
}

/* Icônes dans boutons */
.btn-comment svg,
.btn-comment-inverse svg,
.post-product-comment svg {
  width: 18px;
  height: 18px;
}

/* Modal confirmation (succès) */
.modal-header svg.icon-check-circle {
  width: 48px;
  height: 48px;
  color: var(--mx-success);
  margin-bottom: var(--space-4);
}

.modal-header svg.icon-alert-circle {
  width: 48px;
  height: 48px;
  color: var(--mx-error);
  margin-bottom: var(--space-4);
}

/* ==========================================
   7. RESPONSIVE
   ========================================== */

@media (max-width: 991px) {
  /* Section note */
  .product-comments-additional-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .product-comments-additional-info .post-product-comment {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-2);
  }
  
  /* Header commentaires */
  #product-comments-list-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Item commentaire */
  .product-comment-list-item {
    grid-template-columns: 1fr;
  }
  
  /* Footer */
  #product-comments-list-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  #product-comments-list-footer .post-product-comment {
    width: 100%;
  }
  
  /* Modal */
  .product-comment-modal .modal-dialog {
    margin: var(--space-4);
  }
  
  .product-comment-modal .modal-header,
  .product-comment-modal .modal-body {
    padding: var(--space-4);
  }
  
  .product-comment-modal .post-comment-buttons {
    flex-direction: column;
  }
  
  .product-comment-modal .post-comment-buttons button,
  .product-comment-modal .post-comment-buttons a {
    width: 100%;
  }
}

/* Mobile small */
@media (max-width: 640px) {
  #product-comments-list-header,
  #product-comments-list,
  #product-comments-list-footer {
    padding: var(--space-4);
  }
  
  .product-comment-list-item {
    padding: var(--space-4);
  }
  
  .product-comment-list-item .comment-buttons {
    flex-wrap: wrap;
  }
}

/* ==========================================
   8. QUICK VIEW - Notes dans modale
   ========================================== */

.product-quickview-review {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.product-quickview-review .grade-stars {
  margin: 0;
}

/* ==========================================
   9. PRODUCT LIST REVIEWS - Notes dans cards
   ========================================== */

/* Container notes dans cards produits (catégorie, homepage, upsell) */
.product-list-reviews {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--mx-gray-700);
}

.product-list-reviews .comments-nb {
  font-size: var(--fs-xs);
  color: var(--mx-gray-600);
}

/* ==========================================
   10. THUMBNAIL CONTAINER - Ajustements hauteurs cards
   ========================================== */

/* Note : Ces règles ajustent les hauteurs des cards produits 
   quand elles contiennent des avis. Nécessaire pour compatibilité. */

.thumbnail-container.has-reviews .highlighted-informations {
  min-height: auto;
}

/* ==========================================
   11. OVERRIDES NATIFS PRESTASHOP
   ========================================== */

/* Masquer Material Icons partout */
.product-comment-modal .material-icons,
#product-comments-list-header .material-icons,
#product-comments-list-footer .material-icons,
.product-comment-list-item .material-icons {
  display: none !important;
}

/* Reset styles Bootstrap inutiles */
.product-comment-list-item.row {
  margin: 0 !important;
}

.product-comment-list-item .col-sm-3,
.product-comment-list-item .col-sm-9 {
  padding: 0 !important;
}

/* Masquer boutons natifs moches */
/* .btn-comment-big,
.btn-comment-huge {
  Garde les classes mais applique nos styles
} */