/* ============================================================
   菩提小院 H5 预约页 · 设计系统
   色彩依据：《菩澜渡·品牌色阶与视觉基准（定案 v3）》+ 宗鑫 2026-10-02 定案
   主色 暖棕金 #8B6E4E ｜ 底 柔沙 #F5F0E8 ｜ 点缀 沙金 #C9A87C
   ============================================================ */

:root {
  /* —— 色彩令牌（暖棕金十一阶，本项目用到第 1–11 阶中的 8 个）—— */
  --c-ink-900: #1E1A15;   /* 01 玄墨：深色块底 */
  --c-ink-800: #2D2620;   /* 02 墨棕：标题 */
  --c-ink-700: #4A3E30;   /* 03 深棕 */
  --c-ink-600: #6B5540;   /* 04 褐棕 */
  --c-brand:   #8B6E4E;   /* 05 主棕：主色（标识/主标题/关键数字/重点短语） */
  --c-brand-d: #75603F;   /* 主色按下态 */
  --c-gold:    #C9A87C;   /* 07 沙金：编号 / 细线 / 图标 */
  --c-gold-l:  #DCC49F;   /* 08 浅金：高光 */
  --c-sand:    #F5F0E8;   /* 10 柔沙：全局底 */
  --c-paper:   #FAF7F1;   /* 11 纸白：卡片面 */
  --c-text:    #4A4640;   /* 正文（与程序侧同族共用） */
  --c-text-2:  #6E675E;   /* 次级文字 */
  --c-text-3:  #948C81;   /* 辅助文字 */
  --c-line:    #E5DCCE;   /* 分隔线 */

  /* —— 展开层（2026-10-07 增加）——
     背景：宗鑫原话「点开之后会展开详情。展开之后的颜色跟条状的颜色有一些色差，
     不然的话看不清晰，所以需要做一些色阶不同的设置。」
     问题：此前「收起条」与「展开详情」同用 --c-paper，#FAF7F1 一个色，
     展开后只剩一条 1px 细线做分隔，层次出不来。
     做法：展开区改用比纸白深一档的暖沙（同一暖棕金色阶内的第 9 阶），
     配合顶部内阴影，读起来像「从卡片上凹进去的一层」。
     ⚠️ 只改「展开区」的底色，不动收起条 —— 收起条负责在列表里浮起来，
        它必须是最亮的那一层。两者关系是「纸白压暖沙」，不是反过来。 */
  --c-panel:   #EFE7D8;   /* 展开层底：比纸白深一档 */
  --c-line-2:  #DFD2BB;   /* 展开层内的分隔线（落在暖沙底上仍看得见） */

  /* —— 字体：统一思源（宗鑫指定，整个疗愈空间统一）—— */
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans:  "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* —— 版式：留白 ≥ 行高 1.5 倍，模块间距 ≥ 40px —— */
  --gap-section: 44px;
  --gap-block: 24px;
  --gap-line: 14px;
  --radius: 12px;         /* 圆角统一 12px */
  --radius-lg: 18px;
  --pad-page: 22px;       /* 页面左右留白 */

  /* —— 字号：H5 屏宽基准（见交付说明中的字号口径）—— */
  --fs-hero: 30px;        /* 首屏主标题 */
  --fs-h1: 26px;          /* 页面大标题 */
  --fs-h2: 20px;          /* 区块标题 */
  --fs-h3: 17px;          /* 卡片标题 */
  --fs-body: 17px;        /* 正文（比常规 16px 稍大，照顾中老年住客） */
  --fs-sm: 15px;          /* 辅助说明 */
  --fs-xs: 13px;          /* 页脚 */

  --lh-body: 1.85;        /* 正文行高，留白感 */
  --lh-tight: 1.4;

  --shadow-card: 0 2px 14px rgba(45, 38, 32, .05);
  --shadow-float: 0 -4px 20px rgba(45, 38, 32, .08);
}

