/* ==========================================================================
   cta-buttons.css — Bottoni CTA telefonici nativi (sostituiscono i PNG
   899costo.png / tasto-cartadicredito.png / chiama.png)
   --------------------------------------------------------------------------
   Nessuna dipendenza esterna: icona cornetta = SVG inline in data-URI.
   Nessun numero di telefono qui dentro: i numeri vivono nell'HTML.

   Classi:
   .cta-tel            → pillola viola completa (icona + numero + prezzo)
   .cta-tel__icon      → cerchio bianco con cornetta (SVG in background)
   .cta-tel__body      → colonna testo (numero sopra, prezzo sotto)
   .cta-tel__num       → numero grande bold
   .cta-tel__price     → riga prezzo piccola
   Modificatori:
   .cta-tel--simple    → solo etichetta grande, senza riga prezzo (ex chiama.png)
   .cta-tel--sm        → versione compatta
   .cta-tel--block     → occupa tutta la larghezza disponibile (mobile)
   Helper:
   .cta-tel-wrap       → contenitore per centrare il bottone
   ========================================================================== */

.cta-tel {
  /* palette campionata dai PNG originali */
  --cta-grad-top: #b13ae0;
  --cta-grad-mid: #8a18c4;
  --cta-grad-bottom: #5c0a92;
  --cta-ring: #33064f;            /* bordo esterno viola quasi nero */
  --cta-text: #ffffff;

  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1.4em 0.5em 0.9em;
  max-width: 100%;
  box-sizing: border-box;

  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--cta-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  border: 3px solid var(--cta-ring);
  border-radius: 999px; /* pillola */
  background-image: linear-gradient(
    to bottom,
    var(--cta-grad-top) 0%,
    var(--cta-grad-mid) 48%,
    var(--cta-grad-bottom) 100%
  );
  /* leggibile su chiaro E scuro: alone scuro sotto + filo di luce interna */
  box-shadow:
    0 3px 8px rgba(20, 3, 40, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.cta-tel:hover,
.cta-tel:focus-visible {
  color: var(--cta-text);
  text-decoration: none;
  filter: brightness(1.1);
  box-shadow:
    0 5px 14px rgba(20, 3, 40, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.cta-tel:focus-visible {
  outline: 3px solid rgba(177, 58, 224, 0.55);
  outline-offset: 2px;
}

.cta-tel:active {
  filter: brightness(0.92);
  transform: translateY(1px);
  box-shadow:
    0 1px 4px rgba(20, 3, 40, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* --- icona cornetta: cerchio bianco + SVG inline (nessuna font-icona) --- */
.cta-tel__icon {
  flex: 0 0 auto;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  border: 2px solid var(--cta-text);
  background-color: rgba(255, 255, 255, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58% 58%;
}

/* --- blocco testo --- */
.cta-tel__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  min-width: 0;
}

.cta-tel__num {
  font-size: 1.6em;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 3px rgba(20, 3, 40, 0.45);
}

.cta-tel__price {
  margin-top: 0.15em;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
}

/* --- modificatori --- */

/* solo etichetta (es. "CHIAMA"), senza riga prezzo */
.cta-tel--simple .cta-tel__num {
  font-size: 1.5em;
  text-transform: uppercase;
}

/* compatto (sidebar, righe strette) */
.cta-tel--sm {
  font-size: 0.8rem;
}

/* tutta larghezza + centrato: utile su mobile */
.cta-tel--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* --- helper per centrare --- */
.cta-tel-wrap {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

/* --- responsive: sotto i 480px il bottone si adatta senza rompersi --- */
@media (max-width: 480px) {
  .cta-tel {
    font-size: 0.85rem;
    padding-right: 1em;
  }
  .cta-tel__num {
    font-size: 1.45em;
  }
}