/**
 * FunnelCraftPro - Dark Mode Stylesheet
 * Styling for the dark mode version of the website
 */

/* Dark Mode Variables */
:root {
  --dark-bg: #121212;
  --dark-bg-secondary: #1e1e1e;
  --dark-bg-tertiary: #2d2d2d;
  --dark-text-primary: #e0e0e0;
  --dark-text-secondary: #a0a0a0;
  --dark-border: #333333;
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  --dark-input-bg: #2d2d2d;
  --dark-hover: #3a3a3a;
}

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

/* Header and Navigation */
body.dark-mode #header {
  background-color: rgba(18, 18, 18, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .navbar.scrolled {
  background-color: var(--dark-bg);
}

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

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

body.dark-mode .language-selector .dropdown-toggle {
  color: var(--dark-text-primary);
}

body.dark-mode .dropdown-menu {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

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

body.dark-mode .dropdown-item:hover {
  background-color: var(--dark-hover);
}

/* Hero Section - Gradient Stays the Same */

/* Sections with Light Background */
body.dark-mode .services-section,
body.dark-mode .portfolio-section,
body.dark-mode .features-section,
body.dark-mode .hero-wave path {
  background-color: var(--dark-bg);
  fill: var(--dark-bg);
}

/* Sections with Light Gray Background */
body.dark-mode .why-us-section,
body.dark-mode .testimonials-section,
body.dark-mode .faq-section {
  background-color: var(--dark-bg-secondary);
}

/* Cards, Boxes and Containers */
body.dark-mode .service-card,
body.dark-mode .feature-box,
body.dark-mode .portfolio-card,
body.dark-mode .testimonial-content,
body.dark-mode .accordion-item,
body.dark-mode .accordion-button,
body.dark-mode .accordion-button:not(.collapsed),
body.dark-mode .accordion-body {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

body.dark-mode .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e0e0e0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

body.dark-mode .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234158D0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Text Colors */
body.dark-mode .section-heading p,
body.dark-mode .service-card p,
body.dark-mode .feature-box p,
body.dark-mode .feature-item p,
body.dark-mode .step-content p,
body.dark-mode .portfolio-info p,
body.dark-mode .testimonial-text p,
body.dark-mode .client-details p,
body.dark-mode .address-note,
body.dark-mode .crypto-name p,
body.dark-mode .qr-placeholder p {
  color: var(--dark-text-secondary);
}



/* Form Elements */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode textarea,
body.dark-mode .search-box input,
body.dark-mode .form-control {
  background-color: var(--dark-input-bg);
  color: var(--dark-text-primary);
  border-color: var(--dark-border);
}

body.dark-mode .search-box i {
  color: var(--dark-text-secondary);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode .search-box input:focus,
body.dark-mode .form-control:focus {
  border-color: var(--primary-color);
  background-color: var(--dark-input-bg);
  color: var(--dark-text-primary);
}

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

/* Buttons */
body.dark-mode .filter-btn,
body.dark-mode .price-btn {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

body.dark-mode .filter-btn:hover,
body.dark-mode .filter-btn.active {
  background-color: var(--primary-color);
  color: var(--white-color);
}

/* Modal and Dialog */
body.dark-mode .modal-content {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}

body.dark-mode .alert-info {
  background-color: rgba(23, 162, 184, 0.2);
  color: var(--dark-text-primary);
  border-color: rgba(23, 162, 184, 0.3);
}

body.dark-mode .crypto-option {
  border-color: var(--dark-border);
}

body.dark-mode .crypto-option.active,
body.dark-mode .crypto-option:hover {
  border-color: var(--primary-color);
  background-color: rgba(65, 88, 208, 0.15);
}

body.dark-mode .qr-placeholder {
  background-color: var(--dark-bg-tertiary);
}

/* Comparison Chart */
body.dark-mode .comparison-chart rect[fill="#f8f9fa"] {
  fill: var(--dark-bg-tertiary);
}

body.dark-mode .comparison-chart text[fill="#333"] {
  fill: var(--dark-text-primary);
}

body.dark-mode .comparison-chart text[fill="#666"] {
  fill: var(--dark-text-secondary);
}

/* Review Items */
body.dark-mode .review-item {
  background-color: var(--dark-bg-tertiary);
}

/* Mobile Navigation */
body.dark-mode .mobile-navbar {
  background-color: var(--dark-bg);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

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

body.dark-mode .mobile-nav-item.active,
body.dark-mode .mobile-nav-item:hover {
  color: var(--primary-color);
}

/* Theme Toggle Switch */
.checkbox {
  opacity: 0;
  position: absolute;
}

.label {
  width: 50px;
  height: 26px;
  background-color: #111;
  display: flex;
  border-radius: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  position: relative;
  transform: scale(0.8);
  cursor: pointer;
}

.ball {
  width: 20px;
  height: 20px;
  background-color: white;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
  transform: translateX(24px);
}

.fa-moon {
  color: #f1c40f;
}

.fa-sun {
  color: #f39c12;
}

/* New Testimonials Dark Mode */
body.dark-mode .new-testimonials-section {
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%);
}

body.dark-mode .testimonials-title {
  background: linear-gradient(135deg, var(--primary-color) 0%, #64b5f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

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

body.dark-mode .testimonial-card {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}

body.dark-mode .testimonial-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

body.dark-mode .customer-name {
  color: var(--dark-text-primary);
}

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

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

body.dark-mode .testimonial-stats {
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%);
}

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

body.dark-mode .testimonial-footer {
  border-top-color: var(--dark-border);
}

body.dark-mode .product-used span {
  color: var(--dark-text-primary);
}

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

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

/* Testimonials Navigation Dark Mode */
body.dark-mode .nav-btn {
  background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, #2a2a2a 100%);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

body.dark-mode .nav-btn:hover {
  color: var(--white-color);
}

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

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