/* ===== SUK 素可咖啡 - 全局样式 ===== */
:root {
  --suk-bg: #0a0e0d;
  --suk-bg-2: #111918;
  --suk-gold: #c9a961;
  --suk-gold-light: #e5c888;
  --suk-gold-bright: #f5e2a6;
  --suk-gold-dark: #8a6628;
  --suk-green: #2d5a3d;
  --suk-green-light: #4a8a5f;
  --suk-orange: #e97b2b;
  --suk-cream: #f5ecd7;
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
  background: var(--suk-bg);
  color: #f5ecd7;
  overflow-x: hidden;
}

.font-display { font-family: 'Playfair Display', serif; }
.font-thai { font-family: 'Noto Sans Thai', sans-serif; }

/* ===== 背景纹理 ===== */
.bg-grain {
  position: relative;
}
.bg-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.7 0 0 0 0 0.4 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ===== 渐变&光效 ===== */
.gold-gradient {
  background: linear-gradient(135deg, #c9a961 0%, #e5c888 50%, #c9a961 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sunset-gradient {
  background: linear-gradient(135deg, #e97b2b 0%, #d4a050 50%, #c9a961 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.jungle-gradient {
  background: linear-gradient(135deg, #4a8a5f 0%, #2d5a3d 100%);
}

.neon-glow {
  box-shadow: 0 0 40px rgba(201, 169, 97, 0.3), 0 0 80px rgba(201, 169, 97, 0.15);
}

/* ===== 玻璃拟态卡片 ===== */
.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201, 169, 97, 0.15);
}

.glass-dark {
  background: rgba(10, 14, 13, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 169, 97, 0.1);
}

/* ===== 导航栏 ===== */
.nav-link {
  position: relative;
  transition: color 0.3s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #c9a961, #e97b2b);
  transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: #e5c888; }

/* ===== 按钮 ===== */
.btn-primary {
  background: linear-gradient(135deg, #c9a961 0%, #b8944f 100%);
  color: #0a0e0d;
  padding: 14px 32px;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s;
  box-shadow: 0 10px 30px -10px rgba(201, 169, 97, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(201, 169, 97, 0.7);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: #e5c888;
  padding: 13px 30px;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-ghost:hover {
  background: rgba(201, 169, 97, 0.1);
  border-color: #c9a961;
}

/* ===== Hero ===== */
.hero-bg {
  background: 
    radial-gradient(ellipse at top right, rgba(233, 123, 43, 0.15), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(74, 138, 95, 0.2), transparent 50%),
    linear-gradient(180deg, #0a0e0d 0%, #111918 100%);
}

/* ===== 产品卡片 ===== */
.product-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(201, 169, 97, 0.12);
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(201, 169, 97, 0.15), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 169, 97, 0.35);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5), 0 0 40px -10px rgba(201, 169, 97, 0.2);
}
.product-card:hover::before { opacity: 1; }

/* ===== 数据卡片闪烁 ===== */
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.4); }
  50% { box-shadow: 0 0 0 15px rgba(201, 169, 97, 0); }
}
.pulse-dot {
  animation: pulse-gold 2s infinite;
}

/* ===== 分隔线 ===== */
.divider-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.5), transparent);
}

/* ===== 浮动 ===== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.float { animation: float 6s ease-in-out infinite; }

/* ==========================================================
 * 图表容器 - 防止 Chart.js canvas 被拉伸变形
 * 关键: 必须给外层一个固定 height, Chart.js responsive 才能正常
 * ========================================================== */
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
}
.chart-wrapper canvas {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ==========================================================
 * 热力图容器 - Leaflet + OpenStreetMap (CartoDB Dark)
 * ========================================================== */
#map-container {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 97, 0.2);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(201,169,97,0.1);
}
#suk-map {
  display: block;
  width: 100%;
  height: 640px;
  background: #0b1826;
  z-index: 1;
}
/* Leaflet 控件黑金化 */
.leaflet-container {
  background: #0b1826 !important;
  font-family: 'Inter', 'Noto Sans Thai', sans-serif !important;
}
.leaflet-control-zoom a {
  background: rgba(10,14,13,0.88) !important;
  color: #e5c888 !important;
  border: 1px solid rgba(201,169,97,0.3) !important;
  backdrop-filter: blur(10px);
}
.leaflet-control-zoom a:hover {
  background: rgba(201,169,97,0.2) !important;
  color: #fff5d0 !important;
  border-color: #c9a961 !important;
}
.leaflet-control-attribution {
  background: rgba(10,14,13,0.75) !important;
  color: rgba(245,236,215,0.4) !important;
  backdrop-filter: blur(8px);
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 8px 0 0 0 !important;
}
.leaflet-control-attribution a {
  color: rgba(201,169,97,0.7) !important;
}

