/* ====== ET Classic Skin — rapproche le style du checkout Blocks ====== */

/* Carte/grille du mode de paiement */
#payment .wc_payment_methods {
  gap: 14px;
}
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: transparent;
}

#payment .wc_payment_method {
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    padding: 2px 15px;
    margin-bottom: 14px;
    background: transparent;
    position: relative;
    padding: 20px;
}

/* Highlight quand sélectionné (support modern :has + fallback via JS .is-selected) */
#payment .wc_payment_method:has(> input.input-radio:checked),
#payment .wc_payment_method.is-selected {
  border-color: #000;
  border: 2px solid;
}

/* En-tête label comme les Blocks: texte à gauche, icônes poussées à droite */
#payment .wc_payment_method>label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}

/* Les icônes sont des <img> frères dans le label (pas de wrapper) */
/* On pousse le 1er groupe d’icônes à droite avec margin-inline-start:auto */
#payment .wc_payment_method>label img:first-of-type {
  margin-inline-start: auto;
}

/* Taille des icônes (harmonisée avec ton bloc React) */
#payment .wc_payment_method>label img {
  height: 18px;
  max-height: 18px;
  width: auto;
  object-fit: contain;
}

/* Boîte de contenu (payment_box) -> style panneau comme Blocks */
#payment .payment_box {
  background: #f7f7fb;
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
  border: 1px solid #ececf5;
}

/* Titre "Cartes enregistrées" */
#payment .payment_box .et-oc-head {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Liste des cartes enregistrées (classique + Blocks partagent .et-oc-*) */
#payment .payment_box .et-oc-cards,
.wc-block-components-radio-control-accordion-content .et-oc-cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

#payment .payment_box .et-oc-cards li,
.wc-block-components-radio-control-accordion-content .et-oc-cards li {
  margin: 0 0 8px 0;
}

#payment .payment_box .et-oc-cards li label,
.wc-block-components-radio-control-accordion-content .et-oc-cards li label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

/* Focus/checked style (modern :has + fallback .is-oc-checked) */
#payment .payment_box .et-oc-cards li label:has(input[type="radio"]:checked),
.wc-block-components-radio-control-accordion-content .et-oc-cards li label:has(input[type="radio"]:checked),
#payment .payment_box .et-oc-cards li.is-oc-checked label,
.wc-block-components-radio-control-accordion-content .et-oc-cards li.is-oc-checked label {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(107, 78, 255, .15);
}

#payment .payment_box .et-oc-cards input[type="radio"],
.wc-block-components-radio-control-accordion-content .et-oc-cards input[type="radio"] {
  accent-color: #000;
  /* sur navigateurs compatibles */
}

/* Bouton "Utiliser une nouvelle carte" aligné Blocks */
#payment .payment_box .et-oc-actions .button,
.wc-block-components-radio-control-accordion-content .et-oc-actions button {
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
}

/* Radios racine mieux alignés */
#payment .wc_payment_method>input.input-radio {
  margin-right: 8px;
}

/* Titre de section Woo (optionnel) */
.woocommerce-checkout #payment .wc_payment_methods~.form-row.place-order {
  margin-top: 16px;
}

/* ===== Radios style "Blocks" pour checkout classique ===== */

/* Radios racine (choix CB / SEPA / Pay by Bank) */
#payment .wc_payment_method>input.input-radio,
#payment .payment_box .et-oc-cards input[type="radio"] {
  /* on neutralise le rendu natif et on fabrique le nôtre */
  appearance: none;
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border: 1px solid #cfd4dc;
  /* contour neutre */
  border-radius: 50%;
  background: #fff;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  margin: 0 8px 0 0;
  /* espace avant le label */
  cursor: pointer;
  outline: none;
  box-shadow: 0 0 0 0 rgba(107, 78, 255, 0);
  /* base pour focus ring */
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* pastille interne (le “dot”) */
#payment .wc_payment_method>input.input-radio::before,
#payment .payment_box .et-oc-cards input[type="radio"]::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .15s ease;
  background: #000;
  /* couleur sélection (même que le highlight) */
}

