/* 
 * Dark Mode Styles for CallAfix Website
 * Enhanced with smooth transitions and better contrasts
 */

/* Global transition for all elements when switching modes */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark Mode Variables */
body.dark-mode {
    --primary-color: #c562c5; /* Brighter Purple for better visibility */
    --secondary-color: #ffe28a; /* Brighter Gold */
    --dark-color: #f4f4f4; 
    --light-color: #2d2d2d;
    --white: #121212;
    --grey: #b8b8b8;
    --light-grey: #444444;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --card-bg: #1e1e1e;
}

/* Dark Mode Overrides */
body.dark-mode {
    background-color: #121212;
    color: var(--text-primary);
}

/* Header in Dark Mode */
body.dark-mode header {
    background-color: rgba(18, 18, 18, 0.95);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.dark-mode header.scrolled {
    background-color: rgba(18, 18, 18, 0.98);
}

body.dark-mode .logo h1 {
    color: var(--text-primary);
    text-shadow: 0 0 10px rgba(197, 98, 197, 0.5);
}

body.dark-mode .logo h1 span {
    color: var(--secondary-color);
    text-shadow: 0 0 10px rgba(255, 226, 138, 0.5);
}

body.dark-mode nav ul li a {
    color: var(--text-primary);
}

body.dark-mode nav ul li a:hover {
    color: var(--secondary-color);
}

body.dark-mode nav ul li a:after {
    background-color: var(--secondary-color);
}

/* Buttons in Dark Mode */
body.dark-mode .btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .btn-primary {
    background-color: var(--primary-color);
    color: var(--text-primary);
    border: none;
}

body.dark-mode .btn-primary:hover {
    background-color: #d373d3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(197, 98, 197, 0.4);
}

body.dark-mode .btn-secondary {
    background-color: var(--secondary-color);
    color: #121212;
}

body.dark-mode .btn-secondary:hover {
    background-color: #ffea9f;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 226, 138, 0.4);
}

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

body.dark-mode .btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 6px 20px rgba(197, 98, 197, 0.4);
}

/* Cards in Dark Mode */
body.dark-mode .card,
body.dark-mode .service-card,
body.dark-mode .feature-card {
    background-color: var(--card-bg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border-color: var(--border-color);
}

body.dark-mode .service-card:hover,
body.dark-mode .feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(197, 98, 197, 0.3);
}

body.dark-mode .service-icon,
body.dark-mode .feature-icon {
    color: var(--primary-color);
    background: rgba(197, 98, 197, 0.1);
    box-shadow: 0 0 15px rgba(197, 98, 197, 0.3);
}

body.dark-mode .service-card h3,
body.dark-mode .feature-card h3 {
    color: var(--text-primary);
}

body.dark-mode .service-card p,
body.dark-mode .feature-card p {
    color: var(--text-secondary);
}

/* Sections in Dark Mode */
body.dark-mode .section-header h2 {
    color: var(--text-primary);
}

body.dark-mode .section-header h2:after {
    background-color: var(--primary-color);
}

body.dark-mode .section-header p {
    color: var(--text-secondary);
}

/* Alternate Section Background Colors for Visual Distinction */
body.dark-mode .features,
body.dark-mode .how-it-works,
body.dark-mode .service-showcase,
body.dark-mode .contact-section {
    background-color: #161616;
    position: relative;
}

body.dark-mode .testimonials,
body.dark-mode .marquee-section,
body.dark-mode .statistics,
body.dark-mode .services {
    background-color: #121212;
    position: relative;
}

/* Add subtle noise texture to sections for better visual appeal */
body.dark-mode .features:before,
body.dark-mode .how-it-works:before,
body.dark-mode .service-showcase:before,
body.dark-mode .contact-section:before,
body.dark-mode .testimonials:before,
body.dark-mode .statistics:before,
body.dark-mode .services:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

/* Hero Section in Dark Mode */
body.dark-mode .hero {
    background-color: #0f0f0f;
}

body.dark-mode .hero-text h1 {
    color: var(--text-primary);
}

body.dark-mode .hero-text p {
    color: var(--text-secondary);
}

body.dark-mode .placeholder-pattern {
    opacity: 0.04;
}

