@charset "UTF-8";
/* ============================================================
 * 医生详情页样式 —— 1:1 移植 beauts_app/pages/doctor/detail.vue scoped scss
 * 单位:cqw (基于 .page-main 640 容器);1rpx = 0px
 * 复用 app.css 已有的:.detail-nav / .text img / .toggle-lang / .feedback-list-component / .app-popup-*
 * ============================================================ */

.body { background: #f6f6f6; padding-bottom:round(down, calc(95 * var(--px)), 1px); min-height: 100vh; }

/* ===== 顶部轮播 ===== */
/* ⚠ 老站 H5 分支是 height:0 + padding-bottom:100%（永远 1:1 正方形），
   不是写死 375px —— 写死的话桌面 750 容器下轮播就不跟着变高了。 */
.swiper-body {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: #f5f5f5;
    overflow: hidden;
}
.swiper-body .swiper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.swiper-body .swiper-item { width: 100%; height: 100%; }
.swiper-body .swiper-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swiper-body .swiper-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width:16%; height:round(down, calc(60 * var(--px)), 1px); z-index: 5;
}
.swiper-body .swiper-play img { width: 100%; height: 100%; }
/* 老站实测：高 18px（36rpx）、padding 0 7px、行高 18px、12px 字、右 10px 下 24px */
.swiper-body .current {
    position: absolute; right:round(down, calc(10 * var(--px)), 1px); bottom:round(down, calc(24 * var(--px)), 1px);
    height:round(down, calc(18 * var(--px)), 1px); line-height:round(down, calc(18 * var(--px)), 1px);
    color: #fff; font-size:round(down, calc(12 * var(--px)), 1px);
    background: rgba(51,51,51,0.5); padding:0 round(down, calc(7 * var(--px)), 1px);
    border-radius:round(down, calc(10 * var(--px)), 1px);
}

