/* ============================================
   THE VISITOR'S GUIDE - Dark Mode Fixes
   ============================================ */

/* 1. Better Dark Mode Background Gradients */
[data-theme="dark"] body {
  background: #0a0a0a !important;
}

[data-theme="dark"] .hero {
  background: linear-gradient(135deg, 
    #0a0a0a 0%,
    #0f0f0f 100%) !important;
}

[data-theme="dark"] .features {
  background: #0a0a0a !important;
}

[data-theme="dark"] .newsletter {
  background: linear-gradient(135deg, 
    #0f0f0f 0%,
    #141414 100%) !important;
  border-top: 1px solid rgba(255, 107, 107, 0.1);
  border-bottom: 1px solid rgba(255, 183, 0, 0.1);
}

[data-theme="dark"] .contact {
  background: #0a0a0a !important;
}

[data-theme="dark"] .footer {
  background: #050505 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 2. Fix Feature Cards in Dark Mode - No Highlighting */
[data-theme="dark"] .feature-card {
  background: rgba(15, 15, 15, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .feature-card:hover {
  background: rgba(20, 20, 20, 0.8) !important;
  border-color: rgba(255, 107, 107, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

/* 3. Fix Button Colors in Dark Mode */
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #FF6B6B, #FF8A8A) !important;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2) !important;
}

[data-theme="dark"] .btn-secondary {
  background: transparent !important;
  color: #f0f0f0 !important;
  border: 2px solid rgba(255, 107, 107, 0.5) !important;
}

[data-theme="dark"] .btn-secondary:not(:disabled):hover {
  background: linear-gradient(135deg, #FF6B6B, #FF8A8A) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .nav-preorder {
  background: linear-gradient(135deg, #FF6B6B, #FF8A8A) !important;
}

/* 4. Master the Art Title - One Line, No Border */
#about .section-title {
  font-size: 2.8rem !important;
  white-space: nowrap !important;
  border: none !important;
  padding: 2rem 0 !important;
  margin: 2rem auto !important;
}

#about .section-title::after {
  display: none !important;
}

@media (max-width: 768px) {
  #about .section-title {
    font-size: 1.8rem !important;
    white-space: normal !important;
  }
}

/* 5. Extend SVG Drawings to Full Size */
.feature-bg-icon {
  position: absolute !important;
  top: -20px !important;
  left: -20px !important;
  right: -20px !important;
  bottom: -20px !important;
  width: calc(100% + 40px) !important;
  height: calc(100% + 40px) !important;
}

.feature-card {
  overflow: hidden !important;
}

/* 6. Fix Newsletter Form in Dark Mode */
[data-theme="dark"] .emailoctopus-form-wrapper input[type="text"],
[data-theme="dark"] .emailoctopus-form-wrapper input[type="email"],
[data-theme="dark"] .emailoctopus-form input[type="text"],
[data-theme="dark"] .emailoctopus-form input[type="email"],
[data-theme="dark"] .form-control {
  background: rgba(20, 20, 20, 0.9) !important;
  background-color: rgba(20, 20, 20, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f0f0f0 !important;
  padding: 14px 24px !important;
}

[data-theme="dark"] .emailoctopus-form-wrapper input:focus,
[data-theme="dark"] .emailoctopus-form input:focus,
[data-theme="dark"] .form-control:focus {
  border-color: rgba(255, 107, 107, 0.5) !important;
  background: rgba(25, 25, 25, 0.9) !important;
  background-color: rgba(25, 25, 25, 0.9) !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.1) !important;
}

[data-theme="dark"] .emailoctopus-form-wrapper input::placeholder {
  color: #666 !important;
}

[data-theme="dark"] .emailoctopus-form-wrapper input[type="submit"],
[data-theme="dark"] .emailoctopus-form-wrapper .btn-primary {
  background: linear-gradient(135deg, #FF6B6B, #FF8A8A) !important;
  color: white !important;
  border: none !important;
  padding: 14px 50px !important;
  margin-top: 10px !important;
}

[data-theme="dark"] .emailoctopus-form-wrapper input[type="submit"]:hover {
  background: linear-gradient(135deg, #FF8A8A, #FFB700) !important;
  box-shadow: 0 6px 25px rgba(255, 107, 107, 0.3) !important;
}

/* Form spacing fixes */
.emailoctopus-form {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 600px !important;
}

.emailoctopus-form-row {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

.emailoctopus-form-wrapper {
  padding: 0 !important;
  margin-top: -20px !important;
}

.emailoctopus-form-wrapper input[type="text"],
.emailoctopus-form-wrapper input[type="email"],
.emailoctopus-form input[type="text"],
.emailoctopus-form input[type="email"],
.form-control {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto 8px !important;
  display: block !important;
}

.emailoctopus-form-wrapper input[type="submit"],
.emailoctopus-form-wrapper .btn-primary {
  display: block !important;
  margin: 16px auto 0 !important;
  width: auto !important;
  min-width: 200px !important;
}

/* Force dark background on all form elements */
[data-theme="dark"] .nurture-container,
[data-theme="dark"] .inline-container,
[data-theme="dark"] .align-mid,
[data-theme="dark"] .emailoctopus-form-wrapper,
[data-theme="dark"] .emailoctopus-form-default {
  background: transparent !important;
  background-color: transparent !important;
}

[data-theme="dark"] .p-3,
[data-theme="dark"] .p-4,
[data-theme="dark"] .pt-5,
[data-theme="dark"] .pb-5 {
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove extra padding from EmailOctopus containers */
.nurture-container .pt-5,
.nurture-container .pb-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nurture-container .p-3 {
  padding: 0 !important;
}

/* Center form fields */
.emailoctopus-form-row {
  text-align: center !important;
}

/* Light mode input styling */
.emailoctopus-form-wrapper input[type="text"],
.emailoctopus-form-wrapper input[type="email"],
.form-control {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid rgba(255, 107, 107, 0.2) !important;
  color: var(--text-primary) !important;
  padding: 14px 24px !important;
  border-radius: 50px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
}

/* 7. Fix FAQ in Dark Mode */
[data-theme="dark"] .faq-item {
  background: rgba(15, 15, 15, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .faq-question {
  background: transparent !important;
  color: #f0f0f0 !important;
}

[data-theme="dark"] .faq-answer {
  color: #999 !important;
  background: rgba(10, 10, 10, 0.5) !important;
  padding: 20px !important;
  margin-top: -1px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .faq-item[open] {
  background: rgba(20, 20, 20, 0.5) !important;
  border-color: rgba(255, 107, 107, 0.2) !important;
}

[data-theme="dark"] .faq-question::after {
  color: #FF6B6B !important;
}

/* 8. Fix Campaign Section in Dark Mode */
[data-theme="dark"] .campaign-section {
  background: #0f0f0f !important;
}

[data-theme="dark"] .glitch {
  color: #FF6B6B !important;
  text-shadow: 0 0 20px rgba(255, 107, 107, 0.5) !important;
}

/* 9. Fix Social Links in Dark Mode */
[data-theme="dark"] .social-link {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 183, 0, 0.2)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .social-link:hover {
  background: linear-gradient(135deg, #FF6B6B, #FF8A8A) !important;
  border-color: transparent !important;
}

/* 10. Fix Contact Email Button in Dark Mode */
[data-theme="dark"] .contact-email {
  background: rgba(15, 15, 15, 0.5) !important;
  border: 2px solid rgba(255, 107, 107, 0.3) !important;
  color: #FF8A8A !important;
}

[data-theme="dark"] .contact-email:hover {
  background: linear-gradient(135deg, #FF6B6B, #FF8A8A) !important;
  color: white !important;
  border-color: transparent !important;
}