/* === MONETIQ - CARTES DE PAIEMENT === */

#checkout-payment-step .payment-option.monetiq-payment-option--ps_checkpayment,
#checkout-payment-step .payment-option.monetiq-payment-option--ps_wirepayment {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 1px solid #d7dde5 !important;
  border-radius: 10px !important;
  background: #fff !important;
  overflow: hidden !important;
}

#checkout-payment-step
.payment-option.monetiq-payment-option--ps_checkpayment
.payment-option__form-check,
#checkout-payment-step
.payment-option.monetiq-payment-option--ps_wirepayment
.payment-option__form-check {
  display: flex !important;
  align-items: center !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 18px 22px !important;
}

#checkout-payment-step
.payment-option.monetiq-payment-option--ps_checkpayment
.monetiq-payment-label,
#checkout-payment-step
.payment-option.monetiq-payment-option--ps_wirepayment
.monetiq-payment-label {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  gap: 18px !important;
  cursor: pointer !important;
}

#checkout-payment-step .monetiq-payment-icon {
  display: block !important;
  flex: 0 0 auto !important;
  font-size: 36px !important;
}

#checkout-payment-step .monetiq-payment-text {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}

#checkout-payment-step .monetiq-payment-text strong {
  display: block !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

#checkout-payment-step .monetiq-payment-text small {
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #6c757d !important;
}

#checkout-payment-step .monetiq-payment-arrow {
  display: block !important;
  margin-left: auto !important;
  font-size: 30px !important;
}

#checkout-payment-step
.payment-option.monetiq-payment-option--ps_checkpayment
.payment-option__additional-information,
#checkout-payment-step
.payment-option.monetiq-payment-option--ps_wirepayment
.payment-option__additional-information {
  margin: 0 !important;
  padding: 20px 22px !important;
  border-top: 1px solid #e4e8ed !important;
  background: #f8f9fa !important;
}

#checkout-payment-step
.payment-option.monetiq-payment-option--ps_checkpayment:has(input:checked),
#checkout-payment-step
.payment-option.monetiq-payment-option--ps_wirepayment:has(input:checked) {
  border-color: #0d6efd !important;
  background: #f7faff !important;
}


/* === MONETIQ - FINITION CARTES PAIEMENT === */

