/* Performance Optimization: Rendering improvements */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optimize animations for better performance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* GPU acceleration for transforms */
.ticker-content, .hero-section, .card, .info-card {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optimize rendering for off-screen content */
/* Lazy load images placeholder */
img[loading="lazy"] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes slideDown {
  0% {
    opacity: 0;
    max-height: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    max-height: 1000px;
    transform: translateY(0);
  }
}

img[loading="lazy"]:not([src]) {
  min-height: 100px;
}

/* ==========================================
   MICRO-INTERACTIONS (#18)
   ========================================== */

/* Ripple effect for buttons */
button, .btn, a[onclick] {
  position: relative;
  overflow: hidden;
}

button::after, .btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

button:active::after, .btn:active::after {
  width: 300px;
  height: 300px;
}

/* Card tilt effect on hover */
.info-card, .card, .service-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover, .card:hover, .service-card:hover {
  transform: perspective(1000px) rotateY(2deg) rotateX(-2deg) translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
}

/* Icon animations */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.icon-animate:hover {
  animation: iconBounce 0.6s ease;
}

/* Smooth transitions everywhere */
a, button, .card, .info-card, input, select, textarea {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover glow effect */
.glow-on-hover:hover {
  box-shadow: 0 0 20px rgba(0, 255, 122, 0.6), 0 0 40px rgba(0, 255, 122, 0.4);
}

/* ==========================================
   ACCESSIBILITY FEATURES (#19)
   ========================================== */

/* Skip to main content link - visible on focus */
.skip-to-main:focus {
  top: 0 !important;
  outline: 3px solid #00ff7a;
  outline-offset: 2px;
}

/* Keyboard focus indicators */
*:focus-visible {
  outline: 3px solid #14beff;
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #14beff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(20, 190, 255, 0.2);
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    border-width: 2px !important;
  }
}

/* Focus within - highlight parent when child has focus */
.search-bar-container:focus-within {
  outline: none;
}

.search-bar:focus {
  outline: 2px solid #14beff;
  outline-offset: 2px;
  border-color: #14beff;
}

/* Keyboard navigation helper */
.keyboard-nav-active *:focus {
  outline: 3px dashed #00ff7a;
  outline-offset: 3px;
}

/* CRITICAL: Prevent all drag behavior globally */
html, body, * {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  -webkit-user-drag: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -o-user-select: none !important;
  user-select: none !important;
}

/* Allow text selection for input fields and content areas */
input, textarea, .content-area, .info-card p, .info-card h3, .info-card h4 {
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -o-user-select: text !important;
  user-select: text !important;
}

/* Walking Ticker Animations */
    @keyframes scrollContinuous {
      0% { transform: translateX(5%); }
      100% { transform: translateX(-295%); }
    }

/* Delayed start animation */
@keyframes scrollContinuousDelayed {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Ticker hover effects */
.walking-ticker-section:hover .ticker-content {
  animation-play-state: paused;
}

.ticker-text:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Pause animation when hovering over individual images */
.ticker-content img:hover {
  animation-play-state: paused !important;
}

/* Pause animation when hovering over text elements */
.ticker-text:hover {
  animation-play-state: paused !important;
}

/* Pause entire ticker when hovering over any element */
.ticker-content:hover {
  animation-play-state: paused !important;
}

/* Make text clickable */
.ticker-text {
  cursor: pointer;
}

/* Hero Section Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}


/* GPS Button Styling */
.gps-btn {
  background: linear-gradient(135deg, #00ff7a, #00c95a);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,255,122,0.3);
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gps-btn i {
  color: white;
}

.gps-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,255,122,0.4);
  background: linear-gradient(135deg, #00c95a, #00ff7a);
}

.gps-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,255,122,0.3);
}

.gps-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* GPS Button - Manual Selection State (Red) */
.gps-btn.manual-selected {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important;
}

.gps-btn.manual-selected:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  box-shadow: 0 4px 12px rgba(239,68,68,0.4) !important;
}

.gps-btn.manual-selected i {
  color: white !important;
}

