/**
 * CHECKOUT.CSS - Tunnel de commande NOVA IP
 * ==========================================
 *
 * Design wizard horizontal avec barre de progression
 * SCOPE: body#checkout (pages checkout PrestaShop)
 *
 * TABLE OF CONTENTS
 * -----------------
 *
 * 1. RESET & BASE
 *    1.1 Global resets
 *    1.2 Overrides theme.css
 *
 * 2. LAYOUT
 *    2.1 Header checkout
 *    2.2 Footer checkout
 *    2.3 Main grid (content + sidebar)
 *
 * 3. PROGRESS BAR
 *    3.1 Structure
 *    3.2 Steps (default, active, complete)
 *    3.3 Connection lines
 *    3.4 Labels
 *
 * 4. LOGIN
 *    4.1 Split layout (2 colonnes)
 *    4.2 Guest/Login navigation
 *
 * 5. FORMS
 *    5.1 Form groups & inputs
 *    5.2 Customer form
 *    5.3 Address forms
 *    5.4 Checkboxes
 *    5.5 Radios
 *    5.6 Password toggle
 *    5.7 Phone input (intl-tel-input)
 *    5.8 GDPR consent
 *
 * 6. STEPS CONTENT
 *    6.1 Step containers
 *    6.2 Step navigation (prev/next)
 *    6.3 Delivery options
 *    6.4 Payment options
 *    6.5 Chronopost pickup
 *    6.6 Conditions (CGV)
 *
 * 7. SIDEBAR
 *    7.1 Cart summary
 *    7.2 Products list toggle
 *    7.3 Product lines
 *    7.4 Totals
 *    7.5 Promo code
 *
 * 8. BUTTONS & CTA
 *    8.1 Navigation buttons
 *    8.2 Submit order button
 *    8.3 CTA mobile sticky
 *
 * 9. THIRD-PARTY
 *    9.1 PayPal Express (signup)
 *    9.2 PayPal Payment (step 4)
 *
 * 10. RESPONSIVE
 *     10.1 Tablet (768-991px)
 *     10.2 Mobile (<768px)
 */

/* ==========================================
   1. RESET & BASE
   ========================================== */

/* 1.1 Global resets
   ------------------------------------------ */

/* Empêcher le scroll parasite et l'elastic scrolling iOS */
html:has(body#checkout),
body#checkout {
  overflow-x: hidden;
  overscroll-behavior: none;
}

/* Pas de box-shadow sur les boutons et blocs */
body#checkout button,
body#checkout .btn,
body#checkout .card,
body#checkout .checkout-step,
body#checkout #js-checkout-summary,
body#checkout .payment-option,
body#checkout .delivery-option,
body#checkout #header,
body#checkout header {
  box-shadow: none !important;
}

/* Header checkout - juste border-bottom, pas de shadow */
body#checkout #header {
  border-bottom: 1px solid var(--mx-gray-200);
}

/* Liens hover orange - override theme.css */
body#checkout a:hover {
  color: var(--mx-orange-500) !important;
}

/* Override .tab-content de product.css */
body#checkout .tab-content {
  margin-top: 0;
  padding: 0;
}

/* Override margins formulaires de theme.css */
body#checkout section.checkout-step #customer-form,
body#checkout section.checkout-step #delivery-address,
body#checkout section.checkout-step #invoice-address,
body#checkout section.checkout-step #login-form {
  margin-top: 0;
  /* margin-left: 0; -- retiré car casse intl-tel-input flags */
}

/* Login form spécifique - pas de margin-left (override theme.css) */
body#checkout section.checkout-step #login-form {
  margin-left: 0 !important;
}

/* ==========================================
   4. LOGIN
   ========================================== */

/* 4.1 Split layout (2 colonnes)
   ------------------------------------------ */

.mx-checkout-login-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  align-items: start;
  max-width: 100%;
  overflow: hidden;
}

/* Colonne gauche - Formulaire */
.mx-checkout-login-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  overflow: hidden;
}

/* Login form - fix débordement (override Bootstrap grid) */
.mx-checkout-login-left #login-form,
.mx-checkout-login-left #login-form > div {
  width: 100% !important;
  max-width: 100% !important;
}

.mx-checkout-login-left .form-group.row {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 0 var(--space-4) 0 !important;
  width: 100% !important;
}

.mx-checkout-login-left .form-group .col-md-3,
.mx-checkout-login-left .form-group .col-md-6 {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.mx-checkout-login-left .form-control-label {
  margin-bottom: var(--space-1) !important;
}

.mx-checkout-login-left input,
.mx-checkout-login-left .form-control,
.mx-checkout-login-left .input-group {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.mx-checkout-login-left .forgot-password {
  width: 100% !important;
}

.mx-checkout-login-left .form-footer {
  margin-top: var(--space-4);
}

body#checkout .mx-checkout-login-left .forgot-password {
  margin-top: var(--space-2);
  margin-left: 0 !important; /* Override theme.css 14.38rem */
}

.mx-checkout-login-left .forgot-password a {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  text-decoration: underline;
}

.mx-checkout-login-left .forgot-password a:hover {
  color: var(--mx-orange);
}

/* Separateur vertical */
.mx-checkout-login-separator {
  width: 1px;
  background: var(--mx-gray-300);
  align-self: stretch;
  min-height: 200px;
}

/* Colonne droite - Inscription / Social (centrée) */
.mx-checkout-login-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mx-checkout-login-register-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 80px;
  font-size: var(--fs-base);
  color: var(--mx-gray-700);
  margin: 0;
}

.mx-checkout-social-buttons {
  min-height: auto;
}

/* Flex sur le formulaire social, pas son parent */
.mx-checkout-social-buttons .opc_social_form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 100%;
}

.mx-checkout-login-register-text a {
  color: var(--mx-gray-900);
  font-weight: var(--fw-medium);
  text-decoration: underline;
}

.mx-checkout-login-register-text a:hover {
  color: var(--mx-orange);
}

/* Separateur "ou" - repris de authentication.css */
.mx-checkout-login-split .mx-auth-separator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  width: 100%;
}

.mx-checkout-login-split .mx-auth-separator::before,
.mx-checkout-login-split .mx-auth-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mx-gray-300);
}

.mx-checkout-login-split .mx-auth-separator span {
  font-size: var(--fs-sm);
  color: var(--mx-gray-900);
  text-transform: lowercase;
}

/* Social login */
.mx-checkout-social-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
}

.mx-checkout-social-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.mx-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mx-gray-900);
  transition: color 0.2s ease;
}

.mx-social-btn:hover {
  color: var(--mx-orange-500);
}

.mx-social-btn svg {
  width: 28px;
  height: 28px;
}

/* ==========================================
   2. LAYOUT
   ========================================== */

/* 2.1 Header checkout
   ------------------------------------------ */

.mx-checkout-header {
  background: white;
  border-bottom: 1px solid var(--mx-gray-200);
  padding: var(--space-4) 0;
}

.mx-checkout-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Lien retour panier */
.mx-checkout-back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--mx-gray-600);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
  flex: 1;
  justify-content: flex-start;
}

.mx-checkout-back:hover {
  color: var(--mx-orange);
}

.mx-checkout-back i,
.mx-checkout-back svg {
  width: 18px;
  height: 18px;
}

/* Logo centré */
.mx-checkout-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mx-checkout-logo img {
  height: 30px;
  width: auto;
}

/* Badge paiement sécurisé (header) */
.mx-checkout-secure-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  justify-content: flex-end;
}

.mx-checkout-secure-header .mx-secure-stripe {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.mx-checkout-secure-header .mx-secure-text {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
  white-space: nowrap;
}

.mx-checkout-secure-header i {
  font-size: 22px;
  color: var(--mx-gray-800);
}

.mx-checkout-secure-header .mx-pipe {
  color: var(--mx-gray-800);
}

/* Mobile : masqué par défaut */
.mx-checkout-secure-header.mx-mobile {
  display: none;
}

/* 2.2 Footer checkout
   ------------------------------------------ */

body#checkout #footer {
  padding: 0 !important;
  background: #000 !important;
  color: white !important;
}

.mx-checkout-footer {
  background: #000;
  color: white;
  border-top: 1px solid var(--mx-gray-200);
  padding: var(--space-4) 0;
}

.mx-checkout-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.mx-checkout-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.mx-checkout-footer-links a,
.mx-checkout-footer-links span a {
  color: var(--mx-gray-400);
  text-decoration: none;
  transition: all 0.2s ease;
}

.mx-checkout-footer-links a:hover,
.mx-checkout-footer-links span a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.mx-checkout-footer-copy {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--mx-gray-400);
}

/* 2.3 Main grid (content + sidebar)
   ------------------------------------------ */

body#checkout #wrapper {
  padding-top: var(--space-4);
  background: var(--mx-gray-50);
}

body#checkout .container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Grid principale */
.mx-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-6);
  align-items: start;
}

.mx-checkout-main {
  min-width: 0;
}

.mx-checkout-sidebar {
  position: sticky;
  top: var(--space-4);
}

/* ==========================================
   8. BUTTONS & CTA
   ========================================== */

/* 8.2 Submit order button (sidebar)
   ------------------------------------------ */

/* CTA Desktop - visible dans la sidebar */
.mx-checkout-cta-wrapper {
  display: block;
  background: white;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-sm); */
  margin-bottom: var(--space-4);
}

.mx-checkout-cta-wrapper .mx-checkout-cta-hint {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
  text-align: center;
}

/* CTA Mobile - caché sur desktop */
.mx-checkout-cta-mobile {
  display: none;
}

.mx-btn-checkout-final {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  font-size: var(--fs-base);
}

.mx-btn-checkout-final svg {
  width: 18px;
  height: 18px;
}

/* État inactif : disabled (étapes 1-3) ou ghost (étape 4 sans CGV) */
.mx-btn-checkout-final:disabled,
.mx-btn-checkout-final.mx-btn-ghost {
  background: var(--mx-gray-300) !important;
  border-color: var(--mx-gray-300) !important;
  color: #fff !important;
  opacity: 0.7;
}

.mx-btn-checkout-final:disabled {
  cursor: not-allowed;
}

.mx-checkout-cta-hint {
  margin: var(--space-3) 0 0 0;
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
}

/* Quand actif (étape paiement + CGV cochées) - noir par défaut, orange au hover */
.mx-checkout-cta-wrapper.-active .mx-btn-checkout-final {
  background: var(--mx-black);
  border-color: var(--mx-black);
  cursor: pointer;
  opacity: 1;
}

.mx-checkout-cta-wrapper.-active .mx-btn-checkout-final:hover {
  background: var(--mx-orange);
  border-color: var(--mx-orange);
}

.mx-checkout-cta-wrapper.-active .mx-checkout-cta-hint {
  display: none;
}

/* ==========================================
   3. PROGRESS BAR
   ========================================== */

