/* ==========================================================================
   Formulaire de Commande Récapitulatif - Design Épuré
   ========================================================================== */

/* Structure globale du formulaire */
#ee-form-cmd-order-form {

}

/* Layout en colonnes : Catalogue à gauche, Récapitulatif à droite */
@media (min-width: 768px) {
  #ee-form-cmd-order-form {
    display: flex;
    width: 100%;
    gap: 3rem;
  }

  #ee-form-cmd-order-form .order-form-catalogue {
    flex: 0 0 calc(65% - 3rem );
  }

  #ee-form-cmd-order-form .order-recap-zone-wrapper {
    flex: 0 0 35%;
    align-self: stretch;
  }
}

/* --- LE STYLE DES CATÉGORIES --- */
.order-category-group {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.order-category-group legend {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a202c;
  padding: 0 10px;
}

.category-description {
  color: #718096;
  font-size: 0.95rem;
  margin-top: -8px;
  margin-bottom: 20px;
  border-left: 3px solid #cbd5e0;
  padding-left: 10px;
}

/* --- LE STYLE DES PRODUITS --- */
.category-products-list {
  display: block;
}

.product-row {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
  transition: background-color 0.2s ease;
}

.product-row:hover {
  background: #f1f5f9;
}

/* Personnalisation du champ Drupal (Label + Input + Description) */
.product-row .js-form-item {
  display: block;
  margin: 0;
}

.product-row .js-form-item label {
  font-weight: 600;
  color: #2d3748;
  display: block;
  margin-bottom: 4px;
}

.product-row .js-form-item .description {
  color: #718096;
  font-size: 0.85rem;
  margin-top: 2px;
}

/* Alignement du champ numérique */
.product-row select.order-product-quantity {
  width: 80px;
  padding: 8px;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #ffffff;
  color: #2d3748;
  cursor: pointer;
  appearance: none; /* Laisse le style natif du navigateur pour la flèche */
}

/* Léger effet au survol */
.product-row select.order-product-quantity:hover {
  border-color: #a0aec0;
}
.form-zone {
  background: #F8F5EC; /* Couleur ardoise sombre moderne */
  border: none;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  max-height: calc(100vh - 320px); 
  overflow-y: auto;
}
.form-zone .form-composite legend {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.form-zone .fieldset-wrapper>*+* {
  margin-top: 1rem;
}
.form-zone .d-flex {
  flex-direction: column;
}
/* --- LA ZONE STICKY (RÉCAPITULATIF & BOUTON) --- */
.order-recap-zone {
  background: #403CCF; /* Couleur ardoise sombre moderne */
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  max-height: calc(100vh - 320px); 
  overflow-y: auto;
}

.order-recap-zone legend {
  font-size: 1.15rem;
  font-weight: 600;
  color: #f8fafc;
}

#order-totals-display p {
  display: block;
  border-bottom: 1px solid #334155;
  padding-bottom: 12px;
  margin-bottom: 12px;
  font-size: 1rem;
}

#order-totals-display p strong {
  font-size: 1.3rem;
  color: #60C7BB; /* Accent bleu clair pour le total TTC */
}

#order-totals-display span {
  font-weight: bold;
}

/* Bouton envoyer à l'intérieur du bloc collant */
#ee-form-cmd-order-form .form-actions {
  margin-top: 20px;
  padding: 0;
  background: transparent;
}

#ee-form-cmd-order-form input[type="submit"].button--primary {
  width: 100%;
  padding: 14px;
  background-color: #10b981; /* Vert émeraude */
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#ee-form-cmd-order-form input[type="submit"].button--primary:hover {
  background-color: #059669;
}

#ee-form-cmd-order-form input[type="submit"].button--primary:active {
  transform: scale(0.98);
}

/* Gestion du responsive pour les petits écrans (mobile) */
@media (max-width: 767px) {
  .order-recap-zone {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.15);
    padding: 15px;
  }
  
  #order-totals-display p {
    margin-bottom: 6px;
    padding-bottom: 6px;
    font-size: 0.9rem;
  }
  
  #ee-form-cmd-order-form {
    padding-bottom: 220px; /* Évite que le bloc fixe cache les derniers produits */
  }
}

/* ==========================================================================
   STYLE DU CATALOGUE (Basé sur le HTML de Drupal)
   ========================================================================== */

/* 1. Les blocs de catégories (Plateaux repas, Coffrets...) */
fieldset.order-category-group {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Ombre douce */
}

/* Le titre de la catégorie */
fieldset.order-category-group legend {
  padding: 0;
  margin-bottom: 15px;
  border-bottom: none;
}

fieldset.order-category-group .fieldset-legend {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  border-bottom: 3px solid #403CCF; /* Ligne bleue d'accentuation */
  padding-bottom: 4px;
}

/* 2. Le conteneur de la liste des produits */
.category-products-list {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Espace entre chaque carte produit */
}

/* 3. La carte du produit individuel */
.category-products-list .js-form-item {
  display: grid;
  grid-template-columns: 1fr auto; /* Colonne 1: Texte / Colonne 2: Select */
  grid-template-rows: auto auto;   /* Ligne 1: Titre / Ligne 2: Description */
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0; /* Écrase les marges par défaut de Drupal */
  transition: all 0.2s ease;
}

/* Effet au survol de la carte produit */
.category-products-list .js-form-item:hover {
  background: #ffffff;
  border-color: #cbd5e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  
}

/* Le nom du produit + Prix (En haut à gauche) */
.category-products-list .js-form-item label {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

/* La description (En bas à gauche) */
.category-products-list .js-form-item .description {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
}

/* 4. La liste déroulante de quantité (Alignée à droite sur 2 lignes) */
.category-products-list .js-form-item select.order-product-quantity {
  grid-column: 2;
  grid-row: 1 / span 2; /* S'étire sur la hauteur du titre ET de la description */
  width: 80px;
  padding: 10px;
  border: 2px solid #cbd5e0;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  background-color: #ffffff;
  color: #0f172a;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
  appearance: none; /* Garde la petite flèche native du navigateur */
}

/* Effet quand on clique/survole le select */
.category-products-list .js-form-item select.order-product-quantity:focus,
.category-products-list .js-form-item select.order-product-quantity:hover {
  border-color: #403CCF;
}

/* ==========================================================================
   RESPONSIVE (Pour les téléphones)