.legal-links {
   margin-left: -20px !important;
 }

/* =========================
   SETTINGS - change values here (CSS variables)
   ========================= */
:root{
  /* Colors */
  --bg-color: #ffffff;
  --text-color: #111827;
  --primary-color: #0077cc;   /* blue used across nav and accents */
  --nav-bg: var(--primary-color);
  --footer-bg: #F96167;
  --muted-bg: #f9f9f9;
  --accent: #4de0ff;
  --accessibility-color: orange;
  --brand-green-1: #00ff7a;    /* gradient top (bright mint) */
  --brand-green-2: #00c95a;    /* gradient middle (vivid green) */
  --brand-green-3: #009e3a;    /* gradient bottom (deep green) */
  --brand-outline: #015c26;    /* darker green outline */
  --brand-highlight: #eafff3;  /* subtle inner highlight */

  /* Layout & sizing */
  --logo-video-height: 60px;
  --logo-text-height: 125px;
  --header-padding: 10px 20px;
  --search-height: 50px;

  /* Interaction */
  --hover-zoom: 1.1;
  --transition-speed: 0.25s;

  /* Slideshow */
  --slideshow-height: 550px;
  --slideshow-interval: 4000; /* milliseconds */
}

/* Dark theme variables - toggled by adding .dark-theme on body */
body.dark-theme{
  --bg-color: #0b1220;
  --text-color: #e6eef6;
  --primary-color: #ffffff;
  --nav-bg: var(--primary-color);
  --footer-bg: #F96167;  /* Keep original footer color in dark mode */
  --muted-bg: #0b1220;
  --accent: #46c1ff;
}

/* =========================
   Basic reset & layout
   ========================= */
*{box-sizing:border-box}
body{
  margin:0;
  padding:0;
  background:var(--bg-color);
  color:var(--text-color);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* Add smooth scrolling and better focus styles */
html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Ensure all images and videos are responsive */
img[style],
video[style] {
  max-width: 100% !important;
  height: auto !important;
}

/* Fix specific elements with fixed widths - be more specific to avoid conflicts */
.card[style*="width:"],
.info-card[style*="width:"],
section[style*="width:"] {
  max-width: 100% !important;
}

/* Responsive images in cards */
.card img,
.info-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Enhanced focus styles for accessibility */
*:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Better button and interactive element styles */
button, .btn {
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

button:hover, .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Header Container - Prevent flashing and layout shift */
#header-container {
  min-height: 200px; /* Reserve space for header-top + header-mid + nav-bar */
  position: relative;
  width: 100%;
  opacity: 1;
  visibility: visible;
}

#header-container #header-wrapper {
  width: 100%;
  opacity: 1;
  visibility: visible;
  display: block;
}

/* Ensure header elements are visible immediately */
#header-container .header-top,
#header-container .header-mid,
#header-container .nav-bar {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Header Top */
.header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--header-padding);
  background:rgba(249, 249, 249, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  gap:12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
  margin: 0;
}
.logo-container{display:flex;align-items:center;gap:10px}
.logo-video{
  height:var(--logo-video-height);
  width:60px;
  border-radius:6px;
  object-fit:cover;
  flex-shrink:0;
}
.logo-svg{height:60px;width:auto;display:inline-block;flex-shrink:0}
.logo-svg.footer{height:32px}
/* Slightly smaller brand text in header */
.header-top .logo-svg{height:32px}
.logo-text-img{height:var(--logo-text-height);width:auto}
.logo-link {
  display:flex;            /* lay out video + text inline */
  align-items:center;
  gap:12px;
  text-decoration: none;   /* remove underline */
  flex-shrink:0;
  white-space:nowrap;
}
/* Adjust spacing between header top and header mid */
.header-top {
  padding: 10px 20px;   /* proper padding for header */
}

/* Top menu */
.menu-top{display:flex;gap:14px;align-items:center}
.menu-top a{color:var(--primary-color);text-decoration:none;font-weight:600;transition:transform var(--transition-speed) ease, color var(--transition-speed) ease;text-decoration-thickness:2px}
.menu-top a:hover{transform:scale(var(--hover-zoom));color:var(--accent);text-decoration:underline}
.header-info-note{
  font-size:0.95rem;
  color:#1e293b;
  font-weight:600;
  margin-right:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1.4;
  white-space:normal;
}
.header-info-note .header-info-text{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
}
.header-info-note .header-info-line{
  display:inline;
}
.header-info-note i{
  color:#0ea5e9;
  font-size:1rem;
}
.menu-top span.header-info-note{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
}
.header-whatsapp{
  display:flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#ffffff !important;
  padding:8px 16px;
  border-radius:10px;
  font-weight:700;
  font-size:0.95rem;
  box-shadow:0 6px 18px rgba(18,140,126,0.25);
  text-decoration:none;
  white-space:nowrap;
}
.header-whatsapp i{
  font-size:1.1rem;
}
.header-whatsapp:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(18,140,126,0.35);
  color:#ffffff !important;
  text-decoration:none;
}
.header-whatsapp:focus-visible{
  outline:3px solid rgba(37,211,102,0.6);
  outline-offset:3px;
}
.theme-toggle{background:none;border:1px solid transparent;padding:6px;border-radius:6px;cursor:pointer;font-size:18px;transition:transform var(--transition-speed) ease}
.theme-toggle:hover{transform:scale(var(--hover-zoom))}
.menu-top a {
  font-size: 17.5px;    /* increase from default 14px/16px */
  font-weight: 600;   /* make them bolder */
}

/* Alert toggle switch styles */
.alert-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px;
}

.switch-container {
  display: flex;
  align-items: center;
}

.alert-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  cursor: pointer;
  margin-left: 8px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.4s;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9ca3af;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.switch-icon {
  font-size: 12px;
  color: #666;
  transition: 0.4s;
  z-index: 1;
  position: relative;
}

