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

@layer base {
  html {
    --color-primary: #a37130;
    --color-secondary: #cea768;
    --body-color: #faf9f6;
    --color-main-text: rgba(11, 22, 23, 1);
    --parg-color: #6b665f;
    --color-initial: #ffffff;
    --tabs-background: rgba(233, 234, 245, 0.62);
    --color-third: rgba(233, 234, 245, 1);
    --color-font-text: rgba(155, 157, 161, 1);
    --color-main: #111345;

    /* @import "./themes/theme1/index.css";
    @import "./themes/theme2/index.css";
    @import "./themes/theme3/index.css"; */
  }
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
.filter-shadow {
  box-shadow: 0px 8px 32px 0px #4541351f !important;
}

/* لإخفاء شريط التمرير على جميع المتصفحات */
.scroll-container {
  overflow: auto;
  scrollbar-width: none; /* للمتصفحات مثل Firefox */
  -ms-overflow-style: none; /* للمتصفحات مثل Internet Explorer و Edge */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* للمتصفحات مثل Chrome و Safari */
}

/* remor | separetor form the select in all */

.css-1u9des2-indicatorSeparator {
  display: none !important;
}

/* loader  */

/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 30px;
  aspect-ratio: 1;
  display: grid;
  transform: translateY(100%);
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  transform-origin: bottom;
  position: relative;
}
.loader::before {
  background: radial-gradient(at 30% 30%, #0000, #000a) var(--color-primary);
  transform: scaleY(0.65);
  top: 0;
  animation: l11-1, l11-2;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0, 400, 1, 400), ease;
  animation-iteration-count: infinite;
}
.loader::after {
  background: #ccc;
  filter: blur(8px);
  transform: scaleY(0.3) translate(0px, 0px);
  left: 0;
  animation: l11-3 2s cubic-bezier(0, 400, 1, 400) infinite;
}
@keyframes l11-1 {
  100% {
    top: -0.2px;
  }
}
@keyframes l11-2 {
  4%,
  96% {
    transform: scaleY(1);
  }
}
@keyframes l11-3 {
  100% {
    transform: scaleY(0.3) translate(0.1px, -0.1px);
  }
}

.css-1dyz3mf {
  overflow-x: hidden !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

body {
  overflow-x: hidden !important;
}

.scale_animation {
  /* transform: scale(1.05); */
  transition: all 0.3s;
}
.scale_animation:hover {
  transform: scale(0.98);
  transition: all 0.3s;
}
.scale_animation_developer {
  /* transform: scale(1.05); */
  transition: all 0.3s;
}
.scale_animation_developer:hover {
  transform: scale(0.7);
  transition: all 0.3s;
}

/* ---------------------------------- */

.loader2 {
  animation: opacityPulse 1.5s ease-in-out infinite;
}

@keyframes opacityPulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}