/* =========================================================
   BANNER SCUOLE – PULSANTI
   Desktop: in basso, centrati, orizzontali
   Mobile: verticali, centrati
   Hover: tono su tono
   ========================================================= */

/* riferimento per posizionamento assoluto */
.banner-scuole-caption{
  position: relative;
  height: 100%;
}

/* =========================================================
   CONTENITORE PULSANTI (DESKTOP)
   ========================================================= */
.banner-buttons{
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 5;

  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;

  width: auto;                /* 🔴 centro reale */
}

/* =========================================================
   PULSANTI – STILE BASE
   ========================================================= */
.banner-btn{
  box-sizing: border-box;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  height: 46px;               /* dimensione compatta */
  min-width: 210px;
  padding: 0 20px;

  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: .4px;

  white-space: nowrap;
  line-height: 1 !important;

  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 6px;

  /* elimina qualunque residuo del template */
  position: relative;
  top: 0 !important;
  margin: 0 !important;
  transform: none !important;

  transition: filter .18s ease, box-shadow .18s ease;
}

/* =========================================================
   COLORI BASE (UNO PER PULSANTE)
   ========================================================= */
.btn-chirurghi{
  background-color: #CD0E11 !important;
}

.btn-nutrizionisti{
  background-color: #0D6EFD !important;
}

.btn-psi{
  background-color: #A5006E !important;
}

/* =========================================================
   HOVER – TONO SU TONO
   ========================================================= */
.banner-btn:hover{
  filter: brightness(0.92);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* =========================================================
   DISATTIVA HOVER ARANCIONE TEMPLATE (UJARAK)
   ========================================================= */
.banner-btn::before,
.banner-btn::after{
  content: none !important;
  display: none !important;
}

/* forza il colore base anche in hover/focus */
.btn-chirurghi:hover,
.btn-chirurghi:focus{
  background-color: #CD0E11 !important;
}

.btn-nutrizionisti:hover,
.btn-nutrizionisti:focus{
  background-color: #0D6EFD !important;
}

.btn-psi:hover,
.btn-psi:focus{
  background-color: #A5006E !important;
}

/* =========================================================
   MOBILE – VERTICALI E CENTRATI
   ========================================================= */
@media (max-width: 767px){
  .banner-buttons{
    position: static;
    transform: none;

    flex-direction: column;
    gap: 14px;

    width: 92%;
    max-width: 320px;
    margin: 0 auto;
    padding-top: 18px;
  }

  .banner-btn{
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   BANNER SCUOLE – PULSANTI (VERSIONE ROBUSTA CONTRO IL TEMA)
   Desktop: in basso, centrati, ORIZZONTALI, tutti uguali
   Mobile: verticali, centrati
   Hover: tono su tono (NO arancione template)
   ========================================================= */

/* La caption deve essere il riferimento per l'assoluto */
.swiper-slide .banner-scuole-caption{
  position: relative;
  height: 100%;
}

/* =========================================================
   DESKTOP / TABLET: ORIZZONTALI, CENTRATI, IN BASSO
   ========================================================= */
@media (min-width: 768px){

  /* FORZA layout orizzontale (il tema spesso lo sovrascrive) */
  .swiper-slide .banner-scuole-caption .banner-buttons{
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;

    width: auto !important;   /* niente “scivolamenti” */
    z-index: 50 !important;
  }

  /* PULSANTI: tutti uguali */
  .swiper-slide .banner-scuole-caption .banner-buttons .banner-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 44px !important;      /* più piccoli */
    width: 230px !important;      /* 🔥 tutti uguali (stabile) */
    padding: 0 16px !important;

    white-space: nowrap !important;
    line-height: 1 !important;

    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: .35px !important;

    border-radius: 6px !important;
    border: 2px solid rgba(255,255,255,0.9) !important;

    color: #fff !important;

    /* il tema usa transform per animazioni: lo neutralizziamo */
    transform: none !important;
    top: 0 !important;
    margin: 0 !important;
  }
}

/* =========================================================
   MOBILE: VERTICALI, CENTRATI
   ========================================================= */
@media (max-width: 767px){

  .swiper-slide .banner-scuole-caption .banner-buttons{
    position: static !important;
    transform: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    width: 92% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding-top: 18px !important;
  }

  .swiper-slide .banner-scuole-caption .banner-buttons .banner-btn{
    width: 100% !important;
    height: 44px !important;
    padding: 0 16px !important;
  }
}

/* =========================================================
   COLORI BASE (uno per pulsante)
   ========================================================= */
.swiper-slide .banner-scuole-caption .btn-chirurghi{
  background-color: #CD0E11 !important;
}

.swiper-slide .banner-scuole-caption .btn-nutrizionisti{
  background-color: #0D6EFD !important;
}

.swiper-slide .banner-scuole-caption .btn-psi{
  background-color: #A5006E !important;
}

/* =========================================================
   DISATTIVA overlay / arancione del template UJARAK
   ========================================================= */
.swiper-slide .banner-scuole-caption .banner-btn::before,
.swiper-slide .banner-scuole-caption .banner-btn::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   HOVER TONO SU TONO (si vede davvero)
   ========================================================= */
.swiper-slide .banner-scuole-caption .banner-btn:hover,
.swiper-slide .banner-scuole-caption .banner-btn:focus{
  filter: brightness(0.90) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18) !important;
  color: #fff !important;
  outline: none !important;
}