/* ============================================================
   components.css — 组件样式（卡片/标签/按钮/统计）
   ============================================================ */

/* ---------- 顶部导航 ---------- */
.navbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  color:#fff;padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.navbar .logo{
  width:30px;height:30px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--gold),#e6c689);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#5b3a10;font-weight:700;
}
.navbar .title{font-size:17px;font-weight:600;letter-spacing:1px;}
.navbar .sub{font-size:11px;opacity:.85;margin-left:auto;letter-spacing:2px;}

/* ---------- 统计条 ---------- */
.stats{
  display:flex;background:var(--card);margin:14px 12px 0;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 0;
}
.stats .item{flex:1;text-align:center;border-right:1px solid var(--border);}
.stats .item:last-child{border-right:none;}
.stats .num{font-size:20px;font-weight:700;color:var(--primary);}
.stats .num small{font-size:11px;font-weight:400;color:var(--ink-2);}
.stats .lbl{font-size:11px;color:var(--ink-2);margin-top:2px;}

/* ---------- 章节标题 ---------- */
.section-title{
  display:flex;align-items:center;gap:8px;
  margin:22px 16px 12px;font-size:17px;font-weight:700;letter-spacing:1px;
}
.section-title::before{
  content:"";width:4px;height:18px;border-radius:2px;
  background:linear-gradient(var(--primary),var(--gold));
}
.section-title .more{margin-left:auto;font-size:11px;color:var(--gold);font-weight:400;cursor:pointer;}

/* ---------- 亮点卡片 ---------- */
.hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 12px;}
.hl-card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  position:relative;cursor:pointer;
}
.hl-card .pic{position:relative;overflow:hidden;background:var(--card);}
.hl-card .name{padding:8px 10px 4px;font-size:13.5px;font-weight:600;}
.hl-card .meta{padding:0 10px 10px;font-size:11px;color:var(--gold);font-weight:600;}

/* ---------- 行程速览 ---------- */
.quick-day{margin:0 12px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.quick-item{display:flex;align-items:center;padding:13px 14px;border-bottom:1px solid #f4ede2;cursor:pointer;}
.quick-item:last-child{border-bottom:none;}
.quick-item .d{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#f7efe2,#f0e2ca);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--primary-dark);font-weight:700;
}
.quick-item .d b{font-size:15px;line-height:1;}
.quick-item .d span{font-size:9px;font-weight:400;color:var(--gold);}
.quick-item .info{margin-left:12px;flex:1;min-width:0;}
.quick-item .info .t{font-size:14px;font-weight:600;}
.quick-item .info .s{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.quick-item .arrow{color:#d8c8ae;font-size:18px;}

/* ---------- 行程卡片 ---------- */
.day-card{margin:14px 12px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.day-head{
  display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;
  background:linear-gradient(90deg,#fdf8f0,#fff);
}
.day-head .dnum{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#d05a3e);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.day-head .dnum b{font-size:17px;line-height:1.1;}
.day-head .dnum span{font-size:9px;opacity:.85;letter-spacing:1px;}
.day-head .dt{flex:1;}
.day-head .dt .t{font-size:15.5px;font-weight:700;}
.day-head .dt .s{font-size:11.5px;color:var(--ink-2);margin-top:2px;}
.day-head .chev{color:#cbb693;transition:transform .3s;font-size:14px;}
.day-card.open .chev{transform:rotate(90deg);}
.day-body{display:none;padding:6px 16px 16px;}
.day-card.open .day-body{display:block;}

/* ---------- 时间线 ---------- */
.tl{position:relative;padding-left:20px;}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:#f0e2ca;border-radius:1px;}
.tl-item{position:relative;padding:9px 0;}
.tl-item::before{
  content:"";position:absolute;left:-19px;top:16px;width:10px;height:10px;border-radius:50%;
  background:var(--gold);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--gold);
}
.tl-item .time{font-size:11px;color:var(--primary);font-weight:700;letter-spacing:.5px;}
.tl-item .spot{font-size:14px;font-weight:600;margin-top:1px;}
.tl-item .desc{font-size:12px;color:var(--ink-2);margin-top:2px;}

/* ---------- 徽章 ---------- */
.badge{display:inline-block;font-size:9.5px;color:#fff;border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:1.5px;letter-spacing:.5px;}
.b5{background:#b5342a;} .b4{background:#c9722e;} .b3{background:#7e9c3a;} .b2{background:#4f7fa0;}
.bmeal{background:#c9a05c;} .bhotel{background:#8a7a68;}

/* ---------- 景点卡片 ---------- */
.spot-card{margin:14px 12px 0;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.spot-card .pic{position:relative;overflow:hidden;background:var(--card);}
.spot-card .grade{
  position:absolute;top:10px;left:10px;
  background:rgba(181,52,42,.92);color:#fff;font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:16px;letter-spacing:1px;backdrop-filter:blur(4px);
}
.spot-card .grade.g4{background:rgba(201,114,46,.92);}
.spot-card .grade.g3{background:rgba(126,156,58,.92);}
.spot-card .grade.g2{background:rgba(79,127,160,.92);}
.spot-card .cnt{
  position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.45);color:#fff;
  font-size:10.5px;padding:2px 8px;border-radius:12px;
}
.spot-card .body{padding:13px 15px 15px;}
.spot-card .body h3{font-size:16px;font-weight:700;letter-spacing:.5px;}
.spot-card .body .loc{font-size:11px;color:var(--gold);margin-top:2px;}
.spot-card .body p{font-size:12.8px;color:var(--ink-2);margin-top:8px;}

/* ---------- 美食卡片 ---------- */
.food-banner{margin:14px 12px 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--card);}
.food-card{margin:14px 12px 0;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;overflow:hidden;}
.food-card .pic{position:relative;overflow:hidden;background:var(--card);}
.food-card .body{padding:12px 14px;flex:1;}
.food-card .body h4{font-size:14.5px;font-weight:700;}
.food-card .body .tagline{font-size:10.5px;color:var(--gold);margin-top:1px;letter-spacing:1px;}
.food-card .body p{font-size:11.8px;color:var(--ink-2);margin-top:6px;}
.note-strip{
  margin:16px 12px 0;background:#fdf6ea;border:1px solid #f0e0c2;border-radius:10px;
  padding:11px 13px;font-size:11.8px;color:#8a6d3b;
}

/* ---------- 贴士 ---------- */
.tip-group{margin:14px 12px 0;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px;}
.tip-group h4{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:7px;}
.tip-group h4 .ico{
  width:26px;height:26px;border-radius:var(--radius-sm);background:#fdf1e3;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.tip-group ul{margin:9px 0 0 18px;}
.tip-group li{font-size:12.5px;color:var(--ink-2);margin-top:6px;}

/* ---------- 联系卡片 ---------- */
.contact{
  margin:18px 12px 0;border-radius:var(--radius);padding:18px;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  cursor:pointer;
}
.contact .big{font-size:16px;font-weight:700;letter-spacing:2px;}
.contact .ph{font-size:22px;font-weight:700;margin-top:8px;letter-spacing:1px;}
.contact .sm{font-size:11px;opacity:.85;margin-top:4px;}

/* ---------- 底部 ---------- */
.footer{text-align:center;color:#c3b39d;font-size:10.5px;padding:22px 20px 14px;letter-spacing:1px;}

/* ---------- 图片占位容器内的 <img> ---------- */
.hl-card .pic img,
.spot-card .pic img,
.food-card .pic img,
.food-banner img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hl-card .pic{width:100%;height:96px;}
.spot-card .pic{min-height:170px;}
.food-banner{height:180px;}
.food-card .pic{width:118px;min-height:110px;}