/* ===== DARK MODE STYLES ===== */
/* Prevent flash of white on page load */
.dark-mode-preload {
    background-color: #121212;
    color: #e0e0e0;
}

/* Prevent white flash during page transitions */
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
    transition: all 0s !important;
    -webkit-transition: all 0s !important;
    -moz-transition: all 0s !important;
    -ms-transition: all 0s !important;
    -o-transition: all 0s !important;
}

:root {
    --transition-mode: all 0.3s ease;
}

body.dark-mode {
    --primary-color: #8c7dff;
    --secondary-color: #ff4081;
    --dark-color: #f5f5f5;
    --light-color: #121212;
    --gray-color: #1e1e1e;
    --text-color: #e0e0e0;
    --text-light: #9e9e9e;
    --border-color: #333333;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.dark-mode-toggle {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 1001;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--light-color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition-mode);
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}

.dark-mode-toggle i {
    font-size: 1.8rem;
    transition: var(--transition-mode);
}

/* Adjust specific elements for dark mode */
.dark-mode .navbar.scrolled {
    background-color: var(--gray-color);
}

.dark-mode .featured-card,
.dark-mode .service-card,
.dark-mode .testimonial-card,
.dark-mode .contact-form-container,
.dark-mode .link-card,
.dark-mode .faq-item {
    background-color: var(--gray-color);
}

.dark-mode .featured {
    background-color: #121212;
}

.dark-mode .services,
.dark-mode .links-hero,
.dark-mode .about-hero,
.dark-mode .contact-hero,
.dark-mode .faq-section {
    background-color: #0a0a0a;
}

.dark-mode .footer {
    background-color: #050505;
}

.dark-mode .footer h4,
.dark-mode .footer .logo-text,
.dark-mode .footer-bottom p,
.dark-mode .footer-description {
    color: var(--text-color) !important;
}

.dark-mode .footer-links a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dark-mode .footer-links a:hover {
    color: var(--primary-color) !important;
}

/* Fix for footer text in dark mode */
.dark-mode .footer * {
    color: var(--text-color) !important;
}

.dark-mode .social-icon {
    color: var(--text-color) !important;
}

.dark-mode .filter-tag {
    background-color: var(--gray-color);
    border-color: #333;
}

.dark-mode .filter-tag:hover,
.dark-mode .filter-tag.active {
    background-color: var(--primary-color);
    color: #121212;
}

.dark-mode .link-tag {
    background-color: rgba(140, 125, 255, 0.2);
}

.dark-mode .form-group input,
.dark-mode .form-group textarea {
    background-color: #1a1a1a;
    border-color: #333;
    color: var(--text-color);
}

.dark-mode .form-group input:focus,
.dark-mode .form-group textarea:focus {
    border-color: var(--primary-color);
}

.dark-mode .skill-bar {
    background-color: #333;
}

.dark-mode .dot {
    background-color: #444;
}

.dark-mode .testimonial-prev,
.dark-mode .testimonial-next {
    background-color: var(--gray-color);
}

.dark-mode .btn-secondary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.dark-mode .btn-secondary:hover {
    color: var(--light-color);
}

/* Adjust animations for dark mode */
.dark-mode .cursor-follower {
    border-color: var(--primary-color);
}

.dark-mode .highlight::after {
    background-color: rgba(140, 125, 255, 0.3);
}

/* Smooth transition for all elements when switching modes */
body, 
.navbar, 
.featured-card, 
.service-card, 
.testimonial-card, 
.contact-form-container, 
.link-card, 
.faq-item,
.featured,
.services,
.links-hero,
.about-hero,
.contact-hero,
.faq-section,
.footer,
.filter-tag,
.form-group input,
.form-group textarea,
.skill-bar,
.dot,
.testimonial-prev,
.testimonial-next,
.btn-secondary,
.highlight::after,
.cursor-follower,
.link-tag,
h1, h2, h3, h4, h5, h6,
p, a, span, li {
    transition: var(--transition-mode);
}