@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  }
  
  [dir="rtl"] {
    font-family: 'Noto Sans Arabic', Arial, sans-serif;
  }
  
  body {
    @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-gold-500 hover:bg-gold-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .btn-outline {
    @apply border border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
  }
  
  .nav-link {
    @apply text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors duration-200;
  }
  
  .nav-link-active {
    @apply text-primary-600 dark:text-primary-400 font-semibold;
  }
  
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700;
  }
  
  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
  }
  
  .dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50;
  }
  
  .dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150;
  }
  
  .mobile-menu {
    @apply md:hidden fixed inset-0 bg-black bg-opacity-50;
    z-index: 9999;
  }
  
  .mobile-menu-content {
    @apply bg-white dark:bg-gray-800 h-full w-64 shadow-lg transform transition-transform duration-300 ease-in-out;
    z-index: 10000;
  }
  
  /* Mobile menu positioning and structure */
  #mobile-menu {
    z-index: 2147483647 !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  
  /* Mobile menu backdrop */
  #mobile-menu > div:first-child {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 2147483646 !important;
  }
  
  /* Mobile menu panel */
  #mobile-menu > div:last-child {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    width: 320px !important;
    max-width: calc(100vw - 2rem) !important;
    overflow-y: auto !important;
    z-index: 2147483647 !important;
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.3) !important;
    background: rgb(255, 255, 255) !important;
  }
  
  .dark #mobile-menu > div:last-child {
    background: rgb(17, 24, 39) !important;
  }
  
  [dir="rtl"] #mobile-menu > div:last-child {
    right: auto !important;
    left: 0 !important;
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Mobile menu text styling */
  #mobile-menu a,
  #mobile-menu button,
  #mobile-menu span,
  #mobile-menu p {
    color: rgb(55, 65, 81) !important;
  }
  
  .dark #mobile-menu a,
  .dark #mobile-menu button,
  .dark #mobile-menu span,
  .dark #mobile-menu p {
    color: rgb(229, 231, 235) !important;
  }
  
  /* Mobile menu section headers */
  #mobile-menu .text-xs.font-semibold {
    color: rgb(107, 114, 128) !important;
  }
  
  .dark #mobile-menu .text-xs.font-semibold {
    color: rgb(156, 163, 175) !important;
  }
  
  /* Mobile menu special buttons */
  #mobile-menu #close-mobile-menu,
  #mobile-menu a[href*="lang"]:not(.bg-primary-100),
  #mobile-menu button[onclick="toggleTheme()"] {
    color: rgb(107, 114, 128) !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
  }
  
  .dark #mobile-menu #close-mobile-menu,
  .dark #mobile-menu a[href*="lang"]:not(.bg-primary-100),
  .dark #mobile-menu button[onclick="toggleTheme()"] {
    color: rgb(156, 163, 175) !important;
  }
  
  /* Special button hover states */
  #mobile-menu #close-mobile-menu:hover,
  #mobile-menu a[href*="lang"]:not(.bg-primary-100):hover {
    color: rgb(55, 65, 81) !important;
    background: rgb(243, 244, 246) !important;
  }
  
  .dark #mobile-menu #close-mobile-menu:hover,
  .dark #mobile-menu a[href*="lang"]:not(.bg-primary-100):hover {
    color: rgb(229, 231, 235) !important;
    background: rgb(55, 65, 81) !important;
  }
  
  /* Theme button specific styling */
  #mobile-menu button[onclick="toggleTheme()"] {
    color: rgb(75, 85, 99) !important;
    background: rgb(243, 244, 246) !important;
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
  }
  
  .dark #mobile-menu button[onclick="toggleTheme()"] {
    color: rgb(209, 213, 219) !important;
    background: rgb(55, 65, 81) !important;
  }
  
  #mobile-menu button[onclick="toggleTheme()"]:hover {
    color: rgb(79, 70, 229) !important;
    background: rgb(238, 242, 255) !important;
  }
  
  .dark #mobile-menu button[onclick="toggleTheme()"]:hover {
    color: rgb(147, 197, 253) !important;
    background: rgba(79, 70, 229, 0.2) !important;
  }
  
  /* Active language button */
  #mobile-menu a[href*="lang"].bg-primary-100 {
    color: rgb(79, 70, 229) !important;
    background: rgb(238, 242, 255) !important;
  }
  
  .dark #mobile-menu a[href*="lang"].bg-primary-100 {
    color: rgb(147, 197, 253) !important;
    background: rgba(79, 70, 229, 0.3) !important;
  }
  
  /* Language button sizing */
  #mobile-menu a[href*="lang"] {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
  }
  
  /* Mobile menu visibility */
  #mobile-menu:not(.translate-x-full) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  #mobile-menu:not(.translate-x-full) > div:last-child {
    transform: translateX(0) !important;
  }
  
  /* Hero Slider Animations */
  .hero-slide {
    transition: opacity 1s ease-in-out;
  }
  
  .hero-slide.active {
    opacity: 1;
  }
  
  /* Fade in up animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
  }
  
  .animate-fade-in-up.delay-200 {
    animation-delay: 0.2s;
  }
  
  .animate-fade-in-up.delay-300 {
    animation-delay: 0.3s;
  }
  
  .animate-fade-in-up.delay-400 {
    animation-delay: 0.4s;
  }
  
  .animate-fade-in-up.delay-500 {
    animation-delay: 0.5s;
  }
  
  /* Slide indicators */
  .slide-indicator {
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .slide-indicator:hover {
    transform: scale(1.2);
  }
  
  .slide-indicator.active {
    transform: scale(1.3);
  }
  
  /* Brands Slider Animation */
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  .animate-scroll {
    animation: scroll 30s linear infinite;
  }
  
  .animate-scroll:hover {
    animation-play-state: paused;
  }
  
  .brands-slider {
    width: calc(200% + 96px); /* Double width for seamless loop + gap compensation */
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.10);
  }
  
  .glass-effect {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
  
  .dark .glass-effect {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
}