/* 3.1 Structure
   ------------------------------------------ */

.mx-checkout-progress {
  background: transparent;
  padding: var(--space-5) 0;
  margin-bottom: var(--space-6);
}

.mx-checkout-progress-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}

/* Étape individuelle */
.mx-checkout-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  z-index: 1;
  width: 5.5rem; /* Largeur fixe pour uniformiser l'espacement */
  flex-shrink: 0;
}

.mx-checkout-step-indicator {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: all var(--transition-base);
}

/* État par défaut (à venir) - rond vide cerclé noir */
.mx-checkout-step-indicator {
  background: transparent;
  border: 2px solid var(--mx-black);
  color: var(--mx-black);
}

/* État actif - orange avec box-shadow */
.mx-checkout-step.-active .mx-checkout-step-indicator {
  background: var(--mx-orange);
  border-color: var(--mx-orange);
  color: white;
  box-shadow: 0 0 0 4px rgba(234, 104, 57, 0.3);
}

/* État complété - rond plein noir avec check */
.mx-checkout-step.-complete .mx-checkout-step-indicator {
  background: var(--mx-black);
  border-color: var(--mx-black);
  color: white;
}

.mx-checkout-step.-complete .mx-checkout-step-indicator span {
  display: none;
}

/* Check en pseudo-élément pour les étapes complétées */
.mx-checkout-step.-complete .mx-checkout-step-indicator::after {
  content: '';
  display: block;
  width: 10px;
  height: 16px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  margin-top: -3px;
}

/* Label de l'étape */
.mx-checkout-step-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.mx-checkout-step.-active .mx-checkout-step-label {
  color: var(--mx-orange);
  font-weight: var(--fw-bold);
}

.mx-checkout-step.-complete .mx-checkout-step-label {
  color: var(--mx-black);
}

/* Ligne de connexion entre étapes - noir */
.mx-checkout-progress-line {
  flex: 1;
  height: 2px;
  background: var(--mx-black);
  margin: 0;
  margin-bottom: var(--space-6); /* Aligner avec les indicateurs */
  position: relative;
}

.mx-checkout-progress-line.-complete {
  background: var(--mx-black);
}

/* ==========================================
   6. STEPS CONTENT
   ========================================== */

/* 6.1 Step containers
   ------------------------------------------ */
body#checkout .checkout-step {
  display: none;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* ==========================================
   5. FORMS
   ========================================== */

/* 5.2 Customer form (2 colonnes)
   ------------------------------------------ */

.mx-checkout-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.mx-checkout-form-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Responsive : 1 colonne sur mobile/tablette */
@media (max-width: 991px) {
  .mx-checkout-form-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

body#checkout .checkout-step.-current,
body#checkout .checkout-step.js-current-step {
  display: block;
}

/* Titre de l'étape (caché car on a la barre de progression) */
body#checkout .checkout-step .step-title {
  display: none;
}

/* 6.2 Step navigation (prev/next)
   ------------------------------------------ */
.mx-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.mx-step-nav .mx-btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mx-step-nav .mx-btn-tertiary:hover {
  color: var(--mx-black);
}

.mx-step-nav .mx-btn-tertiary svg {
  width: 16px;
  height: 16px;
}

/* 3.4 Progress bar - clickable states
   ------------------------------------------ */
.mx-checkout-step {
  cursor: pointer;
}

.mx-checkout-step.-reachable:hover .mx-checkout-step-indicator {
  transform: scale(1.1);
}

.mx-checkout-step:not(.-reachable):not(.-complete):not(.-active) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 5.3 Address forms
   ------------------------------------------ */

body#checkout section.checkout-step .address-selector {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: minmax(min-content, max-content);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  align-items: stretch;
  flex-wrap: unset;
  justify-content: unset;
}

body#checkout .address-item {
  background: white !important;
  border: 2px solid var(--mx-gray-900) !important;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Footer adresse en bas du bloc */
body#checkout .address-item .address-footer {
  margin-top: auto;
  display: flex;
  gap: var(--space-4);
}

body#checkout .address-item:hover {
  border-color: var(--mx-gray-600) !important;
}

body#checkout .address-item.selected {
  border-color: var(--mx-blue-500) !important;
  background: var(--mx-blue-50) !important;
}

body#checkout .address-item header {
  margin-bottom: var(--space-3);
}

body#checkout .address-item .radio-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

body#checkout .address-item .address-alias {
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  margin: 0;
  text-align: center;
}

body#checkout .address-item .address {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  line-height: var(--lh-relaxed);
}

/* Formatage détaillé des champs adresse */
body#checkout .address-item .address .mx-addr-name {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  margin-bottom: var(--space-2);
}

body#checkout .address-item .address .mx-addr-phones {
  display: block;
  margin-bottom: var(--space-1);
}

body#checkout .address-item .address .mx-addr-phone,
body#checkout .address-item .address .mx-addr-mobile {
  display: inline-block;
  color: var(--mx-gray-700);
}

body#checkout .address-item .address .mx-addr-phone:not(:only-child)::after {
  content: " • ";
  color: var(--mx-gray-300);
}

body#checkout .address-item .address .mx-addr-company {
  display: block;
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
}

body#checkout .address-item .address .mx-addr-street,
body#checkout .address-item .address .mx-addr-street2,
body#checkout .address-item .address .mx-addr-city,
body#checkout .address-item .address .mx-addr-country {
  display: block;
}

body#checkout .address-item .address .mx-addr-dni,
body#checkout .address-item .address .mx-addr-vat {
  display: block;
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
}

body#checkout .address-item hr {
  border: none;
  border-top: 1px solid var(--mx-gray-200);
  margin: var(--space-3) 0;
}

/* display flex et gap déjà définis plus haut avec margin-top: auto */

body#checkout .address-item .address-footer a,
body#checkout section.checkout-step .delete-address,
body#checkout section.checkout-step .edit-address {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600) !important;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  margin: 0 !important;
  transition: color var(--transition-fast);
}

body#checkout .address-item .address-footer a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

body#checkout .address-item .address-footer a:hover {
  color: var(--mx-gray-900);
  text-decoration: underline;
  text-underline-offset: 6px;
}

body#checkout .address-item .address-footer a:hover svg {
  text-decoration: none;
}

/* Hint alias adresse */
body#checkout .mx-alias-hint {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  font-style: italic;
  color: var(--mx-gray-500);
}

/* Hint tablette masqué par défaut (visible uniquement en tablette) */
body#checkout .mx-alias-hint--tablet {
  display: none;
}

/* Container actions adresses (côte à côte) */
body#checkout .mx-address-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* Boutons ajouter adresse / facturation différente */
body#checkout .mx-address-actions .add-address {
  margin: 0 !important;
  flex: 1 1 auto;
  max-width: 280px;
}

body#checkout .mx-address-actions .add-address a {
  width: 100%;
  justify-content: center;
}

body#checkout .add-address a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-blue-600);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  background: var(--mx-blue-50);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

body#checkout .add-address a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

body#checkout .add-address a:hover {
  background: var(--mx-blue-100);
  color: var(--mx-blue-700);
}

/* Variante orange pour facturation différente */
body#checkout .add-address.mx-different-address a {
  color: var(--mx-orange-700);
  background: var(--mx-orange-50);
}

body#checkout .add-address.mx-different-address a:hover {
  background: var(--mx-orange-100);
  color: var(--mx-orange-800);
}

/* Texte explicatif sous les boutons */
body#checkout .mx-address-hint {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
  margin-bottom: var(--space-6);
  margin-left: var(--space-1);
}

/* Fallback : lien ajouter adresse hors container */
body#checkout section.checkout-step .add-address:not(.mx-address-actions .add-address) {
  margin-top: var(--space-6) !important;
  margin-bottom: var(--space-6);
}

/* Texte info même adresse */
body#checkout .mx-address-same-info {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  margin-bottom: var(--space-4);
}

/* Checkbox même adresse - en haut du formulaire */
body#checkout .mx-same-address-checkbox {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--mx-gray-200);
}

body#checkout .mx-same-address-checkbox .mx-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  text-align: left; /* Override theme.css label { text-align: right } */
}

body#checkout .mx-same-address-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--mx-orange);
}

/* ==========================================
   5.1 Form groups & inputs
   ========================================== */

/* Container formulaire adresse - layout 3 colonnes */
body#checkout #delivery-address .form-fields,
body#checkout #invoice-address .form-fields {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: 100%;
}

/* Par défaut chaque champ prend 1 colonne */
body#checkout #delivery-address .form-group,
body#checkout #invoice-address .form-group {
  grid-column: span 1;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 0 !important;
}

/* Checkbox et info même adresse - toute la largeur (hors grid) */
body#checkout .mx-same-address-checkbox,
body#checkout .mx-address-same-info {
  grid-column: 1 / -1;
}

body#checkout .form-group.row.mx-same-address-checkbox {
  grid-column: 1 / -1;
}

/* Adresse : 2 colonnes, Complément : 1 colonne (même ligne) */
body#checkout #delivery-address .form-group:has(input[name="address1"]),
body#checkout #invoice-address .form-group:has(input[name="address1"]) {
  grid-column: span 2;
}
/* address2 reste à span 1 par défaut */

/* Réorganisation des champs avec order */
body#checkout #delivery-address .form-group:has(input[name="firstname"]),
body#checkout #invoice-address .form-group:has(input[name="firstname"]) { order: 1; }

body#checkout #delivery-address .form-group:has(input[name="lastname"]),
body#checkout #invoice-address .form-group:has(input[name="lastname"]) { order: 2; }

body#checkout #delivery-address .form-group:has(input[name="phone"]),
body#checkout #invoice-address .form-group:has(input[name="phone"]) { order: 3; }

body#checkout #delivery-address .form-group:has(input[name="company"]),
body#checkout #invoice-address .form-group:has(input[name="company"]) { order: 4; }

body#checkout #delivery-address .form-group:has(input[name="dni"]),
body#checkout #invoice-address .form-group:has(input[name="dni"]) { order: 5; }

body#checkout #delivery-address .form-group:has(input[name="vat_number"]),
body#checkout #invoice-address .form-group:has(input[name="vat_number"]) { order: 6; }

/* Label TVA avec "(optionnel)" en petit italique */
body#checkout #delivery-address .form-group:has(input[name="vat_number"]) label::after,
body#checkout #invoice-address .form-group:has(input[name="vat_number"]) label::after {
  content: " (optionnel)";
  font-size: var(--text-xs);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--neutral-500);
}

body#checkout #delivery-address .form-group:has(input[name="address1"]),
body#checkout #invoice-address .form-group:has(input[name="address1"]) { order: 7; }

body#checkout #delivery-address .form-group:has(input[name="address2"]),
body#checkout #invoice-address .form-group:has(input[name="address2"]) { order: 8; }

