/* Theme Styles */

/* Light Theme (Default) */
:root {
  --primary-color: #367BF0;
  --body-color: #ffffff;
  --text-color: #333333;
  --text-color-dark: #242738;
  --white-color: #ffffff;
  --light-color: #f5f5f5;
  --font-family: 'Noto Sans', sans-serif;
  --section-bg-color: #f9f9f900;
  --card-bg-color: #ffffff;
  --card-border-color: #e0e0e0;
  --header-text-color: #242738;
  --footer-bg-color: #f5f5f5;
  --footer-text-color: #333333;
  --color-kali-blue: #40f218;
  --color-kali-purple: #ff2e2e;
}

/* Dark Theme */
body.dark-theme {
  --body-color: #010409;
  --text-color: #eeeeec;
  --text-color-dark: #ffffff;
  --white-color: #16171d;
  --light-color: #1c1e26;
  --section-bg-color: #0d111700;
  --card-bg-color: #16171d;
  --card-border-color: #30363d;
  --header-text-color: #ffffff;
  --footer-bg-color: #0d1117;
  --footer-text-color: #eeeeec;
}

/* Apply theme variables to elements */
body {
  background-color: var(--body-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header styles */
header {
  background-color: var(--body-color);
  color: var(--header-text-color);
}

/* Section styles */
section {
  background-color: var(--section-bg-color);
}

section.white-section {
  background-color: var(--body-color);
}

/* Card styles */
.card, .pricing-card, .testimonial-card, .overall-rating {
  background-color: var(--card-bg-color);
  border-color: var(--card-border-color);
}

/* Footer styles */
footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
}

/* Theme toggle switch styles */
.darkmode-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.darkmode-switch span {
  font-size: 14px;
  font-weight: 600;
  margin: 0 10px;
  color: var(--text-color);
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch div {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
  border: 1px solid var(--card-border-color);
}

.switch div:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + div {
  background-color: var(--color-kali-blue);
}

input:checked + div:before {
  transform: translateX(30px);
}

/* Integrated sections theme styles */
.integrated-section {
  background-color: var(--section-bg-color);
  color: var(--text-color);
}

.integrated-section-title h2 {
  color: var(--text-color-dark);
}

.integrated-section-title p {
  color: var(--text-color);
}

/* Pricing section theme styles */
.pricing-card {
  background-color: var(--card-bg-color);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pricing-card h3 {
  color: var(--text-color-dark);
}

.pricing-features li {
  color: var(--text-color);
}

/* Feedback section theme styles */
.testimonial-card {
  background-color: var(--card-bg-color);
  border: 1px solid var(--card-border-color);
}

.testimonial-content p {
  color: var(--text-color);
}

.author-info h5 {
  color: var(--text-color-dark);
}

.author-info span {
  color: var(--text-color);
}

/* Rating section theme styles */
.overall-rating {
  background-color: var(--card-bg-color);
  border: 1px solid var(--card-border-color);
}

.rating-number {
  color: var(--text-color-dark);
}

.overall-rating p {
  color: var(--text-color);
}

/* Blog section theme styles */
#blog-posts h2 {
  color: var(--text-color-dark);
}

#blog-posts .card {
  background-color: var(--card-bg-color);
  border: 1px solid var(--card-border-color);
}

#blog-posts .card h4 {
  color: var(--text-color-dark);
}

#blog-posts .card p {
  color: var(--text-color);
}

/* Modal popup theme styles */
.modal-content {
  background-color: var(--card-bg-color);
  border: 1px solid var(--card-border-color);
}

.modal-header {
  background-color: var(--section-bg-color);
  border-bottom: 1px solid var(--card-border-color);
}

.modal-header h3 {
  color: var(--text-color-dark);
}

.payment-item {
  background-color: var(--section-bg-color);
  color: var(--text-color);
}

.payment-item:hover {
  background-color: var(--light-color);
}