/* ==========================================================================
   LBS — Tunnel de paiement : correctifs versionnés
   Fichier charge depuis templates/_partials/head.tpl avec un ?v= a incrementer
   a chaque modification. custom.css est charge sans version : les navigateurs
   le gardent en cache et les changements n'arrivent jamais.
   ========================================================================== */

/* Bloc Oney : les lignes sont pilotees par les pastilles de l'en-tete.
   Elles sont masquees, elles ne doivent donc laisser aucun filet residuel. */
/* Pas de "border: 0" ici : la regle commune aux prestataires pose un filet bas
   entre les lignes, et les echeances Oney doivent etre separees comme celles
   de PayPal. On ne neutralise que la marge et le fond. */
.lbs-provider--oney .ck-payment-card {
  margin: 0 !important;
  background: transparent !important;
}

/* Pastille d'echeance a la place de l'icone : meme vocabulaire visuel que les
   boutons de l'en-tete, en plus petit. */
.lbs-oney-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 42px;
  padding: 4px 11px;
  border: 1.5px solid #d7e3c2;
  border-radius: 999px;
  background: #fff;
  color: #5c8700;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

/* Ligne choisie : la pastille se remplit et bat, exactement comme le bouton
   correspondant dans l'en-tete du bloc. */
.ck-payment-card.is-selected .lbs-oney-pill {
  background: #81bc00;
  border-color: #81bc00;
  color: #fff;
  animation: lbsOneyPulse 1.9s ease-in-out infinite;
}

/* Acces aux conditions generales depuis le logo Oney de l'en-tete.
   Ces regles vivent aussi ici : lbs-payment.css n'est pas chargee dans le
   tunnel, qui a son propre head. Sans elles, rien n'indiquait que le logo
   etait cliquable. */
.lbs-provider__name--oney {
  cursor: pointer;
}
.lbs-provider__name--oney:focus-visible {
  outline: 2px solid #84bd06;
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .lbs-oney-pill { transition: none; }
  .ck-payment-card.is-selected .lbs-oney-pill { animation: none; }
}
.lbs-provider--oney .lbs-provider__body {
  padding: 0 !important;
}
.lbs-provider--oney .lbs-provider__body:empty {
  display: none;
}

/* Les lignes d'echeance restent cliquables. custom.css n'etant pas versionne,
   un navigateur peut encore servir l'ancienne regle de masquage : on la
   neutralise ici avec une specificite superieure. */
.lbs-provider.lbs-provider--oney .ck-payment-card .ck-payment-card__inner {
  display: flex !important;
}

/* Le detail renvoye par Oney (echeancier) : separe de l'en-tete par un filet,
   et deplie en douceur a la selection d'une pastille. */
.lbs-provider--oney .ck-payment-card__info {
  border-top: 1px solid #edf1f3;
  padding: 14px 16px 4px !important;
  /* fill-mode "backwards" et non "both" : "both" figerait transform:translateY(0)
     apres l'animation. Un ancetre transforme devient le referentiel de ses
     descendants en position:fixed — la modale "En savoir plus" du widget Oney
     se retrouvait alors enfermee dans la carte de paiement, donc tronquee.
     "backwards" ne s'applique qu'avant le depart : plus de transform residuel. */
  animation: lbsOneyReveal .28s ease backwards;
}
.lbs-provider--oney .ck-payment-card__form {
  padding: 0 16px 12px !important;
}

@keyframes lbsOneyReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lbs-provider--oney .ck-payment-card__info { animation: none; }
}

/* Le widget Oney monte sa modale dans ces conteneurs : aucun d'eux ne doit la
   rogner ni recreer un referentiel de positionnement. */
.lbs-provider .threebyfouroney-checkout-widget-wrapper,
.lbs-provider .threebyfouroney-checkout-placeholder,
.lbs-provider .ck-payment-card__info,
.lbs-provider .ck-payment-card__form {
  overflow: visible !important;
}

/* Mention legale : collee au bas du bloc, sans filet en double */
.lbs-provider--oney .lbs-provider__legal {
  border-top: 1px solid #edf1f3;
  margin: 0 !important;
  padding: 10px 16px 12px !important;
}

/* PayPal : le "mark" (logo + texte "Payer en plusieurs fois") est injecte par le
   SDK dans un <span paypal-mark-container> sans classe, a l'interieur du libelle.
   Ce span est un FRERE du label, pas un descendant : on cible donc tout le bloc
   prestataire. Le bouton de paiement reel vit dans .ck-payment-card__form,
   hors de cette portee : il n'est pas masque. */
.lbs-provider [paypal-mark-container] {
  display: none !important;
}

/* ==========================================================================
   Oney — en-tete : logo de marque + pastilles d'echeances
   ========================================================================== */

/* Le titre texte "ONEY" cede la place au logo de marque, plus grand */
.lbs-provider__name--oney {
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
}
.lbs-oney-brand {
  height: 26px !important;
  max-height: 26px !important;
  width: auto !important;
  display: block;
}

/* --- Pastilles : etat par defaut --- */
.lbs-provider--oney .lbs-oney-tab {
  border: 1.5px solid #d7e3c2 !important;
  background: #fff !important;
  color: #5c8700 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lbs-provider--oney .lbs-oney-tab:hover {
  border-color: #81bc00 !important;
  background: #f4faea !important;
  transform: translateY(-1px);
}