input:checked + .slider {
  background-color: #10b981;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

input:checked + .slider .switch-icon {
  color: white;
  animation: pulse 2s infinite;
}

.alert-switch:hover .slider {
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.alert-switch:hover input:checked + .slider {
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Language select */
.language-menu{
  padding: 10px 40px 10px 16px;
  border-radius: 8px;
  border: 2px solid #7c8fec;
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  max-width: 140px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.5;
  box-sizing: border-box;
}
.language-menu:hover{
  background: rgba(102,126,234,0.1);
  border-color: #764ba2;
  box-shadow: 0 2px 8px rgba(102,126,234,0.2);
  transform: translateY(-1px);
}
.language-menu option {
  padding: 10px 12px;
  font-size: 1.05rem;
  font-weight: 600;
  background: white;
  color: #1e293b;
  direction: ltr;
  text-align: left;
}
.language-select {
  font-size: 18px;
  font-weight: 600;
  padding: 6px 10px;
}

/* =========================
   Header mid - City + Search + Icons combined
   ========================= */
.header-mid{display:flex;align-items:center;gap:16px;padding:8px 20px;background:transparent}

.city-container{display:flex;align-items:center;border-radius:12px;background:#ffffff;border:2px solid #e5e7eb;padding:10px 14px;min-width:240px;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:all 0.3s ease;gap:8px}
.city-container:hover{border-color:var(--primary-color);box-shadow:0 4px 12px rgba(20,190,255,0.15)}
.city-icon{font-size:20px;color:var(--primary-color);display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:linear-gradient(135deg,rgba(20,190,255,0.1),rgba(20,190,255,0.05));border-radius:6px;flex-shrink:0}
.city-select{border:none;background:transparent;outline:none;flex:1;font-size:15px;font-weight:600;color:#1f2937;cursor:pointer;padding:2px 8px}
.city-select:hover{color:var(--primary-color)}
.city-select option{font-weight:500;padding:10px;background:#ffffff;color:#1f2937}
.gps-btn{background:linear-gradient(135deg,#00ff7a,#00c95a);border:0;cursor:pointer;font-size:18px;padding:6px 10px;border-radius:8px;transition:all 0.3s ease;color:#ffffff;box-shadow:0 2px 8px rgba(0,255,122,0.3);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:36px;height:36px}
.gps-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 4px 12px rgba(0,255,122,0.4);background:linear-gradient(135deg,#00c95a,#00ff7a)}
.gps-btn:active{transform:translateY(0) scale(1);box-shadow:0 2px 8px rgba(0,255,122,0.3)}

.search-bar-container {
  flex: 1;
  position: relative;
  max-width: calc(100% - 180px);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* Allows flex item to shrink below content size */
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  align-items: center;
  z-index: 10;
  flex-shrink: 0;
}

.search-bar {
  width: 100%;
  padding: 17px 50px 17px 16px;
  font-size: 15px;
  border-radius: 12px;
  border: 2px solid #cbd5e1;
  height: var(--search-height);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  outline: none;
  font-family: inherit;
  color: #1f2937;
}

.search-bar::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.search-bar:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 224, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 1);
}

.search-bar:hover:not(:focus) {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Dark theme support for search bar */
body.dark-theme .search-bar {
  background: rgba(31, 41, 55, 0.9);
  border-color: #4b5563;
  color: #f3f4f6;
}

body.dark-theme .search-bar::placeholder {
  color: #6b7280;
}

body.dark-theme .search-bar:focus {
  background: rgba(31, 41, 55, 1);
  border-color: var(--accent);
}

body.dark-theme .search-bar:hover:not(:focus) {
  border-color: #6b7280;
}
.header-mid {
  padding: 15px 20px;   /* tighter padding for compact look */
  margin-top: 0px;      /* reset margin to make it visible */
}

/* Right icons */
.icons a img{height:36px;cursor:pointer;transition:transform var(--transition-speed) ease;border-radius:6px}
.icons a img:hover{transform:scale(var(--hover-zoom))}

/* =========================
   Navigation bar
   ========================= */
/* Navigation Bar */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 2px solid #e2e8f0;
  position: sticky;
  top: 80px;
  z-index: 99;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}

.nav-bar::-webkit-scrollbar {
  height: 4px;
}

.nav-bar::-webkit-scrollbar-track {
  background: transparent;
}

.nav-bar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
}

.nav-bar::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

.nav-bar .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.1;
  color: #1e293b;
  text-decoration: none;
  text-align: center;
  border-radius: 12px;
  border: 2px solid #7c8fec;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 0 rgba(14, 165, 233, 0.15);
  transition: all 0.25s ease;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex-shrink: 0;
  min-width: 0;
  max-width: 110px;
  overflow: hidden;
}

.nav-bar .nav-link:hover,
.nav-bar .nav-link:focus-visible {
  color: #0e7490;
  border-color: #7c8fec;
  background: rgba(124, 143, 236, 0.12);
  box-shadow: 0 2px 8px rgba(124, 143, 236, 0.2);
  text-decoration: none;
}

.nav-bar .nav-link-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.6);
  color: inherit;
  border: 2px solid #7c8fec;
  box-shadow: inset 0 0 0 0 rgba(14, 165, 233, 0.15);
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex-shrink: 0;
  min-width: 0;
  max-width: 110px;
  padding: 8px 12px;
  font-size: 0.9rem;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  line-height: 1.1;
  overflow: hidden;
  gap: 2px;
}

body.dark-theme .nav-bar {
  background: linear-gradient(135deg, #1e293b 0%, #111827 100%) !important;
  border-bottom: 2px solid #1f2937 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

body.dark-theme .nav-bar .nav-link {
  color: #e0f2fe !important;
  font-weight: 550;
  background: rgba(30, 41, 59, 0.7);
  border: 2px solid #7c8fec !important;
}

body.dark-theme .nav-bar .nav-link:hover,
body.dark-theme .nav-bar .nav-link:focus-visible {
  color: #38bdf8 !important;
  border-color: #7c8fec !important;
  background: rgba(124, 143, 236, 0.15);
  box-shadow: 0 2px 8px rgba(124, 143, 236, 0.2);
}

body.dark-theme .nav-bar .nav-link-action {
  background: rgba(30, 41, 59, 0.7) !important;
  color: inherit !important;
  border: 2px solid #7c8fec !important;
  box-shadow: inset 0 0 0 0 rgba(56, 189, 248, 0.25);
  text-align: center;
}

/* Desktop optimization for 12 navigation tabs */
@media (min-width: 1200px) and (max-width: 1600px) {
  .nav-bar {
    gap: 7px;
    padding: 10px 12px;
  }
  
  .nav-bar .nav-link,
  .nav-bar .nav-link-action {
    padding: 8px 11px;
    font-size: 0.88rem;
    max-width: 105px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    line-height: 1.1;
  }
}

/* Large desktop screens - can accommodate more */
@media (min-width: 1601px) {
  .nav-bar {
    gap: 9px;
    padding: 10px 18px;
  }
  
  .nav-bar .nav-link,
  .nav-bar .nav-link-action {
    padding: 8px 14px;
    font-size: 0.92rem;
    max-width: 112px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    line-height: 1.1;
  }
}

/* =========================
   Dropdown Menu Styles
   ========================= */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 350px;
  max-width: 400px;
  max-height: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  top: 100%;
  left: 0;
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #e5e7eb;
}

.dropdown-content a {
  color: #374151 !important;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid #f3f4f6;
  line-height: 1.3;
}

.dropdown-content a:last-child {
  border-bottom: none;
}

.dropdown-content a:hover {
  background-color: #f3f4f6;
  color: #1f2937 !important;
  transform: none;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropdown-toggle {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
  text-decoration: underline;
}

/* Ensure nav-link dropdown toggles match other nav tabs styling */
.nav-bar .dropdown .nav-link.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  line-height: 1.2;
}

/* Override dropdown hover for nav-link dropdown toggles to match nav-link hover style */
.nav-bar .dropdown:hover .nav-link.dropdown-toggle {
  color: #0e7490;
  border-color: #7c8fec;
  background: rgba(124, 143, 236, 0.12);
  box-shadow: 0 2px 8px rgba(124, 143, 236, 0.2);
  text-decoration: none;
  transform: translateY(-1px);
}

/* =========================
   Slideshow / Carousel
   ========================= */
.slideshow{
  position:relative;
  max-width:100%;
  height:var(--slideshow-height);
  margin:20px auto;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
}
.slides img{width:100%;height:100%;object-fit:cover;display:none}
.slides img.active{display:block}
.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);border:none;color:#fff;padding:10px;border-radius:50%;cursor:pointer;transition:transform var(--transition-speed) ease}
.prev:hover,.next:hover{transform:translateY(-50%) scale(1.12);background:rgba(0,0,0,0.7)}
.dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:#9ca3af;cursor:pointer;transition:transform var(--transition-speed) ease,background var(--transition-speed) ease}
.dot.active,.dot:hover{background:#fff;transform:scale(1.2)}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;             /* vertically center */
  transform: translateY(-50%);
  padding: 12px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  border-radius: 50%;
  background: rgba(0,0,0,0.4); /* semi-transparent background */
  transition: background 0.3s;
  z-index: 10;
}

.prev:hover, .next:hover {
  background: rgba(0,0,0,0.8);
}

/* Position left and right */
.prev {
  left: 20px;
}

.next {
  right: 20px;
}

/* =========================
   Footer (three columns + bottom)
   ========================= */
.footer{background:var(--footer-bg);color:#fff;padding:24px 18px;margin-top:0}
.footer-top{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}
.footer-column{flex:1;min-width:180px;padding:0 10px}
.footer-column h3{margin-top:0;margin-bottom:8px}
.accessibility{color:var(--accessibility-color);font-weight:600}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:18px;border-top:1px solid rgba(255,255,255,0.06);padding-top:12px}
.footer-links a{background:var(--accent);color:#000;padding:8px 12px;border-radius:8px;margin-left:8px;text-decoration:none;transition:transform var(--transition-speed) ease,background var(--transition-speed) ease}
.footer-links a:hover{transform:scale(var(--hover-zoom));background:#2bb5d4}

/* Responsive tweaks */
@media (max-width:880px){
  .footer-top{flex-direction:column;gap:14px}
  .nav-bar{overflow-x:auto;flex-wrap:nowrap;padding:10px 14px}
  .city-container{min-width:170px}
}

/* Footer responsive fixes */
@media (max-width: 1024px) {
  .footer {
    padding: 20px 16px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent footer from overflowing */
  .footer * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-top {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
  }

  .footer-column {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .footer-links a {
    margin: 0 4px;
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .footer-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Fix footer grid overflow */
  .footer div[style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    padding-left: 0 !important;
  }

  /* Remove negative margins */
  .footer *[style*="margin-left: -"] {
    margin-left: 0 !important;
  }

  .footer *[style*="margin-left: 70px"] {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 18px 12px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent all footer content from overflowing */
  .footer * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Fix footer grid - single column */
  .footer div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
    padding-left: 0 !important;
  }

  /* Remove all negative margins and excessive padding */
  .footer *[style*="margin-left: -"],
  .footer *[style*="margin-left: 70px"],
  .footer *[style*="margin-left: 22px"] {
    margin-left: 0 !important;
  }

  .footer *[style*="padding-left: 20px"],
  .footer *[style*="padding-left: 10px"],
  .footer *[style*="padding-right: 50px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Center align sections */
  .footer > div > div[style*="grid-template-columns"] > div {
    text-align: center !important;
  }

  /* Fix contact info */
  .footer div[style*="display: flex"][style*="align-items: center"][style*="gap: 12px"] {
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
  }

  /* Fix legal links - EXCLUDE footer legal links (they should be on the right) */
  /* Footer legal links are handled by footer.css */
  .footer div[style*="display: flex"][style*="gap: 15px"][style*="flex-wrap: wrap"]:not(.legal-links):not(.footer-legal-links) {
    margin-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  
  /* Note: Footer legal links (.footer .legal-links) are styled by footer.css to be on the right */

  .footer-top {
    gap: 16px;
  }

  .footer-column h3 {
    font-size: 1.2rem !important;
    margin-bottom: 12px;
  }

  .footer-column p,
  .footer-column a {
    font-size: 0.9rem !important;
  }

  .footer-links {
    gap: 6px;
  }

  .footer-links a {
    padding: 5px 10px;
    font-size: 0.8rem;
    margin: 0 2px;
  }

  .footer-social a {
    font-size: 20px;
    margin: 0 6px;
  }

  .footer-copy {
    font-size: 12px !important;
    margin-top: 16px;
  }

  /* Fix app store images */
  .footer img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 16px 10px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure no content overflows on very small screens */
  .footer * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Fix grid gap */
  .footer div[style*="grid-template-columns"] {
    gap: 20px !important;
  }

  /* Fix all text sizes */
  .footer h4 {
    font-size: 1rem !important;
  }

  .footer p,
  .footer a,
  .footer span {
    font-size: 0.85rem !important;
  }

  .footer-column h3 {
    font-size: 1.1rem !important;
  }

  .footer-column p,
  .footer-column a {
    font-size: 0.85rem !important;
  }

  .footer-links a {
    padding: 4px 8px;
    font-size: 0.75rem;
    margin: 0 2px;
  }

  .footer-social a {
    font-size: 18px;
    margin: 0 4px;
  }

  /* Fix contact info text wrapping */
  .footer a[href^="tel:"],
  .footer a[href^="mailto:"],
  .footer a[href^="https://"] {
    word-break: break-all !important;
    font-size: 0.8rem !important;
  }

  /* Fix images */
  .footer img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Fix social icons container */
  .footer div[style*="display: flex"][style*="gap: 15px"] {
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}
/* =========================
   Dark theme text fixes
   ========================= */
body.dark-theme,
body.dark-theme select,
body.dark-theme option,
body.dark-theme a {
  color: #ffffff !important;       /* force white text */
  background-color: transparent;   /* keep background consistent */
}

/* Footer text visibility in dark mode ONLY */
body.dark-theme .footer {
  color: #ffffff !important;       /* White text for better visibility in dark mode */
}

body.dark-theme .footer a {
  color: #ffffff !important;       /* White text for footer links in dark mode */
}

body.dark-theme .footer h3,
body.dark-theme .footer h4,
body.dark-theme .footer p,
body.dark-theme .footer span,
body.dark-theme .footer div {
  color: #ffffff !important;       /* White text for all footer elements in dark mode */
}

/* Force all footer text elements to be white in dark mode */
body.dark-theme footer * {
  color: #ffffff !important;
}

/* Specific footer elements that need white text in dark mode */
body.dark-theme footer h3,
body.dark-theme footer h4,
body.dark-theme footer h5,
body.dark-theme footer p,
body.dark-theme footer span,
body.dark-theme footer div,
body.dark-theme footer a {
  color: #ffffff !important;
}

/* Footer social icons */
body.dark-theme footer .fab,
body.dark-theme footer .fas {
  color: #ffffff !important;
}

/* Copyright and legal links */
body.dark-theme footer [style*="color: #94a3b8"] {
  color: #ffffff !important;
}

/* Specific rule for Contact link and other legal links */
body.dark-theme footer a[href*="contact.html"],
body.dark-theme footer a[href*="privacy.html"],
body.dark-theme footer a[href*="terms.html"],
body.dark-theme footer a[href*="about.html"] {
  color: #ffffff !important;
}

/* Footer hover states in dark mode - keep text white */
body.dark-theme footer a:hover {
  color: #ffffff !important;
}

body.dark-theme footer [style*="onmouseover"]:hover {
  color: #ffffff !important;
}

/* Override all footer hover styles in dark mode */
body.dark-theme footer *:hover {
  color: #ffffff !important;
}

/* Specific override for inline hover styles in dark mode */
body.dark-theme footer a[style*="onmouseover"]:hover {
  color: #ffffff !important;
}

/* Override inline style hover colors in dark mode */
body.dark-theme footer *[style*="color: #00ff7a"] {
  color: #ffffff !important;
}

body.dark-theme footer *[style*="color: #cbd5e1"] {
  color: #ffffff !important;
}

/* Force white color on all footer elements in dark mode - highest priority */
body.dark-theme footer * {
  color: #ffffff !important;
}

/* Override any inline style colors in dark mode footer */
body.dark-theme footer a[style] {
  color: #ffffff !important;
}

body.dark-theme footer span[style] {
  color: #ffffff !important;
}

body.dark-theme footer div[style] {
  color: #ffffff !important;
}

/* Ensure hover states don't override white color */
body.dark-theme footer *:hover {
  color: #ffffff !important;
}

/* Override any JavaScript-set colors */
body.dark-theme footer *[style*="color:"] {
  color: #ffffff !important;
}

/* Ensure Contact link and legal links are always white in dark mode */
body.dark-theme footer a[href*="contact.html"] {
  color: #ffffff !important;
}

body.dark-theme footer a[href*="contact.html"]:hover {
  color: #ffffff !important;
}

/* Override inline hover colors for Contact link */
body.dark-theme footer a[href*="contact.html"][style*="onmouseover"] {
  color: #ffffff !important;
}

/* Shift footer legal links 20px to the left */
footer div[style*="display: flex; gap: 20px; flex-wrap: wrap;"] {
  margin-left: -20px !important;
}

/* Alternative selector for footer legal links */
footer > div > div[style*="display: flex"] {
  margin-left: -20px !important;
}

/* More specific selector for legal links container */
div[style*="display: flex; gap: 20px; flex-wrap: wrap;"] {
  margin-left: -20px !important;
}

/* Legal links class for shifting left */
/* .legal-links margin override removed to allow footer.css to control alignment */

/* Override specific footer link colors */
body.dark-theme .footer-links a {
  color: #ffffff !important;       /* White text for footer links */
  background: #46c1ff !important;  /* Dark theme blue background */
}

body.dark-theme .footer-links a:hover {
  color: #ffffff !important;       /* White text on hover */
  background: #3aa8e6 !important;  /* Darker blue on hover */
}

/* Override all footer text elements */
body.dark-theme .footer * {
  color: #ffffff !important;       /* Force white text for all footer elements */
}

/* Dropdown background in dark mode */
body.dark-theme .language-menu {
  background-color: #1f2937; /* dark gray dropdown background */
  border: 1px solid #374151;
  color: #ffffff;
}

/* Menu top links in dark theme */
body.dark-theme .menu-top a {
  color: #ffffff !important;
}

body.dark-theme .menu-top a:hover {
  color: #46c1ff !important;
}

/* Header background in dark theme */
body.dark-theme .header-top {
  background: rgba(15, 23, 36, 0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Footer links in dark theme - white text for visibility */
body.dark-theme .footer-links a {
  background: #46c1ff;   /* Dark theme blue button */
  color: #ffffff;        /* White text for visibility */
}
body.dark-theme .footer-links a:hover {
  background: #3aa8e6;   /* Darker blue hover */
  color: #ffffff;        /* White text on hover */
}

/* =========================
   Dark theme form elements
   ========================= */
body.dark-theme .login-card,
body.dark-theme .register-card {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: #ffffff !important;
}

body.dark-theme .login-title,
body.dark-theme .register-title,
body.dark-theme .login-sub,
body.dark-theme .register-sub {
  color: #ffffff !important;
}

body.dark-theme .login-field label,
body.dark-theme .field label {
  color: #e5e7eb !important;
}

body.dark-theme .login-field input,
body.dark-theme .field input {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
  color: #ffffff !important;
}

body.dark-theme .login-field input::placeholder,
body.dark-theme .field input::placeholder {
  color: #9ca3af !important;
}

body.dark-theme .login-field input:focus,
body.dark-theme .field input:focus {
  border-color: #46c1ff !important;
  box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.1) !important;
}

body.dark-theme .login-switch .switch {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
  color: #e5e7eb !important;
}

body.dark-theme .login-switch .switch.active {
  background: #46c1ff !important;
  color: #000000 !important;
  border-color: #46c1ff !important;
}

body.dark-theme .login-btn,
body.dark-theme .submit-btn {
  background: #46c1ff !important;
  color: #000000 !important;
}

body.dark-theme .login-btn:hover,
body.dark-theme .submit-btn:hover {
  background: #3aa8e6 !important;
}

body.dark-theme .remember,
body.dark-theme .terms {
  color: #e5e7eb !important;
}

body.dark-theme .aux-links a,
body.dark-theme .alt-links a {
  color: #46c1ff !important;
}

body.dark-theme .aux-links a:hover,
body.dark-theme .alt-links a:hover {
  color: #3aa8e6 !important;
}

body.dark-theme .divider {
  color: #9ca3af !important;
}

body.dark-theme .divider::before,
body.dark-theme .divider::after {
  background: #4b5563 !important;
}

body.dark-theme .oauth button {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
  color: #e5e7eb !important;
}

body.dark-theme .oauth button:hover {
  background: #4b5563 !important;
}

body.dark-theme .small {
  color: #9ca3af !important;
}

/* =========================
   Dark theme dropdown menu
   ========================= */
body.dark-theme .dropdown-content {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4) !important;
}

body.dark-theme .dropdown-content a {
  color: #e5e7eb !important;
  border-bottom: 1px solid #374151 !important;
}

body.dark-theme .dropdown-content a:hover {
  background-color: #374151 !important;
  color: #ffffff !important;
}

/* =========================
   Dark theme hospital pages
   ========================= */
body.dark-theme .hospital-container {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: #ffffff !important;
}

body.dark-theme .hospital-title {
  color: #F96167 !important;
}

body.dark-theme .hospital-subtitle {
  color: #d1d5db !important;
}

body.dark-theme .info-section {
  background: #374151 !important;
  border-left: 4px solid #F96167 !important;
  color: #ffffff !important;
}

body.dark-theme .info-section h3 {
  color: #F96167 !important;
}

body.dark-theme .info-section p,
body.dark-theme .info-section li {
  color: #e5e7eb !important;
}

body.dark-theme .contact-info {
  background: linear-gradient(135deg, #F96167 0%, #ff7a7a 100%) !important;
  color: white !important;
}

body.dark-theme .contact-info h3 {
  color: white !important;
}

body.dark-theme .back-link {
  background: #F96167 !important;
  color: white !important;
}

body.dark-theme .back-link:hover {
  background: #e5555a !important;
}

/* =========================
   Dark theme doctor pages
   ========================= */
body.dark-theme .doctor-container {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: #ffffff !important;
}

body.dark-theme .doctor-title {
  color: #F96167 !important;
}

body.dark-theme .doctor-subtitle {
  color: #d1d5db !important;
}

body.dark-theme .info-section {
  background: #374151 !important;
  border-left: 4px solid #F96167 !important;
  color: #ffffff !important;
}

body.dark-theme .info-section h3 {
  color: #F96167 !important;
}

body.dark-theme .info-section p,
body.dark-theme .info-section li {
  color: #e5e7eb !important;
}

body.dark-theme .specialization-badge {
  background: #F96167 !important;
  color: white !important;
}

body.dark-theme .contact-info {
  background: linear-gradient(135deg, #F96167 0%, #ff7a7a 100%) !important;
  color: white !important;
}

body.dark-theme .contact-info h3 {
  color: white !important;
}

body.dark-theme .back-link {
  background: #F96167 !important;
  color: white !important;
}

body.dark-theme .back-link:hover {
  background: #e5555a !important;
}

/* =========================
   Dark theme content pages
   ========================= */
body.dark-theme main {
  color: #e5e7eb !important;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3 {
  color: #ffffff !important;
}

body.dark-theme p,
body.dark-theme li {
  color: #d1d5db !important;
}

body.dark-theme ol,
body.dark-theme ul {
  color: #d1d5db !important;
}

/* =========================
   Dark theme search bar
   ========================= */
body.dark-theme .search-bar {
  background: rgba(31, 41, 55, 0.9) !important;
  border: 2px solid #4b5563 !important;
  color: #ffffff !important;
}

body.dark-theme .search-bar::placeholder {
  color: #9ca3af !important;
}

body.dark-theme .search-bar:focus {
  border-color: #46c1ff !important;
  background: rgba(31, 41, 55, 1) !important;
  box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.1) !important;
}

/* =========================
   Dark theme city container
   ========================= */
body.dark-theme .city-container {
  background: #1f2937 !important;
  border: 2px solid #374151 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

body.dark-theme .city-container:hover {
  border-color: #46c1ff !important;
  box-shadow: 0 4px 12px rgba(70,193,255,0.2) !important;
}

body.dark-theme .city-icon {
  color: #46c1ff !important;
  background: linear-gradient(135deg,rgba(70,193,255,0.15),rgba(70,193,255,0.08)) !important;
}

body.dark-theme .city-select {
  color: #ffffff !important;
}

body.dark-theme .city-select:hover {
  color: #46c1ff !important;
}

body.dark-theme .gps-btn {
  background: linear-gradient(135deg, #00ff7a, #00c95a) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,255,122,0.4) !important;
}

body.dark-theme .gps-btn:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(0,255,122,0.5) !important;
  background: linear-gradient(135deg, #00c95a, #00ff7a) !important;
}

/* =========================
   Dark theme alert page
   ========================= */
body.dark-theme .alert-card {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: #ffffff !important;
}

body.dark-theme .alert-title,
body.dark-theme .alert-sub {
  color: #ffffff !important;
}

body.dark-theme .alert-list {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
}

body.dark-theme .alert-item {
  border-bottom: 1px solid #4b5563 !important;
}

body.dark-theme .alert-time {
  color: #46c1ff !important;
}

body.dark-theme .alert-medicine {
  color: #d1d5db !important;
}

body.dark-theme .field select,
body.dark-theme .field textarea {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
  color: #ffffff !important;
}

body.dark-theme .field select:focus,
body.dark-theme .field textarea:focus {
  border-color: #46c1ff !important;
  box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.1) !important;
}

body.dark-theme .field textarea::placeholder {
  color: #9ca3af !important;
}

/* =========================
   Dark theme inline style overrides
   ========================= */
body.dark-theme .health-articles {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
}

body.dark-theme .featured-services {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
}

body.dark-theme .article-card {
  background: #374151 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

body.dark-theme .article-card h3 {
  color: #ffffff !important;
}

body.dark-theme .article-card p {
  color: #d1d5db !important;
}

body.dark-theme .article-card a {
  color: #46c1ff !important;
}

body.dark-theme .card {
  background: #374151 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .card h3 {
  color: #ffffff !important;
}

body.dark-theme .card p {
  color: #d1d5db !important;
}

/* =========================
   Dark theme page backgrounds
   ========================= */
body.dark-theme .login-page,
body.dark-theme .register-page,
body.dark-theme .alert-page {
  background: var(--bg-color) !important;
}

/* Ensure no white space above footer in dark mode */
body.dark-theme main {
  background: var(--bg-color) !important;
}

/* Ensure body and html have consistent dark background */
body.dark-theme {
  background: var(--bg-color) !important;
}

html {
  background: var(--bg-color);
}

body.dark-theme html {
  background: var(--bg-color) !important;
}

/* =========================
   Dark theme privacy policy page
   ========================= */
body.dark-theme .privacy-container {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: #ffffff !important;
}

body.dark-theme .privacy-title {
  color: #ffffff !important;
}

body.dark-theme .privacy-subtitle {
  color: #d1d5db !important;
}

body.dark-theme .last-updated {
  background: #374151 !important;
  color: #9ca3af !important;
}

body.dark-theme .privacy-section h2 {
  color: #46c1ff !important;
  border-bottom: 2px solid #4b5563 !important;
}

body.dark-theme .privacy-section h3 {
  color: #ffffff !important;
}

body.dark-theme .privacy-section p {
  color: #d1d5db !important;
}

body.dark-theme .privacy-section ul,
body.dark-theme .privacy-section ol {
  color: #d1d5db !important;
}

body.dark-theme .privacy-section li {
  color: #d1d5db !important;
}

body.dark-theme .highlight-box {
  background: #1e3a8a !important;
  border: 1px solid #3b82f6 !important;
}

body.dark-theme .highlight-box h4 {
  color: #93c5fd !important;
}

body.dark-theme .highlight-box p {
  color: #dbeafe !important;
}

body.dark-theme .contact-info {
  background: #374151 !important;
}

body.dark-theme .contact-info h3 {
  color: #46c1ff !important;
}

body.dark-theme .contact-info p,
body.dark-theme .contact-info li {
  color: #d1d5db !important;
}

body.dark-theme .back-link {
  background: #46c1ff !important;
  color: #000000 !important;
}

body.dark-theme .back-link:hover {
  background: #3aa8e6 !important;
}

/* =========================
   Dark theme disclaimer page
   ========================= */
body.dark-theme .disclaimer-container {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: #ffffff !important;
}

body.dark-theme .disclaimer-title {
  color: #ffffff !important;
}

body.dark-theme .disclaimer-subtitle {
  color: #d1d5db !important;
}

body.dark-theme .last-updated {
  background: #374151 !important;
  color: #9ca3af !important;
}

body.dark-theme .disclaimer-section h2 {
  color: #46c1ff !important;
  border-bottom: 2px solid #4b5563 !important;
}

body.dark-theme .disclaimer-section h3 {
  color: #ffffff !important;
}

body.dark-theme .disclaimer-section p {
  color: #d1d5db !important;
}

body.dark-theme .disclaimer-section ul {
  color: #d1d5db !important;
}

body.dark-theme .disclaimer-section li {
  color: #d1d5db !important;
}

body.dark-theme .warning-box {
  background: #451a03 !important;
  border: 1px solid #f59e0b !important;
}

body.dark-theme .warning-box h4 {
  color: #fbbf24 !important;
}

body.dark-theme .warning-box p {
  color: #fbbf24 !important;
}

body.dark-theme .important-box {
  background: #1e3a8a !important;
  border: 1px solid #3b82f6 !important;
}

body.dark-theme .important-box h4 {
  color: #93c5fd !important;
}

body.dark-theme .important-box p {
  color: #93c5fd !important;
}

body.dark-theme .limitation-box {
  background: #7f1d1d !important;
  border: 1px solid #ef4444 !important;
}

body.dark-theme .limitation-box h4 {
  color: #fca5a5 !important;
}

body.dark-theme .limitation-box p {
  color: #fca5a5 !important;
}

body.dark-theme .contact-info {
  background: #374151 !important;
}

body.dark-theme .contact-info h3 {
  color: #46c1ff !important;
}

body.dark-theme .contact-info p,
body.dark-theme .contact-info li {
  color: #d1d5db !important;
}

body.dark-theme .legal-notice {
  background: #374151 !important;
  border-left: 4px solid #6b7280 !important;
}

body.dark-theme .legal-notice p {
  color: #d1d5db !important;
}

/* =========================
   Dark theme comprehensive overrides for inline styles
   ========================= */

/* Priority message section */
body.dark-theme section[style*="background: linear-gradient(135deg, #00ff7a"] {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
}

body.dark-theme section[style*="background: linear-gradient(135deg, #00ff7a"] h1 {
  color: #ffffff !important;
}

/* Hero section */
body.dark-theme .hero-section {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
  color: #ffffff !important;
}

body.dark-theme .hero-section h1,
body.dark-theme .hero-section h2,
body.dark-theme .hero-section p {
  color: #ffffff !important;
}

body.dark-theme .hero-section a {
  background: rgba(70, 193, 255, 0.2) !important;
  color: #ffffff !important;
  border: 2px solid rgba(70, 193, 255, 0.3) !important;
}

body.dark-theme .hero-section a:hover {
  background: rgba(70, 193, 255, 0.3) !important;
}

/* City header */
body.dark-theme #city-header h2 {
  color: #46c1ff !important;
}

body.dark-theme #city-header p {
  color: #d1d5db !important;
}

/* Stats cards */
body.dark-theme div[style*="background: white"] {
  background: #374151 !important;
  color: #ffffff !important;
}

body.dark-theme div[style*="background: white"] h3 {
  color: #46c1ff !important;
}

body.dark-theme div[style*="background: white"] p {
  color: #d1d5db !important;
}

/* Info cards */
body.dark-theme .info-card {
  background: #374151 !important;
  color: #ffffff !important;
}

body.dark-theme .info-card h3 {
  color: #46c1ff !important;
}

body.dark-theme .info-card p {
  color: #d1d5db !important;
}

/* Links in dark theme */
body.dark-theme a[style*="background: linear-gradient(135deg, #F96167"] {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
}

body.dark-theme a[style*="background: linear-gradient(135deg, #059669"] {
  background: linear-gradient(135deg, #047857, #065f46) !important;
  color: #ffffff !important;
}

/* Health articles section */
body.dark-theme .health-articles {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
  color: #ffffff !important;
}

body.dark-theme .health-articles h2 {
  color: #46c1ff !important;
}

body.dark-theme .article-card {
  background: #374151 !important;
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
}

body.dark-theme .article-card h3 {
  color: #ffffff !important;
}

body.dark-theme .article-card p {
  color: #d1d5db !important;
}

body.dark-theme .article-card a {
  color: #46c1ff !important;
}

/* Featured services */
body.dark-theme .featured-services {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
  color: #ffffff !important;
}

body.dark-theme .featured-services h2 {
  color: #46c1ff !important;
}

body.dark-theme .featured-services .card {
  background: #374151 !important;
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
}

body.dark-theme .featured-services .card h3 {
  color: #ffffff !important;
}

body.dark-theme .featured-services .card p {
  color: #d1d5db !important;
}

/* Ticker text overrides */
body.dark-theme .ticker-text {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

/* Walking ticker section */
body.dark-theme .walking-ticker-section {
  background: #1f2937 !important;
}

/* All divs with white background in dark theme */
body.dark-theme div[style*="background: white"],
body.dark-theme div[style*="background-color: white"] {
  background: #374151 !important;
  color: #ffffff !important;
}

/* All text elements with specific colors in dark theme */
body.dark-theme div[style*="color: #1e293b"],
body.dark-theme span[style*="color: #1e293b"],
body.dark-theme h3[style*="color: #1e293b"],
body.dark-theme p[style*="color: #64748b"] {
  color: #ffffff !important;
}

/* Location indicators */
body.dark-theme span[style*="color: #059669"] {
  color: #10b981 !important;
  background: #064e3b !important;
}

/* Gradient text overrides */
body.dark-theme .gradient-text {
  background: linear-gradient(135deg, #46c1ff, #3aa8e6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Statistics numbers */
body.dark-theme div[style*="color: #00ff7a"] {
  color: #10b981 !important;
}

/* Emergency section */
body.dark-theme .emergency-section {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
}

body.dark-theme .emergency-section h2 {
  color: #ffffff !important;
}

body.dark-theme .emergency-section p {
  color: #ffffff !important;
}

/* Emergency Services Section - Fix background lines visibility */
body.dark-theme [style*="background: linear-gradient(135deg, #ef4444, #dc2626)"] {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

body.dark-theme [style*="background: linear-gradient(135deg, #ef4444, #dc2626)"] h3,
body.dark-theme [style*="background: linear-gradient(135deg, #ef4444, #dc2626)"] h4,
body.dark-theme [style*="background: linear-gradient(135deg, #ef4444, #dc2626)"] p,
body.dark-theme [style*="background: linear-gradient(135deg, #ef4444, #dc2626)"] span,
body.dark-theme [style*="background: linear-gradient(135deg, #ef4444, #dc2626)"] div {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

/* Emergency Services grid items */
body.dark-theme [style*="background: linear-gradient(135deg, #ef4444, #dc2626)"] [style*="display: grid"] div {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

/* News section */
body.dark-theme .news-section {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
  color: #ffffff !important;
}

body.dark-theme .news-section h2 {
  color: #46c1ff !important;
}

body.dark-theme .news-item {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
  color: #ffffff !important;
}

body.dark-theme .news-item h3 {
  color: #ffffff !important;
}

body.dark-theme .news-item p {
  color: #d1d5db !important;
}
/* Footer logo size fix */
.footer-logo img {
  max-width: 100px;
  height: auto;
  display: block;
  margin: 10px auto;
}

/* Hover effects for top menu */
.menu-top a {
  color: #000;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s, color 0.3s, text-decoration 0.3s;
}

.menu-top a:hover {
  transform: scale(1.1);
  text-decoration: underline;
  color: #A7BEAE;
}

/* Footer social icons */
.footer-social a {
  color: #000;
  font-size: 22px;
  margin: 0 8px;
  transition: transform 0.3s, color 0.3s;
}

.footer-social a:hover {
  transform: scale(1.2);
  color: #00ffff;
}

/* Footer links hover */
.footer-links a {
  background: #00ffff;
  color: #000;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 0 5px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s, background 0.3s, text-decoration 0.3s;
}

.footer-links a:hover {
  transform: scale(1.1);
  background: #00cccc;
  text-decoration: underline;
}
/* Footer centered layout */
.footer {
  background: var(--footer-bg);
  color: #000;
  padding: 24px 18px;
  margin-top: 0;
  text-align: center;
}

.footer-brand { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%;
  margin-bottom: 20px;
  min-height: 40px;
}
.footer-brand h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  padding: 8px 0;
}

/* =========================
   Modern Utility Classes
   ========================= */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.gradient-text {
  background: linear-gradient(135deg, var(--brand-green-1), var(--brand-green-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Loading animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading {
  animation: pulse 2s infinite;
}

/* Fade in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Additional responsive fixes for inline styles */
@media (max-width: 1024px) {
  /* Fix sections with fixed max-width */
  section[style*="max-width: 1400px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  div[style*="max-width: 1400px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Fix hero inner container */
  .hero-inner[style*="max-width: 1400px"] {
    padding: 0 16px !important;
  }
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
  .header-top,
  #header-container .header-top {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 12px !important;
    gap: 12px !important;
    min-height: auto !important;
  }
  
  .logo-link,
  #header-container .logo-link {
    width: 100% !important;
    justify-content: center !important;
    min-width: auto !important;
    height: auto !important;
    padding: 8px 0 !important;
    flex-wrap: wrap;
    white-space: normal;
    text-align: center;
    gap: 8px;
  }

  .logo-video,
  #header-container .logo-video {
    height: 45px !important;
    width: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
  }
  
  .logo-svg,
  #header-container .logo-svg {
    height: 26px !important;
    min-width: 90px !important;
  }
  
  .header-mid,
  #header-container .header-mid {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    width: 100%;
  }
  
  /* Mobile dropdown adjustments */
  .dropdown-content {
    min-width: 280px;
    max-width: 320px;
  }
  
  .dropdown-content a {
    font-size: 12px;
    padding: 6px 12px;
    line-height: 1.2;
  }
  
  .menu-top,
  #header-container .menu-top {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    min-width: auto !important;
  }
  
  #language.language-menu,
  #header-container #language.language-menu {
    min-width: 100px !important;
    max-width: 120px !important;
    font-size: 0.9rem !important;
    padding: 8px 32px 8px 12px !important;
    min-height: 42px !important;
    margin-left: auto !important;
  }
  
  .user-dropdown-container,
  #header-container .user-dropdown-container {
    order: -1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  #user-menu-btn,
  #header-container #user-menu-btn {
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
    width: auto !important;
  }
  
  #user-dropdown,
  #header-container #user-dropdown {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 180px !important;
  }
  
  #theme-toggle,
  #header-container #theme-toggle {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
  
  .city-container,
  #header-container .city-container {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
  }
  
  .city-select,
  #header-container .city-select {
    font-size: 14px !important;
  }
  
  .gps-btn,
  #header-container .gps-btn {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  
  .search-bar-container,
  #header-container .search-bar-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .search-input-wrapper,
  #header-container .search-input-wrapper {
    width: 100% !important;
  }
  
  .search-bar,
  #header-container .search-bar {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  
  .search-actions,
  #header-container .search-actions {
    gap: 4px !important;
  }
  
  .search-btn,
  #header-container .search-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 14px !important;
  }
  
  .icons,
  #header-container .icons {
    width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  
  .icons a,
  #header-container .icons a {
    width: 36px !important;
    height: 36px !important;
  }
  
  .icons img,
  #header-container .icons img {
    width: 36px !important;
    height: 36px !important;
  }
  
  .nav-bar,
  #header-container .nav-bar {
    padding: 8px 12px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.2) transparent !important;
    scroll-behavior: smooth !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .nav-bar::-webkit-scrollbar,
  #header-container .nav-bar::-webkit-scrollbar {
    height: 4px !important;
  }
  
  .nav-bar::-webkit-scrollbar-track,
  #header-container .nav-bar::-webkit-scrollbar-track {
    background: transparent !important;
  }
  
  .nav-bar::-webkit-scrollbar-thumb,
  #header-container .nav-bar::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2) !important;
    border-radius: 2px !important;
  }
  
  .nav-bar .nav-link,
  .nav-bar .nav-link-action,
  #header-container .nav-bar .nav-link,
  #header-container .nav-bar .nav-link-action {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    min-height: 56px !important;
    max-width: 100px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .menu-top span {
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
    display: block;
  }

  .header-info-note {
    font-size: 0.85rem;
    margin-right: 0;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
    flex-wrap: wrap;
  }
  .header-info-note .header-info-text{
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
  }
  .header-info-note .header-info-line{
    display: block;
  }
  
  .menu-top span.header-info-note {
    display: inline-flex;
    justify-content: center;
  }

  .header-whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    flex-wrap: wrap;
    line-height: 1.4;
  }

  .header-whatsapp span {
    display: block;
  }

  .slideshow {
    height: 300px;
    margin: 12px;
    border-radius: 12px;
  }
  
  .search-bar-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .search-input-wrapper {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .search-bar {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 15px !important;
    padding: 15px 110px 15px 14px !important;
    height: auto !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
  }

  .search-input-wrapper {
    position: relative !important;
  }

  .search-actions {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }

  .search-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    min-width: 32px !important;
  }

  .search-actions {
    right: 6px;
  }

  .city-container {
    width: 100%;
    min-width: unset;
  }

  .hero-section {
    padding: 36px 16px !important;
  }

  .hero-title {
    font-size: clamp(2.2rem, 8vw, 2.6rem) !important;
    line-height: 1.25 !important;
  }

  .hero-subtitle {
    font-size: clamp(1rem, 4.5vw, 1.15rem) !important;
    line-height: 1.6 !important;
    margin-top: 12px;
  }

  .health-checkup-section {
    padding: 36px 16px !important;
  }

  .health-checkup-highlight {
    padding: 32px !important;
  }

  .health-checkup-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px 16px 16px !important;
  }

  .health-checkup-grid > div {
    padding: 24px 20px !important;
  }

  .features-section {
    padding: 36px 16px !important;
  }

  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .features-section .card {
    padding: 28px 20px !important;
  }

  .why-section {
    padding: 36px 16px !important;
  }

  .why-wrapper {
    text-align: left !important;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .card div[style*="width: 80px"] {
    width: 64px !important;
    height: 64px !important;
  }

  .card div[style*="font-size: 3rem"] {
    font-size: 2.4rem !important;
  }

  .nav-bar {
    position: static !important;
    top: auto !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px !important;
    padding: 10px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start;
  }

  .nav-bar .nav-link {
    flex: 0 0 auto;
    padding: 10px 12px !important;
    height: auto !important;
    min-height: 60px !important;
    text-align: center;
    font-size: 0.95rem !important;
    min-width: auto !important;
    max-width: 120px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #7c8fec !important;
  }

  .nav-bar .nav-link:hover,
  .nav-bar .nav-link:focus-visible {
    color: #0e7490;
    border-color: #7c8fec !important;
    background: rgba(124, 143, 236, 0.12);
    box-shadow: 0 2px 8px rgba(124, 143, 236, 0.2);
  }

  .nav-bar .nav-link-action {
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid #7c8fec !important;
    box-shadow: inset 0 0 0 0 rgba(14, 165, 233, 0.15);
    min-height: 60px !important;
    max-width: 120px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Featured services responsive layout */
  .featured-services div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Fix featured services cards grid */
  .features-section div[style*="display: grid"][style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Fix service cards padding on mobile */
  .card[style*="padding: 40px 30px"] {
    padding: 24px 20px !important;
  }

  /* Fix card headings on mobile */
  .card h3[style*="font-size: 1.8rem"] {
    font-size: 1.4rem !important;
  }

  /* Fix card descriptions on mobile */
  .card p[style*="font-size: 1rem"] {
    font-size: 0.9rem !important;
  }

  /* Fix health checkup highlight padding */
  .health-checkup-highlight[style*="padding: 50px"] {
    padding: 24px 16px !important;
  }

  /* Fix city information section */
  #city-information-section {
    padding: 24px 16px !important;
  }

  #city-information-section > div > div[style*="padding: 30px"] {
    padding: 20px 16px !important;
  }

  /* Fix city stats grid */
  #city-information-section div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Fix healthcare facilities grid */
  #city-information-section div[style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Fix walking ticker section */
  .walking-ticker-section {
    padding: 20px 16px !important;
  }

  /* Fix language menu on mobile */
  .language-menu {
    width: auto !important;
    max-width: 180px !important;
    min-width: 140px !important;
    font-size: 0.95rem !important;
    padding: 8px 38px 8px 14px !important;
    white-space: normal !important;
  }
  
  .language-menu option {
    font-size: 0.95rem !important;
    padding: 10px 12px !important;
    white-space: normal !important;
  }

  /* Fix icons container */
  .icons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px !important;
  }

  .icons a img {
    height: 32px !important;
  }

  /* Fix sections with large padding */
  section[style*="padding: 50px 20px"] {
    padding: 30px 16px !important;
  }

  section[style*="padding: 40px 20px"] {
    padding: 24px 16px !important;
  }

  /* Fix divs with large padding */
  div[style*="padding: 50px"] {
    padding: 24px 16px !important;
  }

  div[style*="padding: 40px 30px"] {
    padding: 24px 16px !important;
  }

  /* Fix headings with large font sizes */
  h1[style*="font-size: 3.5rem"] {
    font-size: clamp(2rem, 8vw, 2.5rem) !important;
  }

  h2[style*="font-size: 2rem"] {
    font-size: clamp(1.5rem, 6vw, 1.8rem) !important;
  }

  h3[style*="font-size: 1.8rem"] {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
  }

  /* Fix paragraphs with large font sizes */
  p[style*="font-size: 1.4rem"] {
    font-size: clamp(1rem, 4vw, 1.2rem) !important;
  }

  /* Fix buttons with large padding */
  div[style*="padding: 12px 28px"] {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }

  /* Fix grid gaps */
  div[style*="gap: 20px"] {
    gap: 16px !important;
  }

  /* Fix margin-bottom */
  div[style*="margin-bottom: 25px"] {
    margin-bottom: 16px !important;
  }

  /* Fix city header flex layout */
  #city-information-section div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }

  #city-information-section div[style*="text-align: right"] {
    text-align: left !important;
    width: 100% !important;
  }

  /* Fix info cards */
  .info-card[style*="padding: 20px"] {
    padding: 16px !important;
  }

  /* Fix walking ticker */
  .walking-ticker-section {
    overflow-x: hidden !important;
  }

  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }

  html {
    overflow-x: hidden;
  }

  /* Fix dropdown positioning on mobile */
  .dropdown-content {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 32px) !important;
  }

  /* Fix user dropdown */
  #user-dropdown {
    right: 0 !important;
    left: auto !important;
    min-width: 180px !important;
    max-width: calc(100vw - 32px) !important;
  }

  /* Fix autocomplete dropdown */
  #autocomplete-dropdown {
    max-width: calc(100vw - 32px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Fix health widget on mobile */
  #health-tips-widget {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    left: 16px !important;
    right: 16px !important;
  }

  /* Fix modals on mobile */
  .modal,
  #appointment-modal > div {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 16px !important;
    padding: 20px 16px !important;
  }

  /* Fix any remaining fixed width elements */
  [style*="width: 80px"] {
    width: 60px !important;
  }

  [style*="width: 100px"] {
    width: 80px !important;
  }

  [style*="width: 150px"] {
    width: 120px !important;
  }

  [style*="width: 200px"] {
    width: 100% !important;
    max-width: 180px !important;
  }

  /* Fix min-width constraints */
  [style*="min-width: 200px"] {
    min-width: unset !important;
    width: 100% !important;
  }

  [style*="min-width: 300px"] {
    min-width: unset !important;
    width: 100% !important;
  }

  /* Fix max-width constraints that are too large */
  [style*="max-width: 1400px"] {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [style*="max-width: 800px"] {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [style*="max-width: 1240px"] {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Fix font sizes that are too large */
  [style*="font-size: 3rem"] {
    font-size: 2rem !important;
  }

  [style*="font-size: 2.5rem"] {
    font-size: 1.8rem !important;
  }

  [style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }

  /* Fix gaps and margins */
  [style*="gap: 30px"] {
    gap: 16px !important;
  }

  [style*="margin: 0 auto 25px"] {
    margin-bottom: 16px !important;
  }

  [style*="margin-bottom: 25px"] {
    margin-bottom: 16px !important;
  }

  [style*="margin-bottom: 32px"] {
    margin-bottom: 20px !important;
  }
}

@media (max-width: 480px) {
  /* Featured services single column on very small screens */
  .featured-services div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .header-top,
  #header-container .header-top {
    padding: 8px 10px !important;
    gap: 10px !important;
  }
  
  .logo-link,
  #header-container .logo-link {
    padding: 6px 0 !important;
  }
  
  .logo-video,
  #header-container .logo-video {
    height: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  
  .logo-svg,
  #header-container .logo-svg {
    height: 24px !important;
    min-width: 80px !important;
  }
  
  .menu-top,
  #header-container .menu-top {
    gap: 6px !important;
    justify-content: flex-end !important;
  }
  
  #language.language-menu,
  #header-container #language.language-menu {
    min-width: 90px !important;
    max-width: 110px !important;
    font-size: 0.85rem !important;
    padding: 6px 28px 6px 10px !important;
    min-height: 38px !important;
    margin-left: auto !important;
  }
  
  #user-menu-btn,
  #header-container #user-menu-btn {
    font-size: 0.8rem !important;
    padding: 5px 10px !important;
  }
  
  #theme-toggle,
  #header-container #theme-toggle {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }
  
  .header-mid,
  #header-container .header-mid {
    padding: 10px !important;
    gap: 8px !important;
  }
  
  .city-container,
  #header-container .city-container {
    padding: 6px 10px !important;
  }
  
  .city-select,
  #header-container .city-select {
    font-size: 13px !important;
  }
  
  .gps-btn,
  #header-container .gps-btn {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
  
  .search-bar,
  #header-container .search-bar {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
  
  .search-btn,
  #header-container .search-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 12px !important;
  }
  
  .icons a,
  .icons img,
  #header-container .icons a,
  #header-container .icons img {
    width: 32px !important;
    height: 32px !important;
  }
  
  .nav-bar,
  #header-container .nav-bar {
    padding: 6px 10px !important;
    gap: 6px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.2) transparent !important;
  }
  
  .nav-bar::-webkit-scrollbar,
  #header-container .nav-bar::-webkit-scrollbar {
    height: 3px !important;
  }
  
  .nav-bar .nav-link,
  .nav-bar .nav-link-action,
  #header-container .nav-bar .nav-link,
  #header-container .nav-bar .nav-link-action {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
    min-height: 52px !important;
    max-width: 90px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .menu-top span {
    font-size: 0.85rem;
  }

  .header-info-note {
    font-size: 0.8rem;
    gap: 6px;
  }
  .header-info-note .header-info-text{
    align-items: flex-start;
    gap: 2px;
  }
  
  .menu-top span.header-info-note {
    max-width: 320px;
    margin: 0 auto;
  }

  .language-menu {
    width: auto !important;
    max-width: 200px !important;
    min-width: 160px !important;
    font-size: 0.9rem !important;
    padding: 8px 36px 8px 12px !important;
    white-space: normal !important;
  }
  
  .language-menu option {
    font-size: 0.9rem !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .hero-title {
    font-size: clamp(1.9rem, 9vw, 2.2rem) !important;
  }

  .hero-subtitle {
    font-size: clamp(0.95rem, 4.5vw, 1.05rem) !important;
  }

  .health-checkup-highlight {
    padding: 24px !important;
  }

  .health-checkup-grid {
    padding: 0 12px 12px 12px !important;
  }

  .features-section .card {
    padding: 24px 18px !important;
  }

  .card div[style*="width: 80px"] {
    width: 56px !important;
    height: 56px !important;
  }

  .card div[style*="font-size: 3rem"] {
    font-size: 2.2rem !important;
  }

  .nav-bar {
    gap: 10px !important;
    padding: 8px 10px !important;
  }

  .nav-bar .nav-link {
    flex: 0 0 auto;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    text-align: center;
    min-height: 56px !important;
    max-width: 100px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nav-bar .nav-link-action {
    flex: 0 0 auto;
    min-height: 56px !important;
    max-width: 100px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Additional fixes for very small screens */
  .card[style*="padding: 40px 30px"] {
    padding: 20px 16px !important;
  }

  .card h3[style*="font-size: 1.8rem"] {
    font-size: 1.3rem !important;
  }

  .card p[style*="font-size: 1rem"] {
    font-size: 0.85rem !important;
  }

  .card div[style*="padding: 12px 28px"] {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
  }

  /* City stats single column on very small screens */
  #city-information-section div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Health checkup highlight */
  .health-checkup-highlight[style*="padding: 50px"] {
    padding: 20px 12px !important;
  }

  /* Fitness grid single column */
  .fitness-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

.footer-center {
  margin: 16px 0;
}

.footer-links {
  margin-bottom: 12px;
}

.footer-links a {
  background: #00ffff;
  color: #000;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 0 5px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s, background 0.3s, text-decoration 0.3s;
}

.footer-links a:hover {
  transform: scale(1.1);
  background: #00cccc;
  text-decoration: underline;
}

.footer-social a {
  color: #000;
  font-size: 22px;
  margin: 0 8px;
  transition: transform 0.3s, color 0.3s;
}

.footer-social a:hover {
  transform: scale(1.2);
  color: #00ffff;
}

.footer-copy {
  margin-top: 20px;
  font-size: 14px;
  color: #000;
}

/* Ensure footer elements use white text in dark mode ONLY */
body.dark-theme .footer-social a {
  color: #ffffff !important;  /* White text for visibility in dark mode */
}

body.dark-theme .footer-copy {
  color: #ffffff !important;  /* White text for visibility in dark mode */
}
/* Logo container: keep video + text side by side */
.logo {
  display: flex;
  align-items: center;   /* vertically center */
  gap: 30px;             /* space between video and text */
}

/* Logo text styling */
.logo-text {
  font-size: 28px;
  font-weight: bold;
  color: #00cc44;        /* green text */
  text-transform: uppercase;
}
/* Control video logo size */
.logo video {
  width: 90px;       /* adjust width (try 50–80px) */
  height: auto;      /* keep aspect ratio */
  border-radius: 6px; /* optional rounded edges */
}
.logo-text {
  font-size: 32px;       /* adjust size closer to old image */
  font-weight: 700;
  color: #00cc44;        /* bright green */
  text-transform: uppercase;
  position: relative;
  top: -55px;            /* matches old image vertical align */
}
.logo-link {
  text-decoration: none;   /* remove underline */
}

/* =========================
   Responsive Layout for Main Content Area
   ========================= */

/* Health Articles Hover Effects */
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  /* Stack slideshow and articles vertically on mobile */
  main {
    flex-direction: column !important;
    padding: 10px !important;
  }
  
  .slideshow,
  .health-articles {
    width: 100% !important;
    flex: none !important;
  }
  
  .health-articles {
    margin-top: 20px;
  }
  
  /* Adjust article cards for mobile */
  .article-card {
    padding: 12px !important;
  }
  
  .article-card h3 {
    font-size: 1rem !important;
  }
  
  .article-card p {
    font-size: 0.85rem !important;
  }
}

/* Additional tablet fixes for inline styles */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Fix sections with large padding */
  section[style*="padding: 50px 20px"] {
    padding: 40px 20px !important;
  }

  /* Fix divs with large padding */
  div[style*="padding: 50px"] {
    padding: 40px 24px !important;
  }

  div[style*="padding: 40px 30px"] {
    padding: 32px 24px !important;
  }

  /* Fix headings */
  h1[style*="font-size: 3.5rem"] {
    font-size: clamp(2.5rem, 5vw, 3rem) !important;
  }

  h2[style*="font-size: 2rem"] {
    font-size: clamp(1.6rem, 4vw, 1.9rem) !important;
  }

  h3[style*="font-size: 1.8rem"] {
    font-size: clamp(1.4rem, 3.5vw, 1.7rem) !important;
  }

  /* Fix paragraphs */
  p[style*="font-size: 1.4rem"] {
    font-size: clamp(1.1rem, 3vw, 1.3rem) !important;
  }

  /* Fix city header flex on tablet */
  #city-information-section div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 16px;
  }

  /* Fix autocomplete on tablet */
  #autocomplete-dropdown {
    max-width: 500px !important;
  }

  /* Fix font sizes on tablet */
  [style*="font-size: 3rem"] {
    font-size: 2.5rem !important;
  }

  [style*="font-size: 2.5rem"] {
    font-size: 2rem !important;
  }

  /* Fix gaps on tablet */
  [style*="gap: 30px"] {
    gap: 20px !important;
  }

  [style*="gap: 20px"] {
    gap: 18px !important;
  }
}

