/* Neo Blue Shop Dark Mode Styles */

/* Dark mode base colors */
.dark {
    --primary-blue: #3b82f6;
    --primary-blue-light: #60a5fa;
    --primary-blue-dark: #1e40af;
    --secondary-orange: #fb923c;
    --secondary-red: #f87171;
    --neutral-dark: #f8fafc;
    --neutral-light: #1f2937;
    --neutral-gray: #9ca3af;
    --white: #1f2937;
    --black: #ffffff;
}

/* Dark mode header */
.dark .neo-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-bottom-color: #475569;
}

/* Dark mode search box */
.dark .neo-search-box {
    background: #374151;
    border-color: #475569;
    color: #f9fafb;
}

.dark .neo-search-box::placeholder {
    color: #9ca3af;
}

/* Dark mode mega menu */
.dark .neo-mega-menu {
    background: #1f2937;
    border-color: #475569;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.dark .neo-mega-menu .category-item:hover {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

/* Dark mode product cards */
.dark .neo-product-card {
    background: #1f2937;
    border-color: #475569;
    color: #f9fafb;
}

.dark .neo-product-card:hover {
    border-color: #fb923c;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.dark .neo-product-card .quick-actions {
    background: rgba(31, 41, 55, 0.95);
}

/* Dark mode buttons */
.dark .neo-btn-primary {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

.dark .neo-btn-secondary {
    background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
}

/* Dark mode slider controls */
.dark .neo-slider-btn {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

.dark .neo-slider-btn:hover {
    background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
}

.dark .neo-slider-pagination .swiper-pagination-bullet {
    background: #475569;
}

.dark .neo-slider-pagination .swiper-pagination-bullet-active {
    background: #fb923c;
}

/* Dark mode footer */
.dark .neo-footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

.dark .neo-footer .social-link {
    background: rgba(71, 85, 105, 0.3);
}

.dark .neo-footer .social-link:hover {
    background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
}

/* Dark mode navigation */
.dark .neo-nav-link {
    color: #f9fafb;
}

.dark .neo-nav-link:hover {
    color: #fb923c;
}

/* Dark mode category cards */
.dark .neo-category-card {
    background: #1f2937;
    border-color: #475569;
}

.dark .neo-category-card:hover {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border-color: #fb923c;
}

/* Dark mode feature cards */
.dark .neo-feature-card {
    background: #1f2937;
    border-color: #475569;
}

.dark .neo-feature-card:hover {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border-color: #fb923c;
}

/* Dark mode article cards */
.dark .neo-article-card {
    background: #1f2937;
    border-color: #475569;
}

.dark .neo-article-card:hover {
    border-color: #fb923c;
}

/* Dark mode text colors */
.dark .text-gray-900 {
    color: #f9fafb !important;
}

.dark .text-gray-800 {
    color: #f3f4f6 !important;
}

.dark .text-gray-700 {
    color: #e5e7eb !important;
}

.dark .text-gray-600 {
    color: #d1d5db !important;
}

.dark .text-gray-500 {
    color: #9ca3af !important;
}

.dark .text-gray-400 {
    color: #6b7280 !important;
}

.dark .text-gray-300 {
    color: #4b5563 !important;
}

/* Dark mode background colors */
.dark .bg-white {
    background-color: #1f2937 !important;
}

.dark .bg-gray-50 {
    background-color: #111827 !important;
}

.dark .bg-gray-100 {
    background-color: #1f2937 !important;
}

.dark .bg-gray-200 {
    background-color: #374151 !important;
}

.dark .bg-gray-300 {
    background-color: #4b5563 !important;
}

.dark .bg-gray-400 {
    background-color: #6b7280 !important;
}

.dark .bg-gray-500 {
    background-color: #9ca3af !important;
}

.dark .bg-gray-600 {
    background-color: #d1d5db !important;
}

.dark .bg-gray-700 {
    background-color: #e5e7eb !important;
}

.dark .bg-gray-800 {
    background-color: #f3f4f6 !important;
}

.dark .bg-gray-900 {
    background-color: #f9fafb !important;
}

/* Dark mode border colors */
.dark .border-gray-100 {
    border-color: #374151 !important;
}

.dark .border-gray-200 {
    border-color: #4b5563 !important;
}

.dark .border-gray-300 {
    border-color: #6b7280 !important;
}

.dark .border-gray-400 {
    border-color: #9ca3af !important;
}

.dark .border-gray-500 {
    border-color: #d1d5db !important;
}

.dark .border-gray-600 {
    border-color: #e5e7eb !important;
}

.dark .border-gray-700 {
    border-color: #f3f4f6 !important;
}

.dark .border-gray-800 {
    border-color: #f9fafb !important;
}

/* Dark mode hover effects */
.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #4b5563 !important;
}

.dark .hover\:bg-gray-300:hover {
    background-color: #6b7280 !important;
}

.dark .hover\:bg-gray-400:hover {
    background-color: #9ca3af !important;
}

.dark .hover\:bg-gray-500:hover {
    background-color: #d1d5db !important;
}

.dark .hover\:bg-gray-600:hover {
    background-color: #e5e7eb !important;
}

.dark .hover\:bg-gray-700:hover {
    background-color: #f3f4f6 !important;
}

.dark .hover\:bg-gray-800:hover {
    background-color: #f9fafb !important;
}

/* Dark mode shadow effects */
.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important;
}

.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.5) !important;
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5) !important;
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.5) !important;
}

