@media (min-width: 790px) {
  .crediti {
    float: right;
    font-size: 11px;
  }

  .link {
    float: left;
  }
}

@media (max-width: 789.98px) {
  .crediti {
    float: left;
    margin-top: 20px;
    font-size: 11px;
  }

  .link {
    float: left;
  }
}

/*Federica: dimensione testo menu di secondo livello nella navbar, ovvero gli argomenti*/
@media (max-width: 576px) {
  .menu-secondo-livello {
    font-size: 14px !important;
  }
}

@media (min-width: 577px) {
  .menu-secondo-livello {
    font-size: 16px !important;
  }
}

/*Federica: colore icona bottone invio al focus (paginazione n.pagina)*/
#button-4:focus {
  background-color: black !important;
}

/*
 * Tiziano
 * ----------------------------------------------------
 * Fixing delle immagini presenti all'interno dei
 * wrapper rich text prodotti dal CK editor
 *
 */

.richtext-wrapper img {
  max-width: 100% !important;
}

/*
 * Tiziano
 * ----------------------------------------------------
 * Stile per widget bar
 * (da spostare in widget.css, appena modificati
 * tutti i testitipo) 
 *
 */

.widget-bar {
  position: fixed;
  bottom: 32px; /* <-- Era 84px */
  right: 32px; /* <-- Era 29px (arrotondato per simmetria) */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.widget-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background-color: var(--widget-bg, var(--main-primary));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    background-color 0.2s ease;
  color: #ffffff;
}

/* Gestione delle dimensioni standard per le icone SVG inserite nei bottoni */
.widget-button svg {
  width: 24px;
  height: auto;
  fill: #ffffff;
}

.widget-button:hover,
.widget-button:focus {
  transform: scale(
    1.1
  ); /* Leggermente più accentuato per dare miglior feedback visivo */
  outline: none;
}

/* --- Modificatori di Colore e Stato --- */

/* Colore specifico per l'icona di WhatsApp */
.widget-button.widget-wa {
  background-color: #25d366;
}

.widget-button.is-open {
  background-color: #d9364f;
}

.widget-button.widget-accessibilita:not(.is-open) svg {
  width: 32px;
  height: auto;
  fill: currentColor;
}

@media (max-width: 1199.98px) {
  .widget-bar {
    bottom: 16px;
    right: 16px;
  }
}

/* =========================================
   VARIANTE: DIMENSIONE MEDIA (40x40)
   Da attivare stampando la classe "widget-md" 
   es. <div class="widget-bar widget-md">
   ========================================= */
.widget-bar.widget-md .widget-button:not(.widget-back-to-top) {
  width: 40px;
  height: 40px;
}

/* Scala l'icona standard proporzionalmente */
.widget-bar.widget-md .widget-button svg {
  width: 20px;
}

/* Scala l'omino dell'accessibilità proporzionalmente */
.widget-bar.widget-md .widget-button.widget-accessibilita:not(.is-open) svg {
  width: 26px;
}

/* =========================================
   VARIANTE: DIMENSIONE GRANDE (56x56)
   Da attivare stampando la classe "widget-lg"
   es. <div class="widget-bar widget-lg">
   ========================================= */
.widget-bar.widget-lg .widget-button:not(.widget-back-to-top) {
  width: 56px;
  height: 56px;
}

/* Scala l'icona standard proporzionalmente */
.widget-bar.widget-lg .widget-button svg {
  width: 28px;
}

/* Scala l'omino dell'accessibilità proporzionalmente */
.widget-bar.widget-lg .widget-button.widget-accessibilita:not(.is-open) svg {
  width: 38px;
}

/* =========================================
   WIDGET: BACK TO TOP
   ========================================= */
.widget-button.widget-back-to-top {
  order: 99; /* Lo tiene sempre sul fondo della widget-bar */
  background-color: var(--widget-bg, var(--main-primary));

  /* Stato iniziale: invisibile e collassato (per non lasciare buchi nel flexbox) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  width: 0;
  border-width: 0;
  margin: 0;
  padding: 0;
  transform: scale(0);

  /* Mantiene la transizione fluida del resto della barra */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Stato visibile (quando si scorre in basso) */
.widget-button.widget-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  /* Ripristina le dimensioni standard del widget-button */
  height: 48px;
  width: 48px;
  border-width: 2px;
  transform: scale(1);
}

/* Gestione dimensioni per le varianti medie e grandi */
.widget-bar.widget-md .widget-button.widget-back-to-top.is-visible {
  height: 40px;
  width: 40px;
}
.widget-bar.widget-lg .widget-button.widget-back-to-top.is-visible {
  height: 56px;
  width: 56px;
}

/* =========================================
   IMMAGINI PERSONALIZZATE NEI WIDGET
   ========================================= */
.widget-button img.widget-custom-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ritaglia l'immagine per riempire il cerchio senza schiacciarsi */
  border-radius: 50%; /* Mantiene il taglio circolare perfetto */
  pointer-events: none; /* Evita interferenze con l'evento click del bottone padre */
  background-color: #ffffff; /* Sfondo bianco opzionale se l'immagine ha trasparenze */
}

/* =========================================
   LAYOUT ORIZZONTALE PER MOBILE (< 768px)
   ========================================= */
@media (max-width: 767.98px) {
  .widget-bar {
    /* Trasforma la colonna in una riga orizzontale (da destra a sinistra) */
    flex-direction: row-reverse;

    /* Centratura verticale perfetta tra icone di riga se hanno altezze diverse */
    align-items: center;

    bottom: 16px;
    right: 16px;
    gap: 8px;
  }

  /* TRUCCO: Cambiamo l'ordine solo su mobile.
     Da ultimo in basso (99) a primo elemento a destra (-1) */
  .widget-button.widget-back-to-top {
    order: -1;
  }
}