/* état checked */
#payment .wc_payment_method>input.input-radio:checked,
#payment .payment_box .et-oc-cards input[type="radio"]:checked {
  border-color: #000;
}

#payment .wc_payment_method>input.input-radio:checked::before,
#payment .payment_box .et-oc-cards input[type="radio"]:checked::before {
  transform: scale(1);
}

/* hover léger */
#payment .wc_payment_method>input.input-radio:hover:not(:disabled),
#payment .payment_box .et-oc-cards input[type="radio"]:hover:not(:disabled) {
  border-color: #CCC;
}

/* désactivé (au cas où) */
#payment .wc_payment_method>input.input-radio:disabled,
#payment .payment_box .et-oc-cards input[type="radio"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Alignement parfait avec les labels (classique + cartes) */
#payment .wc_payment_method>label,
#payment .payment_box .et-oc-cards li label {
  display: flex;
  align-items: center;
  gap: 10px;
  /* espace radio <-> texte */
}
/* ===== ALIGNEMENT RADIO / TEXTE / ICÔNES ===== */

/* Le conteneur label devient un flex complet */
#payment .wc_payment_method>label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: .5rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}

/* Radio à gauche */
#payment .wc_payment_method>input.input-radio {
  margin-right: 10px;
  flex-shrink: 0;
}

/* Les icônes à droite */
#payment .wc_payment_method>label img {
  height: 18px;
  width: auto;
  object-fit: contain;
}

/* On pousse le premier groupe d’icônes à droite */
#payment .wc_payment_method>label img:first-of-type {
  margin-left: auto;
  /* pousse tout ce qui suit à droite */
}

/* Optionnel : espace entre les icônes */
#payment .wc_payment_method>label img+img {
  margin-left: .35rem;
}

/* Hover léger sur le label entier */
#payment .wc_payment_method>label:hover {
  background: #fafaff;
  border-radius: 8px;
}

/* Petit ajustement pour aligner mieux le texte */
#payment .wc_payment_method>label span,
#payment .wc_payment_method>label strong {
  display: inline-flex;
  align-items: center;
}
#payment .wc_payment_method>label .et-pm-label {
  display: flex;
  align-items: center;
  width: 100%;
  gap: .5rem;
}

#payment .wc_payment_method>label .et-pm-label .et-pm-icons {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
}

#payment .wc_payment_method>label .et-pm-icons img {
  height: 18px;
  width: auto;
  object-fit: contain;
}
/* Ligne "radio + label" puis la box en dessous */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  display: grid !important;
  grid-template-columns: auto 1fr;
  /* [radio] [label] */
  grid-auto-rows: min-content;
  align-items: center;
  column-gap: 10px;
}

/* Radio colonne 1 */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method>input.input-radio {
  grid-column: 1;
  grid-row: 1;
  margin: 0 6px 0 2px !important;
  flex: 0 0 auto;
}

/* Label colonne 2 (prend toute la ligne à droite du radio) */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method>label {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  width: 100%;
}

/* Ta structure harmonisée: texte à gauche, icônes poussées à droite */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method>label .et-pm-label {
  display: flex;
  align-items: center;
  width: 100%;
  gap: .5rem;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method>label .et-pm-icons {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
  /* icônes à droite */
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method>label .et-pm-icons img {
  height: 24px;
  max-height: 24px;
  max-width: 100%;
  object-fit: contain;
  object-position: left;
}

/* La boîte de contenu passe en dessous sur toute la largeur */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method>.payment_box {
  grid-column: 1 / -1;
  /* span sur les 2 colonnes */
  grid-row: 2;
  margin-top: 10px;
}

/* (Optionnel) bord sélectionné plus propre */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.is-selected {
  border-width: 2px !important;
  border-radius: 8px !important;
}
#payment .payment_box {
  background: #FFF !important;
  border-radius: 18px !important;
}
#payment .payment_box::before {
  display: none !important;
}