.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Dark mode focus states */
.dark .focus\:ring-blue-500:focus {
    --tw-ring-color: #3b82f6 !important;
}

.dark .focus\:ring-orange-500:focus {
    --tw-ring-color: #fb923c !important;
}

.dark .focus\:border-blue-500:focus {
    border-color: #3b82f6 !important;
}

.dark .focus\:border-orange-500:focus {
    border-color: #fb923c !important;
}

/* Dark mode form elements */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark textarea,
.dark select {
    background-color: #374151 !important;
    border-color: #475569 !important;
    color: #f9fafb !important;
}

.dark input[type="text"]::placeholder,
.dark input[type="email"]::placeholder,
.dark input[type="password"]::placeholder,
.dark input[type="search"]::placeholder,
.dark textarea::placeholder {
    color: #9ca3af !important;
}

/* Dark mode dropdown menus */
.dark .dropdown-menu {
    background-color: #1f2937 !important;
    border-color: #475569 !important;
}

.dark .dropdown-item {
    color: #f9fafb !important;
}

.dark .dropdown-item:hover {
    background-color: #374151 !important;
    color: #fb923c !important;
}

/* Dark mode modal and overlay */
.dark .modal-content {
    background-color: #1f2937 !important;
    border-color: #475569 !important;
}

.dark .modal-header {
    border-bottom-color: #475569 !important;
}

.dark .modal-footer {
    border-top-color: #475569 !important;
}

/* Dark mode tooltips */
.dark .tooltip-inner {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
}

.dark .tooltip-arrow::before {
    border-top-color: #1f2937 !important;
}

/* Dark mode alerts */
.dark .alert-success {
    background-color: #065f46 !important;
    border-color: #047857 !important;
    color: #d1fae5 !important;
}

.dark .alert-info {
    background-color: #1e40af !important;
    border-color: #3b82f6 !important;
    color: #dbeafe !important;
}

.dark .alert-warning {
    background-color: #92400e !important;
    border-color: #f59e0b !important;
    color: #fef3c7 !important;
}

.dark .alert-danger {
    background-color: #991b1b !important;
    border-color: #dc2626 !important;
    color: #fee2e2 !important;
}

/* Dark mode badges */
.dark .badge-primary {
    background-color: #1e40af !important;
    color: #dbeafe !important;
}

.dark .badge-secondary {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

.dark .badge-success {
    background-color: #065f46 !important;
    color: #d1fae5 !important;
}

.dark .badge-danger {
    background-color: #991b1b !important;
    color: #fee2e2 !important;
}

.dark .badge-warning {
    background-color: #92400e !important;
    color: #fef3c7 !important;
}

.dark .badge-info {
    background-color: #1e40af !important;
    color: #dbeafe !important;
}

/* Dark mode tables */
.dark .table {
    color: #f9fafb !important;
}

.dark .table th {
    background-color: #374151 !important;
    border-color: #475569 !important;
}

.dark .table td {
    border-color: #475569 !important;
}

.dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: #374151 !important;
}

.dark .table-hover tbody tr:hover {
    background-color: #4b5563 !important;
}

/* Dark mode pagination */
.dark .pagination .page-link {
    background-color: #1f2937 !important;
    border-color: #475569 !important;
    color: #f9fafb !important;
}

.dark .pagination .page-link:hover {
    background-color: #374151 !important;
    border-color: #6b7280 !important;
}

.dark .pagination .page-item.active .page-link {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.dark .pagination .page-item.disabled .page-link {
    background-color: #374151 !important;
    border-color: #475569 !important;
    color: #6b7280 !important;
}