/* ============================ 基础 ============================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ⚠️ 这条必须留着（2026-10-03 补）——
   `hidden` 属性靠浏览器默认样式表 `[hidden]{display:none}` 生效，而**作者样式表里的
   任何 display 声明都会盖过默认样式表**（不管选择器权重高低）。本项目恰好中招两处：
     ① `.receipt__row{display:flex}` ⇒「我的预约」每张卡底部多出一条 23px 空白行；
     ② `.btn{display:flex}` ⇒ 老师端点开「设置」会看到本不该出现的「去总后台 →」。
   （反过来 `#settings`/`.ad-sec` 没声明 display，所以一直是对的 —— 这种「一半对一半错」
   最难发现。所以不逐个去改那些类的 display，而是从根上把 hidden 的语义钉死。） */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-sand);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

/* 有底部固定导航时给内容留位 */
body.has-tabbar { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

/* 软键盘弹起时补出滚动空间（2026-10-04，见 assets/js/keyboard-safe.js）。
   由来：登录页这类「恰好一屏高」的页面没有任何可滚动余量，软键盘一盖上来，
   焦点输入框就滚不动了，人被键盘挡住了也看不见自己打的字。
   脚本量出键盘高度写进 --kb-space，这里只负责把它变成页面底部的一块空间。
   键盘收起后 .kb-up 自动摘掉，正常浏览时页面不会多出空白。 */
html.kb-up body { padding-bottom: var(--kb-space, 0px); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--c-ink-800);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: .01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

img { display: block; max-width: 100%; }

a { color: var(--c-brand); text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* ============================ 布局 ============================ */

.page { max-width: 560px; margin: 0 auto; }

.section {
  padding: var(--gap-section) var(--pad-page);
}

.section--tight { padding-top: 28px; }

/* 页面大标题：上方一条沙金细线，克制的中式版式 */
.page-head {
  padding: 30px var(--pad-page) 0;
  text-align: center;
}
.page-head h1 {
  font-size: var(--fs-h1);
  letter-spacing: .06em;
}
.page-head .rule {
  width: 36px;
  height: 1px;
  background: var(--c-gold);
  margin: 16px auto 0;
}
.page-head .sub {
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 1.8;
}

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: 6px;
}
.section-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 1.75;
  margin-bottom: var(--gap-block);
}

.prose {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
}
.prose p { margin-bottom: 1.1em; }

/* ============================ 顶部返回条 ============================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 var(--pad-page);
  background: rgba(245, 240, 232, .92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.topbar .back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
}
.topbar .back svg { width: 16px; height: 16px; }
/* 顶栏的品牌位：用菩提小院书法手写体原文件，不用字库排版 */
.brand-mark {
  display: block;
  margin-left: auto;
  height: 19px;
  width: auto;
}

/* ============================ 首屏 ============================ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--c-ink-900);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../img/XC-01-菩提小院-庭院.jpg");
  background-size: cover;
  background-position: center 42%;
  /* 极缓慢的呼吸感缩放，禁弹跳 */
  animation: heroBreath 24s ease-in-out infinite alternate;
}
@keyframes heroBreath {
  from { transform: scale(1.02); }
  to   { transform: scale(1.09); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(30,26,21,.42) 0%, rgba(30,26,21,.20) 32%, rgba(30,26,21,.52) 72%, rgba(30,26,21,.78) 100%);
}

.hero__brand {
  position: relative;
  padding: 26px var(--pad-page) 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #F3EEE6;
}
.hero__brand .name {
  font-family: var(--font-serif);
  font-size: 17px;
  letter-spacing: .18em;
}
.hero__brand .en {
  font-size: 10px;
  letter-spacing: .3em;
  opacity: .72;
  text-transform: uppercase;
}
/* 左上角品牌位：菩澜渡「完整版」标识原文件
   （书法中文 ＋ 右侧「渡舟」符号 ＋ WisFerry 英文，深色照片上用反白版）。
   2026-10-02 宗鑫指出：此前那版只截了三个字、缺符号，且尺寸偏大。
   现换完整版，并把高度回调到与「原文字排版」相当的视觉重量
   （原文字块主体是 17px 的「菩澜渡」＋10px 的 WISFERRY，宽约 50px）。 */
.hero__logo {
  display: block;
  height: 20px;
  width: auto;
}

