/* =========================
   PKG
========================= */

.pkg-pane{
  opacity:1;
  transition:opacity .25s ease;
}

.pkg-pane.is-hidden{
  display:none !important;
}

.pkg-link{ cursor:pointer; }
.pkg-link.is-active{ font-weight:800; }

.pkg-col-sync{ min-height: var(--pkg-col-sync-h, auto); }


/* =========================
   SRVC (stessa logica base)
========================= */

.srvc-pane{
  opacity:1;
  transition:opacity .25s ease;
}

.srvc-pane.is-hidden{
  display:none !important;
}

.srvc-link{ cursor:pointer; }
.srvc-link.is-active{ font-weight:800; }

/* se in futuro vuoi anche sync-height */
.srvc-col-sync{ min-height: var(--srvc-col-sync-h, auto); }


/* =========================
   FREQ (toggle prezzo mensile/annuale)
========================= */

.freq-pane{
  opacity:1;
  transition:opacity .25s ease;
}

.freq-pane.is-hidden{
  display:none !important;
}

.freq-link{ cursor:pointer; }
.freq-link.is-active{ font-weight:800; }


/* =========================
   CAT (categorie servizi extra, tab a pillola)
========================= */

.cat-tabs-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:24px;
}

.cat-link{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  font-weight:600;
  border:1px solid #1a1a1a;
  background:#1a1a1a;
  color:#ffffff;
  border-radius:999px;
  padding:9px 18px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.cat-badge{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  background:#1f8a4c;
  color:#ffffff;
  border-radius:999px;
  padding:2px 8px;
}
.cat-link.is-active .cat-badge{
  background:#1f8a4c;
  color:#ffffff;
}

.cat-link.is-active{
  background:#eeeeee;
  border-color:#eeeeee;
  color:#1a1a1a;
}

.cat-pane{
  opacity:1;
  transition:opacity .25s ease;
}

.cat-pane.is-hidden{
  display:none !important;
}