/* ============================================================
   旅游专列预订中心 - 前台站点样式
   配色：金色主调（加深版，保证文字与按钮的可读性）
   hero（搜索 + 背景图）沿用 portal.css，此文件负责其余部分
   ============================================================ */

:root {
    /* 主色：金色 */
    --c-primary: #b8923f;
    --c-primary-dark: #a8863a;
    /* 支付红：定金金额 / 立即支付按钮 / 确认页「提交订单」统一用这一支红，
       避免三个地方各用各的红（原来按钮是 bootstrap 的 #dc3545，金额是 #c0392b） */
    --c-pay-red: #e63946;
    --c-pay-red-dark: #cf2f3c;
    --c-dark: #1f2a36;
    --c-text: #1e1e1e;
    --c-text-2: #5f6b7a;
    --c-text-3: #7a8793;
    --c-bg: #faf9f6;
    --c-card: #ffffff;
    --c-shadow: 0 10px 30px -10px rgba(0, 0, 0, .1);
    --c-radius: 12px;
}

body.portal-body {
    background-color: var(--c-bg);
    color: var(--c-text);
}

/* 站点内容容器：与 hero 内的搜索面板对齐 */
.site-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================= 顶部导航栏 ================= */
.site-header {
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .05);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
}
/* 右侧组：预订热线 + 登录注册 + 移动端菜单按钮 */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 0 0 auto;
}
.logo-img {
    height: 52px;
    width: auto;
    border-radius: 8px;
    display: block;
}
.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--c-text);
    line-height: 1.2;
}
.logo-text .sub {
    display: block;
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: #6b7b8b;
    margin-top: 2px;
}
.main-nav {
    display: flex;
    gap: 32px;
    font-weight: 500;
    flex-wrap: wrap;
    margin-right: 20px; /* 整体左移 20px */
}
.main-nav a {
    text-decoration: none;
    color: #2d3e50;
    transition: color .2s;
    font-size: 1rem;
}
.main-nav a:hover { color: var(--c-primary); }
.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
/* 头部预订热线：与菜单同字号同色，位于右侧组首位 */
.header-hotline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: #2d3e50;
    font-size: 1rem;
    line-height: 1.4;
    margin-right: 20px; /* 与右侧登录按钮再拉开 10px */
}
.header-hotline i { color: #dc3545; font-size: 1.05rem; }
/* 手机端头部导航行右侧的预订热线：PC 端隐藏，只在 ≤991.98px 出现（样式见媒体查询） */
.nav-hotline { display: none; }
.header-hotline .hh-label { color: #2d3e50; font-size: 1rem; }
.header-hotline .hh-num {
    color: var(--c-primary-dark);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .5px;
    position: relative;
    top: 1px; /* 号码下移 1px 对齐 */
}
.btn-outline {
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    background: transparent;
    padding: 5px 14px;
    border-radius: 40px;
    font-weight: 500;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: .2s;
}
.btn-outline:hover { background-color: var(--c-primary); color: #fff; }
.btn-solid {
    background-color: var(--c-primary);
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 40px;
    font-weight: 500;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: .2s;
}
.btn-solid:hover { background-color: var(--c-primary-dark); color: #fff; }
.lang-switch {
    display: flex;
    gap: 6px;
    font-size: .78rem;
}
.lang-switch a {
    color: var(--c-text-3);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 20px;
    transition: .2s;
}
.lang-switch a:hover { color: var(--c-primary); background: rgba(201, 169, 89, .1); }
.lang-switch a.active { color: var(--c-primary); font-weight: 600; }

/* 移动端汉堡菜单按钮 */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--c-dark);
    cursor: pointer;
    padding: 4px 8px;
}

/* ================= 通用区块标题 ================= */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--c-text);
}
/* 次级区块标题：比站点名称（1.5rem）小一号 */
.section-title-sub { font-size: 1.3rem; }
.section-sub {
    color: var(--c-text-2);
    margin-bottom: 34px;
    font-size: 1.05rem;
}
/* 区块标题 + 副标题：排列在同一行（副标题紧跟标题，靠左） */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 26px;
}
.section-head .section-title,
.section-head .section-sub { margin-bottom: 0; }
.section-block {
    margin-bottom: 24px;
}
.hotline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-primary-dark);
    font-weight: 700;
    font-size: 1.15rem;
    padding-bottom: 14px;
    white-space: nowrap;
}
.hotline i { color: var(--c-primary); }

/* ================= 产品卡片网格 ================= */
.train-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}
/* 搜索结果页：PC 一行固定 3 个（沿用首页卡片风格），窄屏降为 2 列 / 1 列 */
.search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- 搜索结果卡片：结构与首页卡片完全一致 ----
   图上只有「豪华型 / 舒适型」等级角标 + 底部「出发地 → 目的地 · 天数」浮层，
   图下是 列车名 + 价格 —— 所以原来那套「图上放产品名（两行浮层）+ 内容区只剩价格」
   的专属覆盖整段删掉了，改用 .train-card 的通用样式（与首页同源）。
   下面只保留搜索页独有的「无封面图占位」。 */
.search-grid .card-img.no-img {
    background: linear-gradient(135deg, #eef2f7 0%, #dde6f0 100%);
}
.search-grid .card-img .img-ph {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    font-size: 58px;
    color: #b9c6d6;
    opacity: .75;
}
@media (max-width: 991.98px) {
    .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 575.98px) {
    .search-grid { grid-template-columns: 1fr; }
}
.train-card {
    background: var(--c-card);
    border-radius: var(--c-radius);
    overflow: hidden;
    box-shadow: var(--c-shadow);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.train-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, .15);
}
.train-card .card-img {
    /* 小红书笔记封面比例 3:4（竖版） */
    aspect-ratio: 3 / 4;
    height: auto;
    background-size: cover;
    background-position: center;
    position: relative;
    background-color: #eef1f5;
}
/* 卡片主图按站点切换（图由 cardImgStyle() 以 CSS 变量注入）：
   PC 站  --img-pc = PC横幅 → 推荐图 → 封面
   手机站 --img-mob = 手机图  → 推荐图 → 封面（见下方媒体查询） */
.train-card .card-img { background-image: var(--img-pc); }
/* 卡片主图改用真 <img>（<picture> + loading="lazy"）后，图片元素这样铺满卡片盒：
   盒子自身有 aspect-ratio 定高，所以 img 绝对定位铺满不会引起布局跳动。
   注：上面的 background-image 规则保留作兜底（变量没设时会被判定为无效值 → 相当于 none） */
.card-img .card-img-el,
.holiday-img .card-img-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.train-card .card-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--c-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 40px;
    font-size: .82rem;
    font-weight: 400;
}
.train-card .card-tag.tag-schedules {
    left: auto;
    right: 14px;
    background: rgba(31, 42, 54, .78);
}
/* 图片底部浮层：出发地 → 目的地 · 天数（热门列车 / 假期列车共用） */
.train-card .card-overlay,
.holiday-item .card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 38px 14px 13px;
    /* 底部保持足够黑度（.88），文字区不再只靠 .47 的黑度打底，白字压亮图也清晰 */
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 45%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    font-size: .88rem;
    font-weight: 400;
    letter-spacing: .2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.train-card .card-overlay i,
.holiday-item .card-overlay i { font-size: .95rem; opacity: 1; flex: 0 0 auto; }
.train-card .card-overlay .ov-dot,
.holiday-item .card-overlay .ov-dot { opacity: .75; margin: 0 2px; }
.train-card .card-content {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.train-card .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
    /* 最多两行，保证卡片等高 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.train-card .card-desc {
    color: var(--c-text-2);
    margin-bottom: 16px;
    font-size: .92rem;
    flex: 1;
}
.train-card .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--c-text-3);
    font-size: .85rem;
    margin-bottom: 16px;
}
.train-card .card-meta i { color: var(--c-primary); margin-right: 4px; }
.train-card .card-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto; /* 卡片等高时价格贴底 */
}
.train-card .price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--c-primary-dark);
    line-height: 1.1;
}
.train-card .price small {
    font-size: .85rem;
    font-weight: 400;
    color: #8f9aa8;
}
.btn-card {
    background: transparent;
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    padding: 7px 18px;
    border-radius: 40px;
    font-weight: 400;
    font-size: .9rem;
    text-decoration: none;
    transition: .2s;
    display: inline-block;
    white-space: nowrap;
}
.btn-card:hover { background: var(--c-primary); color: #fff; }

/* ================= 假期特色列车（横向小卡片） ================= */
.holiday-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.holiday-item {
    background: #fff;
    border-radius: var(--c-radius);
    overflow: hidden;
    box-shadow: var(--c-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
    display: block;
}
.holiday-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, .15);
}
.holiday-item .holiday-img {
    /* 与热门列车保持一致：3:4 竖版 */
    aspect-ratio: 3 / 4;
    height: auto;
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #eef1f5;
}
.holiday-item .holiday-img { background-image: var(--img-pc); }   /* 同卡片主图，按站点切换 */
.holiday-item .holiday-info { padding: 14px 16px 18px; }
.holiday-item .holiday-name {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
    margin-bottom: 8px;
    /* 最多两行，保证卡片等高 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 信息区第二行：价格 + 查看详情（与热门卡片的 .card-price 一致：价格靠左、按钮靠右） */
.holiday-item .holiday-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* 按钮顶到卡片右边缘 */
    gap: 8px;
    flex-wrap: wrap;
}
.holiday-item .price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-primary-dark);
}
/* （原 .holiday-item .holiday-date 样式已删除：卡片不再显示「X月X日发车」，
   改与热门卡片一致地显示「查看详情」按钮） */

/* ================= 火车旅行故事 ================= */
.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}
.story-card {
    background: #fff;
    border-radius: var(--c-radius);
    overflow: hidden;
    box-shadow: var(--c-shadow);
    display: flex;
    flex-direction: column;
}
.story-card .story-img {
    height: 190px;
    background-size: cover;
    background-position: center;
    background-color: #eef1f5;
}
.story-card .story-content { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.story-card .story-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.story-card .story-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--c-text-3);
    font-size: .85rem;
    margin-bottom: 12px;
}
.story-card .story-meta i { color: var(--c-primary); margin-right: 4px; }
.story-card .story-excerpt {
    color: #3a4a5a;
    font-size: .92rem;
    margin-bottom: 16px;
    flex: 1;
}
.read-more {
    color: var(--c-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: .9rem;
}
.read-more:hover { color: var(--c-primary-dark); }

/* ================= 内容区标签页（最新公告 / 常见问题 / 火车旅行故事） ================= */
.ct-head {
    display: flex;
    align-items: center;
    margin-bottom: 26px;
}
/* 三个标签，各占 1/3 宽度 */
.ct-tabs { display: flex; gap: 12px; width: 100%; }
.ct-tab {
    position: relative;              /* 选中态下方的小三角以它定位 */
    flex: 1 1 33.3333%;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .3px;
    color: var(--c-text-2);
    background: transparent;
    border: 0.5px solid rgba(31, 42, 54, .1);
    border-radius: 0;
    cursor: pointer;
    transition: color .22s ease, background .22s ease, border-color .22s ease,
                box-shadow .22s ease;
}
.ct-tab:hover {
    color: var(--c-primary);
    border-color: rgba(184, 146, 63, .45);
}
/* 选中项：白底 + 金色细边框 + 内凹阴影，文字与区块标题同色 */
.ct-tab.active {
    background: #fff;
    border-color: rgba(184, 146, 63, .7);
    color: var(--c-text);
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(168, 134, 58, .16),
                inset 0 1px 1px rgba(0, 0, 0, .05);
}
/* 选中标签下方的向下小三角（气泡尾巴），与选中态同一套配色：白底 + 金色细边框。
   做法是「旋转 45° 的白色小方块只留右下两条金边」，露在标签外的部分正好是个向下三角，
   上半部分压在标签底边上，把中间那段底边框盖住 → 无缝连成一个气泡指针。
   切标签时淡入 + 轻微放大；PC 与手机共用这一份样式。 */
.ct-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg) scale(.55);
    background: #fff;
    border-right: 0.5px solid rgba(184, 146, 63, .7);
    border-bottom: 0.5px solid rgba(184, 146, 63, .7);
    box-shadow: 1px 1px 3px rgba(168, 134, 58, .12);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.ct-tab.active::after { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1); }
.ct-panel { display: none; }
.ct-panel.active { display: block; }
.ct-empty { text-align: center; color: #b6bec8; padding: 50px 0; font-size: .95rem; }

/* ---- 公告卡片 ---- */
.ann-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ann-card {
    position: relative;
    background: #fff;
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 20px 22px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
/* 置顶角标固定在右上角，不占用正文顺序 */
.ann-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--c-primary);
    color: #fff;
    font-size: .72rem;
    padding: 2px 8px;
    border-radius: 20px;
}
.ann-date {
    margin-top: auto;
    padding-top: 12px;
    color: var(--c-text-3);
    font-size: .82rem;
}
.ann-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 8px;
    padding-right: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ann-card-sum {
    color: var(--c-text-2);
    font-size: .88rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 常见问题（手风琴） ---- */
.faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-items: start;
}
.faq-item {
    background: #fff;
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    overflow: hidden;
}
.faq-q {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    text-align: left;
    cursor: pointer;
    font-size: .98rem;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.5;
}
.faq-idx {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(184, 146, 63, .12);
    color: var(--c-primary);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.faq-qtext { flex: 1; }
.faq-arrow { color: var(--c-text-3); font-size: .9rem; transition: transform .25s; flex: 0 0 auto; }
.faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--c-primary); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 800px; }
.faq-atext {
    padding: 0 20px 18px 56px;
    color: var(--c-text-2);
    font-size: .9rem;
    line-height: 1.75;
}

/* ================= 页脚（逐值对齐参考站 .footer） ================= */
.site-footer {
    background-color: var(--c-dark);   /* #1f2a36，与参考站 --dark-bg 相同 */
    color: #cfd9e6;
    padding: 60px 0 30px;
    margin-top: 30px;
}
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-col {
    flex: 1 1 0;
    min-width: 200px;
}
/* 三栏对齐：关于左 / 帮助居中 / 关注右（同参考站） */
.footer-col:first-child { text-align: left; }
.footer-col:nth-child(2) { text-align: center; }
.footer-col:last-child { text-align: right; }
.footer-col h4 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a {
    color: #b0c0d0;
    text-decoration: none;
    transition: color .2s;
}
.footer-col ul li a:hover { color: var(--c-primary); }
/* 社交图标：2 列网格、靠右对齐（同参考站 .social-icons） */
.social-icons {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 16px 20px;
    justify-content: end;
    margin-top: 16px;
}
.social-icons a {
    color: #b0c0d0;
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: color .2s;
}
.social-icons a:hover { color: var(--c-primary); }
/* 底部备案信息：同参考站 .footer-bottom（文字继承页脚色，居中） */
.footer-bottom {
    border-top: 1px solid #3a4a5a;
    padding-top: 30px;
    text-align: center;
    font-size: .9rem;
}
.footer-bottom p { margin: 5px 0; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: inherit; }

/* ================= 浮动客服（右侧垂直居中，与 912306 一致） ================= */
.float-kefu {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1020;
}
.kefu-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;                       /* 图标与「客服」贴紧（原来 2px 还带行高，看着有缝） */
    color: #fff;
    cursor: pointer;
    background: linear-gradient(160deg, #d6ba72 0%, var(--c-primary) 55%, var(--c-primary-dark) 100%);
    /* 主体投影 + 一圈白色描边，压在图片/深色底上也分得开 */
    box-shadow: 0 6px 18px rgba(168, 134, 58, .38), 0 0 0 3px rgba(255, 255, 255, .55);
    transition: box-shadow .25s, transform .25s;
}
.kefu-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 24px rgba(168, 134, 58, .45), 0 0 0 5px rgba(255, 255, 255, .7);
}
.kefu-btn:active { transform: translateY(0) scale(.97); }
.kefu-ico { width: 22px; height: 22px; display: block; }
.kefu-btn span { font-size: 12px; line-height: 1; letter-spacing: .5px; }

/* ===== 二维码弹窗（数值逐条对齐参考站 .modal-overlay / .modal-content / .modal-close）=====
   参考站没有白色卡片：遮罩 + 一张圆角带阴影的二维码图 + 图片外侧的圆形关闭按钮 */