.hero__center {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 30px;
  color: #fff;
}
.hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  line-height: 1.55;
  letter-spacing: .1em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.32);
  font-weight: 500;
}
.hero__sub {
  margin-top: 20px;
  font-size: var(--fs-sm);
  letter-spacing: .16em;
  color: rgba(255,255,255,.86);
  line-height: 1.9;
}
.hero__rule {
  width: 28px;
  height: 1px;
  background: rgba(201,168,124,.9);
  margin: 22px auto 0;
}

.hero__foot {
  position: relative;
  padding: 0 var(--pad-page) calc(30px + env(safe-area-inset-bottom));
  text-align: center;
  color: rgba(255,255,255,.8);
  font-size: var(--fs-sm);
  letter-spacing: .1em;
}
.hero__arrow {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto 10px;
  animation: floatDown 2.6s ease-in-out infinite;
}
@keyframes floatDown {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ============================ 卡片 ============================ */

.card {
  background: var(--c-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* 项目卡片 */
.course {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 108px;
  background: var(--c-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 14px;
  transition: transform .22s ease;
}
.course:active { transform: scale(.985); }

.course__thumb {
  width: 104px;
  flex: 0 0 104px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.course__body {
  flex: 1;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.course__no {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--c-gold);
  margin-bottom: 5px;
}
.course__name {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--c-ink-800);
  margin-bottom: 7px;
  letter-spacing: .02em;
}
.course__meta {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  line-height: 1.6;
}
/* 体验券抵扣规则：直接标在项目卡上（2026-10-02 宗鑫要求显式标注）
   · 住客专属项目 → ✓ 体验券全额抵扣（不补差价）
   · 其他项目     → 体验券抵 198 元 · 补差 X 元
   ⚠️ 这是 flex 容器，内联 SVG 必须显式定尺寸，否则会被拉伸成巨大图标。 */
.course__voucher {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-brand);
}
.course__voucher svg { flex: 0 0 auto; width: 13px; height: 13px; }

/* 板块 04 的文字型入口（无可约项目，点进去看内容） */
.course--text .course__thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #EFE7D9 0%, #E3D7C3 100%);
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .16em;
  line-height: 1.7;
  color: var(--c-brand);
  text-align: center;
}

/* 卡片上的小标签（口径沿革，只作记录，别照抄）：
   先废掉「免费名额」→ 又把「每房赠送一张」收敛成「每房每天一张」。
   对外说法只有一个真源＝ data.js 顶部的 VOUCHER_PER_TEXT；
   本文件只管样式，**不写文案**。 */
.tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--c-gold-l);
  color: #7A6A3E;
  background: #FBF6EC;
  vertical-align: middle;
}

/* 板块分组头 */
.group { margin-bottom: 34px; }
.group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.group__no {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--c-gold);
}
.group__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  color: var(--c-ink-800);
}
.group__sub {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 1.7;
  margin: 0 0 16px;
}

/* ============================ 按钮 ============================ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border-radius: var(--radius);
  font-size: 17px;
  letter-spacing: .1em;
  font-family: var(--font-sans);
  transition: background .2s ease, opacity .2s ease;
}
/* 按钮内图标：内联 SVG 没有 width/height 属性，放进 flex 容器会被当作
   可伸缩项拉伸（曾实测被撑成 216×216px，直接撑爆 52px 高的按钮）。
   用 em 跟随按钮字号，字号变则图标同步自适应。 */
.btn svg {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
}
/* 主按钮：暖棕金底 + 白字（对比度 4.73:1 ✅） */
.btn--primary {
  background: var(--c-brand);
  color: #fff;
  box-shadow: 0 4px 16px rgba(139,110,78,.24);
}
.btn--primary:active { background: var(--c-brand-d); }
.btn--primary[disabled] { opacity: .45; box-shadow: none; }

.btn--ghost {
  background: transparent;
  color: var(--c-brand);
  border: 1px solid var(--c-gold);
}
.btn--ghost:active { background: #F7F1E6; }

.btn--quiet {
  background: #EFE7D9;
  color: var(--c-ink-700);
}

.btn-row { display: flex; gap: 12px; }

/* 底部固定按钮区（详情页「选择日期预约」） */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 12px var(--pad-page) calc(12px + env(safe-area-inset-bottom));
  background: rgba(245, 240, 232, .94);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--c-line);
}
.actionbar__inner { max-width: 560px; margin: 0 auto; }

