/* app/assets/stylesheets/cart_styles.css */

/* --- Cart Slider Overlay (Mini Panier) --- */
.cart-slider-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent sombre */
  z-index: 1100; /* Au-dessus de tout, y compris la recherche */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  justify-content: flex-end; /* Fait apparaître le slider depuis la droite */
}

.cart-slider-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.cart-slider-content {
  width: 90%;
  max-width: 400px; /* Largeur maximale du slider */
  height: 100%;
  background-color: var(--soft-cream); /* Couleur de fond du slider */
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3); /* Ombre sur le bord gauche */
  transform: translateX(100%); /* Caché par défaut à droite */
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.cart-slider-overlay.is-open .cart-slider-content {
  transform: translateX(0); /* Visible */
}

.cart-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.cart-slider-header h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--dark-gold);
  margin: 0;
}

.cart-slider-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-color-light);
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.cart-slider-close-btn:hover {
  color: var(--gold-accent);
}

.cart-slider-close-btn svg {
  width: 24px;
  height: 24px;
}

.cart-slider-items {
  flex-grow: 1; /* Permet aux articles de prendre l'espace disponible */
  overflow-y: auto; /* Défilement si trop d'articles */
  padding-right: 10px; /* Pour l'espace de la scrollbar */
  margin-bottom: 20px;
}

.cart-slider-empty-message {
  text-align: center;
  color: var(--text-color-light);
  font-size: 1.1rem;
  padding: 30px 0;
}

.cart-slider-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 15px;
  position: relative;
}

.cart-slider-item-image {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}

.cart-slider-item-info {
  flex-grow: 1;
}

.cart-slider-item-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--dark-gold);
  margin-bottom: 5px;

  display: -webkit-box;           /* active le mode flex vertical */
  -webkit-box-orient: vertical;   /* orientation verticale */
  -webkit-line-clamp: 2;          /* max 2 lignes */
  overflow: hidden;               /* cache le texte qui dépasse */
  text-overflow: ellipsis;        /* ajoute "..." si trop long */

  white-space: normal;            /* ⚡ autorise le retour à la ligne */
  word-wrap: break-word;          /* coupe si un mot est trop long */
  max-width: 100%;                /* reste dans le cadre */
}


.cart-slider-item-volume {
  font-size: 0.9rem;
  color: var(--text-color-light);
  margin-bottom: 5px;
}

.cart-slider-item-price {
  font-size: 1rem;
  color: var(--text-color);
  font-weight: 600;
}

.cart-slider-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #dc3545; /* Rouge pour la suppression */
  padding: 5px;
  position: absolute;
  top: 5px;
  right: 5px;
  transition: color 0.2s ease;
}

.cart-slider-item-remove:hover {
  color: #c82333;
}

.cart-slider-summary {
  padding: 15px 0;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  margin-top: auto; /* Pousse le résumé vers le bas */
}

.cart-slider-summary .summary-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 1rem;
  color: var(--text-color);
}

.cart-slider-summary .summary-line.total-line {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark-gold);
  margin-top: 15px;
}

.cart-slider-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* CORRECTION : Styles pour les boutons du slider */
.cart-slider-order-btn,
.cart-slider-view-cart-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  text-align: center;
  text-decoration: none;
  display: block; /* S'assure qu'ils sont toujours affichés */
  opacity: 1; /* S'assure qu'ils sont toujours visibles */
}

.cart-slider-order-btn {
  background-color: var(--gold-accent);
  color: #fff;
  border: 2px solid var(--gold-accent);
}

.cart-slider-order-btn:hover {
  background-color: #a37b00; /* Un peu plus foncé */
  border-color: #a37b00;
  color: #fff !important; /* AJUSTEMENT CLÉ : Force la couleur blanche */
}

.cart-slider-view-cart-btn {
  background-color: transparent;
  color: var(--dark-gold);
  border: 2px solid var(--dark-gold);
}

.cart-slider-view-cart-btn:hover {
  background-color: var(--dark-gold);
  color: #fff !important; /* AJUSTEMENT CLÉ : Force la couleur blanche */
}