/* Tablet Responsive Styles */
@media (max-width: 1024px) and (min-width: 769px) {
  main {
    padding: 20px !important;
    gap: 20px !important;
  }
  
  .health-articles h2 {
    font-size: 1.5rem !important;
  }
  
  .article-card h3 {
    font-size: 1rem !important;
  }

  /* Header adjustments for tablet */
  .header-top,
  #header-container .header-top {
    padding: 12px 18px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    min-height: auto !important;
  }

  .header-mid,
  #header-container .header-mid {
    padding: 12px 18px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  
  /* Logo adjustments for tablet */
  .logo-link,
  #header-container .logo-link {
    min-width: auto !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
  
  .logo-video,
  #header-container .logo-video {
    height: 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }
  
  .logo-svg,
  #header-container .logo-svg {
    height: 28px !important;
    min-width: 100px !important;
  }
  
  /* Menu top adjustments for tablet */
  .menu-top,
  #header-container .menu-top {
    min-width: auto !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  
  #language.language-menu,
  #header-container #language.language-menu {
    min-width: 110px !important;
    max-width: 130px !important;
    font-size: 0.95rem !important;
    padding: 10px 36px 10px 14px !important;
    margin-left: auto !important;
  }
  
  /* City container for tablet */
  .city-container,
  #header-container .city-container {
    min-width: 180px !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
  
  /* Search bar for tablet */
  .search-bar-container,
  #header-container .search-bar-container {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  
  .search-bar,
  #header-container .search-bar {
    width: 100% !important;
    font-size: 14px !important;
  }
  
  /* Icons for tablet */
  .icons,
  #header-container .icons {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }
  
  /* Nav bar for tablet */
  .nav-bar,
  #header-container .nav-bar {
    padding: 10px 16px !important;
    gap: 10px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  /* Logo adjustments */
  .logo-video {
    height: 54px;
    width: 54px;
  }

  .logo-svg {
    height: 30px;
  }

  /* Search bar adjustments */
  .search-bar-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .search-input-wrapper {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .search-bar {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 15px !important;
  }

  .city-container {
    min-width: 200px;
  }

  /* Hero section adjustments */
  .hero-section {
    padding: 40px 20px !important;
  }

  .hero-title {
    font-size: clamp(2.5rem, 6vw, 3rem) !important;
  }

  .hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.3rem) !important;
  }

  /* Health checkup section */
  .health-checkup-section {
    padding: 40px 20px !important;
  }

  .health-checkup-highlight {
    padding: 40px 30px !important;
  }

  /* Fitness grid - 3 columns on tablet */
  .fitness-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  /* Featured services - 3 columns on tablet */
  .featured-services div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  .features-section div[style*="display: grid"][style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  /* Card adjustments */
  .card[style*="padding: 40px 30px"] {
    padding: 32px 24px !important;
  }

  .card h3[style*="font-size: 1.8rem"] {
    font-size: 1.6rem !important;
  }

  /* Navigation bar */
  .nav-bar {
    padding: 12px 18px !important;
  }

  .nav-bar .nav-link {
    padding: 10px 14px !important;
    font-size: 1rem !important;
    text-align: center;
    min-height: 60px !important;
    max-width: 140px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* City information section */
  #city-information-section {
    padding: 32px 20px !important;
  }

  #city-information-section div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  #city-information-section div[style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  /* Slideshow */
  .slideshow {
    height: 400px;
    margin: 16px;
  }
}