/* ============================ 底部导航 ============================ */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  background: rgba(250, 247, 241, .96);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 62px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--c-text-3);
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a.is-active { color: var(--c-brand); }

/* ============================ 信息栏 / 列表 ============================ */

.info-list {
  background: var(--c-paper);
  border-radius: var(--radius);
  padding: 4px 18px;
  box-shadow: var(--shadow-card);
}
.info-row {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.info-row:last-child { border-bottom: 0; }
.info-row dt {
  flex: 0 0 62px;
  color: var(--c-text-3);
  font-family: var(--font-sans);
}
.info-row dd { margin: 0; color: var(--c-ink-700); flex: 1; }

/* 要点列表：沙金圆点 */
.bullets { list-style: none; padding: 0; margin: 0; }
.bullets li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text);
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
}

/* ============================ 折叠（FAQ）============================ */

.fold {
  background: var(--c-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.fold__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 18px;
  text-align: left;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--c-ink-800);
  line-height: 1.6;
}
.fold__q .ico {
  flex: 0 0 16px;
  margin-top: .45em;
  color: var(--c-gold);
  transition: transform .28s ease;
}
/* 同类加固：容器只限了宽度，图标自身尺寸也显式写死，避免被 flex 拉伸 */
.fold__q .ico svg { width: 16px; height: 16px; }
.fold.is-open .fold__q .ico { transform: rotate(45deg); }
.fold__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s ease;
}
.fold__a > div {
  padding: 0 18px 20px;
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--c-text);
}

/* ============================ 表单 ============================ */

.field { margin-bottom: 20px; }
.field__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
  margin-bottom: 9px;
  letter-spacing: .04em;
}
.field__label .req { color: var(--c-brand); margin-left: 3px; }
.field__hint {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 8px;
  line-height: 1.6;
}
.input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--c-ink-800);
  font-size: 16px;   /* ≥16px 防 iOS 聚焦缩放 */
  font-family: var(--font-sans);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: #B6ADA0; }
.input:focus { outline: none; border-color: var(--c-gold); }
.input[readonly] { background: #F1EBE0; color: var(--c-text-2); }

/* 步进器（参与人数） */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  height: 50px;
  overflow: hidden;
}
.stepper button {
  width: 54px;
  height: 100%;
  font-size: 22px;
  color: var(--c-brand);
  line-height: 1;
}
.stepper button[disabled] { color: #CDC4B6; }
.stepper__val {
  flex: 1;
  text-align: center;
  font-size: 17px;
  color: var(--c-ink-800);
  border-left: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  line-height: 48px;
}

/* 选择卡（时段 / 日期） */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-width: 84px;
  padding: 11px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
  text-align: center;
  line-height: 1.4;
  transition: all .2s ease;
}
.chip small { display: block; font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 3px; }
.chip.is-on {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
.chip.is-on small { color: rgba(255,255,255,.82); }
.chip[disabled] {
  background: #F1EBE0;
  color: #B6ADA0;
  border-color: #E8E0D2;
}
.chip[disabled] small { color: #C2B9AC; }

/* 时长档位（一对一项目的分档价）：标签含时长+档位名，独占一行、左对齐更好读 */
.chip--tier {
  flex: 1 1 100%;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
}
.chip--tier small { color: var(--c-text-3); }
.chip--tier.is-on small { color: rgba(255,255,255,.86); }

/* ============================ 底部弹出表单 ============================ */

.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(30,26,21,.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.sheet-mask.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  max-height: 92svh;
  background: var(--c-sand);
  border-radius: 20px 20px 0 0;
  transform: translateY(102%);
  transition: transform .36s cubic-bezier(.32,.72,.28,1);
  display: flex;
  flex-direction: column;
}
.sheet.is-open { transform: translateY(0); }
.sheet__grip {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #D9CFBE;
  margin: 10px auto 0;
  flex: 0 0 auto;
}
.sheet__head {
  padding: 14px var(--pad-page) 12px;
  text-align: center;
  flex: 0 0 auto;
}
.sheet__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  color: var(--c-ink-800);
}
.sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 6px var(--pad-page) 20px;
  -webkit-overflow-scrolling: touch;
}
.sheet__foot {
  flex: 0 0 auto;
  padding: 12px var(--pad-page) calc(14px + env(safe-area-inset-bottom));
  background: var(--c-sand);
  border-top: 1px solid var(--c-line);
}
.sheet__foot .note {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 10px;
  line-height: 1.6;
}

