/* ============================================================
   ZN-Airsoft — Badge Alma hybride (fiche produit)
   Charte : noir #0a0a0a + orange #FF6B00, fonts Rajdhani / DM Sans
   ============================================================ */

/* === Masquage du widget natif Alma (laissé dans le DOM pour la lib JS) ===
   .alma-pp-container : wrapper utilisé sur la fiche produit (hook displayProductPriceBlock)
   #alma-cart-widget  : id utilisé sur la page panier (hook displayShoppingCartFooter) */
.alma-pp-container,
#alma-cart-widget {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  pointer-events: auto; /* on autorise le clic programmatique JS */
}

/* === Conteneur principal du badge custom === */
.zn-alma-badge {
  display: block;
  margin: 14px 0;
  background: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-left: 3px solid #FF6B00;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #0a0a0a;
}

.zn-alma-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.zn-alma-badge:focus-visible {
  outline: 2px solid #FF6B00;
  outline-offset: 2px;
}

/* === Niveau 1 — État REPOS === */
.zn-alma-badge__rest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.zn-alma-badge__logo {
  display: inline-block;
  flex-shrink: 0;
  background: #FF6B00;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 10px;
  border-radius: 3px;
  line-height: 1;
}

.zn-alma-badge__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.zn-alma-badge__title {
  font-size: 14px;
  font-weight: 600;
  color: #0a0a0a;
  line-height: 1.3;
}

.zn-alma-badge__sub {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
  line-height: 1.3;
}

.zn-alma-badge__chevron {
  flex-shrink: 0;
  color: #FF6B00;
  font-size: 12px;
  line-height: 1;
  transition: transform .3s ease;
  user-select: none;
}

.zn-alma-badge.is-open .zn-alma-badge__chevron {
  transform: rotate(180deg);
}

/* === Niveau 2 — État DÉPLOYÉ === */
.zn-alma-badge__expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}

.zn-alma-badge.is-open .zn-alma-badge__expanded {
  max-height: 600px; /* marge confortable au cas où le contenu pousse */
}

.zn-alma-badge__expanded[hidden] {
  display: none;
}

.zn-alma-badge__separator {
  border-top: 1px dashed #E5E5E5;
  margin: 0 16px;
}

/* === Grid 2 colonnes (cards 3× / 4×) === */
.zn-alma-badge__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
}

.zn-alma-card {
  background: #fff;
  border: 1.5px solid #0a0a0a;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zn-alma-card__title {
  font-family: 'Rajdhani', sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #888;
}

.zn-alma-card__monthly {
  font-family: 'Rajdhani', sans-serif;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.1;
  margin: 2px 0;
}

.zn-alma-card__per {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  margin-left: 1px;
}

.zn-alma-card__sep {
  border-top: 1px dashed #E5E5E5;
  margin: 2px 0;
}

.zn-alma-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  line-height: 1.3;
}

.zn-alma-card__label {
  color: #666;
}

.zn-alma-card__value--strong {
  color: #0a0a0a;
  font-weight: 700;
}

.zn-alma-card__value--muted {
  color: #999;
}

/* === Bandeau orange clair (réassurance) === */
.zn-alma-badge__reassurance {
  background: #FFF8F0;
  border: 1px solid #FFD9B3;
  border-left: none;
  border-right: none;
  padding: 8px 16px;
  font-size: 11px;
  color: #8B4513;
  text-align: center;
  line-height: 1.4;
}

/* === Bouton CTA === */
.zn-alma-badge__cta {
  display: block;
  width: 100%;
  background: #FF6B00;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px;
  border: none;
  cursor: pointer;
  transition: background .18s ease;
}

.zn-alma-badge__cta:hover {
  background: #E55E00;
}

.zn-alma-badge__cta:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: -2px;
}

/* === Responsive === */
@media (max-width: 1024px) {
  .zn-alma-badge__rest {
    padding: 12px 14px;
    gap: 10px;
  }
  .zn-alma-badge__grid {
    padding: 12px 14px;
  }
  .zn-alma-badge__separator,
  .zn-alma-badge__reassurance {
    margin-left: 14px;
    margin-right: 14px;
  }
}

