/* ===========================================================
   CUBX THEME — theme-checkout.css (v2.5.254 — chantier checkout /order)
   -----------------------------------------------------------
   Charge a priority 226 (apres theme-account 224 et les *-fixes 225,
   pour ne jamais etre ecrase par les regles generiques).

   HABILLAGE CSS PUR du tunnel de commande PrestaShop (controller=order,
   body.page-order). Aucun override Smarty : le markup AJAX multi-etapes
   de PS Classic est laisse INTACT. On ne fait que styler les classes
   reellement generees par PS (lues sur le DOM live 2klove.fr, pas inventees).

   Perimetre :
     - Colonne GAUCHE (.cart-grid-body) : les 4 etapes du tunnel
         1. checkout-personal-information-step
         2. checkout-addresses-step
         3. checkout-delivery-step
         4. checkout-payment-step
     - Layout 2 colonnes (.row / .cart-grid-body / .cart-grid-right)
       que Bootstrap ne gere plus (assets Classic coupes en v2.5.63).
     - Fix du modal fantome .js-checkout-modal (fuit en display:block
       car le CSS Bootstrap .modal.fade n'est plus charge).

   HORS perimetre (deja CUBX, ne pas toucher) :
     - Colonne DROITE : le partial checkout/_partials/cart-summary.tpl est
       deja override CUBX et style par theme-cart.css (.cubx-cart-page__*).
       Il est partage entre /panier et /order.

   Decisions de chantier (validees David) :
     - PAS de hero gallery sur le checkout (page dense, tunnel de vente).
     - Habillage CSS d'abord (le plus sur sur la page critique des ventes).

   v2.5.262 (LOT 4) -- ajout section 12 : habillage des formulaires de
   l'etape 1 (creation de compte invite + connexion). Le markup CUBX
   cubx-ff-* (genere par form-fields.tpl + customer-form.tpl) etait en
   place depuis le LOT 2a mais sans CSS -> rendu brut. La section 12
   neutralise le wrapper Bootstrap Classic residuel, style les inputs,
   gender cards, password (boutons + meter), checkbox, le math challenge
   et le widget Turnstile injectes par FormGate, masque le honeypot
   visible, et applique le meme traitement au form #login-form.

   Conteneurs de hooks (#hook-display-before-carrier / -after-carrier,
   displayPaymentTop, etc.) : styles en defensif minimal. Vides en dev
   2klove.fr (aucun module H2J/tiers branche), se rempliront a la bascule v2
   (Colissimo, SystemPay sur idyll.fr). Styling :not(:empty) pour ne pas
   afficher de bloc fantome quand le hook sort vide.

   Variables CSS consommees (memes tokens que theme-cart / theme-account) :
     --cubx-accent / --cubx-accent-2  : couleur principale du preset
     --cubx-radius                    : rayon arrondi global
     --h2j-bg / --h2j-bg-card         : blanc
     --h2j-bg-light                   : gris/creme clair
     --h2j-border                     : bordure
     --h2j-text / --h2j-text-light    : textes
     --h2j-success / --h2j-warning / --h2j-error

   @author    H2J Ecosystem <info@2klove.fr>
   @copyright 2024-2026 H2J sas RCS 978391720
   @since     v2.5.254 (chantier checkout /order — habillage CSS)
   @version   v2.5.287 (P-098 fix selecteur > span SDK Krypton + combinaison J Inter 900 18px ls 1px shadow legere)
   =========================================================== */


/* ===========================================================
   1. LAYOUT — Grille 2 colonnes du tunnel
   -----------------------------------------------------------
   Bootstrap n'est plus charge (use_parent_assets:false depuis v2.5.63).
   Les classes .row / .col-lg-8 / .col-lg-4 sont donc inertes : sans
   regle, les 2 colonnes s'empilent (summary passe SOUS les etapes).
   On retablit une grille flex propre, scopee body.page-order.
   =========================================================== */

body.page-order #content-wrapper {
  padding: 24px 16px 56px;
}

body.page-order #content {
  display: block;
  max-width: 1180px;
  margin: 0 auto;
}

/* ===========================================================
   1bis. TITRE DE PAGE CHECKOUT
   -----------------------------------------------------------
   Le checkout.tpl Classic PS n'a structurellement AUCUN titre de
   page : son {block content} demarre direct sur <section id=content>
   <div class=row> -- pas de <header class=page-header>, pas de H1.
   Resultat : le contenu (carte etape 1) demarre colle sous le menu
   burger, sans repere visuel.

   On est en habillage CSS pur (decision actee : pas d'override Smarty
   du checkout, page critique). On injecte donc le titre via ::before
   sur #content -- c'est un cas legitime de content: CSS, le titre est
   purement decoratif et ne porte aucune fonction.

   Multilingue : le body porte lang-xx (lang-fr, lang-en, ...). On donne
   un libelle par langue principale du shop, avec fallback FR par defaut.
   Si une langue n'est pas couverte, le fallback FR s'affiche (gracieux).
   =========================================================== */

body.page-order #content::before {
  content: "Ma commande";
  display: block;
  margin: 12px auto 28px;
  padding-top: 8px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--h2j-text, #1a1f2c);
  text-align: center;
}

body.page-order.lang-en #content::before  { content: "My order"; }
body.page-order.lang-es #content::before  { content: "Mi pedido"; }
body.page-order.lang-it #content::before  { content: "Il mio ordine"; }
body.page-order.lang-de #content::before  { content: "Meine Bestellung"; }
body.page-order.lang-pt #content::before  { content: "A minha encomenda"; }
body.page-order.lang-nl #content::before  { content: "Mijn bestelling"; }

@media (max-width: 599px) {
  body.page-order #content::before {
    font-size: 21px;
    margin-bottom: 18px;
  }
}

body.page-order #content > .row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

body.page-order .cart-grid-body {
  flex: 1 1 0;
  min-width: 0;          /* autorise le shrink correct en flex */
  padding: 0;
  margin: 0;
}

body.page-order .cart-grid-right {
  flex: 0 0 340px;
  max-width: 340px;
  padding: 0;
  margin: 0;
  position: sticky;
  top: 16px;
}

/* Le titre H1 generique "Checkout" de PS Classic (s'il sort) — discret */
body.page-order #content > h1,
body.page-order .page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--h2j-text);
  margin: 0 0 20px;
}


/* ===========================================================
   2. CARTE D'ETAPE — .checkout-step (carte creme CUBX)
   -----------------------------------------------------------
   Chaque etape du tunnel = une carte. Etats PS :
     -current      : etape active (depliee)
     -reachable    : accessible (cliquable pour y revenir)
     -complete     : terminee (titre avec check)
     -unreachable  : pas encore atteignable (grisee, repliee)
     .js-current-step : double de -current cote JS
   On NE TOUCHE PAS a la mecanique depliage/repliage (geree par le JS PS
   via la classe -current). On style juste l'apparence.
   =========================================================== */