/* =========================
   Dark theme alert toggle switch
   ========================= */
body.dark-theme .slider {
  background-color: #4b5563 !important;
}

body.dark-theme .slider:before {
  background-color: #e5e7eb !important;
}

body.dark-theme .switch-icon {
  color: #9ca3af !important;
}

body.dark-theme input:checked + .slider {
  background-color: #10b981 !important;
}

body.dark-theme input:checked + .slider .switch-icon {
  color: white !important;
}

body.dark-theme .alert-switch:hover .slider {
  box-shadow: 0 0 8px rgba(255,255,255,0.1) !important;
}

body.dark-theme .alert-switch:hover input:checked + .slider {
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

/* =========================
   Dark theme comprehensive element overrides
   ========================= */

/* All sections with gradients */
body.dark-theme section[style*="background: linear-gradient"] {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
  color: #ffffff !important;
}

/* All h1, h2, h3, h4, h5, h6 in dark theme */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
  color: #ffffff !important;
}

/* All paragraphs and text in dark theme */
body.dark-theme p,
body.dark-theme span,
body.dark-theme div {
  color: #d1d5db !important;
}

/* All links in dark theme */
body.dark-theme a {
  color: #46c1ff !important;
}

body.dark-theme a:hover {
  color: #3aa8e6 !important;
}

