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

/* Custom Base Styles */
@layer base {
    /* RTL Support */
    html[dir="rtl"] {
        font-family: 'Tajawal', sans-serif;
    }

    html[dir="rtl"] .font-display {
        font-family: 'Tajawal', sans-serif;
    }

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

    /* Selection color */
    ::selection {
        @apply bg-primary-600 text-white;
    }
}

/* Custom Component Styles */
@layer components {
    /* Navigation Links */
    .nav-link {
        @apply px-4 py-2 text-slate-700 font-medium rounded-lg hover:bg-slate-100 hover:text-primary-600 transition-all duration-200;
    }

    .nav-link-active {
        @apply text-primary-600 bg-primary-50;
    }

    .mobile-nav-link {
        @apply block px-4 py-3 text-slate-700 font-medium rounded-lg hover:bg-slate-100 hover:text-primary-600 transition-colors;
    }

    /* Buttons */
    .btn-primary {
        @apply inline-flex items-center justify-center px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center px-6 py-3 bg-slate-800 text-white font-semibold rounded-lg hover:bg-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 transition-all duration-200;
    }

    .btn-outline {
        @apply inline-flex items-center justify-center px-6 py-3 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg hover:bg-primary-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200;
    }

    .btn-white {
        @apply inline-flex items-center justify-center px-6 py-3 bg-white text-primary-600 font-semibold rounded-lg hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600 transition-all duration-200;
    }

    .btn-outline-white {
        @apply inline-flex items-center justify-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600 transition-all duration-200;
    }

    /* Cards */
    .card {
        @apply bg-white rounded-2xl shadow-lg overflow-hidden;
    }

    .card-hover {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
    }

    /* Form Inputs */
    .form-input {
        @apply w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors;
    }

    .form-label {
        @apply block text-sm font-semibold text-slate-700 mb-2;
    }

    /* Section Headers */
    .section-title {
        @apply text-3xl md:text-4xl font-bold text-slate-900;
    }

    .section-subtitle {
        @apply text-lg text-slate-600 max-w-2xl mx-auto;
    }

    .section-badge {
        @apply inline-block px-4 py-1 bg-primary-100 text-primary-600 text-sm font-semibold rounded-full uppercase tracking-wider;
    }
}

/* RTL Specific Overrides */
@layer utilities {
    /* RTL margin and padding adjustments */
    html[dir="rtl"] .ml-auto {
        margin-left: 0;
        margin-right: auto;
    }

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

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

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

    /* RTL flex direction */
    html[dir="rtl"] .flex-row {
        flex-direction: row-reverse;
    }

    /* RTL specific utilities */
    .rtl\:rotate-180 {
        transform: rotate(0deg);
    }

    html[dir="rtl"] .rtl\:rotate-180 {
        transform: rotate(180deg);
    }

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

    html[dir="rtl"] .bg-gradient-to-l {
        background-image: linear-gradient(to right, var(--tw-gradient-stops));
    }

    /* Position adjustments for RTL */
    html[dir="rtl"] .left-0 {
        left: auto;
        right: 0;
    }

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

    html[dir="rtl"] .left-8 {
        left: auto;
        right: 2rem;
    }

    html[dir="rtl"] .right-8 {
        right: auto;
        left: 2rem;
    }
}

/* Animation Delays */
.animation-delay-100 {
    animation-delay: 100ms;
}

.animation-delay-200 {
    animation-delay: 200ms;
}

.animation-delay-300 {
    animation-delay: 300ms;
}

.animation-delay-400 {
    animation-delay: 400ms;
}

.animation-delay-500 {
    animation-delay: 500ms;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }

    header, footer {
        display: none !important;
    }

    main {
        margin: 0 !important;
        padding: 0 !important;
    }
}