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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.no-scroll {
  position: fixed;
  inline-size: 100%;
}

.main-container {
  @apply max-w-[1140px] 2xl:max-w-[1200px] mx-auto xl:px-0 px-4;
}

.swiper-wrapper {
  @apply md:gap-2 gap-1 justify-between;
}

.leaflet-bottom,
.leaflet-control,
.leaflet-pane,
.leaflet-top {
  z-index: 0 !important;
}

.rdrMonth {
  width: 100% !important;
}

.rdrCalendarWrapper {
  width: 100% !important;
  font-size: 16px !important;
}


::-webkit-scrollbar {
  @apply w-2;
}

::-webkit-scrollbar-thumb {
  @apply bg-rose-400 transition-all duration-300 rounded-[25px];
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-rose-500;
}

::-webkit-scrollbar-track {
  @apply bg-rose-100 rounded-[25px];
}

::-webkit-scrollbar-corner {
  @apply rounded-[25px];
}

.hide-scrollbar::-webkit-scrollbar {
  width: 0;
}