/* Custom Styles */
/* ===== Onglets collés au checkout (style demandé) ===== */
.kjb-embedded-checkout .ap-checkout-tabs{
  display:flex;
  gap:10px;
  justify-content:flex-end;     /* alignés à droite */
  align-items:stretch;
  margin:0 0 12px 0;
  border-bottom:1px solid #e3e1da;  /* rail qui prolonge le top du card */
  position:relative;
}

/* Base des onglets */
.ap-checkout-tabs .ap-pill{
  display:flex; flex-direction:column; gap:3px;
  text-decoration:none;
  line-height:1.2;
  padding:10px 12px;

  /* forme “onglet” : 3 côtés, pas de bord en bas */
  border-style:solid;
  border-width:2px;
  border-bottom:none;
  border-radius:12px 12px 0 0;

  /* les onglets chevauchent la bordure du card pour être “collés” */
  position:relative;
  bottom:-1px;                  /* recouvre la bordure du rail/card */
  box-shadow:none;
}

/* Texte */
.ap-checkout-tabs .ap-title{ font-weight:700; font-size:14px; }
.ap-checkout-tabs .ap-sub{ font-size:12px; opacity:.9; }

/* ----- États ----- */
/* ACTIF = contour brun, fond blanc, texte foncé */
.ap-checkout-tabs .ap-pill.active{
  background:#fff;
  color:#1f2937;               /* gris foncé lisible */
  border-color:#b69d3a;        /* brun */
}

/* INACTIF = fond vert, contour blanc, texte blanc */
.ap-checkout-tabs .ap-pill:not(.active){
  background:#617452;          /* vert intérieur */
  color:#fff;
  border-color:#fff;           /* contour blanc */
}

/* Option : au survol, garder cohérent */
.ap-checkout-tabs .ap-pill:not(.active):hover{
  filter:brightness(1.03);
}

/* Mobile */
@media (max-width:480px){
  .kjb-embedded-checkout .ap-checkout-tabs{ flex-wrap:wrap; }
  .ap-checkout-tabs .ap-pill{ padding:9px 10px; }
}
/* === PATCH onglets checkout === */

/* 1) Enlève la "rail line" qui doublait la bordure du card */
.kjb-embedded-checkout .ap-checkout-tabs{
  border-bottom: none !important;
}

/* 2) Par défaut (inactif) = fond vert + contour blanc + texte blanc */
.ap-checkout-tabs .ap-pill{
  background:#617452;
  color:#fff;
  border:2px solid #fff;
  border-bottom:none;           /* tab collé au card */
  border-radius:12px 12px 0 0;
  position:relative;
  bottom:-1px;                  /* recouvre la bordure top du card */
}

/* 3) ACTIF = contour brun + fond blanc + texte foncé (forcé) */
.kjb-embedded-checkout .ap-checkout-tabs .ap-pill.active{
  background:#fff !important;
  color:#1f2937 !important;
  border-color:#b69d3a !important;
}
/* Colle les onglets au card (supprime l'espace) */
.kjb-embedded-checkout .ap-checkout-tabs{
  margin-bottom: 0 !important;
  position: relative;
  z-index: 2;               /* passe devant l'ombre du card */
}

/* Le bloc qui suit les onglets (le card/form) ne doit pas ajouter de marge */
.kjb-embedded-checkout .ap-checkout-tabs + *{
  margin-top: 0 !important;
}

/* Chevauche la bordure top du card de 1-2px pour qu'il n'y ait aucun “jour” */
.ap-checkout-tabs .ap-pill{
  bottom: 0px;             /* si trop, mets -1px */
}
/* ===== Always 2 columns (down to very small screens) ===== */
@media (max-width: 640px){
  .kjb-embedded-checkout .ap-checkout-tabs{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* 2 colonnes forcées */
    gap: 8px;
    margin-bottom: 6px !important;
    position: relative;
    z-index: 2;
  }
  .ap-checkout-tabs .ap-pill{
    width: 100%;
    text-align: center;
    padding: 9px 10px;
    bottom: -1px !important;           /* colle aux bordures du card */
    border-bottom: none !important;
    min-width: 0;                       /* évite overflow */
    white-space: normal;                /* autorise le retour à la ligne */
    word-break: break-word;
  }
  .ap-checkout-tabs .ap-title{
    font-size: clamp(11px, 3.2vw, 13px);
    line-height: 1.15;
  }
  .ap-checkout-tabs .ap-sub{
    font-size: clamp(9.5px, 2.6vw, 11px);
    line-height: 1.15;
  }
}

/* XS: resserrer encore un peu mais garder 2 colonnes */
@media (max-width: 380px){
  .kjb-embedded-checkout .ap-checkout-tabs{ gap: 6px; }
  .ap-checkout-tabs .ap-pill{ padding: 8px 8px; border-radius: 10px 10px 0 0; }
  .ap-checkout-tabs .ap-title{ font-size: clamp(10.5px, 3.4vw, 12.5px); }
  .ap-checkout-tabs .ap-sub{ font-size: clamp(9px, 2.8vw, 10.5px); }
}

@media (max-width: 320px){
  .kjb-embedded-checkout .ap-checkout-tabs{ gap: 4px; }
  .ap-checkout-tabs .ap-pill{ padding: 7px 7px; border-radius: 9px 9px 0 0; }
  .ap-checkout-tabs .ap-title{ font-size: 10.5px; }
  .ap-checkout-tabs .ap-sub{ font-size: 9.5px; }
}
/* === Mobile: supprimer la micro-bande entre onglets et card === */
@media (max-width: 640px){
  .kjb-embedded-checkout .ap-checkout-tabs{
    margin-bottom: 0px !important;   /* chevauche le haut du card */
    position: relative;
    z-index: 2;
  }
  .kjb-embedded-checkout .ap-checkout-tabs + *{
    margin-top: 0 !important;         /* aucun espace du côté du card */
  }
  .ap-checkout-tabs .ap-pill{
    bottom: 0 !important;             /* évite l'espace “technique” du grid */
  }
}