/* All buttons in dark theme */
body.dark-theme button,
body.dark-theme .btn {
  background: #374151 !important;
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
}

body.dark-theme button:hover,
body.dark-theme .btn:hover {
  background: #4b5563 !important;
}

/* All form elements in dark theme */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
  background: #374151 !important;
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
  color: #9ca3af !important;
}

body.dark-theme input:focus,
body.dark-theme textarea:focus,
body.dark-theme select:focus {
  border-color: #46c1ff !important;
  box-shadow: 0 0 0 3px rgba(70, 193, 255, 0.1) !important;
}

/* All cards and containers in dark theme */
body.dark-theme .card,
body.dark-theme .container,
body.dark-theme .box {
  background: #374151 !important;
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
}

/* All lists in dark theme */
body.dark-theme ul,
body.dark-theme ol,
body.dark-theme li {
  color: #d1d5db !important;
}

/* All tables in dark theme */
body.dark-theme table {
  background: #374151 !important;
  color: #ffffff !important;
}

body.dark-theme th,
body.dark-theme td {
  background: #374151 !important;
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
}

/* All modals and overlays in dark theme */
body.dark-theme .modal,
body.dark-theme .overlay,
body.dark-theme .popup {
  background: #1f2937 !important;
  color: #ffffff !important;
  border: 1px solid #374151 !important;
}