/* GPS Button - GPS Selection State (Original Green - default) */
.gps-btn.gps-selected {
  background: linear-gradient(135deg, #00ff7a, #00c95a) !important;
  box-shadow: 0 2px 8px rgba(0,255,122,0.3) !important;
}

.gps-btn.gps-selected:hover {
  background: linear-gradient(135deg, #00c95a, #00ff7a) !important;
  box-shadow: 0 4px 12px rgba(0,255,122,0.4) !important;
}

.gps-btn.gps-selected i {
  color: white !important;
}

/* Navigation Bar Professional Styling */
.nav-bar a {
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 80px;
  text-decoration: none;
  text-align: center;
  color: #374151;
  background: rgba(255,255,255,0.7);
  border: 2px solid #7c8fec;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-bar a:hover {
  background: linear-gradient(135deg, #00ff7a, #00c95a);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,255,122,0.3);
  border-color: #7c8fec;
}

/* Prevent drag behavior on interactive elements */
.nav-bar a,
.nav-bar button,
.header-top a,
.logo-link,
.logo-video,
.logo-svg,
button,
.dropdown-toggle,
.dropdown-content a {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* Allow text selection for content areas */
.content-area,
.info-card p,
.info-card h3,
.info-card h4 {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text;
}

/* Comprehensive drag prevention */
*, *::before, *::after {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  -webkit-user-drag: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -o-user-select: none !important;
  user-select: none !important;
}

/* Allow text selection for content areas */
.content-area,
.info-card p,
.info-card h3,
.info-card h4,
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -o-user-select: text !important;
  user-select: text !important;
}

/* Prevent all drag events */
img, video, svg, a, button, div, span {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  -webkit-user-drag: none !important;
  pointer-events: auto !important;
}

/* Specific prevention for logo and header elements */
.logo-link,
.logo-video,
.logo-svg,
.header-top,
.header-mid,
.nav-bar,
.city-container,
.search-bar-container,
.icons {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  -webkit-user-drag: none !important;
}

.nav-bar .dropdown-toggle {
  position: relative;
}

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

/* Ensure hover pause works on all ticker elements */
.walking-ticker-section:hover .ticker-content {
  animation-play-state: paused !important;
}

/* Responsive design for three-column layout */
@media (max-width: 1200px) {
  main {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
}

@media (max-width: 768px) {
  main {
    padding: 15px !important;
    gap: 15px !important;
  }
  
}

@media (max-width: 480px) {
  main {
    padding: 10px !important;
    gap: 10px !important;
  }
  
}


/* Professional Cards Responsive Design */
@media (max-width: 768px) {
  .info-card {
    padding: 15px !important;
  }
  
  .info-card h3 {
    font-size: 1.3rem !important;
  }
  
  .info-card button {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
  }
  
  .info-card div[style*="display: flex; gap: 12px; justify-content: flex-end"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .info-card div[style*="display: flex; flex-wrap: wrap; gap: 6px"] {
    gap: 4px !important;
  }
  
  .info-card span[style*="background: #f0f9ff"] {
    font-size: 0.7rem !important;
    padding: 3px 6px !important;
  }
}

/* Appointment Modal Responsive Design */
@media (max-width: 768px) {
  #appointment-modal > div {
    width: 95% !important;
    max-width: none !important;
    margin: 10px !important;
    max-height: 95vh !important;
  }
  
  #appointment-modal .modal-body {
    padding: 20px !important;
  }
  
  #appointment-modal .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  #appointment-modal input,
  #appointment-modal select,
  #appointment-modal textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  #appointment-modal .button-group {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  #appointment-modal .button-group button {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .info-card {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  
  .info-card h4 {
    font-size: 1.1rem !important;
  }
  
  .info-card p {
    font-size: 0.8rem !important;
  }
  
  .info-card button {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }
}

/* Search Actions Styling */
.search-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.search-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #6b7280;
  font-size: 15px;
  outline: none;
  position: relative;
}

.search-btn:hover {
  background: rgba(255, 255, 255, 1);
  border-color: #14beff;
  color: #14beff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(20, 190, 255, 0.2);
}

.search-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(20, 190, 255, 0.2);
}

.search-btn:focus-visible {
  outline: 2px solid #14beff;
  outline-offset: 2px;
}

.search-btn i {
  pointer-events: none;
}


/* Voice Search Button - Listening State */
#voice-search-btn.listening {
  background: #ef4444 !important;
  border-color: #dc2626 !important;
  color: white !important;
  animation: voicePulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}

