/* #######################################
   COMMANDE PRODUITS - FEUILLE DE STYLE
   #######################################
   
   Structure du fichier :
   1. Variables CSS (racine)
   2. Layout principal 
   3. Résumé de commande
   4. Compteur panier
   5. États du panier (vide/plein)
   6. Articles du panier
   7. Formulaires et champs
   8. Tableau du panier
   9. Contrôles de quantité
   10. Boutons d'action
   11. Messages et notifications
   12. Responsive (mobile/tablette)
   13. Alignements et corrections
   
   ####################################### */

/* #######################################
   VARIABLES CSS - CONFIGURATION GLOBALE
   ####################################### */
/* Variables réutilisables pour la cohérence visuelle */
:root {
  --cart-border-radius: 8px;
  --cart-transition: all 0.3s ease;
  --cart-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --cart-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --cart-focus-color: var(--color-grass-9);
  --cart-success-color: var(--color-grass-9);
  --cart-success-hover: var(--color-grass-11);

  /* Variables pour les tooltips */
  --tooltip-bg: rgba(33, 37, 41, 0.9);
  --tooltip-color: white;
  --tooltip-border-radius: 6px;
  --tooltip-padding: 0.5rem 0.75rem;
  --tooltip-font-size: 0.875rem;
  --tooltip-z-index: 1070;
}

/* #######################################
   TOOLTIPS CSS PURS - AIDE AU SURVOL
   ####################################### */

/* Conteneur relatif pour positionner le tooltip */
.tooltip-field {
  position: relative;
}

/* Tooltip invisible par défaut */
.tooltip-field::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: var(--tooltip-padding);
  border-radius: var(--tooltip-border-radius);
  font-size: var(--tooltip-font-size);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: var(--tooltip-z-index);
  margin-bottom: 0.5rem;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Flèche du tooltip */
.tooltip-field::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--tooltip-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: var(--tooltip-z-index);
  margin-bottom: 0.125rem;
  pointer-events: none;
}

/* Affichage du tooltip au survol */
.tooltip-field:hover::before,
.tooltip-field:focus::before {
  opacity: 1;
  visibility: visible;
}

.tooltip-field:hover::after,
.tooltip-field:focus::after {
  opacity: 1;
  visibility: visible;
}

/* #######################################
   LAYOUT PRINCIPAL - STRUCTURE DE PAGE
   ####################################### */

/* Conteneur principal de la page panier */
.cart-page {
  background-color: white;
  min-height: 60vh;
}

/* Zone de contenu principale du panier */
.cart-content {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  margin-bottom: 1.5rem;

  @media (min-width: 576px) {
    padding: 1.5rem;
  }

  @media (min-width: 992px) {
    padding: 2rem;
  }

  @media (min-width: 1200px) {
    padding: 2.5rem;
  }
}

/* #######################################
   RÉSUMÉ DE COMMANDE - SIDEBAR DROITE
   ####################################### */

/* Conteneur du résumé qui reste visible lors du scroll */
.cart-summary {
  position: sticky;
  top: 2rem;

  &:focus-within {
    outline: 2px solid var(--cart-focus-color);
    outline-offset: 2px;
  }

  @media (min-width: 992px) {
    position: sticky;
    top: 100px;
  }
}

.cart-summary__title {
  color: var(--color-grass-11);
  font-weight: 500;
  font-size: 1.3rem;
  margin-bottom: 1rem;

  @media (min-width: 768px) {
    font-size: 1.4rem;
  }

  @media (min-width: 1200px) {
    font-size: 1.5rem;
  }
}

.cart-summary__total {
  color: var(--color-grass-11);
  font-weight: 600;
  font-size: 1.1rem;
}

/* #######################################
   COMPTEUR PANIER - BADGE NOTIFICATION
   ####################################### */

/* Badge circulaire qui affiche le nombre d'articles */
.cart-count {
  background: #dc3545;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: bold;
  margin-left: 0.25rem;
  min-width: 18px;
  text-align: center;
  display: inline-block;

  @media (min-width: 768px) {
    font-size: 0.8rem;
    padding: 3px 8px;
    margin-left: 0.5rem;
  }
}

