/* 
 * China Travel Compass - Global Editorial Theme & Mobile-First UX Stylesheet
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;1,6..72,400&family=Noto+Serif+SC:wght@600;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-editorial: 'Newsreader', 'Noto Serif SC', serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --brand-primary: #c84b31;
  --brand-amber: #d97706;
  --brand-emerald: #059669;
}

/* Touch & Mobile Reset */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: #faf9f6;
  color: #1c1917;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* Smooth Tab Switching Animation */
.tab-panel {
  animation: fadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Timeline Custom Track for Desktop & Mobile */
.timeline-item {
  position: relative;
  padding-left: 20px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: -20px;
  width: 2px;
  background: #e7e5e4;
}
.timeline-item:last-child::before {
  display: none;
}
.timeline-dot {
  position: absolute;
  left: 0;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #c84b31;
  box-shadow: 0 0 0 2px rgba(200, 75, 49, 0.15);
  z-index: 10;
}

/* RTL Layout Flip for Arabic */
html[dir="rtl"] .timeline-item {
  padding-left: 0;
  padding-right: 20px;
}
html[dir="rtl"] .timeline-item::before {
  left: auto;
  right: 6px;
}
html[dir="rtl"] .timeline-dot {
  left: auto;
  right: 0;
}
html[dir="rtl"] .pl-8 {
  padding-left: 0 !important;
  padding-right: 2rem !important;
}
html[dir="rtl"] .left-0 {
  left: auto !important;
  right: 0 !important;
}

/* Nav Tab Active States */
.active-tab {
  background-color: #c84b31 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(200, 75, 49, 0.25) !important;
}

/* Mobile Bottom Nav Tab Active State */
.active-bottom-tab {
  color: #c84b31 !important;
  font-weight: 700 !important;
}
.active-bottom-tab .bottom-icon-wrap {
  background-color: #fff7f5 !important;
  color: #c84b31 !important;
  transform: translateY(-2px);
}

/* Leaflet Overrides */
.leaflet-popup-content-wrapper {
  background: #ffffff !important;
  color: #1c1917 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #e7e5e4 !important;
}
.leaflet-popup-tip {
  background: #ffffff !important;
}

/* iOS Safe Area Insets */
.safe-bottom-padding {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
.safe-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0.5rem);
}