.qr-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 1050;          /* 需盖住头部(1030)和手机吸底条，参考站是 1000 */
    align-items: center;
    justify-content: center;
}
.qr-overlay.show { display: flex; }
.qr-box {
    background: transparent;
    padding: 0;
    box-shadow: none;
    width: auto;
    max-width: 300px;
    text-align: center;
    position: relative;
}
.qr-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.qr-close {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}
.qr-close:hover { background: rgba(0, 0, 0, .5); color: #fff; }
/* 手机端：关闭按钮居中移到图片正上方 */
@media (max-width: 700px) {
    .qr-close { top: -40px; right: 50%; transform: translateX(50%); }
}

/* ================= 响应式 ================= */
@media (max-width: 991.98px) {
    /* ===== 手机端头部：逐条对齐参考站 .navbar / .nav-container /
       .nav-actions / .nav-links 的手机端规范 =====
       第一行：logo（左）+ 小号语言切换（右）
       第二行：文字导航铺满整行、左对齐、gap 12px
       参考站手机端会隐藏登录/注册（.pc-only）与 PC 语言切换（.pc-lang-switch） */
    .site-header .header-inner {
        row-gap: 0;
        padding-top: 20px;     /* 参考站 .navbar { padding-top: 20px } */
        padding-bottom: 12px;  /* 参考站 .navbar 基础 padding 的下沿 */
    }
    .logo-area { order: 1; }
    .header-right {
        order: 2;
        flex: 1;
        justify-content: flex-end;   /* 参考站 .nav-actions */
        gap: 0;
    }
    .nav-toggle { display: none; }   /* 不用汉堡菜单，导航直接铺开 */
    .header-hotline { display: none; }
    /* 登录 / 注册：参考站手机端整体不显示（.pc-only{display:none!important}） */
    .header-actions { gap: 0; }
    .header-actions .btn-outline,
    .header-actions .btn-solid { display: none !important; }
    /* 语言切换：参考站手机端换成小号常显（.mobile-lang-switch） */
    .lang-switch {
        display: flex;
        font-size: .65rem;
        gap: 4px;
    }
    .lang-switch a { padding: 2px 4px; }
    .main-nav {                      /* 参考站 .nav-links */
        display: flex;
        order: 3;
        /* 原 width:100%（导航独占一行）→ 改成占满「剩余」宽度，
           这样同一行的预订热线会被挤到最右边 */
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start;
        gap: 10px;
        margin: 10px 0 0;
    }
    .main-nav a { font-size: .9rem; white-space: nowrap; }
    .main-nav.open { display: flex; }
    /* 导航行右侧：预订热线（「首页 / 专列 / 公告」右对齐），与 PC 端热线同配色 */
    .nav-hotline {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        order: 4;
        flex: 0 0 auto;
        margin: 10px 0 0 auto;       /* 与导航行同高，并顶到最右 */
        white-space: nowrap;
        text-decoration: none;
        color: #2d3e50;
        font-size: .7rem;
        line-height: 1.4;
    }
    .nav-hotline i { color: #dc3545; font-size: .8rem; }
    .nav-hotline .nh-num {
        color: var(--c-primary-dark);
        font-weight: 400;          /* 号码不加粗（2026-11-08） */
        letter-spacing: 0;
    }
    /* 「预订热线」四个字保留，但比导航小一号，给号码留出位置。
       号码不再加粗，整块宽度比原来窄，导航行放得下、不会换行。 */
    .nav-hotline .nh-label {
        display: inline;
        font-size: .66rem;
        color: #6b7a8c;
    }
    .section-title { font-size: 1.4rem; margin-bottom: 10px; }
    .section-sub { font-size: .88rem; margin-bottom: 20px; }
    .section-head { gap: 2px 12px; margin-bottom: 18px; }
    .section-head .section-title,
    .section-head .section-sub { margin-bottom: 0; }
    .section-block { margin-bottom: 34px; }
    .hotline { font-size: .95rem; padding-bottom: 6px; }
    .train-grid { gap: 18px; }
    /* 列表卡片主图比例（手机端）：默认 3:4 大图。
       产品可在后台（产品图片 → 手机端列表卡片图）单独选「小横幅短条」，
       这时 cardImgStyle() 会输出 --card-ar（≈2.08:1）并把 --img-mob 换成短条专用图，
       卡片就变回短条。首页「热门旅游专列 / 假期特色旅游列车」与搜索结果等列表页共用这一套。 */
    .train-card .card-img,
    .holiday-item .holiday-img { aspect-ratio: var(--card-ar, 3 / 4); }
    /* 手机站卡片主图：手机图 → 推荐图 → 封面（没有手机图时自动回退 PC 那张） */
    .train-card .card-img,
    .holiday-item .holiday-img { background-image: var(--img-mob, var(--img-pc)); }
    .train-card .card-title { font-size: 1.1rem; }
    .train-card .price { font-size: 1.2rem; }

    /* ---- 首页：区块标题与站点名（.logo-text 手机端 1.2rem）同字号，不再比站名大一圈 ---- */
    /* 首页区块标题（热门旅游专列 / 假期特色旅游列车）：1.2rem → 1.06rem，
       手机上一屏能多露出一截卡片，也不至于压过列车名（.card-title .95rem）太多 */
    .page-home .section-title { font-size: 1.06rem; }
    /* 首页区块标题 + 旁边小字：手机端固定为同一行 —— 标题靠左、小字靠右，放不下则省略号。
       （原来 .section-head 是 flex + flex-wrap 的「挤不下才折行」，标题字数/屏宽不同就会出现
         一行或两行两种样子；现在固定一行，同时比原来的两行布局更省纵向空间。）
       小字文案可在后台「首页配置 → 其他设置」里改短，短了就不会被省略。 */
    .page-home .section-head {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;              /* 原 18px，再省一点空间 */
    }
    .page-home .section-head .section-title { flex: 0 0 auto; }
    .page-home .section-head .section-sub {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        text-align: right;                /* 小字靠右 */
        font-size: .78rem;                /* 原 .88rem，收小一档 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 「热门旅游专列」与上方搜索区的距离。
       实测这段距离全部由这一条产生（搜索表单 margin-bottom 是 0），所以直接调这里即可。
       12px 太贴 → 40px 又偏松（标题到卡片才 14px，反差大）→ 取 24px 折中。 */
    .page-home #hot { margin-top: 24px; }

    /* ---- 卡片信息区：列车名 + 价格（+ 查看详情 / 发车日期）收成同一行 ----
       原来「列车名」独占一行、价格 1.2rem 加粗占一行，卡片信息区偏高；
       现在整块改成一行：名字占满剩余宽度（超出省略号），右侧依次是价格和按钮。
       手机端卡片网格是单列满宽（.train-grid 最小 240px），一行放得下。

       适用范围：首页热门卡片（.page-home）+ 搜索结果卡片（.search-grid）。
       搜索结果页的卡片结构与首页完全一致，这里一并套用，
       免得两处各写一套行距/字号 —— 那正是之前两边看起来不一样的原因。 */
    .page-home .train-card .card-content,
    .search-grid .train-card .card-content,
    .page-home .holiday-item .holiday-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        /* 上边距 12px → 18px：原来 12px 让「列车名」那行紧贴着上面的主图。
           上下统一 18px —— 文字行自带行高，两侧的视觉留白因此完全相等（实测都约 20.4px）。 */
        padding: 18px 14px 18px;
    }
    .page-home .train-card .card-title,
    .search-grid .train-card .card-title,
    .page-home .holiday-item .holiday-name {
        flex: 1 1 auto;
        min-width: 0;
        margin-bottom: 0;
        font-size: .95rem;           /* 原 1.1rem / 1.05rem */
        font-weight: 600;            /* 原 700 */
        line-height: 1.35;
        white-space: nowrap;         /* 单行，超出省略号（原来是两行截断） */
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        -webkit-line-clamp: none;
    }
    .page-home .train-card .card-price,
    .search-grid .train-card .card-price,
    .page-home .holiday-item .holiday-foot {
        flex: 0 0 auto;
        margin-top: 0;
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: nowrap;
    }
    .page-home .train-card .price,
    .search-grid .train-card .price,
    .page-home .holiday-item .price {
        font-size: .95rem;           /* 原 1.2rem / 1.15rem */
        font-weight: 700;            /* 价格数字加粗（后面的「起」仍是常规字重，见下） */
        line-height: 1.3;
    }
    .page-home .train-card .price small,
    .search-grid .train-card .price small { font-size: .7rem; }
    /* 「查看详情」按钮：热门 / 假期 / 搜索结果 卡片共用同一尺寸（已恢复到放大之前的数值） */
    .page-home .train-card .btn-card,
    .search-grid .train-card .btn-card,
    .page-home .holiday-item .btn-card {
        padding: 3px 9px;
        font-size: .75rem;
        line-height: 1.5;
    }
    .holiday-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .stories-grid { gap: 18px; }
    /* 内容区标签页：窄屏仍保持三栏均分 */
    .ct-tabs { gap: 8px; }
    .ct-tab { padding: 10px 8px; font-size: .9rem; letter-spacing: 0; }
    .ann-grid { grid-template-columns: 1fr; }
    .faq-list { grid-template-columns: 1fr; }
    .faq-atext { padding-left: 20px; }
    /* ---- 内容 → 页脚：手机端全站统一 16px ----
       改前各页不一致：首页 / 公告页 80px（内容末块 34 + main 16 + 页脚 30）、
       搜索页 46px、只有产品页是 16px。三处一起收：
         ① main 上 Bootstrap py-3 的底部内边距 16px → 清零
         ② 内容末块自己的下外边距（.section-block 是 34px）→ 末块清零
         ③ 页脚上外边距 30px → 16px
       产品页走自己那套（.page-product .site-footer margin-top:0 + .pd-wrap 底部内边距 16px），
       结果同样是 16px → 全站一致。 */
    body.portal-body main { padding-bottom: 0 !important; }
    /* 内容末块的下外边距清零。注意 main 末尾常跟着页面自己的 <script>，
       :last-child 抓不到真正的最后一块，所以再用 :last-of-type 兜住常见的块级容器 */
    main > *:last-child,
    main > .section-block:last-of-type,
    main > .row:last-of-type { margin-bottom: 0 !important; }
    .site-footer { margin-top: 16px; }
    /* 页脚左右留白：全站统一 20px（与桌面端 .site-container 一致）。
       产品详情页会把 .site-container 压到 12px 去对齐正文，但页脚不跟随这个压缩，
       所以这里显式写死，任何页面都得到同样的 20px。 */
    .site-footer .site-container { padding-left: 20px; padding-right: 20px; }
    /* 页脚手机端（逐值对齐参考站）：两列网格 +
       「关注我们」独占整行、标题与图标横向排布 */
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }
    .footer-col { min-width: auto; flex: none; }
    /* 第 1 栏靠左、第 2 栏靠右；列表本体 inline-block 让文字仍左对齐 */
    .footer-col:first-child { text-align: left; }
    .footer-col:nth-child(2) { text-align: right; }
    .footer-col:first-child ul,
    .footer-col:nth-child(2) ul { display: inline-block; text-align: left; }
    /* 「关注我们」占满整行，标题在左、图标在右，同一行 */
    .footer-col:last-child {
        grid-column: span 2;
        margin-top: 10px;
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
        justify-content: flex-start;
    }
    .footer-col:last-child h4 { margin-bottom: 0; white-space: nowrap; }
    .footer-col:last-child .social-icons {
        margin-top: 0;
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex-wrap: wrap;
    }
    .footer-col:last-child .social-icons a { font-size: 1.2rem; }
    /* 手机端浮动客服：贴右侧、比正中间再【往上 40px】（需求）。
       为什么不能放在正中间：它是 fixed、按【屏幕】定位，而表单是按【页面】排的
       —— 屏幕越高按钮就越往下，正好落到「联系人手机」输入框上（实测 900px 高的机器就压住手机号 ✗）。
       往上 40px 后：844 高 → 按钮占 352~412，900 高 → 380~440，都在手机号输入框（471 起）上面，
       大致停在「联系人」那一行的高度上，不再挡住输入 ✓
       ⚠ top 和 bottom 只能留一个：两个都写会把固定块拉伸成 60×几百 px 的隐形长条
         （z-index 1020 高于吸底条 900，会挡住右侧一大片点击）—— 所以下面必须写 bottom:auto。 */
    .float-kefu {
        right: 14px;
        top: calc(50% - 40px);
        bottom: auto;
        transform: translateY(-50%);
    }
}
@media (max-width: 575.98px) {
    .logo-img { height: 40px; }
    .logo-text { font-size: 1.2rem; }   /* 参考站手机端 1.2rem */
    .logo-text .sub { font-size: .72rem; }
    .lang-switch { font-size: .65rem; }
    .btn-outline, .btn-solid { padding: 5px 13px; font-size: .82rem; }
    .holiday-grid { grid-template-columns: 1fr; }

    /* 浮动客服按钮：手机端 60px 太占地方，缩到 46px（2026-11-08） */
    .kefu-btn {
        width: 46px;
        height: 46px;
        gap: 0;
        box-shadow: 0 4px 12px rgba(168, 134, 58, .35), 0 0 0 2px rgba(255, 255, 255, .55);
    }
    .kefu-btn:hover {
        box-shadow: 0 6px 16px rgba(168, 134, 58, .42), 0 0 0 3px rgba(255, 255, 255, .7);
    }
    .kefu-ico { width: 17px; height: 17px; }
    .kefu-btn span { font-size: 9px; letter-spacing: .3px; }
}

/* ================= 公告列表 ================= */
.ann-list { display: flex; flex-direction: column; gap: 12px; }
.ann-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 18px 22px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}
.ann-item:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .16); }
.ann-main { min-width: 0; flex: 1; }
.ann-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ann-top {
    flex: 0 0 auto;
    background: var(--c-primary);
    color: #fff;
    font-size: .72rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.ann-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ann-summary {
    color: var(--c-text-3);
    font-size: .88rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ann-side { flex: 0 0 auto; text-align: right; }
/* ⚠️ 必须写 .ann-side .ann-date（不能只写 .ann-date）：
   文件前面还有一处同名的 .ann-date（首页公告卡片用，带 padding-top:12px），
   类名撞车 → 这里的日期也被顶下去 12px，手机端和「查看」并排时就错开 6px（实测中线差 6px）。
   用 .ann-side 限定作用域（这个类全站只有公告列表用），既能盖过那 12px，又不动别的组件。 */
.ann-side .ann-date { color: var(--c-text-3); font-size: .82rem; margin-bottom: 6px; padding-top: 0; }
.ann-side .ann-date i { margin-right: 4px; color: var(--c-primary); }
.ann-date i { margin-right: 4px; color: var(--c-primary); }
.ann-more { color: var(--c-primary); font-size: .82rem; font-weight: 600; }
.ann-empty {
    background: #fff;
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 60px 20px;
    text-align: center;
    color: var(--c-text-3);
}

/* ================= 确认预订（下单）页 .po-page =================
   为什么整段限定在 .po-page 下：这一页原来是纯 Bootstrap 标记 + 一堆行内 font-size，
   实测出现【31 种字号】；而且选中态用的是 Bootstrap 原生蓝（#0d6efd），
   与站内主色（金 #b8923f / var(--c-primary)）冲突 —— 看着就是"没统一"。
   这里做三件事，全部只作用在本页：
     ① 用一套字号阶梯替掉行内 font-size；
     ② 把"蓝色系"的 Bootstrap 类（bg-primary / border-primary / btn-primary）在本页内改成金色；
     ③ 统一卡片、间距与价格明细的排版。
   注意：JS 是靠切换 border-primary / bg-primary / btn-primary 这些类做选中态的，
   所以这里用【覆盖颜色】而不是换类名 —— 不用改一行 JS（改了容易踩）。 */

/* 字号阶梯（本页只允许这几档，别再写行内 font-size；实测本页已收敛到 6 档以内）
   12.16px=.76rem 说明/徽章 | 14.4px=.9rem 正文 | 15.2px=.95rem 步骤与小标题
   16px=1rem 主按钮 | 16.8px/21.6px 合计那一行（故意放大） */
.po-page { --po-fs-title: 1.25rem; --po-fs-step: .95rem; --po-fs-body: .9rem; --po-fs-hint: .76rem; }
/* 徽章/房型名并进阶梯（原来分别是 Bootstrap 的 12px 与 16px，属"偶发字号"） */
.po-page .badge { font-size: var(--po-fs-hint); font-weight: 600; }
.po-page .po-cabin-name { font-size: var(--po-fs-step); font-weight: 400; }   /* 不加粗（下面 .po-cabin-name 有同样口径） */
.po-page .po-head { font-size: var(--po-fs-title); font-weight: 700; color: #1a2332; margin: 0 0 14px; }

/* 步骤标题：金色序号 + 标题 + 右侧说明 */
.po-step {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: var(--po-fs-step);
    font-weight: 600;
    color: #1a2332;
}
.po-step small { font-size: var(--po-fs-hint); font-weight: 400; color: #8f9aa8; }

/* ===== 房间数输入框（2026-10-14：改由客户自己填）=====
   数字输入框 + 右侧一个「间」字（不再显示「系统建议 N 间」，按需求去掉）。
   ⚠ 字号与上下内边距必须跟旁边两个下拉（.po-page .form-select：hint 字号 + 9px）一致，
      否则「房间数 / 成人 / 儿童」三个框高度不同、不在一条水平线上。
      选择器带 .po-page 前缀是为了压过下面那条 `.po-page .form-control`
      （同为 0-2-0，只按书写顺序会输给它 → PC 上输入框会比下拉高 3px）。 */
/* 2026-10-27：「间」字原来是 flex 里的独立一项，把输入框挤窄了 ——
   改成相对定位浮在输入框右侧，输入框就能和旁边两个下拉一样占满整列宽度。 */
.po-room-inp {
    position: relative;
    display: block;
}
.po-page .po-room-inp .form-control {
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: var(--po-fs-hint);
    padding-left: 10px;
    padding-right: 26px;      /* 给右侧「间」字让位 */
}
.po-room-unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8f9aa8;
    font-size: var(--po-fs-hint);
    pointer-events: none;     /* 别挡住输入框点击 */
}
/* 手机端预订抽屉：这一行要塞「房间数 / 成人 / 儿童」三个控件，字号再小一号 */
.is-drawer .po-room-inp .form-control { font-size: .82rem; }

/* 卡片：统一成站内那套（12px 圆角 + 站内阴影），标题条用金色下边线 */
.po-page .card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 20px -10px rgba(26, 35, 50, .18);
}
.po-page .card-header {
    background: #fff;
    border-bottom: 1px solid #f2f4f7;
    font-size: var(--po-fs-step);
    font-weight: 600;
    color: #1a2332;
    padding: 14px 18px;
}
.po-page .card-body { padding: 16px 18px; }
.po-page .form-label { font-size: var(--po-fs-body); font-weight: 500; color: #4a5568; margin-bottom: 4px; }
.po-page .form-control, .po-page .form-select { font-size: var(--po-fs-body); }
/* 班次下拉的选项里带「日期 + 天数 + 价格」，字小一点才不会被截成"¥…"（实测 14.4px 时会被切掉半个价格） */
.po-page .form-select { font-size: var(--po-fs-hint); padding-top: 9px; padding-bottom: 9px; }
.po-page small, .po-page .small { font-size: var(--po-fs-hint); }

/* ===== 表单控件统一规格（2026-10-27 需求）=====
   ① 「房间数 / 成人 / 儿童」三个控件高度、宽度必须一致 → 统一 44px、占满各自栅格列；
   ② 联系人手机 / 留言的边框太淡（Bootstrap 默认 #dee2e6 在白底上几乎隐形）→ 改成 #DCDFE6；
   ③ 留言框【两行】高（rows=2 的自然高度 68px），右下角还可手动拉高。
   ⚠ 只作用于【PC 页】：选择器一律带 :not(.is-drawer)。手机端走的是预订抽屉
     （.po-page.is-drawer，见 place_order.php?drawer=1），那套布局一行都不动。 */
.po-page:not(.is-drawer) .form-control,
.po-page:not(.is-drawer) .form-select {
    height: 44px;
    font-size: var(--po-fs-body);
    color: #1a2332;
    border: 1px solid #DCDFE6;
    border-radius: 8px;
    background-color: #fff;
}
.po-page:not(.is-drawer) .form-select {
    font-size: var(--po-fs-hint);
    padding: 0 32px 0 12px;      /* 右侧留给下拉箭头 */
}
.po-page:not(.is-drawer) textarea.form-control {
    height: auto;
    /* 两行：字号 14.4 × 行高 1.6 ≈ 23/行，两行 46 + 上下内边距 20 + 边框 2 = 68 */
    min-height: 68px;
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
}
/* 「留言」这两个字离上面的联系人输入框太近（原来只隔 row 的 gutter，约 7px）→ 拉开一点。
   只作用于 PC：手机端抽屉的留言块保持原样。 */
.po-page:not(.is-drawer) .po-remark-lbl { margin-top: 16px; }
.po-page:not(.is-drawer) .form-control:focus,
.po-page:not(.is-drawer) .form-select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(201, 169, 89, .15);
}
/* 国际区号下拉：PC 上跟旁边的号码框统一边框色 / 圆角（手机端保持原样） */
.po-page:not(.is-drawer) .po-cc-sel { border-color: #DCDFE6; border-radius: 8px; }
/* 校验失败的红框：上面那条统一边框色（权重 0-3-0）会盖掉 Bootstrap 的 .is-invalid（0-2-0），这里补回来 */
.po-page:not(.is-drawer) .form-control.is-invalid,
.po-page:not(.is-drawer) .form-select.is-invalid { border-color: #e5484d; }

/* ===== PC 下单页的身份核验区（2026-10-27 需求：邮箱下单要有密码框）=====
   它现在是联系人那一行里的一个 col（offset-md-4，与手机号同列）——
   与手机行的间距就是 row 的 gutter（g-3 = 16px），所以这里把确认页那套
   虚线 + 上下 14px 内边距统统去掉（加起来 29px，离上面太开）。
   提示小字沿用【首页登录弹窗】那一档（.lg-wrap .form-text：12.16px 浅灰），两处观感一致。 */
.po-page .po-idcheck-pc { border-top: 0; margin-top: 0; padding-top: 0; }
.po-page .po-idcheck-pc .form-text { font-size: .76rem; color: #98a2b3; }

/* ===== 行程信息：左标签 / 右值 的清单 ===== */
.po-info { margin: 0; }
.po-info > div { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: var(--po-fs-body); }
.po-info dt { flex: 0 0 68px; color: #8f9aa8; font-weight: 400; }
.po-info dd { flex: 1 1 auto; min-width: 0; margin: 0; color: #1a2332; font-weight: 600; }
.po-info dd b { margin-left: 6px; color: var(--c-primary); font-weight: 700; }   /* 发车/到达时间 */
/* 已选房型：本页唯一的金色强调（金色收敛到这一处 + 选中卡的细边与对勾） */
.po-info-pick { color: var(--c-primary) !important; }

/* ===== ① 房型卡：让"可以点选"一眼看得出来，金色只用两处 ===== */
/* 注意要带 .po-page 前缀：上面 `.po-page .card{border:0}` 权重更高，不加会被它盖掉边框 */
.po-page .po-cabin {
    padding: 14px 16px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .06s;
}
.po-page .po-cabin:hover { border-color: #c9d3df; box-shadow: 0 4px 14px -10px rgba(26, 35, 50, .35); }
.po-page .po-cabin:active { transform: scale(.995); }
/* 选中：细主色边 + 轻阴影。padding 减 0.5px 补偿边框加粗，避免整卡跳动 */
.po-page .po-cabin.border-primary { border: 1.5px solid var(--c-primary); padding: 13.5px 15.5px; }
/* 空心圆 → 选中变实心：最直观的"可选"提示 */
.po-cabin-top { display: flex; align-items: center; gap: 8px; }
.po-cabin-radio { position: relative; flex: 0 0 auto; width: 15px; height: 15px; border: 1.5px solid #c6d0dc; border-radius: 50%; }
.po-page .po-cabin.border-primary .po-cabin-radio { border-color: var(--c-primary); }
.po-page .po-cabin.border-primary .po-cabin-radio::after {
    content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--c-primary);
}
.po-cabin-name {
    flex: 1 1 auto; min-width: 0;
    /* 不加粗：房型名只是"选哪个"的标识，加粗反而和价格、已选标记抢注意力（按要求改常规字重） */
    font-size: var(--po-fs-step); font-weight: 400; color: #1a2332;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.po-cabin-picked { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--po-fs-hint); font-weight: 600; color: var(--c-primary); }
/* 未选中的卡片：不显示「已选」。注意用的是类名 is-off（不是写 style），
   因为手机端要把它换成 visibility:hidden（保留占位）——见下面 @media 里的说明。
   切换在 JS 的 onCabinChange() 里。 */
.po-cabin-picked.is-off { display: none; }
/* 起价：数字深色，不做金色（金色已经够用了） */
.po-cabin-start { padding-left: 23px; margin: 6px 0 10px; font-size: var(--po-fs-hint); font-weight: 600; color: #4a5568; }
.po-cabin-start em { margin-left: 3px; font-style: normal; font-weight: 400; color: #9aa5b1; }

/* ===== 手机端（< 768）：房型卡两列并排，起价横着对齐，好比价 =====
   原来手机端是一列一张（标签上的 col-md-6 在 <768px 不生效），4 个房型纵向能拉很长，
   而且起价是上下排的、左右错开，比不了价。
   断点取 767.98 是为了和 col-md-6 完全对齐：≥768 本来就是两列、卡片也够宽，那条路径一行都不用改。
   ★ 每张卡都一样宽（半屏），选中的只是【加金框 + 显「已选」】，不再变宽 —— 所以卡片高度恒定，
     切房型时下面的内容不会再上下跳。
   ★ 铺位行（"下铺　¥29,880/人" 约 200px）在半宽 ~150px 里放不下，所以手机端由 JS 把它们
     搬到房型网格下面的 .po-beds-panel（整幅宽度）。桌面端不搬，铺位仍留在卡片里。 */
@media (max-width: 767.98px) {
    /* .row.g-3 的列间距是靠 --bs-gutter-x 的负外边距做的，改成网格前先清零，否则会向两边溢出 */
    .po-cabin-grid {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-left: 0;
        margin-right: 0;
    }
    /* 网格单元：清掉 .row > * 的列宽与左右内边距（间距交给 grid 的 gap） */
    .po-cabin-cell { width: auto; max-width: none; padding: 0; }
    /* 铺位面板也是网格里的一格、跨满两列 —— 位置由 JS 插到"选中卡所在行"的后面。
       间距由 grid 的 gap 给，所以别再加 margin，否则会多空一段。 */
    .po-beds-panel { grid-column: 1 / -1; }
    /* 半宽下收紧内边距，省下来的宽度全给房型名 */
    .po-page .po-cabin { padding: 11px 12px; }
    .po-page .po-cabin.border-primary { padding: 10.5px 11.5px; }
    /* 房型名【只占一行】：手机半宽卡里折两行很难看（还会把卡片顶高），
       放不下就用省略号兜底；字号降一档（.84rem）多留点可用宽度。
       ⚠ 必须带 .po-page 前缀：上面 `.po-page .po-cabin-name`（0-2-0）里写着
         font-size: var(--po-fs-step)，权重比单独的 .po-cabin-name 高。 */
    .po-cabin-top { align-items: center; padding-right: 18px; }   /* 右侧 18px 让给右上角的对号 */
    .po-cabin-radio { margin-top: 0; }
    .po-page .po-cabin-name {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-size: .84rem; line-height: 1.35;
    }
    /* 选中标记【只留一个对号】，不再显示「已选」三个字：
       文字用 font-size:0 隐掉，<i> 图标单独给字号，绝对定位到卡片右上角 ——
       它不占流，所以选中前后卡片尺寸完全一致，下面的内容不会跳。
       ⚠ 未选中时仍是 display:none（上面那条基础规则），不占位。 */
    .po-page .po-cabin { position: relative; }
    .po-page .po-cabin-picked { position: absolute; right: 8px; top: 8px; bottom: auto; gap: 0; font-size: 0; font-weight: 400; }
    .po-page .po-cabin-picked i { font-size: .95rem; }
    /* 起价与房型名【左边缘齐平】（同样让开左侧单选圆点的 23px），一行显示；
       未选中不加粗，选中时名字 + 价格一起加粗。 */
    .po-cabin-start { margin: 4px 0 0; padding-left: 23px; padding-right: 0; text-align: left; white-space: nowrap; font-weight: 400; }
    .po-page .po-cabin.border-primary .po-cabin-name,
    .po-page .po-cabin.border-primary .po-cabin-start { font-weight: 600; }
}

/* ===== 手机端表单控件：下拉框字号 / 出行人数那一行 =====
   需求：① 下拉框（班次 / 成人 / 儿童 / 区号 / 证件类型 / 出生日期…）里的字太大
          → 统一压到 .72rem（≈11.5px）；
        ② 出行人数那行的三个标签（房间数 / 成人 / 儿童）缩小，保证一行放得下；
        ③ 步骤标题小一档。
   作用范围：【手机端所有 .po-page】—— 预订抽屉（.is-drawer）和手机直接打开的下单页
   （place_order.php?product_id=…，客户在手机上打开的就是这一页）都算；PC（≥768px）不受影响。

   ⚠ .form-control / .form-select 的写法有讲究（这里踩过坑，改了没生效就是权重不够）：
     上面「表单控件统一规格」那段用的是 .po-page:not(.is-drawer) .form-select（0-3-0），
     比 .po-page .form-select（0-2-0）高 —— 必须也用 0-3-0 且写在它后面（同权重后写者胜），
     所以下面写 .po-page:not(.is-drawer) .form-select，别再简化成 .po-page .form-select。
   ⚠ 非抽屉页只改字号、不动 padding：那三个控件的高度由上面那条统一给 44px，
     改内边距会让它们和房间数输入框不一般高。抽屉里没有 44px 规则，才收紧内边距。 */
@media (max-width: 767.98px) {
    /* ③ 反馈「下拉框里的字还是很大」—— 上一版只降到 .72rem（11.5px），肉眼几乎看不出，
       这一版直接到 .68rem（≈10.9px）；下拉方框本身高度不变（非抽屉页仍 44px）。 */
    .po-page:not(.is-drawer) .form-select { font-size: 0.68rem; }
    .is-drawer .form-select { font-size: 0.68rem; padding-top: 7px; padding-bottom: 7px; }
    /* 国际区号下拉（.po-cc-sel）不是 .form-select，单独补 —— 它原来固定 --po-fs-hint(12.16px)，
       手机上是页面里最大的那个下拉字，客户反馈「还是很大」多半就是它 */
    .po-page .po-cc-sel { font-size: 0.68rem; }

    .po-page .po-pax-counts .form-label { font-size: 0.66rem; white-space: nowrap; margin-bottom: 0.15rem; }
    .po-page .po-pax-counts .form-select,
    .po-page:not(.is-drawer) .po-pax-counts .form-select,
    .po-page:not(.is-drawer) .po-pax-counts .form-control,
    .po-page .po-pax-counts .po-room-unit { font-size: 0.68rem; }
    .po-page .po-step { font-size: 0.80rem; }
}

/* ===== 手机端「自定义下拉」（脚本在 place_order.php 页尾）=====
   为什么要自己做：iOS 点开原生 <select> 时弹的是系统列表（底部大字号单选行），
   那个列表的字号 / 行高由系统决定，CSS 完全改不到 —— 客户反复说的「下拉框里的字很大」
   就是它。所以手机端把原生 select 藏起来，改成按钮 + 自绘底部面板，字号自己说了算。
   原生 select 只是 display:none（不是移除），表单提交照旧带上它的 name/value。 */
@media (max-width: 767.98px) {
    .po-page .pos-native { display: none !important; }
    .pos-btn {
        display: flex; align-items: center; justify-content: space-between; gap: 6px;
        width: 100%; min-width: 0; padding: 0 10px;
        border: 1px solid #DCDFE6; border-radius: 8px; background: #fff;
        color: #1a2332; font-size: 0.8rem; line-height: 1.2; text-align: left;
    }
    .pos-btn-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pos-btn i { flex: 0 0 auto; font-size: 0.8rem; color: #8f9aa8; }
    .pos-btn.is-empty .pos-btn-t { color: #9aa5b1; }
    .po-page:not(.is-drawer) .pos-btn { height: 44px; }      /* 与统一规格的输入框同高 */
    .is-drawer .pos-btn { height: 34px; padding: 0 8px; font-size: 0.78rem; }
    .po-phone-inp .pos-btn { flex: 0 0 auto; width: auto; max-width: 98px; }   /* 区号：跟原下拉一样窄 */
}
.pos-mask {
    position: fixed; inset: 0; z-index: 1095;
    background: rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transition: opacity .18s;
}
.pos-mask.is-show { opacity: 1; visibility: visible; }
.pos-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1096;
    display: flex; flex-direction: column; max-height: 62vh;
    background: #fff; border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
    transform: translateY(100%); transition: transform .22s ease;
}
.pos-sheet.is-show { transform: translateY(0); }
.pos-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #f2f4f7;
    font-size: 0.86rem; font-weight: 600; color: #1a2332;
}
.pos-x { border: 0; background: none; padding: 0 2px; font-size: 1.3rem; line-height: 1; color: #98a2b3; }
.pos-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 10px; }
.pos-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 16px; font-size: 0.84rem; color: #1a2332;
}
.pos-opt.is-on { color: #b8923f; font-weight: 600; }
.pos-opt i { flex: 0 0 auto; font-size: 0.95rem; color: #b8923f; }
body.pos-lock { overflow: hidden; }

/* ===== 「确认预订信息」独立页（抽屉点「下一步」之后的那一页）=====
   需求：① 行程信息的【值不加粗】（原来 dd 是加粗的）
        ② 底部「返回修改 + 提交订单」两个按钮并排（提交订单是主按钮） */
.po-confirm-page .po-info dd { font-weight: 400; }
.po-confirm-page .po-info dt { color: #8a94a6; }
.po-confirm-foot { display: flex; gap: 10px; margin: 6px 0 20px; }
.po-confirm-foot .btn { flex: 1 1 0; }

/* ③ 卡片标题【贴紧】内容：原来是 标题下内边距 14 + 分隔线 1 + 内容上内边距 16 = 31px（看着空）
      收成 10 + 1 + 12 = 23px。⚠ 必须写在这条之后才能盖住上面的 .po-page .card-header/.card-body
      （同权重，靠先后顺序决定），且只作用于这一页。 */
.po-confirm-page .card-header { padding: 12px 18px 8px; }
.po-confirm-page .card-body { padding: 10px 18px 16px; }

/* ④ 计费明细的字号并进本页的字号阶梯：
      明细行原来是 Bootstrap 默认 1rem(=16px)，比本页正文 .9rem(=14.4px) 大一号；
      合计那一行原来是 1.05rem(16.8px) + 金额 1.35rem(21.6px)，也偏大。
      现在：明细行 = 正文 14.4px；「预估总费用为」= .95rem(15.2px)、金额 = 1.15rem(18.4px)
      —— 仍比正文重一点（该突出的还是突出），但不再突兀。 */
/* 明细行（成人/儿童 + 单价 + 金额）整体再小一号：14.4px → 13.6px（需求：字有点大）
   金额与名称同字号、只加粗一点 —— 靠字重区分主次，而不是靠字号把人撑大。 */
.po-confirm-page .po-bill { font-size: 0.85rem; }
.po-confirm-page .po-bill .po-bill-amt { font-weight: 600; }
/* 合计那一行仍比明细大一点（该突出），但金额从 18.4px 收到 16.8px */
.po-confirm-page .po-bill .po-total { font-size: var(--po-fs-step); }
.po-confirm-page .po-bill .po-total span:last-child { font-size: 1.05rem; }

/* ⑤ 美化：图标 + 房型胶囊 + 人数构成 + 明细行图标 */
.po-confirm-page .card-header i { color: var(--c-primary); margin-right: 6px; font-size: 1.04em; vertical-align: -1px; }
.po-confirm-page .po-cabin-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    background: rgba(184, 146, 63, .1); color: #8a6a24; font-weight: 600;
}
.po-confirm-page .po-cabin-chip i { font-size: .9em; color: #b8923f; }
.po-confirm-page .po-tier-chip {
    display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
    background: #f2f5f8; color: #5b6675;
}
.po-confirm-page .po-people { margin-left: 6px; color: #8a94a6; }
.po-confirm-page .po-bill .po-bill-i { color: #9aa5b1; margin-right: 6px; }
/* 计费明细的每一行：左「名称 + 单价/单位 × 数量（弱化）」 右「金额」
   —— 单价用灰色小一号字，一眼是"备注口径"，不抢金额的主角位。 */
.po-confirm-page .po-bill .po-bill-line { gap: 10px; }
.po-confirm-page .po-bill .po-bill-l { min-width: 0; }
.po-confirm-page .po-bill .po-unit { margin-left: 6px; color: #9aa5b1; font-size: .9em; }
.po-confirm-page .po-bill .po-unit-note { margin-left: 5px; color: #c08a2e; font-size: .86em; }
.po-confirm-page .po-bill .po-bill-amt { white-space: nowrap; }
.po-confirm-page .po-bill hr { margin: 12px 0; opacity: .1; }
/* 合计那一行垫一层浅金底（金额的强调色由上面 .po-total span:last-child 给） */
.po-confirm-page .po-bill .po-total {
    margin: 0 -10px; padding: 8px 10px; border-radius: 10px;
    background: rgba(184, 146, 63, .08);
}

/* ⑥ 留言：默认折叠（点标题展开/收起，开关在 place_order.php 确认页底部的小脚本里）
   2026-10-15 需求（手机端）：整块挪到页面【最下方】（「预估总费用」下面）——
   原来是塞在「联系人」卡片里的一段虚线分隔行，现在独立成一块（虚线圆角框）：
   折叠时只占一行、不再撑高上面各卡片；展开才出现输入框。 */
.po-remark {
    margin: 0 0 14px; padding: 0 16px;
    background: #fff; border: 1px dashed #dfe4ea; border-radius: 12px;
}
.po-remark.is-open { border-style: solid; border-color: #e9edf2; }
.po-remark-toggle {
    display: flex; align-items: center; gap: 7px; width: 100%;
    padding: 11px 0; background: none; border: 0; cursor: pointer; text-align: left;
    font-size: var(--po-fs-body); color: #4a5568;
}
.po-remark-toggle > i:first-child { color: var(--c-primary); }
.po-remark-toggle .po-remark-arrow { margin-left: auto; color: #9aa5b1; transition: transform .18s ease; }
.po-remark.is-open .po-remark-arrow { transform: rotate(180deg); }
.po-remark-body { display: none; }
.po-remark.is-open .po-remark-body { display: block; padding-bottom: 14px; }

/* ⑥b 身份核验（只有未登录才出现）：手机+验证码 / 邮箱+密码 —— 提交订单时自动建号并登录
   2026-10-15 需求（手机端）：手机 / 邮箱 两个按钮【尽量不占用高度】
   → 不再单独占一行，改成贴在【字段标签行右侧】的小胶囊（省掉原来那整行 ≈40px）。
   · margin/padding 12px → 8px：上方是「姓名 / 手机」输入框那一行，原来那圈虚线离得太远
     （12 + 1 + 12 = 25px），需求要收紧，现在 8 + 1 + 8 = 17px。 */
.po-idcheck { border-top: 1px dashed #eef1f5; margin-top: 8px; padding-top: 8px; }
/* 「获取验证码」按钮与「请输入验证码」输入框【同高】：
   先对齐字号（Bootstrap 的 .btn 是 1rem、本页 .form-control 是 --po-fs-body），
   2026-10-27 起【PC 页】输入框统一 44px（见「表单控件统一规格」），这里也必须写死 44px，
   否则按钮 38px、输入框 44px，align-items-end 下两个框会明显不齐。
   ⚠ 带 :not(.is-drawer)：手机端抽屉里的输入框高度没变，按钮也跟着不变。 */
.po-idcheck .btn { font-size: var(--po-fs-body); }
.po-page:not(.is-drawer) .po-idcheck .btn { height: 44px; padding-top: 0; padding-bottom: 0; }
.po-id-pane .form-label { margin-bottom: 4px; }
/* 行首小控件行：左「字段名」右「小胶囊」，与普通标签行同高（22px + 4px 间距），不额外占高度。
   用在：联系人行的标签行 —— 「手机」+「邮箱（选填）」胶囊（点它切到邮箱）、
        「邮箱」+「手机号」胶囊（点它切回来），见 place_order.php 确认页 */
.po-lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 4px; }
.po-lbl-row .form-label { margin-bottom: 0; }
.po-id-tabs { display: flex; align-items: center; flex: 0 0 auto; gap: 5px; }
/* ===== 联系人行（2026-10-15 需求）：姓名缩窄 + 手机（区号 + 号码）三者排成【一整行】=====
   · 姓名 col-3 / 手机 col-9（见 place_order.php 确认页的 .po-contact-row）
   · ⚠ 区号下拉与号码框必须同高：两者的字号 / 行高 / 上下内边距按同一套算，
     否则会差 3~4px（和「房间数 / 成人 / 儿童」那三个框同一个坑） */
.po-contact-row .form-control { padding-left: 8px; padding-right: 8px; }   /* 窄列里少占内边距，多留给文字 */
/* 联系人行的标签（姓名 / 手机 / 邮箱）字号收小一档：14.4px → 13.6px（需求：字有点大）。
   ⚠ 用 .po-page 前缀压过上面的 .po-page .form-label（同权重时靠书写顺序不稳） */
.po-page .po-contact-row .form-label { font-size: 0.85rem; line-height: 22px; }
/* PC 下单页的联系人行（2026-10-27 需求）：结构与确认页一致（区号下拉 + 号码框 + 邮箱胶囊），
   但标签字号沿用 PC 正文档，所以用单独的 .po-contact-pc，不复用 .po-contact-row
   （那条是给窄列准备的：标签缩到 13.6px、输入框左右内边距压到 8px）。
   line-height: 22px 的作用同上一段 —— 左边「联系人姓名」的标签行要和右边
   「联系人手机 + 邮箱（选填）胶囊」的 .po-lbl-row 一样高，两个框才在一条水平线上。 */
.po-page .po-contact-pc .form-label { line-height: 22px; display: block; }
/* 2026-10-27：「邮箱（选填）」/「手机号」这两个胶囊要紧跟在字段名【右边】。
   .po-lbl-row 默认是 space-between（被推到整列最右端，离「联系人手机」有 400 多 px，
   看着像两个不相干的东西）→ PC 这一行改成左对齐，间距靠 .po-lbl-row 自带的 gap: 8px。 */
.po-page:not(.is-drawer) .po-contact-pc .po-lbl-row { justify-content: flex-start; }
/* 区号下拉加宽（98 → 132：「中国 +86」这类文字不用再挤）+ 手机号框收窄（原来 flex:1 占满，
   右边空出一大块）—— 两个框都在 .po-phone-inp 这个 flex 行里 */
.po-page:not(.is-drawer) .po-contact-pc .po-cc-sel { max-width: none; width: 132px; }
.po-page:not(.is-drawer) .po-contact-pc .po-phone-inp .form-control { flex: 0 1 300px; }
/* ↑ display:block 也是必须的：.form-label 是 inline-block，在块级容器里会多出半个行距的
     descender 空间，实测「联系人姓名」的标签行比右边「联系人手机」高 1px，
     连带下面两个输入框也差 1px（738 vs 737）。改成块级后两边都是精确的 22 + 4 = 26px。 */
/* ↑ line-height: 22px 是为了【左右两个标签行一样高】：左边「姓名」是光标签（行高 1.5 ≈ 20.4px），
   右边「手机 + 邮箱（选填）胶囊」是 .po-lbl-row（min-height 22px）—— 不拉平的话两个输入框
   会差 1.6px、不在一条水平线上（需求：姓名 / 手机 / 邮箱 水平垂直一行对齐）。
   22px 正好等于 .po-lbl-row 的高度和胶囊高度，两边都是 22 + 4(margin) = 26px。 */
.po-phone-inp { display: flex; align-items: stretch; gap: 6px; }
.po-phone-inp .form-control { flex: 1 1 auto; min-width: 0; }
/* 国际区号下拉：默认「中国 +86」
   · 字用「说明档」小字（--po-fs-hint）+ 宽度收窄 → 把宽度让给号码框、姓名列也能放宽一档
   · 高度靠父级 align-items:stretch 与号码框拉平；文字由浏览器垂直居中，不会高低不一 */
.po-cc-sel {
    flex: 0 0 auto; max-width: 98px;
    padding: 6px 16px 6px 6px;                  /* 右侧 16px 留给下拉箭头 */
    border: 1px solid #d9dee5; border-radius: 6px; background: #fff;
    color: #4a5568; font-size: var(--po-fs-hint); line-height: 1.5;
}
.po-id-tab {
    padding: 0 10px; height: 22px; border: 1px solid #d9dee5; border-radius: 999px; white-space: nowrap;
    background: #fff; color: #4a5568; font-size: 0.74rem; line-height: 20px; cursor: pointer;
}
/* 胶囊的"选中态"。现在的胶囊是「切到另一栏」的开关，本身不表示当前栏 → 暂时用不到；
   留着是为了以后改成"手机号 / 邮箱 两个胶囊并排"时不用再补样式（那时 JS 里加回 is-on 即可） */
.po-id-tab.is-on { border-color: var(--c-primary); background: var(--c-primary); color: #fff; font-weight: 600; }
.po-id-msg { margin-top: 8px; font-size: .85rem; color: var(--c-primary); }

/* ⑥c 身份核验失败的强提示弹窗（验证码错 / 密码错 / 手机号或邮箱格式不对）
   —— 原来只在按钮上方多一行小字，用户在页面底部根本注意不到，会以为"点了没反应" */
.po-err-modal .modal-dialog { max-width: 270px; margin: 0 auto; }
.po-err-modal .modal-content { border: 0; border-radius: 12px; }
.po-err-modal .modal-body { padding: 14px 14px 6px; }
.po-err-modal-ico { font-size: 1.6rem; line-height: 1; color: #e5484d; margin-bottom: 6px; }
.po-err-modal-msg { font-size: .88rem; font-weight: 600; color: #2b3440; line-height: 1.45; }
.po-err-modal-sub { margin-top: 4px; font-size: .75rem; color: #8a919c; }
.po-err-modal .modal-footer { border-top: 0; padding: 0 14px 12px; }
.po-err-modal .modal-footer .btn { min-width: 88px; font-size: .82rem; padding: .25rem .9rem; }
/* bootstrap JS 没加载时 main.js 的兜底显示（保证一定看得见） */
.po-err-modal.is-show { display: block; background: rgba(0, 0, 0, .5); }

/* ⑦ 底部两个按钮：原来 btn-lg（1.25rem＝20px）太大 → 用全站主按钮口径 1rem */
.po-confirm-foot .btn { font-size: 1rem; font-weight: 600; padding: 12px 0; }
.po-confirm-foot .btn i { margin-right: 5px; }

/* ⑧ 本页的【浮动客服按钮】：和「计费明细」卡片同一行（需求）
   ⚠ 真正的位置由【确认页里那段 JS 实测】后写成行内 top（量卡片【标题行】的位置，见 place_order.php
      确认页脚本末尾的 align()）。这里这个值只是【没 JS / JS 没跑起来】时的兜底 ——
      量的是卡片标题行，不是卡片中心：中心那一行右侧是右对齐的金额，按钮会压住数字。
   · 为什么不能在 CSS 里写死：它是 fixed（按屏幕定位），卡片按页面排；卡片位置还会随
     「登录 / 未登录」（差验证码那一段）、计费明细行数变化 —— 写死只会对一个状态成立。
   · 只在本页生效：确认页的 portalPage 传了 bodyClass=page-order-confirm（见 place_order.php 末尾），
     首页 / 产品页等其他页面的浮动客服位置一行都不动。
   · 选择器带 body 前缀 → 权重 (0,2,1) 高于 .float-kefu 和手机端媒体查询里的那条 (0,1,0)，
     两个断点都由这一条接管。⚠ bottom 必须显式写 auto（理由见上面手机端那段注释：两个都写会把
     固定块拉成隐形长条）。 */
body.page-order-confirm .float-kefu {
    top: 580px;
    bottom: auto;
}

/* ================= ⑨ 订单已提交 → 预付款 / 支付方式（2026-10-15 需求）=================
   页面：place_order.php 的 $success 分支；pay_wait.php / pay_return.php 的结果页也复用这几个类。
   结构：预付款金额 + 「预付款一般是订单总金额的 X%」+「在线支付预付款完成预订」
        + 微信 / 支付宝 / 银行汇款 3 个 tab（.po-pay-tab 切 .po-pay-pane）
        + 预付款 ≥1 万时多一个「等待工作人员确认后再支付」(.po-pay-wait)
   字号一律走 .po-page 的阶梯变量（--po-fs-body / --po-fs-hint），别写行内 font-size。 */
.po-ok-ico   { font-size: 46px; color: #28a745; }
.po-wait-ico { font-size: 46px; color: #c08a2e; }
.po-bad-ico  { font-size: 46px; color: #dc3545; }
/* 成功页：图标与标题略收小（这一页信息量大，别让头部占太多高度）
   标题字号与下面那行「订单编号：…」完全一致（1rem）。
   ⚠ 必须用 .po-page .po-head.po-done-head 这个权重：上面 .po-page .po-head 是 (0,2,0)
     → 单写 .po-done-head 会被它盖掉，字号实际仍是 1.25rem（之前就踩了这个坑）。 */
.po-done-ico  { font-size: 34px; }
/* 成功 / 支付页左上角返回（2026-10-19）：一行占位，圆形浅描边按钮，
   不参与居中标题的排版，窄屏也不会压字 */
.po-back-row { display: flex; margin: 0 0 2px; }
.po-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff; border: 1px solid #eef1f5;
    color: #5b6472; font-size: 15px; line-height: 1; text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    -webkit-tap-highlight-color: transparent;
}
.po-back:hover { color: #1a2332; text-decoration: none; }
.po-back:active { background: #f7f8fa; }
/* 头部三档间距（2026-10-18 需求）：绿勾 → 标题 16px，标题 → 订单号 12px，订单号 → 倒计时 12px */
.po-page .po-head.po-done-head { font-size: 1rem; font-weight: 600; margin: 16px 0 12px; }
/* 订单编号这一行（2026-10-21 需求）：字号不动，去掉加粗、改浅灰 ——
   头部只留标题一个视觉重点，编号是给客服核对用的，不该跟标题抢。 */
.po-done-no { margin: 0 0 12px; color: #9aa5b1; font-weight: 400; }
.po-done-no strong { font-weight: 400; color: inherit; }
/* 头部区块与下方白卡片的距离（2026-10-18 需求）：倒计时 → 卡片 28px，
   必须明显大于上面「订单号 → 倒计时」的 12px —— 用留白告诉用户「顶部信息说完了，
   下面是你的订单详情」。原来这里是 Bootstrap 的 pb-2（仅 8px），挤得像按钮的附属物。 */
.po-done-head-wrap { padding-bottom: 28px; }

.po-pay-card { border: 0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); margin-bottom: 16px; }
.po-pay-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.po-pay-label { font-size: var(--po-fs-body); color: #6b7280; }
.po-pay-amt { font-size: 1.35rem; font-weight: 700; color: var(--c-pay-red); }
.po-pay-sub { margin-top: 4px; font-size: var(--po-fs-hint); color: #9aa5b1; line-height: 1.6; }
/* 「在线支付预付款完成预订」—— 浅金底提示条（和计费明细的合计行同一套配色） */
.po-pay-hint {
    margin: 10px 0 12px; padding: 8px 12px; border-radius: 10px;
    background: rgba(184, 146, 63, .08); color: #8a6d2f;
    font-size: var(--po-fs-hint); line-height: 1.6;
}
.po-pay-hint i { margin-right: 5px; }

/* 支付方式：收银台式单选列表（2026-10-18 从 3 个 tab 改过来）
   一行一个方式：品牌图标 + 名称 + 说明 + 右侧单选圈；选中行 1px 细金边 + 极淡金底。 */
/* 与上方「需支付定金」拉开 30px（2026-10-18 需求），金额与支付方式各成一块 */
.pay-list {
    display: flex; flex-direction: column; gap: 8px;
    margin: 30px 0 12px;
}
.pay-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    min-height: 50px;
    padding: 9px 12px; border: 1px solid #e5e5e5; border-radius: 10px;
    background: #fff; cursor: pointer;
    transition: border-color .15s;
}
.pay-item:hover { border-color: #d4d4d4; }
/* 选中态（手机端）：卡片仍是纯白底 + 极细浅灰边，只靠右侧圆点变红表示（2026-10-18 需求）
   —— 1px 细红线只在 PC 上加（见 ≥992 媒体查询里的 .pay-page .pay-item.is-on） */
.pay-item.is-on { border-color: #e5e5e5; background: #fff; }
/* 原生 radio 视觉上隐藏，但保留在 DOM 里（键盘可聚焦、label 点击即选中） */
.pay-item-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-item-ico {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.pay-item-ico.is-wechat { background: #e8f8ee; color: #07c160; }
.pay-item-ico.is-alipay { background: #e9f2ff; color: #1677ff; }
.pay-item-ico.is-bank   { background: rgba(184, 146, 63, .14); color: var(--c-primary-dark); }
.pay-item-txt { min-width: 0; }
/* 支付方式名称（2026-10-18 需求）：不能抢金额区的戏 —— 字重 500、深灰 #333，不用 600/纯黑 */
.pay-item-name {
    display: block; font-size: var(--po-fs-body); font-weight: 500;
    color: #333; line-height: 1.35;
}
.pay-item-desc {
    display: block; font-size: var(--po-fs-hint); color: #9aa5b1;
    line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 单选圈：选中时金底 + 白勾 */
.pay-item-mark {
    position: relative; flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto;
    border: 1px solid #cfd6df; border-radius: 50%; background: #fff;
}
/* 选中勾：用支付红（和「立即支付定金」按钮同一支），不用金棕色 */
.pay-item.is-on .pay-item-mark { border-color: var(--c-pay-red); background: var(--c-pay-red); }
.pay-item.is-on .pay-item-mark::after {
    content: ''; position: absolute; left: 5px; top: 1px;
    width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* 操作区：选中方式的付款按钮出现在列表正下方，用一条虚线跟列表分开 */
.pay-action { padding-top: 12px; border-top: 1px dashed #eef1f5; }
.po-pay-pane { font-size: var(--po-fs-hint); }
.btn-pay {
    padding: 11px 0; font-size: var(--po-fs-body); font-weight: 600;
    color: #fff; background: var(--c-pay-red); border: 1px solid var(--c-pay-red);
}
.btn-pay:hover, .btn-pay:focus { color: #fff; background: var(--c-pay-red-dark); border-color: var(--c-pay-red-dark); }

/* 确认页底部「提交订单」和上面的「立即支付定金」用同一支红 —— 前后两步的付款动作视觉一致 */
.po-confirm-foot .btn-danger { background: var(--c-pay-red); border-color: var(--c-pay-red); }
.po-confirm-foot .btn-danger:hover,
.po-confirm-foot .btn-danger:focus { background: var(--c-pay-red-dark); border-color: var(--c-pay-red-dark); }
.po-pay-tip { margin-top: 8px; color: #9aa5b1; line-height: 1.6; }
.po-pay-tip.is-warn { color: #c08a2e; }

/* 银行汇款信息：左标签固定宽 + 右内容（账号等长串允许换行，别撑破卡片） */
.po-bank { margin: 0 0 10px; }
.po-bank > div { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #eef1f5; }
.po-bank > div:last-child { border-bottom: 0; }
.po-bank dt { flex: 0 0 72px; font-weight: 400; color: #9aa5b1; }
.po-bank dd { flex: 1 1 auto; min-width: 0; margin: 0; color: #2d3748; word-break: break-all; }
/* 账号 / SWIFT：国内、国际都加粗加大（2026-10-18 需求）——
   客户要照着抄到网银或汇款单上，字号太小最容易抄错一位数 */
.po-bank dd.po-bank-acct {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 15px; font-weight: 700; color: #1f2937; letter-spacing: .6px;
}
@media (max-width: 400px) {
    .po-bank dd.po-bank-acct { font-size: 14px; }
}
/* SWIFT：等宽好抄，但常规字重（2026-10-18 需求：不加粗，跟账号区分开） */
.po-bank dd.po-bank-swift {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 14px; font-weight: 400; color: #2d3748; letter-spacing: .6px;
}
/* 汇款金额：国内、国际都用支付红（要高于 .po-bank dd 的深灰，否则被它盖掉） */
.po-bank dd.po-bank-amt { color: var(--c-pay-red); font-weight: 700; }

/* 汇款信息一键复制（2026-10-19）：整宽浅边框，40px 高好点，不加粗不出彩，
   视觉上比账号信息低一档 —— 它是辅助动作，不是这一步的主按钮 */
.po-copy-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; height: 40px; margin-top: 10px; padding: 0;
    background: #fff; border: 1px solid #e6e9ee; border-radius: 9px;
    color: #6b7280; font-size: .85rem; font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}
.po-copy-btn i { font-size: 14px; }
.po-copy-btn:active { background: #f7f8fa; }
.po-copy-btn.is-done {
    color: var(--c-primary-dark);
    border-color: rgba(184, 146, 63, .45);
    background: rgba(184, 146, 63, .06);
}

/* —— 2026-10-18 成功页改版：锁定席位提示 + 总金额/定金明细 + 国内/国际汇款 + 底部两个动作 —— */
/* 锁定保障（2026-10-18：放在付款按钮正上方，12px 浅灰、居中）
   现在是 .pay-action 里的第一行，不用再拿负 margin 去贴金额了 */
.po-lock-tip {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0; margin: 0 0 16px; border-radius: 0;
    background: none; color: #9aa5b1;
    font-size: 12px; font-weight: 400; line-height: 1.5; text-align: center;
}
/* 图标口径（2026-10-18）：换成 bootstrap-icons 的线性盾牌（emoji 颜色不可控、各端渲染不一），
   跟提示文字同色，只比文字大一号 */
.po-lock-tip .po-lock-ico {
    flex: 0 0 auto; font-size: 14px; line-height: 1; color: #9aa5b1;
}
/* 左卡里的那一份（2026-10-27 需求：从付款按钮上方挪到「订单信息有误」上面）：
   左对齐，跟下面客服提示同一条左边线；只留上间距，下间距交给 .pay-sum-tip 自己的 18px */
.pay-page .po-lock-tip-sum {
    justify-content: flex-start; text-align: left;
    gap: 5px; margin: 14px 0 0;
}
/* 选中「银行汇款」时不显示锁定提示（2026-10-18 需求）：这一步没有在线支付动作，
   "支付定金立即锁定席位"只会和下面的汇款账号信息打架。
   （只影响 .pay-action 里那份，手机上那份仍按此隐藏；左卡那份跟支付方式无关，不隐藏） */
.pay-action[data-pay-active="bank"] .po-lock-tip { display: none; }

/* 支付倒计时（下单后 2 小时内未付 → 取消席位预占）
   纯灰色小字，没有底色/边框（2026-10-18 需求：去掉黄色底框） */
.po-countdown {
    display: block; margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0;
    color: #9aa5b1; font-size: 12px; line-height: 1.7;
}
.po-countdown strong {
    font-family: Consolas, Monaco, monospace; font-size: 12px;
    color: #7c8794; font-weight: 600; letter-spacing: .5px;
}
/* 超时（2026-10-27 需求）：改用琥珀黄，红色太刺眼 —— 这是"提醒你去联系客服"，
   不是"出错了"，别用报错红 */
.po-countdown.is-over, .po-countdown.is-over strong { color: #b45309; }

/* 行程两行（金额卡片最上方、居左、无前缀）：
     一、林都号（加粗）｜12月15日出发（前置竖线）
     二、豪华双床房 | 2成人1儿童（常规体）
   颜色口径（2026-10-18 需求）：两行文字统一用「订单总金额」标签的浅灰 #9aa5b1，
   只靠字重和字号区分层级，不再用不同灰阶。
   两行下方一条极淡虚线，把「买的是什么」和「付多少钱」隔开 */
.po-done-trip {
    margin: 0 0 12px; padding: 0 0 11px;
    border-bottom: 1px dashed #f0f2f5;
    text-align: left;
}
.po-trip-main {
    display: flex; flex-wrap: wrap; align-items: center;
    line-height: 1.5;
}
/* 字号与下面「订单总金额 / 需支付定金」两个标签统一（2026-10-21 需求）：
   改成 --po-fs-body，整块跟金额区同一档，不再比标签大一号 */
.po-trip-name {
    color: #9aa5b1; font-size: var(--po-fs-body); font-weight: 700;
}
/* 出发日期与「林都号」同字号，只靠字重区分：车次 700 / 日期 400 */
.po-trip-date {
    color: #9aa5b1; font-size: var(--po-fs-body); font-weight: 400;
}
/* 两行共用的竖线（2026-10-18 统一）：两行都用这同一个 span、同一套数值 ——
   1px 宽、0.85em 高（跟着字号走）、#e3e7ed、左右各 8px。
   不要用文本「|」字符，字形粗细和高度跟手画的线对不上。 */
.po-trip-sep {
    flex: 0 0 auto; display: inline-block;
    width: 1px; height: .85em; margin: 0 8px;
    background: #e3e7ed;
}
/* 第二行与第一行同字号（2026-10-21：统一到 --po-fs-body，与金额标签一致），只靠字重区分 */
.po-trip-sub {
    display: flex; flex-wrap: wrap; align-items: center;
    margin-top: 3px;
    color: #9aa5b1; font-size: var(--po-fs-body); font-weight: 400; line-height: 1.6;
    word-break: break-word;
}

.po-amt-list { margin: 0 0 14px; }
.po-amt-list > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px dashed #eef1f5;
}
.po-amt-list > div:last-child { border-bottom: 0; }
/* 字号口径（2026-10-18）：两个标签「订单总金额 / 需支付定金」都用浅灰，
   字号与底部「返回我的订单」按钮一致（--po-fs-body）；数字 18 / 定金 28（红） */
.po-amt-list dt { font-weight: 400; color: #9aa5b1; font-size: var(--po-fs-body); min-width: 0; }
.po-amt-list dt small { color: #9aa5b1; font-size: 12px; font-weight: 400; }
/* 两个金额字号完全一致，只有颜色不同：总金额深灰 / 定金红。
   2026-10-21：22px → 18px（原来比标签大太多），并留出 12px 右侧呼吸位，
   不再让数字贴着卡片边缘；虚线仍是整行宽度（用 margin 而不是容器 padding）。 */
.po-amt-list dd {
    margin: 0 12px 0 0; flex: 0 0 auto; white-space: nowrap;
    color: #333; font-size: 18px; font-weight: 700;
}
.po-amt-list .is-due dd { color: var(--c-pay-red); }
/* 窄屏再收一点，两个数字同步缩，别把数字挤换行 */
@media (max-width: 400px) {
    .po-amt-list dd { font-size: 17px; }
}

/* ===== 支付页 b/payment.php（2026-10-21 改版）=====
   整页复用上面收银台那套（.po-page 字号阶梯 / .po-done-trip / .po-amt-list / .pay-list / .btn-pay），
   这里只补它没有的三样：微信快捷入口、分隔线、底部说明。
   金额数字比收银台再小一档（18px → 16px）：这一页主角是「怎么付」，金额只是复核。 */
.pay-page { max-width: 640px; margin: 0 auto; }
/* 金额明细（2026-10-27 需求）：标签【原地靠左不动】，只把金额推到右边。
   做法就是最朴素的 space-between —— dt 不定宽、不右对齐，dd 右端贴齐行右边缘。
   ⚠ 这段必须写在媒体查询外面：之前只写在 ≥992 的 @media 里，手机上不生效。 */
.pay-page .pay-sum .po-amt-list > div { padding: 5px 0; justify-content: space-between; gap: 14px; }
.pay-page .pay-sum .po-amt-list dt { text-align: left; }
.pay-page .pay-sum .po-amt-list dd {
    margin: 0; font-size: 16px;
    flex: 0 0 auto; text-align: right; white-space: nowrap;
}
/* 微信付定金：独立快捷入口（付完自动确认），与下面「转账 / 汇款」两条路分开 */
.pay-wx {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff;
}
.pay-wx-txt { min-width: 0; flex: 1 1 auto; }
.pay-wx-name { font-size: var(--po-fs-body); font-weight: 500; color: #333; }
.pay-wx-name i { color: #07c160; margin-right: 5px; }
.pay-wx-desc { font-size: var(--po-fs-hint); color: #9aa5b1; }
.pay-wx-btn { flex: 0 0 auto; padding: 7px 16px; font-size: var(--po-fs-body); }
/* 「或」分隔线：两边细线，中间浅灰字 */
.pay-or {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 0 0; color: #b6bec9; font-size: var(--po-fs-hint);
}
.pay-or::before, .pay-or::after { content: ''; flex: 1 1 auto; height: 1px; background: #f0f2f5; }
.pay-note { margin: 10px 0 0; text-align: center; font-size: var(--po-fs-hint); color: #9aa5b1; }
.pay-done-foot { margin-top: 4px; }

/* ===== 支付页 · PC 版式（2026-10-27 需求，对齐主流收银台）=====
   手机是单列（摘要 → 支付方式 一列到底，头部居中）；
   PC（≥992）改成大电商收银台那种【左订单信息 + 右支付方式】两张卡片，顶部一条状态栏：
     · 顶部：✓ + 状态标题 + 订单号（靠右）+ 倒计时（次行）—— 不再是"大图标居中"那一坨
     · 左 420px：订单信息卡（订单号 / 行程 / 金额明细），「需支付定金」竖排成 34px 红字
     · 右 自适应：选择支付方式卡（竖排大选项，选中红边 + 浅红底）+ 对应操作区 + 大按钮
   DOM 顺序仍是「摘要 → 支付」，手机端顺序因此一行不变。窄屏（<992）这些规则全部不生效。 */
.pay-cols-head { display: none; }                    /* 卡片标题只在 PC 出现 */
.pay-topbar { text-align: center; padding-top: .5rem; }  /* 手机沿用原来的居中头部 */
/* 手机端「订单编号」这一行收小一档（2026-10-27 需求）：正文 14.4px → 阶梯里的 hint 档 12.16px，
   它是给客服核对用的次要信息，不该和标题抢。PC 端仍由媒体查询里的 .84rem 覆盖。 */
.pay-page .pay-topbar .po-done-no { font-size: var(--po-fs-hint); }
/* PC 的「三行 + 左边对齐」（2026-10-27 需求）全部写在 ≥992 的媒体查询里，手机端一行不动 */

@media (min-width: 992px) {
    /* ===== 2026-10-27 需求：PC 去掉左上角返回箭头 + 左右边缘与顶部导航对齐 =====
       ① 返回箭头：页头本来就有导航，收银台这一页不需要再挂一个（手机端保留）。
       ② 对齐：顶部导航 / 页脚用的都是 .site-container（max 1280 + 左右 20），
          而 portalPage 的 <main class="container"> 是 Bootstrap 的 960/1140 且带 12px 内边距，
          两者会差一截 —— 这里把 main 的宽度限制和内边距解掉，
          宽度完全交给 .pay-page 按 .site-container 的规则算，左右两条边就严丝合缝了。 */
    body.page-pay .po-back-row { display: none; }
    body.page-pay main.container { max-width: none; padding-left: 0; padding-right: 0; }
    .pay-page { max-width: 1280px; padding: 0 20px; }

    /* —— 顶部状态栏（PC，2026-10-28 需求）：横跨左右两栏的【极浅金通知横幅】——
       底色 #fcf8ee + 1px #efe3c8 淡金细边：站内主色就是金（--c-primary #b8923f），
       浅金跟头部热线 / 导航 / 页脚是同一色系；原来的浅绿在站内没有第二处呼应，
       又挨着红色的「立即支付」，三种颜色并排显得杂。
       绿勾 / 标题 / 单号 / 倒计时全部水平居中，安静地做个通知栏，不跟下面两张卡抢注意力。
       直角（不做圆角），一条横贯整宽的色带，跟下面两张圆角卡区分开。 */
    .pay-page .pay-topbar {
        display: grid; grid-template-columns: minmax(0, 1fr);
        justify-items: center; align-items: start; text-align: center;
        margin: 0 0 20px; padding: 22px 24px 24px;
        background: #fcf8ee; border: 1px solid #efe3c8; border-radius: 0;
    }
    .pay-page .pay-topbar .po-done-ico { font-size: 36px; line-height: 1; }
    .pay-page .pay-topbar .po-done-head { font-size: 1.12rem; margin: 12px 0 0; }
    .pay-page .pay-topbar-sub {
        margin-top: 14px; width: 100%;
        display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .pay-page .pay-topbar-sub .po-done-no { margin: 0; font-size: .84rem; }
    /* 倒计时做成浅橙药丸 + 数字加粗：原来是一行 12px 浅灰小字，太淡，没有紧迫感 */
    .pay-page .pay-topbar-sub .po-countdown {
        display: inline-flex; align-items: center; gap: 6px;
        margin: 0; padding: 3px 10px; border-radius: 999px;
        background: #fff4e5; color: #b45309; font-size: 12px; line-height: 1.6;
    }
    .pay-page .pay-topbar-sub .po-countdown strong {
        font-size: 13px; font-weight: 700; color: #b45309; letter-spacing: .5px;
    }
    /* 超时（2026-10-27 需求）：红底红字太刺眼，换成琥珀黄 —— 浅黄底 + 深琥珀字，
       跟正常态的浅橙药丸是同一个色系，只是更深一档，一眼能看出状态变了但不扎眼 */
    .pay-page .pay-topbar-sub .po-countdown.is-over { background: #fef3c7; color: #b45309; }
    .pay-page .pay-topbar-sub .po-countdown.is-over strong { color: #92400e; }

    /* —— 左右两栏：左＝订单信息 420、右＝支付方式（自适应）—— */
    /* 高度自适应（2026-10-27 需求）：左卡内容少，别再 stretch 拉成和右卡一样高 ——
       之前撑高后下半截是一大片白，底部提示像被扔在角落里。 */
    .pay-cols { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 20px; align-items: start; }
    .pay-sum-card  { grid-column: 1; grid-row: 1; }
    .pay-main-card { grid-column: 2; grid-row: 1; }

    /* 卡片：克制的圆角 + 轻投影（大商城收银台都不做重投影）；底部外边距交给 grid gap */
    .pay-page .po-pay-card { margin-bottom: 0; border-radius: 12px; box-shadow: 0 2px 10px -6px rgba(26, 35, 50, .25); }
    .pay-cols-head { display: block; }
    /* 「订单信息」标题前的图标改灰（2026-10-27 需求）：
       金色在这一卡里太跳，会和下面的金额抢注意力；现在收到和次要文字同一支的 #9aa5b1，
       跟标题文字的深浅拉开层次。「选择支付方式」仍保持金色。 */
    .pay-page .pay-sum-card .card-header i { color: #9aa5b1; }
    /* 左卡：高度随内容走，不再 flex 撑满 */
    .pay-sum-card  .card-body { padding: 18px 22px 22px; }
    .pay-main-card .card-body { padding: 20px 22px 22px; }

    /* —— 左卡：订单信息 —— */
    .pay-page .pay-sum .po-done-trip { margin-bottom: 16px; padding-bottom: 16px; }
    .pay-page .pay-sum .po-amt-list { margin: 0; }
    /* 金额左右明细的「标签定宽 + 左对齐」写在媒体查询外面（见上方 .pay-page .pay-sum .po-amt-list），
       手机上同样生效，这里不再重复。 */
    /* 「需支付定金 / 待支付尾款」跟「订单总金额」长得一模一样（2026-10-27 需求）：
       标签在左、金额在右、字号同为 16px，只靠【红色数字 + 上方虚线】做区分，
       不再是原来的竖排 34px 大字。 */
    .pay-page .pay-sum .po-amt-list .is-due {
        margin-top: 8px; padding-top: 14px;
        border-top: 1px dashed #eef1f5;
    }
    .pay-page .pay-sum .po-amt-list .is-due dt { color: #4a5568; font-weight: 600; }
    .pay-page .pay-sum .po-amt-list .is-due dd {
        margin: 0; font-size: 16px; line-height: 1.4;
        color: var(--c-pay-red); font-weight: 700; letter-spacing: 0;
    }

    /* —— 右卡：三种方式【横向并排】（利用宽屏，一眼对比；图标在上、名称在下）—— */
    .pay-page .pay-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
    .pay-page .pay-item {
        position: relative; flex-direction: column; align-items: center; justify-content: flex-start;
        gap: 8px; min-height: 0; padding: 18px 10px 14px; text-align: center;
    }
    .pay-page .pay-item-ico { flex: 0 0 44px; width: 44px; height: 44px; font-size: 22px; }
    .pay-page .pay-item-txt { align-items: center; }
    .pay-page .pay-item-name { font-size: var(--po-fs-body); }
    .pay-page .pay-item-desc { white-space: normal; font-size: 12px; line-height: 1.4; }
    .pay-page .pay-item-mark { position: absolute; top: 10px; right: 10px; }
    /* 选中态（2026-10-27 需求）：仍是一条【1px 细红线】+ 右上角红勾，
       不加粗（不改 border-width，避免内容抖动）、不加浅红底、不加外发光，卡片保持纯白。 */
    .pay-page .pay-item.is-on {
        border-color: var(--c-pay-red);
        background: #fff;
        box-shadow: none;
    }

    /* —— 选中后的「原位」面板 —— 微信：二维码 + 说明 + 安全背书 / 支付宝：跳转说明 ——
       2026-10-27 需求：去色块、去黄框，全页统一白灰红。
       这块原来铺了一层 #fbfcfd 底，在白卡上像贴了块补丁 —— 改成透明白，只留一圈淡灰细边。 */
    .pay-page .pay-qr-box {
        display: flex; align-items: center; gap: 22px;
        padding: 18px; border-radius: 12px;
        background: transparent; border: 1px solid #eef1f5;
    }
    /* 二维码本体（2026-10-27 需求）：去掉外面那层白底小卡和投影，直接躺在面板里，
       留白交给 .pay-qr-box 的 padding —— 之前白卡 + 投影 + 面板细边，三层框套着显得脏 */
    .pay-page .pay-qr {
        flex: 0 0 auto; width: 170px; height: 170px;
        padding: 0; background: none; border-radius: 0; box-shadow: none;
    }
    .pay-page .pay-qr svg { display: block; width: 100%; height: 100%; }
    .pay-page .pay-qr-info { flex: 1 1 auto; min-width: 0; }
    .pay-page .pay-qr-t { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: #1a2332; }
    .pay-page .pay-qr-s { margin: 0 0 12px; font-size: var(--po-fs-body); color: #6b7280; line-height: 1.6; }
    .pay-page .pay-qr-s strong { color: var(--c-pay-red); }
    /* 安全背书：盾牌 + 一句"官方通道"（2026-10-27 需求：去掉绿色胶囊底，
       直接用浅灰文字 + 小盾牌，跟页面的白灰红配色保持一致） */
    .pay-page .pay-safe {
        display: inline-flex; align-items: center; gap: 5px; margin: 0;
        padding: 0; color: #9aa5b1; font-size: 12px;
    }
    /* 盾牌上品牌色（2026-10-27 需求）：微信绿 / 支付宝蓝，只给图标上色，文字仍浅灰。
       颜色取的是支付方式卡片上那两枚品牌图标的同一支，别各写各的。 */
    .pay-page .po-pay-pane[data-pane="wechat"] .pay-safe i { color: #07c160; }
    .pay-page .po-pay-pane[data-pane="alipay"] .pay-safe i { color: #1677ff; }
    .pay-page .pay-pane-lead { margin: 0 0 12px; font-size: var(--po-fs-body); color: #6b7280; line-height: 1.6; }

    /* 操作区：按钮加大到 52px 高 */
    .pay-page .pay-action { padding-top: 18px; }
    .pay-page .pay-action .btn-pay { padding: 15px 0; font-size: 1rem; border-radius: 10px; }

    /* 银行汇款信息（2026-10-28 需求）：PC 上整块放大一档 ——
       客户要照着往网银/汇款单里抄，原来 14.4px 挤在 620px 宽的右卡里又小又散；
       行长高也放开，账号再大一档（抄错一位就要退汇）。 */
    .pay-page .po-bank > div { padding: 9px 0; gap: 12px; }
    .pay-page .po-bank dt { flex-basis: 88px; font-size: .92rem; }
    .pay-page .po-bank dd { font-size: 1rem; line-height: 1.6; }
    .pay-page .po-bank dd.po-bank-acct { font-size: 1.15rem; letter-spacing: .8px; }
    .pay-page .po-bank dd.po-bank-swift { font-size: 1rem; }
    .pay-page .po-bank.is-en dt { flex-basis: 124px; }
    .pay-page .po-bank-h { font-size: 1rem; }
    .pay-page .po-bank-sec .po-pay-tip { font-size: .9rem; }

    /* 左卡底部：提示一句 + 「联系我的专属客服」按钮。
       2026-10-27：文字色原来是自己一支的 #8a94a6，跟上行「锁定席位」的 #9aa5b1 差一点点，
       两行上下挨着反而显脏 —— 统一收到 #9aa5b1（页面 12px 辅助文字都用这支） */
    .pay-page .pay-sum-tip {
        margin-top: 18px; padding-top: 14px;
        border-top: 1px dashed #eef1f5; font-size: 12px; line-height: 1.6; color: #9aa5b1;
    }
    /* 「锁定席位」紧跟「订单信息有误」时（2026-10-27 需求：这两行行距太大）：
       上面那 18 + 14 的 32px 一路收到 4 + 4 —— 虚线还在，但只是贴在两行中间的一道分隔，
       不再把两行推开；两行现在读起来是同一段说明。 */
    .pay-page .po-lock-tip-sum + .pay-sum-tip { margin-top: 4px; padding-top: 4px; }
    .pay-page .pay-sum-tip-t { margin: 0 0 10px; }
    .pay-page .pay-sum-tip .btn { padding: 5px 12px; font-size: 12px; border-radius: 8px; }
}

/* 银行汇款：国内 / 国际两块（中间一条分隔线） */
.po-bank-sec + .po-bank-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef1f5; }
.po-bank-h {
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
    font-size: var(--po-fs-step); font-weight: 600; color: #1f2937;
}
.po-bank-h i { color: var(--c-primary-dark); }
.po-bank-h-en { font-size: var(--po-fs-hint); font-weight: 400; color: #9aa5b1; }
/* 国际汇款标签是英文，比中文长（Beneficiary Address 这种），给更宽的标签列并允许折行 */
.po-bank.is-en dt { flex: 0 0 104px; line-height: 1.45; }
.po-bank-sec .btn { margin-top: 4px; }

/* 成功页底部：返回我的订单 / 联系客服（等宽平分）。
   两个都是次级动作 —— 白底细描边，不能跟上面金色的「立即支付定金」抢焦点。 */
.po-done-actions { display: flex; gap: 10px; padding: 4px 0 24px; }
.po-done-actions .btn {
    flex: 1 1 0; min-width: 0;
    padding: 9px 0;
    background: #fff; border: 1px solid #dcdfe4; color: #4a5568;
    font-size: var(--po-fs-body); font-weight: 500;
}
.po-done-actions .btn:hover, .po-done-actions .btn:focus {
    background: #f8fafc; border-color: #c9d1da; color: #1f2937;
}

/* 「等待工作人员确认后再支付」那个出口已在 2026-10-18 按需求去掉，样式一并删除 */

/* ================= PC（≥992px）预订页优化 =================
   与手机端（含「确认预订信息」页）统一口径：
     ① 行程信息已挪到右栏、计费明细【上方】（标记搬过了，这里只调两卡之间的间距）
     ② 出行人先不填：整块隐藏。DOM 仍保留 → JS 照旧按出行人数维护行数；
        提交时自然不带出行人姓名 → 与手机端确认页一致（提交/付款/客服确认后都能在「我的订单」补）
     ③ 卡片标题加金色图标；计费明细字号收一档、合计行浅金底；提交按钮回到 1rem（btn-lg 是 20px 偏大）
   ⚠ 全部限定在【非抽屉】的 .po-page（PC 看到的那个）—— 手机端抽屉一行都不改。 */
/* 左栏整栏吸顶（2026-10-27 需求）：右侧表单往下滚时，行程信息 + 计费明细一直停在视野里。
   ⚠ 两个关键点，少一个就不生效：
     ① align-self: flex-start —— Bootstrap 的 .row 是 flex，子项默认 stretch 会被拉成整行高，
        position: sticky 就完全没反应；
     ② 只能作用在非抽屉的 PC 页面上，抽屉里是另一套布局（.is-drawer）。 */
@media (min-width: 768px) {
    .po-page:not(.is-drawer) .po-side-sticky {
        position: sticky;
        top: 16px;
        align-self: flex-start;
        max-height: calc(100vh - 32px);
        overflow-y: auto;                 /* 内容超一屏时在栏内滚动，不跟着页面跑 */
        overscroll-behavior: contain;
    }
    .po-page:not(.is-drawer) .po-side-sticky::-webkit-scrollbar { width: 6px; }
    .po-page:not(.is-drawer) .po-side-sticky::-webkit-scrollbar-thumb {
        background: rgba(26, 35, 50, .18); border-radius: 3px;
    }
}

@media (min-width: 992px) {
    .po-page:not(.is-drawer) .col-md-4 > .po-info-card { margin-bottom: 16px !important; }
    .po-page:not(.is-drawer) .po-pax-block { display: none; }
    /* 不要「选择房型 / 版本 / 班次」那行标题（需求）—— 卡片直接进内容，和手机端抽屉一样 */
    .po-page:not(.is-drawer) .po-pick-card > .card-header { display: none; }

    .po-page:not(.is-drawer) #priceDetail { font-size: 0.85rem; }
    .po-page:not(.is-drawer) #priceDetail hr { margin: 12px 0; opacity: .1; }
    /* 2026-10-27 需求：「预估总费用为：¥xx 元」这一行加高 ——
       上下内边距 8px → 14px（原来看起来跟明细行挤在一起，金额不够"落地"） */
    .po-page:not(.is-drawer) #priceDetail .po-total {
        font-size: var(--po-fs-step);
        margin: 0 -12px; padding: 14px 12px; border-radius: 10px;
        background: rgba(184, 146, 63, .08);
    }
    .po-page:not(.is-drawer) #priceDetail .po-total span:last-child { font-size: 1.05rem; font-weight: 700; }
    .po-page:not(.is-drawer) #submitBtn { font-size: 1rem; padding: 12px 0; }
    /* 下单页的 #priceDetail 现在也用确认页那套行 class（.po-bill-line / .po-unit / .po-total） */
    .po-page:not(.is-drawer) #priceDetail.po-bill { font-size: 0.85rem; }
}

/* ===== 明细行样式：确认页与下单页【共用】=====
   上面那批规则原来只写了 .po-confirm-page 前缀 → 下单页的 #priceDetail 拿不到。
   这里对「任意 .po-page 里的 .po-bill」再声明一遍（两边内容一致，改一处请两处一起改）。 */
.po-page .po-bill .po-bill-i { color: #9aa5b1; margin-right: 6px; }
.po-page .po-bill .po-bill-line { gap: 10px; }
.po-page .po-bill .po-bill-l { min-width: 0; }
.po-page .po-bill .po-unit { margin-left: 6px; color: #9aa5b1; font-size: .9em; }
.po-page .po-bill .po-unit-note { margin-left: 5px; color: #c08a2e; font-size: .86em; }
.po-page .po-bill .po-bill-amt { white-space: nowrap; font-weight: 600; }
.po-page .po-bill hr { margin: 12px 0; opacity: .1; }

/* 「双人间不支持拼房…」提示的两行文案：图标独占一列（flex），
   这样第二行从文字左边缘起，与第一行的「双」字【左对齐】（不然会顶到图标下面）。 */
.po-page .po-whole-tip { display: flex; align-items: flex-start; gap: 6px; }
.po-page .po-whole-tip > i { flex: 0 0 auto; line-height: 1.5; }
.po-page .po-whole-tip > span { min-width: 0; }

/* ================= 就地登录面板（手机=底部抽屉 / PC=居中弹窗）=================
   外壳由 assets/js/portal-login.js 动态创建（.lg-overlay/.lg-sheet），
   内容是 /login_fragment.php 的片段（.lg-wrap 那一块）。 */
.lg-overlay {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(17, 24, 39, .5);
    display: none; align-items: flex-end; justify-content: center;
}
.lg-overlay.show { display: flex; }
.lg-sheet {
    width: 100%; max-width: 560px; max-height: 92vh; overflow: auto;
    background: #fff; border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
    animation: lgUp .22s ease-out;
}
@keyframes lgUp { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes lgPop { from { transform: scale(.97); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) {
    .lg-overlay { align-items: center; }
    .lg-sheet { max-width: 460px; border-radius: 16px; animation: lgPop .18s ease-out; }
}
.lg-loading { padding: 40px 20px; text-align: center; color: #8a94a6; font-size: .9rem; }

/* —— 片段内部（.lg-wrap）—— */
.lg-wrap { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
.lg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lg-title { font-size: 1rem; font-weight: 700; color: #1a2332; }
.lg-title i { color: var(--c-primary); margin-right: 6px; }
.lg-close { border: 0; background: none; font-size: 24px; line-height: 1; color: #98a2b3; cursor: pointer; padding: 0 4px; }
.lg-tabs { display: flex; gap: 6px; background: #f5f7fa; border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.lg-tab {
    flex: 1 1 0; border: 0; background: none; border-radius: 8px; padding: 7px 0;
    font-size: .84rem; color: #5b6675; cursor: pointer;
}
.lg-tab.is-on { background: #fff; color: #1a2332; font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.lg-wrap .form-label { font-size: .84rem; color: #4a5568; margin-bottom: 4px; }
.lg-wrap .form-control, .lg-wrap .form-select { font-size: .88rem; }
.lg-wrap .form-text { font-size: .76rem; color: #98a2b3; }
.lg-wrap .btn { font-size: .92rem; }

/* 房型胶囊 / 版本胶囊 / 人数构成：确认页与下单页【共用】
   （上面那批只写了 .po-confirm-page 前缀 → 下单页的「房型 豪华双人间×1（1成人）」拿不到样式） */
.po-page .po-cabin-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    background: rgba(184, 146, 63, .1); color: #8a6a24; font-weight: 600;
}
.po-page .po-cabin-chip i { font-size: .9em; color: #b8923f; }
.po-page .po-tier-chip {
    display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
    background: #f2f5f8; color: #5b6675;
}
.po-page .po-people { margin-left: 6px; color: #8a94a6; }

/* 卡片标题图标：金色（与「确认预订信息」页同一套观感）
   ⚠ 用后代选择器（不是 > ）—— 行程信息那张卡的图标包在 <span> 里，
     原来写 `.card-header > i` 匹配不到 → 图标不染色、看着像"没显示"。 */
.po-page .card-header i { color: var(--c-primary); margin-right: 6px; font-size: 1.04em; vertical-align: -1px; }

/* 行程信息/价格明细等清单（.po-info）里的值【不加粗】—— 与确认页一致
   （基础规则是 dd{font-weight:600}；发车/到达时间那处 <b> 仍保留加粗作为强调） */
.po-page:not(.is-drawer) .po-info dd { font-weight: 400; }

/* 房型卡里「平铺」那一行不占位（需求：房型卡只显示价格）——
   平铺 = 整间的基础价、就是卡片上那个「¥xxxx起」，默认已选中，
   再单列一行「平铺 ¥xxxx/人」是重复信息。单选按钮仍在（默认 checked），只是不显示。
   手机端本来就是这么处理的（.po-beds-panel .bed-row.is-flat），这里补上普通/PC 端。 */
.po-page .bed-row.is-flat { display: none; }

/* ===== 手机端铺位行的落脚点（由 JS 从卡片里搬过来，见 place_order.php 的 placeBedsForViewport）=====
   桌面端不搬，这个容器是空的 → :empty 直接隐藏，不留空隙。
   手机端的样式（作为网格一格、跨两列）写在上面那个 @media 里。
   注意：标签之间【不能有空白】（包括换行空格），否则 :empty 不成立。 */
.po-beds-panel:empty { display: none; }
/* 面板里的铺位行怎么排（面板只在手机端用，所以不必再套媒体查询）：
   ① 「平铺」不占一行 —— 它是整间的基础价、就是卡片上那个起价，默认已选中，再单列一行「平铺 XXXX元」是重复信息；
   ② 其余铺位（上铺 / 下铺 / 第1人 / 第3人…）【排在同一行】里，不再一个铺位一行。 */
.po-beds-panel .cabin-beds { display: flex; flex-wrap: wrap; gap: 8px; }
/* 只放"排布"相关（一行并排、每格宽度）——字号/字重/选中底色的覆盖必须写在下面
   「铺位行」基础规则【之后】，否则同权重会被 .po-page .bed-row 盖掉（踩过）。 */
.po-beds-panel .bed-row { flex: 1 1 42%; min-width: 132px; margin-top: 0; }
.po-beds-panel .bed-row.is-flat { display: none; }
/* 选中那组里只剩「平铺」时（比如豪华双人间只有平铺），面板里就没有可显示的行了 ——
   整个面板收起来，否则网格里会多出一段空行（JS 在 placeBedsPanel 里加 is-empty）。 */
.po-beds-panel.is-empty { display: none; }

/* ===== ④下面的「铺位分配」提示（只有拼房型房型会显示）=====
   拼房型（上下铺）不让客户挑铺：按人数自动分配（1位→1上铺；2位→1上1下；3位→2上1下；4位→2上2下），
   这行就是把分配结果告诉客户。浅金底表示"这是系统算出来的"。 */
.po-alloc {
    margin-top: 8px;
    padding: 7px 10px;
    background: #f8f6f1;
    border-radius: 8px;
    font-size: .84rem;
    color: #7a6a4a;
}

/* ===== 预订抽屉（手机端详情页「立即预订」打开的那个）=====
   外壳复用站内唯一的底部面板 .share-overlay / .share-sheet（product.php 里同时挂了这两个类，
   与「转发」面板同一套几何与动画），抽屉自己的部分在这里补：占高、内容自己滚。 */
.book-sheet { max-height: 88vh; display: flex; flex-direction: column; padding-bottom: 0; }
.book-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.book-loading { padding: 40px 0; text-align: center; color: #98a2b3; font-size: .9rem; }
.book-loading a { color: var(--c-primary); }

/* 抽屉里分两步：① 选房型/版本/班次/人数　② 行程信息 + 联系人与出行人 → 提交。
   只对抽屉内容（.po-page.is-drawer）生效 —— 普通下单页与 PC 完全不受影响。
   计费明细（.po-price-card）两步都显示：它是随时在变的总账。 */
.po-page.is-drawer .po-info-card,
.po-page.is-drawer .po-contact-card,
.po-page.is-drawer .po-step2-only { display: none; }
.po-page.is-drawer.is-step2 .po-pick-card { display: none; }
.po-page.is-drawer.is-step2 .po-info-card,
.po-page.is-drawer.is-step2 .po-contact-card { display: block; }
.po-page.is-drawer.is-step2 .po-step1-only { display: none; }
.po-page.is-drawer.is-step2 .po-step2-only { display: inline-block; }

/* 抽屉里按需求做的减法：不显示「选择房型 / 版本 / 班次」这个卡片标题
   计费明细卡：第一步不显示（底部吸底条也不显示金额）；【第二步露出来】——
   需求「房间数提示 / 铺位分配提示留到下一页价格明细」就靠这条生效，否则那两条提示没地方看。 */
.po-page.is-drawer .po-pick-card > .card-header { display: none; }
.po-page.is-drawer .po-price-card { display: none; }
.po-page.is-drawer.is-step2 .po-price-card { display: block; }

/* 抽屉底部吸底条：只放一个【通栏按钮】（第一步「下一步」/ 第二步「提交订单」），不显示金额。
   用 sticky 贴在抽屉底部；左右负外边距抵消 .book-body 的内边距，让分隔线通到抽屉两边。 */
.po-drawer-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 14px -18px 0;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid #eef1f5;
}
.po-foot-btn { width: 100%; font-weight: 600; }

/* ===== 铺位行 ===== */
.po-page .bed-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 4px; padding: 7px 10px;
    border: 1px solid #eef1f5; border-radius: 8px;
    font-size: var(--po-fs-body); color: #4a5568;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.po-page .bed-row:hover { border-color: #dbe3ec; }
.po-page .bed-row.is-off { opacity: .45; }
.po-page .bed-row-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
/* 单选点用站内主色（默认是 Bootstrap 蓝）；accent-color 只改颜色，不动控件结构 */
.po-page input[type=radio].form-check-input { accent-color: var(--c-primary); margin-right: 0; }
.po-page .bed-price { flex: 0 0 auto; font-weight: 700; color: #1a2332; }
/* 选中铺位行：JS 在 updatePrice() 里会给当前行加 bg-primary / bg-opacity-10（assets/js 里那两行，
   是它的既有做法，不去改 JS），这里在本页内把那两个类解释成【中性浅灰底】——
   金色只保留在右侧价格的数字上，避免整行泛金。 */
.po-page .bed-row.bg-primary { background-color: #f6f8fb !important; border-color: #cfd9e4; }
.po-page .bed-row.bg-primary .bed-price { color: var(--c-primary); }

/* ===== 手机端铺位面板里的铺位选项（写字号/字重/选中态）=====
   ⚠ 必须放在上面基础规则【之后】：同权重时后写的赢；写在前面会被 .po-page .bed-row 盖掉（实测踩过）。
   字号字重收一档：原来 .9rem + 700 在半宽里又粗又大，价格数字还抢过了铺位名（选的是铺位，不是数字）。
   排布改成【格内上下两行】（铺位名一行、价格一行）：半宽格里"上铺 + ¥24999.00/人"左右并排放不下，
   会被挤成"上/铺"两行（实测就是这个问题）。 */
.po-beds-panel .bed-row { display: block; padding: 7px 10px; font-size: .84rem; }
.po-beds-panel .bed-row-name { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.po-beds-panel .bed-price { display: block; margin-top: 2px; font-size: .84rem; font-weight: 600; letter-spacing: -.2px; }
/* 选中的那个铺位：暖色底 + 金边，一眼看出选了哪张铺（基础规则是 !important，这里跟着写） */
.po-beds-panel .bed-row.bg-primary { background-color: #fdfaf3 !important; border-color: rgba(184, 146, 63, .55); }

/* 价格明细：行距统一 + 合计用大号金色 */
.po-page #priceDetail { font-size: var(--po-fs-body); }
.po-page #priceDetail hr { margin: 12px 0; opacity: .1; }
.po-total { font-size: 1.05rem; font-weight: 700; }
.po-total span:last-child { color: var(--c-primary); font-size: 1.35rem; }

/* 蓝色系 Bootstrap 类在本页内改成金色（注意 Bootstrap 这些工具类带 !important） */
.po-page .bg-primary { background-color: var(--c-primary) !important; }
.po-page .border-primary { border-color: var(--c-primary) !important; }
.po-page .btn-primary {
    background-color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
}
.po-page .btn-primary:hover { filter: brightness(.94); }
.po-page .btn-outline-primary { color: var(--c-primary); border-color: rgba(184, 146, 63, .5); }
.po-page .btn-outline-primary:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
/* 未选中的版本按钮：原来边框太淡，看着不像可点的按钮 */
.po-page .btn-outline-secondary { color: #4a5568; border-color: #d7dee7; background: #fff; }
.po-page .btn-outline-secondary:hover { background: #f6f8fa; border-color: var(--c-primary); color: var(--c-primary); }
/* 提交订单保持站内习惯（全宽红按钮），只把圆角与间距统一 */
.po-page #submitBtn { border-radius: 10px; font-size: 1rem; font-weight: 600; padding: 12px 0; }

/* ================= 公告列表页：PC 右侧的热门旅游列车 =================
   PC：左公告列表 + 右热门列车，两栏用 .dash-grid（7fr/5fr，与个人中心同一套网格）。
   这里只补"一列、一行一个、不滚动"的行样式；文字沿用 .sp-card-* 那套类名。
   手机端整块隐藏（需求是 PC 版才有），见文件后面的媒体查询。 */
/* ⚠️ 写两遍 .ann-cols（0-2-0）：
   .dash-grid 在文件后面（约 1933 行）还有一条 @media(992~1399) 改成 1fr 1fr —— 媒体查询不加权重，
   同权重下"后出现的赢"，所以只写一遍 .ann-cols(0-1-0) 在本宽度段会被它反过来变成两列等宽（比现在还宽）。
   右栏固定 340px：原来 5fr 在 1440 下是 510px，340 ≈ 其 2/3（即"缩小三分之一"）；
   左栏 minmax(0,1fr) 吃掉剩余宽度 —— 用 minmax(0,…) 而不是 1fr，避免内容把栅格撑破。 */
.ann-cols.ann-cols {
    margin-top: 0;                          /* .dash-grid 自带 margin-top:16px，这里不需要 */
    grid-template-columns: minmax(0, 1fr) 300px;
}
.ann-hot-list { display: flex; flex-direction: column; }
.ann-hot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #f2f4f7;
    text-decoration: none;
}
.ann-hot-item:last-child { border-bottom: 0; }
.ann-hot-item:hover { background: #fafbfc; }
/* 缩略图：3:4（与个人中心那张图同比例，不裁切）。
   宽度 76px —— 栏宽收到 340 后文字区仍剩 ~216px，够放「行程」+「名字/价格」两行；
   再把宽度定死，行高就不会因为某张图比例不同而跳动。 */
.ann-hot-thumb {
    flex: 0 0 auto;
    width: 76px;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef2f7 0%, #dde6f0 100%);
    color: #b9c6d6;
    font-size: 20px;
}
.ann-hot-thumb img { width: 100%; height: auto; display: block; }
/* min-width:0 是必须的：不然长名字会把右侧价格顶出去（flex 省略号的经典坑）。
   gap:2px → 5px：缩略图比较高（101px），三行文字挨太紧会显得堆在一起，拉开一点行距更好读。 */
.ann-hot-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* 「起」离价格数字略远一点。
   ★ 这里必须带 .ann-hot-txt 前缀：.sp-card-price small 是卡片/轮播共用的类，
     直接改它会把个人中心那个热门列车轮播一起改了（那边现在是紧贴的）。
     只对公告页这个块生效；想两端统一的话把选择器缩短即可。 */
.ann-hot-txt .sp-card-price small { margin-left: 3px; }

/* ================= 公告详情 ================= */
.ann-detail {
    background: #fff;
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 34px 38px 30px;
}
.ann-d-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 12px; line-height: 1.4; }
.ann-d-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--c-text-3);
    font-size: .85rem;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef1f5;
    margin-bottom: 22px;
}
.ann-d-meta i { color: var(--c-primary); margin-right: 5px; }
.ann-d-body { color: #3a4a5a; font-size: 1rem; line-height: 1.9; word-break: break-word; }
/* 底部操作行：手机端【左「返回公告列表」/ 右「转发该公告」】；PC 端两个都靠右。
   （原来这里只有一个返回按钮，class 叫 .ann-d-back，已一并改名为 .ann-d-foot）
   窄屏也放得下：两个按钮合计约 250px，390px 屏可用 ~350px，所以不换行；
   留 flex-wrap 兜底，万一以后按钮文字变长也不会撑破。 */
.ann-d-foot {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
@media (min-width: 992px) {
    .ann-d-foot { justify-content: flex-end; }
}

@media (max-width: 991.98px) {
    /* 公告页：手机端恢复单栏，并隐藏右侧热门列车（需求是「PC 版」才有）
       —— .dash-grid 是个人中心那套 PC 网格，它自己不带手机端收拢规则，所以这里必须补。

       ⚠️⚠️ 必须写两遍 .ann-cols（0-2-0）：.dash-grid 在文件【后面】（约 1933 行）还有一条
       display:grid，同权重时"后出现的赢"。只写一遍 .ann-cols(0-1-0) 会被它盖掉，
       手机端就变成「0px + 300px」的网格 → 公告卡片被压成 36px 宽、日期和「查看」竖着排
       （这个坑真踩过，截图里两行字竖成一条）。上面那条 grid-template-columns 也是同样原因写了两遍。 */
    .ann-cols.ann-cols { display: block; grid-template-columns: none; }
    .ann-hot { display: none; }

    .ann-item { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
    .ann-side { text-align: left; display: flex; gap: 14px; align-items: center; }
    /* 也要带 .ann-side 前缀：否则权重(0-1-0)低于上面那条 .ann-side .ann-date(0-2-0)，
       这里的 margin-bottom:0 会失效 → 日期带 6px 下外边距，在 flex 里又被居中，反而往上偏 3px */
    .ann-side .ann-date { margin-bottom: 0; }
    .ann-detail { padding: 22px 20px 24px; }
    .ann-d-title { font-size: 1.25rem; }
    .ann-d-body { font-size: .95rem; line-height: 1.85; }
}

/* ================= 收藏 / 转发（前台）=================
   按钮组 .act-group 出现在两处，按需求位置不同：
     · 卡片里  .act-group.in-card   → 只在手机端显示（手机端的入口在卡片价格后面）
     · 产品页  .room-title 里的      → 两端都显示（PC 按需求就是这一行；手机端也留着 ——
        转发出去的链接大多在手机上打开，详情页得能再转发一次）
   收藏用 localStorage，不需要登录；行为见 assets/js/portal-share.js */
.act-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.act-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e8ef;
    background: #fff;
    border-radius: 50%;
    color: #8f9aa8;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s, transform .18s;
    -webkit-tap-highlight-color: transparent;
}
.act-btn:hover { color: var(--c-primary); border-color: var(--c-primary); }
.act-btn:active { transform: scale(.9); }
.act-btn.is-on { color: #e0475b; border-color: #f2c2c9; background: #fff5f6; }
.act-btn.is-pop { animation: actPop .34s ease; }
@keyframes actPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .act-btn.is-pop { animation: none; }
}

/* 卡片里的图标：默认隐藏（PC 侧按需求放在产品页「列车价格」那一行），手机端才显示 */
.act-group.in-card { display: none; }

@media (max-width: 991.98px) {
    /* 卡片里的收藏 / 转发：浮在主图右下角（2026-11-08 从文字行搬上来）。
       放图上是为了给下面「列车名 + 价格」腾出整行宽度 —— 原来挤在一起导致
       名字被截到 7 个字、价格还会被迫换行。
       只在 ≤991.98px 出现（PC 侧入口在详情页「列车价格」行）。 */
    .act-group.in-card {
        display: inline-flex;
        align-items: center;       /* 两个按钮垂直居中对齐 */
        position: absolute;
        right: 10px;
        /* 与左边「出发地 → 目的地 · 天数」那行文字垂直居中对齐：
           那行文字中心≈距底 16px，按钮 22px 高 → bottom = 16 - 11 = 5px
           2026-11-08 按实测微调：向下 3px 后又上移 2px，最终 4px */
        bottom: 4px;
        z-index: 3;
        gap: 12px;                 /* 两个按钮之间拉开一些（2026-11-08） */
    }
    /* 透明化：只留白色图标 + 一点投影，不再有白底和边框，压在图上更轻 */
    .act-group.in-card .act-btn {
        width: 22px;
        height: 22px;
        padding: 0;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-size: .84rem;
        border: 0;
        background: transparent;
        color: #fff;
        box-shadow: none;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    }
    /* 图标按块级渲染并锁死行高：Bootstrap Icons 的 ::before 自带 vertical-align:-.125em，
       两个字形不同（心形 / 方框箭头）时基线会错开，看起来一高一低 */
    .act-group.in-card .act-btn i {
        display: block;
        line-height: 1;
        font-size: .84rem;
    }
    /* 方框箭头这个字形在字体里比心形低一点，单独上移 2px 才能跟收藏图标齐平 */
    .act-group.in-card .act-btn .bi-box-arrow-up-right {
        transform: translateY(-2px);
    }
    .act-group.in-card .act-btn:hover,
    .act-group.in-card .act-btn:active { color: #fff; transform: scale(.92); }
    .act-group.in-card .act-btn.is-on {
        color: #ff7b8c;
        background: transparent;
        border: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    }
    /* 等级角标（豪华型 / 舒适型）：手机端改半透明黑 + 毛玻璃，
       压在图上更轻，不再是一块实色（2026-11-08） */
    .train-card .card-tag {
        background: rgba(0, 0, 0, .42);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* 图上左下角那行「出发地 → 目的地 · 天数」：
       右边给收藏/转发按钮让位；同时底部内边距 13px → 9px，让文字跟右下角按钮
       处在同一水平线（原来比按钮高一截，看着像被顶上去了） */
    .train-card .card-overlay,
    .holiday-item .card-overlay { padding-right: 74px; padding-bottom: 6px; }

    /* 文字行：名字占满剩余宽度（单行省略），价格 +「详情」靠右、永不换行 */
    .page-home .train-card .card-title,
    .page-home .holiday-item .holiday-name,
    .search-grid .train-card .card-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }
    .page-home .train-card .card-price,
    .page-home .holiday-item .holiday-foot,
    .search-grid .train-card .card-price {
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
    }
    .page-home .train-card .card-price .price,
    .page-home .holiday-item .holiday-foot .price,
    .search-grid .train-card .card-price .price { white-space: nowrap; }
    /* 「详情」按钮收小到与旁边价格数字同高（2026-11-08）：
       原来 padding 6px 12px + .9rem 字，比价格数字高出一截 */
    .page-home .train-card .card-price .btn-card,
    .page-home .holiday-item .holiday-foot .btn-card,
    .search-grid .train-card .card-price .btn-card {
        margin-left: 0;
        padding: 3px 10px;
        font-size: .74rem;
        line-height: 1.35;
    }
}

/* 产品页「列车价格」标题行：按钮组推到最右侧（.room-title 本身已是 flex 行）—— 这是 PC 的入口 */
.room-title .act-group { margin-left: auto; }
@media (max-width: 991.98px) {
    /* 手机端的收藏/转发改在吸底条上（客服左侧），这一行就不再显示，免得同一页重复出现两处 */
    .room-title .act-group { display: none; }
}

/* ---------- 手机端吸底条：收藏 / 转发（放在客服左侧，顺序由 HTML 决定）---------- */
.pd-bottom-bar .act-group { gap: 5px; }
.pd-bottom-bar .act-btn {
    width: 26px;
    height: 26px;
    font-size: .78rem;
    border: 0;
    background: #f8f6f1;          /* 与右侧客服按钮 .pd-bb-kf 同一底色，视觉成组 */
    color: var(--c-primary);
}
.pd-bottom-bar .act-btn.is-on { background: #ffeef1; color: #e0475b; }

/* ---------- 转发面板 ---------- */
.share-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1090;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
}
.share-overlay.show { display: flex; }
.share-sheet {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
    animation: shareUp .22s ease;
}
@keyframes shareUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.share-title { font-size: 1rem; font-weight: 700; color: #1a2332; }
.share-close {
    border: 0;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #98a2b3;
    cursor: pointer;
    padding: 0 4px;
}
.share-name {
    margin: 0 0 14px;
    font-size: .88rem;
    color: #667085;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-copy {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--c-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}
.share-copy:active { filter: brightness(.94); }
.share-copy i { font-size: 1.1rem; }
.share-tip { margin: 10px 2px 14px; font-size: .78rem; color: #98a2b3; line-height: 1.5; }
.share-cancel {
    width: 100%;
    padding: 11px 16px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #fff;
    color: #667085;
    font-size: .92rem;
    cursor: pointer;
}
/* PC：面板改成居中弹窗更自然 */
@media (min-width: 992px) {
    .share-overlay { align-items: center; }
    .share-sheet {
        border-radius: 16px;
        max-width: 380px;
        padding: 20px;
        animation: sharePop .18s ease;
    }
    @keyframes sharePop { from { transform: scale(.96); opacity: .5; } to { transform: none; opacity: 1; } }
}

/* ---------- 微信内引导层（箭头指右上角）---------- */
.share-guide {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1100;
    display: none;
    background: rgba(0, 0, 0, .72);
    color: #fff;
}
.share-guide.show { display: block; }
.sg-arrow {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 2rem;
    color: #fff;
    animation: sgPoint 1.4s ease-in-out infinite;
}
@keyframes sgPoint {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(4px, -4px); }
}
.sg-box {
    position: absolute;
    top: 84px;
    right: 16px;
    max-width: 280px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: .9rem;
    line-height: 1.9;
}
.sg-step b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
}
.sg-dots { font-weight: 700; letter-spacing: 1px; }
.sg-hint { margin-top: 8px; font-size: .74rem; color: rgba(255, 255, 255, .6); }

/* ---------- 轻提示 ---------- */
.pd-toast {
    position: fixed;
    left: 50%;
    bottom: 88px;
    transform: translate(-50%, 12px);
    z-index: 1200;
    background: rgba(26, 35, 50, .92);
    color: #fff;
    font-size: .85rem;
    padding: 9px 16px;
    border-radius: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    max-width: 80vw;
    text-align: center;
}
.pd-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= 头部：我的 / 个人中心 下拉 =================
   手机端：导航行里「公告」右侧的「我的 ▾」（点击展开）
   PC 端：右侧「个人中心」按钮（悬浮展开）
   两处内容一样：我的订单 / 我的收藏 / 退出（未登录时是 登录 / 注册）。 */
.nav-acct { position: relative; display: none; }   /* 默认隐藏 = PC 隐藏，手机端媒体查询里打开 */
/* 三横线按钮：原来是「我的 ▾」文字，改成图标后尺寸/颜色按图标调 */
.nav-acct-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    color: #2d3e50;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 7px;
    transition: color .18s, background .18s;
    -webkit-tap-highlight-color: transparent;
}
.nav-acct-toggle i { font-size: 1.3rem; line-height: 1; color: inherit; }
.nav-acct-toggle:hover { color: var(--c-primary); background: rgba(201, 169, 89, .1); }
.nav-acct.open .nav-acct-toggle { color: var(--c-primary); background: rgba(201, 169, 89, .12); }
.nav-acct-drop,
.acct-drop {
    position: absolute;
    top: calc(100% + 10px);
    min-width: 136px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(26, 35, 50, .16);
    padding: 6px;
    display: none;
    z-index: 1045;
}
.nav-acct-drop { left: 0; }
.nav-acct-drop a,
.acct-drop a {
    display: block;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: .9rem;
    color: #2d3e50;
    text-decoration: none;
    white-space: nowrap;
}
.nav-acct-drop a:hover,
.acct-drop a:hover { background: #f7f8fa; color: var(--c-primary); }
.nav-acct-drop a.is-quit,
.acct-drop a.is-quit { color: #c0392b; }
.nav-acct.open .nav-acct-drop { display: block; }

/* PC：个人中心按钮 + 悬浮面板 */
.acct-menu { position: relative; }
.acct-trigger { display: inline-flex; align-items: center; gap: 5px; }
.acct-trigger i { font-size: .68rem; transition: transform .2s; }
.acct-menu:hover .acct-trigger i,
.acct-menu:focus-within .acct-trigger i { transform: rotate(180deg); }
.acct-drop { right: 0; }
.acct-menu:hover .acct-drop,
.acct-menu:focus-within .acct-drop { display: block; }
/* 按钮与面板之间有 10px 空隙，鼠标横穿时会掉出 :hover 导致面板闪烁 —— 用透明桥接补上 */
.acct-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

@media (max-width: 991.98px) {
    .nav-acct { display: inline-block; }
    /* 手机端头部右侧组里不放这个下拉（导航行里已经有了），否则会留个空占位 */
    .header-actions .acct-menu { display: none; }
    /* 三横线与「公告」上下对齐：
       .main-nav 原本是 flex 默认的 align-items:stretch，而图标按钮(28px)比文字行(约 21px)高，
       行高被撑到 28px 后，文字贴在行顶、图标却在 28px 里居中 —— 于是图标看起来比文字偏上。
       让整行居中对齐，文字与图标中线一致。 */
    .main-nav { align-items: center; }
    .nav-acct { align-self: center; }
}

/* ================= 个人中心：左侧导航 + 右侧内容 ================= */
.acct-wrap { display: flex; align-items: flex-start; gap: 22px; }
.acct-side {
    flex: 0 0 168px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 12px;
    box-shadow: 0 6px 20px -8px rgba(26, 35, 50, .18);
    position: sticky;
    top: 16px;
}
.acct-side-title { font-size: .78rem; color: #98a2b3; padding: 2px 10px 10px; letter-spacing: .5px; }
.acct-side nav { display: flex; flex-direction: column; gap: 2px; }
.acct-side nav a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: #2d3e50;
    font-size: .92rem;
    text-decoration: none;
}
.acct-side nav a:hover { background: #f7f8fa; color: var(--c-primary); }
.acct-side nav a.active { background: rgba(201, 169, 89, .13); color: var(--c-primary-dark); font-weight: 600; }
.acct-side nav a.is-quit { color: #c0392b; }
/* 右栏默认【自适应剩余宽度】（订单详情那种宽内容要占满）；
   表单类页面（个人中心）加 .is-narrow 限制一下，免得输入框横跨整个屏幕 */
.acct-main { flex: 1 1 auto; min-width: 0; }
.acct-main.is-narrow { max-width: 720px; }
.acct-tip { font-size: .84rem; color: #8f9aa8; margin: 0 0 14px; line-height: 1.7; }
.acct-tip b { color: #667085; }

@media (max-width: 991.98px) {
    /* 手机端不用侧栏（屏幕上太占地方）：改成「个人中心枢纽页 + 子页顶部返回箭头」 */
    .acct-wrap { display: block; }
    .acct-side { display: none; }
    .acct-main { max-width: none; }
    .hub { display: block; }
    .acct-main .card-body { padding: 16px; }
}

/* ================= 我的收藏 列表 ================= */
.fav-list { display: flex; flex-direction: column; gap: 12px; }
.fav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 6px 20px -10px rgba(26, 35, 50, .18);
}
.fav-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 9px;
    overflow: hidden;
    background: #f2f4f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9c6d6;
    font-size: 1.6rem;
    text-decoration: none;
}
.fav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-info { flex: 1 1 auto; min-width: 0; }
.fav-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #1a2332;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fav-name:hover { color: var(--c-primary); }
.fav-meta { margin-top: 6px; font-size: .9rem; font-weight: 700; color: var(--c-primary-dark); }
.fav-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.fav-go {
    padding: 6px 14px;
    border: 1px solid var(--c-primary);
    border-radius: 40px;
    color: var(--c-primary);
    font-size: .84rem;
    text-decoration: none;
    white-space: nowrap;
}
.fav-go:hover { background: var(--c-primary); color: #fff; }
.fav-del {
    padding: 6px 12px;
    border: 1px solid #e3e8ef;
    border-radius: 40px;
    background: #fff;
    color: #8f9aa8;
    font-size: .84rem;
    cursor: pointer;
    white-space: nowrap;
}
.fav-del:hover { border-color: #f0c9cf; color: #c0392b; }
.fav-empty { padding: 40px 16px; text-align: center; color: #98a2b3; font-size: .92rem; line-height: 2; }
.fav-empty a { color: var(--c-primary); text-decoration: none; }
@media (max-width: 575.98px) {
    .fav-item { flex-wrap: wrap; }
    .fav-thumb { width: 60px; height: 60px; }
    .fav-acts { width: 100%; justify-content: flex-end; }
}

/* ================= 个人中心：手机端「我的」枢纽页 =================
   PC 端用左侧导航；手机端屏窄、侧栏占地方，所以改成一个「我的」入口页（只在 ≤991.98px 出现）。 */
.hub { display: none; }
.hub-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a2332 0%, #2d3e50 100%);
    color: #fff;
}
.hub-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.hub-name { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.hub-phone { font-size: .8rem; color: rgba(255, 255, 255, .68); margin-top: 3px; }
/* 用户卡里的信息块（让右侧的积分能靠右） */
.hub-user-info { flex: 1 1 auto; min-width: 0; }
/* 用户名右侧的积分入口：点进「我的积分」记录页 */
.hub-points {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .78rem;
    text-decoration: none;
    white-space: nowrap;
}
.hub-points b { font-size: .98rem; font-weight: 700; color: #f0d99b; }
.hub-points i { font-size: .68rem; opacity: .75; }
.hub-points:active { background: rgba(255, 255, 255, .22); }
.hub-rows {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px -10px rgba(26, 35, 50, .18);
}
.hub-rows a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-bottom: 1px solid #f2f4f7;
    font-size: .95rem;
    color: #1a2332;
    text-decoration: none;
}
.hub-rows a:last-child { border-bottom: 0; }
.hub-rows a:active { background: #fafbfc; }
.hub-rows a > i:first-child { width: 20px; text-align: center; font-size: 1.05rem; color: var(--c-primary); }
.hub-rows a > span { flex: 1 1 auto; }
.hub-rows a em { font-style: normal; font-size: .82rem; color: #8f9aa8; }
.hub-rows a > i:last-child { font-size: .78rem; color: #c4ccd6; }
.hub-rows a.is-quit,
.hub-rows a.is-quit > i:first-child { color: #c0392b; }

/* 说明：原来这里有一套「返回个人中心」胶囊按钮（.acct-topbar / .acct-back）。
   现在返回入口上移成了页面顶部那行「‹ 页面名」（手机端）/ 面包屑（PC 端），
   见 portal.css 的 .p-crumb.has-back —— 所以那套样式整段删掉了，别留死代码。 */

/* ================= 我的订单 卡片（统一到站内视觉：白卡 + 金主色 + 状态胶囊）================= */
.ord-list { display: flex; flex-direction: column; gap: 12px; }
.ord-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 20px -10px rgba(26, 35, 50, .18);
}
.ord-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ord-name { flex: 1 1 auto; min-width: 0; font-size: 1.02rem; font-weight: 700; color: #1a2332; line-height: 1.4; }
.ord-chip { flex: 0 0 auto; padding: 3px 10px; border-radius: 20px; font-size: .74rem; white-space: nowrap; }
.ord-chip.is-ok     { background: #eaf7ef; color: #1e874b; }
/* 「席位已确认，待出行」用实心绿胶囊（2026-10-21 需求）：
   这是唯一一个"什么事都不用做、等着出发"的状态，实心绿比浅绿更让人安心。
   单独一个 class，别动 is-ok —— 积分页的「已获得」也在用 is-ok。 */
.ord-chip.is-trip   { background: #1e874b; color: #fff; }
/* 窄屏保护：文案带上「席位已确认，」后变长，和订单号同一行容易挤（2026-10-21） */
@media (max-width: 400px) {
    .ord-code { font-size: .74rem; }
    .ord-chip { font-size: .7rem; padding: 3px 8px; }
}
.ord-chip.is-warn   { background: #fff5e6; color: #b7791f; }
.ord-chip.is-cancel { background: #f4f5f7; color: #8892a0; }
.ord-chip.is-info   { background: #eef4ff; color: #2b6cb0; }
.ord-chip.is-grey   { background: #f4f5f7; color: #8892a0; }
/* 尾款已过截止日：只把胶囊转红，文案仍是「待支付尾款」 */
.ord-chip.is-due    { background: #fdecec; color: #c0392b; }


/* 订单号 + 状态胶囊同一行：订单号在左，胶囊靠右（2026-10-19 需求） */
.ord-code {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 5px; font-size: .78rem; color: #98a2b3;
}
/* 状态下面那行灰字（2026-10-19 需求）：退款进度，右对齐落在胶囊正下方
   （2026-10-21：尾款截止日已挪到金额区「待付尾款」同一行，见 .ord-due-note） */
.ord-note {
    margin: 6px 0 10px;
    text-align: right;
    font-size: .76rem; color: #98a2b3; line-height: 1.3;
}
.ord-note i { margin-right: 3px; font-size: .8rem; color: #b6bec9; }
.ord-note.is-over { color: #c0392b; }
.ord-note.is-over i { color: #e08a80; }
/* 距发车（2026-10-19 需求）：和列车名同一行、靠右，浅灰小字 + 小沙漏，不加底色。
   列车名可折行，所以这里固定不收缩，并用 margin-top 跟首行文字对齐。 */
.ord-cd {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    margin-top: 3px;
    color: #9aa4b1; font-size: .76rem; line-height: 1.2; white-space: nowrap;
}
.ord-cd i { font-size: .8rem; color: #c2c9d2; }
/* 3 天内发车：只把文字调暖一点提醒，仍然不加底色 */
.ord-cd.is-soon { color: #b45309; }
.ord-cd.is-soon i { color: #d9a441; }
.ord-cd.is-past { color: #b0b8c2; }
/* 行程信息两行（2026-10-19 需求）：第一行 出发日期 + 共X天，第二行 房型 + 人数 */
.ord-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
    padding: 10px 0;
    border-top: 1px dashed #eef1f5;
    /* 下边框交给 .ord-money 画（2026-10-21）：两条虚线只隔 12px 会显得啰嗦，
       统一由金额区顶部那条 #EEE 虚线承担分隔 */
    font-size: .82rem;
    color: #98a2b3;
}
.ord-meta-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ord-meta span { display: inline-flex; align-items: center; gap: 4px; }
/* 图标比文字再小一号、统一灰色（2026-10-21 需求：原来 .8rem 偏大，也不该有第二种颜色） */
.ord-meta i { font-size: .72rem; color: #999999; }
/* 线路是这块的主信息：只靠字重和稍深一档的灰分层，不另外上色 */
.ord-meta .ord-route { font-weight: 500; color: #667085; }
/* 金额区（2026-10-19 需求；2026-10-21 去掉灰底）：
   不再用浅灰圆角色块，金额直接写在白卡上，只用一条 1px dashed #EEE 和上方的房型/日期隔开 ——
   少一层底色，整张卡立刻透气。总额深色、定金支付红，右边一枚状态标签。 */
.ord-money {
    margin: 12px 0 0;
    padding: 10px 0 0;
    background: none;
    border-radius: 0;
    border-top: 1px dashed #eeeeee;
}
/* 金额区与底部按钮区之间固定留一段呼吸位（金额区自身不再带下边距） */
.ord-money + .ord-foot { margin-top: 12px; }
.ord-money-line { display: flex; align-items: baseline; gap: 8px; }
.ord-money-line + .ord-money-line { margin-top: 6px; }
/* 还差的钱（2026-10-21 需求）：只留一个需要客户行动的金额，
   字号与「订单总额」同一档（.82rem / 600），靠红色区分，不靠放大抢视线。 */
/* ⚠ 这一行的「标签→金额」间距必须跟 .ord-money-line 的 8px 一模一样，
   标签也要跟 .ord-money-k 一样定宽 4.6em —— 否则「订单总额」和「待付尾款」
   两行的金额起点会差几像素，看着就是没对齐（2026-10-21 反馈）。 */
.ord-due { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ord-due-k { min-width: 4.6em; font-size: .82rem; color: #8f9aa8; white-space: nowrap; }
.ord-due-v {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-pay-red);
}
/* 尾款截止日（2026-10-21 需求）：紧跟在待付金额后面，无图标，字号比金额小一号；
   逾期整句转红，与原来的 .ord-note.is-over 同一套语义。 */
.ord-due-note {
    font-size: .74rem; color: #98a2b3; line-height: 1.3;
    white-space: nowrap;
}
.ord-due-note.is-over { color: #c0392b; }
/* 「支付定金 / 支付尾款」小按钮：贴在欠款金额这一行最右侧，
   比常规按钮矮一档，不抢金额本身的视线 */
.od-due-pay { margin-left: auto; }
.ord-btn.is-sm { padding: 3px 12px; font-size: .76rem; border-radius: 6px; }
/* 标签定宽：让两行的金额从同一个位置开始（2026-10-19 需求：两个数字上下对齐） */
.ord-money-k { min-width: 4.6em; font-size: .82rem; color: #8f9aa8; white-space: nowrap; }
.ord-money-k em { margin-left: 4px; font-style: normal; font-size: .74rem; color: #b6bec9; }
/* 金额数字与左侧汉字同字号（2026-10-19 需求），只保留颜色 / 字重区分：总额深色、定金支付红 */
.ord-money-v { font-size: .82rem; font-weight: 600; color: #1a2332; line-height: 1.3; }
.ord-money-sub { font-size: .74rem; color: #98a2b3; }
/* 已付款的唯一表达（2026-10-19 需求）：绿色对勾 + 文字，不加底框、不做胶囊 ——
   状态只有一个（右上角胶囊），这里只是"钱收到了"的事实。
   2026-10-21：改成很浅的绿，退到背景里，不跟右侧红色待付金额抢视线。 */
.ord-paid {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto; padding: 0;
    color: #7cc6a0; font-size: .76rem; white-space: nowrap;
}
.ord-paid i { font-size: .82rem; color: #7cc6a0; }
/* 未付定金的提醒条：不抢眼，但一定看得见 —— 移动端这是转化最关键的一句 */
.ord-pay-tip {
    display: flex; align-items: center; gap: 5px;
    margin: 0 0 12px; padding: 7px 10px; border-radius: 8px;
    background: #fff7ed; color: #b45309; font-size: .8rem;
}
.ord-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.ord-price { font-size: 1.15rem; font-weight: 700; color: var(--c-primary-dark); line-height: 1.2; }
.ord-price small { display: block; margin-top: 2px; font-size: .74rem; font-weight: 400; color: #8f9aa8; }
.ord-acts { display: flex; align-items: center; gap: 8px; }
.ord-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    /* 次要按钮（查看详情）走中性灰描边：金色只留给主操作（去看看线路 / 支付） */
    border: 1px solid #e6e9ee;
    border-radius: 40px;
    background: #fff;
    color: #5b6472;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: .2s;
}
.ord-btn:hover { background: #f7f8fa; border-color: #d9dee5; color: #1a2332; }
.ord-btn.is-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ord-btn.is-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }
/* 支付按钮用支付红（2026-10-19 需求）：跟下单页「立即支付定金」同一套强调色，
   金色留给「去看看线路」这类普通主操作 */
.ord-btn.is-pay { background: var(--c-pay-red); border-color: var(--c-pay-red); color: #fff; }
.ord-btn.is-pay:hover { background: var(--c-pay-red); border-color: var(--c-pay-red); color: #fff; filter: brightness(.92); }
.ord-empty { padding: 50px 16px; text-align: center; color: #98a2b3; }
.ord-empty > i { display: block; margin-bottom: 10px; font-size: 2.2rem; color: #c4ccd6; }
.ord-empty p { margin: 0 0 16px; font-size: .92rem; }

/* 我的订单 → 底部「联系我的客服」（2026-10-19）：
   代替原来右下角的浮动客服按钮，整宽白底描边 + 金色耳机图标，
   位置在订单列表之后，手机上一眼能看到、也不挡订单卡片。 */
.ord-kefu { margin: 16px 0 4px; }
.ord-kefu-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 46px; padding: 0;
    background: #fff; border: 1px solid #e6e9ee; border-radius: 12px;
    color: #5b6472; font-size: .95rem; font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}
.ord-kefu-btn i { color: var(--c-primary); font-size: 17px; }
.ord-kefu-btn:active { background: #f7f8fa; }
/* 底部并排两个按钮（2026-10-22 需求）：左「返回我的订单」、右「联系我的客服」；
   订单详情页 / 旅客信息页共用。两个等宽，沿用上面的白底描边样式。 */
.od-acts { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.od-acts > * { flex: 1 1 0; width: auto; text-decoration: none; }

/* ================= 订单详情 .od-*（2026-10-21 改版）=================
   改版前：上半部分是 5 张居中的 Bootstrap 卡片（badge fs-5 / text-primary / btn-warning），
   跟「我的订单」那张 .ord-card 完全是两种语言，字号也不成体系。
   改版后：一张主卡 —— 产品名 + 状态胶囊（.ord-chip）+ 虚线分隔的信息行 + 金额区（.ord-money/.ord-due）
   + 一个行动按钮（.ord-btn），全部直接复用「我的订单」已有的类，颜色和字号自动一致。
   这里只补「图标 + 标签 + 值」这种信息行，和保险信息的行距。 */
.od-body { padding: 16px 18px; }
.od-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* 标题（2026-10-22 需求）：与页面大标题「订单详情」同字号 ——
   那一行是 <h1 class="p-crumb-title">，字号来自 Bootstrap 的 h1（≥1200px 2.5rem，
   1200 以下 calc(1.375rem + 1.5vw)），手机端被 portal.css 压到 1.02rem。
   这里一档不差地跟住，两边才会在任意宽度下都一样大。
   前面的小火车图标保留，颜色为正文黑（原来是品牌色，标题上一抹彩跟灰阶正文不搭）。 */
.od-title { margin: 0; font-size: calc(1.375rem + 1.5vw); font-weight: 800; color: #1a2332; line-height: 1.35; letter-spacing: -.01em; }
@media (min-width: 1200px) { .od-title { font-size: 2.5rem; } }
@media (max-width: 991.98px) { .od-title { font-size: 1.02rem; } }
.od-title i { margin-right: 8px; font-size: .82em; color: #1a2332; vertical-align: 1px; }
/* 订单号 / 下单时间：缩到最小、压到浅灰，离标题留一段呼吸（2026-10-22：4px → 10px，
   标题放大后 4px 会跟产品名黏在一起） */
.od-sub { margin-top: 10px; font-size: .72rem; color: #a8b1bc; }
.od-sub .od-dot { margin: 0 5px; color: #d5dbe3; }
/* 信息行：单列（2026-10-22 合并成 3 行后，两列会把「日期区间 + 天数」这种长值挤成两行）；
   顶部虚线跟金额区的那条同色，全页只有两条分隔线 */
.od-rows {
    display: grid; grid-template-columns: 1fr;
    gap: 7px; margin-top: 14px; padding-top: 14px; max-width: 780px;
    border-top: 1px dashed #eef1f5;
}
.od-rows.is-flat { margin-top: 0; padding-top: 0; border-top: 0; gap: 6px; }
.od-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: .84rem; line-height: 1.5; }
.od-row.is-wide { grid-column: 1 / -1; }
/* 标签（行程 / 人数 / 席位）：定宽 + 与金额区同一套字号/宽度（4.6em @ .82rem = 60.35px）
   —— 这样标签和右侧内容之间空得更开，值又与下方「订单总额」的数字从同一 x 起排
   （金额区 .ord-money-k 也是 min-width:4.6em、gap:8px，两边字号一致才能真的对齐；
   改这里记得同步 .od-row 的 gap 和 .ord-money-line 的 gap）。 */
.od-k { flex: 0 0 auto; min-width: 4.6em; font-size: .82rem; color: #98a2b3; }
/* 信息行的值统一灰色（2026-10-21 需求）：这些是"事实陈述"，深色会把标题和金额压下去。
   2026-10-22：辅助图标全删、席位不上色，整块只留灰阶文字。 */
.od-v { min-width: 0; color: #667085; font-weight: 400; }
/* 席位「已确认」后面那个浅绿对号（2026-10-22 追加）：只在这一个状态下出现，
   颜色用站内「已付清」同款浅绿 #7cc6a0 —— 面积小，不破坏整块的灰阶。 */
.od-v-check { margin-left: 4px; font-size: .8em; color: #7cc6a0; vertical-align: 1px; }
.od-v.is-ok,
.od-v.is-warn { color: #667085; font-weight: 400; }
.od-desc { margin: 0 0 12px; font-size: .86rem; color: #667085; line-height: 1.8; }
.od-muted { font-size: .84rem; color: #98a2b3; }
/* ---------- 行程文件（2026-10-23，详情页）----------
   四行：列车介绍 / 详细行程单 / 席位确认书 / 服务合同。
   无边框、行间一条极细分割线，右侧「查看」用品牌金，和旅客行的观感一致。 */
.od-file-list { display: flex; flex-direction: column; }
.od-file { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.od-file:first-child { padding-top: 0; }
.od-file:last-child { padding-bottom: 0; }
.od-file + .od-file { border-top: 1px solid #f5f6f7; }
/* 图标不垫灰色圆角块（2026-10-23）：整页留白很多，再加四个灰块会显得碎，
   只留单色线性图标，固定 20px 宽让四行的文字左边缘对齐 */
.od-file-ico {
    flex: 0 0 auto; width: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #98a2b3; font-size: 1.02rem; line-height: 1;
}
.od-file-main { flex: 1 1 auto; min-width: 0; }
.od-file-name { font-size: .86rem; color: #1a2332; }
/* 状态与「查看」统一靠右（2026-10-23）：状态灰字在前，查看金色在后 */
.od-file-side {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 10px;
}
.od-file-state { font-size: .76rem; color: #98a2b3; white-space: nowrap; }
.od-file-act {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
    font-size: .78rem; color: var(--c-primary); text-decoration: none; white-space: nowrap;
}
.od-file-act:hover { color: var(--c-primary-dark); text-decoration: underline; }
.od-file-act i { font-size: .68rem; color: #c4ccd6; }
/* 「已付」在列表卡里是贴右边界的（margin-left:auto），详情页卡片宽得多，
   贴右边界会跟「订单总额」隔开一大段，所以这里改成紧跟金额后面 */
.od-body .ord-paid { margin-left: 6px; }
.od-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
/* 保险：多份之间用虚线分开，不用一层层嵌套卡片 */
.od-ins + .od-ins { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #f2f4f7; }
.od-ins-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.od-ins-no { font-size: .76rem; color: #98a2b3; }

/* ---------- 付款记录表（2026-10-23，详情页）----------
   表头小字不加粗、内容缩一号并强制单行；状态只画对号 / 错号，点击弹文字说明 */
.od-pay-table thead th {
    font-size: .7rem; font-weight: 400; color: #98a2b3;
    padding: 6px 8px; border-bottom-color: #f2f4f7; white-space: nowrap;
}
.od-pay-table tbody td {
    font-size: .76rem; color: #5b6472;
    padding: 8px; white-space: nowrap;
}
.od-pay-table tbody tr:last-child td { border-bottom: 0; }
/* 状态符号：待确认灰、已确认 / 已完成绿、失败红 */
.od-pay-mark {
    border: 0; background: none; padding: 0 2px;
    line-height: 1; font-size: .92rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.od-pay-mark i { font-weight: 700; }
.od-pay-mark.is-wait i { color: #c9ced6; }
.od-pay-mark.is-ok   i { color: #12b76a; }
.od-pay-mark.is-bad  i { color: var(--c-pay-red); }
/* 点击后弹出的说明：fixed 定位，不会被表格横向滚动区裁掉 */
.od-pay-tip {
    position: fixed; z-index: 80;
    transform: translate(-50%, -100%);
    padding: 5px 9px; border-radius: 6px;
    background: #1f2937; color: #fff;
    font-size: .74rem; line-height: 1.4; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .18);
    pointer-events: none;
}
/* 手机端付款记录卡片（<768px，表格用 d-none 藏起来）：金额是主角，日期/类别/方式缩成一行辅助信息 */
/* ⚠ 这一块原本直接挂在 .card 下、没有 .card-body，所以必须自带左右内边距，
   否则金额会贴着卡片边缘（2026-10-23 反馈） */
.od-pay-wrap { padding: 6px 18px 14px; }
.od-pay-list { display: flex; flex-direction: column; padding: 8px 18px 16px; }
/* 左右两列、各两行（2026-10-23）：左列左对齐、右列右对齐，
   两列行高对齐（第一行 20px、第二行 18px，间距 4px），金额右边缘连成一条竖线 */
.od-pay-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 0;
}
.od-pay-item:first-child { padding-top: 2px; }
.od-pay-item:last-child { padding-bottom: 0; }
.od-pay-item + .od-pay-item { border-top: 1px solid #f5f6f7; }
.od-pay-left { min-width: 0; }
.od-pay-right {
    flex: 0 0 auto; margin-left: auto;
    display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
/* 两列逐行对齐：第一行都是 20px 行高，第二行都是 18px 行高，中间同为 4px */
.od-pay-cate, .od-pay-amt { line-height: 20px; }
.od-pay-sub, .od-pay-state { line-height: 18px; margin-top: 4px; }
.od-pay-cate { font-size: .875rem; font-weight: 400; color: #1a2332; }
.od-pay-amt {
    font-size: .8125rem; font-weight: 400; color: #1a2332;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.od-pay-state {
    /* 靠右对齐（不再用固定列宽）：字数不同也都能贴着同一条右边界 */
    display: flex; align-items: center; justify-content: flex-end; gap: 2px;
    font-size: .74rem; white-space: nowrap;
}
.od-pay-state i { font-size: .7rem; }
.od-pay-state.is-ok   { color: #12b76a; }   /* 已支付 ✓ 浅绿 */
.od-pay-state.is-wait { color: #b54708; }   /* 待确认 */
.od-pay-state.is-bad  { color: var(--c-pay-red); }
.od-pay-item.is-refund .od-pay-cate,
.od-pay-item.is-refund .od-pay-amt { color: #98a2b3; }
/* 日期 · 方式：窄屏放不下就省略，不折行，保证与右侧金额同一条基线 */
.od-pay-sub {
    min-width: 0; font-size: .8125rem; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 旅客信息（2026-10-21，详情页 + passengers.php 共用）----------
   2026-10-22 改版：整块去黄（提示条 / 卡片底 / 边框 / 下单人标签），
   次要信息合并成一行灰字，操作收进每位旅客那一行。
   2026-10-23：旅客行去掉浅灰边框（外层已是白卡，再套一层变"框中框"），
   改纯白 + 人与人之间的极细分割线；「去填写 / 修改」由大红改品牌金。 */
/* 提示条：不再是黄色警告框，只是居左的一行浅灰小字 + 铃铛 */
.od-tip {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 10px; padding: 0;
    color: #98a2b3; font-size: .76rem; line-height: 1.5;
}
.od-tip i { font-size: .82rem; color: #b6bec9; }
/* 旅客列表（2026-10-23）：不再给每人套一层浅灰边框（外层已经是白卡，会变成"框中框"），
   直接白底，人跟人之间只用一条极细分割线隔开 */
.od-pax-list { display: flex; flex-direction: column; }
.od-pax {
    /* 左右分列：左边「姓名行 + 待补全行」，右边「去填写」，按钮垂直居中（2026-10-23） */
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0;
    background: #fff; border: 0; border-radius: 0;
}
.od-pax-main { flex: 1 1 auto; min-width: 0; }
.od-pax:first-child { padding-top: 2px; }
.od-pax:last-child { padding-bottom: 0; }
.od-pax + .od-pax { border-top: 1px solid #f5f6f7; }
/* 缺资料的旅客（.is-miss）外观一致，不另加底色 / 边框，靠下面那行「待补全：…」说明 */
.od-pax-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.od-pax-idx {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    background: #eef1f5; color: #8f9aa8;
    font-size: .7rem; line-height: 18px; text-align: center;
}
/* 姓名加粗，是卡片里唯一的重音（原来 600 + 14px，和按钮/标签分不开） */
.od-pax-name { font-size: .9rem; font-weight: 700; color: #1a2332; }
/* 「下单人」标签：极淡灰底 + 深灰字（原来是土黄底） */
.od-pax-tag {
    padding: 1px 6px; border-radius: 20px;
    background: #f2f4f7; color: #5b6472;
    font-size: .7rem; line-height: 1.6;
}
/* 「成人 / 儿童」：跟姓名排在一起的小号灰字，不上底色 */
.od-pax-cat { font-size: .74rem; color: #98a2b3; }
/* 资料明细（2026-10-28 需求）：姓名 / 证件号 / 出生日期 / 手机号 四项逐行列出，
   标签定宽 62px（与序号缩进对齐），值与标签左边缘起排；空值用更浅的灰写「待填写」 */
.od-pax-info { margin: 8px 0 0; padding-left: 26px; display: grid; gap: 3px; }
.od-pax-info > div { display: flex; gap: 10px; font-size: .78rem; line-height: 1.65; }
.od-pax-info dt { flex: 0 0 62px; color: #98a2b3; font-weight: 400; }
.od-pax-info dd { margin: 0; min-width: 0; color: #3b4657; word-break: break-all; }
.od-pax-info dd.is-empty { color: #c4ccd6; }
/* 底部「修改旅客信息」（2026-10-28 需求）：一个整块入口，替代原来每人右边的「去填写 >」 */
.od-pax-foot {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #f5f6f7;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.od-pax-edit {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 8px;
    background: #fff; border: 1px solid #e5e7eb;
    color: #3b4657; font-size: .82rem; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.od-pax-edit:hover { background: #f7f8fa; color: #1a2332; text-decoration: none; }
.od-pax-edit i { font-size: .8rem; color: #98a2b3; }
.od-pax-foot-tip { margin: 0; font-size: .74rem; color: #98a2b3; }
/* 次要信息：房型·房号 | 待补全：xxx —— 与序号缩进对齐，一行浅灰小字 */
.od-pax-meta {
    margin-top: 4px; padding-left: 26px;
    font-size: .76rem; color: #98a2b3; line-height: 1.5;
}
/* 卡片最右侧的文字按钮「去填写 >」/「修改 >」：改用品牌金（2026-10-23），
   原来是大红，两个红字并排比上面的支付金额还抢眼 */
.od-pax-act {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 2px;
    font-size: .76rem; color: var(--c-primary);
    text-decoration: none; white-space: nowrap;
}
.od-pax-act:hover { color: var(--c-primary-dark); text-decoration: underline; }
.od-pax-act i { font-size: .68rem; }
/* 返回箭头（2026-10-22）：从顶部面包屑挪到卡片标题左侧，圆角小块、hover 才出底色 */
.od-back {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 24px; height: 24px; margin-left: -4px;
    border-radius: 50%; color: #667085; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.od-back i { font-size: .95rem; }
.od-back:hover { background: #f2f4f7; color: #1a2332; }
/* 卡片头里的 h1：只借语义，样式全部跟随卡头（Bootstrap 的 h1 字号/外边距要清掉） */
.od-pax-h1 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
/* passengers.php 里的编辑块（2026-10-22 第三版）：纯白底、无边框无圆角，
   每位旅客之间只隔一条极细的分割线（原来是浅灰底块，显得一整片很重） */
.od-pax-form {
    padding: 16px 0 18px; margin: 0;
    background: #fff; border: 0; border-radius: 0;
}
.od-pax-form + .od-pax-form { border-top: 1px solid #f2f4f7; }
.od-pax-form:first-of-type { padding-top: 0; }
.od-pax-form:last-of-type { padding-bottom: 4px; }
/* 标题行（2026-10-29 需求）：恢复成可点的折叠按钮 —— 一次只摊开一位旅客，
   收起的只留「序号 + 旅客 N + 状态」，点标题行切换 */
.od-pax-form-hd {
    display: flex; align-items: center; gap: 8px;
    width: 100%; margin: 0 0 9px; padding: 0;
    border: 0; background: none;
    font: inherit; color: inherit; text-align: left;
}
button.od-pax-form-hd { cursor: pointer; }
button.od-pax-form-hd:hover .od-pax-form-title { color: var(--c-primary); }
/* 右侧小箭头：展开朝上、收起朝右（换成普通 div 的只读订单里不输出） */
.od-pax-chev {
    margin-left: auto; font-size: .78rem; color: #b9c0c9;
    transition: transform .2s ease;
}
.od-pax-form.is-collapsed .od-pax-chev { transform: rotate(-90deg); }
.od-pax-form-bd { display: block; }
.od-pax-form-bd[hidden] { display: none; }
.od-pax-form-title { font-size: .88rem; font-weight: 700; color: #1a2332; }
/* 只读摘要（2026-10-28）：已填信息逐项列出 —— 标签定宽、值左对齐、行间一条极淡虚线；
   进入修改状态时整块收起（2026-10-29），只看输入框 */
.od-pax-view { margin: 0 0 10px; }
.od-pax-view[hidden] { display: none; }
.od-pax-view > div {
    display: flex; align-items: baseline; gap: 14px;
    padding: 5px 0; border-bottom: 1px dashed #f2f4f7;
}
.od-pax-view > div:last-child { border-bottom: 0; }
.od-pax-view dt { flex: 0 0 76px; font-weight: 400; font-size: .8rem; color: #8a94a6; }
.od-pax-view dd { margin: 0; font-size: .84rem; color: #1a2332; word-break: break-all; }
.od-pax-view dd.is-empty { color: #b6bec9; }
/* 摘要下方的「修改」按钮：文字按钮 + 品牌金描边，比灰按钮更像"可点"，又不抢提交按钮的红 */
.od-pax-view-ft { text-align: right; margin: 0 0 10px; }
.od-pax-edit {
    padding: 4px 14px; border-radius: 999px;
    border: 1px solid var(--c-primary); background: #fff;
    color: var(--c-primary); font-size: .78rem; line-height: 1.6;
}
.od-pax-edit:hover { background: rgba(184, 146, 63, .08); }
.od-pax-fields[hidden] { display: none; }
/* 状态胶囊（2026-10-22）：只留给「修改待审核 / 上次被驳回」，
   未填写之类的状态标签已从页面删掉，不再需要灰 / 绿两档 */
.od-pax-state {
    padding: 1px 7px; border-radius: 20px;
    background: #f2f4f7; color: #667085;
    font-size: .72rem; line-height: 1.7;
}
.od-pax-state.is-pend { background: #fffaeb; color: #b54708; }
.od-pax-state.is-rej { background: #fef3f2; color: #b42318; }
/* 「已填写（审核通过）」（2026-10-28 需求）：四种状态各有各的颜色 ——
   未填写=灰（默认）/ 提交待审核·修改待审核=橙 / 上次被驳回=红 / 已填写=绿 */
.od-pax-state.is-ok { background: #ecfdf3; color: #067647; }
/* 修改前的站内提醒弹窗（2026-10-28）：圆角白卡 + 金色感叹号，跟站点整体风格一致 */
.pax-tip-modal { border: 0; border-radius: 14px; }
.pax-tip-modal .modal-body { padding: 22px 22px 8px; }
.pax-tip-title {
    display: flex; align-items: center; gap: 8px;
    font-size: .95rem; font-weight: 700; color: #1a2332;
}
.pax-tip-title i { font-size: 1.1rem; color: var(--c-primary); }
.pax-tip-text { margin: 10px 0 4px; font-size: .84rem; line-height: 1.7; color: #667085; }
.pax-tip-modal .modal-footer { padding: 10px 22px 18px; border: 0; gap: 8px; }
/* 「去填写 >」/「修改 >」那枚箭头已废弃（2026-10-28）：现在改成摘要下方的 .od-pax-edit 按钮 */
/* 输入框（2026-10-22 第四版）：去掉边框，改浅灰底 #F5F6F7 —— 「苹果风」无框输入，
   聚焦时变白底 + 品牌红细环。加 .acct-main 前缀是为了压住下面「个人中心内容区」那条全局规则 */
.acct-main .od-pax-form .form-control,
.acct-main .od-pax-form .form-select {
    border: 0;
    border-radius: 10px;
    background-color: #f5f6f7;
    /* 值字号收到 .88rem：Bootstrap 默认 1rem 太大，跟标签统一成同一档 */
    font-size: .88rem;
    /* 只加高上下内边距，左右沿用 Bootstrap（select 右侧要给下拉箭头留位） */
    padding-top: .5rem; padding-bottom: .5rem;
}
/* 标签比原来黑一档（#667085 → #3b4657），字号跟输入值统一 .88rem，两者齐平 */
.acct-main .od-pax-form .form-label { font-size: .88rem; color: #3b4657; margin-bottom: 8px; }
/* PC 上再高一档（2026-11-02 需求）：上下内边距 .5rem → .7rem，输入框实际高度约 37px → 43px，
   点起来更宽松；手机端不加（一行要塞「年/月/日/性别」四个控件，加高会把文字挤掉） */
@media (min-width: 576px) {
    .acct-main .od-pax-form .form-control,
    .acct-main .od-pax-form .form-select {
        padding-top: .7rem; padding-bottom: .7rem;
    }
}
.acct-main .od-pax-form .form-control::placeholder { color: #a8b2bf; }
.acct-main .od-pax-form .form-control:focus,
.acct-main .od-pax-form .form-select:focus {
    background-color: #fff;
    box-shadow: 0 0 0 2px var(--c-pay-red);
}
/* 行间距 8px → 12px（1.5 倍）：一屏不再像密密麻麻的表格；
   标签与输入框之间由 5px → 8px，同样 1.5 倍左右 */
.acct-main .od-pax-form .row { --bs-gutter-y: .75rem; }
/* 出生日期：年 / 月 / 日 三个下拉并排（间距同步放大到 8px） */
.od-birth { display: flex; gap: 8px; }
.od-birth .form-select { flex: 1 1 0; min-width: 0; padding-right: 1.4rem; }
/* 手机号：区号下拉（定宽）+ 号码框 */
.od-phone { display: flex; gap: 8px; }
.od-phone .od-phone-cc { flex: 0 0 118px; padding-right: 1.4rem; }
.od-phone .form-control { flex: 1 1 0; min-width: 0; }
/* 表单底部唯一的大按钮「提交旅客信息」（2026-10-22：土金 → 主品牌红） */
.od-submit {
    display: block; width: 100%; height: 46px; margin-top: 16px;
    border: 0; border-radius: 12px;
    background: var(--c-pay-red); color: #fff;
    font-size: .95rem; font-weight: 600; letter-spacing: .02em;
    -webkit-tap-highlight-color: transparent;
}
.od-submit:hover { background: var(--c-pay-red-dark); }
.od-submit:active { background: var(--c-pay-red-dark); }
/* 每位旅客自己的提交按钮（2026-10-28 需求）：填完这一位就能单独提交，
   所以按钮跟着各自的输入框走，比原来那条通栏大红按钮小一号、右对齐 */
.od-pax-actions { display: flex; justify-content: flex-end; }
.od-submit-pax {
    display: block; width: auto; min-width: 176px; height: 40px;
    margin: 14px 0 0; border-radius: 10px;
    font-size: .86rem; font-weight: 600;
}
@media (max-width: 575.98px) {
    .od-submit-pax { width: 100%; min-width: 0; }
}

@media (max-width: 575.98px) {
    .od-body { padding: 14px; }
    .od-rows { grid-template-columns: 1fr; gap: 8px; }
    .od-foot { justify-content: stretch; }
    .od-foot .ord-btn { flex: 1 1 auto; justify-content: center; }
    /* 手机端「年/月/日/性别」仍要挤在一行各占 1/4：内边距与字号各收一档，否则文字会被箭头压掉 */
    .od-pax-form .od-birth { gap: 6px; }
    .od-pax-form .od-birth .form-select,
    .od-pax-form .col-3 .form-select {
        padding-left: 6px; padding-right: 1.15rem; font-size: .86rem;
    }
}

/* ================= 个人中心内容区：把 Bootstrap 默认卡片/按钮调成站内风格 ================= */
.acct-main .card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 20px -10px rgba(26, 35, 50, .18);
    overflow: hidden;
}
.acct-main .card-header {
    background: #fff;
    border-bottom: 1px solid #f2f4f7;
    padding: 14px 18px;
    font-size: .95rem;
    font-weight: 700;
    color: #1a2332;
}
.acct-main .card-body { padding: 18px; }
.acct-main .form-label { margin-bottom: 5px; font-size: .86rem; color: #667085; }
.acct-main .form-control:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(201, 169, 89, .15);
}
.acct-main .btn-primary,
.acct-main .btn-warning {
    padding: 7px 22px;
    border-radius: 40px;
    border-color: var(--c-primary);
    background: var(--c-primary);
    font-size: .88rem;
}
.acct-main .btn-primary:hover,
.acct-main .btn-warning:hover {
    border-color: var(--c-primary-dark);
    background: var(--c-primary-dark);
}
.acct-main .alert { border-radius: 10px; font-size: .88rem; }

@media (max-width: 575.98px) {
    .ord-foot { flex-direction: column; align-items: stretch; }
    .ord-acts { justify-content: flex-end; }
}

/* ================= 个人中心里的 Bootstrap 组件统一（订单详情页用了不少默认组件）=================
   徽章：Bootstrap 的 .bg-* 带 !important，所以这里也必须 !important 才能盖住 */
.acct-main .badge {
    padding: 4px 11px;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 500;
}
.acct-main .badge.bg-success   { background: #eaf7ef !important; color: #1e874b !important; }
/* 保险类型用的 bg-primary（供应商购买）：Bootstrap 蓝跟站内金色不搭，收成浅蓝信息色 */
.acct-main .badge.bg-primary   { background: #eef4ff !important; color: #2b6cb0 !important; }
.acct-main .badge.bg-warning   { background: #fff5e6 !important; color: #b7791f !important; }
.acct-main .badge.bg-danger    { background: #fdecec !important; color: #c0392b !important; }
.acct-main .badge.bg-info      { background: #eef4ff !important; color: #2b6cb0 !important; }
.acct-main .badge.bg-secondary { background: #f4f5f7 !important; color: #8892a0 !important; }
/* 状态文字色：Bootstrap 的绿/蓝与站内金色调不搭，收成站内配色 */
.acct-main .text-success { color: #1e874b !important; }
.acct-main .text-warning { color: #b7791f !important; }
.acct-main .text-primary { color: var(--c-primary) !important; }
.acct-main .text-danger  { color: #c0392b !important; }
/* 表格 */
.acct-main .table { font-size: .86rem; color: #3a4a5a; }
.acct-main .table > :not(caption) > * > * { padding: 10px 12px; border-bottom-color: #f2f4f7; }
.acct-main .table thead th { background: #fafbfc; font-weight: 600; color: #667085; }
/* 按钮 */
.acct-main .btn-sm { padding: 5px 14px; font-size: .84rem; }
.acct-main .btn-outline-primary {
    border-color: var(--c-primary);
    color: var(--c-primary);
    border-radius: 40px;
}
.acct-main .btn-outline-primary:hover {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.acct-main .btn-outline-secondary { border-radius: 40px; }
.acct-main .btn-outline-danger { border-radius: 40px; }
/* 卡片里的居中型信息块（订单详情上半部分那几张）留白收一点 */
.acct-main .card-body.py-4 { padding-top: 20px !important; padding-bottom: 20px !important; }

/* ================= 输入框里的提示文字（placeholder）=================
   统一比输入框自身字号小一档：
   · 提示是"占位说明"，不该和用户真正输入的内容一样醒目 —— 小一档后，
     一眼就能分清"这是提示"还是"我已经填了内容"。
   · 用 em（跟着各自字号缩），不写死 px —— 站内输入框有大有小
     （表单 16px、搜索筛选 13.5px、日期 12.5px），逐个改必然漏。
   · 只动字号：颜色仍由各组件自己定（如 .hs-input 那套灰），不越权改配色。
   site.css 是前台最后加载的样式表，所以放这里能盖住前面的定义，不会漏页面。 */
input::placeholder,
textarea::placeholder {
    font-size: .86em;
}

/* ================= 个人中心：PC 端「账号总览」=================
   手机端是 .hub 枢纽页（入口列表），PC 端换成这一套总览：
   用户卡 + 数据磁贴 + 最近订单 + 账号设置入口。
   两者由 .d-none d-lg-block 切换，所以这里全部按 PC 的样子写就行。 */
.dash-user { padding: 22px 24px; }
.dash-user-info { flex: 1 1 auto; min-width: 0; }
.dash-user .hub-avatar { width: 60px; height: 60px; font-size: 1.7rem; }
.dash-user .hub-name { font-size: 1.2rem; }
.dash-user .hub-phone { font-size: .84rem; }
.dash-user-btn { flex: 0 0 auto; }

/* 数据磁贴（我的订单 / 我的收藏 / 我的积分）：整块可点（积分那块不是链接） */
.dash-stats { margin-top: 16px; }
.dash-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px -10px rgba(26, 35, 50, .18);
    text-decoration: none;
    transition: box-shadow .15s;
}
a.dash-stat:hover { box-shadow: 0 10px 26px -12px rgba(26, 35, 50, .3); }
.dash-stat-ico {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(201, 169, 89, .12);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.dash-stat-txt { display: flex; flex-direction: column; min-width: 0; }
.dash-stat-num { font-size: 1.35rem; font-weight: 700; color: #1a2332; line-height: 1.25; }
.dash-stat-lb { font-size: .82rem; color: #8f9aa8; }
/* 积分磁贴里那行小字：即将获得 XXX 积分 */
.dash-stat-sub { font-size: .74rem; color: #b7791f; margin-top: 3px; white-space: nowrap; }

/* 总览里的小节卡片（最近订单等） */
.dash-sec {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px -10px rgba(26, 35, 50, .18);
    overflow: hidden;
    height: 100%;
}
.dash-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f2f4f7;
    font-size: .95rem;
    font-weight: 600;
    color: #1a2332;
}
.dash-sec-head a { font-size: .84rem; font-weight: 400; color: #8f9aa8; text-decoration: none; }
.dash-sec-head a:hover { color: var(--c-primary); }
/* 2×2 网格：同一行的两张卡自动等高 —— 「最近订单」与「账号设置」高度一致就靠这个，
   不用写死 min-height（内容多少变了也不会错位）。 */
.dash-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 16px;
    margin-top: 16px;
    align-items: stretch;
}
/* 窄一些的桌面（如笔记本 1280）改成等宽两列，免得右列太挤 */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .dash-grid { grid-template-columns: 1fr 1fr; }
}
/* .hub-rows 本身是一张独立白卡，放进 .dash-sec 里要把卡片外壳去掉，只留行样式 */
.dash-sec .hub-rows {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 最近订单：一条一行，两行文字 + 状态胶囊 + 金额 */
.dash-ord {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f2f4f7;
    text-decoration: none;
}
.dash-ord:last-child { border-bottom: 0; }
.dash-ord:hover { background: #fafbfc; }
.dash-ord-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-ord-name {
    font-size: .95rem;
    font-weight: 600;
    color: #1a2332;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-ord-sub { font-size: .78rem; color: #a8b3c0; }
.dash-ord-amt { flex: 0 0 auto; font-size: .95rem; font-weight: 700; color: #1a2332; }
.dash-empty { padding: 22px 18px; font-size: .88rem; color: #8f9aa8; line-height: 1.7; }
.dash-empty a { color: var(--c-primary); text-decoration: none; }

/* ---------- 热门旅游列车：轮播（一屏 2 个，左右翻页 + 自动播放） ---------- */
/* 轮播根的 data-sp-carousel 在 .dash-sec 上（因为箭头在 .sp-body 里），
   所以内容区单独包一层 .sp-body 给内边距；
   position:relative 是给两侧箭头（绝对定位）当定位基准的。 */
.sp-body { padding: 14px 18px 16px; }
/* .sp-win 只包"卡片区"（不含底部圆点）：两侧箭头相对它垂直居中 */
.sp-win { position: relative; }
/* overflow:hidden —— 用程序滚动（scrollTo）翻页，不出现横向滚动条、也不会打断页面纵向滚动 */
.sp-view { overflow: hidden; }
.sp-track { display: flex; gap: 14px; }
.sp-card {
    /* 一屏 3 个：减去中间两道 gap(14px×2) 再三等分。
       改这里就必须同步改 profile.php 里的 $spPages（ceil(个数/3)）—— 两边必须一致。 */
    flex: 0 0 calc((100% - 28px) / 3);
    display: flex;
    flex-direction: column;
    background: #fff;
    /* 不要外框：那一圈边框 + 图两侧的留白看着像"占位置的框"。
       图片本身就是分隔，去掉边框更干净。 */
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .15s;
}
/* 没有边框了，hover 反馈只留阴影 */
.sp-card:hover { box-shadow: 0 8px 22px -12px rgba(26, 35, 50, .3); }
.sp-card-img {
    /* 图铺满卡片【整幅宽度】：一屏 3 张图正好填满轮播区宽度，不再两边留白。
       （原来是卡宽的 2/3、居中，那两侧留白就是要去掉的"框"）
       img 用 height:auto 按自身比例缩放 —— 不裁切、不拉伸；
       当前这批图都是 3:4（宽:高 = 1 : 1.333），所以铺满后每张图就是 卡宽 × 卡宽×1.333。
       卡片有 overflow:hidden + 圆角，图片顶部两角会跟着卡片一起圆。 */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2f7 0%, #dde6f0 100%);
    color: #b9c6d6;
    font-size: 26px;
    overflow: hidden;
}
.sp-card-img.is-ph { aspect-ratio: 3 / 4; }   /* 没有图时的占位块，给个比例免得塌掉 */
.sp-card-img img { width: 100%; height: auto; display: block; }
/* 图下方文字：一屏 3 个时卡片只有 ~180px 宽，所以只分两行 ——
   ① 出发地→目的地·天数（先看"去哪儿"）  ② 列车名（左）+ 价格（右）
   （原来是「名字 / 行程 / 价格」三行，按需求把行程提到第一行、
     名字与价格并到第二行；宽度没变，两行比三行更省高度。） */
.sp-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 6px 2px;
}
/* 第一行：行程。原来是第二行的浅灰小字，提到第一行后稍微加深一点，
   让"去哪儿、几天"先被看到；但仍比列车名轻，不抢第二行的重点。 */
.sp-card-meta {
    font-size: .74rem;
    color: #7d8896;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 第二行：列车名 + 价格 并排。flex 撑开——名字在左、价格贴右（站内金额靠右的习惯）。
   名字必须 flex:1 + min-width:0：不然长名字会把价格顶出卡片，
   加上 min-width:0 才会在挤的时候出省略号（这是 flex 省略号的经典坑）。 */
.sp-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.sp-card-row .sp-card-name { flex: 1 1 auto; min-width: 0; }
.sp-card-name {
    font-size: .84rem;
    font-weight: 600;
    color: #1a2332;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 价格：原来单独一行右对齐，现在在名字右侧 —— 不参与压缩（flex:0 0 auto） */
.sp-card-price { flex: 0 0 auto; font-size: .9rem; font-weight: 700; color: var(--c-primary); }
.sp-card-price small { font-size: .68rem; font-weight: 400; color: #8f9aa8; }
/* 两侧箭头：绝对定位在 .sp-body 的左右边缘、垂直居中，压在卡片外侧的留白上 */
.sp-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e3e8ef;
    background: #fff;
    color: #667085;
    font-size: .74rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(26, 35, 50, .28);
    transition: color .15s, border-color .15s;
}
.sp-prev { left: 2px; }
.sp-next { right: 2px; }
.sp-arrow:hover { color: var(--c-primary); border-color: var(--c-primary); }
/* 只有一页时箭头仍显示但置灰（避免"看不到箭头以为没做"） */
.sp-arrow:disabled { cursor: default; color: #cdd5df; border-color: #eef1f5; box-shadow: none; }
.sp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.sp-dot { width: 6px; height: 6px; border-radius: 50%; background: #dfe5ec; cursor: pointer; transition: width .2s, background .2s; }
.sp-dot.is-on { width: 16px; border-radius: 3px; background: var(--c-primary); }

/* ---------- 通知公告：一行一条 ---------- */
.ann-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid #f2f4f7;
    text-decoration: none;
}
.ann-row:last-child { border-bottom: 0; }
.ann-row:hover { background: #fafbfc; }
.ann-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ann-row-top {
    flex: 0 0 auto;
    font-size: .68rem;
    color: #b7791f;
    background: #fff5e6;
    border-radius: 4px;
    padding: 1px 5px;
}
.ann-row-title {
    font-size: .88rem;
    color: #1a2332;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ann-row-date { flex: 0 0 auto; font-size: .78rem; color: #a8b3c0; }

/* ================= 我的积分页（PC / 手机同一套，手机自动折行）================= */
/* 汇总卡：三格数字 + 各自的小问号（原来下面那行规则说明已去掉） */
.pt-sum {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px -10px rgba(26, 35, 50, .18);
    padding: 18px 20px 14px;
    margin-bottom: 16px;
}
/* 每一项：数字一行、标签一行 */
.pt-sum-item { display: inline-flex; flex-direction: column; min-width: 104px; margin-right: 22px; }
.pt-sum-num { font-size: 1.5rem; font-weight: 700; color: var(--c-primary); line-height: 1.2; }
.pt-sum-num.is-pending { color: #b7791f; }
.pt-sum-num.is-grey { color: #a8b3c0; }
.pt-sum-lb { font-size: .8rem; color: #8f9aa8; margin-top: 2px; }
/* 问号就在【数字后面】（HTML 里就写在 .pt-sum-num 内部），所以永远紧跟数字、不会飘。
   ✗ 踩过的两种错法：① 绝对定位到整项右上角 ② 网格第 2 列 ——
     两种都会因为「项有 min-width、且标签比数字宽」而把问号推到右边空白里。
   ★ 结论：位置要跟着【数字】本身走，别跟着项的外框走。 */
.pt-sum-num > .q-hint { margin-left: 3px; }

/* ================= 问号提示（说明不占版面，悬停/点按才展开）=================
   服务端渲染成 <button>：PC 上 hover 能看，键盘 Tab 也能聚焦展开，
   手机点一下即聚焦、也能弹出（所以不用原生 title —— 那个在手机上点不出来）。
   嵌在 <a> 里的场景改用 <span>（HTML 不允许交互元素套在链接里），只靠 hover。 */
.q-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    padding: 0;
    cursor: help;
    color: #b9c6d6;
    vertical-align: middle;
}
.q-hint i { font-size: .92rem; line-height: 1; }
.q-hint:hover, .q-hint:focus { color: var(--c-primary); outline: none; }
.q-hint-tip {
    /* 位置要求：【水平居中于屏幕】+【垂直落在问号下方】。
       水平：position:fixed + left:50% + 自身左移一半 → 这段 CSS 就够。
       垂直：✗ CSS 做不到 —— 用 fixed 就量不到"问号在视口里的 y"；
             用绝对定位跟着问号，又没法按"屏幕"居中（百分比只按父元素算）。
             → 由 assets/js/q-hint.js 在每次显示前量一次问号的位置，写进 top。
             这里的 top:50% 只是没加载 JS 时的兜底。
       宽度跟着文字走（max-content）+ white-space:nowrap 保证【不换行】。
       注意：以后再加字，要留意窄屏一行放不放得下（现有两句 277px / 192px，390px 屏没问题）。 */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    z-index: 9999;                 /* 要压过顶部导航等固定层 */
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    background: #1a2332;
    color: #fff;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;           /* 不换行 */
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 14px 34px -12px rgba(26, 35, 50, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    pointer-events: none;          /* 气泡不挡鼠标，免得刚悬上去就"晃"没了 */
}
/* 已居中，不再需要指向问号的小三角，也不再需要"向左/向右弹"的变体 */
.q-hint:hover .q-hint-tip,
.q-hint:focus .q-hint-tip { opacity: 1; visibility: visible; }
/* 明细行：一笔订单一行（产品/订单号/行程 + 金额 + 积分 + 状态） */
.pt-list { display: flex; flex-direction: column; }
.pt-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #f2f4f7;
    text-decoration: none;
}
.pt-row:last-child { border-bottom: 0; }
.pt-row:hover { background: #fafbfc; }
.pt-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-row-name {
    font-size: .95rem;
    font-weight: 600;
    color: #1a2332;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-row-sub { font-size: .78rem; color: #a8b3c0; line-height: 1.5; }
.pt-row-price { flex: 0 0 auto; font-size: .86rem; color: #667085; }
.pt-row-points { flex: 0 0 auto; min-width: 62px; text-align: right; font-size: 1rem; font-weight: 700; color: var(--c-primary); }
.pt-row-points.is-grey { color: #b9c6d6; font-weight: 600; }
.ord-chip.is-wait { background: #fff5e6; color: #b7791f; }
.ord-chip.is-grey { background: #f2f4f7; color: #8f9aa8; }

/* 「我的订单」状态胶囊（2026-10-21 需求）：
   极浅的绿/橙底色 + 同色系淡字（取消类淡灰），不用浓重色块。
   必须写在这些 .ord-chip.is-* 之后 —— 同优先级靠后来居上覆盖。
   只作用于 .ord-list，积分页共用 .ord-chip 但不受影响。 */
.ord-list .ord-chip { padding: 3px 10px; border-radius: 20px; }
.ord-list .ord-chip i { color: #999999; }
/* 一般绿：已付清 / 出行中 */
.ord-list .ord-chip.is-ok,
.ord-list .ord-chip.is-info { background: #f3faf6; color: #7fb99b; }
/* 略深的绿：「席位已确认，待出行」—— 最好的状态，颜色可以站出来一点 */
.ord-list .ord-chip.is-trip { background: #eaf6ef; color: #4e9b70; }
/* 橙：待确认席位（比原来的淡橙深一档，看得出来在等事） */
.ord-list .ord-chip.is-warn,
.ord-list .ord-chip.is-wait { background: #fdf5ea; color: #c98842; }
/* 红：待支付定金 / 待支付尾款（逾期与否同色，都是要客户掏钱） */
.ord-list .ord-chip.is-due  { background: #fdf0ef; color: #d0524a; }
/* 灰：已取消 / 已完成 */
.ord-list .ord-chip.is-cancel,
.ord-list .ord-chip.is-grey { background: #f7f8fa; color: #b4bac2; }

/* 卡片里的信息类图标统一灰（2026-10-21 需求）：
   沙漏 / 日历 / 人数 / 房型 / 下单时间，一律 #999999，不再靠图标颜色区分。
   例外（保留原色）：
     · 「全款已付清」的绿勾 —— 钱的收讫要有明确的正反馈
     · 3 天内发车的橙色沙漏 —— 唯一的紧迫提示
     · 底部按钮（查看详情 / 去支付 / 联系客服）—— 红底金底上灰图标看不清 */
.ord-card i { color: #999999 !important; }
.ord-card .ord-acts i { color: inherit !important; }
.ord-card .ord-kefu-btn i { color: var(--c-primary) !important; }
.ord-card .ord-paid i { color: #7cc6a0 !important; }
.ord-card .ord-cd.is-soon i { color: #d9a441 !important; }
/* 手机端：一行放不下 → 折成两行（产品/行程在上，金额/积分/状态在下） */
@media (max-width: 991.98px) {
    .pt-sum-item { min-width: 84px; margin-right: 16px; }
    .pt-sum-num { font-size: 1.3rem; }
    .pt-row { flex-wrap: wrap; gap: 8px 10px; padding: 13px 14px; }
    .pt-row-main { flex: 1 1 100%; }
    .pt-row-price { margin-left: 0; }
    .pt-row-points { margin-left: auto; }
}

/* ================= 个人中心：字段值 / 说明文字 ================= */
.acct-val { font-size: .95rem; font-weight: 600; color: #1a2332; line-height: 1.5; word-break: break-all; }
.acct-note {
    font-size: .82rem;
    line-height: 1.75;
    color: #8f9aa8;
    background: #fafbfc;
    border-radius: 8px;
    padding: 10px 12px;
}
.acct-note b { color: #667085; }
/* 验证码那一行：输入框 + 获取验证码按钮（与登录页同一套 .input-group 结构） */
.acct-main .input-group .btn-outline-secondary {
    border-color: #e3e8ef;
    color: var(--c-primary);
    font-size: .85rem;
    white-space: nowrap;
}
.acct-main .input-group .btn-outline-secondary:disabled { color: #b9c6d6; }
.acct-main .js-code-hint:not(:empty) { display: inline-block; margin-top: 6px; color: #b7791f; }

/* 两步式安全操作（改手机号 / 改密码）的步骤指示条：
   ① 未到的步骤用浅灰，当前步骤用主色加粗 —— 用户一眼知道自己在第几步。 */
.acct-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: .84rem;
    color: #a8b3c0;
}
.acct-steps span { display: inline-flex; align-items: center; gap: 4px; }
.acct-steps span.is-on { color: var(--c-primary-dark); font-weight: 600; }
.acct-steps i { font-size: .7rem; color: #d3dae3; }

/* 卡片底部的相关入口（修改个人信息页 → 修改手机号 / 修改登录密码） */
.acct-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f3f7;
}
.acct-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .85rem;
    color: #667085;
    text-decoration: none;
}
.acct-links a:hover { color: var(--c-primary); }

/* ---------- 手机端：枢纽页与侧栏的显示开关 ----------
   必须放在文件最后：上面 .hub 的基样式（display:none）是在它之后才出现的，
   若写在前面，会被基样式按"后来居上"盖掉（实测枢纽页就是这么被藏起来的）。 */
@media (max-width: 991.98px) {
    .hub { display: block; }
    .acct-side { display: none; }
    .acct-main .card-body { padding: 16px; }

    /* 表单主按钮：手机端全宽 —— 与站内既有做法一致
       （登录/注册、下单、支付、筛选弹层的主按钮本来就是 w-100 / flex-fill 全宽）。
       行内小按钮是桌面写法，在手机上既不好点中，也会让「保存」看起来像次要操作。
       PC 端保持行内按钮不变。 */
    .acct-main form > .btn-primary { width: 100%; }
}

/* ================= 登录 / 注册页 .auth-* =================
   配色与排版沿用下单页（.po-page）那一套：
     · 主色金 var(--c-primary) / var(--c-primary-dark)，不再用 Bootstrap 蓝按钮；
     · 白底 + 1px 极浅描边 + 12~14px 圆角，只有一层几乎看不见的投影（不用 card shadow）；
     · 字号收敛到三档：1.25rem 标题 / .95rem 正文 / .8rem 说明。
   全部选择器带 .auth- 前缀，只作用于本页，不影响其它页面。 */
.auth-wrap { max-width: 420px; margin: 8px auto 48px; padding: 0 4px; }
.auth-head { margin: 4px 0 18px; text-align: center; }
.auth-title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; color: #1a2332; }
.auth-sub { margin: 0; font-size: .8rem; color: #8f9aa8; line-height: 1.6; }

.auth-card {
    padding: 20px 18px 18px;
    background: #fff; border: 1px solid #f0f2f5; border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* 登录方式：下划线 tab（比原来的 nav-pills 更轻，不抢表单焦点） */
.auth-tabs { display: flex; gap: 26px; margin: 0 0 18px; border-bottom: 1px solid #f0f2f5; }
.auth-tab {
    padding: 0 0 10px; margin-bottom: -1px;
    font-size: .95rem; color: #8f9aa8; text-decoration: none;
    border-bottom: 2px solid transparent;
}
.auth-tab:hover { color: #6b7280; text-decoration: none; }
.auth-tab.is-on { color: var(--c-primary-dark); font-weight: 600; border-bottom-color: var(--c-primary); }

/* 输入框：整块做出边框（图标 + 输入合为一体），46px 高更好点中 */
.auth-field {
    display: flex; align-items: center; gap: 8px;
    height: 46px; padding: 0 12px; margin-bottom: 12px;
    background: #fcfcfd; border: 1px solid #e6e9ee; border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-field:focus-within {
    background: #fff; border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(184, 146, 63, .1);
}
.auth-field > i { flex: 0 0 auto; font-size: 15px; color: #b6bec9; }
.auth-field:focus-within > i { color: var(--c-primary); }
/* 输入文字必须 ≥16px：iOS 下小于 16px 聚焦时会自动放大整个页面 */
.auth-field input {
    flex: 1 1 auto; min-width: 0; height: 100%;
    background: none; border: 0; outline: none;
    font-size: 1rem; color: #1a2332;
}
/* 全局 input::placeholder 被缩到 .86em，这里按本页字号给回来，别让占位文字显得太小 */
.auth-field input::placeholder { color: #b6bec9; font-size: .92rem; }
/* 浏览器自动填充会把输入框刷成黄底，这里压回卡片底色 */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px #fcfcfd inset;
    -webkit-text-fill-color: #1a2332;
}

/* 验证码：右侧「发送验证码」按钮贴在输入框里，不换行 */
.auth-field-code { padding-right: 6px; }
.auth-code-btn {
    flex: 0 0 auto; padding: 7px 10px; border: 0; border-radius: 8px;
    background: rgba(184, 146, 63, .1); color: var(--c-primary-dark);
    font-size: .8rem; font-weight: 500; white-space: nowrap;
}
.auth-code-btn:hover { background: rgba(184, 146, 63, .16); }
.auth-code-btn:disabled { color: #9aa5b1; background: #f2f4f6; }

.auth-hint { margin: -4px 0 12px; font-size: .76rem; color: #9aa5b1; line-height: 1.6; }

.auth-btn {
    width: 100%; height: 46px; margin-top: 6px;
    border: 0; border-radius: 10px;
    background: var(--c-primary); color: #fff;
    font-size: 1rem; font-weight: 600; letter-spacing: .3px;
    transition: background .15s;
}
.auth-btn:hover, .auth-btn:focus { background: var(--c-primary-dark); }
.auth-btn:active { transform: translateY(1px); }

/* 提示条：错误浅红 / 成功浅绿，都不用带边框的 alert */
.auth-alert {
    margin: 0 0 14px; padding: 9px 12px; border-radius: 10px;
    background: #fef2f2; color: #b91c1c; font-size: .85rem; line-height: 1.5;
}
.auth-alert.is-ok { background: #f0fdf4; color: #15803d; }

.auth-switch { margin-top: 16px; text-align: center; font-size: .85rem; color: #8f9aa8; }
.auth-switch a { color: var(--c-primary-dark); font-weight: 500; text-decoration: none; }

.auth-lang { margin-top: 20px; text-align: center; font-size: .8rem; }
.auth-lang a { color: #9aa5b1; text-decoration: none; }
.auth-lang a.is-on { color: #1a2332; font-weight: 600; }
.auth-lang-sep { display: inline-block; width: 1px; height: 10px; margin: 0 10px; background: #e3e7ed; vertical-align: -1px; }

@media (max-width: 575.98px) {
    .auth-wrap { margin-top: 4px; }
    .auth-card { padding: 18px 14px 16px; border-radius: 12px; }
}