/* 已选项目摘要条 */
.picked {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-paper);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
}
.picked__no {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--c-gold);
}
.picked__name {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--c-ink-800);
  margin: 3px 0 4px;
}
.picked__when { font-size: var(--fs-sm); color: var(--c-text-2); }

/* ============================ 成功页 ============================ */

.done {
  text-align: center;
  padding: 56px var(--pad-page) 0;
}
.done__ico {
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
}
.done__ico svg { width: 26px; height: 26px; }
.done h1 { font-size: var(--fs-h1); letter-spacing: .1em; }
.done__sub {
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  letter-spacing: .08em;
}

/* 预约信息卡（成功页 / 我的预约） */
.receipt {
  background: var(--c-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
  text-align: left;
}
.receipt__row {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.receipt__row + .receipt__row { border-top: 1px solid var(--c-line); }
.receipt__k { flex: 0 0 58px; color: var(--c-text-3); }
.receipt__v { flex: 1; color: var(--c-ink-800); }
.receipt__v strong { font-family: var(--font-serif); font-weight: 600; }

/* ============================ 到店路线引导（2026-10-07 新增）============================
   宗鑫原话：「我给你发的图片是在『客户预约信息』那一栏的地址引导图，也就是到我们菩提小院的
   地址引导图。它可以放在『预约成功』那个栏下面。」
   素材＝9 格竖条实景（大堂门口·下车点 → 向前直走 → …… → 菩提小院），
   原图 521×1920，比例 1:3.69。

   ⚠️ 为什么默认收起：整条摊开约占 1.5 屏，会把成功页顶成一条长图；
      而「怎么走」只对现场要过来的人有用 —— 收起态把话说足（标题＋一句话），
      要的人点开就有（收起来 ≠ 藏起来）。
   ⚠️ 展开后只给 58vh 的窗口、框内自己滚，不让整页被顶走：
      客人是边走边照着看的，页面一跳到别处就要重新找位置。 */
.route {
  background: var(--c-paper); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.route__head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px 18px; border: 0; background: transparent;
  font-family: inherit; text-align: left; cursor: pointer;
}
.route__head:active { background: #FBF8F2; }
.route__ico { flex: 0 0 20px; width: 20px; height: 20px; color: var(--c-brand); }
.route__ico svg { width: 20px; height: 20px; display: block; }
.route__t {
  flex: 1; min-width: 0; font-family: var(--font-serif);
  font-size: var(--fs-h3); color: var(--c-ink-800);
}
.route__t small {
  display: block; margin-top: 4px; font-family: var(--font-sans);
  font-size: 12.5px; color: var(--c-text-3); letter-spacing: 0;
}
.route__chev { flex: 0 0 auto; position: relative; width: 16px; height: 16px; }
.route__chev::before {
  content: ''; position: absolute; left: 3px; top: 5px;
  width: 7px; height: 7px; box-sizing: border-box;
  border-right: 1.5px solid var(--c-text-3);
  border-bottom: 1.5px solid var(--c-text-3);
  transform: rotate(45deg);
  transition: transform .18s ease, top .18s ease;
}
.route.is-open .route__chev::before { top: 8px; transform: rotate(-135deg); }
/* 展开区用 --c-panel：与收起条形成色阶，一眼看出「这是展开出来的那一层」 */
.route__body { background: var(--c-panel); border-top: 1px solid var(--c-line-2); }
.route__step {
  margin: 0; padding: 12px 18px 10px;
  font-size: 12.5px; line-height: 1.6; color: var(--c-text-2); letter-spacing: .02em;
}
.route__scroll {
  max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--c-line-2); border-bottom: 1px solid var(--c-line-2);
  background: #2D2620;   /* 图与图之间的接缝用深色兜底，避免出现白线 */
}
.route__img { display: block; width: 100%; height: auto; }
.route__hint {
  margin: 0; padding: 12px 18px 16px;
  font-size: 12.5px; line-height: 1.7; color: var(--c-text-2);
}
.route__hint a { color: var(--c-brand); }

/* 状态徽标 */
.badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 2px 9px;
  border-radius: 999px;
  line-height: 1.7;
}
.badge--wait { background: #F6EEDD; color: #8A6E3C; }
.badge--ok   { background: #E9EFE7; color: #4F6A4A; }
.badge--done { background: #DCE7DA; color: #3F5B3B; }
.badge--off  { background: #EFEAE2; color: #8A8377; }

/* ============================ 提示条 ============================ */

.notice {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: #FBF6EC;
  border: 1px solid #EBDFC8;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-ink-700);
}
.notice svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: .42em; color: var(--c-gold); }

/* ============================ 信任区 ============================ */

.trust {
  background: var(--c-paper);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.trust__quote {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--c-ink-800);
  line-height: 1.9;
  letter-spacing: .03em;
}
.trust__by {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  letter-spacing: .1em;
}

/* ============================ 今日场次列表（首页）============================ */

/* 2026-10-03 宗鑫口径：今天/明天不再上下各列一遍（同一批场次出现两次、页面太长），
   改成「点谁看谁」——两枚标签并排，日期直接写在各自标签里，正文一屏只有一天。 */
.slots__switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(201, 168, 124, .16);
}
.slots__sw {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--c-text-2);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.slots__sw i {
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--c-text-3);
}
.slots__sw.is-on {
  background: var(--c-paper);
  color: var(--c-ink-800);
  box-shadow: 0 1px 4px rgba(45, 38, 32, .07);
}
.slots__sw.is-on i { color: var(--c-brand); }
.slots__sw:active { background: rgba(250, 247, 241, .65); }
.slots {
  background: var(--c-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.slot-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  color: inherit;
  border-bottom: 1px solid var(--c-line);
  transition: background .2s ease;
}
.slot-row:last-child { border-bottom: 0; }
.slot-row:active { background: #F3EDE2; }
/* 已过预约截止的场次：整行压暗，时间下面加一枚「已截止」小字 */
.slot-row--closed { opacity: .5; }
.slot-row__time small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-text-3);
  margin-top: 2px;
}
.slot-row__time {
  flex: 0 0 52px;
  font-family: var(--font-serif);
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--c-brand);
}
.slot-row__info { flex: 1; min-width: 0; }
.slot-row__name {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-ink-800);
  margin-bottom: 3px;
}
.slot-row__note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.slot-row__go {
  flex: 0 0 16px;
  color: var(--c-gold);
}
.slot-row__go svg { width: 16px; height: 16px; display: block; }
/* 名额徽标（2026-10-03 新增；2026-10-04 改为二元状态）：
   放在行尾替代原来的箭头，只写「可约」或「约满」——
   宗鑫 2026-10-04：「不要写具体的剩余数字（如『剩 10』或『10』）」。
   用浅金底 + 深棕字，**不用红色**：名额状态是正常经营信息，不是告警。 */
