html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Almarai", system-ui, sans-serif;
}

html,
body,
:root,
#__nuxt {
  height: 100%;
}

::selection {
  background-color: var(--accent);
  color: var(--primary);
}

/* Ws scrollbar styling */
.ws-scrollbar {
  /* For WebKit browsers (Chrome, Safari, Edge) */
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}

.ws-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ws-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.ws-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(155, 155, 155, 0.5);
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
}

.ws-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 155, 155, 0.8);
}

/* Dark mode scrollbar */
.dark .ws-scrollbar {
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.dark .ws-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

.dark .ws-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Hide scrollbar arrows for a cleaner look */
.ws-scrollbar::-webkit-scrollbar-button {
  display: none;
}

/* Remove default scrollbar corner */
.ws-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* Smooth scrolling behavior */
.ws-scrollbar {
  scroll-behavior: smooth;
}

/* Additional modern touch - fade in/out effect */
.ws-scrollbar::-webkit-scrollbar-thumb {
  opacity: 0.6;
}

.ws-scrollbar:hover::-webkit-scrollbar-thumb {
  opacity: 1;
}

/* Hide scrollbar completely */
.ws-no-scrollbar {
  /* For WebKit browsers (Chrome, Safari, Edge) */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
}

.ws-no-scrollbar::-webkit-scrollbar {
  display: none;
  /* WebKit */
}

/* For Firefox */
@supports (scrollbar-width: thin) {
  .ws-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
  }

  .dark .ws-scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  }
}

/* Ws gradient border utilities - reusable across components */
.ws-gradient-border,
.ws-gradient-border-on-active[data-state="active"] {
  position: relative;
  border-radius: var(--ws-rounded, 0.375rem);
  border: 1px solid transparent;
  background-clip: padding-box;

  /* Create gradient border using background layers */
  background-image:
    var(--surface-background-gradient), var(--btn-border-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* Ensure proper isolation for stacking context */
  isolation: isolate;
}

.ws-gradient-border-animated {
  border-radius: var(--ws-rounded, 0.375rem);
  border: 2px solid transparent;

  background-image:
    var(--surface-background-gradient), var(--btn-border-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size:
    100% 100%,
    300% 300%;
  animation: ws-border-animate 2s ease infinite;
  transition: 0.3s ease-in-out;
  isolation: isolate;
}

@keyframes ws-border-animate {
  0% {
    background-position:
      0% 0%,
      0% 50%;
  }
  50% {
    background-position:
      0% 0%,
      100% 50%;
  }
  100% {
    background-position:
      0% 0%,
      0% 50%;
  }
}
/* Select Menu  */
.ws-my-rtl-select {
  direction: rtl !important;
  text-align: right !important;
}

.toaster li::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 6px !important; /* Force width to stay 6px */
  height: 100% !important;
  background-color: rgba(225, 14, 14, 1);
  border-start-start-radius: 0.5rem;
  border-end-start-radius: 0.5rem;
}
.toaster li [data-description] {
  color: white !important;
  font-size: 14px !important;
}
.toaster li [data-icon] {
  color: rgba(225, 14, 14, 1);
}
/* Enhanced support for high-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ws-gradient-border,
  .ws-gradient-border-on-active[data-state="active"] {
    border-width: 0.5px;
  }
}

/* Responsive scaling for larger screens */
@media (min-width: 1200px) {
  .ws-gradient-border,
  .ws-gradient-border-on-active[data-state="active"] {
    border-width: max(1px, 0.0625rem);
  }
}

/* Fallback for older browsers */
@supports not (background-clip: padding-box) {
  .ws-gradient-border,
  .ws-gradient-border-on-active[data-state="active"] {
    position: relative;
    background: var(--btn-border-gradient);
    border: none;
  }

  .ws-gradient-border::before,
  .ws-gradient-border-on-active[data-state="active"]::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--ws-rounded, 0.375rem) - 1px);
    background: var(--surface-background-gradient);
    z-index: -1;
  }
}

/* Loader */
.animate-spin-loader {
  animation: spin 1s linear infinite;
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary);
}

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

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