/* =========================================================================
 * 广告字报价 —— 通用提示 / 弹窗样式（pages/1~20.html 与 ATQ.html 共用）
 * -------------------------------------------------------------------------
 * 为什么单独一份：
 *   css/01.css ~ css/20.css 是互为副本的 20 份产品样式，`.pcj`（下单提示）和
 *   `.xiaoxi`（提醒弹窗）在每一份里都写了一遍，且都是老写法：
 *     · .pcj  = 40px 定高灰条，长文案直接被裁；
 *     · .xiaoxi = left:40% + width:400px + height:250px，手机上既不在屏幕中间，
 *       高度还被 250px 锁死。
 *   这里统一覆盖一次，各产品 CSS 不用动；本文件必须在它们之后引入。
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * ① 「下单说明」提示卡 —— 核算价格后出现在页面下方（窄屏/手机）
 *    桌面端隐藏，桌面走页面里的 #xuzhi 区块。
 * ---------------------------------------------------------------------- */
.pcj {
    position: relative;
    box-sizing: border-box;
    display: none;
    width: 100%;
    height: auto;
    margin: 12px 0 18px;
    padding: 13px 15px 14px 45px;
    border: 1px solid #ffe0b8;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffaf4 0%, #fff1de 100%);
    box-shadow: 0 4px 14px rgba(255, 148, 23, .12);
    text-align: left;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.75;
    color: #7c4d10;
}

/* 左侧橙色圆形感叹号 */
.pcj::before {
    content: "!";
    position: absolute;
    left: 14px;
    top: 13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffb554 0%, #ff9417 100%);
    box-shadow: 0 2px 6px rgba(255, 148, 23, .35);
    color: #fff;
    font: 700 13px/20px "Microsoft YaHei", Arial, sans-serif;
    text-align: center;
}

.pcj b {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 700;
    color: #e07f00;
    letter-spacing: .3px;
}

/* -------------------------------------------------------------------------
 * ② 提醒弹窗（-温馨提醒- / -下单须知-）—— 桌面与手机统一：居中、高度自适应
 *    弹窗内部结构（.b-box / .s-box 等）的基础样式在 products.css 公共段，
 *    这里只做覆盖；不要把这些结构样式搬进来，ATQ.html 也用本文件。
 * ---------------------------------------------------------------------- */
.xiaoxi {
    /* 默认隐藏，由 js 显示；z-index / box-shadow 原来写在各产品 CSS 里，
       现在统一到这一份，别再依赖 01~20.css */
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    max-width: 420px;
    height: auto;
    max-height: 78vh;
    z-index: 9999;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .1);
    overflow: hidden;
}

.xiaoxi .b-box {
    width: 100%;
    height: auto;
    max-height: calc(78vh - 52px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 超窄屏（如 320×568）内容会多出 2~5px，默认 15px 粗滚动条很扎眼，换成细条 */
    scrollbar-width: thin;
    scrollbar-color: #d5dcdb transparent;
}

.xiaoxi .b-box::-webkit-scrollbar {
    width: 6px;
}

.xiaoxi .b-box::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #d5dcdb;
}

.xiaoxi .b-box h3 {
    padding: 16px 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e3d;
}

.xiaoxi .b-box p,
.xiaoxi #tis {
    margin: 0;
    padding: 8px 16px 14px;
    font-size: 14px;
    line-height: 1.78;
    /* 报错提示（产品页 -温馨提醒-）文字居中对齐弹窗 */
    text-align: center;
    color: #4a5453;
}

/* 长段说明（ATQ 的 -下单须知-）保持左对齐，居中读起来太散 */
.xiaoxi #tis.note-long {
    text-align: left;
}

/* 弹窗里的二维码：居中、手机上别铺满整屏 */
.xiaoxi .b-box img {
    display: block;
    width: 128px;
    max-width: 55%;
    height: auto;
    margin: 10px auto 0;
    border-radius: 8px;
}

/* 「客服微信号：XXX」这一行（ATQ 下单须知） */
.xiaoxi .kf-line {
    padding: 0 16px 14px;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: #7b8d8c;
}

/* 这里是弹窗里唯一需要"看得清、扫得动"的图：原来 108px 宽（图是 356×200 横图，
   二维码本体只占 43%，实际只有 ~46px）→ 换成裁好的正方形图并放大到 176px */
.xiaoxi .kf-line img {
    width: 176px;
    max-width: 72%;
    margin: 10px auto 0;
    border-radius: 6px;
}

/* 320px 这类超窄屏再收一点，免得弹窗内容要滚动才能看全 */
@media (max-width: 360px) {
    .xiaoxi .kf-line img {
        width: 150px;
    }
}

.xiaoxi .s-box,
.xiaoxi .s-box a,
.xiaoxi #check {
    height: 52px;
    line-height: 52px;
}

.xiaoxi .s-box a,
.xiaoxi #check {
    font-size: 16px;
    letter-spacing: 2px;
}

/* -------------------------------------------------------------------------
 * ③ 窄屏（手机 / 窄窗口）才打开提示卡
 * ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .pcj {
        display: block;
    }
}