/* =========================================================
   PRICING TABLE – Uniformazione altezza colonne
   ========================================================= */

.pricing-table.columns-3 {
  display: flex;
  align-items: stretch;
}

.pricing-table-column {
  display: flex;
  flex-direction: column;
}

.pricing-table-text {
  flex-grow: 1;
}

@media (max-width: 768px) {
  .pricing-table.columns-3 {
    flex-direction: column;
  }
}

/* =========================================================
   ZOOM HOVER EFFECT
   ========================================================= */

.zoom {
  transition: transform 0.3s;
}

.zoom:hover {
  -ms-transform: scale(1.02);      /* IE 9 */
  -webkit-transform: scale(1.02);  /* Safari 3–8 */
  transform: scale(1.02);
}

/* =========================================================
   FEATURE COMPARE – Equal height (Google Analytics vs Digilex)
   ========================================================= */

.feature-compare.columns-2 {
  display: flex;
  align-items: stretch;
}

.feature-compare.columns-2 > .column {
  display: flex;
}

/* Wrapper con position: relative */
.feature-compare.columns-2 > .column > div[style*="position: relative"] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.feature-compare.columns-2 .feature-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Area testuale che cresce */
.feature-compare.columns-2 .feature-compare-text {
  flex-grow: 1;
}

@media (max-width: 768px) {
  .feature-compare.columns-2 {
    flex-direction: column;
  }

  .feature-compare.columns-2 > .column.width-6 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   HOVER BACKGROUND EFFECT
   ========================================================= */

.hover-bg {
  transition: background-color 0.15s ease-in-out;
}

.hover-bg:hover {
  background-color: rgba(42, 113, 208, 0.15);
}