body#checkout #delivery-address .form-group:has(input[name="postcode"]),
body#checkout #invoice-address .form-group:has(input[name="postcode"]) { order: 9; }

body#checkout #delivery-address .form-group:has(input[name="city"]),
body#checkout #invoice-address .form-group:has(input[name="city"]) { order: 10; }

body#checkout #delivery-address .form-group:has(select[name="id_country"]),
body#checkout #invoice-address .form-group:has(select[name="id_country"]) { order: 11; }

body#checkout #delivery-address .form-group:has(select[name="id_state"]),
body#checkout #invoice-address .form-group:has(select[name="id_state"]) { order: 12; }

/* Bouton continuer - pleine largeur aligné à droite */
body#checkout #delivery-address .clearfix,
body#checkout #invoice-address .clearfix {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

/* Override structure form-group PrestaShop (Bootstrap grid cassé) */
body#checkout .form-group .col-md-3,
body#checkout .form-group .col-md-4,
body#checkout .form-group .col-md-6,
body#checkout .form-group .col-md-9 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

/* Labels */
body#checkout .form-control-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-900);
  margin-bottom: var(--space-2);
  padding-top: 0 !important; /* Reset theme.css padding-top */
  text-align: left;
}

/* Inputs */
body#checkout .form-control {
  width: 100% !important;
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--fs-base);
  border: 1px solid var(--mx-gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: white;
}

body#checkout .form-control:focus {
  outline: none;
  border-color: var(--mx-blue-500);
  box-shadow: 0 0 0 3px rgba(70, 188, 235, 0.15);
}

/* Select custom */
body#checkout select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 20px;
  padding-right: calc(var(--space-4) + 24px);
}

/* ==========================================
   5.1.1 Base form styles (from authentication.css)
   ========================================== */

/* Container des champs */
body#checkout .mx-register-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Sections du formulaire */
body#checkout .mx-form-section {
  margin-bottom: 0;
}

body#checkout .mx-form-section:last-of-type {
  margin-bottom: var(--space-4);
}

body#checkout .mx-form-section-header {
  margin-bottom: var(--space-4);
}

body#checkout .mx-form-section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--mx-black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--mx-gray-200);
}

body#checkout .mx-form-section-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Lignes formulaire adresse */
body#checkout .mx-form-row--2cols,
body#checkout .mx-form-row--3cols {
  display: flex;
  gap: var(--space-4);
}

body#checkout .mx-form-row--2cols > .form-group,
body#checkout .mx-form-row--3cols > .form-group {
  flex: 1;
  margin-bottom: 0;
  order: unset !important; /* Reset order du CSS grid */
}

/* Spacer pour garder la cohérence 3 colonnes */
body#checkout .mx-form-row--3cols > .mx-form-spacer {
  flex: 1;
  order: 99 !important; /* Toujours en dernier */
}

/* Bulle info téléphone */
body#checkout .mx-phone-info {
  flex: 1;
  position: relative;
  top: 12px;
  background: var(--mx-blue-50);
  border: 1px solid var(--mx-blue-200);
  border-radius: var(--radius-md);
  padding: 0;
  font-size: 14px;
  color: var(--mx-blue-800);
  line-height: 1.4;
  align-self: flex-end;
  display: flex;
  align-items: center;
  margin-left: 8px;
  box-sizing: border-box;
}

body#checkout .mx-phone-info::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: var(--mx-blue-50);
  border-left: 1px solid var(--mx-blue-200);
  border-bottom: 1px solid var(--mx-blue-200);
}

body#checkout .mx-phone-info p {
  margin: 0;
  padding: 10px;
  font-size: inherit;
  color: inherit;
}

body#checkout .mx-form-row--full > .form-group {
  margin-bottom: 0;
}

/* Cacher la phrase "Seules les lettres..." sous prénom/nom */
body#checkout .mx-form-row--2cols .form-control-comment,
body#checkout .mx-form-row--3cols .form-control-comment {
  display: none !important;
}

/* Espacement entre les lignes du formulaire adresse (override grid) */
body#checkout #delivery-address .mx-address-form-fields,
body#checkout #invoice-address .mx-address-form-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4);
}

/* Ligne pro - masquée par défaut pour particuliers */
body#checkout .mx-form-row--pro {
  display: none;
}

body#checkout.mx-account-professionnel .mx-form-row--pro {
  display: flex !important;
}

/* Toggle Particulier / Professionnel */
body#checkout .mx-account-type-toggle {
  display: flex;
  gap: var(--space-3);
}

body#checkout .mx-account-type-option {
  flex: 1;
  cursor: pointer;
}

body#checkout .mx-account-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body#checkout .mx-account-type-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--mx-black);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-black);
  transition: all var(--transition-fast);
}

body#checkout .mx-account-type-label svg {
  width: 20px;
  height: 20px;
}

body#checkout .mx-account-type-option--active .mx-account-type-label {
  border-color: var(--mx-black);
  background: var(--mx-black);
  color: white;
}

/* Section pro */
body#checkout .mx-form-section--pro {
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Notice champs obligatoires */
body#checkout .mx-required-notice {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
  text-align: right;
  margin: var(--space-4) 0 0 0;
}

body#checkout .mx-asterisk {
  color: #dc3545;
  font-weight: var(--fw-bold);
}

/* ==========================================
   4.2 Guest/login tabs & inline notifications
   ========================================== */

body#checkout .mx-checkout-nav-header {
  margin-bottom: var(--space-4);
}

body#checkout .mx-checkout-nav-header .nav.nav-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

body#checkout .mx-checkout-nav-header .nav-item {
  display: flex;
  align-items: center;
}

body#checkout .mx-checkout-nav-header .nav-item + .nav-item {
  margin-left: 0;
}

body#checkout .mx-checkout-nav-header .nav-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-500);
  text-decoration: none;
  padding: 0;
}

body#checkout .mx-checkout-nav-header .nav-link.active {
  color: var(--mx-gray-900);
  font-weight: var(--fw-semibold);
}

body#checkout .mx-checkout-nav-header .nav-separator {
  color: var(--mx-gray-300);
  font-size: var(--fs-sm);
}

/* Notifications inline à droite */
body#checkout .mx-checkout-notifications {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

body#checkout .mx-notif {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

body#checkout .mx-notif-success {
  background-color: var(--mx-success-light);
  color: var(--mx-success);
  border: 1px solid var(--mx-success);
}

body#checkout .mx-notif-error {
  background-color: var(--mx-error-light);
  color: var(--mx-error);
  border: 1px solid var(--mx-error);
}

body#checkout .mx-notif-warning {
  background-color: var(--mx-warning-light);
  color: var(--mx-warning);
  border: 1px solid var(--mx-warning);
}

body#checkout .mx-notif-info {
  background-color: var(--mx-info-light);
  color: var(--mx-info);
  border: 1px solid var(--mx-info);
}

/* Masquer les notifications globales sur checkout (déplacées inline) */
body#checkout #notifications .notifications-container {
  display: none;
}

/* ==========================================
   4.3 Optional account creation message
   ========================================== */

body#checkout .mx-checkout-optional-account {
  background: var(--mx-blue-50);
  border: 1px solid var(--mx-blue-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

body#checkout .mx-checkout-optional-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-1) 0;
}

body#checkout .mx-checkout-optional-main {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
}

body#checkout .mx-checkout-optional-badge {
  font-size: var(--fs-xs);
  color: #ffffff;
  text-transform: uppercase;
  background-color: var(--mx-blue-600);
  font-weight: var(--fw-bold);
  letter-spacing: 1.5px;
  border-radius: var(--radius-sm);
  padding: var(--space-1);
}

body#checkout .mx-checkout-optional-text {
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
}

body#checkout .mx-checkout-optional-subtitle {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  margin: 0;
}

/* ==========================================
   5.7 Pro fields (hidden for individuals)
   ========================================== */

body#checkout.mx-account-particulier #delivery-address .form-group:has([name="company"]),
body#checkout.mx-account-particulier #delivery-address .form-group:has([name="dni"]),
body#checkout.mx-account-particulier #delivery-address .form-group:has([name="vat_number"]),
body#checkout.mx-account-particulier #invoice-address .form-group:has([name="company"]),
body#checkout.mx-account-particulier #invoice-address .form-group:has([name="dni"]),
body#checkout.mx-account-particulier #invoice-address .form-group:has([name="vat_number"]) {
  display: none !important;
}

/* ==========================================
   5.4 Checkboxes (theme.css override)
   ========================================== */

/* RESET GLOBAL - Override theme.css sur TOUS les spans */
body#checkout .custom-checkbox span,
body#checkout span.custom-checkbox span,
body#checkout .form-group .custom-checkbox span,
body#checkout #content .custom-checkbox span,
body#checkout .custom-checkbox input[type="checkbox"] + span {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: none !important;
  margin: 0 !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: none !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* Masquer UNIQUEMENT les spans avec Material Icons */
body#checkout .custom-checkbox span:has(.material-icons),
body#checkout .custom-checkbox span.checkbox-checked,
body#checkout .custom-checkbox .ps-shown-by-js,
body#checkout .custom-checkbox span > i.material-icons {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Container form-group pour checkbox */
body#checkout .form-group:has(span.custom-checkbox) {
  display: block !important;
}

body#checkout .form-group:has(span.custom-checkbox) .col-md-6,
body#checkout .form-group:has(span.custom-checkbox) .js-input-column {
  width: 100% !important;
  max-width: 100% !important;
}

/* Masquer la 3e colonne vide */
body#checkout .form-group > .col-md-3.form-control-comment {
  display: none !important;
}

/* span.custom-checkbox - FLEX container principal */
body#checkout .custom-checkbox,
body#checkout span.custom-checkbox,
body#checkout .form-group span.custom-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-3) !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  height: fit-content;
}

/* Input checkbox stylé */
body#checkout .custom-checkbox input[type="checkbox"] {
  position: static !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  margin-top: 2px !important;
  padding: 0 !important;
  cursor: pointer !important;
  border: 2px solid #000 !important;
  border-radius: 4px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: white !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.2s ease;
}

/* Label - prend l'espace restant */
body#checkout .custom-checkbox label {
  flex: 1 !important;
  display: block !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wrapper texte - FLEX pour asterisk + label sur même ligne */
body#checkout .custom-checkbox .mx-checkbox-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

/* Asterisk rouge */
body#checkout .custom-checkbox .mx-asterisk {
  color: #dc3545 !important;
  font-weight: var(--fw-bold) !important;
  flex-shrink: 0 !important;
  line-height: 1.5 !important;
}

/* Label text */
body#checkout .custom-checkbox .mx-checkbox-label {
  flex: 1 !important;
  color: var(--mx-gray-700) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
}

/* Liens dans checkbox */
body#checkout .custom-checkbox label a {
  color: var(--mx-blue-500) !important;
}