#checkout-payment-step
.payment-option.monetiq-payment-option--ps_checkpayment,
#checkout-payment-step
.payment-option.monetiq-payment-option--ps_wirepayment {
  position: relative;
  transition:
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

#checkout-payment-step
.payment-option.monetiq-payment-option--ps_checkpayment:hover,
#checkout-payment-step
.payment-option.monetiq-payment-option--ps_wirepayment:hover {
  border-color: #9eabb9 !important;
  background: #fafbfd !important;
}

#checkout-payment-step
.payment-option.monetiq-payment-option--ps_checkpayment:has(.payment-option__input:checked),
#checkout-payment-step
.payment-option.monetiq-payment-option--ps_wirepayment:has(.payment-option__input:checked) {
  border: 2px solid #0d6efd !important;
  background: #f5f9ff !important;
  box-shadow: 0 3px 12px rgba(13,110,253,.10) !important;
}

#checkout-payment-step
.monetiq-payment-option
.payment-option__form-check {
  position: relative;
}

/* Toute la partie haute de la carte devient cliquable */
#checkout-payment-step
.monetiq-payment-option
.monetiq-payment-label::before {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* Radio mieux intégré */
#checkout-payment-step
.monetiq-payment-option
.payment-option__input {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

/* Icône / textes au-dessus de la zone cliquable */
#checkout-payment-step
.monetiq-payment-option
.monetiq-payment-label > * {
  position: relative;
  z-index: 1;
}


/* === MONETIQ - ESPACEMENT BOUTONS CHECKOUT === */

#checkout-payment-step .buttons-wrapper {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

@media (max-width: 767px) {
  #checkout-payment-step .buttons-wrapper {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* === MONETIQ - MARGES BOUTONS PAIEMENT === */

#checkout-payment-step .buttons-wrapper > .js-back {
  margin-left: 24px !important;
}

#checkout-payment-step .buttons-wrapper > .js-payment-confirmation {
  margin-right: 24px !important;
}

@media (max-width: 767px) {
  #checkout-payment-step .buttons-wrapper > .js-back,
  #checkout-payment-step .buttons-wrapper > .js-payment-confirmation {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* MONETIQ - Masquer les radios des cartes de paiement */
#checkout-payment-step
.monetiq-payment-option--ps_checkpayment
.payment-option__input,
#checkout-payment-step
.monetiq-payment-option--ps_wirepayment
.payment-option__input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* La carte entière reste cliquable */
#checkout-payment-step
.monetiq-payment-option--ps_checkpayment
.payment-option__form-check,
#checkout-payment-step
.monetiq-payment-option--ps_wirepayment
.payment-option__form-check {
  position: relative !important;
}

#checkout-payment-step
.monetiq-payment-option--ps_checkpayment
.monetiq-payment-label,
#checkout-payment-step
.monetiq-payment-option--ps_wirepayment
.monetiq-payment-label {
  width: 100% !important;
  cursor: pointer !important;
}


/* MONETIQ - masquer definitivement les radios cheque/virement */
#checkout-payment-step
.monetiq-payment-option--ps_checkpayment
input[type="radio"],

#checkout-payment-step
.monetiq-payment-option--ps_wirepayment
input[type="radio"] {
  display: none !important;
}

/* supprimer l'espace reserve au radio */
#checkout-payment-step
.monetiq-payment-option--ps_checkpayment
.payment-option__form-check,

#checkout-payment-step
.monetiq-payment-option--ps_wirepayment
.payment-option__form-check {
  padding-left: 22px !important;
}


/* MONETIQ - pas de meilleures ventes sur la confirmation de commande */
body#order-confirmation .ps-featuredproducts,
body.page-order-confirmation .ps-featuredproducts {
  display: none !important;
}



/* =========================================================
   MONETIQ - Carte bancaire Monetico
   ========================================================= */

#checkout-payment-step
.payment-option.monetiq-payment-option--cmcicpaiement {
  border: 1px solid #d9dee5 !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: .15s ease !important;
}

#checkout-payment-step
.payment-option.monetiq-payment-option--cmcicpaiement:hover {
  border-color: #aeb8c5 !important;
  background: #fafbfc !important;
}

#checkout-payment-step
.payment-option.monetiq-payment-option--cmcicpaiement:has(.payment-option__input:checked) {
  border-color: #0d6efd !important;
  background: #f6f9ff !important;
  box-shadow: 0 0 0 1px rgba(13,110,253,.08) !important;
}

#checkout-payment-step
.monetiq-payment-option--cmcicpaiement
.payment-option__form-check {
  display: flex !important;
  align-items: center !important;
  min-height: 100px !important;
  margin: 0 !important;
  padding: 0 22px !important;
}

#checkout-payment-step
.monetiq-payment-option--cmcicpaiement
.monetiq-payment-label {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 18px !important;
  padding: 20px 0 !important;
  cursor: pointer !important;
}

#checkout-payment-step
.monetiq-payment-option--cmcicpaiement
.monetiq-payment-card-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 52px !important;
  width: 52px !important;
}

#checkout-payment-step
.monetiq-payment-option--cmcicpaiement
.monetiq-payment-card-logo img {
  display: block !important;
  max-width: 52px !important;
  max-height: 38px !important;
  width: auto !important;
  height: auto !important;
}

#checkout-payment-step
.monetiq-payment-option--cmcicpaiement
.payment-option__input {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

#checkout-payment-step
.monetiq-payment-option--cmcicpaiement
.payment-option__additional-information {
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   MONETIQ - Bouton confirmation actif / inactif
   ========================================================= */

#checkout-payment-step
#payment-confirmation
.btn-primary:disabled,
#checkout-payment-step
#payment-confirmation
.btn-primary.disabled {
  background: #d5d9de !important;
  border-color: #d5d9de !important;
  color: #7a828c !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

#checkout-payment-step
#payment-confirmation
.btn-primary:not(:disabled):not(.disabled) {
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
  opacity: 1 !important;
}

#checkout-payment-step
#payment-confirmation
.btn-primary:not(:disabled):not(.disabled):hover {
  background: #0b5ed7 !important;
  border-color: #0a58ca !important;
}