:root {
  --blue: #007bff;
  --dark-blue: #0056b3;
  --light-blue: #e6f0ff;
  --light-gray: #f0f2f5;
  --white: #ffffff;
  --text: #333333;
  --yellow: #ffc107;
  --card-bg: #ffffff;
  --accent-color: #007bff;

  --badge-bg: #fff8e1;
  --badge-text: #ff9800;
}

html[data-theme="dark"] {
  --blue: #3399ff;
  --dark-blue: #1a75d1;
  --light-blue: #333;
  --light-gray: #1c1c1c;
  --white: #121212;
  --text: #e0e0e0;
  --card-bg: #1e1e1e;
  --accent-color: #66b3ff;

  --badge-bg: rgba(255, 255, 255, 0.07);
  --badge-text: #fff;
}

/* Base Theme */
body {
  background-color: var(--white);
  color: var(--text);
}

/* Theme Toggle Button */
#themeToggle {
  position: fixed;
  bottom: 24px;
  right: 84px;
  background: var(--card-bg);
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  padding: 10px;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

#themeToggle:hover {
  background-color: var(--accent-color);
  color: #fff;
}

/* Dark Mode Country Card Borders */
[data-theme="dark"] .service-card.thailand {
  border-left-color: #52d16e;
}

[data-theme="dark"] .service-card.usa {
  border-left-color: #66b3ff;
}

[data-theme="dark"] .service-card.global {
  border-left-color: #ffab4d;
}

[data-theme="dark"] .service-card.beta {
  border-left-color: #aaa;
}

/* Navbar + Text Override */
[data-theme="dark"] .navbar {
  background-color: #000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] nav a {
  color: var(--text);
}

[data-theme="dark"] nav a.active {
  color: var(--accent-color);
}

/* Text and Section Overrides */
[data-theme="dark"] .hero h1,
[data-theme="dark"] .section-title,
[data-theme="dark"] .service-title,
[data-theme="dark"] .region,
[data-theme="dark"] p,
[data-theme="dark"] .btn-learn,
[data-theme="dark"] .cta-btn,
[data-theme="dark"] footer {
  color: var(--text);
}

/* Card Styles */
.service-card,
.card {
  background-color: var(--card-bg);
  color: var(--text);
}

[data-theme="dark"] .card {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Badge */
.badge {
  background-color: var(--badge-bg);
  color: var(--badge-text);
}

[data-theme="dark"] .btn-learn.disabled {
  color: #999;
}


[data-theme="dark"] .cta-btn.alt {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}

/* Dark Mode Icon */
[data-theme="dark"] .icon-dark {
  filter: brightness(5) invert(1);
}


html[data-theme="dark"] .cta-btn {
  background-color: #1a73e8;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}


html[data-theme="dark"] .cta-btn:hover {
  background-color: #125ec9;
}

/* Feature Badge - Light & Dark Theme */
.feature-badge {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #00d8ff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  animation: floatBadge 6s ease-in-out infinite alternate;
}

html[data-theme="dark"] .feature-badge {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #4dd2ff;
}