/* =========================
   CONFIGURATORE (pb-wip) — tabella a righe
========================= */

/* 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; }

/* Toggle mensile/annuale come interruttore unico: markup ricostruito da zero come
   blocco HTML piatto (.freq-switch), stesso schema del tab-bar categorie servizi
   extra che ha gia' funzionato bene — niente piu' colonne/righe Avada da forzare. */
.freq-switch-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.freq-switch {
  display: inline-flex;
  background: #1a1a1a;
  border-radius: 999px;
  padding: 4px;
  gap: 0;
}
.freq-link {
  display: block;
  text-align: center !important;
  border-radius: 999px !important;
  padding: 10px 24px !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.freq-link.is-active {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

/* 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;
}

/* etichette riga: testo a sinistra, "+"/"-" fissato a destra sulla stessa riga */
.row-label-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.row-label-text p { margin: 0; font-weight: 600; }

.row-label {
  cursor: default;
}
.row-label:not(.row-label--static) {
  cursor: pointer;
}
.row-label:not(.row-label--static) .row-label-text::after {
  content: "+";
  flex: none;
  font-weight: 400;
  opacity: .6;
}
.feature-row.is-expanded .row-label:not(.row-label--static) .row-label-text::after {
  content: "–";
}

.row-detail {
  display: none;
  font-size: .9em;
  opacity: .8;
  margin-top: 6px !important;
}
.feature-row.is-expanded .row-detail {
  display: block;
}

/* 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; }

/* =========================
   Barra pillole (mobile)
========================= */
.plan-pill-bar {
  display: none;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 14px;
}
.plan-pill {
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--awb-color5, #ccc);
  background: var(--awb-color2, #fff);
  color: inherit;
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
}
.plan-pill[aria-pressed="true"] {
  background: var(--awb-color8, #222);
  border-color: var(--awb-color8, #222);
  color: var(--awb-color1, #fff);
}

/* =========================
   Addon / totale (invariato)
========================= */
.muvi-configuratore-addons{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

.muvi-addon-item{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

.muvi-addon-title{ flex:1 1 auto; }

/* display:contents + grid si e' rivelato inaffidabile (pacchetto/totale allineati
   tra loro, servizi extra allineati tra loro ma su un punto diverso). Una <table>
   HTML vera e' lo strumento nativo fatto apposta per allineare colonne — il
   browser calcola la larghezza delle colonne una sola volta per l'intera tabella,
   niente trucchi CSS da tenere in equilibrio. */
#configuratore-totale{
  display: block !important; /* Avada mette flex-row di default su questa colonna */
  margin: 24px 0;
  padding: 14px 16px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 14px;
  font-size: 13.5px;
  text-align: left;
}

.cart-summary-empty{
  margin: 0;
  opacity: .7;
  font-size: 13px;
  text-align: center;
}

.cart-summary-table{
  width: 100%;
  border-collapse: collapse;
}

.cart-summary-table td{
  padding: 5px 0;
  color: #cfcfcf;
  vertical-align: top;
}

.cart-summary-table td:last-child{
  white-space: nowrap;
  text-align: right;
  padding-left: 10px;
}

.cart-summary-total td{
  font-weight: 800;
  font-size: 15px;
  border-top: 1px solid #333;
  padding-top: 8px;
}

.plan-checkout-btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* =========================
   Riepilogo che segue (sidebar flottante desktop / barra fissa mobile).
   #configuratore-totale e .plan-checkout-btn sono 2 colonne semplici e adiacenti
   (non annidate): li rendiamo "fixed" indipendentemente, allineati per formare
   un unico pannello — nessuna modifica al contenuto necessaria.
========================= */
@media (min-width: 719px) {
  /* compare solo dopo che hai scelto un piano, non subito al caricamento */
  #configuratore-totale,
  .plan-checkout-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  body.has-plan-selected #configuratore-totale,
  body.has-plan-selected .plan-checkout-btn {
    opacity: 1;
    pointer-events: auto;
  }

  #configuratore-totale {
    position: fixed;
    right: 24px;
    bottom: 116px;
    left: auto;
    width: 260px;
    max-height: 35vh;
    overflow-y: auto;
    margin: 0;
    z-index: 40;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
  .plan-checkout-btn {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    width: 260px !important;
    display: block !important;
    text-align: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    z-index: 40;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

@media (max-width: 718px) {
  #configuratore-totale {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 76px;
    width: auto;
    max-height: 22vh;
    overflow-y: auto;
    margin: 0;
    border-radius: 0;
    z-index: 40;
  }
  .plan-checkout-btn {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    z-index: 40;
  }
}

/* =========================
   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;
  }
}