body#checkout span.custom-checkbox input[type="checkbox"]:checked,
body#checkout .custom-checkbox input[type="checkbox"]:checked {
  background: #000!important;
  border-color: #000!important;
}

body#checkout span.custom-checkbox input[type="checkbox"]:focus,
body#checkout .custom-checkbox input[type="checkbox"]:focus {
  outline: none;
}

body#checkout span.custom-checkbox input[type="checkbox"]:focus-visible,
body#checkout .custom-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mx-blue-500);
  outline-offset: 2px;
}

/* Texte du checkbox - notre span.mx-checkbox-text */
body#checkout span.custom-checkbox .mx-checkbox-text,
body#checkout .custom-checkbox .mx-checkbox-text {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Texte italique (em) dans les checkboxes */
body#checkout span.custom-checkbox em {
  display: block !important;
  font-size: var(--fs-xs) !important;
  font-style: italic;
  color: var(--mx-gray-500) !important;
  line-height: 1.4;
  margin-top: var(--space-1);
}

/* ==========================================
   5.5 Radios
   ========================================== */

/* Container des radios en row */
body#checkout .form-group:has(input[type="radio"]) .col-md-6,
body#checkout .form-group:has(.custom-radio) .col-md-6 {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-4);
}

body#checkout .custom-radio {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2);
  cursor: pointer;
  margin: 0;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
}

body#checkout .custom-radio input[type="radio"] {
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  border: 2px solid #000 !important;
  border-radius: 50% !important;
  background: white !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body#checkout .custom-radio input[type="radio"]:checked {
  border-color: #000 !important;
}

body#checkout .custom-radio input[type="radio"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  background: #000 !important;
  border-radius: 50% !important;
}

/* Masquer le span indicateur radio PrestaShop */
body#checkout .custom-radio input[type="radio"] + span {
  display: none !important;
}

body#checkout .custom-radio label,
body#checkout .radio-inline {
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  margin: 0;
  cursor: pointer;
}

/* ==========================================
   5.6 Password toggle (input group)
   ========================================== */

body#checkout .input-group {
  display: flex !important;
  align-items: stretch;
  width: 100%;
}

body#checkout .input-group .form-control {
  flex: 1 1 auto;
  min-width: 0; /* permet de shrink pour laisser place au bouton */
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body#checkout .input-group .input-group-btn {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto; /* prend la taille de son contenu */
}

body#checkout .input-group .input-group-btn > button,
body#checkout .input-group .input-group-btn > .btn {
  height: 100%;
  padding: 0 var(--space-4) !important;
  background: var(--mx-orange-50) !important;
  color: var(--mx-gray-700) !important;
  border: 1px solid var(--mx-gray-300) !important;
  border-left: none !important;
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  box-shadow: none !important;
}

/* Hover désactivé - on garde le bouton statique
body#checkout .input-group .input-group-btn > button:hover,
body#checkout .input-group .input-group-btn > .btn:hover {
  background: var(--mx-gray-200) !important;
  color: var(--mx-black) !important;
}
*/

/* Form footer (mot de passe, etc.) */
body#checkout .form-control-comment {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
  margin-top: var(--space-1);
}

/* Required asterisk */
body#checkout .form-control-label .required {
  color: var(--mx-red-500);
}

/* Sections du formulaire */
body#checkout h2,
body#checkout .h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Titre adresse avec icône */
body#checkout .mx-address-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
}

/* Titre section facturation - plus d'espace au-dessus */
body#checkout #invoice-section.mx-address-title {
  margin-top: var(--space-12);
}

body#checkout .mx-address-title .mx-icon-orange {
  color: var(--mx-orange);
  flex-shrink: 0;
}

/* Baseline sous titre adresse */
body#checkout .mx-address-baseline {
  font-size: var(--fs-sm);
  color: var(--mx-gray-500);
  margin: 0 0 var(--space-6) 0;
}

/* Radios type de compte (Particulier/Professionnel) */
body#checkout .custom-radio {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  margin-right: var(--space-4);
}

body#checkout .custom-radio input[type="radio"] {
  margin-right: var(--space-2);
}

body#checkout .custom-radio label {
  display: inline !important;
  font-size: var(--fs-sm);
  margin-bottom: 0;
}

/* Address item : radio centré sans margin */
body#checkout .address-item .custom-radio {
  margin-right: 0;
}

/* ==========================================
   5.8 GDPR consent
   ========================================== */

body#checkout .gdpr_consent {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Container .custom-checkbox du GDPR */
body#checkout .gdpr_consent .custom-checkbox,
body#checkout .gdpr_consent span.custom-checkbox {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  position: relative !important;
}

/* Label GDPR - contient l'input + span icône + texte direct */
body#checkout .gdpr_consent .psgdpr_consent_message,
body#checkout .gdpr_consent label {
  display: block !important;
  position: relative !important;
  padding-left: 32px !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-normal) !important;
  color: var(--mx-gray-700) !important;
  line-height: 1.6 !important;
  cursor: pointer;
  margin-bottom: 0;
  white-space: normal !important;
  word-wrap: break-word !important;
  width: 100% !important;
}

/* Input checkbox GDPR */
body#checkout .gdpr_consent input[type="checkbox"] {
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  border: 2px solid #000 !important;
  border-radius: 4px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: white !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body#checkout .gdpr_consent input[type="checkbox"]:checked {
  background: #000 !important;
  border-color: #000 !important;
}

body#checkout .gdpr_consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mx-blue-500) !important;
  outline-offset: 2px !important;
}

/* Masquer l'icône Material Icons GDPR - TRÈS spécifique */
body#checkout .gdpr_consent .psgdpr_consent_icon,
body#checkout .gdpr_consent span:has(.material-icons),
body#checkout .gdpr_consent span:has(i),
body#checkout .gdpr_consent label > span:first-of-type:not(.mx-checkbox-text),
body#checkout .gdpr_consent input[type="checkbox"] + span {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  overflow: hidden !important;
}

/* S'assurer que le texte après le span masqué s'affiche bien */
body#checkout .gdpr_consent label {
  text-indent: 0 !important;
}

/* Liens dans le message GDPR */
body#checkout .gdpr_consent a {
  color: var(--mx-blue-600);
  text-decoration: underline;
}

body#checkout .gdpr_consent a:hover {
  color: var(--mx-blue-700);
}

/* ==========================================
   8.1 Navigation buttons (Continue/Cancel)
   ========================================== */

body#checkout .checkout-step .content {
  padding-top: var(--space-4);
}

/* Bouton Save caché pour JS - masquer immédiatement */
body#checkout .ps-hidden-by-js {
  display: none !important;
}

/* Container des boutons Continuer */
body#checkout .checkout-step .form-footer,
body#checkout .mx-checkout-form-footer,
body#checkout .mx-address-form-footer {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: var(--space-1);
  padding-top: var(--space-1);
}

/* Bouton Annuler - style tertiary à gauche */
body#checkout .cancel-address {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--mx-gray-600);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) 0;
  transition: color var(--transition-fast);
  float: none !important;
}

body#checkout .cancel-address:hover {
  color: var(--mx-gray-900);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Clearfix vide - masquer */
body#checkout .checkout-step .clearfix:not(:has(*)) {
  display: none !important;
}

body#checkout .checkout-step button[type="submit"],
body#checkout .checkout-step .continue,
body#checkout .checkout-step .mx-btn-block,
body#checkout .mx-checkout-btn-continue {
  background: var(--mx-gray-900) !important;
  color: white !important;
  border: none !important;
  padding: var(--space-3) var(--space-6) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: 300px !important;
  margin: var(--space-4) 0 !important;
}

body#checkout .checkout-step button[type="submit"]:hover,
body#checkout .checkout-step .continue:hover,
body#checkout .mx-checkout-btn-continue:hover {
  background: var(--mx-orange) !important;
  color: white !important;
}

/* Override link hover color for buttons */
body#checkout a.btn:hover,
body#checkout a.btn-primary:hover,
body#checkout a.continue:hover {
  color: white !important;
}

/* ==========================================
   7. SIDEBAR
   ========================================== */

/* Container principal - Reset Bootstrap .card */
body#checkout #js-checkout-summary,
body#checkout #js-checkout-summary.card {
  background: white;
  border: 1px solid var(--mx-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: hidden;
}

body#checkout #js-checkout-summary .card-block {
  padding: var(--space-4);
  overflow: hidden;
}

/* ----------------------------------------
   HEADER - Produits avec toggle
   Style identique à mx-promo-toggle-btn
   ---------------------------------------- */

body#checkout .mx-cart-products-toggle {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--mx-gray-200);
  max-width: 100%;
  overflow: hidden;
}

/* Nombre d'articles */
body#checkout .mx-cart-count {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--mx-black);
  margin: 0 0 var(--space-2) 0;
}

/* Toggle détails - même style que promo toggle */
body#checkout .mx-details-toggle {
  margin-bottom: 0;
  overflow: hidden;
}

body#checkout .mx-details-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  color: var(--mx-black);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}

body#checkout .mx-details-toggle-btn:hover {
  color: var(--mx-blue-700);
}

body#checkout .mx-details-toggle-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

body#checkout .mx-details-chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

body#checkout .mx-details-toggle-btn[aria-expanded="true"] .mx-details-chevron,
body#checkout .mx-details-toggle-btn:not(.collapsed) .mx-details-chevron {
  transform: rotate(180deg);
}

/* Liste produits (collapse) */
body#checkout .mx-cart-products-list {
  margin-top: var(--space-3);
  width: 100%;
  overflow: hidden;
}

body#checkout .mx-cart-products-items {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

body#checkout .mx-cart-product-item {
  display: flex;
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  margin-right: 0;
  border-radius: var(--radius-md);
  background: var(--mx-blue-50);
  overflow: hidden;
  min-width: 0;
}

body#checkout .mx-cart-product-item:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
   LISTE DES PRODUITS (collapse)
   ---------------------------------------- */

body#checkout #cart-summary-product-list {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--mx-gray-100);
}

body#checkout .media-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body#checkout .media {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--mx-gray-100);
}

body#checkout .media:first-child {
  padding-top: 0;
}

body#checkout .media:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Image produit */
body#checkout .media-left {
  flex-shrink: 0;
  padding: 0 var(--space-2);
}

/* Spécificité forte pour écraser theme.css */
body#checkout #cart-summary-product-list .media-left img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--mx-gray-50);
  border: none;
}

/* Infos produit */
body#checkout .media-body {
  flex: 1;
  min-width: 0;
  width: auto; /* Override Bootstrap width: 10000px */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body#checkout .media-body .product-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-black);
  margin-bottom: var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

body#checkout .media-body .product-name a {
  color: inherit;
  text-decoration: none;
}

body#checkout .media-body .product-name a:hover {
  color: var(--mx-blue);
}

/* Ligne qty + prix */
body#checkout .media-body .product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-1);
}