body.dark-mode .hero-image img {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Animated background in dark mode */
body.dark-mode .animated-bg span {
    background: linear-gradient(to right, rgba(197, 98, 197, 0.1), rgba(255, 226, 138, 0.1));
}

/* Statistics Section in Dark Mode */
body.dark-mode .stat-item {
    background-color: var(--card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .stat-icon {
    color: var(--secondary-color);
    background-color: rgba(255, 226, 138, 0.1);
}

body.dark-mode .stat-number {
    color: var(--text-primary);
}

body.dark-mode .stat-number .counter {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(197, 98, 197, 0.3);
}

/* Service Showcase in Dark Mode */
body.dark-mode .showcase-image {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .showcase-overlay {
    background: linear-gradient(to top, rgba(18, 18, 18, 0.95), rgba(18, 18, 18, 0.5) 60%, transparent);
}

body.dark-mode .showcase-control-btn {
    background-color: rgba(18, 18, 18, 0.7);
    color: var(--text-primary);
}

/* How It Works in Dark Mode */
body.dark-mode .step {
    background-color: var(--card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .step-number {
    background-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 0 15px rgba(197, 98, 197, 0.4);
}

/* Testimonials in Dark Mode */
body.dark-mode .testimonial-slide {
    background-color: var(--card-bg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .testimonial-text {
    color: var(--text-secondary);
}

body.dark-mode .client-info h4 {
    color: var(--text-primary);
}

body.dark-mode .client-info p {
    color: var(--text-muted);
}

body.dark-mode .rating i {
    color: var(--secondary-color);
}

body.dark-mode .dot {
    background-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .dot.active {
    background-color: var(--primary-color);
}

/* Contact Form in Dark Mode */
body.dark-mode .contact-info,
body.dark-mode .contact-form-container {
    background-color: var(--card-bg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

body.dark-mode .info-item {
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode .info-item i {
    color: var(--primary-color);
}

body.dark-mode .info-item h4 {
    color: var(--text-primary);
}

body.dark-mode .info-item p {
    color: var(--text-secondary);
}

body.dark-mode .form-group label {
    color: var(--text-primary);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(197, 98, 197, 0.25);
    background-color: rgba(197, 98, 197, 0.05);
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
    color: var(--text-muted);
}

/* 3D Cube in Dark Mode */
body.dark-mode .cube-face {
    background-color: rgba(30, 30, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

body.dark-mode .cube-content {
    color: var(--text-primary);
}

body.dark-mode .cube-content i {
    color: var(--primary-color);
}

body.dark-mode .cube-content p {
    color: var(--text-secondary);
}

/* Floating Action Button in Dark Mode */
body.dark-mode .floating-action-btn .fab-main {
    background: linear-gradient(135deg, var(--primary-color), #a43fa4);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .floating-action-btn .fab-option {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .floating-action-btn .fab-option:hover {
    background-color: var(--primary-color);
    color: var(--text-primary);
    transform: translateY(-3px) scale(1.05);
}

/* Scroll-to-top button in Dark Mode */
body.dark-mode .scroll-to-top {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .scroll-to-top:hover {
    background-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 5px 20px rgba(197, 98, 197, 0.4);
}

/* CTA Section in Dark Mode */
body.dark-mode .cta {
    background-color: #0f0f0f;
}

body.dark-mode .cta-content h2 {
    color: var(--text-primary);
}

body.dark-mode .cta-content p {
    color: var(--text-secondary);
}

body.dark-mode .btn-app {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .btn-app:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Footer in Dark Mode */
body.dark-mode footer {
    background-color: #0a0a0a;
    color: var(--text-primary);
    position: relative;
}

body.dark-mode footer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

body.dark-mode .footer-logo h2 {
    color: var(--text-primary);
    text-shadow: 0 0 10px rgba(197, 98, 197, 0.4);
}

body.dark-mode .footer-logo h2 span {
    color: var(--secondary-color);
}

body.dark-mode .footer-logo p {
    color: var(--text-secondary);
}

body.dark-mode .link-group h4 {
    color: var(--primary-color);
}

body.dark-mode .link-group ul li a {
    color: var(--text-secondary);
}

body.dark-mode .link-group ul li a:hover {
    color: var(--secondary-color);
}

body.dark-mode .footer-social h4 {
    color: var(--primary-color);
}

body.dark-mode .social-icon-animated {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .social-icon-animated:hover {
    background-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(197, 98, 197, 0.6);
    transform: translateY(-5px);
}

body.dark-mode .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    top: 85px;
    right: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--primary-color);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode-toggle i {
    color: var(--white);
    font-size: 20px;
    transition: all 0.3s ease;
}

/* Position adjustments when header is scrolled */
header.scrolled ~ .dark-mode-toggle {
    top: 20px;
}

/* Animation for dark mode toggle */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dark-mode-toggle.animate i {
    animation: spin 0.5s ease-in-out;
}

/* Media Queries */
@media (max-width: 768px) {
    .dark-mode-toggle {
        width: 40px;
        height: 40px;
        top: 75px;
        right: 15px;
    }

    .dark-mode-toggle i {
        font-size: 18px;
    }
    
    header.scrolled ~ .dark-mode-toggle {
        top: 15px;
    }
}