/*
 * view.jsp 页面级静态样式
 * 此文件包含与主题色 / JSP EL 无关的全部样式，可直接走 CDN（强缓存）。
 *
 * 拆分原则：
 *   - 内联（inline style="..."）：仅用于绝对个例的一次性微调
 *   - 页面 <style>：仅保留依赖 JSP EL（${background}/${compared}）的动态样式
 *   - 外联（本文件）：可被 CDN 缓存的静态样式 —— shop / 全局重置 / 控件覆盖 / 工具栏 / input-group
 */

/* ─── 全局重置 ─── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#title { font-weight: bold; }

body { touch-action: manipulation; }

::placeholder { color: #c3c3c3; }

button, i {
    cursor: pointer;
    border-radius: 3px;
}

#to-inquiry-button, #inquiry-button { font-weight: bold; }

.modal {
    touch-action: none;
    user-select: none;
    position: absolute;
    top: 3.33rem;
    left: 0;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
}
.modal > img { transform: translateZ(0); }

@keyframes scrollBanner {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-100% - 0.8rem), 0, 0); }
}

.openBlock {
    opacity: 1;
    animation: fadeIn 1s ease-out 6s forwards;
    transition: opacity 0.5s ease;
}
.openBlock:hover {
    cursor: pointer;
    animation: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}
@keyframes fadeIn { to { opacity: 0.6; } }


/* ─── ElementUI 微调 ─── */
.el-tree-node__content > .el-tree-node__expand-icon { padding: 15px 5px; }
.el-dialog__header { padding: 15px 20px; }
.el-dialog__headerbtn { top: 20px; }


