/**
 * Bouton « Retour » du tunnel de commande.
 *
 * Le tunnel FLAASH est une suite de pages (panier, identification, livraison,
 * paiement) : une fois engage, le client n'avait aucune sortie arriere en bas
 * de page, seulement le fil d'Ariane tout en haut. Ce fichier habille le lien
 * de retour pose sur chacun de ces ecrans.
 *
 * Il vit dans le module et non dans le theme pour la meme raison que gift.css :
 * le theme ne se met a jour que par un reimport complet, alors que la preprod
 * n'offre que le back-office. Un bump de flaashcore suffit donc a le livrer.
 *
 * Les classes « retour » existantes du theme (.btn-lt-grey, .btn-basket-custom)
 * ne pouvaient pas etre reutilisees : elles sont toutes prefixees .basket-page
 * dans main.css, donc inertes sous body#checkout et body#authentication.
 */

.checkout-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  color: #535b67;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.checkout-back:hover,
.checkout-back:focus {
  background: #f2f2f2;
  color: #000;
  text-decoration: none;
}

.checkout-back:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.checkout-back__ico {
  display: inline-flex;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.checkout-back__ico svg {
  width: 100%;
  height: 100%;
}

/* ── Etape livraison ───────────────────────────────────────────────────────── */

/**
 * .delivery-summary__form est une grille a une colonne (live-overrides.css).
 * Les deux boutons sont donc regroupes dans un seul enfant, qui reste UN item
 * de cette grille : la mise en page existante (CGV, message d'erreur) n'est pas
 * touchee. Le passage en flex neutralise au passage le `justify-self: end` du
 * bouton Commander, sans surcharge de specificite.
 */
body#checkout .delivery-summary__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* ── Etape paiement ────────────────────────────────────────────────────────── */

/**
 * Meme grammaire qu'a l'etape livraison : retour a gauche, action principale a
 * droite, sur une seule ligne. La paire reste centree, parce que « VALIDER »
 * est une pilule de 280px centree dans une colonne large — l'ecarter jusqu'aux
 * bords casserait la composition de la page paiement.
 */
body#checkout .payment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/**
 * `margin: 0 auto` centrait le bouton quand il etait seul (live-overrides.css).
 * Dans un conteneur flex, une marge auto absorbe l'espace libre et repousserait
 * les deux boutons vers les bords : elle est neutralisee ici. La specificite
 * suffit a gagner (live-overrides.css est charge apres ce fichier).
 */
body#checkout .payment-actions .payment-submit--validate {
  margin: 0;
}

/* Pilule grise, calee sur la hauteur et le rayon de « VALIDER » (56px / 30px). */
body#checkout .checkout-back--payment {
  min-height: 56px;
  padding: 0 28px;
  border-radius: 30px;
  background: transparent;
}

body#checkout .checkout-back--payment:hover,
body#checkout .checkout-back--payment:focus {
  background: #f2f2f2;
}

/**
 * Confirmation Stripe en cours : le script inline de checkout.tpl pose cette
 * classe en meme temps qu'il desactive « VALIDER ». Sans elle, un clic sur le
 * retour quitterait la page alors que le PaymentIntent est deja parti.
 */
.checkout-back.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Etape identification ──────────────────────────────────────────────────── */

.auth-shell .checkout-back--auth {
  margin-top: 32px;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /**
   * En dessous de 768px, le bouton Commander passe deja en pleine largeur
   * (live-overrides.css). Le retour fait de meme et se place en dessous : les
   * deux ne peuvent pas se chevaucher.
   */
  body#checkout .delivery-summary__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  body#checkout .delivery-summary__actions .checkout-back {
    width: 100%;
  }

  /* Meme disposition qu'a l'etape livraison : l'action principale reste en
     haut, a portee de pouce, et le retour passe dessous. */
  body#checkout .payment-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  body#checkout .checkout-back--payment {
    width: 100%;
  }
}