/* Animation pour le compteur de panier (navbar) */
.cart-count.animate-pop {
  animation: pop 0.3s ease-out;
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}


/* --- Cart Page (Panier complet) --- */
.cart-page-container {
  padding: 80px 20px;
  max-width: 1000px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
  background-color: var(--background-color);
}

.cart-page-wrapper {
  background-color: var(--soft-cream);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

.cart-page-title {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  color: var(--dark-gold);
  margin-bottom: 40px;
  text-align: center;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.cart-page-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--gold-accent);
  border-radius: 2px;
}

.cart-table-wrapper {
  overflow-x: auto; /* Permet le défilement horizontal sur petits écrans */
  margin-bottom: 30px;
}

/* --- DESKTOP TABLE STYLES (DEFAULT) --- */
/* These rules ensure the table behaves correctly on larger screens */
.cart-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px; /* Espace entre les lignes */
  table-layout: fixed; /* Force fixed column widths */
  display: table; /* Explicitly set table display */
}

.cart-table thead {
  display: table-header-group; /* Explicitly set table header group display */
  background-color: var(--gold-accent);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cart-table-header th {
  padding: 15px 20px;
  text-align: left;
}
.cart-table-header th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.cart-table-header th:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.cart-table tbody {
  display: table-row-group; /* Explicitly set table row group display */
}

.cart-table tbody tr {
  display: table-row; /* Explicitly set table row display */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-table tbody tr:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cart-table tbody td { /* Target all td elements within tbody for desktop */
  display: table-cell; /* CRUCIAL: Ensure table cell display on desktop */
  padding: 15px 20px;
  vertical-align: middle;
  font-size: 1rem;
  color: var(--text-color);
}

/* Column Widths for Desktop */
.cart-table thead th:nth-child(1),
.cart-table tbody td:nth-child(1) {
  width: 40%; /* Produit */
}

.cart-table thead th:nth-child(2),
.cart-table tbody td:nth-child(2) {
  width: 20%; /* Quantité */
}

.cart-table thead th:nth-child(3),
.cart-table tbody td:nth-child(3) {
  width: 20%; /* Prix Unitaire */
}

.cart-table thead th:nth-child(4),
.cart-table tbody td:nth-child(4) {
  width: 20%; /* Actions */
}

/* Product Column (with internal flexbox for image and text) */
.cart-item-info-cell {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cart-item-info-cell > div {
  flex-grow: 1;
  min-width: 0;
}

.cart-item-image {
  width: 60px; /* MODIFIÉ: Taille de l'image réduite */
  height: 60px; /* MODIFIÉ: Taille de l'image réduite */
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}

.cart-item-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--dark-gold);
  margin: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-volume {
  font-size: 0.95rem;
  color: var(--text-color-light);
  white-space: normal;
}

/* Quantity Column (with internal flexbox for buttons and input) */
.cart-item-quantity-controls {
  display: flex;
  flex-direction: row; /* Explicitly set to row for horizontal layout */
  flex-wrap: nowrap; /* Prevent wrapping of items */
  align-items: center;
  justify-content: flex-start; /* MODIFIÉ: Aligner au début pour plus de robustesse */
  gap: 5px;
  min-width: 95px; /* NOUVEAU: Assure une largeur minimale pour les contrôles */
}

.quantity-btn {
  background-color: var(--gold-accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  width: 25px; /* MODIFIÉ: Taille des boutons réduite */
  height: 25px; /* MODIFIÉ: Taille des boutons réduite */
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quantity-btn:hover {
  background-color: var(--dark-gold);
}

.quantity-input {
  width: 35px; /* MODIFIÉ: Largeur de l'input réduite */
  padding: 5px;
  text-align: center;
  border: 1px solid var(--text-color-light);
  border-radius: 5px;
  font-size: 1rem;
  color: var(--text-color);
  background-color: #f9f9f9;
  -moz-appearance: textfield;
  flex-shrink: 0;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Unit Price Column */
.cart-item-price {
  text-align: center;
}

/* Actions Column */
.cart-item-actions {
  text-align: center;
}

.cart-item-remove-btn {
  background-color: #dc3545;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cart-item-remove-btn:hover {
  background-color: #c82333;
}

.cart-page-summary {
  padding: 20px 0;
  border-top: 2px solid var(--gold-accent);
  border-bottom: 2px solid var(--gold-accent);
  margin-top: 30px;
}

.cart-page-summary .summary-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: var(--text-color);
}

.cart-page-summary .summary-line.total-line {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dark-gold);
  margin-top: 20px;
}

.cart-page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 40px;
}

.cart-page-continue-btn,
.cart-page-buy-btn {
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  text-align: center;
  text-decoration: none;
}

.cart-page-continue-btn {
  background-color: transparent;
  color: var(--dark-gold);
  border: 2px solid var(--dark-gold);
}

.cart-page-continue-btn:hover {
  background-color: var(--dark-gold);
  color: #fff !important; /* AJUSTEMENT CLÉ : Force la couleur blanche */
}

.cart-page-buy-btn {
  background-color: var(--gold-accent);
  color: #fff;
  border: 2px solid var(--gold-accent);
}

.cart-page-buy-btn:hover {
  background-color: var(--dark-gold);
  border-color: var(--dark-gold);
  color: #fff !important; /* AJUSTEMENT CLÉ : Force la couleur blanche */
}


/* --- MOBILE TABLE STYLES (OVERRIDE FOR SMALL SCREENS) --- */
/* These rules will only apply when the screen width is 768px or less */
@media (max-width: 768px) {
  .cart-table {
    min-width: 700px; /* Ensure horizontal scroll by making table wider than viewport */
    table-layout: auto; /* Allow columns to adapt to content on mobile */
  }

  /* Ensure table elements retain their table-like behavior on mobile */
  .cart-table thead {
    display: table-header-group; /* Ensure header is visible */
  }
  .cart-table tbody {
    display: table-row-group;
  }
  .cart-table tr {
    display: table-row;
  }
  .cart-table tbody td {
    display: table-cell;
    /* Reset any mobile-specific stacking/labeling styles */
    text-align: left; /* Default alignment */
    padding-left: 15px; /* Default padding */
    position: static; /* Remove relative positioning */
    border-bottom: none; /* Remove dashed border */
  }

  /* Ensure no pseudo-elements are generated on mobile */
  .cart-table tbody td::before {
    content: none;
  }

  /* Adjustments for internal elements on mobile for better fit */
  .cart-item-image {
    width: 40px; /* MODIFIÉ: Taille de l'image réduite sur mobile */
    height: 40px; /* MODIFIÉ: Taille de l'image réduite sur mobile */
  }

  .cart-item-name {
    font-size: 1rem;
  }

  .cart-item-volume {
    font-size: 0.8rem;
  }

  .quantity-btn {
    width: 20px; /* MODIFIÉ: Taille des boutons réduite sur mobile */
    height: 20px; /* MODIFIÉ: Taille des boutons réduite sur mobile */
    font-size: 1rem;
  }

  .quantity-input {
    width: 30px; /* MODIFIÉ: Largeur de l'input réduite sur mobile */
    font-size: 0.9rem;
  }

  .cart-item-remove-btn {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  /* General responsive adjustments for mobile */
  .cart-slider-content {
    max-width: 100%;
  }

  .cart-page-container {
    padding: 60px 15px;
  }

  .cart-page-wrapper {
    padding: 20px;
  }

  .cart-page-title {
    font-size: 2.5rem;
    margin-bottom: 30px;
  }

  .cart-page-summary .summary-line {
    font-size: 1rem;
  }

  .cart-page-summary .summary-line.total-line {
    font-size: 1.4rem;
  }

  .cart-page-actions {
    flex-direction: column;
    gap: 15px;
  }

  .cart-page-continue-btn,
  .cart-page-buy-btn {
    width: 100%;
    font-size: 1rem;
    padding: 12px 20px;
  }
}
@media (max-width: 480px) {
    .cart-slider-item-name {
        font-size: 1rem;
        -webkit-line-clamp: 1; /* 1 ligne sur mobile */
    }
}