/* ===== 个人资料 .user ===== */
.user { background: #fff; padding:round(down, calc(12 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px); }
.user .username { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom:round(down, calc(9 * var(--px)), 1px); }
/* 分享按钮：老站是个 <button>，样式被 uni 重置过。不清掉浏览器默认值的话
   按钮会把整行撑到两倍高（实测 .username 28→56）。 */
.user .share-btn {
    padding:0; margin:0; border:0; background: none;
    line-height: 1; font-size: 0; flex-shrink: 0; cursor: pointer;
}
.user .username-right {
    display: block;
    width:round(down, calc(25 * var(--px)), 1px); height:round(down, calc(25 * var(--px)), 1px);   /* 50rpx */
    flex-shrink: 0; margin-left:round(down, calc(10 * var(--px)), 1px);
}
.user .username-right img { width: 100%; height: 100%; }
/* ⚠ 不能 flex:1 —— 老站是内容宽（实测 100），撑满会变成 320 */
.user .username-left {
    font-size:round(down, calc(20 * var(--px)), 1px); font-weight: 700; color: #1b1b1b;
    min-width: 0;
}
/* 学历。⚠ 老站是 .username-left 里直接跟一个 <text>，没有独立类名 ——
   之前我给它造了 .username-edu，改回按结构选。 */
.user .username-left > span {
    margin-left:round(down, calc(7 * var(--px)), 1px);
    font-size:round(down, calc(12 * var(--px)), 1px); font-weight: 400; color: #333;
}
.user .user-list { display: flex; flex-wrap: wrap; }
/* ⚠ 老站的分隔线不是 border，是一个子 <view>：宽 1px、高 15.5px、左右各 10px。
   用 border 会让每个 item 的宽度对不上（实测 70 → 59）。 */
.user .user-list-detail {
    display: flex; align-items: center;
    font-size:round(down, calc(12 * var(--px)), 1px); color: #333;
    line-height:round(down, calc(15 * var(--px)), 1px);
}
.user .user-list-detail > div {
    margin:0 round(down, calc(10 * var(--px)), 1px); width:1px; height:round(down, calc(16 * var(--px)), 1px); background: #eeeeee;
}
/* ⚠ 最后一个也有分隔线 —— 老站模板里每个 item 后面都跟一个 <view></view>，
   没有 :last-child 特例。隐藏它会让每格少 21px（实测 70 → 49）。 */
.user .user-br {
    width: 100%; height: 1px; background: #f1f1f1;
    margin:round(down, calc(15 * var(--px)), 1px) 0 round(down, calc(6 * var(--px)), 1px);
}
.user .user-box { display: flex; flex-wrap: wrap; }
.user .user-box-detail {
    width: 50%; margin-top:round(down, calc(9 * var(--px)), 1px);
    font-size:round(down, calc(12 * var(--px)), 1px); color: #999;
    display: flex; align-items: center;
}
.user .user-box-detail > div {
    text-align: justify; min-width:14.6667%;
}
/* ⚠ 同理，老站这里是裸 <text>，不是 .user-box-detail__val */
.user .user-box-detail > span {
    font-size:round(down, calc(12 * var(--px)), 1px); color: #333;
    margin-left:round(down, calc(10 * var(--px)), 1px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
}

/* ===== 擅长 .good ===== */
.good {
    background: #fff; border-radius:round(down, calc(10 * var(--px)), 1px);
    padding:round(down, calc(12 * var(--px)), 1px); margin:round(down, calc(12 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
}
.good .good-title {
    font-size:round(down, calc(14 * var(--px)), 1px); color: #333;
    margin-bottom:round(down, calc(18 * var(--px)), 1px);
}
.good .good-text {
    font-size:round(down, calc(13 * var(--px)), 1px); font-weight: 600; color: #1b1b1b;
    line-height: 1.5;
}

/* ===== 执业机构 .mechanism ===== */
.mechanism {
    background: #fff; border-radius:round(down, calc(10 * var(--px)), 1px);
    padding:round(down, calc(12 * var(--px)), 1px); margin:round(down, calc(12 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) 0;
}
.mechanism .mechanism-title {
    font-size:round(down, calc(14 * var(--px)), 1px); color: #333;
}
/* 老站 margin: 24rpx 0 —— 上下都有 12px（我之前只写了上边距，
   .mechanism 因此矮了 12px：134 → 122）。也没有 gap，间距由右箭头的 margin-left 出。 */
.mechanism .mechanism-detail {
    display: flex; align-items: center; justify-content: space-between;
    margin:round(down, calc(12 * var(--px)), 1px) 0;
    text-decoration: none; color: inherit;
}
.mechanism .mechanism-cover {
    flex: 0 0 round(down, calc(70 * var(--px)), 1px); height:round(down, calc(70 * var(--px)), 1px);
    border-radius:round(down, calc(6 * var(--px)), 1px); overflow: hidden; background: #f5f5f5;
}
.mechanism .mechanism-cover img { width: 100%; height: 100%; object-fit: cover; }
.mechanism .mechanism-detail-left { flex: 1; min-width: 0; }
/* 老站实测这一行高 25 —— 18px 字 × 默认行高。别设 align-items:center 之外的东西。 */
.mechanism .mechanism-detail-top {
    display: flex; justify-content: space-between; align-items: center;
    line-height:round(down, calc(25 * var(--px)), 1px);
    margin-bottom:round(down, calc(7 * var(--px)), 1px); gap:round(down, calc(6 * var(--px)), 1px);
}
/* ⚠ 老站是 .mechanism-detail-top > text（第一个），没有 .mechanism-name */
.mechanism .mechanism-detail-top > span:first-child {
    font-size:round(down, calc(18 * var(--px)), 1px); font-weight: 600; color: #1b1b1b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
}
.mechanism .clinic-fee {
    color: #fc6290; font-size:round(down, calc(14 * var(--px)), 1px); font-weight: bold;
    white-space: nowrap;
}
.mechanism .mechanism-detail-down {
    font-size:round(down, calc(12 * var(--px)), 1px); color: #aaa; font-weight: 300;
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
/* ⚠ 没有 margin-top —— 老站这里是行内 style，只有颜色/字号/flex */
.mechanism .mechanism-detail-resp {
    color: #aaa; font-size:round(down, calc(12 * var(--px)), 1px);
}
/* 老站 51rpx × 52rpx = 25.5 × 26，左边距 20rpx = 10px（不是百分比） */
.mechanism .mechanism-detail-right {
    width:round(down, calc(25.5 * var(--px)), 1px); height:round(down, calc(26 * var(--px)), 1px); flex-shrink: 0; margin-left:round(down, calc(10 * var(--px)), 1px);
}
.mechanism .mechanism-detail-right img { width: 100%; height: 100%; }

/* ===== 案例 .case (与医院详情相同结构,样式独立) ===== */
.head {
    display: flex; justify-content: space-between; align-items: center;
    padding:round(down, calc(20 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
}
.head .head-left {
    display: flex; align-items: center;
    font-size:round(down, calc(14 * var(--px)), 1px); font-weight: 500; color: #1b1b1b;
}
.head .head-left > div:first-child {
    width:0.5333%; height:round(down, calc(13 * var(--px)), 1px);
    background: #333; border-radius:round(down, calc(10 * var(--px)), 1px);
    margin-right:round(down, calc(6 * var(--px)), 1px);
}
.head .head-right {
    display: flex; align-items: center;
    font-size:round(down, calc(10 * var(--px)), 1px); color: #A1A1A1;
}
.head .head-right img { width:1.3333%; height:round(down, calc(9 * var(--px)), 1px); margin-left:round(down, calc(6 * var(--px)), 1px); }

.case {
    background: #fff; border-radius:round(down, calc(10 * var(--px)), 1px);
    padding:round(down, calc(8 * var(--px)), 1px); margin:0 round(down, calc(10 * var(--px)), 1px);
}
.case .case-list {
    display: flex; flex-wrap: wrap; gap:round(down, calc(12 * var(--px)), 1px);
    justify-content: space-around;
}
.case .case-item {
    width:calc(50% - 2.6667%); height:round(down, calc(210 * var(--px)), 1px);
    border-radius:round(down, calc(10 * var(--px)), 1px); overflow: hidden;
}
.case .cae-box { width: 100%; height: 100%; display: flex; flex-direction: column; }
.case .case-top { display: flex; flex: 1; }
.case .case-img {
    background-position: center; background-size: cover;
    width: 100%; height: 100%; background-color: #f5f5f5;
}
.case .case-bottom { background: #fff; padding:round(down, calc(5 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px); }
.case .case-title {
    font-size:round(down, calc(12 * var(--px)), 1px); color: #333;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    margin-bottom:round(down, calc(11 * var(--px)), 1px);
    line-height: 1.4;
}
.case .case-user { display: flex; align-items: center; }
.case .case-user img {
    width:5.3333%; height:round(down, calc(20 * var(--px)), 1px); border-radius: 50%;
    border: 1px solid #ccc; margin-right:round(down, calc(7 * var(--px)), 1px);
    object-fit: cover;
}
.case .case-user span { font-size:round(down, calc(12 * var(--px)), 1px); color: #afafaf; }

/* ===== 简历 .text(富文本,padding 已在 app.css 处理 .text img) ===== */
/* 简历富文本。⚠ 实测老站正文是 13px（14 是我按 28rpx 猜的） */
.text {
    font-size:round(down, calc(13 * var(--px)), 1px); color: #333;
    background: #fff; border-radius:round(down, calc(10 * var(--px)), 1px);
    margin:0 round(down, calc(10 * var(--px)), 1px); padding:round(down, calc(12 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
    line-height: 1.6;
    word-break: break-word; overflow-wrap: break-word;
}

/* ===== 特色项目 .project (2 列) ===== */
/* 老站 SCSS：width calc(100% - 32rpx)=calc(100% - 16px)、margin 0 auto、padding 16rpx=8px。
   ⚠ 之前写成 margin:0 10px，宽度就成了 355 而不是老站的 359。 */
.project {
    width: calc(100% - round(down, calc(16 * var(--px)), 1px));
    background: #fff; border-radius:round(down, calc(10 * var(--px)), 1px);
    margin: 0 auto round(down, calc(10 * var(--px)), 1px);
    padding:round(down, calc(8 * var(--px)), 1px);
    box-sizing: border-box;
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
}
/* 老站 calc(50% - 8rpx) = calc(50% - 4px)（我之前写成百分比，算出来偏窄） */
.project .project-detail {
    flex-shrink: 0; width:calc(50% - round(down, calc(4 * var(--px)), 1px));
    margin-bottom:round(down, calc(15 * var(--px)), 1px);
    text-decoration: none; color: inherit;
}
/* ⚠ 老站的项目图比我高 5px —— 不是尺寸不同（都是 168x110），是**行内基线空隙**：
   uni-app 的 <image> 编译成 uni-image，默认 inline-block，底下会留一条基线空隙；
   我的 <img> 被全局 `img { display:block }` 变成块级，没有这条空隙。
   实测 375 下差 5px、630 下差 6px（跟着字号缩放）。
   这里让它也走 inline-block，用同一个机制产生同样的空隙。 */
.project .project-detail img { display: inline-block; vertical-align: baseline; }
.project .project-detail img {
    width: 100%; height:round(down, calc(110 * var(--px)), 1px);
    border-radius:round(down, calc(7 * var(--px)), 1px); object-fit: cover;
}
.project .two-ellipsis {
    margin-top:round(down, calc(6 * var(--px)), 1px);
    font-size:round(down, calc(12 * var(--px)), 1px); color: #333;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.project .project-price-box { display: flex; align-items: center; margin-top:round(down, calc(5 * var(--px)), 1px); }
.project .project-price-value {
    font-size:round(down, calc(12 * var(--px)), 1px); color: #EF5189; font-weight: 700;
}
.project .project-price-currency { font-size:round(down, calc(10 * var(--px)), 1px); }
.project .project-price-unit { font-size:round(down, calc(10 * var(--px)), 1px); color: #606060; font-weight: normal; }

/* ===== 底部按钮组 .btns (与医院详情同结构,可独立) ===== */
.btns {
    position: fixed;
    bottom: 0;
    left: 50%; right: auto;
    transform: translateX(-50%);
    /* 跟随全站容器上限（--page-max，实测老站是 640）。
       ⚠ fixed 元素必须显式写 max-width —— 它不受父容器约束。 */
    max-width: var(--page-max); width: 100%;
    z-index: 55;
    background: #fff;
    box-sizing: border-box;
    padding:0 round(down, calc(10 * var(--px)), 1px);
    height:calc(calc(50 * var(--px)) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex; align-items: center;
    border-top: 1px solid #f1f1f1;
}
.btns .btns-detail {
    width: 100%;
    /* ⚠ stretch 不是 center：老站 .btns-img 是撑满 50 高的（实测 50 vs 42） */
    display: flex; align-items: stretch; justify-content: space-between;
    gap:round(down, calc(10 * var(--px)), 1px);
}
.btns .btns-detail .btns-img {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-decoration: none; color: inherit;
}
/* ⚠ .btns-img / .h5-app-text / .orderpoint 的定义统一在 app.css
   （数值照 pages/doctor/detail.vue 的 SCSS 实测）。这里原来那几条是早期
   凭印象写的：图标宽用了百分比、气泡是纯色 #FE739D 而不是渐变、字号 9 而不是 10。
   删掉，避免覆盖正确的定义。 */
.btns .btns-detail .btns-right {
    /* 宽度/收缩统一在 app.css（flex: 0 1 190px） */
    height:round(down, calc(40 * var(--px)), 1px);
    background: #FF9AC3;
    border-radius:round(down, calc(20 * var(--px)), 1px);
    display: flex; align-items: center; justify-content: center;
    font-size:round(down, calc(15 * var(--px)), 1px); color: #fff; position: relative;
}
.btns .btns-detail .btns-consult {
    background: #4CD964;
}


/* ── 按 PORTING_STANDARD §二：uni-app mode="aspectFill" → object-fit: cover ── */
.swiper-body .swiper-img,
.case .case-list .case-img,
.mechanism .mechanism-cover img,
.project .project-detail img,
.feedback-images img { object-fit: cover; }

/* §二：图标固定宽，内容图 100% */
.mechanism .mechanism-detail-right img { width: round(down, calc(16 * var(--px)), 1px); height: round(down, calc(16 * var(--px)), 1px); }
.case .case-list .case-bottom .case-user img { width: round(down, calc(20 * var(--px)), 1px); height: round(down, calc(20 * var(--px)), 1px); }

/* §一：区块标题不锁死宽度 */
.head .head-left, .head .head-right { width: auto; flex: none; white-space: nowrap; }

/* §二：轮播容器
   ⚠ 早先这里把高度写死成 375px「绕开 padding-bottom:100% 陷阱」——
     那是误判。老站 H5 分支就是 height:0 + padding-bottom:100%（永远 1:1），
     写死 375 在手机上看不出差别，但桌面 750 容器下轮播就不跟着变高了。
     正确做法：外层撑正方形，内层用绝对定位铺满。 */
.swiper-body { height: 0; padding-bottom: 100%; }
.swiper-body .swiper {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; flex-wrap: nowrap;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.swiper-body .swiper::-webkit-scrollbar { display: none; }
.swiper-body .swiper-track { display: flex; flex-wrap: nowrap; height: 100%; }
.swiper-body .swiper-item { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.swiper-body .swiper-img { width: 100%; height: 100%; }

/* 富文本图片死宽度 */
.text img, .cv-text img { max-width: 100% !important; height: auto !important; }