/* Dark Mode Styles for Index Page */

/* Additional Background Colors */
body.dark-mode .bg-amber-50 {
    background: #422006 !important;
}

body.dark-mode .bg-blue-50 {
    background: #1e3a8a !important;
}

body.dark-mode .bg-green-50 {
    background: #14532d !important;
}

body.dark-mode .bg-purple-50 {
    background: #581c87 !important;
}

body.dark-mode .bg-orange-50 {
    background: #7c2d12 !important;
}

body.dark-mode .bg-indigo-50 {
    background: #312e81 !important;
}

/* Modal Styles */
body.dark-mode .login-modal {
    background: #2d2d2d;
    color: #e5e7eb;
}

body.dark-mode .login-modal-header {
    border-bottom-color: #374151;
}

body.dark-mode .login-modal-header h3 {
    color: #e5e7eb;
}

body.dark-mode .login-modal-close {
    color: #9ca3af;
}

body.dark-mode .login-modal-close:hover {
    background: #1a1a1a;
    color: #e5e7eb;
}

/* Form Elements */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #1a1a1a;
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #f59e0b;
    background: #2d2d2d;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #6b7280;
}

/* Buttons */
body.dark-mode .border-amber-600 {
    border-color: #f59e0b !important;
}

body.dark-mode .text-amber-600 {
    color: #f59e0b !important;
}

body.dark-mode .hover\:bg-amber-50:hover {
    background: #422006 !important;
}

/* Dropdowns */
body.dark-mode .user-dropdown-menu,
body.dark-mode .user-dropdown-content {
    background: #2d2d2d;
    border-color: #374151;
}

body.dark-mode .dropdown-item {
    color: #e5e7eb;
}

body.dark-mode .dropdown-item:hover {
    background: #1a1a1a;
}

body.dark-mode .dropdown-divider {
    border-color: #374151;
}

/* Hero Section */
body.dark-mode .hero-gradient {
    filter: brightness(0.7);
}

/* Cards and Containers */
body.dark-mode .bg-gray-50 {
    background: #2d2d2d !important;
}

body.dark-mode .bg-gray-100 {
    background: #374151 !important;
}

body.dark-mode .border-gray-200 {
    border-color: #374151 !important;
}

body.dark-mode .border-gray-300 {
    border-color: #4b5563 !important;
}

/* Text Colors */
body.dark-mode .text-gray-500 {
    color: #9ca3af !important;
}

body.dark-mode .text-gray-400 {
    color: #9ca3af !important;
}

/* Links */
body.dark-mode a:not(.btn):not(.button) {
    color: #93c5fd;
}

body.dark-mode a:not(.btn):not(.button):hover {
    color: #60a5fa;
}

/* FAQs and Modals */
body.dark-mode .faq-item {
    background: #2d2d2d;
    border-color: #374151;
}

body.dark-mode .faq-question {
    color: #e5e7eb;
}

body.dark-mode .faq-answer {
    background: #1a1a1a;
    border-color: #374151;
    color: #d1d5db;
}

/* Profile Modal */
body.dark-mode #profileModal .bg-white {
    background: #2d2d2d !important;
}

body.dark-mode #profileModal h3 {
    color: #e5e7eb;
}

body.dark-mode #profileModal label {
    color: #d1d5db;
}

/* Favorites Modal */
body.dark-mode #favoritesModal {
    background: rgba(0, 0, 0, 0.8);
}

body.dark-mode #favoritesModal .bg-white {
    background: #2d2d2d !important;
}

/* User Avatar */
body.dark-mode .user-avatar {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Navigation */
body.dark-mode nav {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(10px);
}

body.dark-mode .mobile-menu-transition {
    background: #2d2d2d;
}

/* Smooth Transitions */
body.dark-mode * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode button,
body.dark-mode a,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    transition: all 0.3s ease;
}