/* ==========================================================================
Trip2China — 行程页样式 (tour.css)
适用页面: tour-eastern-china / tour-silk-road / tour-southwest /
tour-tibet / tour-yangtze-cruise
组织原则 (与 site.css 一致):
- 工具类 (Utilities) 保持全局 — 它们是设计系统, 语义跨模块统一。
- 页面专属 chrome (顶栏/导航/Hero/子导航/页脚/弹窗) 是 5 个行程页共用的
唯一实例, 保持全局。
- 模块专属样式一律限定在其模块根 #id 下, 避免同名 class 互相污染:
#overview #daybyday #inclusions #videos #faq #travelerModal
========================================================================== */
/* ---------- 1. 重置 / 基础 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#fff;color:#1f2937;line-height:1.6}
/* 输入类控件**去掉浏览器默认自带的焦点边框** (site.css 里有同一条, 两表各写一份)。
UA 在 :focus-visible 时给输入框加 `outline: auto 1px rgb(16,16,16)` 黑框,
会叠在 #overview .sc-field 的金色 :focus-within 边框外面, 变成「双框」。
实测: 禁用本表后 computed 回到 outline=auto 1px, 启用本表为 outline=none, 确认是这里压制。
⚠️ 行程页**不加载 site.css**, 所以这条不能省。
⚠️ 焦点反馈已在 #overview .sc-field:focus-within 里给出(整盒变金色边+白底), 不需要再补。 */
input,textarea,select{outline:none}
/* 内容区宽度: 蓝湖画板 View Itinerary 实测 x360..1559 = **1200px** 内容宽。
这里 padding 每边 20px, 故 max-width = 1200 + 40 = 1240px。 */
.container{max-width:1240px;margin:0 auto;padding:0 1.25rem}
/* 价格专用字体: 所有展示 $ 金额的元素统一 Arial */
.font-price{font-family:Arial,Arial,sans-serif}
/* ---------- 2. 工具类 (补: 行程页 HTML 引用但原先缺失, 导致规则卡/视频卡无边框圆角) ---------- */
.hidden{display:none!important}
.block{display:block}
.flex{display:flex}
.absolute{position:absolute}
.relative{position:relative}
.inset-0{top:0;right:0;bottom:0;left:0}
.items-center{align-items:center}
.justify-center{justify-content:center}
.w-auto{width:auto}.w-full{width:100%}
.w-4{width:1rem}.w-12{width:3rem}
.h-auto{height:auto}.h-4{height:1rem}.h-9{height:2.25rem}
.h-12{height:3rem}.h-44{height:11rem}
.mt-1{margin-top:.25rem}
.mb-1{margin-bottom:.25rem}
.p-4{padding:1rem}
.bg-white{background-color:#fff}
.bg-white\/90{background-color:rgba(255,255,255,.9)}
.text-primary{color:#000000}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.border{border-width:1px;border-style:solid;border-color:#e5e7eb}
.rounded{border-radius:.25rem}
.rounded-full{border-radius:9999px}
.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.overflow-hidden{overflow:hidden}
.object-cover{object-fit:cover}
/* ---------- 3. 页面 chrome: 顶栏 / 导航 (5 页共用唯一实例, 保持全局) ---------- */
/* 画板实测: topbar 40px 高、浅米色 #F6F2ED; nav 74px 高;
Logo 90x24 (x361..450); 菜单 + CTA **一起靠右**, 菜单间距约 54px, CTA 168x36 圆角 3px,
CTA 右边界 = 内容区右边界 1559。 */
.topbar{background:#F6F2ED;color:#9D7751;font-size:14px;text-align:center;padding:0;line-height:40px}
/* 🔴 高度统一为 **74px 总高**（含那 1px 下边框）。
原写法 `.container{height:74px}` 让 nav 总高 = 74 + 1(边框) = **75**，与站内其他页面对不齐。
现在把边框从「占高」改成「叠加」: `.container` 定 74, 边框用 box-shadow 画在内侧，
既保留 74px 内容区，又让 `.subnav` 的 `top` 与 nav 总高严格相等。
⚠️ **不要改回 border-bottom**: 那样总高必然变 75，`.subnav{top}` 也要跟着改成 75，
两处一错位就会出现滚动时 nav 与 subnav 之间露白缝(项目记忆里踩过)。
⚠️ box-shadow 画线不占布局空间，所以 `nav` 自身高度 == `.container` 的 74px。 */
nav{background:#fff;box-shadow:inset 0 -1px 0 #EDEEF0;position:sticky;top:0;z-index:40}
nav .container{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:#000000;text-decoration:none;font-size:20px}
/* Logo: 画板显示 90x24, 素材 logo-top2x.png 是 200x80 (2.5:1), 比例不同 ->
按**高度 24px 等比缩放**(宽 60) 避免拉伸变形; 左边界与内容区对齐 (x360)。
⚠️ 若日后拿到 90x24 比例 (3.75:1) 的 Logo 素材, 直接替换即可。
🔴 **改为只定高不定宽**(用户要求"高 40, 宽度自定义自适应"):
素材 200x80 比例 2.5:1 ⇒ height:40px + width:auto = **100x40**, 与全站一致。
原来写死 `width:100px` 在换图比例变化时会拉伸变形, 交给 width:auto 更稳。
⚠️ HTML 那边已给 logo 加了 `.nav-logo` 类(site.css 也有一份同规格定义),
两表互斥不冲突; 这里保留 `.logo img` 是为了兜住老结构。 */
.logo img{height:40px;width:auto;display:block}
/* 🔴 导航链接字号/字体**与站内其它页面统一**: 16px / Arial / #999(当前页 #000 加粗)。
改前是 14px 且字体族继承 `-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto...`,
与 index 系列(Arial)、tours 页(Arial 16px)三套都不一样。
⚠️ 字号写在 `.nav-links a` 而不是 `.nav-links` 上: 后者会被子元素继承,
但 `a` 自带 UA 样式不会重置 font-size, 两种写法效果一样; 写这里更直观。
⚠️ 下面的 `.cta` 是导航里的 WhatsApp 按钮, **已按全站统一规格写成 16px/400 + 图标**
(用户要求"导航内所有内容统一")。见下方注释。
⚠️ 导航内间距也统一为 **44px**(改前是 54, site 系 50, tours 页 44 —— 三套)。 */
.nav-links{display:flex;gap:44px;font-size:16px;margin-left:auto}
.nav-links a{color:#999999;text-decoration:none;font-family:Arial,Arial,sans-serif;font-size:16px;font-weight:400}
.nav-links a:hover{color:#000}
/* ---------- 导航 CTA: 与 site.css 的 `.page-nav-cta` / `.header-nav-cta` 完全一致 ----------
🔴 **必须和 site.css 里那份同步**（tour 页不加载 site.css，两表互斥）。
统一规格: 16px / 400 / Arial / 黑底 #000 / 圆角 4px / 高 36 / 左右 padding 12 / 图标 16px。
改前: 14px / 600 / 圆角 3 / padding 0 11 / margin-left 51 / **无图标** / 文案 "Talk to a Travel Advisor"。
⚠️ `margin-left` 由 51 改为 **21**: 导航间距已统一 gap:44, 51 是按旧 gap:54 调的,
会比其他按钮多出一截。留 21 是为了让 CTA 与 "About Us" 的距离视觉上仍略大于其它项
(它是按钮, 需要多留一点气口), 又不至于离谱。
⚠️ 不要用 `line-height:36px` 配合 `display:inline-flex` —— flex 容器里 line-height 不居中,
已改成 `display:inline-flex;align-items:center;line-height:1`。 */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;
background:#000;color:#fff;padding:0 12px;height:36px;border-radius:4px;
text-decoration:none;font-family:Arial,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1;
margin-left:21px;white-space:nowrap}
/* 🔴 悬停**不变色**(用户要求), 文字恒为 #fff。
原为 `background:#c49b63`(金铜色) —— 已去掉; 这里**显式写死同色**而不是删掉整条,
用来压掉可能存在的其它 hover 来源(`:hover` 同值也算一种兜底)。 */
.cta:hover{background:#000;color:#fff}
.cta-ico{width:16px;height:16px;flex-shrink:0;display:block}
/* 顶部导航当前页高亮: 由 tour.js 的 initCurrentNav 给当前项加 .is-current */
.nav-links a.is-current{color:#000000;font-weight:600}
.nav-links a.is-current:hover{color:#000000}
/* ---------- 4. 页面 chrome: Hero ---------- */
/* 画板实测: Hero 高 448 (y114..562); 内容块 y235..384 ->
相对 Hero 顶 121..384 (上留白 121 / 下留白 64), 即内容**偏下**;
justify-content:center 后再 padding-top 28px 补偿。 */
.hero{position:relative;color:#fff}
.hero img{width:100%;height:448px;object-fit:cover;display:block;object-position:center 42%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,15,30,.72) 0%,rgba(5,15,30,.45) 38%,rgba(5,15,30,.08) 68%,rgba(5,15,30,0) 85%)}
.hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-top:97px}
/* ⚠️ .hero-inner 是 column flex, 子 .container 的 `margin:0 auto` 会让它收缩到内容宽;
必须显式 width:100% 才能撑满, 保证与全站内容区 (x360..1559) 左对齐。 */
.hero-inner>.container{width:100%}
/* 面包屑: 画板 Hero 内**没有**面包屑, 隐藏 (保留 DOM 便于 SEO 与其他页复用) */
.breadcrumb{display:none}
.breadcrumb a{color:rgba(255,255,255,.75);text-decoration:none}
.breadcrumb a:hover{color:#c49b63}
/* 小标签: 按需求全站行程页统一为 18px 白色 (原画板为金色 13px) */
.tag{display:inline-block;background:none;color:#FFFFFF;font-size:18px;font-weight:700;letter-spacing:.06em;padding:0;border-radius:0;margin-bottom:8px}
h1{font-size:40px;line-height:1.15;margin-bottom:12px;font-weight:700}
.meta-line{font-size:13px;color:rgba(255,255,255,.85);margin-bottom:16px}
.meta-line b{color:#fff;font-weight:600}
.trust-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:0}
/* 信任标签: 按需求去掉描边, 全站行程页统一。
padding 各 +1px 补掉 border 占位(1px solid 会占 2px 宽高), 保证去边框后尺寸/间距与原来一致。 */
.chip{font-size:12px;background:rgba(255,255,255,.14);border:0;padding:7px 13px;border-radius:20px}
/* ---------- 5. 页面 chrome: 子导航 / 通用区块 / 页脚 ---------- */
/* 背景 #F9F9F9、无可见分割线。
⚠️ 保留 1px 透明边框而不是 border-bottom:0 —— 否则 subnav 高度少 1px，
下面所有区块整体上移 1px，吸顶位置也跟着变。视觉上完全无边框。 */
.subnav{position:sticky;top:74px;z-index:30;background:#F9F9F9;border-bottom:1px solid transparent}
.subnav .container{display:flex;gap:4px;overflow-x:auto}
.subnav a{font-size:13px;font-weight:600;color:#8A8A8A;text-decoration:none;padding:13px 14px;white-space:nowrap;border-bottom:3px solid transparent}
.subnav a:hover{color:#000000}
.subnav a.active{color:#000000;border-bottom-color:#000000}
/* 画板实测: 各区块区顶 -> 编号徽章 = 60px (overview 特殊为 8px, 见其模块段) */
section{padding:60px 0}
section.alt{background:#F7F7F7}
/* H2: 编号徽章为 34x34 黑底白字方块 (画板实测), 徽章在上、标题文字在下, 间距 20px。
用 flex-column 实现: h2 内的纯文本节点会形成匿名 flex item, 无需改 HTML 结构。 */
h2{display:flex;flex-direction:column;align-items:flex-start;
font-size:30px;color:#000000;margin-bottom:26px;font-weight:700;line-height:1.25}
h2 .no{display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:4px;background:#000;color:#fff;
font-size:16px;font-weight:700;margin:0 0 20px 0;letter-spacing:0;line-height:1}
/* 画板 v5 实测 (footer 区高 296, 1920 宽): 四栏左边界 x360/819/1115/1443;
栏标题相对栏顶 +33 (16px 纯白粗体 Arial); 正文/链接 #999999 14px;
左栏 logo 152x60 (@2x 切图 304x120); 社交图标 20x20 / 水平间距 12 (+64);
分割线 +227 (#2D2D2D); 版权行 +259。
列宽 459/296/328 = 1083，加上末列到内容右沿(1560) 的 117 正好 1200。 */
footer{background:#222222;color:#999999;font-size:14px;padding:33px 0 0}
.foot-grid{display:grid;grid-template-columns:459px 296px 328px 1fr;gap:0}
/* ⚠️ 四栏是写死的桌面像素宽度 (459+296+328=1083), 只在 .container 内容宽 ≥1200 时才装得下
(.container max-width:1240 + 左右 padding 20 = 1200)。
1240~1239 之间(即容器还没到满宽时)固定列会直接撑破视口 —— 实测 1024 视口下
document.scrollWidth = 1219, 右侧多出一条横向滚动条。
⇒ 1239px 以下把固定 px 换成同比例的 fr, 让四栏等比收缩而不是溢出。
fr 比例 = 459:296:328:117 (末列 1fr 对应的 117px 也一并换算, 保证桌面观感一致)。 */
@media (max-width:1239px){
.foot-grid{grid-template-columns:minmax(0,459fr) minmax(0,296fr) minmax(0,328fr) minmax(0,117fr)}
}
footer h4{color:#fff;font-size:16px;margin:0 0 7px;font-weight:700;line-height:1.45}
footer a{color:#999999;text-decoration:none;display:block;margin:0;font-size:14px;line-height:23px}
footer a:hover{color:#fff}
/* 左栏: Logo (152x60 画板值) + 4 行标语(14px/22px)。logo 底 +37 接标语。 */
footer .foot-brand img{width:152px;height:auto;display:block;margin-bottom:37px}
footer .foot-brand p{margin:0;font-size:14px;line-height:22px;color:#999999}
/* Follow us: 20x20 白色圆形切图, 图案镂空透出 #222 底色, 水平间距 12 */
footer .foot-social{display:flex;gap:12px}
footer .foot-social a{display:block;margin:0;line-height:0}
footer .foot-social img{width:20px;height:20px;display:block}
footer .foot-social a:hover img{opacity:.75}
.foot-bottom{border-top:1px solid #2D2D2D;margin-top:9px;padding:31px 0 18px;
font-size:12.5px;color:rgba(255,255,255,.45);text-align:left;line-height:1.5}
/* ---------- 6. 页面 chrome: 视频弹窗 (#travelerModal) ---------- */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-box{width:100%;max-width:880px;background:#000;border-radius:10px;overflow:hidden;position:relative}
.modal-close{position:absolute;top:10px;right:14px;color:#fff;font-size:26px;cursor:pointer;z-index:5}
/* ==========================================================================
7. 模块专属样式 — 按模块根 #id 作用域隔离
⚠️ 约定: 本节所有规则必须挂在模块根 (#overview/#daybyday/#inclusions/
#videos/#faq 等) 下, 避免同名 class 被别的模块一起改到。
========================================================================== */
/* --- 模块: Route Overview (#overview) ---
蓝湖画板实测: 内容区 1200 (x360..1559) / 左栏 info 卡 + 右栏 side-card (x1109..1559);
side-card = **白底 + #EDEEF0 描边 + 圆角 10**, 不是深色卡;
价格色 = **#B5001A** (画板实测, 非金色); 主按钮黑色实心, 次按钮白色描边;
编号徽章 01/02 为 34x34 黑底白字方块。 */
/* 区顶留白: 按需求改为 60px, 与其他 section 的 `padding:60px 0` 对齐
(原为画板实测值 8px —— subnav 到区顶仅隔 8px, 徽章 y622 / subnav 结束 614) */
#overview{padding-top:60px}
/* 画板实测: 左栏 725 / 间距 24 / 右栏 side-card 450 (总 1199≈1200) */
#overview .grid2{display:grid;grid-template-columns:1fr 450px;gap:24px;align-items:start}
#overview .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
#overview .info-item{border:1px solid #EDEEF0;border-radius:8px;padding:16px;background:#fff}
#overview .info-item b{display:block;color:#000000;font-size:13px;margin-bottom:6px;font-weight:600}
#overview .info-item p{font-size:13px;color:#6B6B6B;line-height:1.55}
#overview .grid2>div,#overview .info-grid>div{min-width:0}
/* 预订侧栏: 白底描边卡片 */
/* 下单表单（画板 View Itinerary 实测：卡宽 452 / 内边距 23 / 可用宽 406）
结构与设计稿一致：
· 价格行：From + USD + 大号红色金额 + / person（同一行）
· 两个输入框：**浅灰盒 406x52（#F9F9F9 / 圆角 6）**，盒内左侧图标 + 标签 + 右侧值
—— 注意不是"标签在左、输入框在右"，这是本次还原的主要差异
· 三行 label/value 无分隔线
· 数量盒 406x160 浅灰盒：标题 + 圆钮(30) + 两行 calc
· 两个按钮 406x53 / 圆角 6：黑底实心 + 黑描边幽灵
· 说明行带 · 圆点，13px #999 */
/* 画板实测 (View Itinerary, 卡 x1109..1561 / y742..1465):
水平内边距 23px，但**垂直方向几乎贴边**（价格墨迹顶距卡顶仅 6px），底部留 8px。
总高必须落在 725 —— 之前用 padding:23px 全包围，导致内边距+各段间隙累计多出 77px。 */
#overview .side-card{background:#fff;color:#000;border:1px solid #EDEEF0;border-radius:8px;padding:24px 23px 6px;position:sticky;top:160px}
/* --- 价格行 --- */
#overview .sc-price{display:flex;align-items:baseline;gap:6px;line-height:1;margin-bottom:6px}
#overview .sc-from{font-size:15px;color:#000}
#overview .sc-cur{font-size:15px;font-weight:700;color:#000}
#overview .sc-amount{font-size:36px;font-weight:700;color:#B5001A;letter-spacing:-.01em}
#overview .sc-unit{font-size:14px;font-weight:bold;color:#000}
#overview .sc-note{margin:0 0 15px;font-size:13px;color:#999999;line-height:1.4}
/* --- 输入框（浅灰盒 + 图标 + 标签 + 右值）--- */
#overview .sc-field{position:relative;display:flex;align-items:center;gap:10px;
height:52px;padding:0 14px;margin-bottom:12px;
background:#F9F9F9;border:1px solid #F9F9F9;border-radius:6px;cursor:pointer;
transition:border-color .2s ease,background .2s ease}
#overview .sc-field:hover{border-color:#E4E4E4}
#overview .sc-field:focus-within{border-color:#c49b63;background:#fff}
/* 姓名框是 text 输入，光标应为文本样式（日期框保持 pointer） */
#overview .sc-field:has(input[type="text"]){cursor:text}
#overview .sc-ico{width:16px;height:16px;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:contain}
/* 图标用内联 SVG data-URI：避免额外切图，且随文字色变化 */
#overview .sc-ico-date{background-image:url("data:image/svg+xml;utf8,")}
#overview .sc-ico-user{background-image:url("data:image/svg+xml;utf8,")}
#overview .sc-label{font-size:13px;color:#000;white-space:nowrap;flex-shrink:0}
#overview .sc-fake{margin-left:auto;font-size:13px;color:#999999}
#overview .sc-chev{width:8px;height:8px;flex-shrink:0;border-top:1.6px solid #999;border-right:1.6px solid #999;
transform:rotate(45deg);margin-left:6px}
/* 真正的 input 铺满整盒且完全透明 —— 点击盒内任意处都会落到 input 上，
配合 tour.js 的 showPicker() 实现"点整块即唤起" */
#overview .sc-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;cursor:pointer;
-webkit-appearance:none;appearance:none;background:transparent;font-size:13px}
#overview .sc-input::-webkit-calendar-picker-indicator{width:100%;height:100%;position:absolute;left:0;top:0;margin:0;opacity:0;cursor:pointer;pointer-events:none}
/* 姓名框需要真的可输入：它是可见的，右对齐 placeholder。
flex:1 + min-width:0 —— 让它占满标签右侧的剩余空间，否则会把标签挤换行 */
#overview .sc-input-text{opacity:1;position:static;flex:1;min-width:0;text-align:right;
padding:0;color:#000;font-size:13px;background:transparent;border:0}
#overview .sc-input-text::placeholder{color:#999999}
/* --- 自建日期面板（英文界面，替代 的原生中文面板）---
⚠️ 面板由 tour.js 挂到 下并 fixed 定位，**不在 #overview 内**，
所以这里只能用 .sc-cal 前缀而非 `#overview .sc-cal`。
.sc-cal-* 仅本模块使用（site.css 无同名类），不会误伤其他模块。 */
.sc-cal{display:none;position:fixed;z-index:200;background:#fff;border:1px solid #EDEEF0;
border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:14px 14px 8px;
font-family:inherit;user-select:none;
/* 视口很矮时(手机横屏)兜底: 面板内部滚动, 不撑出屏幕外 */
max-height:calc(100vh - 24px);overflow-y:auto}
.sc-cal.open{display:block}
.sc-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sc-cal-title{font-size:14px;font-weight:700;color:#000}
.sc-cal-nav{display:flex;align-items:center;gap:16px}
.sc-cal-arrow{width:22px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;
font-family:inherit;font-size:16px;line-height:1;color:#666;display:inline-flex;
align-items:center;justify-content:center;transition:color .2s ease}
.sc-cal-arrow:hover{color:#c49b63}
.sc-cal-week{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.sc-cal-week span{font-size:12px;color:#999999;text-align:center;padding:4px 0}
.sc-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.sc-cal-day{height:34px;padding:0;border:0;background:transparent;border-radius:6px;cursor:pointer;
font-family:inherit;font-size:13px;color:#222222;
display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease}
.sc-cal-day:hover{background:#F3F3F3}
.sc-cal-day.is-out{color:#CCCCCC}
.sc-cal-day.is-off{color:#DDDDDD;cursor:not-allowed}
.sc-cal-day.is-off:hover{background:transparent}
/* 今天: 金色细内描边（与站点 accent 一致），选中时被黑底覆盖 */
.sc-cal-day.is-today{box-shadow:inset 0 0 0 1px #c49b63}
.sc-cal-day.is-selected{background:#000;color:#fff;font-weight:700;box-shadow:none}
.sc-cal-day.is-selected:hover{background:#000;color:#fff}
.sc-cal-foot{display:flex;align-items:center;justify-content:space-between;
border-top:1px solid #F0F0F0;margin-top:10px;padding-top:8px}
.sc-cal-btn{border:0;background:transparent;font-family:inherit;font-size:13px;color:#666666;
cursor:pointer;padding:4px 2px;transition:color .2s ease}
.sc-cal-btn:hover{color:#000000}
/* --- 三行 label / value（无分隔线）--- */
#overview .sc-rows{margin:4px 0 17px}
#overview .sc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:7px 0;font-size:13px;color:#666666}
#overview .sc-row b{color:#222222;font-weight:600;text-align:right}
/* --- 数量盒 --- */
#overview .sc-qty{background:#F9F9F9;border-radius:6px;padding:13px 16px;margin-bottom:17px}
#overview .sc-qty-title{margin:0 0 8px;font-size:13px;color:#000}
#overview .sc-qty-row{display:flex;align-items:center;justify-content:center;gap:34px;margin:0 0 9px}
#overview .sc-step{width:30px;height:30px;border-radius:50%;cursor:pointer;padding:0;line-height:1;
display:inline-flex;align-items:center;justify-content:center;font-size:16px;
border:1px solid #000;background:transparent;color:#000;transition:all .18s ease}
#overview .sc-step:hover{background:#000;color:#fff}
#overview .sc-step-plus{background:#000;color:#fff;border-color:#000}
#overview .sc-step-plus:hover{background:#c49b63;border-color:#c49b63}
#overview .sc-qty-row span{font-size:20px;font-weight:600;min-width:28px;text-align:center;color:#000}
#overview .sc-calc{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:13px;color:#666666}
#overview .sc-calc b{color:#222222;font-size:14px;font-weight:700}
/* --- 按钮 --- */
#overview .sc-btn{display:flex;align-items:center;justify-content:center;height:53px;border-radius:6px;
text-decoration:none;font-size:13px;font-weight:500;transition:all .2s ease}
#overview .sc-btn-solid{background:#000;color:#fff;border:1px solid #000;margin-bottom:11px}
#overview .sc-btn-solid:hover{background:#c49b63;border-color:#c49b63}
#overview .sc-btn-ghost{background:#fff;color:#000;border:1px solid #000}
#overview .sc-btn-ghost:hover{background:#000;color:#fff}
/* --- 说明行 --- */
#overview .sc-notes{margin:13px 0 0;padding:0;list-style:none}
#overview .sc-notes li{position:relative;padding-left:14px;margin:5px 0;
font-size:13px;line-height:1.4;color:#999999}
#overview .sc-notes li::before{content:"·";position:absolute;left:2px;top:0;color:#999999;font-weight:700}
@media (max-width:1023px){
#overview .side-card{position:static;padding:20px}
#overview .sc-amount{font-size:30px}
}
/* --- 模块: Day-by-Day Itinerary (#daybyday) ---
蓝湖画板 version 3 实测（1920x7878，本次该区块整体重做）：
· 区底色 #F9F9F9 —— 与全站主内容区同一底色，**无同心圆纹理**（旧版误加的已移除）
· 容器 1200 (x360..1559)；内容两栏 x426..1085 (660) + 25 gap + x1110..1559 (450)
· 左栏起点 426 = 容器左边 + 66，这 66px 是**时间线轴留白**（轴在 x373）
· 时间线轴：#C2C2C2 竖虚线，节距 **6px 实 / 3px 空**（border-style:dashed 无法控节距，
故用 repeating-linear-gradient）
· 结点：轴上一枚 **9px 实心黑圆点**；节点卡 x406..1085 (680)，卡间距 28px
· 类型标签 40x23 圆角 4，白字 11px；四色见下方 --d-tag-*
· Day 头部：实心黑路牌图标 + "Day N" + 竖线 + 标题（30px 粗体），下接斜体说明
· Route Sketch 卡 450 宽：**蓝色图钉 #0062BE + 灰色虚线 #D4D4D4 折线 + Sightseeing 图例**
⚠️ 本区块样式仅在 tour-eastern-china.html 使用（其余 4 个 tour 页仍用旧结构）。
旧类名（.tabs/.day-panel/.tl-row/.hotel-card/.sketch-card 等）保留在下方，
以免影响其他页面；新版类名统一加 `d-` 前缀。
*/
#daybyday{position:relative;background-color:#F9F9F9}
/* ---------- 3.1 副标题 ---------- */
#daybyday .d-sub{font-size:13px;color:#6B7280;margin-bottom:18px}
/* ---------- 3.2 药丸 tab（画板：行高 40，未激活纯白无描边，激活黑底白字） ---------- */
#daybyday .d-tabs{display:flex;flex-wrap:wrap;gap:11px 11px;margin-bottom:26px}
#daybyday .d-tab{height:40px;padding:0 17px;border:0;border-radius:8px;background:#fff;
color:#4A4A4A;font-size:13px;font-weight:400;line-height:40px;cursor:pointer;
transition:background .2s ease,color .2s ease;white-space:nowrap}
#daybyday .d-tab:hover{color:#000;background:#F2F2F2}
#daybyday .d-tab.active{background:#000;color:#fff;font-weight:600}
#daybyday .d-panel{display:none}
#daybyday .d-panel.active{display:block}
/* ---------- 3.3 Day 头部（路牌图标 + Day N + 竖线 + 标题 + 斜体说明） ----------
画板实测：标题行**不缩进**（off 0，与容器左边对齐），
而下方 intro / Today / 主题卡**缩进到 off 46**，与节点卡左沿对齐 —— 形成"标题通栏、内容缩进"的层次。 */
#daybyday .d-head{margin-bottom:14px}
#daybyday .d-head h3{display:flex;align-items:center;gap:10px;
font-size:24px;font-weight:700;color:#000;line-height:1.15;margin:0}
/* Day 头部图标：画板实测为「黑色路牌」（立柱 + 底座 + 右向箭头），
尺寸 29x30（设计稿尺度）；用切图 assets/biaoji2x.png（64x64 画布，图形占 59x61）。
⇒ 要让图形显示 29px 宽，CSS 宽 = 29 × 64/59 ≈ 31.5px（素材自带 ~2px 透明边）。
⚠️ 物体是 ![]()
（原为内联 SVG），故用 object-fit:contain 保证不变形。 */
#daybyday .d-pin{width:31.5px;height:31.5px;flex-shrink:0;object-fit:contain;display:block}
#daybyday .d-sep{width:1px;height:24px;background:#D0D0D0;flex-shrink:0}
#daybyday .d-intro{margin:8px 0 0 46px;width:calc(725px - 46px);max-width:calc(100% - 46px);
box-sizing:border-box;font-size:16px;font-style:italic;color:#4A4A4A;line-height:1.45}
/* "Today:" 摘要行（16px，粗体前缀 + 灰字；同 intro 缩进 46） */
#daybyday .d-today{margin:0 0 14px 46px;width:calc(100% - 46px);box-sizing:border-box;font-size:16px;color:#9A9A9A;line-height:1.5}
#daybyday .d-today b{color:#6B6B6B;font-weight:700}
/* ---------- 3.4 主题摘要卡（灰底 #F1F1F1，左沿 off 46 对齐节点卡） ---------- */
#daybyday .d-theme{background:#F1F1F1;border-radius:10px;padding:16px 20px;
margin:0 0 22px 46px;width:calc(100% - 46px);box-sizing:border-box}
#daybyday .d-theme h4{margin:0 0 6px;font-size:15px;font-weight:700;color:#000}
#daybyday .d-theme p{margin:0;font-size:14px;color:#6B6B6B;line-height:1.6}
/* ---------- 3.5 两栏布局 ---------- */
/* 画板实测：总 1200 = 左栏 725 + gap 25 + 右栏 450。
左栏 725 内部再由 .d-tl 的 padding-left:46 分出"时间线留白 46 + 内容 679"，
因此节点卡 / 主题卡 / intro / Today 都落在 off 46..725（宽 680），
与画板实测一致；右栏 Route Sketch 落在 off 750..1199。 */
#daybyday .d-layout{display:grid;grid-template-columns:1fr 450px;gap:25px;align-items:start}
#daybyday .d-layout>div{min-width:0}
/* ---------- 3.6 时间线（轴 + 结点 + 节点卡） ---------- */
/* 左栏 725 被 .d-tl 的 padding-left:46 分成「时间线留白 46 + 内容 679」，
于是节点卡落在 off 46..725（宽 680），与画板实测一致。 */
#daybyday .d-tl{position:relative;padding-left:46px}
/* 轴：画板实测 x373（相对容器左边 360 为 13px）；卡左沿 406-360=46。
轴只覆盖节点区（画板实测从首个结点 y2464 起），不延伸到 Day 头部。
节距 6px 实 / 3px 空，色 #C2C2C2。 */
#daybyday .d-tl::before{content:"";position:absolute;left:13px;top:24px;bottom:24px;width:1px;
background-image:repeating-linear-gradient(to bottom,#C2C2C2 0 6px,transparent 6px 9px)}
#daybyday .d-node{position:relative;margin-bottom:28px}
#daybyday .d-node:last-child{margin-bottom:0}
/* 结点圆点：画板实测径 9、色 #222222，**居中于轴**。
圆点在 .d-node 内绝对定位，而 .d-node 已右移 46px（因父级 padding-left），
故轴上位置需回退 46：13.5(轴中心) - 4.5(半径) - 46 = -37 */
#daybyday .d-dot{position:absolute;left:-37px;top:22px;width:9px;height:9px;border-radius:50%;
background:#222;z-index:1}
#daybyday .d-card{background:#fff;border-radius:10px;padding:20px 22px}
#daybyday .d-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#daybyday .d-time{font-size:20px;color:#6B6B6B;font-weight:bold;font-family:Arial,sans-serif}
#daybyday .d-title{font-size:19px;font-weight:700;color:#000;line-height:1.3}
#daybyday .d-desc{margin:9px 0 0;font-size:15px;color:#4A4A4A;line-height:1.55}
#daybyday .d-detail{display:flex;align-items:center;gap:6px;margin:8px 0 0;
font-size:13px;color:#9A9A9A;line-height:1.4}
#daybyday .d-clock{width:14px;height:14px;flex-shrink:0;color:#B0B0B0}
#daybyday .d-img{display:block;width:100%;max-width:604px;aspect-ratio:16/9;object-fit:cover;
border-radius:8px;margin-top:14px}
/* 类型标签（画板实测四色 + Free 灰） */
#daybyday .d-tag{display:inline-flex;align-items:center;height:23px;padding:0 9px;
border-radius:4px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap}
#daybyday .d-tag--transport{background:#0062BE}
#daybyday .d-tag--sight{background:#2E6641}
#daybyday .d-tag--meal{background:#BE7723}
#daybyday .d-tag--hotel{background:#B5001A}
#daybyday .d-tag--free{background:#8A8A8A}
/* ---------- 3.7 Route Sketch 卡（右栏） ---------- */
/* 按设计稿：卡片定高（比例 高/宽 ≈ 0.91，450 宽 → 410），内部三段纵向拉开
—— 标题贴顶、图例贴底、路线图在中间剩余空间里自动垂直居中（.d-route-svg{margin:auto 0}）。
故 h4 的 margin-bottom 与 legend 的 margin-top 都必须归零，否则会把 auto 居中挤偏。 */
#daybyday .d-route-card{background:#fff;border:1px solid #EDEEF0;border-radius:10px;
padding:20px 20px 30px;min-height:410px;position:sticky;top:160px;
display:flex;flex-direction:column;
box-shadow:0px 5px 20px 0px rgba(51,51,51,0.1)}
#daybyday .d-route-card h4{margin:0;font-size:15px;font-weight:600;color:#000;line-height:1.45}
#daybyday .d-route-svg{display:block;width:100%;height:auto;margin:auto 0}
#daybyday .d-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:0;font-size:11px;color:#8A8A8A}
#daybyday .d-legend span{display:inline-flex;align-items:center;gap:5px}
#daybyday .d-legend-dot{width:9px;height:9px;border-radius:50%;background:#0062BE;display:inline-block}
/* ===== 以下为旧版结构样式（其他 4 个 tour 页仍在用，勿删）===== */
#daybyday .tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
#daybyday .tab{background:#fff;border:1px solid #E5E5E5;color:#4A4A4A;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:400;transition:all .2s ease}
#daybyday .tab:hover{border-color:#000;color:#000}
#daybyday .tab.active{background:#000;color:#fff;border-color:#000;font-weight:600}
#daybyday .day-panel{display:none}
#daybyday .day-panel.active{display:block}
#daybyday .day-head{margin-bottom:22px}
#daybyday .day-head h3{font-size:19px;color:#000;margin-bottom:0;font-weight:600}
#daybyday .day-layout{display:grid;grid-template-columns:1fr 450px;gap:24px;align-items:start;min-height:560px}
#daybyday .day-layout>div{min-width:0}
#daybyday .summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
#daybyday .summary-chip{background:#fff;border:1px solid #E5E5E5;color:#4A4A4A;font-size:12px;padding:7px 12px;border-radius:8px}
#daybyday .sketch-card{background:#fff;border:1px solid #EDEEF0;border-radius:10px;padding:20px;position:sticky;top:160px}
#daybyday .sketch-card h4{font-size:13px;color:#000;margin-bottom:14px;font-weight:600}
#daybyday .legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11px;color:#8A8A8A}
#daybyday .legend span{display:inline-flex;align-items:center;gap:5px}
#daybyday .dot{width:9px;height:9px;border-radius:2px;display:inline-block}
#daybyday .tl-row{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid #E9E9E9;align-items:flex-start}
#daybyday .tl-row:last-of-type{border-bottom:none}
#daybyday .tl-time{flex:0 0 100px;font-size:11px;font-weight:700;color:#8A8A8A;text-transform:uppercase;letter-spacing:.06em;padding-top:3px}
#daybyday .tl-desc{flex:1;font-size:14.5px;color:#3A3A3A;line-height:1.65}
#daybyday .hotel-card{display:flex;gap:18px;margin-top:22px;border:1px solid #EDEEF0;border-radius:10px;overflow:hidden;background:#fff;align-items:stretch}
#daybyday .hotel-card img{width:190px;object-fit:cover;flex-shrink:0}
#daybyday .hotel-card>div{padding:16px 20px}
#daybyday .hotel-label{font-size:11px;color:#9A9A9A;text-transform:uppercase;letter-spacing:.08em;margin:0}
#daybyday .hotel-name{font-size:15px;font-weight:700;color:#000;margin:5px 0 3px}
#daybyday .hotel-city{font-size:12px;color:#8A8A8A;margin:0}
#daybyday .day-node{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed #e5e7eb}
#daybyday .node-num{width:30px;height:30px;border-radius:50%;background:#000000;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
#daybyday .node-label{font-size:12px;font-weight:800;color:#c49b63;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}
#daybyday .node-text{font-size:14px;color:#374151}
#daybyday .day-progress{font-size:11px;color:#9ca3af;margin-top:12px;text-align:right}
/* --- 模块: Inclusions & Rules (#inclusions) ---
蓝湖画板 v3 实测: 两栏卡片 x360..919 / x1000..1559 (宽 560, 间距 81);
**左「Included」卡片顶部黑条, 右「Not included」卡片顶部红条 #B5001A**;
卡片白底 + #EDEEF0 描边 + 圆角 10。
⚠️ 图标（本次修正，之前用文字符号 "\2713"/"\00d7" 导致还原度不足）:
· 列表项 ✓ = **细线描边对勾** 18x15、笔宽约 3px、色 **#272636**（深蓝灰，非纯黑）
· 列表项 ✗ = **细线描边交叉** 15x15、笔宽约 3px、端点圆润、色 **#B5001A**
两者都不是字体字符（字符无法做出"细描边 + 圆润端点"的观感），改用内联 SVG。
· 右下角水印 = **直径约 142px 的浅灰圆 (#FAFAFA) + 白色粗圆角对勾/叉**，
圆心距卡片右沿 68px、底沿 32px ⇒ 圆向右下**溢出并被卡片裁切**（不是完整圆）。
之前误实现成"110px 的字符 ✓/×"，形状与配色都不对。 */
#inclusions .inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:81px}
#inclusions .inc-grid>div{min-width:0}
/* 水印图形（白色粗描边、圆头端点），以 data URI 内联，避免额外请求。
勾 = 左短右长的两笔；叉 = 两条等长对角笔。 */
#inclusions .inc-block{
--inc-wm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 52 L42 74 L80 30' fill='none' stroke='%23fff' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#inclusions .inc-block.ni{
--inc-wm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M26 26 L74 74 M74 26 L26 74' fill='none' stroke='%23fff' stroke-width='13' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 卡片: 顶条用 border-top 粗线实现 */
#inclusions .inc-block{position:relative;background:#fff;border:1px solid #EDEEF0;border-radius:10px;
padding:26px 28px 30px;overflow:hidden;border-top:10px solid #000;
box-shadow:0px 5px 20px 0px rgba(51,51,51,0.1)}
#inclusions .inc-block.ni{border-top-color:#B5001A}
#inclusions .inc-block h3{font-size:19px;font-weight:700;color:#000;margin-bottom:18px}
/* 右下角水印：浅灰大圆 + 白色粗勾/叉。
★ 画板实测（本次修正，用**圆的几何反推**得出，非目测）：
圆被卡片右/下边缘裁切，可见部分 x780..919 / y4937..5067。
以可见圆弧左沿多点拟合圆方程，得 **圆心 (858, 5014.4)、半径 78**（拟合平均偏差 0.25px）
⇒ 圆直径 **156**（不是可见的 139，也不是此前猜的 142）
相对卡片（卡 x360..919 / y4600..5068）：
圆右沿 936 → 超出卡右 **17px** ⇒ CSS right: -17px
圆底沿 5092 → 超出卡底 **24px** ⇒ CSS bottom: -24px
故被 overflow:hidden 裁切，**可见部分 139 x 131** ✓（与实测完全一致）
圆内白勾 105x92、白叉 107x101 ⇒ background-size 105px。 */
#inclusions .inc-block::after{content:"";position:absolute;right:-17px;bottom:-24px;
width:156px;height:156px;border-radius:50%;background:#FAFAFA;pointer-events:none;
background-image:var(--inc-wm);background-repeat:no-repeat;
background-position:center;background-size:105px 105px}
#inclusions .inc-block ul{list-style:none}
#inclusions .inc-block li{font-size:14px;color:#4A4A4A;padding:9px 0;display:flex;gap:12px;line-height:1.5}
/* 列表项图标：内联 SVG（细描边 + 圆头端点），尺寸按画板实测 18x15 / 15x15。
⚠️ 兜底：其他 4 个 tour 页的 里仍是纯文本、没有 SVG，
若只在有 SVG 时给图标，那 4 页会"丢图标"。故保留字符图标作为 fallback，
再用 :has() 在有 SVG 时撤掉它 —— 新旧结构都能正确显示。 */
#inclusions .inc-block li>svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}
#inclusions .inc-block li>svg.ico-x{width:16px;height:16px;margin-top:2px;margin-left:1px}
#inclusions .inc-block .ico-check{stroke:#272636;stroke-width:2.6}
#inclusions .inc-block.ni .ico-x{stroke:#B5001A;stroke-width:2.8}
#inclusions .inc-block li::before{content:"\2713";color:#000;font-weight:700;flex-shrink:0}
#inclusions .inc-block.ni li::before{content:"\00d7";color:#B5001A}
/* 有 SVG 时撤掉字符图标。
⚠️ 必须带上 .ni 变体：`.inc-block.ni li::before` 权重(0,3,1) 高于
`.inc-block li:has(> svg)::before`(0,2,1)，否则右卡会残留字符 × 与 SVG 重叠。 */
#inclusions .inc-block li:has(> svg)::before,
#inclusions .inc-block.ni li:has(> svg)::before{content:none}
/* Traveler Rules: 3 列卡，卡 = **白色圆角方盒图标** + 粗体标题 + 灰色说明
★ 画板实测（本次修正）：
· 图标盒 **48x48**、圆角 **12px**、底色 **#FFFFFF**（此前错用 34x34 / 圆角 8 / #F0F0F0）
· 图标为**黑色实心（fill）**、约 25x23（此前是 19x19 描边 stroke 1.8 —— 形状与风格都不对）
白盒在 #F9F9F9 卡上，靠"纯白 vs 浅灰"的 6 级色差区分。 */
#inclusions .rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
#inclusions .rules-grid>div{position:relative;min-width:0;background:#F9F9F9;border:0;border-radius:10px;padding:26px 24px 28px}
/* 图标盒：**用 :has(img) 分流两套规格**
· 有 ![]()
切图（tour-eastern-china，已对齐画板）→ 48x48 / 圆角12 / 白底
· 仍是内联