/* ===============================
   Menu Categorie Laterale
   =============================== */
.side-menu {
  position: fixed;
  top: 0;
  left: -300px; /* nascosto di default */
  width: 300px;
  height: 100%;
  background: #111;
  color: #fff;
  overflow-y: auto;
  transition: left 0.3s ease;
  z-index: 9999;
  padding: 20px;
  box-shadow: 3px 0 10px rgba(0,0,0,0.5);
}

/* Header menu */
.side-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.side-menu-header h3 {
  margin: 0;
  font-size: 1.5em;
}

.close-menu {
  cursor: pointer;
  font-size: 1.3em;
}

/* Lista categorie */
.side-menu ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.side-menu ul li {
  margin-bottom: 15px;
}

.side-menu ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1em;
  transition: color 0.2s;
}

.side-menu ul li a:hover {
  color: #f39c12;
}

/* Mostra il menu quando aperto */
.side-menu.open {
  left: 0;
}

/* ===============================
   Pulsanti Flottanti
   =============================== */
.floating-left,
.floating-right {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.floating-left {
  left: 10px;
  top: 50px; /* sempre a 50px dall’alto */
  transform: none;
} 

.floating-right {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.float-btn {
  background: #111;
  color: #fff;
  padding: 10px 12px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  font-size: 1.5em;
  transition: background 0.2s, color 0.2s;
}

.float-btn:hover {
  background: #f39c12;
  color: #111;
}

/* ===============================
   Media Query Mobile
   =============================== */
@media screen and (max-width: 1024px) {
  .floating-left,
  .floating-right {
    gap: 8px;
  }

  /* Pulsante menu mobile visibile */
  #open-side-menu {
    display: block;
  }

  /* Ridimensiona il menu su schermi piccoli */
  .side-menu {
    width: 250px;
    padding: 15px;
  }

  .side-menu ul li a {
    font-size: 1em;
  }

  .close-menu {
    font-size: 1.2em;
  }
}

/* ===============================
   Tabella Categorie (opzionale)
   =============================== */
.side-categories-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.side-categories-table li {
  margin: 0;
}