/* ============================================================
   HERO
   ============================================================ */
.hero-suggest {
  background: #16a2cd;
  border-radius: 10px;
  padding: 25px 20px;
  text-align: center;
  margin-bottom: 25px;
}

.hero-title {
  font-size: 1.1rem;
  color: #e6f3ff;
  font-weight: 800;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size: 0.9rem;
  color: #fff;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

.hero-indicator {
  margin-top: 20px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #00eb17;
  text-shadow: 0 2px 3px rgba(0,0,0,0.25);
}

/* ============================================================
   PACCHETTI: testo + icone (senza flex)
   ============================================================ */
.package-body {
  margin: 6px 0 30px 22px; /* margine superiore/inferiore + rientranza */
}

.package-body p {
  margin: 0 0 -20px 0; /* distanza tra paragrafi */
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.32; /* più compatto */
  display: inline-flex;      /* mantiene icona e testo sulla stessa riga */
  align-items: center;       /* allinea verticalmente */
  flex-wrap: nowrap;         /* impedisce che il testo vada sotto */
}

/* Icona accanto al testo */
.icon img {
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: middle;   /* allinea perfettamente al testo */
  margin-right: 5px;        /* spazio minimo tra icona e testo */
  flex-shrink: 0;           /* evita che l’icona si riduca su mobile */
}

/* Evidenziato */
.package-highlight {
  font-weight: 700;
  color: #003366;
}

/* ============================================================
   COLORI ICONETTE SVG (via CSS filter)
   ============================================================ */

/* 🔵 Blu MrLink */
.icon-blue img {
  filter: brightness(0) saturate(100%) invert(42%) sepia(92%) saturate(2200%) hue-rotate(180deg);
}

/* 🟢 Verde MrLink */
.icon-green img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(92%) saturate(1200%) hue-rotate(75deg);
}

/* 🟠 Arancione */
.icon-orange img {
  filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(2000%) hue-rotate(10deg);
}

/* 🟡 Giallo evidenziato */
.icon-yellow img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(32%) saturate(2000%) hue-rotate(5deg);
}

/* 🔴 Rosso */
.icon-red img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(3200%) hue-rotate(0deg);
}

/* ⚫ Nero */
.icon-black img {
  filter: brightness(0) saturate(100%);
}

/* ⚪ Bianco */
.icon-white img {
  filter: brightness(0) saturate(100%) invert(100%);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {

  .package-body {
    margin-left: 18px;
  }

  .icon img {
    width: 1rem;
    height: 1rem;
  }
}


/* ============================================================
   TITOLI DEI PIANI
   ============================================================ */
.plan-free-title,
.plan-recommended-title,
.plan-gold-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: 0.25s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

/* Hover + Active (unificati) */
.plan-free-title:hover,
.plan-recommended-title:hover,
.plan-gold-title:hover,
.plan-free-title.active,
.plan-recommended-title.active,
.plan-gold-title.active {
  background-color: #e6f3ff;
  border-color: #99c2ff;
}

/* Radio centrato */
input[type="radio"][name="plan"] {
  position: relative;
  top: 5px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {

  .package-body {
    margin-left: 18px;
  }

  .package-text,
  .package-highlight {
    line-height: 1.3;
    gap: 5px;
    flex-wrap: wrap;
  }

  .icon img {
    width: 1rem;
    height: 1rem;
  }
}


/* ============================================================
   📢 PROMO BOX — Messaggio informativo evidenziato
   ------------------------------------------------------------
   Box verde con sfumatura leggera, bordi arrotondati e padding.
   Usato per evidenziare comunicazioni importanti (es. brochure).
   ============================================================ */
.promoBox {
  background: linear-gradient(
    180deg,
    #A4F2AB 0%,
    #9DECA4 100%
  ); /* 🔸 leggerissima sfumatura */
  
  border-radius: 10px;        /* 🔸 bordi arrotondati */
  padding: 18px 20px;         /* spazio interno */
  margin: 20px 0;             /* margine sopra/sotto */
  border: 1px solid #8BD893;  /* 🔸 bordo leggero per risalto */
}