@tailwind base;
@tailwind components;
@tailwind utilities;

/* Slick slider custom styles */
.slick-dots {
  bottom: -30px;
}

.slick-dots li button:before {
  font-size: 8px;
}

.slick-dots li.slick-active button:before {
  color: #000;
} 

/* Optional: Remove the default slick-slide padding if needed */
.slick-slide > div {
  margin: 0 4px;
}

/* Confirmation tick animations */
@keyframes scaleIn {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes checkmark {
  0% {
    stroke-dashoffset: 100;
    opacity: 0.5;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 100;
    opacity: 0.5;
  }
}

.confirmation-tick {
  animation: scaleIn 2s ease-in-out infinite;
}

.confirmation-tick svg path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: checkmark 3s ease-in-out infinite;
}

.confirmation-tick svg {
  transform-origin: center;
}