@media (max-width: 480px) {
  .zn-alma-badge__rest {
    flex-wrap: wrap;
    padding: 12px;
    gap: 8px;
  }
  .zn-alma-badge__logo {
    font-size: 10px;
    padding: 5px 8px;
  }
  .zn-alma-badge__title {
    font-size: 13px;
  }
  .zn-alma-badge__sub {
    font-size: 11px;
  }
  .zn-alma-badge__grid {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 8px;
  }
  .zn-alma-badge__separator,
  .zn-alma-badge__reassurance {
    margin-left: 12px;
    margin-right: 12px;
  }
  .zn-alma-badge__reassurance {
    font-size: 10px;
    padding: 8px 12px;
  }
}

/* === Mode dégradé (sans JS / fallback) ===
   Si le JS ne charge pas, on affiche quand même le contenu déployé en statique
   pour que l'info reste accessible (mensualités visibles). */
@media (prefers-reduced-motion: reduce) {
  .zn-alma-badge,
  .zn-alma-badge__chevron,
  .zn-alma-badge__expanded,
  .zn-alma-badge__cta {
    transition: none;
  }
}

/* ============================================================
   Checkout — Payment options (étape 4 du tunnel)
   Style homogène pour TOUS les modes de paiement (CB, PayPal, Alma, Amazon Pay…)
   avec spécialisation visuelle Alma cohérente avec les badges fiche produit / panier.
   ============================================================ */

.zn-payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.zn-payment-option {
  background: #fff;
  border: 1px solid #E5E5E5;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #0a0a0a;
}

.zn-payment-option:hover {
  border-color: #0a0a0a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.zn-payment-option.is-selected {
  border: 2px solid #FF6B00;
  background: #FFF8F0;
}

.zn-payment-option:focus-within {
  outline: 2px solid #FF6B00;
  outline-offset: 2px;
}

/* Label cliquable couvrant toute la zone */
.zn-payment-option__label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  margin: 0;
}

/* Radio natif PrestaShop : on l'utilise tel quel mais on le pousse */
.zn-payment-option__radio {
  flex-shrink: 0;
  margin-right: 4px;
}

/* Badge ALMA orange (réutilise le style du logo .zn-alma-badge__logo défini plus haut) */
.zn-payment-option__alma-logo {
  flex-shrink: 0;
  /* hérite déjà bg orange + texte blanc + Rajdhani via .zn-alma-badge__logo */
}

/* Bloc texte (titre + sous-texte optionnel) */
.zn-payment-option__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.zn-payment-option__title {
  font-size: 14px;
  font-weight: 500;
  color: #0a0a0a;
  line-height: 1.3;
}

.zn-payment-option.is-selected .zn-payment-option__title {
  font-weight: 700;
}

.zn-payment-option__sub {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
  line-height: 1.3;
}

/* Logo du module (CB, PayPal, Amazon Pay…) — taille uniforme */
.zn-payment-option__logo {
  flex-shrink: 0;
  max-width: 80px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* additionalInformation block (rendu module — Alma in-page placeholder, etc.) */
.zn-payment-option__additional {
  padding: 0 16px 14px 16px;
  border-top: 1px dashed #E5E5E5;
  margin-top: -1px;
}

.zn-payment-option__additional.ps-hidden {
  display: none;
}

/* Form du module (caché PS-natif quand pas sélectionné) */
.zn-payment-option__form.ps-hidden {
  display: none;
}

/* Bouton "Confirmer la commande" en bas de step */
.zn-payment-confirmation {
  margin-top: 20px;
}

.zn-payment-confirm-btn {
  background: #FF6B00;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 24px;
  border: none;
  cursor: pointer;
  transition: background .18s ease;
  width: 100%;
}

.zn-payment-confirm-btn:hover:not(.disabled) {
  background: #E55E00;
}

.zn-payment-confirm-btn.disabled {
  background: #E5E5E5;
  color: #999;
  cursor: not-allowed;
}

/* Conditions à approuver (CGV) */
.zn-conditions-to-approve {
  margin: 16px 0;
  padding: 14px 16px;
  background: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-left: 3px solid #FF6B00;
}

.zn-conditions-to-approve ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zn-conditions-to-approve li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: #0a0a0a;
}

