@import 'tailwindcss';
@import 'flowbite-react/plugin/tailwindcss';
@source "../.flowbite-react/class-list.json";
@source "../node_modules/react-tailwindcss-datepicker/dist/index.esm.js";

:root {
  --background: #ffffff;
  --foreground: #171717;
  scroll-behavior: smooth;
}

@custom-variant dark (&:is(.dark *));

@theme {
  --color-primary: #033d91;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-figtree);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Figtree', Arial, Helvetica, sans-serif;
}

.loader {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}

.iti__tel-input,
.iti__search-input {
  @apply border! border-gray-300! bg-gray-50! rounded-md! focus:ring! focus:ring-primary! focus:outline-none! w-full! py-2.5! text-sm!;
}

.iti__search-input {
  @apply px-3!;
}

@layer utilities {
  * {
    box-sizing: border-box;
  }
  .opacity-1 {
    opacity: 100%;
  }

  /* Sidebar scroll utilities */
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }
}

@layer base {
  button {
    @apply cursor-pointer;
  }

  hr {
    @apply border-slate-200;
  }
}

.strike-through-price {
  @apply text-red-500 line-through block text-xs font-medium;
}

@keyframes l5 {
  0% {
    box-shadow:
      20px 0 #000,
      -20px 0 #0002;
    background: #000;
  }
  33% {
    box-shadow:
      20px 0 #000,
      -20px 0 #0002;
    background: #0002;
  }
  66% {
    box-shadow:
      20px 0 #0002,
      -20px 0 #000;
    background: #0002;
  }
  100% {
    box-shadow:
      20px 0 #0002,
      -20px 0 #000;
    background: #000;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.rich-editor-content h1 {
  @apply text-2xl font-bold leading-tight mt-6 mb-4;
}

.rich-editor-content h2 {
  @apply text-xl font-bold leading-tight mt-6 mb-4;
}

.rich-editor-content h3 {
  @apply text-lg font-bold leading-tight mt-6 mb-4;
}

.rich-editor-content h4 {
  @apply text-base font-bold leading-tight mt-6 mb-4;
}

.rich-editor-content h5 {
  @apply text-sm font-bold leading-tight mt-6 mb-4;
}

.rich-editor-content h6 {
  @apply text-xs font-bold leading-tight mt-6 mb-4;
}

.rich-editor-content p {
  @apply text-base mb-2;
}

.rich-editor-content ul {
  @apply list-disc list-inside space-y-2 pl-8;
}

.rich-editor-content ol {
  @apply list-decimal list-inside space-y-2 pl-8;
}

.rich-editor-content li {
  @apply text-base;
}

.rich-editor-content a {
  @apply text-primary underline;
}

.rich-editor-content blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic text-gray-600 my-4;
}