@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cairo:wght@300;400;500;600;700&display=swap');

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

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }

  html[lang='ar'] {
    font-family: 'Cairo', system-ui, sans-serif;
  }

  body {
    @apply antialiased text-white min-h-screen;
    /* التدرج اللوني المبهج الذي يشبه موقعك القديم */
    background-image: linear-gradient(135deg, #312e81 0%, #6b21a8 50%, #be185d 100%);
    background-attachment: fixed;
  }

  * {
    @apply border-white/10;
  }
}

@layer components {
  .card {
    /* تأثير الزجاج الشفاف الأنيق للبطاقات والمربعات */
    @apply bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 shadow-xl;
  }

  .card-hover {
    @apply transition-all duration-300 hover:border-white/40 hover:shadow-2xl hover:bg-white/20;
  }

  .btn-primary {
    /* تعديل الزر ليكون بارزاً ومضيئاً على الخلفية الملونة */
    @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl
           bg-white text-purple-900 font-bold
           transition-all duration-300 hover:shadow-lg hover:shadow-white/25
           hover:scale-[1.02] active:scale-[0.98]
           disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl
           bg-black/20 text-white font-medium border border-white/20
           transition-all duration-300 hover:bg-black/40 hover:border-white/40
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg
           text-gray-200 font-medium
           transition-all duration-200 hover:text-white hover:bg-white/10;
  }

  .input-field {
    /* جعل حقول الإدخال شفافة قليلاً لتندمج مع التصميم */
    @apply w-full px-4 py-2.5 rounded-xl
           bg-black/20 border border-white/20 text-white placeholder-gray-300
           transition-all duration-200
           focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/20;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-gradient {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
           bg-white/20 backdrop-blur-md text-white border border-white/30;
  }

  .section-title {
    @apply text-2xl md:text-3xl font-bold text-white;
  }

  .section-subtitle {
    @apply text-gray-200 mt-2;
  }
}

/* Custom scrollbar - ألوان متناسقة مع التدرج */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* RTL adjustments */
[dir='rtl'] .rtl-flip {
  transform: scaleX(-1);
}