/* Responsive */
@media (max-width: 768px) {
  .zn-payment-option__label {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .zn-payment-option__title {
    font-size: 13px;
  }
  .zn-payment-option__sub {
    font-size: 11px;
  }
  .zn-payment-option__logo {
    max-width: 60px;
    max-height: 28px;
  }
}

@media (max-width: 480px) {
  .zn-payment-option__additional {
    padding: 0 12px 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zn-payment-option {
    transition: none;
  }
  .zn-payment-confirm-btn {
    transition: none;
  }
}

/* ============================================================
   Wrapper visuel ZN autour de Stripe Elements
   ------------------------------------------------------------
   Stripe.js injecte dynamiquement un widget multi-méthodes
   (Carte / Bancontact / EPS / Revolut / Apple Pay / Google Pay)
   dans #js-stripe-payment-element. Ce CSS habille l'enveloppe pour
   restaurer la cohérence visuelle ZN, SANS toucher au contenu Stripe
   ni à sa configuration (fonctionnalité préservée à 100 %).

   Ciblage chirurgical :
     - .zn-payment-option__form qui CONTIENT #js-stripe-payment-form
       (sélecteur :has() — supporté Chrome 105+/Safari 15.4+/Firefox 121+)
     - #js-stripe-payment-element : le conteneur où Stripe injecte le widget
   Aucun !important : la spécificité suffit.
   ============================================================ */

/* Bloc .zn-payment-option__form qui héberge Stripe Elements */
.zn-payment-option__form:has(#js-stripe-payment-form) {
  padding: 14px 16px;
  border-top: 1px dashed #E5E5E5;
  background: #FAFAFA;
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* Le <form> Stripe lui-même : reset des marges éventuelles */
.zn-payment-option__form #js-stripe-payment-form {
  margin: 0;
}

/* Conteneur du widget Stripe Elements injecté côté client */
#js-stripe-payment-element {
  background: #fff;
  border: 1px solid #E5E5E5;
  border-left: 3px solid #FF6B00;
  padding: 12px 14px;
  min-height: 60px; /* évite le saut de layout pendant que Stripe.js charge */
}

/* Spinner Stripe : harmonisation typographique (laisse les couleurs natives) */
.zn-payment-option__form .stripe-spinner-wrapper .processing-order-text {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #0a0a0a;
}

/* Responsive — mobile */
@media (max-width: 480px) {
  .zn-payment-option__form:has(#js-stripe-payment-form) {
    padding: 12px;
  }
  #js-stripe-payment-element {
    padding: 10px 12px;
  }
}

/* ============================================================
   Pulse visuel sur les radios Alma — mode "guide" sur /commande
   ------------------------------------------------------------
   Le CTA "Sélectionnez Alma 3× ou 4×" déclenche un scroll fluide vers
   le premier radio Alma + ajoute la classe .alma-pulse temporairement
   pour attirer l'œil. La classe est retirée après ~2s par le JS.
   ============================================================ */

@keyframes zn-alma-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.55); border-color: #FF6B00; }
  50%  { box-shadow: 0 0 0 12px rgba(255, 107, 0, 0); border-color: #FF6B00; }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); border-color: #FF6B00; }
}

.zn-payment-option.alma-pulse {
  animation: zn-alma-pulse 1s ease-out 2;
  border-color: #FF6B00;
}

@media (prefers-reduced-motion: reduce) {
  .zn-payment-option.alma-pulse {
    animation: none;
    /* Marque visuelle minimale sans animation : bordure orange persistante 2s côté JS */
  }
}