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


.range {
  --range-shdw: #3B82F6;
}

.checkbox:checked,
.checkbox[checked="true"],
.checkbox[aria-checked="true"] {
  background-repeat: no-repeat;
  animation: checkmark var(--animation-input, 0.2s) ease-out;
  background-color: #3B82F6;
  background-image: linear-gradient(-45deg, transparent 65%, #3B82F6 65.99%),
    linear-gradient(45deg, transparent 75%, #3B82F6 75.99%),
    linear-gradient(-45deg, #3B82F6 40%, transparent 40.99%),
    linear-gradient(45deg,
      #3B82F6 30%,
      white 30.99%,
      white 40%,
      transparent 40.99%),
    linear-gradient(-45deg, white 50%, #3B82F6 50.99%);
}

.swal2-container {
  z-index: 99999 !important;
  /* super high priority */
}

.swal2-popup {
  z-index: 999999 !important;
}

@keyframes spin-smooth {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.animate-spin-smooth {
  animation: spin-smooth 4s linear infinite;
}

.animate-spin-reverse {
  animation: spin-reverse 6s linear infinite;
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeSlide {
  animation: fadeSlide 0.5s ease-out forwards;
}

@keyframes shineMove {
  0% {
    left: -50%;
  }

  100% {
    left: 120%;
  }
}

.shine {
  position: relative;
  display: inline-block;
}

.shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent);
  animation: shineMove 1.3s infinite ease-in-out;
  mix-blend-mode: screen;
  /* ⭐ FIXES THE FIRST-LETTER ISSUE */
  pointer-events: none;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeDown {
  animation: fadeDown 0.2s ease-out;
}