.slot-row__seat {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(201, 168, 124, .18);
  color: var(--c-ink-700);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  white-space: nowrap;
}
/* 空态（该日已无可约场次 / 正在读取）：给个落差，别贴着卡片边 */
.slots--empty { padding: 18px; text-align: center; }

/* ============================ 本单到店应付（2026-10-03 新增）============================ */
/* 宗鑫原话：「客户选定后，单子上必须显示出需要补钱的信息，让客户能看到」、
   「提示一定要清晰，放在最显眼的位置，但也不要显得特别刻意」。
   做法＝独立信息条 + 大一号金额；**不用红色边框、不加感叹号** ——
   使用体验券补差价是常规规则，不是出错，用告警样式反而让客人以为点错了。 */
.dobox {
  margin: 6px 0 8px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
}
.dobox__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dobox__label { font-size: var(--fs-sm); color: var(--c-text-2); letter-spacing: .04em; }
.dobox__amount {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.1;
  color: var(--c-brand);
}
.dobox__detail { margin-top: 6px; font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.6; }
.slots__foot {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  text-align: center;
  letter-spacing: .04em;
}

/* ============================ 成长路径四步 ============================ */

.steps { display: flex; flex-direction: column; gap: 12px; }
.step {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--c-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.step__no {
  flex: 0 0 28px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--c-gold);
  letter-spacing: .08em;
}
.step__name {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--c-ink-800);
  margin-bottom: 5px;
}
.step__note { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.75; }