body.page-order .checkout-step {
  background: var(--h2j-bg-card, #ffffff);
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin: 0 0 16px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

body.page-order .checkout-step:last-child {
  margin-bottom: 0;
}

/* Etape active : bordure accent + ombre legerement plus marquee */
body.page-order .checkout-step.-current,
body.page-order .checkout-step.js-current-step {
  border-color: var(--cubx-accent, #e91e63);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}

/* Etape non atteignable : grisee, en retrait */
body.page-order .checkout-step.-unreachable {
  opacity: 0.55;
}

/* Etape terminee mais repliee : reste cliquable, hover discret */
body.page-order .checkout-step.-reachable:not(.-current):hover {
  border-color: var(--cubx-accent, #e91e63);
}


/* ===========================================================
   3. EN-TETE D'ETAPE — .step-title
   -----------------------------------------------------------
   Markup PS : <h1 class="step-title js-step-title h3">
                 <i class="material-icons done">...</i>
                 <span class="step-number">1</span>
                 Titre
                 <span class="step-edit"><i class="material-icons edit">..</i> Edit</span>
               </h1>
   =========================================================== */

body.page-order .step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
  cursor: default;
  line-height: 1.3;
}

/* L'etape reachable non-courante : le titre devient cliquable */
body.page-order .checkout-step.-reachable:not(.-current) .step-title {
  cursor: pointer;
}

/* Pastille numero d'etape */
body.page-order .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--h2j-bg-light, #f8f7ff);
  border: 1px solid var(--h2j-border, #e5e7eb);
  color: var(--h2j-text-light, #6b7280);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* Etape courante : pastille accent pleine */
body.page-order .checkout-step.-current .step-number {
  background: var(--cubx-accent, #e91e63);
  border-color: var(--cubx-accent, #e91e63);
  color: #ffffff;
}

/* Icone "done" (check) — visible seulement sur etape -complete.
   PS l'affiche/masque deja via son CSS d'origine ; en standalone CUBX
   le CSS Classic est coupe donc on pilote l'affichage nous-memes. */
body.page-order .step-title .material-icons.done {
  display: none;
  flex-shrink: 0;
  font-size: 22px;
  color: var(--h2j-success, #10b981);
}

body.page-order .checkout-step.-complete .step-title .material-icons.done {
  display: inline-flex;
}

/* Quand le check est visible sur une etape complete, on masque le numero
   (PS fait pareil nativement : check XOR numero) */
body.page-order .checkout-step.-complete:not(.-current) .step-number {
  display: none;
}

/* Lien "Edit" a droite du titre */
body.page-order .step-edit {
  display: none;            /* masque par defaut */
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--cubx-accent, #e91e63);
  cursor: pointer;
}

/* Edit visible uniquement sur une etape terminee et repliee */
body.page-order .checkout-step.-complete.-reachable:not(.-current) .step-edit {
  display: inline-flex;
}

body.page-order .step-edit .material-icons.edit {
  font-size: 16px;
}

body.page-order .step-edit:hover {
  color: var(--cubx-accent-2, #c2185b);
  text-decoration: underline;
}

/* Corps de l'etape — le bloc .content sous le titre.
   PS gere l'affichage/masquage de .content via la classe -current sur la
   section parente (CSS d'origine). En standalone CUBX ce CSS est coupe :
   on reproduit la regle (content visible SEULEMENT sur l'etape courante). */
body.page-order .checkout-step .content {
  padding: 0 22px 22px;
  border-top: 1px solid var(--h2j-border, #e5e7eb);
  padding-top: 20px;
}

body.page-order .checkout-step:not(.-current) .content {
  display: none;
}


/* ===========================================================
   4. ETAPE 1 — Personal Information
   -----------------------------------------------------------
   Classes PS : .identity (client connecte), .nav-inline / .nav-link
   (onglets invite/login), .tab-content / .tab-pane.
   =========================================================== */

body.page-order #checkout-personal-information-step .identity {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order #checkout-personal-information-step .content > p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--h2j-text-light, #6b7280);
}

body.page-order #checkout-personal-information-step .content > p small {
  font-size: 12px;
}

/* Onglets "Order as a guest | Sign in" (invite non connecte) */
body.page-order .nav-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--h2j-border, #e5e7eb);
}

body.page-order .nav-inline .nav-item {
  margin: 0;
}

body.page-order .nav-inline .nav-link {
  display: inline-block;
  padding: 6px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--h2j-text-light, #6b7280);
  border: 0;
  background: transparent;
  cursor: pointer;
}

body.page-order .nav-inline .nav-link.active {
  color: var(--cubx-accent, #e91e63);
}

body.page-order .nav-inline .nav-separator {
  color: var(--h2j-border, #e5e7eb);
}

/* Panneaux d'onglet */
body.page-order .tab-content .tab-pane:not(.active) {
  display: none;
}


/* ===========================================================
   5. ETAPE 2 — Addresses
   -----------------------------------------------------------
   Classes PS : .js-address-form, .address-selector, .js-address-item /
   .address-item (+ .selected), .radio-block, .custom-radio,
   .address-alias.h4, .address, .address-footer, .edit-address /
   .delete-address, .add-address, .alert.alert-danger.js-address-error.
   =========================================================== */

body.page-order .address-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 14px;
}

/* Une carte adresse selectionnable */
body.page-order .address-item {
  display: block;
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--h2j-bg-card, #ffffff);
  transition: border-color 150ms ease, background 150ms ease;
}

body.page-order .address-item:hover {
  border-color: var(--cubx-accent, #e91e63);
}

/* Carte adresse selectionnee : bordure accent + fond creme tres leger */
body.page-order .address-item.selected {
  border-color: var(--cubx-accent, #e91e63);
  background: var(--h2j-bg-light, #f8f7ff);
}

/* Bloc radio + label dans la carte adresse */
body.page-order .address-item .radio-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Le radio custom PS — .custom-radio est aussi style dans theme-forms.css ;
   ici on assure juste l'alignement vertical en haut de carte */
body.page-order .address-item .custom-radio {
  margin-top: 2px;
  flex-shrink: 0;
}

body.page-order .address-alias.h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order .address-item .address {
  font-size: 13px;
  line-height: 1.55;
  color: var(--h2j-text-light, #6b7280);
}

/* Pied de carte adresse : liens Edit / Delete */
body.page-order .address-footer {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--h2j-border, #e5e7eb);
}

body.page-order .address-footer a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cubx-accent, #e91e63);
}

body.page-order .address-footer a .material-icons {
  font-size: 16px;
}

body.page-order .address-footer a:hover {
  color: var(--cubx-accent-2, #c2185b);
  text-decoration: underline;
}

/* Lien "add new address" -- espace reduit entre le bloc adresse et le lien */
body.page-order .add-address {
  margin: 0 0 10px;
}

body.page-order .add-address a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cubx-accent, #e91e63);
}

body.page-order .add-address a .material-icons {
  font-size: 18px;
}

body.page-order .add-address a:hover {
  color: var(--cubx-accent-2, #c2185b);
  text-decoration: underline;
}

/* Lien "billing address differs..." : remplace par le bloc card
   .cubx-checkout-invoice-card (override addresses.tpl v2.5.267). */

body.page-order .cubx-checkout-invoice-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 0 0;
  padding: 18px 20px;
  background: var(--cubx-bg, var(--h2j-bg, #fffef9));
  border: 1px solid var(--cubx-border, var(--h2j-border, #e8e0d0));
  border-radius: var(--cubx-radius, 8px);
}

body.page-order .cubx-checkout-invoice-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cubx-accent, #d4af37) 10%, transparent);
  color: var(--cubx-accent, #d4af37);
}

body.page-order .cubx-checkout-invoice-card__icon .material-icons {
  font-size: 22px;
}

body.page-order .cubx-checkout-invoice-card__content {
  flex: 1 1 auto;
}

body.page-order .cubx-checkout-invoice-card__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order .cubx-checkout-invoice-card__text {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--h2j-text-light, #6b7280);
  line-height: 1.5;
}

body.page-order .cubx-checkout-invoice-card__btn {
  display: inline-block;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cubx-accent, #d4af37);
  border: 1px solid var(--cubx-accent, #d4af37);
  border-radius: var(--cubx-radius, 8px);
  background: transparent;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

body.page-order .cubx-checkout-invoice-card__btn:hover {
  background: var(--cubx-accent, #d4af37);
  color: #ffffff;
  text-decoration: none;
}

/* Titres de section dans l'etape adresses (Shipping / Invoice Address) */
body.page-order #checkout-addresses-step h2.h4 {
  margin: 4px 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
}

/* --- 5bis. FORM D'ADRESSE dans le checkout (inline) ----------- */
/* Quand l'utilisateur clique "ajouter" ou "modifier" une adresse,
   un form s'affiche inline dans l'etape 2. Les champs (Alias, Prenom,
   Nom, Adresse, CP, Ville, Pays, Tel) sont en markup Classic
   .form-group.row. On applique le meme traitement que le form invite :
   labels masques (placeholder only), commentaires masques, fond creme. */

body.page-order #checkout-addresses-step .js-address-form .form-control-label {
  display: none;
}

body.page-order #checkout-addresses-step .js-address-form .form-control-comment {
  display: none;
}

body.page-order #checkout-addresses-step .js-address-form .form-control {
  background: var(--cubx-bg, var(--h2j-bg, #ffffff));
  border-color: var(--cubx-border, var(--h2j-border, #e5e7eb));
}

/* Phone dans le form d'adresse : meme traitement que l'etape 1 */
body.page-order #checkout-addresses-step .h2jphone-input,
body.page-order #checkout-addresses-step input[type="tel"],
body.page-order #checkout-addresses-step .h2jphone-flag-btn,
body.page-order #checkout-addresses-step .h2jphone-flag-btn:hover,
body.page-order #checkout-addresses-step .h2jphone-flag-btn:focus {
  background: var(--cubx-bg, var(--h2j-bg, #ffffff)) !important;
  border-color: var(--cubx-border, var(--h2j-border, #e5e7eb)) !important;
}

/* Titre d'adresse (facturation / livraison) */
body.page-order .cubx-checkout-address-info {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order .cubx-checkout-address-title {
  margin: 20px 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
}

/* Bouton CONTINUER etape 2 : centre + pleine largeur */
body.page-order #checkout-addresses-step .clearfix:has(button.continue),
body.page-order #checkout-addresses-step .clearfix:has(.btn-primary) {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

body.page-order #checkout-addresses-step button.continue {
  width: 100%;
}


/* ===========================================================
   6. ETAPE 3 — Shipping Method
   -----------------------------------------------------------
   Classes PS : .delivery-options-list, .delivery-options,
   .delivery-option / .js-delivery-option, .carrier / .carrier-name /
   .carrier-delay / .carrier-price, .carrier-logo, .carrier-extra-content,
   .order-options, #delivery_message, .custom-checkbox.
   =========================================================== */

body.page-order .delivery-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}

/* Une option transporteur */
body.page-order .delivery-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--h2j-bg-card, #ffffff);
  transition: border-color 150ms ease, background 150ms ease;
}

body.page-order .delivery-option:hover {
  border-color: var(--cubx-accent, #e91e63);
}

/* L'option contient un radio coche -> carte mise en avant.
   :has() est largement supporte (Chrome cible POS + navigateurs modernes) ;
   fallback gracieux : sans :has() la carte reste neutre, 100% fonctionnel. */
body.page-order .delivery-option:has(input[type="radio"]:checked) {
  border-color: var(--cubx-accent, #e91e63);
  background: var(--h2j-bg-light, #f8f7ff);
}

body.page-order .delivery-option .custom-radio {
  flex-shrink: 0;
}

/* Label de l'option (occupe tout l'espace restant) */
body.page-order .delivery-option label {
  flex: 1 1 auto;
  margin: 0;
  cursor: pointer;
}

body.page-order .delivery-option .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

body.page-order .delivery-option .carrier-logo img {
  max-height: 34px;
  width: auto;
}

body.page-order .carrier-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order .carrier-delay {
  font-size: 13px;
  color: var(--h2j-text-light, #6b7280);
}

body.page-order .carrier-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--cubx-accent, #e91e63);
  margin-left: auto;
}

/* Contenu additionnel transporteur (point relais, etc.) — injecte par PS/module */
body.page-order .carrier-extra-content:not(:empty) {
  margin: 4px 0 8px;
  padding: 12px 14px;
  background: var(--h2j-bg-light, #f8f7ff);
  border-radius: 8px;
  font-size: 13px;
}

/* Exception — message de livraison h2jlogistics (.h2jlog-carrier-msg) :
   ce bloc apporte deja son propre habillage (fond creme, bordure, pastille
   icone, facon bloc CGV). On neutralise donc le cadre generique ci-dessus
   quand le conteneur extra-content ne porte que ce message, pour eviter un
   double encadrement (cadre mauve CUBX autour du bloc creme h2jlogistics).
   La regle generique reste active pour tout autre extra-content (point
   relais d'un transporteur tiers, etc.). */
body.page-order .carrier-extra-content:has(.h2jlog-carrier-msg) {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* Bloc commentaire de commande + options (recyclable, cadeau) */
body.page-order .order-options {
  margin: 14px 0 18px;
  padding: 16px;
  background: var(--h2j-bg-light, #f8f7ff);
  border-radius: 10px;
}

body.page-order .order-options #delivery label,
body.page-order .order-options label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order .order-options textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: 8px;
  background: var(--h2j-bg-card, #ffffff);
  color: var(--h2j-text, #1a1f2c);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

body.page-order .order-options textarea:focus {
  outline: 2px solid var(--cubx-accent, #e91e63);
  outline-offset: -1px;
  border-color: var(--cubx-accent, #e91e63);
}

/* Checkboxes recyclable / gift — .custom-checkbox aussi style theme-forms.css ;
   ici on assure juste l'espacement vertical entre les options */
body.page-order .order-options .custom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
}

body.page-order .order-options .custom-checkbox label {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  color: var(--h2j-text-light, #6b7280);
}

/* Bloc message cadeau (collapse PS) */
body.page-order #gift.collapse:not(.in) {
  display: none;
}

body.page-order #gift {
  margin-top: 10px;
}

/* Conteneurs de hooks transporteur — vides en dev, remplis a la bascule v2.
   Defensif : pas de marge/padding fantome si le hook sort vide. */
body.page-order #hook-display-before-carrier:not(:empty),
body.page-order #hook-display-after-carrier:not(:empty) {
  margin: 12px 0;
}

/* Bouton CONTINUER etape 3 : force en bloc SOUS les options.
   Le bouton .continue est dans le <form> de livraison, a cote des
   .delivery-option. PS le positionne via float Bootstrap (inerte).
   On force le conteneur du form en flex-wrap pour que le bouton
   tombe sur une ligne entiere sous les options. Le bouton est dans
   un .clearfix ou directement enfant du form -- on le cible large.
   On force aussi le form lui-meme en flex column pour empiler. */
body.page-order #checkout-delivery-step form {
  display: flex;
  flex-direction: column;
}

body.page-order #checkout-delivery-step form > .clearfix,
body.page-order #checkout-delivery-step form > footer,
body.page-order #checkout-delivery-step .form-footer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  order: 999;
}

body.page-order #checkout-delivery-step button.continue {
  width: 100%;
}

/* Message "aucun transporteur disponible" — deja .alert.alert-danger, voir section 8 */


/* ===========================================================
   7. ETAPE 4 — Payment
   -----------------------------------------------------------
   Classes PS : .payment-options, .payment-option, #..-container,
   .custom-radio, .js-additional-information / .additional-information,
   .js-payment-option-form, #conditions-to-approve / .js-conditions-to-approve,
   .condition-label, #payment-confirmation / .js-payment-confirmation.
   =========================================================== */

body.page-order .payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}

/* Une option de paiement */
body.page-order .payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--h2j-bg-card, #ffffff);
  transition: border-color 150ms ease, background 150ms ease;
}

body.page-order .payment-option:hover {
  border-color: var(--cubx-accent, #e91e63);
}

body.page-order .payment-option:has(input[type="radio"]:checked) {
  border-color: var(--cubx-accent, #e91e63);
  background: var(--h2j-bg-light, #f8f7ff);
}

body.page-order .payment-option .custom-radio {
  flex-shrink: 0;
}

body.page-order .payment-option label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 1 1 auto;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order .payment-option label img {
  max-height: 28px;
  width: auto;
}

/* Le bouton "Choose" non-JS (.ps-hidden-by-js) — PS le masque deja en JS ;
   on n'y touche pas, juste un fallback si jamais visible */
body.page-order .payment-option .ps-hidden-by-js {
  margin: 0;
}

/* Info additionnelle + formulaire de l'option (deplies par le JS PS) */
body.page-order .js-additional-information:not(.ps-hidden),
body.page-order .additional-information:not(.ps-hidden) {
  margin: 0 0 10px;
  padding: 14px 16px;
  background: var(--h2j-bg-light, #f8f7ff);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--h2j-text-light, #6b7280);
}

body.page-order .js-additional-information.ps-hidden,
body.page-order .additional-information.ps-hidden,
body.page-order .js-payment-option-form.ps-hidden {
  display: none;
}

body.page-order .js-payment-option-form:not(.ps-hidden) {
  margin: 0 0 12px;
}

/* Conditions a approuver (CGV) */
body.page-order #conditions-to-approve {
  margin: 14px 0;
  padding: 16px;
  background: var(--h2j-bg-light, #f8f7ff);
  border-radius: 10px;
}

body.page-order #conditions-to-approve ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-order #conditions-to-approve li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

body.page-order #conditions-to-approve li + li {
  margin-top: 10px;
}

body.page-order #conditions-to-approve .custom-checkbox {
  flex-shrink: 0;
  margin-top: 1px;
}

body.page-order #conditions-to-approve .condition-label {
  flex: 1 1 auto;
}

body.page-order #conditions-to-approve .condition-label label,
body.page-order #conditions-to-approve .js-terms {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order #conditions-to-approve .condition-label a {
  font-weight: 600;
}

/* Messages d'etat paiement (gratuit / transaction maj) */
body.page-order .cart-payment-step-not-needed-info,
body.page-order .cart-payment-step-refreshed-info {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--h2j-bg-light, #f8f7ff);
  border-radius: 8px;
  font-size: 13px;
  color: var(--h2j-text, #1a1f2c);
}

/* Bloc de confirmation final + bouton "Place order" */
body.page-order #payment-confirmation {
  margin-top: 18px;
}

body.page-order #payment-confirmation .ps-shown-by-js {
  display: block;
}

/* Conteneurs de hooks paiement — vides en dev, defensif */
body.page-order #checkout-payment-step .content > div[id^="hook"]:not(:empty) {
  margin: 12px 0;
}


/* ===========================================================
   7bis. CENTRAGE DU BLOC PAIEMENT (v2.5.277 — REVOQUE v2.5.278)
   -----------------------------------------------------------
   Initialement : max-width 480px + margin auto sur
   .js-payment-option-form et #payment-confirmation pour centrer
   le form SystemPay + bouton PAYER. Revoque en v2.5.278 car
   suite au deploy, le bloc CB n'apparait plus du tout sur le
   checkout (radio coche mais form invisible). A reprendre une
   fois identifie le vrai conteneur SystemPay (peut-etre pas
   .js-payment-option-form mais .additional-information ou un
   id propre SystemPay).
   =========================================================== */


/* ===========================================================
   7ter. UX CGV — Acceptation en HAUT de l'etape Paiement (v2.5.280)
   -----------------------------------------------------------
   Logique UX : le client doit cocher les CGV AVANT de pouvoir
   payer (sinon le bouton PAYER reste disabled). Or PS rend le
   #conditions-to-approve APRES le bouton PAYER -> confusion UX :
   l'user clique PAYER, rien ne se passe (silent fail visible),
   il doit scroller plus bas pour voir la checkbox CGV.

   Decision david v2.5.280 : reordonner le contenu de l'etape
   Paiement en CSS pur (flex order) sans toucher au markup PS
   (zero risque sur le JS PS qui valide le bouton).

   Ordre cible :
     1. #conditions-to-approve (CGV checkbox)         <- en haut
     2. .payment-options (radio + form CB SystemPay)
     3. .js-additional-information / .js-payment-option-form
     4. #payment-confirmation (bouton PAYER)          <- en bas

   On stylise aussi le bloc CGV comme une card type
   .cubx-checkout-invoice-card (etape 2 adresse facturation) :
   fond creme, icone cadenas a gauche, titre "Acceptation des CGV",
   checkbox + texte engageant. Coherence visuelle de tout le tunnel.
   =========================================================== */

/* Le .content de l'etape paiement passe en flex column pour
   piloter l'ordre des enfants via 'order'. */
body.page-order #checkout-payment-step .content {
  display: flex;
  flex-direction: column;
}

/* Reordonnancement : CGV en haut, paiement au milieu, bouton en bas. */
body.page-order #checkout-payment-step #conditions-to-approve {
  order: 1;
  margin: 0 0 18px;
}

body.page-order #checkout-payment-step .payment-options {
  order: 2;
}

body.page-order #checkout-payment-step #payment-option-1-additional-information,
body.page-order #checkout-payment-step #pay-with-payment-option-1-form {
  order: 2;
}

body.page-order #checkout-payment-step #payment-confirmation {
  order: 3;
  margin-top: 18px;
}

/* v2.5.282 — Bloc reassurance (cubx-pp-card--reass) en dernier (order 4),
   apres le bouton PAYER. Marge top pour aerer. Le bloc lui-meme garde
   son styling natif h2jecosystem (cubx-pp-reassurance.css), on ne fait
   que positionner ici.
   v2.5.283 — margin-top reduit 20px -> 14px (decision UX David L1 : reduire
   l'ecart bouton PAYER/reassurance pour un rythme plus dense). */
body.page-order #checkout-payment-step .cubx-pp-card--reass {
  order: 4;
  margin-top: 14px;
}

/* Hooks PS divers (displayPaymentTop, displayCheckoutBeforeConfirmation,
   etc.) gardent leur ordre naturel (order: 0 par defaut = avant tout)
   sauf si on les force. On les laisse tels quels, ils peuvent contenir
   des messages d'erreur que l'user doit voir en priorite. */

/* --- Styling card CGV — inspiration .cubx-checkout-invoice-card --- */

/* Override de la regle generique 'section 7. ETAPE 4 - Conditions a
   approuver' qui posait un fond creme leger basique. On surcharge ici
   pour rendre la card plus visible, avec icone cadenas + titre. */
body.page-order #checkout-payment-step #conditions-to-approve {
  position: relative;
  padding: 18px 20px 18px 76px;
  background: var(--cubx-bg, var(--h2j-bg, #fffef9));
  border: 1px solid var(--cubx-border, var(--h2j-border, #e8e0d0));
  border-radius: var(--cubx-radius, 8px);
}

/* Icone cadenas a gauche (rond accent leger). On utilise un pseudo-element
   ::before avec un SVG cadenas inline encode en data URI. Pas de
   dependance Material Icons (qui peut etre coupe en standalone CUBX). */
body.page-order #checkout-payment-step #conditions-to-approve::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--cubx-accent, #d4af37) 12%, transparent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* Titre injecte par JS dans payment.tpl (cf. v2.5.280 script).
   .cubx-cgv-title est ajoute par le script JS au-dessus de la <ul>
   des conditions a approuver. */
body.page-order #checkout-payment-step #conditions-to-approve .cubx-cgv-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
  line-height: 1.3;
}

/* La <ul> des conditions : pas de marge top (le titre fait office) */
body.page-order #checkout-payment-step #conditions-to-approve ul {
  margin: 0;
  padding: 0;
}

/* Le label de la checkbox CGV : texte un peu plus engageant via JS,
   on assure juste le styling visuel coherent avec .cubx-checkout-invoice-card__text */
body.page-order #checkout-payment-step #conditions-to-approve .condition-label label,
body.page-order #checkout-payment-step #conditions-to-approve .js-terms {
  font-size: 13px;
  line-height: 1.55;
  color: var(--h2j-text-light, #6b7280);
}

/* Les liens CGV + privacy policy en couleur accent + soulignement au hover */
body.page-order #checkout-payment-step #conditions-to-approve .condition-label a {
  color: var(--cubx-accent, #d4af37);
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease;
}

body.page-order #checkout-payment-step #conditions-to-approve .condition-label a:hover {
  color: var(--cubx-accent-2, #c2185b);
  text-decoration: underline;
}

/* Mobile : padding gauche legerement reduit + icone scaled down */
@media (max-width: 599px) {
  body.page-order #checkout-payment-step #conditions-to-approve {
    padding: 16px 16px 16px 64px;
  }

  body.page-order #checkout-payment-step #conditions-to-approve::before {
    top: 16px;
    left: 14px;
    width: 36px;
    height: 36px;
  }

  body.page-order #checkout-payment-step #conditions-to-approve .cubx-cgv-title {
    font-size: 14px;
  }
}


/* ===========================================================
   8. BOUTONS — .btn-primary / .continue / "Place order"
   -----------------------------------------------------------
   PS Classic genere .btn.btn-primary.continue.float-xs-right (etapes
   intermediaires) et .btn.btn-primary.center-block (Place order final).
   Bootstrap coupe -> ces classes sont nues. On les restyle en bouton CUBX
   accent, coherent avec .cubx-cart-page__checkout-btn (theme-cart.css).
   =========================================================== */

body.page-order .checkout-step .btn-primary,
body.page-order .checkout-step button.continue,
body.page-order #payment-confirmation .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 8px;
  background: var(--cubx-accent, #e91e63);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 150ms ease, transform 100ms ease;
}

body.page-order .checkout-step .btn-primary:hover,
body.page-order .checkout-step button.continue:hover,
body.page-order #payment-confirmation .btn-primary:hover {
  background: var(--cubx-accent-2, #c2185b);
  color: #ffffff;
  text-decoration: none;
}

body.page-order .checkout-step .btn-primary:active,
body.page-order .checkout-step button.continue:active,
body.page-order #payment-confirmation .btn-primary:active {
  transform: translateY(1px);
}

/* Bouton desactive (Place order sans option de paiement choisie) */
body.page-order #payment-confirmation .btn-primary.disabled,
body.page-order #payment-confirmation .btn-primary:disabled {
  background: var(--h2j-border, #e5e7eb);
  color: var(--h2j-text-light, #6b7280);
  cursor: not-allowed;
}

/* "Place order" final : pleine largeur, plus haut (cible tactile, signal fort) */
body.page-order #payment-confirmation .btn-primary {
  display: flex;
  width: 100%;
  height: 54px;
  font-size: 15px;
}

/* Float Bootstrap inerte -> on aligne le bouton Continue a droite proprement.
   Le wrapper PS est .clearfix ; on le passe en flex pour l'alignement. */
body.page-order .checkout-step .clearfix:has(button.continue),
body.page-order .checkout-step .clearfix:has(.btn-primary) {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}


/* ===========================================================
   9. ALERTES — .alert (danger / warning / success / info)
   -----------------------------------------------------------
   Bootstrap coupe -> .alert n'a aucun style. PS s'en sert pour les
   erreurs d'adresse, l'absence de transporteur, l'alerte conditions
   non cochees, etc. On donne un style minimal coherent.

   Le .notifications-container en haut de page (avant le checkout)
   est masque par le burger menu en position fixed. On le deplace
   sous le titre avec un margin-top + z-index pour rester visible.
   =========================================================== */

body.page-order .notifications-container {
  position: relative;
  z-index: 10;
  margin: 60px 16px 0;
}

body.page-order .notifications-container:empty {
  margin: 0;
}

/* Honeypot h2jforms : doit etre invisible (anti-bot).
   Sur le checkout, le champ est rendu par le parent Classic sans
   le CSS de masquage h2jforms -> on le masque ici. */
body.page-order #field-h2jforms_hp_field,
body.page-order .cubx-ff-row--h2jforms_hp_field,
body.page-order [for="field-h2jforms_hp_field"] {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* Aussi masquer le wrapper Classic (.form-group) du honeypot */
body.page-order .form-group:has(#field-h2jforms_hp_field) {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

body.page-order .alert {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
}

body.page-order .alert-danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: #b91c1c;
}

body.page-order .alert-warning {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.30);
  color: #92400e;
}

body.page-order .alert-success {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.30);
  color: #047857;
}

body.page-order .alert-info {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
  color: #1d4ed8;
}

/* Erreur d'adresse masquee par defaut (PS la revele via JS / inline style) */
body.page-order .js-address-error[style*="display: none"],
body.page-order .js-address-error[style*="display:none"] {
  display: none !important;
}


/* ===========================================================
   10. FIX — Modal fantome .js-checkout-modal
   -----------------------------------------------------------
   Le modal de confirmation PS (.modal.fade.js-checkout-modal) fuit en
   display:block car le CSS Bootstrap .modal.fade (qui le pose en
   display:none par defaut) n'est plus charge. Resultat : un "x" parasite
   en bas de page.
   Fix : on masque le modal par defaut. PS l'ouvre via la classe .in
   (Bootstrap 4) ou .show, ou via un inline style display:block pose par
   son propre JS au moment de l'ouverture -> on ne casse pas l'ouverture,
   on retablit juste l'etat ferme par defaut.
   =========================================================== */

body.page-order .modal.fade.js-checkout-modal {
  display: none;
}

body.page-order .modal.fade.js-checkout-modal.in,
body.page-order .modal.fade.js-checkout-modal.show {
  display: block;
}

/* Si PS pose un inline style display:block a l'ouverture, il gagne sur la
   regle ci-dessus (specificite inline) -> ouverture preservee.
   Quand le modal est reellement ouvert, on lui donne un minimum de structure
   pour qu'il soit lisible (Bootstrap coupe). */
body.page-order .js-checkout-modal .modal-dialog {
  max-width: 520px;
  margin: 8vh auto;
  background: var(--h2j-bg-card, #ffffff);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

body.page-order .js-checkout-modal .modal-content {
  padding: 20px 22px;
}

body.page-order .js-checkout-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

body.page-order .js-checkout-modal .modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order .js-checkout-modal .close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--h2j-text-light, #6b7280);
  cursor: pointer;
}

body.page-order .js-checkout-modal .close:hover {
  color: var(--h2j-text, #1a1f2c);
}

/* Backdrop Bootstrap (si PS en pose un) */
body.page-order .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1040;
}

body.page-order .modal.js-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow-y: auto;
}


/* ===========================================================
   11. RESPONSIVE — Mobile / tablette
   -----------------------------------------------------------
   En dessous de 992px : le summary passe sous les etapes (pleine
   largeur), il perd son sticky. En dessous de 600px : paddings reduits.
   =========================================================== */

@media (max-width: 991px) {
  body.page-order #content > .row {
    flex-direction: column;
  }

  body.page-order .cart-grid-body,
  body.page-order .cart-grid-right {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }

  body.page-order .cart-grid-right {
    position: static;
    top: auto;
  }
}

@media (max-width: 599px) {
  body.page-order #content-wrapper {
    padding: 16px 10px 40px;
  }

  body.page-order .step-title {
    padding: 16px;
    font-size: 15px;
  }

  body.page-order .checkout-step .content {
    padding: 16px;
    padding-top: 16px;
  }

  body.page-order .checkout-step .btn-primary,
  body.page-order .checkout-step button.continue {
    width: 100%;
  }

  body.page-order .checkout-step .clearfix:has(button.continue),
  body.page-order .checkout-step .clearfix:has(.btn-primary) {
    justify-content: stretch;
  }

  body.page-order .delivery-option .row {
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-order .carrier-price {
    margin-left: 0;
  }
}


/* ===========================================================
   12. FORM INVITE (creation de compte) + FORM CONNEXION
   -----------------------------------------------------------
   LOT 4 -- v2.5.262. Habillage des deux formulaires de l'etape 1
   du tunnel : creation de compte invite (markup CUBX cubx-ff-*
   genere par _partials/form-fields.tpl + customer-form.tpl) et
   connexion (markup Classic, champs passes par form-fields.tpl).

   Le markup CUBX cubx-ff-* est genere UNIQUEMENT sur le checkout
   (scoping page_name == 'checkout', form-fields.tpl v2.5.260). Mais
   chaque champ reste enveloppe dans le wrapper Bootstrap Classic
   .form-group.row (label col-md-3 + col-md-6 + comment col-md-3)
   que le {extends} ne peut pas retirer. -> on NEUTRALISE ce wrapper
   ici en CSS : la grille 3 colonnes devient un bloc simple, le label
   passe au-dessus du champ, le comment col-md-3 (vide ou "Optional")
   est masque.

   Reference visuelle : /inscription-h2j (form custom h2jforms).
   Tokens : --cubx-input-* (theme-forms.css) + --cubx-accent / accent-2
   + --h2j-* (theme-core.css :root). AUCUNE couleur en dur.
   =========================================================== */

/* --- 12.1 Carte + structure generale du form ------------------ */

/* La carte qui enveloppe le form (customer-form.tpl genere .cubx-ff-card) */
body.page-order .cubx-ff-card {
  margin: 0;
}

/* Conteneur des champs : pile verticale, espacement regulier */
body.page-order .cubx-ff-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Reordonnancement des champs : gender, prenom, nom, birthday, phone,
   email, password, math, turnstile, optin, continuer. */
body.page-order .cubx-ff-row--id_gender     { order: 1; }
body.page-order .cubx-ff-row--firstname     { order: 2; }
body.page-order .cubx-ff-row--lastname      { order: 3; }
body.page-order .cubx-ff-row--birthday      { order: 4; }
body.page-order .cubx-ff-row--phone         { order: 5; }
body.page-order .cubx-ff-row--email         { order: 6; }
body.page-order .cubx-ff-row--password      { order: 7; }
body.page-order .cubx-ff-row--optin         { order: 20; }
body.page-order .cubx-ff-row--h2jforms_hp_field { order: 99; }
/* Math challenge + Turnstile sont injectes par hook, pas dans cubx-ff-row.
   Ils heritent order:0 par defaut -> on les pousse apres password. */
body.page-order .h2j-math-challenge         { order: 8; }
body.page-order .h2j-turnstile-wrap,
body.page-order [class*="turnstile"]         { order: 9; }

/* Chaque ligne de champ -- on retire toute notion de grille Bootstrap.
   Le .cubx-ff-row enveloppe un .form-group.row qu'on aplatit. */
body.page-order .cubx-ff-row,
body.page-order .cubx-ff-row .form-group.row {
  display: block;
  margin: 0;
  padding: 0;
}

/* Le label (col-md-3) : MASQUE sur le checkout (comme /inscription-h2j :
   seul le placeholder est visible, pas de label au-dessus). */
body.page-order .cubx-ff-row .form-control-label {
  display: none;
}

/* L'asterisk "required" : masque avec le label */
body.page-order .cubx-ff-row .form-control-label.required::after {
  display: none;
}

/* La colonne du champ (col-md-6) : pleine largeur */
body.page-order .cubx-ff-row .js-input-column {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}

/* La 3e colonne Bootstrap (col-md-3 "Optional" / commentaire) : masquee.
   Les hints PS bruts ("Seules les lettres...", "Optionnel") n'ont pas
   leur place dans le tunnel -- meme parti pris que /inscription-h2j. */
body.page-order .cubx-ff-row .form-control-comment {
  display: none;
}

/* Idem pour les .cubx-ff-comment inline (hints PS "Ex. : 31/05/1970",
   "Seules les lettres et le point...") : masques sur le checkout. */
body.page-order .cubx-ff-comment {
  display: none;
}


/* --- 12.2 Honeypot : masquage total --------------------------- */

/* Le honeypot h2jforms (h2jforms_hp_field) est genere comme un champ
   visible normal par form-fields.tpl. Il DOIT etre invisible aux humains
   tout en restant dans le DOM (les bots le remplissent, pas les humains).
   On masque toute la .cubx-ff-row correspondante -- pas display:none sur
   le seul input (on veut que toute la ligne label+champ disparaisse). */
body.page-order .cubx-ff-row--h2jforms_hp_field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* --- 12.3 Inputs texte (firstname, lastname, email, birthday) - */

body.page-order .cubx-ff-input {
  display: block;
  width: 100%;
  min-height: var(--cubx-input-height, 44px);
  padding: var(--cubx-input-padding-y, 10px) var(--cubx-input-padding-x, 14px);
  border: 1px solid var(--cubx-border, var(--h2j-border, #e5e7eb));
  border-radius: var(--cubx-radius, 8px);
  background: var(--cubx-bg, var(--h2j-bg, #ffffff));
  color: var(--h2j-text, #1a1f2c);
  font-family: inherit;
  font-size: var(--cubx-input-font-size, 14px);
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.page-order .cubx-ff-input::placeholder {
  color: var(--cubx-input-placeholder, var(--h2j-text-light, #6b7280));
  opacity: 1;
}

body.page-order .cubx-ff-input:focus {
  outline: none;
  border-color: var(--cubx-accent, #e91e63);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cubx-accent, #e91e63) 12%, transparent);
}

/* Select CUBX (cas state/country dans le form adresse, reutilise ici) */
body.page-order .cubx-ff-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.41 0 6 4.59 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}


/* --- 12.4 Gender cards (id_gender : M. / Mme) ------------------ */

body.page-order .cubx-ff-gender {
  display: flex;
  gap: 10px;
}

body.page-order .cubx-ff-gender-card {
  flex: 1 1 0;
  margin: 0;
  cursor: pointer;
}

/* Le radio natif : masque (la carte fait office de controle visuel) */
body.page-order .cubx-ff-gender-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

body.page-order .cubx-ff-gender-card-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cubx-input-height, 44px);
  padding: 8px 14px;
  border: 1px solid var(--cubx-border, var(--h2j-border, #e5e7eb));
  border-radius: var(--cubx-radius, 8px);
  background: var(--cubx-bg, var(--h2j-bg, #ffffff));
  color: var(--h2j-text-light, #6b7280);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

body.page-order .cubx-ff-gender-card-inner .material-icons {
  font-size: 20px;
}

body.page-order .cubx-ff-gender-card:hover .cubx-ff-gender-card-inner {
  border-color: var(--cubx-accent, #e91e63);
}

/* Carte selectionnee : bordure + fond accent leger + texte accent */
body.page-order .cubx-ff-gender-card input[type="radio"]:checked + .cubx-ff-gender-card-inner {
  border-color: var(--cubx-accent, #e91e63);
  background: var(--h2j-bg-light, #f8f7ff);
  color: var(--cubx-accent, #e91e63);
}

/* Accessibilite : focus clavier visible sur la carte */
body.page-order .cubx-ff-gender-card input[type="radio"]:focus-visible + .cubx-ff-gender-card-inner {
  box-shadow: 0 0 0 3px var(--cubx-input-focus-ring, rgba(233, 30, 99, 0.12));
}


/* --- 12.5 Radio group generique (hors id_gender) -------------- */

body.page-order .cubx-ff-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-order .cubx-ff-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--h2j-text, #1a1f2c);
}

body.page-order .cubx-ff-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

body.page-order .cubx-ff-radio-mark {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--h2j-border, #e5e7eb);
  border-radius: 50%;
  background: var(--h2j-bg-card, #ffffff);
  transition: border-color 150ms ease;
}

body.page-order .cubx-ff-radio input[type="radio"]:checked + .cubx-ff-radio-mark {
  border-color: var(--cubx-accent, #e91e63);
  border-width: 6px;
}

body.page-order .cubx-ff-radio input[type="radio"]:focus-visible + .cubx-ff-radio-mark {
  box-shadow: 0 0 0 3px var(--cubx-input-focus-ring, rgba(233, 30, 99, 0.12));
}


/* --- 12.6 Checkbox (optin newsletter, CGV...) ----------------- */

body.page-order .cubx-ff-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

body.page-order .cubx-ff-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--cubx-accent, #e91e63);
  cursor: pointer;
}

body.page-order .cubx-ff-checkbox-text {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--h2j-text-light, #6b7280);
}

body.page-order .cubx-ff-checkbox-text a {
  color: var(--cubx-accent, #e91e63);
  font-weight: 600;
}

body.page-order .cubx-ff-checkbox-text a:hover {
  color: var(--cubx-accent-2, #c2185b);
  text-decoration: underline;
}


/* --- 12.7 Password (input + boutons oeil/sparkle + meter) ----- */

body.page-order .cubx-ff-password {
  display: block;
}

body.page-order .cubx-ff-password-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
}

/* L'input occupe l'espace, les 2 boutons sont a droite */
body.page-order .cubx-ff-password-wrap .cubx-ff-input--password {
  flex: 1 1 auto;
}

body.page-order .cubx-ff-password-generate,
body.page-order .cubx-ff-password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--cubx-input-height, 44px);
  height: var(--cubx-input-height, 44px);
  padding: 0;
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: var(--cubx-radius, 8px);
  background: var(--h2j-bg-card, #ffffff);
  color: var(--h2j-text-light, #6b7280);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

body.page-order .cubx-ff-password-generate .material-icons,
body.page-order .cubx-ff-password-toggle .material-icons {
  font-size: 20px;
}

body.page-order .cubx-ff-password-generate:hover,
body.page-order .cubx-ff-password-toggle:hover {
  border-color: var(--cubx-accent, #e91e63);
  color: var(--cubx-accent, #e91e63);
}

/* Le bouton sparkle (generateur) : accent leger pour le distinguer */
body.page-order .cubx-ff-password-generate {
  background: var(--h2j-bg-light, #f8f7ff);
  color: var(--cubx-accent, #e91e63);
}

/* Strength meter (anime par le JS du LOT 3 -- ici juste le style statique) */
body.page-order .cubx-ff-password-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
}

body.page-order .cubx-ff-password-meter-track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: var(--h2j-bg-light, #f8f7ff);
  overflow: hidden;
}

body.page-order .cubx-ff-password-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--h2j-border, #e5e7eb);
  transition: width 200ms ease, background 200ms ease;
}

/* Paliers de force -- le JS cubx-checkout-pwd.js pose data-level="0..5" */
body.page-order .cubx-ff-password-meter-fill[data-level="1"] { width: 20%;  background: var(--h2j-error, #ef4444); }
body.page-order .cubx-ff-password-meter-fill[data-level="2"] { width: 40%;  background: var(--h2j-warning, #f59e0b); }
body.page-order .cubx-ff-password-meter-fill[data-level="3"] { width: 60%;  background: #eab308; }
body.page-order .cubx-ff-password-meter-fill[data-level="4"] { width: 80%;  background: #84cc16; }
body.page-order .cubx-ff-password-meter-fill[data-level="5"] { width: 100%; background: var(--h2j-success, #10b981); }

body.page-order .cubx-ff-password-meter-label {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--h2j-text-light, #6b7280);
}

/* Legend sparkle sous le champ password */
body.page-order .cubx-ff-password-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--cubx-accent, #d4af37) 6%, transparent);
  border-left: 2px solid var(--cubx-accent, #d4af37);
  border-radius: 4px;
  font-size: 12px;
  color: var(--h2j-text-light, #6b7280);
  font-style: italic;
}

body.page-order .cubx-ff-password-legend .material-icons {
  font-size: 16px;
  color: var(--cubx-accent, #d4af37);
  flex-shrink: 0;
}

/* Password rules checklist */
body.page-order .cubx-ff-password-rules {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

@media (min-width: 500px) {
  body.page-order .cubx-ff-password-rules {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

body.page-order .cubx-ff-pwd-rule {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--h2j-text-light, #6b7280);
  transition: color 200ms ease;
}

body.page-order .cubx-ff-pwd-rule .material-icons {
  font-size: 15px;
  transition: color 200ms ease;
}

body.page-order .cubx-ff-pwd-rule.is-valid {
  color: var(--h2j-success, #10b981);
}

body.page-order .cubx-ff-pwd-rule.is-valid .material-icons {
  color: var(--h2j-success, #10b981);
}

body.page-order .cubx-ff-pwd-rule.is-invalid {
  color: var(--h2j-text-light, #9ca3af);
}


/* --- 12.8 Birthday : input texte JJ/MM/AAAA ------------------- */
/* Tant que le date picker n'est pas injecte sur le checkout (chantier
   separe), le champ birthday est un simple input texte -- il herite
   deja de .cubx-ff-input ci-dessus. Rien de specifique a ajouter ;
   ce commentaire marque juste l'emplacement pour le futur LOT picker. */


/* --- 12.9 Phone (widget h2jphone) ----------------------------- */
/* Le champ phone est wrappe cote client par h2jphone-front.js (drapeau
   +596 + hidden e164). Son CSS vient de h2jphone-front.css. On force le
   fond et la bordure pour qu'ils suivent le preset CUBX comme les autres
   inputs. Le flag-btn (selecteur pays) doit aussi etre en --cubx-bg. */
body.page-order .cubx-ff-row--phone .h2jphone-input,
body.page-order .cubx-ff-row--phone input[type="tel"],
body.page-order .cubx-ff-row--phone .h2jphone-flag-btn,
body.page-order .cubx-ff-row--phone .h2jphone-flag-btn:hover,
body.page-order .cubx-ff-row--phone .h2jphone-flag-btn:focus {
  background: var(--cubx-bg, var(--h2j-bg, #ffffff)) !important;
  border-color: var(--cubx-border, var(--h2j-border, #e5e7eb)) !important;
}


/* --- 12.10 Math challenge (FormGate) -------------------------- */
/* Injecte par H2JFormGate::injectFields() comme enfant direct de
   .cubx-ff-fields. Le markup a des styles inline (background #f8fafc,
   border #e2e8f0...) -- on les surcharge pour coller au design CUBX.
   La div porte la classe .h2j-math-challenge. */
body.page-order .cubx-ff-fields .h2j-math-challenge {
  margin: 0 !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border: 1px solid var(--cubx-border, var(--h2j-border, #e5e7eb)) !important;
  border-left: 3px solid var(--cubx-accent, #d4af37) !important;
  border-radius: var(--cubx-radius, 8px) !important;
}

body.page-order .cubx-ff-fields .h2j-math-challenge label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--h2j-text, #1a1f2c) !important;
}

body.page-order .cubx-ff-fields .h2j-math-challenge input[type="number"] {
  width: 100px !important;
  min-height: var(--cubx-input-height, 44px) !important;
  padding: var(--cubx-input-padding-y, 10px) var(--cubx-input-padding-x, 14px) !important;
  border: 1px solid var(--cubx-border, var(--h2j-border, #e5e7eb)) !important;
  border-radius: var(--cubx-radius, 8px) !important;
  background: var(--cubx-bg-card, var(--h2j-bg-card, #ffffff)) !important;
  color: var(--h2j-text, #1a1f2c) !important;
  font-size: var(--cubx-input-font-size, 14px) !important;
  box-sizing: border-box;
}

body.page-order .cubx-ff-fields .h2j-math-challenge input[type="number"]:focus {
  outline: none;
  border-color: var(--cubx-accent, #e91e63) !important;
  box-shadow: 0 0 0 3px var(--cubx-input-focus-ring, rgba(233, 30, 99, 0.12)) !important;
}


/* --- 12.11 Captcha Cloudflare Turnstile (FormGate) ------------ */
/* Injecte par H2JFormGate comme enfant direct de .cubx-ff-fields.
   Le widget Turnstile est rendu par le script Cloudflare (iframe).
   data-size="flexible" (h2jsecurity v1.22.2) -> il prend la largeur
   dispo. On assure juste l'espacement et un eventuel min-height pour
   eviter le saut de layout pendant le chargement de l'iframe. */
body.page-order .cubx-ff-fields .cf-turnstile {
  margin: 0 !important;
  min-height: 65px;
}


/* --- 12.12 Footer du form (bouton CONTINUER) ------------------ */
/* footer.cubx-ff-footer contient l'input hidden submitCreate + le bouton
   .continue.btn.btn-primary. Le bouton est deja restyle par la section 8
   (body.page-order .checkout-step button.continue). Ici on gere juste
   l'alignement du footer du form (le bouton a la classe Bootstrap
   .float-xs-right, inerte sans Bootstrap). */
/* Footer : bouton CONTINUER centre (reference /inscription-h2j) */
body.page-order .cubx-ff-footer {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
  padding: 0;
}

/* Bouton creation de compte : pleine largeur comme /inscription-h2j */
body.page-order .cubx-ff-footer button.continue {
  width: 100%;
}


/* --- 12.13 Form CONNEXION (#login-form) ----------------------- */
/* Le tab Connexion du checkout : markup Classic (login-form.tpl).
   Les champs email/password passent par form-fields.tpl donc heritent
   de .cubx-ff-input. Le <form> lui-meme garde la structure Classic
   (div > form-group.row + footer). On aplatit pareil que le form invite.
   Labels masques (placeholder only, comme /inscription-h2j).
   Le password generator (sparkle + legende + meter) est inutile sur le
   login : on le masque ici. */

body.page-order #login-form > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.page-order #login-form .form-group.row {
  display: block;
  margin: 0;
  padding: 0;
}

body.page-order #login-form .form-control-label {
  display: none;
}

body.page-order #login-form .form-control-label.required::after {
  display: none;
}

body.page-order #login-form .js-input-column {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

body.page-order #login-form .form-control-comment {
  display: none;
}

/* Lien "Mot de passe oublie ?" sous les champs */
body.page-order #login-form .forgot-password {
  margin: 4px 0 0;
}

body.page-order #login-form .forgot-password a {
  font-size: 13px;
  font-weight: 600;
  color: var(--cubx-accent, #e91e63);
}

body.page-order #login-form .forgot-password a:hover {
  color: var(--cubx-accent-2, #c2185b);
  text-decoration: underline;
}

/* Footer du form login (bouton CONTINUER centre + pleine largeur) */
body.page-order #login-form .form-footer {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
  padding: 0;
}

body.page-order #login-form .form-footer button.continue,
body.page-order #login-form .form-footer .btn-primary {
  width: 100%;
}

/* Masquer le password generator (sparkle + legende + meter) sur le login.
   Le login n'a pas besoin d'un generateur de mot de passe -- c'est une
   fonctionnalite d'inscription uniquement. */
body.page-order #login-form .cubx-ff-password-generate,
body.page-order #login-form .cubx-ff-password-legend,
body.page-order #login-form .cubx-ff-password-meter {
  display: none;
}

/* Le math challenge + turnstile sont injectes dans #login-form aussi
   (h2jsecurity v1.22.10, hook displayH2JLoginFormBottom). Ils sont
   enfants directs du <form>, pas de .cubx-ff-fields ici -> on les
   recible sous #login-form. */
body.page-order #login-form .h2j-math-challenge {
  margin: 16px 0 0 !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border: 1px solid var(--cubx-border, var(--h2j-border, #e5e7eb)) !important;
  border-left: 3px solid var(--cubx-accent, #d4af37) !important;
  border-radius: var(--cubx-radius, 8px) !important;
}

body.page-order #login-form .h2j-math-challenge label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--h2j-text, #1a1f2c) !important;
}

body.page-order #login-form .h2j-math-challenge input[type="number"] {
  width: 100px !important;
  min-height: var(--cubx-input-height, 44px) !important;
  padding: var(--cubx-input-padding-y, 10px) var(--cubx-input-padding-x, 14px) !important;
  border: 1px solid var(--cubx-border, var(--h2j-border, #e5e7eb)) !important;
  border-radius: var(--cubx-radius, 8px) !important;
  background: var(--cubx-bg-card, var(--h2j-bg-card, #ffffff)) !important;
  color: var(--h2j-text, #1a1f2c) !important;
  font-size: var(--cubx-input-font-size, 14px) !important;
  box-sizing: border-box;
}

body.page-order #login-form .h2j-math-challenge input[type="number"]:focus {
  outline: none;
  border-color: var(--cubx-accent, #e91e63) !important;
  box-shadow: 0 0 0 3px var(--cubx-input-focus-ring, rgba(233, 30, 99, 0.12)) !important;
}

body.page-order #login-form .cf-turnstile {
  margin: 16px 0 0 !important;
  min-height: 65px;
}

/* Honeypot h2jsecurity (h2j_hp_field) -- injecte par injectFields(),
   deja en position absolute hors ecran via style inline. Rien a faire.
   Le honeypot h2jforms (h2jforms_hp_field) n'apparait QUE sur le form
   de creation de compte (gere en 12.2), pas sur le login. */


/* --- 12.14 Fix double coche CGV -------------------------------- */
/* PS Classic rend un .custom-checkbox <span> avec une icone Material
   check + le navigateur rend la checkbox native. Les 2 sont visibles
   car Bootstrap (qui masquait la native) est coupe. On masque l'icone
   Material et on garde la checkbox native seule. */
body.page-order #conditions-to-approve .custom-checkbox > span {
  display: none;
}

/* La checkbox native elle-meme : on la rend visible + stylisee */
body.page-order #conditions-to-approve input[type="checkbox"] {
  display: inline-block !important;
  width: 18px;
  height: 18px;
  accent-color: var(--cubx-accent, #d4af37);
  cursor: pointer;
  flex-shrink: 0;
  margin: 2px 0 0;
}


/* --- 12.15 Copyright PrestaShop -------------------------------- */
/* Masquer le lien "Logiciel e-commerce par PrestaShop" en pied de page
   du checkout (body.page-order uniquement, pas sur les autres pages). */
body.page-order #footer .footer-container,
body.page-order #footer,
body.page-order .footer-container {
  display: none;
}


/* --- 12.16 Phrase facturation (etape 2) — SUPPRIME ------------ */
/* Remplace par le bloc card .cubx-checkout-invoice-card dans la section 5
   (override addresses.tpl v2.5.267). */


/* --- 12.17 Responsive form (mobile) --------------------------- */
@media (max-width: 599px) {
  body.page-order .cubx-ff-fields {
    gap: 14px;
  }

  /* Gender cards : restent cote a cote (2 cartes, ca passe) */
  body.page-order .cubx-ff-gender {
    gap: 8px;
  }

  /* Footer : bouton pleine largeur (coherent avec section 11) */
  body.page-order .cubx-ff-footer,
  body.page-order #login-form .form-footer {
    justify-content: stretch;
  }

  body.page-order .cubx-ff-footer button.continue,
  body.page-order #login-form .form-footer button.continue,
  body.page-order #login-form .form-footer .btn-primary {
    width: 100%;
  }
}