@keyframes voicePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

#voice-search-btn.listening:hover {
  background: #dc2626 !important;
  border-color: #b91c1c !important;
}

/* Dark theme search buttons */
body.dark-theme .search-btn {
  background: rgba(31, 41, 55, 0.9);
  border-color: #4b5563;
  color: #9ca3af;
}

body.dark-theme .search-btn:hover {
  background: rgba(31, 41, 55, 1);
  border-color: #14beff;
  color: #14beff;
}

body.dark-theme #voice-search-btn.listening {
  background: #ef4444 !important;
  border-color: #dc2626 !important;
  color: white !important;
}

/* Responsive adjustments for search bar */
@media (max-width: 1024px) {
  .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;
  }
}

@media (max-width: 768px) {
  .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;
    position: relative !important;
  }

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

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

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

  .search-btn i {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .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;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .search-bar {
    width: 100% !important;
    min-width: 0 !important;
    padding: 15px 100px 15px 14px !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 50px !important;
    border-radius: 12px !important;
    border: 2px solid #cbd5e1 !important;
    box-sizing: border-box !important;
  }

  .search-actions {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    gap: 2px !important;
    align-items: center !important;
    z-index: 10 !important;
  }

  .search-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
    padding: 0 !important;
    min-width: 28px !important;
    flex-shrink: 0 !important;
  }

  .search-btn i {
    font-size: 12px !important;
  }
}

/* Online health checkup cards (shared with Fitness page) */
.fitness-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.fitness-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fitness-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

@media (max-width: 1200px) {
  .fitness-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .fitness-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .fitness-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .search-bar-container {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .search-bar-container {
    max-width: 100% !important;
  }
}

/* Date Input Styling - Hide default text when empty */
input[type="date"]:not(:focus):invalid {
  color: transparent;
}
input[type="date"]:focus:invalid {
  color: #1f2937;
}

/* Hide keyboard shortcuts button and modal */
#show-shortcuts-btn,
#keyboard-shortcuts-modal {
  display: none !important;
}

/* Search Input Wrapper - Position relative for dropdown */
.search-input-wrapper {
position: relative;
width: 100%;
}

/* Autocomplete Dropdown */
#autocomplete-dropdown {
display: none !important;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 2px solid #e5e7eb;
border-top: none;
border-radius: 0 0 12px 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
max-height: 400px;
overflow-y: auto;
z-index: 1000;
margin-top: -2px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

#autocomplete-dropdown.show {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
animation: slideDown 0.2s ease-out;
}

/* Ensure dropdown is visible when shown */
#autocomplete-dropdown.show[style*="display: block"] {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}