/* ─── shop 模块样式 ─── */
.shopProfilePrice {
    font-size: 1.0rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shopProductList {
    min-width: 8.25rem; max-width: 8.25rem; width: 8.25rem; height: 5.8125rem;
}
.shopCallTitle {
    line-height: 1.5625rem;
    font-size: 1rem;
    font-weight: bold;
}
.shopCallVisits {
    font-size: 0.8rem;
    line-height: 1.5625rem;
}
.shopListTitle {
    height: 1.3125rem;
    font-size: 0.95rem;
    font-weight: bold;
}
.shopListProfile {
    height: 2.8rem;
    font-size: 0.95rem;
}
.shopDescription { font-size: 0.95rem; }
.shopInquiryButton {
    font-size: 0.935rem;
    line-height: 2.925rem;
}
.shopAddButton {
    font-size: 1.0rem;
    line-height: 2.925rem;
    font-weight: bold;
}
.shopInputValue {
    font-size: .85rem;
    line-height: 1.875rem;
    border: none;
    outline: none;
}
.shopInputLabel {
    font-size: .85rem;
    line-height: 1.875rem;
}
.shopInquiryInfo {
    font-size: 0.935rem;
    line-height: 1.525rem;
}
.shopHeader {
    font-size: 1.2rem;
    line-height: 1.825rem;
}
.toDetail {
    font-size: 0.8rem;
    line-height: 1.525rem;
}
.shopDescriptionTitle {
    height: 2.9875rem;
    font-size: 1.25rem;
    font-weight: bold;
}
#cart { font-weight: bold; }
.shopDetailItem {
    height: 1.5rem;
    font-size: 0.95rem;
}

@media screen and (max-width: 600px) {
    .shopProductList {
        min-width: 8.65rem; max-width: 8.65rem; width: 8.65rem; height: 6.8125rem;
    }
    .shopProfilePrice {
        font-size: 1.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .shopCallTitle {
        font-size: 1.2rem;
        line-height: 1.5625rem;
        font-weight: bold;
    }
    .shopCallVisits {
        font-size: 0.8rem;
        line-height: 1.2625rem;
    }
    .shopListTitle {
        height: 1.525rem;
        font-size: 1.25rem;
        font-weight: bold;
    }
    .shopListProfile {
        height: 3.2rem;
        font-size: 1.2rem;
    }
    .shopInquiryButton {
        font-size: 1.335rem;
        line-height: 4.525rem;
    }
    .shopAddButton {
        font-size: 0.95rem;
        line-height: 2rem;
        font-weight: 600;
        padding: 0 0.875rem;
        border-radius: 1rem;
    }
    .shopInputValue { font-size: 1.10rem; line-height: 2.075rem; border: none; outline: none; }
    .shopInputLabel { font-size: 1.10rem; line-height: 2.075rem; }
    .shopInquiryInfo {
        font-size: 1.335rem;
        line-height: 2.525rem;
    }
    .shopDescription { font-size: 1.25rem; }
    .shopHeader {
        font-size: 2.0rem;
        line-height: 2.825rem;
    }
    .toDetail { font-size: 1.2rem; }
    .shopDescriptionTitle {
        height: 2.9875rem;
        font-size: 1.35rem;
        font-weight: bold;
    }
    .shopDetailItem {
        height: 1.5rem;
        font-size: 1.2rem;
    }
}


/* ─── layui 弹层覆盖 ─── */
.layui-layer.layui-layer-page { background: black; }
.layui-layer-setwin .layui-layer-close2 {
    right: -18px;
    bottom: 18px;
    top: unset;
    width: 32px;
    height: 32px;
    background: url(/css/close.png) no-repeat;
    background-position: 0 0 !important;
}


/* ─── 移动端下工具栏：两行布局 = 翻页滑动条 + (页码 | 内联功能图标) ─── */
.flipbook-controls-mobile-bar {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    /* 整体回贴底部（bottom: 0），通过加大 padding-bottom 把内部元素整体抬高，
       避免之前 bottom:20px 在屏幕最底造成 20px 透明漏空。
       28 → 48 → 68：图标整体累计抬升 60px，让 icons 行离底部更远 */
    padding: 8px 8px 68px;    /* top/left/right 各 8px；bottom 68px = 8px 原 padding + 60px 抬升 */
    gap: 6px;
    box-sizing: border-box;
}
.flipbook-controls-mobile-bar .mobile-bar-row {
    display: flex;
    align-items: center;
    width: 100%;
}
/* slider 行：flex 居中，slider 占 2/3 宽度，两端留更多手指误触安全区。
   背景沿用 footer 的 --bg-color，并用负 margin 抵消 parent 8px 左右 padding，
   让 slider 行的底色横跨整个 bar 宽度，杜绝两端"漏出"页面背景 */
.flipbook-controls-mobile-bar .mobile-bar-row-slider {
    padding: 0;
    justify-content: center;
    background-color: var(--bg-color, transparent);
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px);   /* 抵消 margin 让父级布局尺寸不变 */
    box-sizing: border-box;
}
.flipbook-controls-mobile-bar .mobile-bar-row-controls {
    justify-content: center;
    align-items: center;       /* 内联图标在控件行内垂直居中 */
    gap: 8px;
}

/* ─── 翻页滑动条 ─── */
/* 主体颜色用主题色（toolbar-color），由 features/mobile-page-slider.js 在 skin 初始化后写入 :root */
.mobile-page-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 66.67%;     /* 工具栏宽度的 2/3，两端各留 ~1/6 安全间距 */
    flex: 0 0 66.67%;  /* 防止 flex 父容器把它拉伸到 100% */
    /* 整体高度抬到 44px（Apple HIG 推荐最小触控目标），轨道仍 3px 居中显示。
       这样手指在 thumb 上下任意 20px 内按住都能拖动，大幅降低拖动难度 */
    height: 44px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    outline: none;
    touch-action: none;     /* 防止竖向滚动抢手势，确保拖动响应灵敏 */
    --slider-color: var(--toolbar-color, #2e79c6);
}
.mobile-page-slider::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.28);
}
.mobile-page-slider::-moz-range-track {
    height: 3px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.28);
}
.mobile-page-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--slider-color);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    /* 居中：track 在容器中线，thumb 高 22 -> 上偏 (22-3)/2 = 9.5 ≈ 10 */
    margin-top: -10px;
    transition: transform 0.12s ease;
}
.mobile-page-slider::-webkit-slider-thumb:active {
    transform: scale(1.22);
}
.mobile-page-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--slider-color);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ─── 移动端内联功能图标（原 more 抽屉里的图标） ─── */
/* 布局策略：
 *   - 图标行整宽，所有图标 space-around 均布，自然居中
 *   - 当数量过多放不下时（默认能容纳 ~7 个），允许横向滚动且隐藏滚动条
 *   - 命中区按 Apple HIG / Material 标准放大到 ≥40px，按压有可见反馈
 *   - 给溢出方向加渐变蒙版，暗示可滚动
 */