/* =======================================
   TABLEAU DU PANIER - LISTE DÉTAILLÉE
   ======================================= */

/* Tableau principal du panier */
.cart-table {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  margin-bottom: 1rem;
  display: none;

  thead {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
  }

  th {
    font-weight: 600;
    color: var(--color-grass-11);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    padding: 1rem 0.75rem;
    border: none;
  }

  .product-col {
    width: 40%;
  }
  .price-col {
    width: 15%;
    text-align: center;
  }
  .quantity-col {
    width: 20%;
    text-align: center;
  }
  .total-col {
    width: 15%;
    text-align: center;
  }
  .remove-col {
    width: 10%;
    text-align: center;
  }

  td {
    padding: 1rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f3f4;
  }
}

/* #######################################
   PRODUITS DANS LE TABLEAU
   ####################################### */

/* Conteneur flex pour l'image et les détails produit */
.cart-product-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Image miniature du produit dans le tableau */
.cart-product-image {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 0.375rem;
  object-fit: cover;
  flex-shrink: 0;
}

/* Détails du produit (nom et variant) */
.cart-product-details {
  h6 {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
    font-size: 1rem;
  }
}

/* Texte du variant (taille, couleur, etc.) */
.cart-product-variant {
  font-size: 0.875rem;
  color: #6c757d;
  margin: 0;
}

/* #######################################
   CARTES PRODUITS - MOBILE FIRST
   ####################################### */

/* Conteneur principal des cartes (visible sur mobile uniquement) */
.cart-cards {
  display: block;
}

/* Carte individuelle de produit */
.cart-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* En-tête de la carte contenant l'image et les détails */
.cart-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 0.5rem;
  position: relative;
}

/* Image du produit dans la carte (s'adapte à la largeur) */
.cart-card-image {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Détails du produit superposés sur l'image */
.cart-card-details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 1rem 0.5rem 0.5rem;
  border-radius: 0 0 8px 8px;

  /* Nom du produit avec ombre pour la lisibilité */
  h6 {
    font-weight: 600;
    color: white;
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
}

/* Variant du produit avec texte blanc et ombre */
.cart-card-variant {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Prix unitaire du produit (centré) */
.cart-card-price {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-align: center;
  display: block; /* Force l'affichage block pour data element */
}

/* Prix total du produit (quantité × prix unitaire) */
.cart-card-total {
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  text-align: center;
  display: block; /* Force l'affichage block pour output element */

  /* Mention TTC en petit */
  .ttc {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: normal;
  }
}

/* #######################################
   CONTRÔLES DE QUANTITÉ - CARTES
   ####################################### */

/* Conteneur des contrôles de quantité dans les cartes */
.cart-card-quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Boutons + et - pour modifier la quantité */
.cart-card-quantity-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-grass-10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  /* Effet au survol */
  &:hover {
    background: #28a745;
    transform: scale(1.1);
  }

  /* État désactivé */
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
}

/* Affichage de la quantité actuelle */
.cart-card-quantity-display {
  width: 40px;
  text-align: center;
  padding: 0.5rem 0;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  font-weight: 500;
  font-size: 1rem;
}

/* #######################################
   BOUTON SUPPRIMER - CARTES
   ####################################### */

/* Bouton de suppression positionné en haut à droite */
.cart-card-remove {
  background: white;
  border: 2px solid #dc3545;
  color: #dc3545;
  font-size: 1.2rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;

  /* Effet au survol */
  &:hover {
    background: #dc3545;
    color: white;
  }
}

/* #######################################
   CONTRÔLES DE QUANTITÉ - TABLEAU
   ####################################### */

/* Conteneur des contrôles de quantité dans le tableau */
.quantity-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Boutons + et - dans le tableau (plus petits) */
.quantity-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #28a745;
  background: var(--color-grass-10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  color: #ffffff;
  transition: all 0.2s ease-in-out;

  /* Effet au survol avec transformation */
  &:hover {
    background: #28a745;
    border-color: #28a745;
    transform: scale(1.15);
  }

  /* État désactivé */
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
}

/* Affichage de la quantité dans le tableau */
.quantity-display {
  width: 3.75rem;
  text-align: center;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  font-weight: 500;
}

/* #######################################
    PRIX ET TOTAUX
   ####################################### */

.cart-price {
  font-weight: 600;
  color: #2c3e50;
  font-size: 1rem;
  text-align: center; /* Centrage pour alignement avec en-têtes */
}

.cart-total {
  font-weight: 700;
  color: #2c3e50;
  font-size: 1.1rem;
  text-align: center; /* Centrage pour alignement avec en-têtes */

  .ttc {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: normal;
  }
}

/* #######################################
   BOUTON SUPPRIMER
   ####################################### */

.remove-product-btn {
  background: none;
  border: 1px solid #dc3545;
  color: #dc3545;
  font-size: 1.5rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;

  &:hover {
    background: #dc3545;
    color: white;
    transform: scale(1.15);
  }
}

/* #######################################
    RÉSUMÉ DU PANIER
   ####################################### */

.cart-summary-table {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .table td {
    padding: 0.75rem 0;
    border: none;
    font-size: 1rem;
  }

  .table tr:not(:last-child) td {
    border-bottom: 1px solid #f1f3f4;
  }

  .fw-bold td {
    font-weight: 700;
    font-size: 1.1rem;
    color: #2c3e50;
  }
}

/* #######################################
    BOUTONS D'ACTION
   ####################################### */

/* Conteneur des boutons d'action (continuer shopping, commander) */
.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  /* Styles communs pour tous les boutons */
  .btn {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
  }

  /* Bouton "Continuer shopping" (style outline) */
  .btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
    background: transparent;

    /* Effet de remplissage au survol */
    &:hover {
      background: #007bff;
      color: white;
    }
  }

  /* Bouton "Passer commande" (style plein) */
  .btn-success {
    background: #28a745;
    border-color: #28a745;
    color: white;

    /* Assombrissement au survol */
    &:hover {
      background: #218838;
      border-color: #1e7e34;
    }
  }
}