body#checkout .media-body .product-quantity {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
}

body#checkout .media-body .product-price {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--mx-black);
}

/* Attributs produit (taille, couleur, etc.) */
body#checkout .media-body .product-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

body#checkout .media-body .product-attribute {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
}

/* ----------------------------------------
   SOUS-TOTAUX
   ---------------------------------------- */

body#checkout .cart-summary-subtotals {
  padding: var(--space-4);
  border-top: 1px solid var(--mx-gray-200);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

body#checkout .cart-summary-subtotals .cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  margin: 0;
}

body#checkout .cart-summary-subtotals .label {
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
}

body#checkout .cart-summary-subtotals .value {
  font-weight: var(--fw-semibold);
  color: var(--mx-black);
}

/* ----------------------------------------
   TOTAUX - Copié de cart.css
   ---------------------------------------- */

/* Container principal du résumé */
body#checkout .mx-cart-summary {
  background: white;
  border: 1px solid var(--mx-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

body#checkout .mx-cart-totals {
  padding: var(--space-4);
}

/* Ligne nombre d'articles - plus grand */
body#checkout .mx-cart-count-line {
  font-size: var(--fs-base);
}

body#checkout .mx-cart-count-line .mx-cart-summary-value {
  font-weight: var(--fw-semibold);
}

body#checkout .mx-cart-subtotals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

body#checkout .mx-cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
}

body#checkout .mx-cart-summary-label {
  font-weight: var(--fw-regular);
  color: var(--mx-gray-700);
}

body#checkout .mx-cart-summary-value {
  font-weight: var(--fw-medium);
  color: var(--mx-black);
}

/* Ligne réduction - mise en avant */
body#checkout #cart-subtotal-discount .mx-cart-summary-value {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--mx-green-50, #f0fdf4);
  color: var(--mx-green-700, #15803d);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* Total final wrapper */
body#checkout .mx-cart-total-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--mx-gray-200);
  border-bottom: 1px solid var(--mx-gray-200);
}

/* Ligne livraison dans le bloc total */
body#checkout .mx-cart-shipping-line {
  margin-bottom: var(--space-2);
}

body#checkout .mx-cart-total-final {
  font-size: var(--fs-lg);
  /* Reset styles de cart-drawer.css */
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

body#checkout .mx-cart-total-final .mx-cart-summary-label {
  font-weight: var(--fw-semibold);
  color: var(--mx-black);
}

body#checkout .mx-cart-total-final .mx-cart-summary-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--mx-black);
}

/* Total HT - style discret */
body#checkout .mx-cart-total-ht .mx-cart-summary-label,
body#checkout .mx-cart-total-ht .mx-cart-summary-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-600);
}

/* TVA - style discret */
body#checkout .mx-cart-tax-line .mx-cart-summary-label,
body#checkout .mx-cart-tax-line .mx-cart-summary-value {
  font-size: var(--fs-sm);
  color: var(--mx-gray-500);
}

/* ----------------------------------------
   CODE PROMO - Copié de cart.css
   ---------------------------------------- */

body#checkout .mx-cart-voucher {
  padding: var(--space-4);
  border-bottom: 1px solid var(--mx-gray-200);
}

/* Vouchers appliqués */
body#checkout .mx-voucher-list {
  list-style: none;
  margin: 0 0 var(--space-3) 0;
  padding: 0;
}

body#checkout .mx-voucher-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--mx-green-50, #f0fdf4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

body#checkout .mx-voucher-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--mx-green-700, #15803d);
}

body#checkout .mx-voucher-name svg {
  width: 16px;
  height: 16px;
}

body#checkout .mx-voucher-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--mx-green-700, #15803d);
}

body#checkout .mx-voucher-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--mx-green-500);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

body#checkout .mx-voucher-remove:hover {
  background: var(--mx-green-100, rgba(76, 175, 80, 0.15));
  color: var(--mx-green-700, #15803d) !important;
}

body#checkout .mx-voucher-remove svg {
  width: 14px;
  height: 14px;
}

/* Container toggle code promo */
body#checkout .mx-promo-toggle {
  margin-bottom: var(--space-2);
}

/* Toggle code promo */
body#checkout .mx-promo-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}

body#checkout .mx-promo-toggle-btn:hover {
  color: var(--mx-blue-700);
}

body#checkout .mx-promo-toggle-btn svg {
  width: 18px;
  height: 18px;
}

body#checkout .mx-promo-toggle-btn svg:first-child {
  flex-shrink: 0;
}

body#checkout .mx-promo-chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

body#checkout .mx-promo-toggle-btn[aria-expanded="true"] .mx-promo-chevron {
  transform: rotate(180deg);
}

/* Formulaire code promo */
body#checkout .mx-promo-form-wrapper {
  margin-top: 0;
}

body#checkout .mx-promo-form {
  padding-top: var(--space-3);
}

body#checkout .mx-promo-input-group {
  display: flex;
  gap: 0;
}

/* Input code promo - border-radius gauche uniquement */
body#checkout .mx-promo-input {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
}

/* Bouton code promo - border-radius droit uniquement */
body#checkout .mx-promo-btn {
  flex-shrink: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

body#checkout .mx-promo-btn:hover {
  transform: none;
}

/* Erreur code promo */
body#checkout .mx-promo-error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: #dc2626;
}

/* !important nécessaire car PS JS injecte display:block en inline */
body#checkout .mx-promo-error[style*="display: block"],
body#checkout .mx-promo-error[style*="display:block"] {
  display: flex !important;
}

body#checkout .mx-promo-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Fallback pour structure PrestaShop native .block-promo */
body#checkout .block-promo {
  padding: var(--space-4);
  border-bottom: 1px solid var(--mx-gray-200);
}

/* Offres disponibles */
body#checkout .mx-available-discounts {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--mx-gray-300);
}

body#checkout .mx-available-discounts-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-black);
  margin-bottom: var(--space-2);
}

body#checkout .mx-available-discounts-title svg {
  width: 16px;
  height: 16px;
  color: var(--mx-orange);
}

body#checkout .mx-discount-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body#checkout .mx-discount-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--fs-sm);
}

body#checkout .mx-discount-code {
  font-family: monospace;
  font-weight: var(--fw-semibold);
  color: white;
  background: var(--mx-orange);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

body#checkout .mx-discount-name {
  color: var(--mx-gray-600);
}

/* ----------------------------------------
   REASSURANCE SOUS LE PANIER
   ---------------------------------------- */

body#checkout .mx-checkout-sidebar .block-reassurance {
  margin-top: var(--space-4);
}

/* ==========================================
   6.3 Delivery options
   ========================================== */

body#checkout .delivery-options-list {
  margin-bottom: var(--space-6);
}

/* Banner livraison gratuite débloquée */
body#checkout .mx-free-shipping-banner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-2);
  color: var(--mx-green-700);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}

body#checkout .mx-free-shipping-banner svg {
  flex-shrink: 0;
  color: var(--mx-green-500);
}

body#checkout .delivery-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

body#checkout section.checkout-step .delivery-options .delivery-option {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  background: white !important;
  border: 2px solid var(--mx-gray-900) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  min-height: auto !important;
  margin-bottom: 0 !important;
  transition: all var(--transition-fast);
  cursor: pointer;
}

/* Container radio */
body#checkout .delivery-option .mx-carrier-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body#checkout section.checkout-step .delivery-options .delivery-option:hover {
  border-color: var(--mx-gray-600);
}

body#checkout section.checkout-step .delivery-options .delivery-option:has(.mx-carrier-radio input:checked) {
  border-color: var(--mx-blue-500) !important;
  background: var(--mx-blue-50) !important;
}

/* Contenu extra transporteur - géré plus bas dans la section Chronopost */

/* Masquer si vide (whitespace inclus) via :has */
body#checkout .carrier-extra-content:not(:has(*)) {
  display: none !important;
}

/* Reset des colonnes Bootstrap (legacy) */
body#checkout .delivery-option .col-sm-1,
body#checkout .delivery-option .col-xs-9,
body#checkout .delivery-option .col-sm-11 {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  flex: none !important;
}

body#checkout .delivery-option .delivery-option-2 {
  flex: 1;
  margin: 0;
  cursor: pointer;
}

/* Label transporteur - nouveau layout */
body#checkout .delivery-option .mx-delivery-label {
  flex: 1;
  cursor: pointer;
}

/* Ligne 1 : Logo + Nom à gauche, Prix à droite */
body#checkout .delivery-option .mx-carrier-row-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Logo + Nom groupés */
body#checkout .delivery-option .mx-carrier-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Logo transporteur */
body#checkout .delivery-option .mx-carrier-logo {
  width: 50px;
  height: auto;
  flex-shrink: 0;
}

/* Nom transporteur */
body#checkout .delivery-option .mx-carrier-name {
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  font-size: var(--fs-base);
}

/* Prix à droite */
body#checkout .delivery-option .mx-carrier-price {
  font-weight: var(--fw-bold);
  color: var(--mx-gray-900);
  font-size: var(--fs-base);
  white-space: nowrap;
}

/* Ligne 2 : Delay toute la largeur */
body#checkout .delivery-option .mx-carrier-delay {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-2);
}

/* Extra content transporteur (Chronorelais, etc.) - passe à la ligne dans le flex */
body#checkout .carrier-extra-content {
  flex-basis: 100%;
  width: 100%;
  padding: var(--space-4) 0 0 0;
  margin-top: var(--space-2);
  border-top: 1px solid var(--mx-gray-200);
}

/* ==========================================
   6.5 Chronopost pickup
   ========================================== */

/* Container Chronorelais inséré après le label par le module */
body#checkout #chronorelais_container {
  flex-basis: 100%;
  width: 100%;
  background: transparent;
  padding: var(--space-12) var(--space-8) 0 var(--space-8);
  margin: 0;
  border-top: 1px solid var(--mx-gray-200);
}

body#checkout .chronorelais_informations {
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--mx-gray-900);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  margin-bottom: var(--space-4);
}

body#checkout #chrono_postcode_controls {
  max-width: 500px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Liste des points relais Chronopost */
body#checkout #relais_txt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0;
}

body#checkout #relais_txt .checkbox {
  margin: 0;
  padding: 0;
}

body#checkout #relais_txt .checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  cursor: pointer;
}

body#checkout #relais_txt .checkbox input[type="radio"] {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Options de commande (message, recyclage, cadeau) */
body#checkout .order-options {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--mx-gray-200);
}

body#checkout .order-options #delivery {
  margin-bottom: var(--space-4);
}

body#checkout .order-options label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
  margin-bottom: var(--space-2);
}

body#checkout .order-options textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-3);
  border: 1px solid var(--mx-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  resize: vertical;
}

body#checkout .order-options textarea:focus {
  outline: none;
  border-color: var(--mx-blue-500);
  box-shadow: 0 0 0 3px rgba(70, 188, 235, 0.15);
}