.flipbook-controls-mobile-bar .mobile-inline-icons {
    display: flex;
    align-items: center;           /* 子项（每个图标）在本容器内垂直居中 */
    align-self: center;            /* 本块在控件行（mobile-bar-row-controls）内垂直居中 */
    justify-content: center;
    gap: 0;
    flex: 1 1 auto;
    width: 100%;
    min-height: 44px;              /* 保证容器有最小高度，让 align-items 居中有"中线"可对齐 */
    line-height: 1;                /* 避免外层行高干扰图标字形的垂直中线 */
    /* 图标过多时横向滚动，不撑破工具栏 */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    padding: 0 4px 30px 4px;        /* 底部 30px padding 把图标整体上抬，不影响 slider 行 */
    /* 右侧渐变蒙版，提示可向右滚（无溢出时不可见） */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
}
.flipbook-controls-mobile-bar .mobile-inline-icons::-webkit-scrollbar { display: none; }
.flipbook-controls-mobile-bar .mobile-inline-icon {
    flex: 0 0 50px;                       /* 50×50 命中区（从 40 加大 10px） */
    align-self: center;                   /* 自身在父行（mobile-inline-icons）内垂直居中 */
    width: 50px;
    height: 50px;
    /* 覆盖 index.min.css 中 .moreIcon 的 margin/padding，否则会破坏 50×50 盒子的对齐 */
    margin: 0 !important;
    padding: 0 !important;
    font-size: 32px;                      /* 字形图标随容器同步放大 10px (22 → 32) */
    line-height: 1;
    vertical-align: middle;
    border-radius: 12px;
    box-sizing: border-box;
    cursor: pointer;
    color: inherit;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, transform .1s ease;
}
/* 隐藏 iconfont ::before 字形 —— 当 SVG 通过 v-html 注入时，::before 会占一行把
   SVG 挤到下方，造成图标"上下两部分"。彻底关闭 ::before 输出，让 grid cell 内
   只剩 SVG 一个子项，精确居中 */
.flipbook-controls-mobile-bar .mobile-inline-icon.svghidden::before {
    content: none !important;
    display: none !important;
}
/* v-html 注入的 SVG 走 grid 自身对齐 */
.flipbook-controls-mobile-bar .mobile-inline-icon > svg {
    align-self: center;
    justify-self: center;
}
.flipbook-controls-mobile-bar .mobile-inline-icon:active {
    background-color: rgba(128, 128, 128, 0.18);
    transform: scale(0.92);
}
@media (hover: hover) {
    .flipbook-controls-mobile-bar .mobile-inline-icon:hover {
        background-color: rgba(128, 128, 128, 0.10);
    }
}
.flipbook-controls-mobile-bar .mobile-inline-icon svg {
    width: 32px;                   /* SVG 图标随容器同步放大 10px (22 → 32) */
    height: 32px;
    display: block;                /* block 才能被 flex align-items 精确居中（inline svg 会带 baseline 偏移） */
    margin: auto;                  /* 兜底：在 inline-flex 父盒内绝对居中 */
}

/* 旧版 more 触发按钮（保留 selector 兼容，但不再渲染） */
.flipbook-controls-mobile-bar .mobile-more-trigger {
    display: none !important;
}
/* 覆盖 index.min.css 的 ._nowpage 默认样式（CDN 版本带 position:absolute / left:10px / border:1px）：
   移动端工具栏中我们不需要这些，要的是 flex 居中、无边框、文字垂直居中 */
.flipbook-controls-mobile-bar .mobile-nowpage {
    display: inline-flex !important;
    align-items: baseline;
    justify-content: center;
    text-align: center;
    margin: 0;
    /* 精致的可点击胶囊：中性半透明底、无硬边、柔和圆角 */
    padding: 0px 25px !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(128, 128, 128, 0.13);
    cursor: pointer;
    position: static !important;
    left: auto !important;
    height: auto !important;
    line-height: 1;
    transition: background 0.18s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.flipbook-controls-mobile-bar .mobile-nowpage:active {
    background: rgba(128, 128, 128, 0.22);
    transform: scale(0.96);
}
/* 内部两个 span：当前页码强调，"/总页数" 弱化 */
.flipbook-controls-mobile-bar .mobile-nowpage > span {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    position: static !important;
    top: auto !important;
}
.flipbook-controls-mobile-bar .mobile-nowpage > #footer_current_page {
    font-size: 15px;
    font-weight: 600;
    line-height: 1 !important;
    top: auto !important;
}
/* "/总页数" 用更小字号 + 降透明度，与当前页拉开层次 */
.flipbook-controls-mobile-bar .mobile-nowpage > span:last-child {
    font-size: 12px !important;
    opacity: 0.55;
    margin-left: 1px;
}
.flipbook-controls-mobile-bar .desktop-inline-icon,
.flipbook-controls-mobile-bar .footer_logo,
.flipbook-controls-mobile-bar .zoom-panel-wraper {
    display: none !important;
}