/* #######################################
    MESSAGE PANIER VIDE
   ####################################### */

.empty-cart-section {
  background: white;
  border-radius: 8px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  }
}

/* Icône du panier vide (grande taille) */
.empty-cart-icon i {
  font-size: 4rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

/* #######################################
    FORMULAIRE DE COMMANDE
   ####################################### */

/* Section du formulaire qui s'affiche après "Passer commande" */
.order-form-section {
  margin-top: 2rem;

  /* Carte contenant le formulaire */
  .card {
    border-radius: 8px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  }

  /* En-tête du formulaire avec titre */
  .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem;
  }

  /* Champs de saisie du formulaire */
  .form-control {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 1rem;

    /* État focus avec bordure bleue */
    &:focus {
      border-color: #80bdff;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
  }

  /* Labels des champs obligatoires */
  .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
  }

  /* Messages d'erreur de validation */
  .text-danger {
    color: #dc3545;
  }
}

/* #######################################
    RESPONSIVE - BASCULEMENT MOBILE/DESKTOP
   ####################################### */

/* À partir de 768px (tablettes), on passe du mode cartes au tableau */
@media (min-width: 768px) {
  /* Masquer les cartes sur écrans moyens et grands */
  .cart-cards {
    display: none;
  }

  /* Afficher le tableau sur écrans moyens et grands */
  .cart-table {
    display: table;
  }
}

/* #######################################
    ALIGNEMENT VERTICAL AVEC LE TABLEAU
   ####################################### */

/* Alignement du résumé du panier */
.cart-content .row {
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
}

.cart-content .col-lg-6 {
  padding-left: 0;
  padding-right: 0;
}

/* Forcer le résumé à commencer au bord gauche comme le tableau */
.cart-content .col-lg-6:last-child {
  margin-left: 0;
  width: 100%;
  max-width: none;
}

/* Alignement du formulaire de commande */
.order-form-section .row {
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
}

.order-form-section .col-lg-8 {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: none;
}