/* All tooltips in dark theme */
body.dark-theme .tooltip {
  background: #1f2937 !important;
  color: #ffffff !important;
  border: 1px solid #374151 !important;
}

/* All badges and tags in dark theme */
body.dark-theme .badge,
body.dark-theme .tag {
  background: #4b5563 !important;
  color: #ffffff !important;
}

/* All progress bars in dark theme */
body.dark-theme .progress {
  background: #374151 !important;
}

body.dark-theme .progress-bar {
  background: #46c1ff !important;
}

/* All dividers and separators in dark theme */
body.dark-theme hr,
body.dark-theme .divider {
  border-color: #4b5563 !important;
  background-color: #4b5563 !important;
}

/* All shadows and borders in dark theme */
body.dark-theme * {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* =========================
   Dark theme comprehensive overrides for all inline styles
   ========================= */

/* Override all inline styles with dark theme colors */
body.dark-theme [style*="color: #1e293b"] {
  color: #ffffff !important;
}

body.dark-theme [style*="color: #64748b"] {
  color: #d1d5db !important;
}

body.dark-theme [style*="color: #00ff7a"] {
  color: #10b981 !important;
}

body.dark-theme [style*="color: #059669"] {
  color: #10b981 !important;
}

body.dark-theme [style*="color: #92400e"] {
  color: #fbbf24 !important;
}

body.dark-theme [style*="color: #dc2626"] {
  color: #fca5a5 !important;
}

body.dark-theme [style*="color: #b91c1c"] {
  color: #fca5a5 !important;
}

/* Background overrides */
body.dark-theme [style*="background: white"] {
  background: #374151 !important;
  color: #ffffff !important;
}

body.dark-theme [style*="background-color: white"] {
  background-color: #374151 !important;
  color: #ffffff !important;
}

body.dark-theme [style*="background: #f0f9ff"] {
  background: #1f2937 !important;
}

body.dark-theme [style*="background: #e0f2fe"] {
  background: #374151 !important;
}

body.dark-theme [style*="background: #f8fafc"] {
  background: #4b5563 !important;
}

body.dark-theme [style*="background: #fef3c7"] {
  background: #451a03 !important;
}

body.dark-theme [style*="background: #ecfdf5"] {
  background: #064e3b !important;
}

/* Specific section overrides */
body.dark-theme [style*="background: linear-gradient(135deg, #f0f9ff"] {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
  color: #ffffff !important;
}

/* Health checkup section */
body.dark-theme [style*="background: linear-gradient(135deg, #f0f9ff"] h3,
body.dark-theme [style*="background: linear-gradient(135deg, #f0f9ff"] h4,
body.dark-theme [style*="background: linear-gradient(135deg, #f0f9ff"] p {
  color: #ffffff !important;
}

/* Test areas in health checkup */
body.dark-theme [style*="background: #f8fafc"] {
  background: #4b5563 !important;
  color: #ffffff !important;
}

body.dark-theme [style*="background: #fef3c7"] {
  background: #451a03 !important;
  color: #fbbf24 !important;
}

/* All text elements in cards */
body.dark-theme [style*="background: white"] h3,
body.dark-theme [style*="background: white"] h4,
body.dark-theme [style*="background: white"] p,
body.dark-theme [style*="background: white"] div {
  color: #ffffff !important;
}

/* Location indicators */
body.dark-theme [style*="color: #059669"] {
  color: #10b981 !important;
  background: #064e3b !important;
}

/* Force all elements with specific colors to use dark theme equivalents */
body.dark-theme * {
  /* Override any remaining dark text colors */
  color: inherit;
}

/* Ensure all buttons in dark theme are visible */
body.dark-theme button[style*="background: linear-gradient"] {
  color: #ffffff !important;
}

/* Preserve original colors for health checkup start buttons in dark mode */
body.dark-theme button[style*="background: linear-gradient(135deg, #059669, #047857)"] {
  background: linear-gradient(135deg, #059669, #047857) !important;
}

body.dark-theme button[style*="background: linear-gradient(135deg, #dc2626, #b91c1c)"] {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}

body.dark-theme button[style*="background: linear-gradient(135deg, #3b82f6, #2563eb)"] {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
}

body.dark-theme button[style*="background: linear-gradient(135deg, #8b5cf6, #7c3aed)"] {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}

body.dark-theme button[style*="background: linear-gradient(135deg, #f59e0b, #d97706)"] {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

body.dark-theme button[style*="background: linear-gradient(135deg, #10b981, #059669)"] {
  background: linear-gradient(135deg, #10b981, #059669) !important;
}

/* Ensure all links are visible */
body.dark-theme a[style*="color"] {
  color: #46c1ff !important;
}

/* Ensure all form elements are visible */
body.dark-theme input[style*="color"],
body.dark-theme textarea[style*="color"],
body.dark-theme select[style*="color"] {
  color: #ffffff !important;
  background: #374151 !important;
}

/* =========================
   Dark theme health checkup notifications
   ========================= */

/* Health checkup important notification */
body.dark-theme [style*="background: rgba(255,255,255,0.7)"] {
  background: rgba(70, 193, 255, 0.1) !important;
  border: 1px solid #46c1ff !important;
}

body.dark-theme [style*="background: rgba(255,255,255,0.7)"] p {
  color: #ffffff !important;
}

body.dark-theme [style*="background: rgba(255,255,255,0.7)"] strong {
  color: #46c1ff !important;
}

/* Health checkup warning text */
body.dark-theme [style*="color: #64748b"][style*="font-size: 0.9rem"] {
  color: #ffffff !important;
}

body.dark-theme [style*="color: #64748b"][style*="font-size: 0.8rem"] {
  color: #d1d5db !important;
}

/* =========================
   Dark theme comprehensive color overrides
   ========================= */

/* Override all specific color values that cause readability issues */
body.dark-theme [style*="color: #374151"] {
  color: #ffffff !important;
}

body.dark-theme [style*="color: #6b7280"] {
  color: #d1d5db !important;
}

body.dark-theme [style*="color: #9ca3af"] {
  color: #d1d5db !important;
}

body.dark-theme [style*="color: #d1d5db"] {
  color: #ffffff !important;
}

body.dark-theme [style*="color: #f3f4f6"] {
  color: #ffffff !important;
}

body.dark-theme [style*="color: #f9fafb"] {
  color: #ffffff !important;
}

/* Override all background colors that cause contrast issues */
body.dark-theme [style*="background: #f9fafb"] {
  background: #374151 !important;
}

body.dark-theme [style*="background: #f3f4f6"] {
  background: #4b5563 !important;
}

body.dark-theme [style*="background: #e5e7eb"] {
  background: #4b5563 !important;
}

body.dark-theme [style*="background: #d1d5db"] {
  background: #6b7280 !important;
}

/* Force all remaining text elements to be visible */
body.dark-theme [style*="opacity: 0.9"] {
  opacity: 1 !important;
  color: #ffffff !important;
}

body.dark-theme [style*="opacity: 0.8"] {
  opacity: 1 !important;
  color: #d1d5db !important;
}

body.dark-theme [style*="opacity: 0.7"] {
  opacity: 1 !important;
  color: #d1d5db !important;
}

/* Ensure all result text is visible */
body.dark-theme [style*="font-size: 0.9rem"] {
  color: #ffffff !important;
}

body.dark-theme [style*="font-size: 0.8rem"] {
  color: #d1d5db !important;
}

/* Force all timer and display elements to be visible */
body.dark-theme [style*="font-size: 2rem"] {
  color: #ffffff !important;
}

body.dark-theme [style*="font-size: 1.5rem"] {
  color: #ffffff !important;
}

/* Ensure all instruction text is visible */
body.dark-theme [style*="font-size: 0.9rem"][style*="color: #92400e"] {
  color: #fbbf24 !important;
}

/* Balance Test Card - Force all text to white */
body.dark-theme [style*="background: white"][style*="border-radius: 12px"][style*="padding: 20px"] h4,
body.dark-theme [style*="background: white"][style*="border-radius: 12px"][style*="padding: 20px"] p,
body.dark-theme [style*="background: white"][style*="border-radius: 12px"][style*="padding: 20px"] div {
  color: #ffffff !important;
}

/* Balance Test Card background */
body.dark-theme [style*="background: white"][style*="border-radius: 12px"][style*="padding: 20px"] {
  background: #374151 !important;
}

/* Balance Test instructions box */
body.dark-theme [style*="background: #fef3c7"] {
  background: #374151 !important;
  color: #ffffff !important;
}

/* Specific rule for balance instructions text */
body.dark-theme #balance-instructions {
  background: #374151 !important;
  color: #ffffff !important;
}

/* Override any inline styles on balance instructions */
body.dark-theme div[style*="color: #92400e"] {
  color: #ffffff !important;
}

body.dark-theme [style*="background: #fef3c7"] * {
  color: #ffffff !important;
}

/* Balance Test Card - Specific targeting for all text elements */
body.dark-theme [style*="background: white"][style*="text-align: center"] {
  background: #374151 !important;
}

body.dark-theme [style*="background: white"][style*="text-align: center"] h4,
body.dark-theme [style*="background: white"][style*="text-align: center"] p,
body.dark-theme [style*="background: white"][style*="text-align: center"] div,
body.dark-theme [style*="background: white"][style*="text-align: center"] span {
  color: #ffffff !important;
}

/* Balance Test result text */
body.dark-theme #balance-result {
  color: #ffffff !important;
}

/* Balance Test button text (already white) */
body.dark-theme [style*="background: white"][style*="text-align: center"] button {
  color: #ffffff !important;
}

/* Force all remaining elements with specific colors */
body.dark-theme [style*="color: #111827"] {
  color: #ffffff !important;
}

body.dark-theme [style*="color: #374151"] {
  color: #ffffff !important;
}

body.dark-theme [style*="color: #4b5563"] {
  color: #ffffff !important;
}

body.dark-theme [style*="color: #6b7280"] {
  color: #d1d5db !important;
}

body.dark-theme [style*="color: #9ca3af"] {
  color: #d1d5db !important;
}

/* =========================
   Dark theme force overrides for all remaining elements
   ========================= */

/* Force all remaining text elements to be visible (excluding footer which has its own rules) */
body.dark-theme div:not(.footer):not(.footer *),
body.dark-theme span:not(.footer):not(.footer *),
body.dark-theme p:not(.footer):not(.footer *),
body.dark-theme h1:not(.footer):not(.footer *),
body.dark-theme h2:not(.footer):not(.footer *),
body.dark-theme h3:not(.footer):not(.footer *),
body.dark-theme h4:not(.footer):not(.footer *),
body.dark-theme h5:not(.footer):not(.footer *),
body.dark-theme h6:not(.footer):not(.footer *) {
  color: #ffffff !important;
}

/* Ensure all sections have proper backgrounds */
body.dark-theme section {
  background: #1f2937 !important;
  color: #ffffff !important;
}

/* Ensure all containers have proper backgrounds */
body.dark-theme .container,
body.dark-theme .content,
body.dark-theme .wrapper {
  background: #1f2937 !important;
  color: #ffffff !important;
}

/* Ensure all grids and flex containers are visible */
body.dark-theme [style*="display: grid"],
body.dark-theme [style*="display: flex"] {
  color: #ffffff !important;
}

/* Force override any remaining opacity issues */
body.dark-theme [style*="opacity"] {
  opacity: 1 !important;
}

/* Ensure all interactive elements are visible */
body.dark-theme button,
body.dark-theme a,
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
  color: #ffffff !important;
}

/* Special handling for elements with specific styles */
body.dark-theme [style*="font-weight: 800"],
body.dark-theme [style*="font-weight: 700"],
body.dark-theme [style*="font-weight: 600"] {
  color: #ffffff !important;
}

/* Ensure all emoji and icon containers are visible */
body.dark-theme [style*="font-size: 3rem"],
body.dark-theme [style*="font-size: 2.5rem"],
body.dark-theme [style*="font-size: 2rem"] {
  color: #ffffff !important;
}

/* Force all list items to be visible */
body.dark-theme li,
body.dark-theme ul li,
body.dark-theme ol li {
  color: #ffffff !important;
}

/* Ensure all table elements are visible */
body.dark-theme table,
body.dark-theme th,
body.dark-theme td,
body.dark-theme tr {
  background: #374151 !important;
  color: #ffffff !important;
  border-color: #4b5563 !important;
}

/* Force all remaining elements to use dark theme colors */
body.dark-theme *:not(.footer):not(.footer *) {
  /* This ensures any remaining elements get proper dark theme styling */
  color: inherit;
}

/* =========================
   Dark theme final comprehensive fixes
   ========================= */

/* Force all text elements to be visible in dark theme */
body.dark-theme {
  color: #ffffff !important;
}

/* Override any remaining color issues */
body.dark-theme * {
  color: inherit;
}

/* Ensure all text content is visible */
body.dark-theme p,
body.dark-theme span,
body.dark-theme div,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
  color: #ffffff !important;
}

