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


.retro-gray {
  background-color: #d9d9d9
}

.button-color-1 {
  margin-top: 0.75rem;
  /* margin-right: 0.5rem; */
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
  font-weight: 500;
  background-color: #10B981;
  color: #FFFFFF;
}

.button-color-1:hover {
  background-color: #047857;
}

.button-color-1:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgb(147, 197, 253);

}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.wizard-form-container {
  @apply p-6 max-w-lg mx-auto bg-slate-50 rounded-xl shadow-xl flex flex-col items-center justify-center space-y-4;
  width: 100%; /* Ensure full width */
  max-width: 800px; /* Set a maximum width */
  height: auto; /* Set height to auto */
  min-height: 400px; /* Set a minimum height */
}

@screen 3xl {
  .wizard-form-container {
    max-width: 1300px; /* Increase the maximum width for 3xl screens */
    min-height: 600px; /* Increase the minimum height for 3xl screens */
  }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.reveal-active {
  opacity: 1;
  transform: translateY(0);
}

@keyframes rocket-fly {
  0% {
    transform: translateY(100px) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: translateY(-20px) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

.rocket-reveal-active {
  animation: rocket-fly 1s ease-out forwards;
}

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
    &:hover {
      @apply bg-gray-300;
    }
    &:not([href]) { /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-gray-400;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}





@layer base {
  h1 {
    @apply text-4xl  text-gray-900;
  }
  ul {
    @apply list-disc list-inside
  }
  ol {
    @apply list-decimal list-inside
  }
}

/* Increment value */ 
  /* Hide default number input arrows */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }

  .relative {
    position: relative;
  }

  .minus-button, .plus-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    color: #4a5568; /* Tailwind CSS gray-700 */
  }

  .minus-button {
    left: 0.5rem;
  }

  .plus-button {
    right: 0.5rem;
  }

  .minus-button:hover, .plus-button:hover {
    color: #2d3748; /* Tailwind CSS gray-800 */
  }

  /* Increment value end */


/* on off slide button */
  .peer:checked ~ .peer-checked\:translate-x-full {
    transform: translateX(100%);
  }
  .peer:checked ~ .peer-checked\:bg-green-500 {
    background-color: green;
  }
  .peer:checked ~ .peer-checked\:bg-red-500 {
    background-color: red;
  }

  @layer utilities {
    .opacity-animation {
      @apply inline-block;
      animation: opacityChange 2s infinite;
      margin: 0;
      padding: 0;
    }
  
    @keyframes opacityChange {
      0% {
        opacity: 1;
      }
      25% {
        opacity: 0.8;
      }
      50% {
        opacity: 0.7;
      }
      75% {
        opacity: 0.8;
      }
      100% {
        opacity: 1;
      }
    }
  }