@import "tailwindcss";

 
/* Global styles */
html,
body,
#__next {
  height: 100%;
}
/* CSS Custom Properties for fonts */
:root {
  --font-plex-arabic: var(--font-plex-arabic);
  --font-cairo: var(--font-cairo);
  --font-naskh: var(--font-naskh);
}

body {
  @apply bg-gray-50 text-gray-900 antialiased;
}

.container {
    padding: 0px 0px  !important;
  @apply mx-auto   px-0;
}
.main{
  padding: 0px 0px  !important;
}



/* Custom shimmer animation for skeletons */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.animate-shimmer {
  background: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
  background-size: 200px;
  animation: shimmer 1.5s ease-in-out infinite;
}



/* Ensure smooth scrolling and better performance */
html {
  scroll-behavior: smooth;
}

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}




/* Brands Menu Animations */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out forwards;
}

.animate-slideDown {
  animation: slideDown 0.25s ease-out forwards;
}

/* Smooth accordion transitions */
@media (prefers-reduced-motion: no-preference) {
  .accordion-content {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-fadeIn,
  .animate-slideDown {
    animation: none;
  }
  
  .accordion-content {
    transition: none;
  }
}