/* ═══════════════════════════════════════════
   游遍中国 — 全局自定义样式
   合并 UI 设计模板样式 + SSR 项目扩展
   ═══════════════════════════════════════════ */

/* ─── CSS 自定义属性 ─── */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --brand: #16a34a;
  --brand-hover: #15803d;
  --brand-light: #22c55e;
  --warm: #92400e;
  --warm-light: #b45309;
  --dark-bg: #0f172a;
  --dark-card: #1e293b;
  --dark-border: #334155;
  --light-bg: #f9fafb;
  --light-card: #ffffff;
  --light-border: #e5e7eb;
}

/* ─── 基础重置 ─── */
html { scroll-behavior: smooth; }
*, *::before, *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* 键盘导航焦点指示器 */
:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}
body {
  font-family: 'Noto Sans SC', sans-serif;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
/* iOS 输入框防缩放：聚焦时不放大页面 */
input, textarea, select, button {
  font-size: 16px !important;
}

/* ─── 工具类 ─── */
.font-serif { font-family: 'Noto Serif SC', serif; }
.font-outfit { font-family: 'Outfit', sans-serif; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ─── Tailwind CDN 安全兜底 ─── */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.translate-y-0 { transform: translateY(0); }
.translate-y-6 { transform: translateY(1.5rem); }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-\[50dvh\] { height: 50dvh; }
@media (min-width: 768px) {
  .md\:h-\[60dvh\] { height: 60dvh; }
}

/* ─── 动效 ─── */
.card-hover {
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s cubic-bezier(0.16,1,0.3,1);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.btn-click:active {
  transform: scale(0.97);
}
.nav-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ─── 骨架屏 ─── */
.skeleton {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 图片懒加载 ─── */
img[loading="lazy"] { background-color: #f3f4f6; }
.dark img[loading="lazy"] { background-color: #1e293b; }
/* SVG 波浪深色模式填充 */
.dark .wave-fill { fill: #0f172a !important; }
.img-loading { filter: blur(8px); transition: filter 0.3s ease; }
.img-loaded { filter: blur(0); }

/* ─── 滚动吸附 ─── */
.snap-x { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.snap-y { scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; }
.snap-start { scroll-snap-align: start; }
.snap-center { scroll-snap-align: center; }

/* ─── 动效减少 ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── 暗色模式 ─── */
.dark body { background-color: var(--dark-bg); color: #f1f5f9; }


/* ─── 低对比度修复：提升 text-gray-400 至 WCAG AA（4.5:1） ─── */
/* 浅色模式：gray-400(#9CA3AF,2.6:1) → 更深的 gray-500(#6B7280,4.6:1) */
:root .text-gray-400 { color: #6b7280; }
/* 深色模式保留原 gray-400 色值（#9CA3AF 在 dark-bg 上约 5.8:1，符合要求） */
.dark .text-gray-400 { color: #9ca3af; }

/* ─── 移动端底部联系栏预留空间 ─── */
@media (max-width: 767px) {
  .spot-detail-wrap { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
}

/* ─── SSR 项目扩展 ─── */
/* 富文本 prose 补充 */
.prose p { margin-bottom: 1em; }
.prose p + p { margin-top: 1em; }

/* 搜索高亮（JS动态注入） */
.highlight { background-color: #fef9c3; border-radius: 2px; padding: 0 2px; }
.dark .highlight { background-color: #422006; color: #fef9c3; }

/* 移动端 sticky 联系卡 */
@media (max-width: 1024px) {
  .sticky-contact { position: static !important; }
}

/* 图片 Lightbox 动画 */
#lightbox { animation: fadeIn 0.15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 波浪分割线暗色模式 */
.dark .hero-wave-path { fill: #0f172a !important; }

/* 社会化分享按钮 hover 变色细节 */
#share-buttons button:active { transform: scale(0.96); }

/* ═══════════════════════════════════════════
   游遍中国 — 增强样式 v2
   ═══════════════════════════════════════════ */

/* ─── 图片占位符增强 ─── */
.placeholder-img {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.placeholder-img::after {
  content: attr(data-spot-name);
  position: relative; z-index: 1;
  color: rgba(255,255,255,0.9); font-size: 0.875rem; font-weight: 600;
  text-align: center; padding: 0 0.5rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ─── 景区类型颜色标签 ─── */
.spot-type-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; }
.spot-type-tag.nature { background: #dcfce7; color: #166534; }
.spot-type-tag.culture { background: #fef3c7; color: #92400e; }
.spot-type-tag.theme { background: #ede9fe; color: #5b21b6; }
.spot-type-tag.museum { background: #e0e7ff; color: #3730a3; }
.dark .spot-type-tag.nature { background: #14532d; color: #86efac; }
.dark .spot-type-tag.culture { background: #78350f; color: #fde68a; }
.dark .spot-type-tag.theme { background: #3b0764; color: #c4b5fd; }
.dark .spot-type-tag.museum { background: #1e1b4b; color: #a5b4fc; }

/* ─── 卡片增强 ─── */
.card-glass {
  background: rgba(255,255,255,0.7); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.3);
}
.dark .card-glass { background: rgba(30,41,59,0.7); border-color: rgba(51,65,85,0.5); }

/* 价格标签 */
.price-badge {
  display: inline-flex; align-items: baseline; gap: 0.125rem;
  background: linear-gradient(135deg, #dc2626, #ef4444); color: white;
  padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-weight: 700;
  font-family: 'Outfit', sans-serif; box-shadow: 0 2px 8px rgba(220,38,38,0.3);
}
.free-badge {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, #16a34a, #22c55e); color: white;
  padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}

/* ─── Hero 区增强 ─── */
.hero-particles { position: absolute; inset: 0; overflow: hidden; }
.hero-particles::before, .hero-particles::after {
  content: ''; position: absolute; border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}
.hero-particles::before {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(22,163,74,0.15), transparent 70%);
  top: 20%; right: 10%;
}
.hero-particles::after {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(34,197,94,0.1), transparent 70%);
  bottom: 20%; left: 15%; animation-delay: -3s;
}
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

/* ─── 统计数字渐变 ─── */
.stat-number {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─── 评分星级 ─── */
.rating-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  padding: 0.25rem 0.5rem; border-radius: 0.375rem;
}
.dark .rating-badge { background: linear-gradient(135deg, #78350f, #92400e); }

/* ─── 通票省钱对比 ─── */
.savings-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #bbf7d0; position: relative; overflow: hidden;
}
.dark .savings-card { background: linear-gradient(135deg, #14532d, #166534); border-color: #166534; }

/* ─── 标签页 ─── */
.tab-active {
  background: linear-gradient(135deg, #16a34a, #22c55e); color: white;
  box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}

/* ─── 图片 hover 缩放 ─── */
.img-zoom { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.img-zoom:hover { transform: scale(1.08); }

/* ─── 渐变文字 ─── */
.gradient-text {
  background: linear-gradient(135deg, #16a34a, #22c55e, #4ade80);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─── 加载动画 ─── */
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* ─── Pass 卡片增强 ─── */
.pass-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pass-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

/* ─── Province 卡片增强 ─── */
.province-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.province-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

/* ─── 图库轮播 ─── */
#spot-gallery .gallery-slide { transition: opacity 0.5s ease; }
#spot-gallery .gallery-dot { cursor: pointer; transition: all 0.3s ease; }
#spot-gallery .gallery-dot:hover { transform: scale(1.2); }

/* ─── Lightbox 增强 ─── */
#lightbox img { transition: transform 0.3s ease; }
#lightbox .lightbox-dot { cursor: pointer; transition: all 0.3s ease; }
#lightbox .lightbox-dot:hover { transform: scale(1.3); }

/* ─── 图片通用增强 ─── */
.img-card {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.img-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.dark .img-card { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.img-card img { width: 100%; height: 100%; object-fit: cover; }

/* 图片加载淡入 */
.img-fade { opacity: 0; transition: opacity 0.4s ease; }
.img-fade.loaded { opacity: 1; }

/* 列表图片更大尺寸 */
.list-img-lg { width: 100%; height: 100%; object-fit: cover; min-height: 120px; }
@media (min-width: 768px) {
  .list-img-lg { min-height: 160px; }
}

/* ─── 打印样式 ─── */
@media print {
  nav, footer, .sticky, .fixed, #mobile-contact, .no-print,
  .contact-card, #share-buttons, .btn, button, [onclick] { display: none !important; }
  body { background: white !important; color: black !important; font-size: 12pt; }
  a { color: black !important; text-decoration: underline; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  .dark body { background: white !important; color: black !important; }
  .dark .bg-dark-bg, .dark .bg-dark-card { background: white !important; }
  .dark .text-gray-100, .dark .text-gray-300, .dark .text-gray-400 { color: #333 !important; }
  @page { margin: 2cm; }
}