/* Checkbox recyclage et cadeau */
body#checkout .order-options .custom-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

body#checkout .order-options .custom-checkbox label {
  margin-bottom: 0;
  font-weight: var(--fw-normal);
}

body#checkout #gift {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--mx-gray-50);
  border-radius: var(--radius-md);
}

/* ==========================================
   6.4 Payment options
   ========================================== */

/* Header section (titre + bouton aligné) */
body#checkout .mx-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  text-align: left;
}

/* Step 4 paiement - plus d'espace sous le header */
body#checkout #checkout-payment-step .mx-section-header {
  margin-bottom: var(--space-6);
}

body#checkout .mx-section-header > * {
  flex: 1 1 auto;
  min-width: 0;
}

body#checkout .mx-section-header .mx-section-title {
  flex: 0 0 auto;
  white-space: nowrap;
}

body#checkout .mx-section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

body#checkout .payment-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

body#checkout .payment-option.clearfix {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  background: white;
  border: 2px solid var(--mx-gray-900);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: all var(--transition-fast);
  cursor: pointer;
}

/* Reset float sur custom-radio dans paiement */
body#checkout .payment-option .custom-radio {
  float: none !important;
  flex-shrink: 0;
  margin: 0 !important;
}

/* Forcer le label à rester sur la même ligne (override inline style display:block) */
body#checkout .payment-option > label[style],
body#checkout .payment-option > label,
body#checkout .payment-option .custom-radio + label {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  white-space: nowrap;
}

body#checkout .payment-option.clearfix:hover {
  border-color: var(--mx-blue-500);
}

body#checkout .payment-option.clearfix:has(input:checked) {
  border-color: var(--mx-blue-500);
  background: var(--mx-blue-50);
}

body#checkout section.checkout-step .payment-options .payment-option label {
  display: flex !important;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  cursor: pointer;
  flex: 1;
}

body#checkout .payment-option label span {
  font-weight: var(--fw-medium);
  color: var(--mx-gray-900);
}

body#checkout .payment-option label img {
  max-height: 30px;
  width: auto;
}

/* Informations additionnelles paiement */
body#checkout section.checkout-step .additional-information {
  background: transparent;
  padding: 0 var(--space-3);
  margin-top: var(--space-1);
  margin-left: 0;
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  max-width: 800px;
}

body#checkout .definition-list dl dd,
body#checkout .definition-list dl dt {
  background: var(--mx-blue-50);
}

/* Formulaires de paiement intégrés - masquer si vide ou juste bouton caché */
body#checkout .js-payment-option-form:has(form:only-child):has(button[style*="display:none"]:only-child) {
  display: none !important;
}

/* Boutons cachés des formulaires de paiement - reset complet */
body#checkout .js-payment-option-form button[type="submit"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ==========================================
   6.6 Conditions (CGV)
   ========================================== */

body#checkout #conditions-to-approve {
  margin-bottom: var(--space-6);
  margin-left: var(--space-6);
}

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

body#checkout #conditions-to-approve li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

body#checkout #conditions-to-approve .float-xs-left {
  float: none !important;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 2px;
}

body#checkout #conditions-to-approve .condition-label {
  flex: 1;
  padding-left: 0;
  margin-top: 0;
}

body#checkout #conditions-to-approve .condition-label label {
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  line-height: var(--lh-relaxed);
  margin: 0;
}

body#checkout #conditions-to-approve a {
  color: var(--mx-blue-600);
  text-decoration: underline;
}

/* ==========================================
   8.2 Submit order button
   ========================================== */

body#checkout #payment-confirmation {
  padding-top: var(--space-4);
  border-top: 1px solid var(--mx-gray-200);
  display: flex;
  flex-direction: column;
  align-items: center;
}

body#checkout #payment-confirmation .ps-shown-by-js {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body#checkout #payment-confirmation button[type="submit"] {
  width: 100% !important;
  min-width: 280px !important;
  max-width: 400px !important;
  background: var(--mx-gray-900) !important;
  color: white !important;
  border: none !important;
  padding: var(--space-4) var(--space-8) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase;
  cursor: pointer !important;
  transition: all var(--transition-fast);
  opacity: 1 !important;
  margin: var(--space-4) auto !important;
}

body#checkout #payment-confirmation button[type="submit"]:hover {
  background: var(--mx-orange-500) !important;
}

/* Bouton Commander disabled - style ghost */
body#checkout #payment-confirmation button[type="submit"].disabled,
body#checkout #payment-confirmation button[type="submit"]:disabled {
  background: transparent !important;
  color: var(--mx-gray-500) !important;
  border: 1px solid var(--mx-gray-300) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

body#checkout #payment-confirmation button[type="submit"].disabled:hover,
body#checkout #payment-confirmation button[type="submit"]:disabled:hover {
  background: transparent !important;
  color: var(--mx-gray-500) !important;
  border: 1px solid var(--mx-gray-300) !important;
  cursor: not-allowed !important;
}

/* Message d'alerte conditions */
body#checkout .js-alert-payment-conditions {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--mx-red-50);
  border: 1px solid var(--mx-red-200);
  border-radius: var(--radius-md);
  color: var(--mx-red-700);
  font-size: var(--fs-sm);
}

body#checkout .js-alert-payment-conditions a {
  color: var(--mx-red-700);
  text-decoration: underline;
  font-weight: var(--fw-medium);
}

/* Message commande gratuite */
body#checkout .cart-payment-step-not-needed-info {
  padding: var(--space-4);
  background: var(--mx-green-50);
  border: 1px solid var(--mx-green-200);
  border-radius: var(--radius-md);
  color: var(--mx-green-700);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

/* ==========================================
   9.1 PayPal Express (Step 1) - Dans quick-access wrapper
   ========================================== */

/* Styles gérés dans section 15.1 QUICK ACCESS */

/* ==========================================
   9.2 PayPal Payment (Step 4)
   ========================================== */

body#checkout [data-container-express-checkout][data-paypal-source-page="payment-step"] {
  display: block;
  margin: var(--space-4) 0;
  width: 100% !important;
}

/* Bouton PayPal - taille confortable */
body#checkout [data-container-express-checkout][data-paypal-source-page="payment-step"] [paypal-button-container] {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 350px;
}

/* Alerte "Veuillez cliquer sur le bouton PayPal" - inline, masquée par défaut */
/* PayPal normal = paypal-ec-wrong-button-message */
/* PayPal 4x = paypal-wrong-button-message */
body#checkout [paypal-ec-wrong-button-message],
body#checkout [paypal-wrong-button-message] {
  display: none;
  width: auto;
  white-space: nowrap;
  margin-top: var(--space-2);
}

/* Affichée uniquement quand le module l'active via style inline */
body#checkout [paypal-ec-wrong-button-message][style*="display: block"],
body#checkout [paypal-ec-wrong-button-message][style*="display:block"],
body#checkout [paypal-wrong-button-message][style*="display: block"],
body#checkout [paypal-wrong-button-message][style*="display:block"] {
  display: inline-flex !important;
}

/* ==========================================
   10.1 Tablet (768-991px)
   ========================================== */

@media (min-width: 768px) and (max-width: 991px) {
  body#checkout #wrapper {
    padding: 0 !important;
  }

  /* Padding sur le contenu, pas sur le wrapper */
  body#checkout #wrapper > .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .mx-checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .mx-checkout-main {
    max-width: 100%;
    overflow: hidden;
  }

  /* Sidebar masquée par défaut, visible uniquement step 4 via JS */
  .mx-checkout-sidebar {
    display: none;
    max-width: 100%;
    overflow: hidden;
  }

  /* Afficher sidebar à l'étape paiement (classe ajoutée par JS) */
  .mx-checkout-sidebar.-show-mobile {
    display: block;
    margin-top: var(--space-6);
  }

  /* Masquer CTA desktop sur tablette */
  .mx-checkout-cta-wrapper {
    display: none !important;
  }

  /* CTA Mobile sticky sous header + progress bar */
  .mx-checkout-cta-mobile {
    --checkout-sticky-top: 115px;
    position: sticky;
    top: var(--checkout-sticky-top);
    z-index: 1000;
    display: block !important;
    background: white;
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--space-8));
    margin: 0 calc(-1 * var(--space-4)) var(--space-4);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  /* Ligne Total | Prix via pseudo-element unique */
  .mx-checkout-cta-mobile::before {
    content: 'Total :\00a0\00a0' attr(data-total);
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding-right: var(--space-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--mx-gray-900);
  }

  .mx-checkout-cta-mobile::after {
    display: none;
  }

  .mx-checkout-cta-mobile .mx-btn-checkout-final {
    display: flex !important;
  }

  /* Progress bar sticky */
  .mx-checkout-progress {
    --checkout-header-height: 67px;
    position: sticky;
    top: var(--checkout-header-height);
    z-index: 1001;
    background: white;
    padding: var(--space-3) var(--space-4);
    margin: 0 calc(-1 * var(--space-4));
    border-radius: 0;
  }

  .mx-checkout-step-indicator {
    width: 2rem;
    height: 2rem;
    font-size: var(--fs-xs);
  }

  .mx-checkout-step-label {
    display: none;
  }

  .mx-checkout-progress-line {
    margin-bottom: 0;
  }

  /* Adresses en 2 colonnes sur tablette */
  body#checkout .address-selector {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Formulaire grid 2 colonnes */
  .mx-checkout-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Options livraison - override theme.css margin: auto */
  body#checkout .delivery-option {
    margin: 0 !important;
  }

  body#checkout .delivery-option .mx-delivery-label {
    flex: 1;
  }

  /* intl-tel-input tablette */
  .iti {
    font-size: 16px;
  }

  /* Notice champs obligatoires - à droite en tablette */
  body#checkout .mx-required-notice {
    text-align: right;
  }

  /* Hauteur min pour pousser le footer - sauf étape 4 */
  body#checkout .mx-checkout-main {
    min-height: 70vh;
  }

  /* Étape 4 avec sidebar - hauteur auto pour ne pas pousser l'aside */
  body#checkout .mx-checkout-grid:has(.mx-checkout-sidebar.-show-mobile) .mx-checkout-main {
    min-height: auto;
  }

  /* Lien ajouter adresse - vertical en tablette */
  body#checkout section.checkout-step .add-address,
  body#checkout section.checkout-step #delivery-addresses + .add-address,
  body#checkout section.checkout-step #invoice-addresses + .add-address {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-4);
  }

  /* Harmoniser hint texte */
  body#checkout .mx-address-hint {
    font-size: var(--fs-xs);
    margin-bottom: var(--space-2);
  }

  /* Bouton ajouter adresse - même style que facturation */
  body#checkout .add-address a {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
  }


  /* Bouton Valider l'adresse - espacement uniforme */
  body#checkout .form-footer {
    margin-top: var(--space-6);
  }

  /* Forgot password - override theme.css margin-left: 14.38rem */
  body#checkout section.checkout-step .forgot-password {
    margin-left: 0 !important;
    text-align: right;
  }

  /* Hint alias - desktop masqué, tablette visible sous l'input */
  body#checkout .mx-alias-hint--desktop {
    display: none;
  }

  body#checkout .mx-alias-hint--tablet {
    display: block;
    margin-top: var(--space-1);
  }

  /* Rangée téléphones - wrap pour que phone-info passe en dessous */
  body#checkout .mx-form-row--3cols:has(.mx-phone-info) {
    flex-wrap: wrap;
  }

  /* Téléphones prennent chacun 50% - 8px pour le gap */
  body#checkout .mx-form-row--3cols:has(.mx-phone-info) > .form-group {
    flex: 0 0 calc(50% - 8px);
  }

  /* Bulle info téléphone - pleine largeur en dessous */
  body#checkout .mx-phone-info {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    margin-top: var(--space-2);
    top: 0;
  }

  body#checkout .mx-phone-info::before {
    left: 10%;
    top: -6px;
    bottom: auto;
    transform: rotate(45deg);
    border-left: 1px solid var(--mx-blue-200);
    border-top: 1px solid var(--mx-blue-200);
    border-right: none;
    border-bottom: none;
  }

  /* Payment option logos - éviter débordement */
  body#checkout .payment-option label img {
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================
   10.2 Mobile (<768px)
   ========================================== */

