/**
 * Dark Mode Styles for Secret The World
 * Toggle with data-theme="dark" on html element
 */

/* Dark mode CSS variables */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-heading: #ffffff;
    
    --primary-color: #2ecc71;
    --primary-hover: #27ae60;
    --primary-light: rgba(46, 204, 113, 0.15);
    
    --secondary-color: #e76f51;
    --accent-color: #3498db;
    
    --border-color: #334155;
    --border-light: #475569;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    --gradient-primary: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --gradient-card: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --gradient-hero: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
}

/* Base dark mode styles */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Header/Navigation */
[data-theme="dark"] .main-header,
[data-theme="dark"] header,
[data-theme="dark"] .main-navbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .nav-link,
[data-theme="dark"] .navbar-center a {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active,
[data-theme="dark"] .navbar-center a:hover,
[data-theme="dark"] .navbar-center a.active {
    background: var(--primary-light);
    color: var(--primary-color);
}

[data-theme="dark"] .dropdown-menu {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--primary-color);
}

[data-theme="dark"] .navbar-search {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .navbar-search input {
    color: var(--text-primary);
}

[data-theme="dark"] .navbar-search input::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .logo a {
    color: var(--text-heading);
}

/* Hero Section */
[data-theme="dark"] .hero {
    background: var(--gradient-hero);
}

[data-theme="dark"] .hero-content {
    background: rgba(15, 23, 42, 0.8);
}

[data-theme="dark"] .stat-item {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid var(--border-color);
}

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .feature-item,
[data-theme="dark"] .blog-post,
[data-theme="dark"] .testimonial,
[data-theme="dark"] .category-item,
[data-theme="dark"] .tip-category,
[data-theme="dark"] .gallery-item,
[data-theme="dark"] .faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .feature-item:hover,
[data-theme="dark"] .blog-post:hover,
[data-theme="dark"] .category-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .card-content h3,
[data-theme="dark"] .feature-item h3,
[data-theme="dark"] .blog-post h3,
[data-theme="dark"] .category-item h3 {
    color: var(--text-heading);
}

[data-theme="dark"] .card-content p,
[data-theme="dark"] .feature-item p,
[data-theme="dark"] .blog-post p,
[data-theme="dark"] .category-item p {
    color: var(--text-secondary);
}

[data-theme="dark"] .card-meta {
    color: var(--text-muted);
}

/* Section titles */
[data-theme="dark"] .section-title {
    color: var(--text-heading);
}

[data-theme="dark"] .section-subtitle {
    color: var(--text-muted);
}

/* Sections with backgrounds */
[data-theme="dark"] .interactive-map,
[data-theme="dark"] .timeline-section {
    background: var(--gradient-card);
}

[data-theme="dark"] .categories {
    background: var(--bg-secondary);
}

/* Timeline */
[data-theme="dark"] .timeline::before {
    background: linear-gradient(180deg, var(--primary-color), var(--primary-hover), var(--primary-color));
}

[data-theme="dark"] .timeline-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .timeline-story-content {
    background: var(--bg-card);
}

[data-theme="dark"] .timeline-author {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .timeline-title,
[data-theme="dark"] .author-info h4 {
    color: var(--text-heading);
}

[data-theme="dark"] .timeline-quote p,
[data-theme="dark"] .author-info p {
    color: var(--text-secondary);
}

[data-theme="dark"] .tag {
    background: var(--primary-light);
    color: var(--primary-color);
}

/* Newsletter */
[data-theme="dark"] .newsletter-content {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e3a5f 100%);
}

/* Footer */
[data-theme="dark"] .main-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .footer-section h3 {
    color: var(--primary-color);
}

[data-theme="dark"] .footer-section p,
[data-theme="dark"] .footer-section li,
[data-theme="dark"] .footer-section a {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer-bottom {
    border-top-color: var(--border-color);
    color: var(--text-muted);
}

[data-theme="dark"] .social-links a {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .social-links a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-primary);
}

/* Buttons */
[data-theme="dark"] .btn {
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--text-secondary);
    color: var(--bg-primary);
}

[data-theme="dark"] .btn-small {
    background: var(--bg-tertiary);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

[data-theme="dark"] .btn-small:hover {
    background: var(--primary-color);
    color: var(--bg-primary);
}

/* FAQ */
[data-theme="dark"] .faq-question {
    color: var(--primary-color);
    background: transparent;
}

[data-theme="dark"] .faq-item.active .faq-question {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .faq-answer {
    color: var(--text-secondary);
}

/* Gallery overlay */
[data-theme="dark"] .gallery-overlay {
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.95) 60%, rgba(15, 23, 42, 0.1) 100%);
}

/* Testimonials */
[data-theme="dark"] .testimonial p {
    color: var(--text-secondary);
}

[data-theme="dark"] .quote {
    color: var(--primary-color);
}

/* Tips */
[data-theme="dark"] .tips-list {
    color: var(--text-secondary);
}

/* Notifications */
[data-theme="dark"] .notification {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Forms */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Map */
[data-theme="dark"] #world-map {
    background: var(--bg-tertiary);
}

/* Modal */
[data-theme="dark"] .explore-modal {
    background: rgba(15, 23, 42, 0.8);
}

[data-theme="dark"] .explore-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .explore-modal-content h2 {
    color: var(--text-heading);
}

[data-theme="dark"] .explore-modal-content p {
    color: var(--text-secondary);
}

/* Tooltip */
[data-theme="dark"] .tooltip {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Dark mode toggle button styling */
.theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(46, 204, 113, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(46, 204, 113, 0.4);
}

.theme-toggle i {
    font-size: 1.4rem;
    color: white;
    transition: transform 0.3s ease;
}

[data-theme="dark"] .theme-toggle {
    background: var(--bg-tertiary);
    border: 2px solid var(--primary-color);
}

[data-theme="dark"] .theme-toggle i {
    color: var(--primary-color);
}

.theme-toggle:active i {
    transform: rotate(360deg);
}

/* Print styles - force light mode */
@media print {
    [data-theme="dark"] {
        --bg-primary: #ffffff;
        --bg-secondary: #f8f9fa;
        --text-primary: #333333;
        --text-secondary: #666666;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-toggle i,
    [data-theme="dark"] * {
        transition: none !important;
    }
}