/* Override any remaining background issues */
body.dark-theme [style*="background"] {
  color: #ffffff !important;
}

/* Force all inline styled elements to be visible */
body.dark-theme [style] {
  color: #ffffff !important;
}

/* Ensure all remaining elements have proper contrast */
body.dark-theme *:not(.footer):not(.footer *):not(.nav-bar):not(.nav-bar *) {
  color: #ffffff !important;
}

/* All scrollbars in dark theme */
body.dark-theme ::-webkit-scrollbar {
  background: #1f2937 !important;
}

body.dark-theme ::-webkit-scrollbar-thumb {
  background: #4b5563 !important;
}

body.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: #6b7280 !important;
}

/* All selection text in dark theme */
body.dark-theme ::selection {
  background: #46c1ff !important;
  color: #000000 !important;
}

body.dark-theme ::-moz-selection {
  background: #46c1ff !important;
  color: #000000 !important;
}

/* =========================
   Dark theme upload page
   ========================= */
body.dark-theme .upload-container {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: #ffffff !important;
}

body.dark-theme .upload-title {
  color: #F96167 !important;
}

body.dark-theme .upload-subtitle {
  color: #d1d5db !important;
}

body.dark-theme .upload-section h3 {
  color: #F96167 !important;
}

body.dark-theme .upload-area {
  background: #374151 !important;
  border: 2px dashed #4b5563 !important;
  color: #e5e7eb !important;
}