/* ============================ Banner 轮播（项目详情首图）============================ */
/* 版位＝满宽 × 46svh（390×844 真机下约 390×388，接近 1:1）。
   出图规格见交付说明：750×750 px，主体放上 2/3。 */

.carousel {
  position: relative;
  overflow: hidden;
}
.carousel__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .46s cubic-bezier(.32,.72,.28,1);
}
.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
/* 圆点放在右上角：Banner 底部 18% 被渐隐成沙色、且有标题文字，
   圆点放底部会与标题打架、在浅色上又看不清。右上角压在深色照片区，配半透明底稳定可读。 */
.carousel__dots {
  position: absolute;
  left: auto;
  right: var(--pad-page);
  top: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(30, 26, 21, .3);
  backdrop-filter: blur(4px);
}
.carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  border: 0;
  transition: all .25s ease;
}
.carousel__dot.is-on {
  width: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
}

/* ============================ 页脚 ============================ */

.footer {
  padding: 32px var(--pad-page) 40px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  line-height: 2;
}
/* 落款用书法手写体原文件（菩澜渡 ＋ 菩提小院）。
   品牌库的「主色版」实际填色为墨色 #231916（非品牌棕），浅底用它、「反白版」为 #FFFFFF 用于深色照片 */
.footer .mark { margin-bottom: 12px; }
.footer .brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.brand-lockup__logo { height: 20px; width: auto; }
.brand-lockup__space { height: 17px; width: auto; }
.brand-lockup__sep { color: var(--c-gold); font-size: 13px; }
.footer a { color: var(--c-text-3); text-decoration: underline; text-underline-offset: 3px; }

/* 首屏底部的渐隐提示语 */
.muted { color: var(--c-text-3); font-size: var(--fs-sm); }

