/* NON cambiamo dimensioni/stile della card originale */
.pricing-card { position: relative; overflow: visible; }

/* Prospettiva solo per l’effetto 3D */
.pricing-card .flip-root { perspective: 1200px; width: 100%; }

/* Contenitore delle due facce (non ruota più lui) */
.pricing-card .flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;          /* contiene le facce senza tagliare il badge */
  border-radius: inherit;
}

/* Facce: stesso identico box della card */
.pricing-card .flip-face {
  position: absolute;
  inset: 0;
  padding: inherit;          /* preserva il look originale */
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(0);  /* fix Safari/WebKit */
}

/* Stato iniziale: fronte a 0°, retro a 180° */
.pricing-card .flip-front { transform: rotateY(0deg) translateZ(0); z-index: 2; }
.pricing-card .flip-back  { transform: rotateY(180deg) translateZ(0); z-index: 1;
  display: flex; flex-direction: column; gap: .5rem; overflow: auto;
}

/* Pulsante chiusura in alto a destra sul retro */
.pricing-card .flip-back .flip-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.pricing-card .flip-back .flip-close:focus {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
  border-radius: 9999px;
}

/* Stato flippato: invertiamo le rotazioni delle facce */
.pricing-card.is-flipped .flip-front { transform: rotateY(-180deg) translateZ(0); }
.pricing-card.is-flipped .flip-back  { transform: rotateY(0deg) translateZ(0); }

/* (Opzionale) se hai un badge elemento reale, lascialo sopra ma non bloccare i click */
.pricing-card .popular-badge { position: absolute; z-index: 3; pointer-events: none; }