/* --- Pastille selectionnee : fond Oney, halo et pulsation --- */
.lbs-provider--oney .lbs-oney-tab.is-active {
  background: #81bc00 !important;
  border-color: #81bc00 !important;
  color: #fff !important;
  animation: lbsOneyPulse 1.9s ease-in-out infinite;
}

@keyframes lbsOneyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(129, 188, 0, .45); }
  60%  { box-shadow: 0 0 0 9px rgba(129, 188, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(129, 188, 0, 0); }
}

/* --- Aucune selection : les pastilles s'illuminent l'une apres l'autre --- */
.lbs-oney-tabs.is-idle .lbs-oney-tab {
  animation: lbsOneyHint 3.6s ease-in-out infinite;
}
.lbs-oney-tabs.is-idle .lbs-oney-tab:nth-child(1) { animation-delay: 0s; }
.lbs-oney-tabs.is-idle .lbs-oney-tab:nth-child(2) { animation-delay: .42s; }
.lbs-oney-tabs.is-idle .lbs-oney-tab:nth-child(3) { animation-delay: .84s; }
.lbs-oney-tabs.is-idle .lbs-oney-tab:nth-child(4) { animation-delay: 1.26s; }
.lbs-oney-tabs.is-idle .lbs-oney-tab:nth-child(5) { animation-delay: 1.68s; }

/* Simple mise en lumiere : aucun changement d'etat reel, rien n'est selectionne */
@keyframes lbsOneyHint {
  0%, 34%, 100% {
    border-color: #d7e3c2;
    background: #fff;
    box-shadow: none;
  }
  7%, 22% {
    border-color: #81bc00;
    background: #f0f8e2;
    box-shadow: 0 0 0 4px rgba(129, 188, 0, .16);
  }
}

/* Le survol reprend la main sur l'animation d'appel */
.lbs-oney-tabs.is-idle .lbs-oney-tab:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .lbs-provider--oney .lbs-oney-tab.is-active,
  .lbs-oney-tabs.is-idle .lbs-oney-tab { animation: none; }
  .lbs-provider--oney .lbs-oney-tab:hover { transform: none; }
}

@media (max-width: 575px) {
  .lbs-oney-brand { height: 22px !important; max-height: 22px !important; }
  .lbs-provider--oney .lbs-oney-tab { font-size: 13px !important; padding: 7px 13px !important; }
}


/* --- Miroir de la case CGV dans le bloc de paiement ouvert ---------------- */
.lbs-terms-mirror {
  /* theme.css impose display:table-cell a tout label du tunnel, avec une
     specificite (1,2,3) qui ecrase la notre : d'ou une cellule de tableau qui
     se replie sur son contenu et ignore width. Il faut donc l'emporter ici. */
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  /* Le conteneur du module replie ses enfants sur leur largeur intrinseque.
     width seul ne suffit pas quand le parent est lui-meme un conteneur flex :
     il faut aussi neutraliser le retrait et etirer l'element sur son axe. */
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100%;
  align-self: stretch;
  box-sizing: border-box;
  text-align: left;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1.5px solid #f0c36d;
  border-radius: 8px;
  background: #fff9ec;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
  color: #4a3b16;
  transition: border-color .18s ease, background .18s ease;
}
.lbs-terms-mirror input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
  accent-color: #81bc00;
}
.lbs-terms-mirror:hover { border-color: #e0ad4b; }

/* Une fois acceptee, la case cesse d'alerter et passe au vert */
.lbs-terms-mirror.is-checked {
  border-color: #cfe6a0;
  background: #f6fbee;
  color: #3d5417;
}


/* --- Corrections d'alignement et d'espacement ----------------------------- */

/* custom.css aligne l'en-tete sur la baseline : le logo Oney, plus haut que le
   texte, retombait alors trop bas. Un centrage vertical remet tout d'aplomb. */
.lbs-provider__head {
  align-items: center !important;
}

/* Le bloc des conditions generales collait a la derniere carte de paiement */
#conditions-to-approve,
.ck-payment-conditions {
  margin-top: 18px !important;
}

/* --- Miroir CGV : libelle et consigne ------------------------------------- */
.lbs-terms-mirror__body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  text-align: left;
}
.lbs-terms-mirror__label {
  font-weight: 600;
}
.lbs-terms-mirror__hint {
  font-size: 12.5px;
  font-weight: 500;
  color: #a06c12;
}
/* Une fois la case cochee, la consigne n'a plus lieu d'etre */
.lbs-terms-mirror.is-checked .lbs-terms-mirror__hint {
  display: none;
}


/* --- Bouton "4X PayPal" tronque ------------------------------------------- */
/* Le module impose align-items:flex-start au conteneur, qui se replie donc sur
   la largeur intrinseque de son contenu. Combine a un rendu effectue alors que
   le bloc est masque, le SDK produit un bouton a sa taille minimale.
   On rend au conteneur une largeur exploitable ; le SDK s'y adapte au recalcul. */
.lbs-provider [data-container-bnpl] {
  align-items: stretch !important;
  width: 100%;
}
.lbs-provider [paypal-bnpl-button-container] {
  width: 100%;
  max-width: 340px;
  min-width: 240px;
}
.lbs-provider [paypal-bnpl-button-container] .paypal-buttons {
  width: 100% !important;
}

/* Separateur entre les echeances sans frais et celles avec frais */
.lbs-provider__note-sep {
  margin: 0 7px;
  opacity: .5;
}