/* Dark Mode Specific Styles */

body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .navbar {
    background-color: #2d2d2d;
    border-bottom: 1px solid #444;
}

body.dark-mode .logo {
    color: #64b5f6;
}

body.dark-mode .nav-links a {
    color: #e0e0e0;
}

body.dark-mode .nav-links a:hover {
    color: #64b5f6;
}

body.dark-mode .theme-btn {
    background-color: #444;
    border-color: #555;
    color: #e0e0e0;
}

body.dark-mode .theme-btn:hover {
    background-color: #555;
}

body.dark-mode .header {
    background: linear-gradient(135deg, #1e3a8a, #1e40af);
}

body.dark-mode textarea {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #444;
}

body.dark-mode textarea::placeholder {
    color: #888;
}

body.dark-mode textarea:focus {
    border-color: #64b5f6;
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.25);
}

body.dark-mode .button-group .btn-secondary {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #555;
}

body.dark-mode .button-group .btn-secondary:hover {
    background-color: #4a4a4a;
    border-color: #666;
    color: #fff;
}

body.dark-mode .error-container {
    background-color: #3d1f1f;
    border-color: #5a2929;
    color: #f8d7da;
}

body.dark-mode .feature-card {
    background-color: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .feature-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

body.dark-mode .feature-card p {
    color: #aaa;
}

body.dark-mode .blog-card {
    background-color: #2d2d2d;
}

body.dark-mode .blog-card p {
    color: #aaa;
}

body.dark-mode .blog-card a {
    color: #64b5f6;
}

body.dark-mode .blog-card a:hover {
    color: #90caf9;
}

body.dark-mode .ad-space {
    background-color: #2d2d2d;
    border: 1px dashed #444;
}

body.dark-mode .footer {
    background-color: #1a1a1a;
    border-top: 1px solid #444;
}

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

textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn,
.nav-links a {
    transition: all 0.3s ease;
}