/* ─── 移动端顶部 logo（左上角，替代书名位置）─── */
.header-mobile .mobile-header-logo {
    display: inline-flex;
    align-items: center;
    height: 32px;
    margin-left: 8px;
    text-decoration: none;
    line-height: 0;
    max-width: 140px;
}
.header-mobile .mobile-header-logo img {
    max-height: 28px;
    max-width: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ─── 桌面端 zoom 面板浮层：加深底色覆盖 CDN indexPage.min.css 的默认浅灰半透明 ─── */
.notmobile.zoom-panel-wraper,
.flipbook-controls .zoom-panel-wraper {
    background-color: rgba(10, 10, 10, 0.7) !important;
}
.notmobile.zoom-panel-wraper:hover,
.flipbook-controls .zoom-panel-wraper:hover {
    background-color: rgba(10, 10, 10, 0.9) !important;
}

/* ─── 移动端：水印 .mark（由 app.js 动态 append 到 .page-footer）改放到左上角 ─── */
/* （原先在此把 .mark 整体 display:none 是为了挡住底部出现，但水印是 fixed 定位的
    独立块，不会再受底部布局影响；保留 display:none 反而导致 fadeLogoTime 的交替
    无法显示 mark。已删除该隐藏规则。） */

@media (max-width: 768px) {
    /* mark 由 features/mobile-mark-logo-alt.js 搬进 .header-mobile 的 .mobile-alt-slot 槽位
       内，与 logo 在同一个绝对定位容器中通过 opacity 交替显示。
       注意：position 不设 static —— 让 JS 注入的 .mobile-alt-slot > .mark
       position:absolute 生效（与 logo 同位重叠） */
    .header-mobile a.mark,
    .header-mobile a.mobile-header-mark {
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0 !important;
        line-height: 0;
        text-decoration: none;
        z-index: auto !important;
    }
    .header-mobile a.mark img,
    .header-mobile a.mobile-header-mark img {
        width: auto !important;
        height: auto !important;
        max-height: 28px;
        max-width: 110px;
        display: block;
        object-fit: contain;
    }
}


/* ─── input-group 成组：分享链接 ─── */
.share-link-group {
    display: flex !important;
    align-items: stretch;
    width: 100%;
}
.share-link-group #shareLinkInput { flex: 1; }
.share-link-group #shareLinkInput .el-input__inner {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.share-link-group > .el-button--primary {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: 0 !important;
    white-space: nowrap;
}


/* ─── input-group 成组：销售线索 手机 + 验证码按钮 ─── */
.lead-mobile-group {
    display: flex !important;
    align-items: stretch;
    width: 100%;
}
.lead-mobile-group > #mobile {
    flex: 1;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.lead-mobile-group > .getSms {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
}


/* ─── 搜索结果命中词高亮 ─── */
.search-list mark.search-hit,
.skinbar mark.search-hit {
    background: #ffeb3b;
    color: #000;
    padding: 0 2px;
    border-radius: 2px;
}
/* 搜索结果项截到两行（命中词在 highlightSearch 中已被居中截取） */
.search-list .item span:last-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.4;
}


/* ─── moreDiv（移动端下工具栏展开的抽屉）：所有图标垂直中心对齐 ─── */
.moreDiv {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.moreDiv .moreIcon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}
.moreDiv .moreIcon {
    font-size: 32px;
}
.moreDiv .moreIcon svg {
    display: block;
    width: 32px;
    height: 32px;
}

/* ─── loading-pic book spine：与上下边线连续的中线 ─── */
/* 之前做法：在 .book__page::before 上画线，但 page #5 有 rotateY(-180deg) 翻转，
   会导致 ::before 也一起翻转、位置混乱、与边线不连续。
   现改为：在 .book 父容器自身上画一根固定的竖线，独立于翻页动画，绝对位置稳定。 */
.loading-pic.book {
    position: relative;
}
.loading-pic.book::before {
    content: '';
    position: absolute;
    left: 50%;             /* 书脊在书页中心（page 旋转轴 transform-origin: 0% 50% = left:50%） */
    margin-left: -0.9px;   /* 1.8px 粗线水平居中在 left:50% 的轴上 */
    top: -3px;             /* 与 3px 顶部边线连续 */
    bottom: -3px;          /* 与 3px 底部边线连续 */
    width: 1.8px;          /* 书脊粗细：原 3px 的 3/5 */
    background: var(--book-line, #999);
    z-index: -10;          /* 沉到所有 page 之后（page 用 z-index: -1 ~ -5） */
    pointer-events: none;
}

/* ─── fb-skeleton spinner ─── */
@keyframes fb-spin { to { transform: rotate(360deg); } }