/* ----------------------------------------------
                     BUTTONS 
-------------------------------------------------*/
:root{
    --ro-btn-height-d: var(--ro-size-44);
    --ro-btn-height-m: var(--ro-size-32);


    --ro-btn-padding-d: var(--ro-space-6) var(--ro-space-16);
    --ro-btn-padding-t: var(--ro-space-4) var(--ro-space-12);
    --ro-btn-padding-m: var(--ro-space-4) var(--ro-space-10);


    --ro-btn-gap: var(--ro-space-8);

    --ro-btn-radius: var(--ro-radius-6);

    --ro-btn-border-none: var(--ro-size-0);
    --ro-btn-border-s: var(--ro-size-1);
    --ro-btn-border-m: var(--ro-size-2);

}

/* >>>>>>>>>>>>>>>>> BASE BUTTON <<<<<<<<<<<<<<<<< */

.ro-btn, .ro-btn-bump{
  display: flex;
  align-items: center;
}

.wp-block-button.ro-btn--primary .wp-block-button__link,
.wp-block-button.ro-btn--secondary .wp-block-button__link,
.wp-block-button.ro-btn--ghost .wp-block-button__link,
.ro-btn--primary, .ro-btn--secondary, .ro-btn--ghost, .ro-btn-bump{
    height: var(--ro-btn-height-m);
    padding: var(--ro-btn-padding-d);
    gap: var(--ro-btn-gap);
    border-radius: var(--ro-btn-radius);
    font-size: var(--ro-font-size-m);
    line-height: var(--ro-line-height-sm);
    font-weight: var(--ro-font-weight-bold);
    cursor: pointer; 
}


/* --- Tablette : jusqu'à 1024px --- */
@media (max-width: 1024px) {

    .wp-block-button.ro-btn--primary .wp-block-button__link,
    .wp-block-button.ro-btn--secondary .wp-block-button__link,
    .wp-block-button.ro-btn--ghost .wp-block-button__link,
    .ro-btn--primary, .ro-btn--secondary, .ro-btn--ghost, .ro-btn-bump{
        padding: var(--ro-btn-padding-t);
        font-size: var(--ro-font-size-m);
    }


}

/* --- Mobile : jusqu'à 768px --- */
@media (max-width: 768px) {

    .wp-block-button.ro-btn--primary .wp-block-button__link,
    .wp-block-button.ro-btn--secondary .wp-block-button__link,
    .wp-block-button.ro-btn--ghost .wp-block-button__link, 
    .ro-btn--primary, .ro-btn--secondary, .ro-btn--ghost, .ro-btn-bump{
        height: var(--ro-btn-height-m);
        padding: var(--ro-btn-padding-m);
        font-size: var(--ro-font-size-s);
      }

    
}


/* >>>>>>>>>>>>>>>>> PRIMARY <<<<<<<<<<<<<<<<< */
.wp-block-button.ro-btn--primary .wp-block-button__link, 
.ro-btn--primary, #wp-submit{
  color:var(--ro-dolphing-950);
  background:var(--ro-dolphing-200);
  border:var(--ro-btn-border-none);
  box-shadow: 2px 2px 0 0 var(--ro-dolphing-600)!important; /* no blur */
}


.wp-block-button.ro-btn--primary .wp-block-button__link:hover,
#wp-submit:hover,
.ro-btn--primary:hover{
  background:var(--ro-dolphing-100);
}
.wp-block-button.ro-btn--primary .wp-block-button__link:active,
#wp-submit:active,
.ro-btn--primary:active{
  box-shadow:none;
}

/* >>>>>>>>>>>>>>>>> ERROR <<<<<<<<<<<<<<<<< */
.ro-btn-bump, .ro-btn-error{
  color:var(--ro-err-600);
  background:var(--ro-bg-0);
  border:1px solid var(--ro-err-600);
  box-shadow: 2px 2px 0 0 var(--ro-err-800)!important; /* no blur */

}


.ro-btn-bump:hover, .ro-btn-error:hover{
  background:var(--ro-err-100);
}
.ro-btn-bump:active, .ro-btn-error:active{
  box-shadow:none;
}