/* Leaflet Popup 深色主题 (黑金玻璃拟态) */
.leaflet-popup.suk-popup .leaflet-popup-content-wrapper {
  background: rgba(10, 14, 13, 0.96) !important;
  color: #f5ecd7 !important;
  border: 1px solid rgba(201, 169, 97, 0.4) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(201,169,97,0.15) !important;
  backdrop-filter: blur(16px);
  padding: 0 !important;
}
.leaflet-popup.suk-popup .leaflet-popup-content {
  margin: 0 !important;
  min-width: 240px;
}
.leaflet-popup.suk-popup .leaflet-popup-tip {
  background: rgba(10, 14, 13, 0.96) !important;
  border: 1px solid rgba(201, 169, 97, 0.4) !important;
  box-shadow: none !important;
}
.leaflet-popup.suk-popup a.leaflet-popup-close-button {
  color: #c9a961 !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  top: 4px !important;
  right: 6px !important;
  padding: 4px 8px !important;
}
.leaflet-popup.suk-popup a.leaflet-popup-close-button:hover {
  color: #fff5d0 !important;
  background: rgba(201,169,97,0.15) !important;
  border-radius: 50%;
}

/* 9 大城市标签 pin */
.suk-city-label {
  background: transparent !important;
  border: 0 !important;
}
.suk-city-label .city-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  white-space: nowrap;
}
.suk-city-label .pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5d0 0%, #c9a961 60%, #8a6628 100%);
  box-shadow: 0 0 0 2px rgba(10,14,13,0.9), 0 0 12px rgba(201,169,97,0.8);
  animation: city-pulse 2.2s infinite;
}
.suk-city-label .pin-label {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 700;
  color: #e5c888;
  text-shadow: 0 1px 4px #000, 0 0 10px rgba(0,0,0,0.9);
  padding: 2px 8px;
  background: rgba(10,14,13,0.6);
  border-radius: 999px;
  border: 1px solid rgba(201,169,97,0.3);
  backdrop-filter: blur(4px);
}
@keyframes city-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(10,14,13,0.9), 0 0 12px rgba(201,169,97,0.6); }
  50% { box-shadow: 0 0 0 2px rgba(10,14,13,0.9), 0 0 24px rgba(201,169,97,1); }
}

.suk-iw {
  font-family: 'Inter', 'Noto Sans Thai', sans-serif;
  color: #f5ecd7;
  min-width: 240px;
  padding: 14px 18px;
}
.suk-iw h4 {
  font-family: 'Playfair Display', serif;
  color: #e5c888;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201,169,97,0.2);
}
.suk-iw .row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; margin-bottom: 5px;
}
.suk-iw .row span:first-child { color: rgba(245,236,215,0.55); }
.suk-iw .row b { font-weight: 700; }
.suk-iw .badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin-top: 6px;
}

/* ==========================================================
 * 热力图控制 UI (叠加在 Google Maps 上)
 * ========================================================== */
.heat-legend {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(10, 14, 13, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 14px;
  padding: 14px 16px;
  z-index: 10;
  font-size: 12px;
}

.heat-stat-card {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(10, 14, 13, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 16px;
  padding: 16px 20px;
  z-index: 10;
  min-width: 240px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.heat-btn {
  background: rgba(201, 169, 97, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.3);
  color: #e5c888;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
}
.heat-btn:hover {
  background: rgba(201, 169, 97, 0.2);
  border-color: rgba(201, 169, 97, 0.6);
}
.heat-btn.active {
  background: linear-gradient(135deg, #c9a961, #b8944f);
  color: #0a0e0d;
  border-color: #c9a961;
  font-weight: 700;
  box-shadow: 0 6px 20px -4px rgba(201,169,97,0.6);
}

/* ===== 输入框 ===== */
.form-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 12px;
  padding: 14px 18px;
  color: #f5ecd7;
  width: 100%;
  transition: all 0.3s;
}
.form-input:focus {
  outline: none;
  border-color: #c9a961;
  background: rgba(201, 169, 97, 0.05);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
}
.form-input::placeholder { color: rgba(245, 236, 215, 0.4); }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0e0d; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c9a961, #b8944f);
  border-radius: 5px;
}

/* ===== 动画进入 ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 标签 ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: rgba(201, 169, 97, 0.1);
  border: 1px solid rgba(201, 169, 97, 0.25);
  color: #e5c888;
}

/* ===== 统计计数器 ===== */
.stat-number {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  background: linear-gradient(135deg, #e5c888 0%, #c9a961 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -1px;
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
  .heat-stat-card {
    min-width: 200px;
    padding: 12px 14px;
    top: 12px; right: 12px;
  }
  .heat-legend {
    bottom: 12px; right: 12px;
    padding: 10px 12px;
  }
}

@media (max-width: 768px) {
  #gmap { height: 480px; }
  .chart-wrapper { height: 260px; }
  .heat-stat-card {
    top: 10px; right: 10px; left: 10px;
    min-width: 0;
  }
  .heat-legend {
    bottom: 10px; right: 10px;
  }
}