/* Module Rétractation - front. Scopé sous .retractation pour ne pas fuir. */
.retractation {
  max-width: 640px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}

.retractation .retractation__form {
  margin-top: 1.5rem;
}

.retractation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

/* Titre de page centré (scopé aux pages du module) */
#module-retractation-form .page-title-section,
#module-retractation-history .page-title-section {
  text-align: center;
}

/* Marge entre chaque champ du formulaire */
.retractation .form-group {
  margin-bottom: 1.25rem;
}

/* Page "Mes demandes" : pleine largeur dans la colonne compte + respiration */
.retractation-history {
  max-width: none;
  margin: 0;
  padding: 1rem 0;
}

.retractation-history .table {
  margin-top: 1rem;
}

.retractation-history__head {
  margin-bottom: 1.5rem;
}

.retractation__intro {
  margin-bottom: 1.5rem;
  color: var(--bs-body-color, #333);
}

.retractation__order {
  margin-bottom: 1rem;
}

.retractation__products {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}

.retractation__products legend {
  font-size: 1rem;
  font-weight: 600;
  width: auto;
  padding: 0;
  margin-bottom: .9rem;
}

/* Carte produit cliquable */
.retractation__product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  margin-bottom: .6rem;
  border: 1px solid var(--bs-border-color, #e2e2e8);
  border-radius: .75rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.retractation__product:hover {
  border-color: var(--bs-primary, #4f46e5);
}

/* État sélectionné (CSS :has, sans JS) */
.retractation__product:has(.retractation__product-cb:checked) {
  border-color: var(--bs-primary, #4f46e5);
  background: color-mix(in srgb, var(--bs-primary, #4f46e5) 6%, #fff);
  box-shadow: 0 0 0 1px var(--bs-primary, #4f46e5);
}

.retractation__product-main {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  flex: 1 1 auto;
}

label.retractation__product-main {
  cursor: pointer;
}

.retractation__product-cb {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--bs-primary, #4f46e5);
  flex: 0 0 auto;
  cursor: pointer;
}

.retractation__product-info {
  display: flex;
  flex-direction: column;
}

.retractation__product-name {
  font-weight: 500;
  line-height: 1.3;
}

.retractation__product-price {
  font-size: .82rem;
  color: var(--bs-secondary-color, #6c757d);
}

.retractation__total {
  text-align: right;
  font-weight: 600;
  margin: .5rem 0 1rem;
}

.retractation__product-qty {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

.retractation__product-qty label {
  margin: 0;
  font-size: .85rem;
  color: var(--bs-secondary-color, #6c757d);
}

.retractation__product-qty .form-select {
  width: auto;
  min-width: 4.25rem;
}

/* Produit non éligible */
.retractation__product--excluded {
  background: var(--bs-light, #f7f7fa);
  border-style: dashed;
}

.retractation__product--excluded:hover {
  border-color: var(--bs-border-color, #e2e2e8);
}

.retractation__product-reason {
  display: block;
  font-size: .82rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-top: .15rem;
}

.retractation__product-remaining {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--bs-primary, #4f46e5);
  margin-top: .15rem;
}

.retractation__product-badge {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bs-secondary-color, #6c757d);
  background: var(--bs-secondary-bg, #e9ecef);
  border-radius: 1rem;
  padding: .2rem .6rem;
}

.retractation__note {
  font-size: .85rem;
  color: var(--bs-secondary-color, #777);
  margin-top: .75rem;
}

.retractation__confirm {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  cursor: pointer;
  line-height: 1.4;
}

.retractation__confirm input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin-top: .1rem;
  accent-color: var(--bs-primary, #4f46e5);
  cursor: pointer;
}

/* Lien aligné avec le copyright : centré, même style discret, sans soulignement
   ni picto. Couleur héritée du footer pour rester lisible sur tout fond. */
.retractation-footer-link {
  margin: 0;
}

.retractation-footer-link a {
  color: inherit;
  text-decoration: none;
}

.retractation-footer-link a:hover {
  text-decoration: underline;
}

/* Fil de suivi (espace client) facon messagerie */
.retractation-thread {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Évènement (changement de statut) : centré, neutre */
.retractation-thread__event {
  text-align: center;
  margin: .25rem 0;
}

.retractation-thread__event-pill {
  display: inline-block;
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-secondary-color, #5c636a);
  font-size: .8rem;
  font-weight: 500;
  padding: .25rem .75rem;
  border-radius: 1rem;
}

.retractation-thread__event-date {
  display: block;
  font-size: .72rem;
  color: var(--bs-secondary-color, #9aa0a6);
  margin-top: .2rem;
}

/* Messages : alignés selon l'émetteur */
.retractation-thread__row {
  display: flex;
}

.retractation-thread__row--me {
  justify-content: flex-end;
}

.retractation-thread__row--shop {
  justify-content: flex-start;
}

.retractation-thread__bubble {
  max-width: 78%;
  padding: .6rem .85rem;
  border-radius: 1rem;
  position: relative;
}

.retractation-thread__row--me .retractation-thread__bubble {
  background: var(--bs-primary, #4f46e5);
  color: #fff;
  border-bottom-right-radius: .25rem;
}

.retractation-thread__row--shop .retractation-thread__bubble {
  background: var(--bs-light, #f1f1f4);
  color: var(--bs-body-color, #222);
  border-bottom-left-radius: .25rem;
}

.retractation-thread__author {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  opacity: .9;
  margin-bottom: .25rem;
}

.retractation-thread__author .material-icons {
  font-size: 1rem;
}

.retractation-thread__dir {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: .7rem;
  opacity: .75;
}

.retractation-thread__row--me .retractation-thread__author {
  flex-direction: row-reverse;
}

/* Formulaire de réponse client */
.retractation-reply-form {
  margin: 1.25rem 0;
}

.retractation-reply-form label {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
}

.retractation-reply-form .btn {
  margin-top: .6rem;
}

.retractation-thread__body {
  line-height: 1.4;
}

.retractation-thread__time {
  display: block;
  font-size: .7rem;
  opacity: .7;
  margin-top: .25rem;
  text-align: right;
}

.retractation-thread__file {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .35rem;
  font-size: .85rem;
  color: inherit;
  text-decoration: none;
}

.retractation-thread__file .material-icons {
  font-size: 1rem;
}

/* Bloc rétractation sous le détail de commande : épuré, accent de marque sur le
   bord gauche (couleur selon l'état), sans aplat ni gris. */
.retractation-order-link {
  border: 1px solid rgba(79, 70, 229, .15);
  border-left: 4px solid var(--bs-primary, #4f46e5);
  border-radius: .5rem;
  padding: 1.1rem 1.25rem;
}

.retractation-order-link--done {
  border-left-color: #16a085;
}

.retractation-order-link--expired {
  border-left-color: #e0a106;
}

.retractation-order-link__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}

.retractation-order-link__title .material-icons {
  font-size: 1.25rem;
  color: var(--bs-primary, #4f46e5);
}

.retractation-order-link--done .retractation-order-link__title .material-icons {
  color: #16a085;
}

.retractation-order-link__note {
  margin: .5rem 0 0;
  font-size: .9rem;
  opacity: .85;
}

.retractation-order-link__note--expired {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #a06b00;
  opacity: 1;
  margin: 0;
}

.retractation-order-link__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-top: .85rem;
}

.retractation-order-link__form {
  margin: 0;
}

.retractation-order-link__link {
  align-self: center;
  color: var(--bs-primary, #4f46e5);
  text-decoration: underline;
}

/* Tableau récapitulatif des demandes (style natif grid-table) */
.order-retractations {
  margin-top: 2rem;
}

/* Le thème ne définit pas les modificateurs --4/--5 : on les pose ici (scopés au
   récap) pour garantir la mise en colonnes selon que le montant est affiché ou non. */
@media (min-width: 768px) {
  .order-retractations .grid-table__inner--5 {
    grid-template-columns: repeat(5, minmax(0, auto));
  }
  .order-retractations .grid-table__inner--4 {
    grid-template-columns: repeat(4, minmax(0, auto));
  }
}

.retractation-status-badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 1rem;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.retractation-cell-products {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .9rem;
}

.retractation-cell-products li + li {
  margin-top: .15rem;
}

/* Colonne "Rétractation" ajoutée (en JS) à l'historique des commandes : une pastille
   par statut de demande. La grille native (repeat(7) + subgrid) passe à 8 colonnes
   quand la classe `retractation-col-on` est présente (override scopé, pas de modif
   du SCSS du thème). */
@media (min-width: 768px) {
  .order-history__inner.retractation-col-on {
    grid-template-columns: repeat(8, minmax(0, auto));
  }

  .order-history__inner.retractation-col-on .order-history__header,
  .order-history__inner.retractation-col-on .order-history__row {
    grid-column: span 8;
  }
}

.order-history__cell--retractation {
  min-width: 0; /* autorise la cellule à rétrécir dans la grille (sinon le badge la déborde) */
}

.retractation-history-flag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  min-width: 0;
  max-width: 100%;
}

.retractation-history-badge {
  display: inline-block;
  max-width: 100%;
  padding: .12rem .5rem;
  border-radius: 1rem;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal; /* le libellé long (ex. « Rétractation en cours de gestion ») passe à la ligne */
  overflow-wrap: break-word;
  word-break: break-word;
}

.order-history__cell--retractation.retractation-history-empty {
  color: var(--bs-secondary-color, #888);
}

/* Page "Suivi de ma demande" : titres de section en police de corps (Montserrat)
   au lieu de la condensée appliquée par défaut aux h1..h6 par le thème. */
#module-retractation-history h4 {
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
}