/* >>>>>>>>>>>>>>>>> SECONDARY <<<<<<<<<<<<<<<<< */
.wp-block-button.ro-btn--secondary .wp-block-button__link,
.ro-btn--secondary{
  color:var(--ro-dolphing-700);
  background-color: var(--ro-bg-none);
  border: var(--ro-btn-border-s) solid var(--ro-dolphing-400);
  box-shadow: 2px 2px 0 0 var(--ro-dolphing-300)!important;
}
.wp-block-button.ro-btn--secondary .wp-block-button__link:hover,
.ro-btn--secondary:hover{
  background-color:var(--ro-dolphing-100);
}
.wp-block-button.ro-btn--secondary .wp-block-button__link:active,
.ro-btn--secondary:active{
  box-shadow:none;
  border-color:var(--ro-dolphing-600);
}

/* >>>>>>>>>>>>>>>>> GHOST <<<<<<<<<<<<<<<<< */
.wp-block-button.ro-btn--ghost .wp-block-button__link,
.ro-btn--ghost{
  color:var(--ro-dolphing-700);
  background-color:transparent;
  border:none;
}
.wp-block-button.ro-btn--ghost .wp-block-button__link:hover,
.ro-btn--ghost:hover{ 
  background-color:var(--ro-dolphing-100); 
}

.wp-block-button.ro-btn--ghost .wp-block-button__link:active,
.ro-btn--ghost:active{ 
  background-color:var(--ro-dolphing-200); 
}


/* >>>>>>>>>>>>>>>>> DISABLED <<<<<<<<<<<<<<<<< */
.wp-block-button.ro-btn--primary .wp-block-button__link:disabled,
.wp-block-button.ro-btn--secondary .wp-block-button__link:disabled,
.wp-block-button.ro-btn--ghost .wp-block-button__link:disabled,
.ro-btn--primary:disabled,
.ro-btn--secondary:disabled,
.ro-btn--ghost:disabled{
  color:var(--ro-dolphing-300);
  background-color:var(--ro-dolphing-100);
  box-shadow:none;
  cursor:not-allowed;
  opacity:1;
}


/* ----------------------------------------------
                 SEGMENTED BTN (MOBILE)
-------------------------------------------------*/
/* Objectif: mêmes états interactifs que tes boutons
   - focus-visible (accessibilité)
   - état is-active (déjà présent)
*/

@media (max-width:1023px){
  /* Container spacing */
  .ro-segmented__container{
    padding: var(--ro-space-24) var(--ro-space-36) 0 var(--ro-space-36);
  }
}



/* Wrapper segmented */
.ro-segmented--mobile{
  display: none;
  height: var(--ro-btn-height-m);
  position: sticky;
  top: 0;
  z-index: 20;

  background: var(--ro-bg-0);
  border: var(--ro-btn-border-s) solid var(--ro-dolphing-500);
  border-radius: var(--ro-btn-radius);
  box-shadow: 2px 2px 0 0 var(--ro-dolphing-400)!important;

  /* important: pour que les segments ne dépassent pas le radius */
  overflow: hidden;
}

/* Buttons */
.ro-segmented__btn{
  flex: 1;

  font-size: var(--ro-font-size-s);
  line-height: var(--ro-line-height-sm);
  font-weight: var(--ro-font-weight-bold);

  color: var(--ro-dolphing-950);
  background: transparent;

  padding: var(--ro-btn-padding-m);

  border: 0;
  border-radius: 0; /* géré par le wrapper + overflow hidden */
  cursor: pointer;
  user-select: none;

  transition:
    background .15s ease,
    box-shadow .1s ease,
    transform .05s ease;
}

/* Séparateur visuel entre segments (sans casser la width) */
.ro-segmented__btn + .ro-segmented__btn{
  border-left: var(--ro-btn-border-s) solid var(--ro-dolphing-500);
}


/* Focus */
.ro-segmented__btn:focus{
  outline: none;
}
.ro-segmented__btn:focus-visible{
  outline: none;
  box-shadow: var(--ro-focus-ring);
  position: relative;
  z-index: 1; /* au-dessus du séparateur */
}

/* Selected */
.ro-segmented__btn.is-active{
  background: var(--ro-dolphing-200);
}



/* Mobile visibility */
@media (max-width: 1023.98px){
  .ro-segmented--mobile{
    display: flex;
  }
}

/* @media (max-width: 425px){
  .ro-segmented__container{
    padding: var(--ro-space-12) var(--ro-space-12) 0 var(--ro-space-12);
  }
} */