body {
    font-family: "Tajawal", sans-serif;
    background: #f7f7f7;
}

html {
    font-family: "Tajawal", sans-serif;
}

.dark {
    color-scheme: dark;
}

.dark body {
    @apply bg-gray-900 text-gray-100;
}

.dark .bg-white {
    @apply bg-gray-800;
}

.dark .text-gray-900 {
    @apply text-gray-100;
}

.dark .text-gray-600 {
    @apply text-gray-400;
}

.dark .border-gray-300 {
    @apply border-gray-700;
}

.dark .bg-gray-50 {
    @apply bg-gray-700;
}

/* تخصيص الألوان */
:root {
    --color-primary: #059669;
    --color-secondary: #065f46;
}

.rtl {
    direction: rtl;
}

@layer components {
    .pagination-item {
        @apply relative inline-flex items-center px-3 py-1 text-sm font-medium rounded-full transition-colors;
    }

    .pagination-item-active {
        @apply text-white bg-emerald-600;
    }

    .pagination-item-inactive {
        @apply text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-emerald-50 dark:hover:bg-gray-700;
    }

    .pagination-nav {
        @apply relative inline-flex items-center p-2 text-sm font-medium rounded-full transition-colors;
    }

    .pagination-nav-active {
        @apply text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-emerald-50 dark:hover:bg-gray-700;
    }

    .pagination-nav-disabled {
        @apply text-gray-400 bg-white dark:bg-gray-800 cursor-not-allowed;
    }
}

.surah-card {
    transition: all 0.3s ease-in-out;
}

.surah-card[style*="display: none"] {
    opacity: 0;
    transform: translateY(10px);
}

.search-input:focus {
    @apply ring-2 ring-emerald-500 border-emerald-500;
}

.search-input::placeholder {
    @apply text-gray-400;
}


@media (max-width: 768px) {

    .account-menu,
    .language-menu {
        display: none;
    }

}