@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

@layer utilities {
  .perspective-1000 {
    perspective: 1000px;
  }
  
  .transform-style-3d {
    transform-style: preserve-3d;
  }
  
  .backface-hidden {
    backface-visibility: hidden;
  }
  
  .rotate-y-180 {
    transform: rotateY(180deg);
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

/* Custom Scrollbar Styles */
@layer base {
  /* Webkit browsers (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgb(209, 213, 219); /* gray-300 */
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgb(156, 163, 175); /* gray-400 */
  }

  /* Dark mode scrollbar */
  .dark ::-webkit-scrollbar-thumb {
    background: rgb(75, 85, 99); /* gray-600 */
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    background: rgb(107, 114, 128); /* gray-500 */
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgb(209, 213, 219) transparent;
  }

  .dark * {
    scrollbar-color: rgb(75, 85, 99) transparent;
  }

  /* RTL Support */
  [dir="rtl"] {
    direction: rtl;
    text-align: right;
  }

  [dir="ltr"] {
    direction: ltr;
    text-align: left;
  }

  /* RTL spacing utilities */
  .rtl .ml-auto {
    margin-left: 0;
    margin-right: auto;
  }

  .rtl .mr-auto {
    margin-right: 0;
    margin-left: auto;
  }

  /* RTL flex utilities */
  .rtl .flex-row-reverse {
    flex-direction: row-reverse;
  }
}