/* Countdown Timer */
.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* Space between time blocks */
  font-family: 'Arial', sans-serif;
}

.time-block {
  text-align: center;
}

.time-segment {
  display: flex;
  gap: 5px; /* Space between digits within a block */
}

.digit-flipper {
  position: relative;
  width: 60px; /* Adjust as needed */
  height: 90px; /* Adjust as needed */
  perspective: 300px;
}

.card-current, .card-next {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.card-top, .card-bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  background-color: black;
  color: white;
  font-size: 48px; /* Adjust as needed */
  line-height: 90px; /* Should match .digit-flipper height */
  text-align: center;
  overflow: hidden;
  border-radius: 5px; /* Optional: rounded corners */
}

.card-top {
  top: 0;
  line-height: 90px; /* Align text to bottom of top half */
}

.card-bottom {
  bottom: 0;
  line-height: 0; /* Align text to top of bottom half */
}

/* Initial state of next card (hidden behind) */
.card-next .card-top {
  transform: rotateX(0deg);
}

.card-next .card-bottom {
   transform: rotateX(0deg); /* Start flat */
}

/* Flipping animation */
.digit-flipper.flip .card-current .card-top {
  transform: rotateX(-180deg);
  transition: transform 0.5s ease-in-out;
}

.digit-flipper.flip .card-next .card-bottom {
  transform: rotateX(0deg); /* End flat, was rotateX(180deg) */
  transition: transform 0.5s ease-in-out 0.5s; /* Delay start to match top card flip */
}

/* This is to make the new bottom half appear instantaneously after the top half flips */
.digit-flipper.flip .card-current .card-bottom {
    /* No change, it just stays there */
}

.digit-flipper.flip .card-next .card-top {
    /* This is already rotated 180deg and stays hidden */
}


.time-label {
  margin-top: 10px;
  font-size: 16px; /* Adjust as needed */
  color: #333; /* Or match your theme */
}

/* Responsive adjustments - example for smaller screens */
@media (max-width: 768px) {
  .digit-flipper {
    width: 40px;
    height: 60px;
  }
  .card-top, .card-bottom {
    font-size: 32px;
    line-height: 60px;
  }
  .card-top {
    line-height: 60px;
  }
  .card-bottom {
    line-height: 0;
  }
  .countdown-container {
    gap: 10px;
  }
  .time-label {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
    .countdown-container {
        flex-wrap: wrap; /* Stack blocks on very small screens */
        gap: 15px;
    }
    .time-block {
        /* Adjust width if needed when wrapping */
    }
    .digit-flipper {
        width: 30px;
        height: 45px;
    }
    .card-top, .card-bottom {
        font-size: 24px;
        line-height: 45px;
    }
    .card-top {
        line-height: 45px;
    }
    .card-bottom {
        line-height: 0;
    }
    .time-label {
        font-size: 10px;
    }
}