@media (max-width: 767px) {
  body#checkout #wrapper {
    padding-top: 0 !important;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Masquer message "4 étapes" sur mobile */
  .mx-checkout-encouragement--guest {
    display: none !important;
  }

  .mx-checkout-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Sidebar masquée par défaut, visible uniquement step 4 via JS */
  .mx-checkout-sidebar {
    display: none;
    order: 99;
  }

  /* Afficher sidebar à l'étape paiement (classe ajoutée par JS) */
  .mx-checkout-sidebar.-show-mobile {
    display: block;
  }

  /* Masquer CTA desktop sur mobile */
  .mx-checkout-cta-wrapper {
    display: none !important;
  }

  /* CTA Mobile sticky sous header + progress bar */
  .mx-checkout-cta-mobile {
    --checkout-sticky-top: 115px; /* Fallback (67px header + 48px progress), écrasé par JS */
    position: sticky;
    top: var(--checkout-sticky-top);
    z-index: 1000;
    display: block !important;
    background: white;
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--space-8));
    margin: 0 calc(-1 * var(--space-4)) var(--space-4);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  /* Ligne Total | Prix via pseudo-elements positionnés */
  .mx-checkout-cta-mobile::before {
    content: 'Total';
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    padding-left: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--mx-gray-900);
  }

  .mx-checkout-cta-mobile::after {
    content: attr(data-total);
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    padding-right: var(--space-2);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--mx-gray-900);
  }

  /* Bouton Commander - styles desktop hérités */
  .mx-checkout-cta-mobile .mx-btn-checkout-final {
    display: flex !important;
  }

  .mx-checkout-progress {
    --checkout-header-height: 67px; /* Fallback, écrasé par JS */
    position: sticky;
    top: var(--checkout-header-height);
    z-index: 1001;
    background: white;
    padding: var(--space-3) var(--space-4);
    margin: 0 calc(-1 * var(--space-4));
    border-radius: 0;
  }

  .mx-checkout-step-indicator {
    width: 2rem;
    height: 2rem;
    font-size: var(--fs-xs);
  }

  .mx-checkout-step-label {
    display: none;
  }

  .mx-checkout-progress-line {
    margin-bottom: 0;
  }

  body#checkout .checkout-step {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  /* Fond gris remplit la hauteur dispo */
  body#checkout .mx-checkout-main {
    min-height: calc(100vh - 250px);
  }

  /* Scroll margin pour autocomplete sous sticky (header + progress + CTA) */
  body#checkout input,
  body#checkout select,
  body#checkout textarea {
    scroll-margin-top: 250px !important;
  }

  body#checkout .address-selector {
    grid-template-columns: 1fr;
  }

  /* Add address - colonne + hint centré */
  body#checkout .add-address {
    flex-direction: column;
    text-align: center;
  }

  /* Bouton ajouter adresse mobile - garder style bleu */
  body#checkout .add-address a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    text-decoration: none;
    width: 100%;
  }

  body#checkout .add-address a svg {
    width: 18px;
    height: 18px;
  }


  /* Section submit form - centrer */
  body#checkout .mx-form-section--submit {
    text-align: center !important;
  }

  /* Bouton Valider l'adresse - full width comme les autres */
  body#checkout .checkout-step button[name="confirm-addresses"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: var(--space-4) auto !important;
  }

  /* Lignes 2/3 colonnes - passer en colonne sur mobile */
  body#checkout .mx-form-row--2cols,
  body#checkout .mx-form-row--3cols {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Toggle Particulier/Pro - réduire padding, permettre shrink */
  body#checkout .mx-account-type-toggle {
    gap: var(--space-2);
  }

  body#checkout .mx-account-type-option {
    min-width: 0;
  }

  body#checkout .mx-account-type-label {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    min-width: 0;
    overflow: hidden;
  }

  body#checkout .mx-account-type-label svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  /* Container actions adresses mobile - empilés */
  body#checkout .mx-address-actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  body#checkout .mx-address-actions .add-address {
    max-width: none;
    width: 100%;
  }

  /* Variante orange pour facturation différente mobile */
  body#checkout .add-address.mx-different-address a {
    background: var(--mx-orange-50);
    border: 1px solid var(--mx-orange-100);
    color: var(--mx-gray-900);
  }

  body#checkout .add-address.mx-different-address a:hover {
    background: var(--mx-orange-100);
    border-color: var(--mx-orange-200);
  }

  /* Checkbox même adresse - font plus petit sur mobile */
  body#checkout .mx-same-address-checkbox .mx-checkbox-label,
  body#checkout .mx-address-same-info {
    font-size: var(--fs-xs);
  }

  /* Bulle info téléphone - flèche vers le haut sur mobile */
  body#checkout .mx-phone-info::before {
    left: 20px;
    top: -7px;
    transform: rotate(135deg);
  }

  /* Login split - 1 colonne sur mobile */
  .mx-checkout-login-split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .mx-checkout-login-separator {
    width: 100%;
    height: 1px;
    min-height: auto;
  }

  /* Bouton Se connecter centré */
  body#checkout .mx-checkout-login-left .form-footer {
    justify-content: center !important;
  }

  /* PayPal Express mobile */
  body#checkout [data-container-express-checkout] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  body#checkout [data-container-express-checkout]::before {
    white-space: normal;
    text-align: center;
  }

  body#checkout [paypal-button-container] {
    max-width: 100%;
  }

  /* PayPal shortcut step 1 - masquer label, centrer bouton */
  body#checkout .mx-checkout-quick-access [paypal-shortcut-signup] {
    justify-content: center;
    margin-left: 0;
    width: 100%;
  }

  body#checkout .mx-checkout-quick-access [paypal-shortcut-signup] .mx-paypal-label {
    display: none;
  }

  body#checkout .mx-checkout-quick-access [paypal-button-container] {
    width: 100% !important;
    max-width: 250px;
    margin: 0 auto;
  }

  /* Delivery options mobile - override theme.css margin: auto */
  body#checkout .delivery-option {
    flex-direction: column;
    align-items: stretch;
    position: relative;
    padding-left: calc(var(--space-4) + 2rem);
    margin: 0 !important;
    width: 100% !important;
  }

  body#checkout .delivery-option .col-sm-1 {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
  }

  body#checkout .delivery-option .mx-carrier-row-main {
    flex-direction: column;
    align-items: flex-start;
  }

  body#checkout .delivery-option .mx-carrier-name {
    font-size: var(--fs-sm);
  }

  body#checkout .delivery-option .mx-carrier-price {
    margin: 0 auto;
  }

  /* Bouton Valider la livraison - centré */
  body#checkout #js-delivery {
    text-align: center;
  }

  body#checkout button[name="confirmDeliveryOption"] {
    float: none !important;
    margin: var(--space-4) auto !important;
  }

  /* Custom radio - pas de margin-right qui décentre */
  body#checkout .custom-radio {
    margin-right: 0 !important;
  }

  /* Chronorelais mobile */
  body#checkout #chronorelais_container {
    padding: var(--space-1) !important;
  }

  body#checkout #chronorelais_container h3 {
    font-size: var(--fs-base) !important;
    margin: var(--space-2) 0;
  }

  body#checkout #chrono_postcode_controls {
    max-width: calc(100vw - 2 * var(--space-4) - 2 * var(--space-1)) !important;
  }

  body#checkout #chrono_postcode_controls .input-group {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
  }

  body#checkout #chrono_postcode_controls #relais_postcode {
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 80px !important;
    font-size: var(--fs-base) !important;
    padding: var(--space-2) !important;
  }

  body#checkout #chrono_postcode_controls .input-group-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
  }

  body#checkout #chrono_postcode_controls .input-group-btn .btn {
    flex: 1 1 0;
    min-width: 0 !important;
    font-size: 10px !important;
    padding: var(--space-2) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Map masquée sur mobile */
  body#checkout #chronorelais_container .leaflet-container,
  body#checkout #chronorelais_container #map,
  body#checkout #chronorelais_container [class*="map"] {
    display: none !important;
  }

  body#checkout #chronorelais_informations {
    font-size: var(--fs-sm);
  }

  body#checkout #relais_txt {
    text-align: left;
  }

  body#checkout #relais_txt_cont h4,
  body#checkout .relais_txt_cont h4 {
    font-size: var(--fs-base) !important;
  }

  body#checkout #relais_txt .checkbox {
    margin: var(--space-3) 0;
  }

  body#checkout #relais_txt .checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
  }

  body#checkout #relais_txt .checkbox input[type="radio"] {
    flex-shrink: 0;
    margin-top: 4px;
  }

  body#checkout .delivery-option .delivery-option-2 .row {
    flex-direction: column;
    align-items: flex-start;
  }

  body#checkout .carrier-price {
    margin-top: var(--space-2);
    font-size: var(--fs-lg);
  }

  /* Payment options mobile */
  body#checkout .payment-option.clearfix {
    max-width: 100%;
    overflow: hidden;
  }

  body#checkout .payment-option > label[style],
  body#checkout .payment-option > label,
  body#checkout .payment-option .custom-radio + label {
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    min-width: 0;
  }

  body#checkout .payment-option label {
    flex: 1;
    min-width: 0;
  }

  body#checkout .payment-option label span {
    display: block;
    word-break: break-word;
    font-size: var(--fs-sm);
  }

  body#checkout .payment-option label img {
    margin-top: var(--space-2);
    max-width: 120px;
    height: auto;
  }

  /* Bouton confirmation full width */
  body#checkout #payment-confirmation button[type="submit"] {
    padding: var(--space-5);
    font-size: var(--fs-lg);
  }

  /* CGV checkbox mobile */
  body#checkout #conditions-to-approve {
    margin-left: var(--space-2);
  }

  body#checkout #conditions-to-approve li {
    gap: var(--space-3);
  }

  body#checkout #conditions-to-approve .condition-label label {
    font-size: var(--fs-xs);
  }

  /* Header checkout mobile */
  .mx-checkout-header-inner {
    gap: var(--space-2);
    padding: 0 var(--space-2);
  }

  /* 3 colonnes égales pour centrer le logo */
  .mx-checkout-back,
  .mx-checkout-logo,
  .mx-checkout-secure-header.mx-mobile {
    flex: 1 1 0;
    min-width: 0;
  }

  .mx-checkout-back {
    justify-content: flex-start;
  }

  .mx-checkout-logo {
    display: flex;
    justify-content: center;
  }

  .mx-checkout-secure-header.mx-mobile {
    justify-content: flex-end;
  }

  .mx-checkout-back,
  .mx-checkout-contact {
    min-width: auto;
    padding: 0;
  }

  .mx-checkout-back span,
  .mx-checkout-contact span {
    display: none;
  }

  .mx-checkout-logo img {
    height: 24px;
  }

  /* Badge paiement sécurisé : toggle desktop/mobile */
  .mx-checkout-secure-header.mx-desktop {
    display: none;
  }

  .mx-checkout-secure-header.mx-mobile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .mx-checkout-secure-header.mx-mobile .mx-pipe {
    color: var(--mx-gray-800);
  }

  .mx-checkout-secure-header.mx-mobile .fa-stripe {
    font-size: 25px;
    color: var(--mx-gray-800);
  }

  /* Cart summary compact mobile */
  .mx-checkout-sidebar .cart-summary {
    padding: var(--space-3);
  }

  .mx-checkout-sidebar .cart-summary-product-list {
    max-height: 200px;
  }

  /* intl-tel-input mobile */
  .iti {
    font-size: 16px; /* Évite zoom iOS */
  }

  .iti__dropdown-content {
    max-width: calc(100vw - 2rem);
  }

  /* Formulaires mobile - inputs plus grands pour touch */
  body#checkout input[type="text"],
  body#checkout input[type="email"],
  body#checkout input[type="tel"],
  body#checkout input[type="password"],
  body#checkout select,
  body#checkout textarea {
    min-height: 48px;
    font-size: 16px; /* Évite zoom iOS */
  }

  /* Boutons navigation mobile */
  .mx-step-nav {
    flex-direction: column;
    gap: var(--space-3);
  }

  .mx-step-nav.mx-step-nav--top {
    display: none;
  }

  .mx-step-nav .mx-btn {
    width: 100%;
    justify-content: center;
  }

  /* Section header mobile */
  body#checkout .mx-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }

  /* Step 4 paiement - margin sous le titre h3 */
  body#checkout #checkout-payment-step .mx-section-header h3.mx-section-title {
    margin-bottom: var(--space-4);
  }

  body#checkout .mx-section-header .mx-cgv-top label {
    font-size: 12px;
  }

  /* Chronorelais container mobile */
  #chronorelais_container {
    padding: var(--space-3);
  }

  #chronorelais_container .leaflet-container {
    height: 250px !important;
  }

  /* Step 1 logged - message encouragement en colonne centré */
  body#checkout .mx-checkout-encouragement {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  body#checkout .mx-checkout-encouragement svg {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }
}

