/**
 * Thème enfant Zephyr / Spirit — page commande (pas « Paiement »)
 *
 * 1. bloc « conditions générales de vente » (case CGV), affiché au-dessus des
 *    moyens de paiement ;
 * 2. options de paiement : le libellé reste à gauche, le logo / bouton du
 *    module (PayPal, 4X PayPal, …) passe à droite du texte au lieu d'être
 *    empilé dessous.
 *
 * Ce fichier appartient au thème enfant (themes/zephyr_child/zephyr/) : il
 * n'est pas touché par une mise à jour de Warehouse ni de PrestaShop.
 *
 * Réglages : --zc-* pour le bloc CGV, --zc-opt-col pour la largeur de la
 * colonne des logos à droite.
 */
:root {
  --zc-bg:     #f5f7f8;   /* fond très clair du bloc CGV */
  --zc-border: #e4e8ea;   /* bordure fine */
  --zc-accent: #2e2e2e;   /* accent (bordure gauche + liens CGV) */
  --zc-text:   #2f3437;   /* texte de la mention */

  --zc-opt-col: 220px;    /* place réservée au logo/bouton à droite */
  --zc-opt-gap: 20px;     /* écart entre le libellé et le logo */
}

/* ------------------------------------------------------------------ *
 * 1. Bloc conditions générales de vente
 * ------------------------------------------------------------------ */
#checkout-payment-step .zephyr-conditions {
  background: var(--zc-bg);
  border: 1px solid var(--zc-border);
  border-left: 3px solid var(--zc-accent);
  border-radius: 4px;
  padding: 14px 16px;
  /* espace vertical entre la mention et les moyens de paiement */
  margin: 0 0 24px 0;
}

#checkout-payment-step .zephyr-conditions ul,
#checkout-payment-step .zephyr-conditions ul li {
  margin-bottom: 0;
}

#checkout-payment-step .zephyr-conditions .js-terms {
  color: var(--zc-text);
  margin-bottom: 0;
}

#checkout-payment-step .zephyr-conditions .js-terms a {
  color: var(--zc-accent);
  text-decoration: underline;
}

#checkout-payment-step .zephyr-conditions .js-terms a:hover {
  text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * 2. Moyens de paiement : libellé à gauche, logo à droite
 *
 * Structure rendue par PrestaShop, pour chaque moyen de paiement :
 *   <div>                                     <-- bloc de l'option
 *     <div class="payment-option"> radio + <label>libellé</label> </div>
 *   </div>
 *   <div class="additional-information">      <-- logo/bouton du module
 *     <div data-container-express-checkout> … <div paypal-button-container>
 *   </div>
 *   <div class="js-payment-option-form"> … </div>
 * Le bloc de l'option et le bloc « additional-information » sont frères :
 * on les remet sur la même ligne (inline-flex / inline-block) et on réserve
 * à droite la largeur du logo. Aucun déplacement dans le DOM, donc le
 * JavaScript du tunnel (et celui des modules PayPal) continue de fonctionner.
 * ------------------------------------------------------------------ */
body#checkout #checkout-payment-step .payment-options {
  /* la liste des moyens de paiement devient une grille souple de 2 colonnes :
     colonne 1 = l'option (radio + libellé), colonne 2 = le logo/bouton */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

body#checkout #checkout-payment-step .payment-options > div:has(> .payment-option) {
  flex: 0 0 calc(100% - var(--zc-opt-col) - var(--zc-opt-gap));
  max-width: calc(100% - var(--zc-opt-col) - var(--zc-opt-gap));
  display: flex;
  align-items: center;
}

body#checkout #checkout-payment-step .payment-option {
  display: flex;
  align-items: center;
  width: 100%;
}

body#checkout #checkout-payment-step .payment-option label {
  max-width: 100%;
  margin: 0;
}

body#checkout #checkout-payment-step .payment-options > .additional-information:not(.ps-hidden) {
  flex: 0 0 var(--zc-opt-col);
  max-width: var(--zc-opt-col);
  margin: 0 0 0 var(--zc-opt-gap);
  padding: 6px 0;
}

/* les blocs du module portent une marge/une largeur en style inline :
   on neutralise seulement la marge (le reste doit rester au module) */
body#checkout #checkout-payment-step [data-container-express-checkout],
body#checkout #checkout-payment-step [data-container-bnpl] {
  margin: 0 !important;
}

/* les formulaires cachés du tunnel ne doivent pas casser la ligne */
body#checkout #checkout-payment-step .payment-options > .js-payment-option-form {
  flex: 0 0 100%;
  height: 0;
  overflow: hidden;
}

/* écrans étroits : on revient à l'empilement d'origine */
@media (max-width: 575px) {
  #checkout-payment-step .zephyr-conditions {
    padding: 12px;
    margin-bottom: 18px;
  }

  body#checkout #checkout-payment-step .payment-options {
    display: block;
  }

  body#checkout #checkout-payment-step .payment-options > div:has(> .payment-option) {
    display: block;
    width: 100%;
  }

  body#checkout #checkout-payment-step .payment-options > .additional-information:not(.ps-hidden) {
    display: block;
    margin: 0 0 10px 0;
    padding: 0;
    max-width: 100%;
  }
}