/* ============================ 入场动效（轻微渐显/上滑，禁弹跳）============================ */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.68,.32,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero__bg, .hero__arrow { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ============================ 骨架屏 / 加载态 ============================ */

.skeleton {
  background: linear-gradient(100deg, #EFE8DC 30%, #F6F1E7 50%, #EFE8DC 70%);
  background-size: 200% 100%;
  animation: sk 1.3s ease-in-out infinite;
  border-radius: var(--radius);
}
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  line-height: 2;
}

/* 桌面预览时给一点边距，方便在电脑上看 */
@media (min-width: 620px) {
  body { background: #EDE6DA; }
  .page, .actionbar__inner { background: var(--c-sand); }
  .page { box-shadow: 0 0 40px rgba(45,38,32,.08); min-height: 100svh; }
}

/* ============================ 首页 · 底部导航的版面处理（2026-10-07） ============================ */
/* 宗鑫要求首页也显示底部菜单栏。这件事**不是「加一行」**：
   首页是「hero 占满一屏」的氛围页，而 .tabbar 是 fixed 定位 ——
   直接挂上会盖住 hero 底部的「向下滑动」提示；只给 body 加 padding-bottom
   又会在首屏之下留出一条 62px 的空白带（hero 仍然是 100svh）。
   做法：让 hero 的高度**减去导航的实际占位**（62px + 安全区），
   于是「hero + 导航」正好拼满一屏，提示语落在导航之上；
   body 那条 padding-bottom 则只负责给长页最底部（页脚）留出不被遮挡的空间。 */
body[data-page="home"] .hero {
  height: calc(100svh - 62px - env(safe-area-inset-bottom, 0px));
  min-height: 500px;
}
/* 安全区已经被导航吃掉了，hero 自己不必再留一遍 */
body[data-page="home"] .hero__foot { padding-bottom: 26px; }

/* ============================ 到店评价（2026-10-07） ============================ */
/* 口径：3 项打分 × 5 星（**10 个色节，1 个色节 = 半星**）＋ 一段自由文字，先打分再写字。
   ⚠️ 热区层必须与**星条严格同宽**。若让热区铺满整行（这是常被写成「更宽松」的做法），
   客人点在「星 1 的右半边」时会落到第 2 个色节＝0.5 分，而他看着像点了 1 分 ——
   「看着像、其实不是」是最伤信任的一种交互错误。所以两个层同宽、10 等分。 */

/* —— 待评价卡（列表顶部，不自动弹窗）—— */
.todo {
  background: var(--c-paper);
  border: 1px solid #EBD8BC;
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 14px rgba(45,38,32,.05);
  padding: 18px 18px 16px;
  margin-bottom: 16px;
}
.todo__cap {
  font-size: 12.5px; letter-spacing: .08em; color: var(--c-brand);
  display: flex; align-items: center; gap: 6px;
}
.todo__title { font-family: var(--font-serif); font-size: 17px; color: #2D2620; margin: 9px 0 5px; line-height: 1.5; }
.todo__meta { font-size: 13px; color: var(--c-text-3); line-height: 1.8; }
.todo__btn { margin-top: 14px; }

/* —— 评价弹层 —— */
.rsheet {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 90;
  display: flex; align-items: flex-end; justify-content: center;
}
.rsheet__mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(38,32,26,.42); }
.rsheet__panel {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--c-paper); border-radius: 20px 20px 0 0;
  padding: 22px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: rsheet-up .26s ease-out;
}
@keyframes rsheet-up { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.rsheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rsheet__title { font-family: var(--font-serif); font-size: 18px; color: #2D2620; line-height: 1.5; }
.rsheet__meta { font-size: 13px; color: var(--c-text-3); margin-top: 6px; line-height: 1.7; }
.rsheet__x {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  font-size: 20px; color: var(--c-text-3); line-height: 1;
}
.rsheet__ask { font-size: 14.5px; line-height: 1.95; color: var(--c-text); margin: 14px 0 2px; }
.rsheet__ask em { font-style: normal; color: var(--c-brand); }

/* 打分三行 */
.rrow { padding: 14px 0 10px; border-bottom: 1px dashed var(--c-line); }
.rrow:last-of-type { border-bottom: 0; }
.rrow__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rrow__name { font-size: 15.5px; color: #2D2620; }
.rrow__score { font-size: 13px; color: var(--c-text-3); white-space: nowrap; }
.rrow__score.on { color: var(--c-brand); }
.rrow__score b { font-size: 18px; font-weight: 600; }

/* 星条 + 热区（严格同宽、10 等分） */
.rate { margin-top: 9px; }
.rate__bar { position: relative; display: inline-block; }
.rate__stars { display: flex; gap: 8px; font-size: 36px; line-height: 1; }
.rate__stars .st { font-style: normal; position: relative; display: inline-block; }
.rate__stars .bg { color: #E6DDCD; }
.rate__stars .fg { position: absolute; left: 0; top: 0; color: var(--c-gold); }
.rate__stars .st.empty .fg { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
.rate__stars .st.half  .fg { -webkit-clip-path: inset(0 50% 0 0);  clip-path: inset(0 50% 0 0); }
.rate__zones { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; }
.rate__zones button {
  flex: 1 1 0; background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 文字区 */
.rtext { margin-top: 16px; }
.rtext textarea {
  width: 100%; min-height: 96px; resize: none; border: 1px solid var(--c-line);
  border-radius: var(--radius); background: #FFFDF9; padding: 13px 14px;
  font-family: var(--font-sans); font-size: 14.5px; line-height: 1.8; color: var(--c-text); outline: none;
}
.rtext textarea::placeholder { color: #B3AA9D; }
.rtext textarea:focus { border-color: var(--c-gold); }
.rtext__hint { margin-top: 7px; font-size: 12px; color: var(--c-text-3); }

/* 只读态（已评价） */
.rv { margin-top: 4px; }
.rv__line { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--c-line); }
.rv__line:last-of-type { border-bottom: 0; }
.rv__k { font-size: 15px; color: #2D2620; }
.rv__v { font-size: 14px; color: var(--c-brand); }
.rv__text {
  margin-top: 12px; background: #F3EDE2; border-radius: var(--radius);
  padding: 13px 14px; font-size: 14.5px; line-height: 1.85; color: var(--c-text);
  white-space: pre-wrap; word-break: break-word;
}
.rv__text span { display: block; margin-top: 8px; font-size: 12px; color: var(--c-text-3); }