body.dark-theme .upload-area:hover {
  border-color: #F96167 !important;
  background: #4b5563 !important;
}

body.dark-theme .upload-area.dragover {
  border-color: #F96167 !important;
  background: #4b5563 !important;
}

body.dark-theme .upload-icon {
  color: #9ca3af !important;
}

body.dark-theme .upload-text {
  color: #d1d5db !important;
}

body.dark-theme .upload-hint {
  color: #9ca3af !important;
}

body.dark-theme .upload-btn {
  background: #F96167 !important;
  color: white !important;
}

body.dark-theme .upload-btn:hover {
  background: #e5555a !important;
}

body.dark-theme .prescription-preview {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
  color: #ffffff !important;
}

body.dark-theme .prescription-preview h4 {
  color: #F96167 !important;
}

body.dark-theme .medicine-item {
  background: #1f2937 !important;
  border: 1px solid #4b5563 !important;
  color: #ffffff !important;
}

body.dark-theme .medicine-name {
  color: #ffffff !important;
}

body.dark-theme .medicine-details {
  color: #d1d5db !important;
}

body.dark-theme .process-btn {
  background: #10b981 !important;
  color: white !important;
}

body.dark-theme .process-btn:hover {
  background: #059669 !important;
}

body.dark-theme .back-link {
  background: #6b7280 !important;
  color: white !important;
}

body.dark-theme .back-link:hover {
  background: #4b5563 !important;
}

/* =========================
   Dark theme alert method options
   ========================= */
body.dark-theme .method-option {
  background: #374151 !important;
  border: 2px solid #4b5563 !important;
  color: #ffffff !important;
}

body.dark-theme .method-option:hover {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
}

body.dark-theme .method-option:has(input[type="checkbox"]:checked) {
  background: #1e3a8a !important;
  border-color: #7c8fec !important;
}

body.dark-theme .method-text {
  color: #e5e7eb !important;
}

body.dark-theme .method-option input[type="checkbox"]:checked + .method-icon + .method-text {
  color: #60a5fa !important;
}