/* =============================================================
   ch-payment-methods — cartes des modes de paiement (maquette de référence fournie par l'utilisateur, 2026-09-24) :
   nom à gauche, logos à droite, pas de rond radio ; carte choisie = contour bleu 2px, SANS fond teinté (comme les
   modes de livraison de ch-track-orders — retour utilisateur 2026-10-07 : le fond bleu ici seulement était incohérent) ;
   champs de carte (numéro / date + CVC / titulaire) dans la carte choisie ; bouton Apple Pay / Google Pay à la
   place de « Commander ». Mêmes bordure, rayon et padding que les cartes de modes de livraison (variables --ch-trk-*).
   Checkout Blocks (liste native, restylée) ET checkout classique / page « Payer la commande » (<li> natifs).
   ============================================================= */

:root {
  --ch-pm-brand:       var(--ch-trk-brand, #0071E3);
  --ch-pm-border:      var(--ch-trk-border, #E5E7EB);
  --ch-pm-text:        var(--ch-trk-text, #1D1D1F);
  --ch-pm-text-soft:   var(--ch-trk-text-soft, #6E6E73);
  --ch-pm-radius:      var(--ch-trk-radius, 10px);
  --ch-pm-selected-bg: #fff; /* blanc : pas de fond teinté pour un simple état « choisi » (voir en-tête) */
}

/* ── Checkout Blocks ────────────────────────────────────────────────────────────────────────────────────────────
   Structure native : .accordion-option (la carte) > label.__option (ligne cliquable) + .accordion-content (champs).
   La boîte est portée par .accordion-option ; le <label> intérieur perd la sienne (sinon « boîte dans la boîte »). */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control {
  border: 0 !important;
  box-shadow: none !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option {
  position: relative !important;
  display: block !important;
  border: 1px solid var(--ch-pm-border) !important;
  border-radius: var(--ch-pm-radius) !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  background: var(--ch-surface, #fff) !important;
  box-shadow: none !important;
  transition: border-color .15s, background-color .15s;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:last-child {
  margin-bottom: 0 !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control::after,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control::before,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option::after,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option::before,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option::after,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option::before {
  display: none !important;
}
/* Choisie : contour bleu de 2px (bordure + anneau de 1px, sans décaler le contenu), fond blanc. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:has(> .wc-block-components-radio-control__option-checked) {
  border-color: var(--ch-pm-brand) !important;
  box-shadow: 0 0 0 1px var(--ch-pm-brand) !important;
  background: var(--ch-pm-selected-bg) !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:has(> label :focus-visible) {
  box-shadow: 0 0 0 1px var(--ch-pm-brand), 0 0 0 4px rgba(0, 113, 227, 0.18) !important;
}

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  min-height: 0 !important;
  cursor: pointer !important;
}
/* Radio natif gardé (clavier, lecteur d'écran) mais invisible : la carte entière est la zone cliquable. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__input {
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important;
  margin: 0 !important; padding: 0 !important; pointer-events: none !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option-layout,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label-group,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Libellé des autres modes (texte simple, ex. paiement à la livraison) : même typo que nos noms. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label {
  font-size: var(--rmp-fs-body, 16px) !important; font-weight: 500 !important; line-height: 30px !important; color: var(--ch-pm-text) !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-content {
  padding: 0 20px 20px !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-content:empty {
  display: none !important;
}

/* ── Ligne d'une carte : nom à gauche, logos à droite (commun Blocks / classique) ─────────────────────────────── */
.ch-pm-card { display: block; }
.ch-pm-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; min-height: 30px !important; }
.ch-pm-name {
  min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  font-size: var(--rmp-fs-body, 16px) !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--ch-pm-text) !important;
}
.ch-pm-trailing { display: inline-flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; margin-left: auto !important; }
.ch-pm-trailing:empty { display: none !important; }
/* Tous les logos à la même hauteur (15px) et sans aucune bordure/cadre (retour utilisateur 2026-09-24).
   Largeur FIXE par logo (jamais width:auto) : avec auto, la largeur dépend des proportions du SVG une fois chargé, et
   selon le cache certains navigateurs (Safari en flex) ne recalculent pas → logos à la mauvaise taille par moments. */
img.ch-pm-brand {
  display: block !important; height: 15px !important; width: 24px !important; min-width: 0 !important; max-width: none !important; max-height: none !important;
  flex: none !important; object-fit: contain !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  box-shadow: none !important; float: none !important; outline: none !important;
}
img.ch-pm-brand--visa       { width: 48px !important; }
img.ch-pm-brand--apple-pay  { width: 36px !important; }
img.ch-pm-brand--google-pay { width: 39px !important; }

/* ── Champs de la carte bancaire ─────────────────────────────────────────────────────────────────────────────── */
.ch-pm-fields { display: block; }
.ch-pm-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.ch-pm-cell { position: relative !important; min-width: 0 !important; }
.ch-pm-cell--full { grid-column: 1 / -1 !important; }
.ch-pm-field,
input.ch-pm-input {
  display: block !important; width: 100% !important; box-sizing: border-box !important;
  height: 52px !important; margin: 0 !important; padding: 16px 16px !important;
  background: var(--ch-surface, #fff) !important; border: 1px solid var(--ch-pm-border) !important; border-radius: var(--ch-pm-radius) !important;
  box-shadow: none !important; transition: border-color .15s, box-shadow .15s;
}
.ch-pm-cell--icon .ch-pm-field { padding-right: 56px !important; }
input.ch-pm-input {
  font: inherit !important; font-size: var(--rmp-fs-body, 15px) !important; line-height: 20px !important; color: var(--ch-pm-text) !important;
  outline: none !important;
}
input.ch-pm-input::placeholder { color: var(--ch-pm-text-soft) !important; opacity: 1 !important; }
.ch-pm-field.is-focus,
input.ch-pm-input:focus {
  border-color: var(--ch-pm-brand) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12) !important;
}
.ch-pm-field.is-invalid { border-color: #cc1818 !important; }
.ch-pm-field-icon {
  position: absolute !important; right: 16px !important; top: 50% !important; transform: translateY(-50%) !important;
  display: flex !important; pointer-events: none !important; line-height: 0 !important;
}
@media (max-width: 480px) {
  .ch-pm-grid { gap: 12px !important; }
  .ch-pm-cell--icon .ch-pm-field { padding-right: 16px !important; }
  .ch-pm-field-icon { display: none !important; }
}

.ch-pm-error { margin: 10px 0 0 !important; font-size: var(--rmp-fs-body, 13.5px) !important; line-height: 1.4 !important; color: #cc1818 !important; }
.ch-pm-hint { margin: 10px 0 0 !important; font-size: var(--rmp-fs-body, 13.5px) !important; line-height: 1.4 !important; color: var(--ch-pm-text-soft) !important; }

/* ── Bouton Apple Pay / Google Pay, à la place de « Commander » ─────────────────────────────────────────────────
   Monté dès le chargement mais replié (hauteur 0, invisible — pas display:none, pour que Stripe le prépare) : il
   s'affiche instantanément quand on choisit le mode. */
.ch-pm-wallet-slot {
  height: 0 !important; overflow: hidden !important; visibility: hidden !important;
  margin: 0 !important; padding: 0 !important;
}
.ch-pm-wallet-slot.is-active {
  height: auto !important; overflow: visible !important; visibility: visible !important;
}
body.ch-pm-wallet-active .wc-block-components-checkout-place-order-button,
body.ch-pm-wallet-active #place_order {
  display: none !important;
}

/* ── Checkout classique + page « Payer la commande » ───────────────────────────────────────────────────────────── */
.wc_payment_methods {
  margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; background: none !important;
}
.wc_payment_methods > li.wc_payment_method {
  position: relative !important;
  display: block !important;
  border: 1px solid var(--ch-pm-border) !important;
  border-radius: var(--ch-pm-radius) !important;
  padding: 18px 20px !important;
  margin: 0 0 12px !important;
  list-style: none !important;
  background: var(--ch-surface, #fff) !important;
  cursor: pointer !important;
  transition: border-color .15s, background-color .15s;
}
.wc_payment_methods > li.wc_payment_method:last-child { margin-bottom: 0 !important; }
.wc_payment_methods > li.wc_payment_method:has(> input:checked) {
  border-color: var(--ch-pm-brand) !important;
  box-shadow: 0 0 0 1px var(--ch-pm-brand) !important;
  background: var(--ch-pm-selected-bg) !important;
}
.wc_payment_methods > li.wc_payment_method:has(> input:focus-visible) {
  box-shadow: 0 0 0 1px var(--ch-pm-brand), 0 0 0 4px rgba(0, 113, 227, 0.18) !important;
}
.wc_payment_methods > li.wc_payment_method > input.input-radio {
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important;
  margin: 0 !important; padding: 0 !important; pointer-events: none !important;
}
.wc_payment_methods > li.wc_payment_method > label {
  display: flex !important; align-items: center !important; gap: 12px !important; min-height: 30px !important;
  margin: 0 !important; padding: 0 !important; cursor: pointer !important;
  font-size: var(--rmp-fs-body, 16px) !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--ch-pm-text) !important;
}
.wc_payment_methods > li.wc_payment_method > label::before { display: none !important; }
.wc_payment_methods > li.wc_payment_method > .payment_box {
  margin: 0 !important; padding: 18px 0 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  font-size: var(--rmp-fs-body, 13.5px); color: var(--ch-pm-text-soft);
}
.wc_payment_methods > li.wc_payment_method > .payment_box::before { display: none !important; }
.wc_payment_methods > li.wc_payment_method[hidden] { display: none !important; }

/* ── Toutes les options fermées à l'arrivée (body.ch-pm-unchosen, retiré au premier clic sur une option) ─────────
   WooCommerce présélectionne toujours un mode : on neutralise juste son apparence tant que le client n'a pas choisi. */
body.ch-pm-unchosen .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option {
  border-color: var(--ch-pm-border) !important;
  box-shadow: none !important;
  background: var(--ch-surface, #fff) !important;
}
body.ch-pm-unchosen .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-content,
body.ch-pm-unchosen .wc_payment_methods > li.wc_payment_method > .payment_box {
  display: none !important;
}
body.ch-pm-unchosen .wc_payment_methods > li.wc_payment_method {
  border-color: var(--ch-pm-border) !important;
  box-shadow: none !important;
  background: var(--ch-surface, #fff) !important;
}

/* ── « Commander » : texte en 20px (même taille que le texte des boutons Apple Pay / Google Pay) ───────────────── */
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button__text,
#place_order {
  font-size: 20px !important;
}

/* PayPal, Klarna, SEPA (2.8.0) : texte, IBAN et mandat SEPA. */
.ch-pm-fields--local .ch-pm-local-text { margin: 0 0 10px; font-size: var(--rmp-fs-body, 14px); color: #4b5563; }
.ch-pm-fields--sepa .ch-pm-input { width: 100%; letter-spacing: .04em; text-transform: uppercase; }
.ch-pm-fields--sepa .ch-pm-input::placeholder { text-transform: none; letter-spacing: 0; }
.ch-pm-mandate { margin: 10px 0 0; font-size: var(--rmp-fs-body, 12px); line-height: 1.5; color: #6b7280; }
img.ch-pm-brand--paypal { width: 52px !important; }
img.ch-pm-brand--klarna { width: 40px !important; }
img.ch-pm-brand--sepa   { width: 36px !important; }