/* Custom Styles for nuances not covered by utilities */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Fix color contrast for gold-accent on white backgrounds */
.text-gold-accent {
  color: #b8860b; /* Darker gold for better contrast on white */
}

/* Ensure tap targets are at least 48x48px */
@media (max-width: 768px) {
  button,
  a {
    min-height: 48px;
    min-width: 48px;
  }
}

.card-zoom-image {
  transition: transform 0.5s ease;
}

.group:hover .card-zoom-image {
  transform: scale(1.1);
}

/* Hide scrollbar for horizontal scrolling elements */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Cursor styles for draggable area */
.cursor-grab {
  cursor: grab;
}
.cursor-grabbing {
  cursor: grabbing;
}

/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out;
}

/* Hero Slider Transitions */
.hero-slide {
  transition: opacity 1.2s ease-in-out, transform 10s ease-out; /* Slow zoom effect */
  opacity: 0;
  transform: scale(1.05);
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* Menu Open/Close Animation */
.mobile-menu-enter {
  opacity: 0;
  transform: translateY(-20px);
}
.mobile-menu-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
}

/* Recommendation Transitions - SOFT FADE & SCALE */
.rec-content-transition {
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-out;
}
.rec-image-transition {
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-out;
}

/* Utility to temporarily disable transitions for instant jumps */
.no-transition {
  transition: none !important;
}

/* Mega Menu Transition */
.mega-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease-in-out;
}
.group:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ensure mega menu text is always dark, regardless of navbar state */
.mega-menu {
  color: #1f2937 !important; /* text-gray-800 - base text color */
}
.mega-menu p,
.mega-menu span:not([class*="icon"]):not([class*="lucide"]) {
  color: #1f2937 !important; /* text-gray-800 */
}
/* Links should be gray by default, red on hover */
.mega-menu a {
  color: #6b7280 !important; /* text-gray-500 */
}
.mega-menu a:hover,
.mega-menu a.hover\:text-china-red:hover {
  color: #c8102e !important; /* text-china-red */
}
.mega-menu h4,
.mega-menu h5,
.mega-menu h6 {
  color: #111827 !important; /* text-gray-900 */
}
/* Only apply red color to elements with text-china-red class (not hover classes) */
.mega-menu .text-china-red:not([class*="hover"]) {
  color: #c8102e !important;
}
.mega-menu .text-gray-500,
.mega-menu [class*="text-gray-500"]:not([class*="hover"]) {
  color: #6b7280 !important;
}
.mega-menu .text-gray-900,
.mega-menu [class*="text-gray-900"]:not([class*="hover"]) {
  color: #111827 !important;
}
/* City links should be gray by default */
.mega-menu .city-link {
  color: #6b7280 !important; /* text-gray-500 */
}
.mega-menu .city-link:hover,
.mega-menu .city-link.active-hover {
  color: #c8102e !important; /* text-china-red */
}

/* Map Pin Styles */
.map-pin {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}
.map-pin .pin-dot {
  transition: transform 0.3s ease;
}
/* Active state (from JS or Hover) */
.map-pin.active,
.map-pin:hover {
  z-index: 20; /* Bring to front */
}
.map-pin.active .pin-dot,
.map-pin:hover .pin-dot {
  transform: scale(1.5);
  border-color: #c8102e; /* china-red */
  background-color: #fff;
}

/* Tooltip Styles */
.pin-tooltip {
  opacity: 0;
  /* Default: Pop UP */
  transform: translate(-50%, 10px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  visibility: hidden;
}
.mega-menu
  div.pin-tooltip
  div
  > span:not([class*="icon"]):not([class*="lucide"]) {
  color: #fff !important;
}
/* Show tooltip on active OR hover */
.map-pin.active .pin-tooltip,
.map-pin:hover .pin-tooltip {
  opacity: 1;
  /* Default active state */
  transform: translate(-50%, -10px) scale(1);
  visibility: visible;
}

/* Variant: Pop DOWN (for high pins like Harbin) */
.map-pin.pop-down .pin-tooltip {
  top: 100%;
  bottom: auto;
  margin-top: 12px;
  margin-bottom: 0;
  transform: translate(-50%, -10px) scale(0.9); /* Start slightly above */
}
.map-pin.pop-down.active .pin-tooltip,
.map-pin.pop-down:hover .pin-tooltip {
  transform: translate(-50%, 0) scale(1);
}

/* Ensure Navbar text color persists when Mega Menu is open */
.group:hover > a {
  color: #c8102e; /* Active link color */
}

/* Map Background Pattern */
.map-bg-pattern {
  background-image: radial-gradient(#c8102e 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.1;
}

/* Active City Link Style */
.city-link.active-hover {
  color: #c8102e;
  font-weight: 700;
  transform: translateX(4px); /* Subtle shift */
}

/* Disabled Scroll Button Style */
.scroll-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.scroll-btn-disabled:hover {
  background-color: transparent !important;
}

/* Custom Scrollbar for Mega Menu List */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #e2e8f0; /* Light gray initially */
  border-radius: 4px;
  transition: background 0.3s;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background: #c8102e; /* China Red on hover */
}

/* Cookie Banner Animation */
#cookie-banner {
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
}
#cookie-banner.hidden-banner {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Navbar Position Fix - Ensure navbar always stays at top */
#navbar {
  top: 0 !important;
  transform: translateY(0) !important;
}

/* Mobile Menu Full Screen Overlay */
#mobile-menu {
  height: 100vh !important;
}

/* Mobile Submenu Animations */
#mobile-menu-main,
[id^="mobile-submenu-"] {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

[id^="mobile-submenu-"]:not(.hidden) {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* About Page Animations */
.animate-fade-in-up.delay-100 {
  animation-delay: 0.1s;
}
.animate-fade-in-up.delay-200 {
  animation-delay: 0.2s;
}
.animate-fade-in-up.delay-300 {
  animation-delay: 0.3s;
}

/* Active Tab Hover Fix - Ensure active tabs keep white text on hover */
.city-tab.active,
.city-tab.active:hover,
.filter-btn.active,
.filter-btn.active:hover {
  color: white !important;
}

.city-tab.active:hover,
.filter-btn.active:hover {
  background-color: rgba(200, 16, 46, 0.9) !important; /* china-red/90 */
}