/* ==========================================
   15. ÉTAT CONNECTÉ - STEP 1
   ========================================== */

/* Message encourageant (logged) */
body#checkout .mx-checkout-encouragement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
  margin-bottom: var(--space-6);
}

body#checkout .mx-checkout-encouragement svg {
  color: var(--mx-green-500, #22c55e);
  flex-shrink: 0;
}

/* ==========================================
   15.1 QUICK ACCESS - GUEST (4 étapes + PayPal)
   ========================================== */

/* Masquer PayPal par défaut (avant déplacement dans wrapper) */
body#checkout [paypal-shortcut-signup] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

/* Afficher PayPal une fois dans notre wrapper */
body#checkout .mx-checkout-quick-access [paypal-shortcut-signup] {
  opacity: 1;
  visibility: visible;
  position: static;
  pointer-events: auto;
}

/* Wrapper principal - fond blanc avec border-bottom */
body#checkout .mx-checkout-quick-access {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--mx-gray-200);
}

/* Message "4 étapes simples" */
body#checkout .mx-checkout-encouragement--guest {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

/* Badge "4" - style step indicator */
body#checkout .mx-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  background: var(--mx-black);
  border-radius: 50%;
  color: white;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* Texte "étapes simples..." */
body#checkout .mx-encouragement-text {
  color: var(--mx-gray-700);
}

/* Conteneur PayPal - aligné à droite */
body#checkout .mx-checkout-quick-access [paypal-shortcut-signup] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  margin-left: auto;
  border: none;
}

/* Label PayPal natif du module - harmonisé avec le reste */
body#checkout .mx-checkout-quick-access [paypal-shortcut-signup] .mx-paypal-label {
  color: var(--mx-gray-600);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* Reset tous les styles inline du module PayPal */
body#checkout .mx-checkout-quick-access [data-container-express-checkout] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Bouton PayPal - largeur fixe */
body#checkout .mx-checkout-quick-access [paypal-button-container] {
  width: 180px !important;
}

/* Container avec bg - width fit-content */
body#checkout .mx-logged-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  padding: var(--space-3) var(--space-4);
  background: var(--mx-blue-50);
  border: 1px solid var(--mx-blue-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

/* Avatar rond orange avec icône blanche */
body#checkout .mx-logged-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--mx-orange);
  border-radius: 50%;
}

body#checkout .mx-logged-avatar svg {
  color: white;
  width: 20px;
  height: 20px;
}

/* Texte "Connecté en tant que" */
body#checkout .mx-logged-text {
  font-size: var(--fs-base);
  color: var(--mx-gray-600);
}

/* Nom cliquable */
body#checkout .mx-logged-name {
  color: var(--mx-gray-900);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: color var(--transition-fast);
}

body#checkout .mx-logged-name:hover {
  color: var(--mx-orange);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Ligne "Ce n'est pas vous ? Se déconnecter" - hors du bg */
body#checkout .mx-logout-line {
  font-size: var(--fs-sm);
  color: var(--mx-gray-500);
  margin-bottom: var(--space-2);
  padding-left: var(--space-4); /* Aligné avec le padding du bg */
}

/* Lien déconnexion */
body#checkout .mx-logout-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--mx-gray-900);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: color var(--transition-fast);
  margin-left: var(--space-2);
}

body#checkout .mx-logout-link svg {
  color: var(--mx-orange);
  flex-shrink: 0;
}

body#checkout .mx-logout-link:hover {
  color: var(--mx-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Icône reste orange au hover */
body#checkout .mx-logout-link:hover svg {
  color: var(--mx-orange);
}

/* Message warning panier vidé */
body#checkout .mx-logout-warning {
  font-size: var(--fs-xs);
  color: var(--mx-gray-400);
  margin-bottom: var(--space-3);
}

body#checkout .mx-logout-warning small {
  font-size: inherit;
}

/* Form continue - alignement */
body#checkout .mx-logged-continue {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  body#checkout .mx-logged-continue {
    justify-content: center;
  }
}

/* ==========================================
   16. PAGE PAIEMENT ÉCHOUÉ (STRIPE)
   ========================================== */

.mx-payment-failed {
  padding: var(--space-12) 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.mx-payment-failed-card {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  background: white;
  border: 1px solid var(--mx-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

/* Icône erreur */
.mx-payment-failed-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-6);
  background: var(--mx-red-50, #fef2f2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mx-payment-failed-icon svg {
  width: 48px;
  height: 48px;
  color: var(--mx-red-500, #ef4444);
}

/* Titre */
.mx-payment-failed-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--mx-gray-900);
  margin-bottom: var(--space-3);
}

/* Message */
.mx-payment-failed-message {
  font-size: var(--fs-base);
  color: var(--mx-gray-600);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

/* Raisons possibles */
.mx-payment-failed-reasons {
  background: var(--mx-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  text-align: left;
}

.mx-payment-failed-reasons-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-700);
  margin-bottom: var(--space-2);
}

.mx-payment-failed-reasons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mx-payment-failed-reasons li {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  padding: var(--space-1) 0;
  padding-left: var(--space-5);
  position: relative;
}

.mx-payment-failed-reasons li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--mx-red-500, #ef4444);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* Actions */
.mx-payment-failed-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.mx-payment-failed-actions .mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.mx-payment-failed-actions .mx-btn-primary {
  background: var(--mx-gray-900);
  color: white;
  border: none;
}

.mx-payment-failed-actions .mx-btn-primary:hover {
  background: var(--mx-orange);
}

.mx-payment-failed-actions .mx-btn-secondary {
  background: white;
  color: var(--mx-gray-700);
  border: 1px solid var(--mx-gray-300);
}

.mx-payment-failed-actions .mx-btn-secondary:hover {
  border-color: var(--mx-gray-400);
  color: var(--mx-gray-900);
}

/* Réassurance */
.mx-payment-failed-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
}

.mx-payment-failed-secure svg {
  color: var(--mx-green-500, #22c55e);
}

/* ==========================================
   17. PAGE 3D SECURE CONFIRMATION (STRIPE)
   ========================================== */

.mx-3ds-confirm {
  padding: var(--space-12) 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.mx-3ds-confirm-card {
  max-width: 450px;
  margin: 0 auto;
  text-align: center;
  background: white;
  border: 1px solid var(--mx-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

/* Icône sécurité */
.mx-3ds-confirm-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-6);
  background: var(--mx-blue-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mx-3ds-confirm-icon svg {
  width: 40px;
  height: 40px;
  color: var(--mx-blue-500, #3b82f6);
}

/* Titre */
.mx-3ds-confirm-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--mx-gray-900);
  margin-bottom: var(--space-3);
}

/* Message */
.mx-3ds-confirm-message {
  font-size: var(--fs-base);
  color: var(--mx-gray-600);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

/* Loader */
.mx-3ds-confirm-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--mx-gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.mx-3ds-confirm-loader span {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
}

/* Spinner */
.mx-3ds-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--mx-gray-200);
  border-top-color: var(--mx-orange);
  border-radius: 50%;
  animation: mx-spin 1s linear infinite;
}

@keyframes mx-spin {
  to { transform: rotate(360deg); }
}

/* Réassurance */
.mx-3ds-confirm-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
}

.mx-3ds-confirm-secure svg {
  color: var(--mx-green-500, #22c55e);
}