/* ============
   Palette & base
   ============ */
.accordion-servizi {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px;
  color: #e8edf7;
  --card-bg: #00000099;
  --card-bg-hover: #00000009;
  --text: #e8edf7;
  --text-dim: #cfd6e1;
  --dot: #6ee3ff;
  --radius: 85px;
  --shadow-inset: inset 0 0 0 1px #ffffff05;
  --transition: 200ms ease;
  --gradient-border: linear-gradient(165deg, #77B9F299, #FFFFFF05); /* 🆕 Aggiunto gradiente come variabile */
  --gradient-hover: linear-gradient(165deg, #99C5E555, #FFFFFF10);
  --gradient-open: linear-gradient(165deg, #59A7E9, #FFFFFF05);
}

/* Tutti gli elementi con lo stesso stile di base */
.accordion-servizi__item,
.accordion-servizi__header,
.accordion-servizi__panel {
  border-radius: var(--radius);
}

/* =================== HEADER (titolo) =================== */
.accordion-servizi__header {
  position: relative;
  width: 100%;
  text-align: left;
  /* 🆕 Usa le variabili per il gradiente base */
  background: var(--gradient-border);
  box-shadow: none;
  border: none;
  padding: 2px; /* Spazio per il bordo finto */
  cursor: pointer;
  display: flex;
  align-items: center;
  /* 🆕 Aggiunta la transizione su background per una transizione più fluida */
  transition: transform var(--transition), background 0.5s ease-in-out;
}

/* 🆕 Sostituisci l'hover con la variabile */
.accordion-servizi__header:hover {
  background: var(--gradient-hover);
  transform: translateY(-1px);
}

/* 🆕 Sostituisci lo stato attivo (aperto) con la variabile */
.accordion-servizi__item.is-open .accordion-servizi__header {
  background: var(--gradient-open);
}

/* ====== CONTENUTO INTERNO (per simulare il bordo) ====== */
.accordion-servizi__title {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px 20px 16px 42px;
  width: 100%;
  display: block;
  font-size: 28px; /* 🆕 Spostato qui per coerenza */
  color: var(--text); /* 🆕 Spostato qui per coerenza */
  transition: background var(--transition); /* 🆕 Aggiunto transizione al background */
}

/* Stile per il puntino */
.accordion-servizi__title::before {
  content: "";
  position: absolute;
  margin-left: -22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
  top: 50%;
  transform: translateY(-50%);
}

/* =================== PANEL (descrizione) =================== */
.accordion-servizi__panel {
  position: relative;
  background: var(--gradient-border);
  border-radius: 25px;
  padding: 2px; /* Stesso padding del header */
  box-shadow: none;
  margin-top: 10px;
}

.accordion-servizi__content {
  background: var(--card-bg); /* Use the same inner background color */
  border-radius: 25px;
  padding: 18px 20px;
  font-size: 28px;
  line-height: 1.6;
  color: var(--text-dim);
}

@media only screen and (max-width: 768px){
	.accordion-servizi__title {
	  font-size: 20px; 
		color: var(--text); /* 🆕 Spostato qui per coerenza *
	  transition: background var(--transition); /* 🆕 Aggiunto transizione al background */
	}
	
	.accordion-servizi {
	  padding: 0px;
	}
}