.flip-card-container {
  background-color: transparent;
  width: 100%; /* o una larghezza specifica se necessario */
  /* height: 300px; Altezza definita dal controllo Elementor */
  perspective: 1000px; /* Rimuovi se non vuoi l'effetto 3D e usi flip 2D */
  /*margin-bottom: 20px;*/ /* Spaziatura opzionale */
  aspect-ratio: 1;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Ombra opzionale per la card */
  cursor: pointer;
}

.flip-card-container:hover .flip-card-inner,
.flip-card-container.hover .flip-card-inner {
  /* Aggiungi la classe .hover per il debug/test via JS se necessario */
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  overflow: hidden; /* Per assicurare che il border-radius sia rispettato con l'immagine */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  /* border-radius definito dai controlli Elementor */
}

/* Lato Frontale */
.flip-card-front {
  background-color: #bbb; /* Colore di fallback se l'immagine non carica */
  color: black;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.flip-card-front .flip-card-content-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* Padding generale per il contenuto frontale */
  box-sizing: border-box;
}

.flip-card-front .front-title {
  /* Lo sfondo è già nel controllo, qui solo eventuali altri stili */
  padding: 10px 20px; /* Default padding, può essere sovrascritto dal controllo */
  display: inline-block; /* Per far sì che lo sfondo si adatti al testo */
  border-radius: 5px; /* Arrotondamento opzionale per il background del titolo */
}

.flip-card-front .front-title h2 {
  margin: 0;
  font-size: 24px; /* Default, sovrascritto dalla tipografia */
  line-height: 1.2;
}

/* Lato Posteriore */
.flip-card-back {
  /* background-color definito dai controlli Elementor */
  color: white;
  transform: rotateY(180deg);
  padding: 20px; /* Padding generale per il contenuto posteriore */
}

.flip-card-back .flip-card-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px; /* Spazio tra titolo, sottotitolo e bottone */
  height: 100%;
}

.flip-card-back .back-title h2 {
  margin: 0;
  font-size: 24px; /* Default, sovrascritto dalla tipografia */
}

.flip-card-back .back-subtitle {
  margin: 0;
  font-size: 16px; /* Default, sovrascritto dalla tipografia */
  line-height: 1.4;
}

.flip-card-button {
  /* Colori e tipografia definiti dai controlli Elementor */
  padding: 10px 25px; /* Default, sovrascritto dai controlli */
  text-decoration: none !important;
  display: inline-block;
  border: none;
  cursor: pointer;
  /* border-radius definito dai controlli Elementor */
  transition: opacity 0.3s ease;
}

.flip-card-button:hover {
  opacity: 0.85;
}