@keyframes slideDown {
from {
  opacity: 0;
  transform: translateY(-10px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

@keyframes slideUp {
from {
  opacity: 1;
  transform: translateY(0);
}
to {
  opacity: 0;
  transform: translateY(-10px);
}
}

#autocomplete-dropdown::-webkit-scrollbar {
width: 6px;
}

#autocomplete-dropdown::-webkit-scrollbar-track {
background: #f1f5f9;
}

#autocomplete-dropdown::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}

#autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}

/* Autocomplete Section Headers */
.autocomplete-section-header {
padding: 10px 15px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.autocomplete-section {
display: none !important;
}

.autocomplete-section.show {
display: block !important;
}

/* Autocomplete Items */
.autocomplete-item {
padding: 12px 15px;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: center;
gap: 12px;
position: relative;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
padding-left: 20px;
}

.autocomplete-item:active {
background: linear-gradient(135deg, #e0f2fe, #bae6fd);
}

.autocomplete-item:last-child {
border-bottom: none;
}

.autocomplete-icon {
font-size: 1.2rem;
width: 24px;
text-align: center;
flex-shrink: 0;
}


.popular-badge {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.65rem;
font-weight: 600;
margin-left: auto;
flex-shrink: 0;
}

/* Empty State */
.autocomplete-empty {
padding: 30px 15px;
text-align: center;
color: #64748b;
font-size: 0.875rem;
}

.autocomplete-empty-icon {
font-size: 2rem;
margin-bottom: 8px;
opacity: 0.5;
}

/* Loading State */
.autocomplete-loading {
padding: 20px;
text-align: center;
color: #64748b;
font-size: 0.875rem;
}

.autocomplete-loading::after {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-left: 8px;
border: 2px solid #e5e7eb;
border-top-color: #14beff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
vertical-align: middle;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

/* Dark Theme Support */
body.dark-theme #autocomplete-dropdown {
background: #1f2937;
border-color: #4b5563;
}

body.dark-theme .autocomplete-section-header {
background: #111827;
border-color: #374151;
color: #9ca3af;
}

body.dark-theme .autocomplete-item {
border-color: #374151;
}

body.dark-theme .autocomplete-item:hover,
body.dark-theme .autocomplete-item.highlighted {
background: linear-gradient(135deg, #1e3a5f, #1e4a7a);
}

.autocomplete-text {
flex: 1;
min-width: 0;
}

.autocomplete-name {
font-size: 0.95rem;
font-weight: 500;
color: #1e293b;
margin-bottom: 2px;
line-height: 1.4;
}

.autocomplete-type {
font-size: 0.8rem;
color: #64748b;
line-height: 1.3;
}

body.dark-theme .autocomplete-name {
color: #f3f4f6;
}

body.dark-theme .autocomplete-empty,
body.dark-theme .autocomplete-loading {
color: #9ca3af;
}

/* ==========================================
   Inline CSS from body (line 1194)
   ========================================== */
/* Hide Health Articles section (full section with categories) - not ready yet */
.health-articles {
  display: none !important;
}

@media (max-width: 768px) {
  .health-articles {
    padding: 40px 15px !important;
  }
  
  .health-articles h2 {
    font-size: 2.2rem !important;
  }
  
  .article-category {
    padding: 20px !important;
  }
  
  .article-category h3 {
    font-size: 1.4rem !important;
  }
  
  .featured-article {
    padding: 20px !important;
  }
  
  .featured-article h4 {
    font-size: 1.1rem !important;
  }
}

@media (max-width: 480px) {
  .health-articles h2 {
    font-size: 1.8rem !important;
  }
  
  .article-category {
    padding: 15px !important;
  }
  
  .featured-article {
    padding: 15px !important;
  }
}

/* ==========================================
   Inline CSS from body (line 1511)
   ========================================== */
/* New Health Checkup Section - 4 cards in one row */
#new-health-checkup-grid {
grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1200px) {
#new-health-checkup-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}

@media (max-width: 768px) {
#new-health-checkup-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
}

@media (max-width: 480px) {
#new-health-checkup-grid {
grid-template-columns: 1fr !important;
}
}

/* ==========================================
   Inline CSS from body (line 1805)
   ========================================== */
/* Footer link styles - Touch-friendly for mobile and tablet */
/* Desktop: Legal links on right (handled by footer.css) - NO RULES HERE FOR DESKTOP */
/* Mobile: Center legal links */
@media (max-width: 768px) {
.footer .legal-links {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
overflow-x: visible !important;
}
}

/* Force legal links to stay in one row - override any inline styles */
.footer .legal-links[style*="flex-wrap"] {
flex-wrap: nowrap !important;
}

.footer .legal-links a.footer-link {
color: #94a3b8 !important;
text-decoration: none !important;
font-size: 1rem !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(0, 255, 122, 0.3) !important;
touch-action: manipulation !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 6px 8px !important;
min-height: 44px !important;
min-width: auto !important;
pointer-events: auto !important;
z-index: 10 !important;
position: relative !important;
border-radius: 6px !important;
white-space: nowrap !important;
}

.footer .legal-links a.footer-link:hover {
color: #00ff7a !important;
background-color: rgba(0, 255, 122, 0.1) !important;
}

.footer .legal-links a.footer-link:active {
color: #00ff7a !important;
background-color: rgba(0, 255, 122, 0.2) !important;
transform: scale(0.95) !important;
}

.footer .legal-links a.footer-link:focus {
outline: 2px solid #00ff7a !important;
outline-offset: 2px !important;
}

/* Footer responsive fixes for mobile and tablet */
@media (max-width: 1024px) {
.footer {
padding: 30px 16px 20px !important;
overflow-x: hidden !important;
}

.footer > div[style*="max-width: 1400px"] {
max-width: 100% !important;
padding: 0 !important;
}

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

/* Remove negative margins on tablet */
.footer div[style*="margin-left: -40px"],
.footer div[style*="margin-left: -22px"],
.footer div[style*="margin-left: -50px"] {
margin-left: 0 !important;
}

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

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

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

/* Fix contact info alignment */
.footer div[style*="margin-left: 22px"] {
margin-left: 0 !important;
text-align: left !important;
}

/* Center app download section on tablet */
.footer div[style*="display: flex"][style*="gap: 12px"][style*="flex-wrap: wrap"] {
justify-content: center !important;
margin-left: 0 !important;
}

/* Center contact info on tablet */
.footer div[style*="margin-left: 70px"][style*="display: flex"][style*="flex-direction: column"] {
align-items: center !important;
margin-left: 0 !important;
}
}

@media (max-width: 768px) {
.footer {
padding: 25px 15px 20px !important;
overflow-x: hidden !important;
}

.footer > div[style*="max-width: 1400px"] {
max-width: 100% !important;
padding: 0 !important;
}

/* Stack all columns on mobile */
.footer div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 20px !important;
padding-left: 0 !important;
}

/* Reduce logo size on mobile */
.footer video[style*="width: 50px"] {
width: 45px !important;
height: 45px !important;
margin-right: 12px !important;
}

.footer svg[role="img"] {
height: 28px !important;
}

/* Keep heading sizes - only reduce margins */
.footer h4 {
font-size: 1.15rem !important;
margin-bottom: 12px !important;
margin-top: 0 !important;
}

/* Keep paragraph and text sizes - only reduce margins */
.footer p {
font-size: 0.95rem !important;
margin-bottom: 8px !important;
line-height: 1.5 !important;
}

/* Keep link sizes */
.footer a[style*="font-size: 1rem"] {
font-size: 0.95rem !important;
}

/* Reduce gaps in flex containers */
.footer div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 12px"] {
gap: 8px !important;
}

/* Reduce app download section spacing */
.footer div[style*="margin-bottom: 20px"] {
margin-bottom: 12px !important;
}

/* Keep social media icon size */
.footer a[style*="font-size: 1.5rem"] {
font-size: 1.3rem !important;
}

/* Reduce app download images size */
.footer img[alt*="Google Play"],
.footer img[alt*="App Store"] {
height: 50px !important;
width: 155px !important;
object-fit: contain !important;
}

/* Reduce contact info spacing */
.footer div[style*="display: flex"][style*="align-items: center"][style*="gap: 12px"] {
gap: 8px !important;
margin-bottom: 8px !important;
}

/* Keep icon sizes in contact */
.footer i[style*="font-size: 1.2rem"] {
font-size: 1.1rem !important;
width: 20px !important;
}

/* Reduce social media section spacing */
.footer div[style*="margin-top: 25px"] {
margin-top: 15px !important;
}

/* Reduce spacing in company info section */
.footer > div > div > div:first-child {
margin-bottom: 12px !important;
}

/* Reduce logo margin */
.footer a[style*="margin-bottom: 15px"] {
margin-bottom: 10px !important;
margin-top: 0 !important;
}

/* Keep about section font size - only reduce spacing */
.footer p[style*="max-width: 300px"] {
max-width: 100% !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
}

/* Reduce quick links section spacing */
.footer div[style*="flex-direction: column"][style*="gap: 12px"] {
gap: 8px !important;
}

/* Reduce app download badge gap */
.footer div[style*="gap: 12px"][style*="flex-wrap: wrap"][style*="opacity: 0.6"] {
gap: 8px !important;
margin-bottom: 10px !important;
}

/* Reduce social media icons gap */
.footer div[style*="gap: 15px"][style*="justify-content: center"] {
gap: 10px !important;
margin-bottom: 10px !important;
}

/* Remove all negative margins on mobile */
.footer *[style*="margin-left: -40px"],
.footer *[style*="margin-left: -22px"],
.footer *[style*="margin-left: -50px"],
.footer *[style*="margin-left: 70px"] {
margin-left: 0 !important;
}

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

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

/* Center align app download section */
.footer div[style*="text-align: center"][style*="margin-left: -40px"] {
margin-left: 0 !important;
text-align: center !important;
}

/* Fix app download images container - center on mobile */
.footer div[style*="display: flex"][style*="gap: 12px"][style*="margin-left: -40px"] {
margin-left: 0 !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}

/* Center app download images */
.footer div[style*="display: flex"][style*="gap: 12px"][style*="flex-wrap: wrap"] {
justify-content: center !important;
align-items: center !important;
margin-left: 0 !important;
width: 100% !important;
}

/* Fix contact info section */
.footer h4[style*="margin-left: 22px"] {
margin-left: 0 !important;
text-align: center !important;
}

/* Fix contact info container - center on mobile */
.footer div[style*="margin-left: 70px"][style*="display: flex"][style*="flex-direction: column"] {
margin-left: 0 !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
}

/* Center individual contact info items */
.footer div[style*="margin-left: 70px"] > div[style*="display: flex"] {
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
text-align: center !important;
}

/* Ensure contact info flex items are centered */
.footer div[style*="margin-left: 70px"] > div[style*="display: flex"][style*="align-items: center"] {
justify-content: center !important;
width: 100% !important;
margin-left: 0 !important;
text-align: center !important;
}

/* Fix bottom section */
.footer div[style*="justify-content: space-between"] {
flex-direction: column !important;
text-align: center !important;
gap: 12px !important;
}

/* Reduce bottom section padding */
.footer div[style*="border-top: 1px solid"] {
padding-top: 10px !important;
}

/* Keep copyright text size */
.footer div[style*="color: #94a3b8"][style*="font-size: 0.9rem"] {
font-size: 0.9rem !important;
}

.footer div[style*="color: #94a3b8"] p[style*="font-size: 0.8rem"] {
font-size: 0.8rem !important;
margin: 3px 0 0 0 !important;
}

/* Fix legal links - keep in one row */
/* Desktop: Legal links on right (handled by footer.css) */
/* Mobile: Center legal links */
@media (max-width: 768px) {
.footer .legal-links {
margin-left: 0 !important;
padding-right: 0 !important;
justify-content: center !important;
align-items: center !important;
gap: 4px !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
}
overflow-x: visible !important;
}

/* Override inline styles */
.footer .legal-links[style*="flex-wrap"] {
flex-wrap: nowrap !important;
}

/* Keep legal link font size - reduce padding only */
.footer .legal-links a,
.footer .legal-links a.footer-link {
font-size: 0.95rem !important;
padding: 6px 6px !important;
min-width: auto !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}

/* Ensure footer links are clickable on tablet */
.footer .legal-links a.footer-link {
pointer-events: auto !important;
z-index: 10 !important;
position: relative !important;
-webkit-tap-highlight-color: rgba(0, 255, 122, 0.3) !important;
touch-action: manipulation !important;
min-height: 44px !important;
min-width: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.footer .legal-links a.footer-link:active {
color: #00ff7a !important;
transform: scale(0.95);
}

/* Fix app store images - ensure centered */
.footer img[alt*="Google Play"], 
.footer img[alt*="App Store"] {
height: 50px !important;
width: 155px !important;
max-width: 100% !important;
display: block !important;
margin: 0 auto !important;
object-fit: contain !important;
}

/* Ensure app download container is centered */
.footer div[style*="display: flex"][style*="gap: 12px"][style*="flex-wrap: wrap"][style*="opacity: 0.6"] {
justify-content: center !important;
align-items: center !important;
margin-left: 0 !important;
width: 100% !important;
}

/* Fix social media icons */
.footer div[style*="display: flex"][style*="gap: 15px"][style*="justify-content: center"] {
margin-left: 0 !important;
flex-wrap: wrap !important;
}

/* Fix about section */
.footer p[style*="max-width: 300px"] {
max-width: 100% !important;
}

/* Fix logo and brand section */
.footer a[style*="display: flex"] {
justify-content: center !important;
margin-bottom: 15px !important;
}

/* Keep all text sizes - only reduce margins */
.footer h4 {
font-size: 1.1rem !important;
margin-bottom: 12px !important;
}

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

@media (max-width: 480px) {
.footer {
padding: 20px 12px 15px !important;
overflow-x: hidden !important;
}

/* Keep font sizes - only reduce margins */
.footer h4 {
font-size: 1.05rem !important;
margin-bottom: 10px !important;
}

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

/* Compress grid gap on very small screens */
.footer div[style*="grid-template-columns"] {
gap: 18px !important;
}

/* Keep social icons size */
.footer a[style*="font-size: 1.5rem"] i {
font-size: 1.3rem !important;
}

/* Keep legal links in one row on mobile - iPhone 12 Pro (390px) */
/* This is already mobile-specific, so keep center alignment */
@media (max-width: 768px) {
.footer .legal-links {
gap: 3px !important;
font-size: 0.9rem !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
overflow-x: auto !important;
}
}
-webkit-overflow-scrolling: touch !important;
margin-left: 0 !important;
padding-right: 0 !important;
}

/* Override inline styles on mobile */
.footer .legal-links[style*="flex-wrap"],
.footer .legal-links[style*="gap"] {
flex-wrap: nowrap !important;
gap: 3px !important;
}

.footer .legal-links a,
.footer .legal-links a.footer-link {
padding: 6px 4px !important;
min-width: auto !important;
font-size: 0.9rem !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}

/* Compress all margins and gaps */
.footer *[style*="margin-bottom: 20px"],
.footer *[style*="margin-bottom: 15px"],
.footer *[style*="margin-bottom: 18px"] {
margin-bottom: 10px !important;
}

/* Compress gaps in flex containers */
.footer div[style*="gap: 12px"],
.footer div[style*="gap: 15px"],
.footer div[style*="gap: 10px"] {
gap: 6px !important;
}

/* Compress contact info gaps */
.footer div[style*="display: flex"][style*="align-items: center"][style*="gap: 12px"],
.footer div[style*="display: flex"][style*="align-items: center"][style*="gap: 10px"],
.footer div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"] {
gap: 6px !important;
margin-bottom: 6px !important;
}

/* Compress bottom section */
.footer div[style*="justify-content: space-between"] {
gap: 10px !important;
}

.footer div[style*="border-top: 1px solid"] {
padding-top: 8px !important;
}

/* Compress logo margin */
.footer a[style*="margin-bottom: 15px"],
.footer a[style*="margin-bottom: 20px"] {
margin-bottom: 8px !important;
}

/* Compress app download section */
.footer div[style*="gap: 12px"][style*="flex-wrap: wrap"][style*="opacity: 0.6"] {
gap: 6px !important;
margin-bottom: 8px !important;
}

/* Compress social media icons */
.footer div[style*="gap: 15px"][style*="justify-content: center"],
.footer div[style*="gap: 12px"][style*="justify-content: center"],
.footer div[style*="gap: 10px"][style*="justify-content: center"] {
gap: 8px !important;
margin-bottom: 8px !important;
}

/* Compress quick links */
.footer div[style*="flex-direction: column"][style*="gap: 12px"],
.footer div[style*="flex-direction: column"][style*="gap: 10px"],
.footer div[style*="flex-direction: column"][style*="gap: 8px"] {
gap: 6px !important;
}

/* Compress about section spacing */
.footer > div > div > div:first-child {
margin-bottom: 10px !important;
}

/* Compress social media section spacing */
.footer div[style*="margin-top: 25px"],
.footer div[style*="margin-top: 20px"],
.footer div[style*="margin-top: 15px"] {
margin-top: 10px !important;
}

/* Compress paragraph margins */
.footer p {
margin-bottom: 6px !important;
}

/* Compress copyright text margin */
.footer div[style*="color: #94a3b8"] p {
margin: 2px 0 0 0 !important;
}

/* Compress legal links padding - ensure one row */
.footer .legal-links a,
.footer .legal-links a.footer-link {
padding: 6px 4px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}

.footer .legal-links {
flex-wrap: nowrap !important;
gap: 3px !important;
}

/* Ensure footer links are clickable on mobile */
.footer .legal-links a.footer-link {
pointer-events: auto !important;
z-index: 10 !important;
position: relative !important;
-webkit-tap-highlight-color: rgba(0, 255, 122, 0.3) !important;
touch-action: manipulation !important;
min-height: 44px !important;
min-width: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 12px !important;
}

.footer .legal-links a.footer-link:active {
color: #00ff7a !important;
transform: scale(0.95);
background-color: rgba(0, 255, 122, 0.1) !important;
border-radius: 6px !important;
}

/* Fix copyright text */
.footer p[style*="font-size: 0.9rem"],
.footer p[style*="font-size: 0.8rem"] {
font-size: 0.75rem !important;
}

/* Ensure contact info doesn't overflow and is centered */
.footer div[style*="display: flex"][style*="align-items: center"] {
flex-wrap: wrap !important;
word-break: break-word !important;
justify-content: center !important;
width: 100% !important;
}

/* Center contact info container */
.footer div[style*="margin-left: 70px"][style*="display: flex"][style*="flex-direction: column"] {
margin-left: 0 !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
text-align: center !important;
}

/* Center each contact field individually */
.footer div[style*="margin-left: 70px"] > div[style*="display: flex"][style*="align-items: center"] {
justify-content: center !important;
width: 100% !important;
margin-left: 0 !important;
text-align: center !important;
}

/* Ensure app download images are centered */
.footer div[style*="display: flex"][style*="gap: 12px"][style*="flex-wrap: wrap"][style*="opacity: 0.6"] {
justify-content: center !important;
align-items: center !important;
margin-left: 0 !important;
width: 100% !important;
}

.footer a[href^="tel:"],
.footer a[href^="mailto:"],
.footer a[href^="https://wa.me"] {
word-break: break-all !important;
font-size: 0.85rem !important;
text-align: center !important;
}
}

/* ==========================================
   Inline CSS from body (line 2485)
   ========================================== */
/* Custom scrollbar for widget */
#health-tip-widget div::-webkit-scrollbar {
width: 6px;
}

#health-tip-widget div::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}

#health-tip-widget div::-webkit-scrollbar-thumb {
background: #10b981;
border-radius: 10px;
}

#health-tip-widget div::-webkit-scrollbar-thumb:hover {
background: #059669;
}

/* Responsive - adjust for mobile */
@media (max-width: 768px) {
#health-tip-widget {
  width: 90% !important;
  right: 5% !important;
  left: 5% !important;
  top: 70px !important;
  max-height: 88vh !important;
}
}

@media (max-width: 480px) {
#health-tip-widget {
  width: 95% !important;
  right: 2.5% !important;
  left: 2.5% !important;
  top: 60px !important;
  font-size: 0.75rem !important;
}
}

/* Animation */
@keyframes slideInRight {
from {
  transform: translateX(400px);
  opacity: 0;
}
to {
  transform: translateX(0);
  opacity: 1;
}
}

#health-tip-widget.show {
animation: slideInRight 0.5s ease-out;
}

/* Ensure widget can be shown when JavaScript sets display: block */
#health-tip-widget.show,
#health-tip-widget[style*="display: block"] {
display: block !important;
}