/* static/css/style.css - GLOBAL STYLES */

/* Animation Classes */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.slide-up {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.8s ease-out forwards;
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-30px);
  animation: slideInLeft 0.8s ease-out forwards;
}

.slide-in-right {
  opacity: 0;
  transform: translateX(30px);
  animation: slideInRight 0.8s ease-out forwards;
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
  animation: scaleIn 0.6s ease-out forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  to { opacity: 1; transform: scale(1); }
}

/* Smooth transitions for interactive elements */
* {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Enhanced hover effects */
.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-glow:hover {
  box-shadow: 0 10px 25px rgba(30, 58, 138, 0.15);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Header animation on scroll */
.header-scrolled {
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Progress bar for scroll */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #1e3a8a, #b8860b);
  z-index: 9999;
  transition: width 0.1s ease;
}

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

/* Fix for flexbox spacing in RTL */
[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

[dir="rtl"] .xl\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

/* Text alignment for RTL */
[dir="rtl"] .text-right {
  text-align: right;
}

[dir="rtl"] .text-left {
  text-align: left;
}

[dir="rtl"] .text-center {
  text-align: center;
}

/* Margin and padding adjustments for RTL */
[dir="rtl"] .ml-auto {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .mr-auto {
  margin-right: 0;
  margin-left: auto;
}

[dir="rtl"] .ml-4 {
  margin-left: 0;
  margin-right: 1rem;
}

[dir="rtl"] .mr-4 {
  margin-right: 0;
  margin-left: 1rem;
}

[dir="rtl"] .pl-4 {
  padding-left: 0;
  padding-right: 1rem;
}

[dir="rtl"] .pr-4 {
  padding-right: 0;
  padding-left: 1rem;
}

/* Border adjustments for RTL */
[dir="rtl"] .border-l {
  border-left: 0;
  border-right-width: 1px;
}

[dir="rtl"] .border-r {
  border-right: 0;
  border-left-width: 1px;
}

/* Mobile menu specific RTL fixes */
[dir="rtl"] .mobile-menu-slide {
  left: 0;
  right: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 0;
}

/* Ensure proper font rendering for Arabic */
[dir="rtl"] body {
  font-family: 'Cairo', sans-serif;
  text-align: right;
}

/* Fix for gradient directions in RTL */
[dir="rtl"] .bg-gradient-to-r {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

/* Logo and branding alignment */
[dir="rtl"] .logo-container {
  flex-direction: row-reverse;
}

/* Navigation items in RTL */
[dir="rtl"] .nav-item {
  text-align: right;
}

/* Language switcher in RTL */
[dir="rtl"] .language-switcher {
  flex-direction: row-reverse;
}

/* Mobile menu button alignment */
[dir="rtl"] .mobile-menu-button {
  margin-left: 0;
  margin-right: 20rem;
}

/* FIX: Override the problematic flex rule */