/* =========================
   TABELLA PACCHETTI /personal-branding/ — solo grafica
   Estratto da configuratore.css (pb-wip) senza switch mensile/annuale,
   riepilogo e carrello. Dettagli righe e servizi extra: accordion nativi Avada.
========================= */

/* Carosello "Chi ci ha scelto" (sezione marcata .CHAT-GPT-NOTICE-ME): le immagini sono
   lazy-load, quindi Swiper ricalcola l'altezza del contenitore ad ogni cambio slide e,
   finche' la nuova immagine non ha finito di caricare, la riga collassa — causando lo
   scatto di scroll della pagina. Fissiamo l'altezza via aspect-ratio (le foto sono
   quadrate, ~981x980) cosi' lo spazio resta riservato a prescindere dal caricamento.
   Nessun rischio di rompere altri caroselli: la regola e' scoperta a questa sola sezione. */
.CHAT-GPT-NOTICE-ME .fusion-image-wrapper,
.CHAT-GPT-NOTICE-ME .swiper-slide img {
  aspect-ratio: 1 / 1;
  height: auto !important;
}
/* Il fix sopra (aspect-ratio stabile) ha reso il carosello piu' alto dello spazio
   che Avada gli aveva riservato in origine: il contenitore sborda e copre la meta'
   inferiore dei pulsanti tab della sezione sotto, intercettandone i click. Non
   spostiamo/ridimensioniamo nulla, abbassiamo solo lo stacking del carosello e
   alziamo quello della sezione servizi extra così torna sopra e riceve i click. */
.CHAT-GPT-NOTICE-ME {
  position: relative;
  z-index: 0;
}
.pricing-wrap {
  position: relative;
  z-index: 1;
}

.CHAT-GPT-NOTICE-ME .swiper-wrapper {
  min-height: 1px; /* impedisce il collasso a 0 tra una transizione e l'altra */
}

/* ogni "riga" e' un fusion_builder_column 1_1 che contiene un row_inner con 5 column_inner */
.pricing-header-row .fusion-builder-row-inner,
.feature-row .fusion-builder-row-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.feature-row {
  border-bottom: 1px solid var(--awb-color5, #e5e5e5);
}

.pricing-header-row {
  border-bottom: 2px solid var(--awb-color5, #e5e5e5);
}

/* colonna etichette/dettagli piu' larga dei 4 piani (invece dell'1/5 uguale di default).
   Scoperto su mobile: ".row-label" e' anche la classe del testo dentro la cella (non solo
   della cella stessa) - senza .fusion-layout-column qui la regola di larghezza finiva
   applicata anche al testo "Confronta i piani" nell'header, spezzandolo su piu' righe. */
.fusion-layout-column.row-label,
.fusion-layout-column.row-label-cell {
  flex: 0 0 26% !important;
  max-width: 26%;
}
.plan-card,
.row-cell {
  flex: 0 0 18.5% !important;
  max-width: 18.5%;
  text-align: center;
}
.plan-card .fusion-column-wrapper,
.row-cell .fusion-text,
.plan-card > *,
.row-cell > * {
  text-align: center;
}
/* Avada forza text-align:left direttamente sui titoli (classe title-heading-left):
   serve un override esplicito, il text-align ereditato dal contenitore non basta. */
.plan-card .title-heading-left,
.row-cell .title-heading-left {
  text-align: center !important;
}

/* niente collasso larghezza su desktop: le 4 colonne restano fisse, solo un bordo
   evidenzia quella scelta (il collasso animato dava risultati inconsistenti). */
.plan-card,
.row-cell {
  overflow: hidden;
}

/* piano selezionato: evidenzia l'intera colonna (header + tutte le righe), non solo il titolo */
.plan-card.is-selected,
.row-cell.is-selected {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.plan-card.is-selected {
  box-shadow: 0 0 0 2px #ffffff, inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.plan-pick { cursor: pointer; }

/* badge "Più popolare": spazio riservato uguale su TUTTE le 4 colonne (non solo Medium),
   cosi' nome/prezzo restano allineati indipendentemente da dove il badge finisce a
   posizionarsi — l'allineamento non dipende dal position:absolute del badge stesso. */
.pricing-header-row .plan-card {
  position: relative;
  padding-top: 40px !important;
}
.plan-badge-tag {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  background: #1a1a1a;
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  z-index: 1;
}
.plan-badge-tag p {
  margin: 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

/* valori cella */
.cell-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 700;
  margin: 0 !important;
}
.cell-check--yes {
  background: #1f8a4c;
  color: #ffffff;
}
.cell-check--no {
  background: transparent;
  color: #6b6b6b;
}

.row-cell p { margin: 0; }
/* ✓ / –: la classe sta sull'elemento Testo di Avada, non su un <p> */
.fusion-text.cell-check {
  /* Avada allarga l'elemento Testo a tutta la colonna: senza questi il cerchio diventa un ovale */
  width: 26px !important;
  min-width: 26px;
  max-width: 26px !important;
  flex: none !important;
  align-self: center;
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 1;
}
.fusion-text.cell-check p { margin: 0 !important; line-height: 1; }
.row-label-text p { margin: 0; font-weight: 600; }

/* =========================
   Barra pillole (mobile)
========================= */
.plan-pill-bar {
  display: none;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 14px;
}
/* Stessi colori dei selettori desktop. !important: gli stili globali di Avada
   sui <button> sovrascrivevano sfondo e testo (testo bianco su pillola chiara). */
.plan-pill {
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid #1a1a1a !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
}
.plan-pill[aria-pressed="true"] {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #1a1a1a !important;
}

/* =========================
   Mobile ≤718px (breakpoint reale Avada su questa pagina)
========================= */
@media (max-width: 718px) {
  .plan-pill-bar { display: flex; }

  /* Avada mette "flex-wrap:wrap" sulla riga (classe fusion-flex-content-wrap): con
     due sole celle visibili (etichetta + piano scelto) le manda comunque a capo invece
     di tenerle affiancate. Forziamo nowrap così restano sempre 2 colonne. */
  .pricing-header-row .fusion-builder-row-inner,
  .feature-row .fusion-builder-row-inner {
    flex-wrap: nowrap !important;
  }

  /* niente confronto affiancato: solo il piano selezionato, a tutta larghezza.
     Il max-width fissato per il desktop va sovrascritto esplicitamente qui, altrimenti
     resta a limitare la larghezza anche quando flex vuole farla crescere. */
  body.has-plan-selected .plan-card:not(.is-selected),
  body.has-plan-selected .row-cell:not(.is-selected) {
    display: none !important;
  }
  .fusion-layout-column.row-label {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    min-width: 0;
  }
  body.has-plan-selected .plan-card.is-selected,
  body.has-plan-selected .row-cell.is-selected {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0;
  }

  /* header: la cella vuota sopra le etichette non serve, nome piano + prezzo a tutta larghezza */
  .pricing-header-row .fusion-layout-column.row-label-cell {
    display: none !important;
  }
  body.has-plan-selected .pricing-header-row .plan-card.is-selected {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}