/* Contenitore principale */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 270px;
  perspective: 1000px;
  position: relative;
}

/* Contenitore interno */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Rotazione su hover */
.flip-box.flip-left:hover .flip-box-inner {
  transform: rotateY(-180deg);
}
.flip-box.flip-right:hover .flip-box-inner {
  transform: rotateY(180deg);
}
.flip-box.flip-top:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box.flip-bottom:hover .flip-box-inner {
  transform: rotateX(-180deg);
}

/* Front e Back */
.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Front */
.flip-box-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flip-box-front .flip-title {
  position: absolute;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Retro */
.flip-box-back {
  background-color: #ddd;
  color: black;
  padding: 20px;
  box-sizing: border-box;
}

.flip-left .flip-box-back {
  transform: rotateY(-180deg);
}
.flip-right .flip-box-back {
  transform: rotateY(180deg);
}
.flip-top .flip-box-back {
  transform: rotateX(180deg);
}
.flip-bottom .flip-box-back {
  transform: rotateX(-180deg);
}

/* Descrizione */
.desc {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 1.1rem;
}

/* Custom button stile */
.flip-box-back .btn-custom {
  background-color: #C00000;
  border: 2px solid #DDD;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  transition: background-color 0.3s;
}

.flip-box-back .btn-custom:hover {
  background-color: #959595;
  color: white;
}