/* Light Theme for Marvel Inspired CSS */

body.light-theme {
  background-color: #ffffff;
  color: #1a1a1a;
}

body.light-theme a {
  color: #0070dd;
}

body.light-theme a:hover {
  color: #0056b3;
}

.light-theme .main-nav {
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.light-theme .nav-links a {
  color: #1a1a1a;
}

/* .light-theme .hero-overlay {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.1) 70%
  );
} */

.light-theme .hero-comic-split:hover .hero-overlay {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.98) 25%,
    rgba(255, 255, 255, 0.35) 75%
  );
}

.light-theme .hero-comic-split h2 {
  color: #1a1a1a;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
}

.light-theme .btn {
  background-color: #0070dd;
  border-color: #0070dd;
  color: #fff;
  white-space: nowrap;
}

.light-theme .btn:hover {
  background-color: #0056b3;
  border-color: #0056b3;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.light-theme .btn-detail {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: #1a1a1a;
  color: #1a1a1a;
}

.light-theme .btn-detail:hover {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: #0070dd;
  color: #0070dd;
}

.light-theme .comic-detail-section {
  background-color: #ffffff;
}

.light-theme .comic-detail-section::before {
  opacity: 0.05;
}

.light-theme .comic-info h2 {
  color: #1a1a1a;
}

.light-theme .main-footer {
  background-color: #f2f2f2;
  color: #1a1a1a;
}

.light-theme .footer-column-start {
  color: #1a1a1a;
}

.light-theme .footer-column .contact-email a {
  color: #0070dd;
}

.light-theme .footer-column .contact-email a:hover {
  color: #0056b3;
}

.light-theme .footer-copyright {
  border-top: 1px solid #e0e0e0;
  color: #6c6c6c;
}

.light-theme .footer-social-title {
  color: #1a1a1a;
}

.light-theme .footer-social-icons a {
  color: #1a1a1a;
}

.light-theme .footer-social-icons a:hover {
  color: #0070dd;
}

.light-theme .modal-content {
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.light-theme .close-modal-btn {
  color: #1a1a1a;
}

.light-theme .modal-comic-info h3 {
  color: #0070dd;
}

.light-theme #checkout-form .form-group label {
  color: #1a1a1a;
}

.light-theme #checkout-form input[type="text"],
.light-theme #checkout-form input[type="email"],
.light-theme #checkout-form input[type="number"],
.light-theme #checkout-form input[type="tel"] {
  background-color: #f2f2f2;
  border: 1px solid #e0e0e0;
  color: #1a1a1a;
}

.light-theme #checkout-form input[type="text"]:focus,
.light-theme #checkout-form input[type="email"]:focus,
.light-theme #checkout-form input[type="number"]:focus,
.light-theme #checkout-form input[type="tel"]:focus {
  border-color: #0070dd;
  box-shadow: 0 0 0 2px rgba(0, 112, 221, 0.5);
}

.light-theme .terms-container {
  background-color: #ffffff;
  color: #1a1a1a;
  border: 1px solid #e0e0e0;
}

@media (max-width: 480px) {
  .light-theme .hero-comic-split:hover .hero-overlay {
    background: none;
  }

  .light-theme .hero-comic-split h2 {
    color: yellow;
  }

  .hero-buttons {
    flex-direction: row;
  }

  .light-theme .btn-detail {
    background-color: #0070dd;
    border-color: #0070dd;
    color: #fff;
  }

  .light-theme .btn-detail:hover {
    background-color: #0070dd;
    border-color: #0070dd;
    color: #fff;
  }
}