/* 文件名：guard.css */

/* 优化长文字的排版容器 */
.guard-content-box {
    text-align: justify; /* 两端对齐，显得专业 */
    font-size: 15px;
    line-height: 1.8; /* 宽松行高 */
    padding: 5px 0;
    color: #333;
}

/* 辅助文字样式（如：提示支持在线支付） */
.guard-sub-text {
    color: #999;
    font-size: 13px;
    display: block;
    margin-top: 10px;
}

/* 移动端强制适配 Layer 弹窗 */
@media screen and (max-width: 500px) {
    .layui-layer {
        max-width: 90% !important;
        left: 5% !important;
    }
}

/* --- 追加到 guard.css --- */

/* 1. 顶部 Logo 样式 */
.guard-header-logo {
    display: block;
    height: 50px; /* Logo高度，根据实际图片调整 */
    margin-bottom: 15px;
    /* 如果你的 Logo 图片自带白底，就不需要背景色；如果是透明png，可能不需要调整 */
}

.guard-line {
    height: 1px; /* 线条高度 */
    background-color: #e5e5e5; /* 浅灰色 (根据喜好可改成 #ddd 或 #eee) */
    margin: 10px 0 15px 0; /* 上边距10px，下边距15px，拉开层次 */
    border: none;
    width: 100%; /* 撑满宽度 */
}

/* 1. 标题加粗 */
.guard-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    color: #000;
}

/* 称呼样式 (顶格，不缩进) */
.guard-salutation {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 0 10px; /* 保持和正文一样的左右边距 */
    margin-bottom: 5px; /* 和正文隔开一点点 */
}

/* 2. 引言文字 */
.guard-intro {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 25px;
    padding: 0 10px;
    /* 【核心修改】首行缩进两个字 */
    text-indent: 2em;
    /* 确保文本两端对齐，缩进效果最好看 */
    text-align: justify;
}

/* 3. [核心修改] 统一的大灰色背景块 */
.guard-gray-container {
    background-color: #f2f2f2; /* 浅灰底色 */
    border-radius: 8px; /* 圆角 */
    padding: 30px 40px; /* 内部留白，PC端宽敞一些 */
    margin-bottom: 10px;
}

/* 3. 订阅方式的卡片容器 */
.guard-method-box {
    background-color: #f8f9fa; /* 浅灰背景 */
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
}

/* 4. 方式标题 (黑色、加粗) */
.guard-method-title {
    color: #000; /* 纯黑 */
    font-weight: bold; /* 加粗 */
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 8px;
    text-indent: 2em;
    /* 确保文本两端对齐，缩进效果最好看 */
    text-align: justify;
}

/* 5. 方式描述文字 */
.guard-method-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    text-indent: 2em;
    /* 确保文本两端对齐，缩进效果最好看 */
    text-align: justify;
}

/* 6. [核心修改] 按钮样式 (蓝色、固定宽度、居中) */
.guard-btn-action {
    display: block;
    width: 200px; /* 固定宽度 */
    margin: 20px auto 40px auto; /* 上下留白，水平居中(auto) */
    padding: 12px 0;
    background-color: #5a8dee; /* 仿图中的蓝色 */
    color: #fff !important;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(90, 141, 238, 0.4); /* 加一点阴影更有质感 */
    transition: background 0.3s;
}

    .guard-btn-action:hover {
        background-color: #4a7cce; /* 悬停深蓝 */
    }

/* 7. 二维码容器及图片 */
.guard-qrcode-box {
    text-align: center;
    margin-top: 10px;
}

.guard-qrcode-img {
    width: 140px;
    height: 140px;
    background-color: #fff;
    padding: 5px; /* 给二维码加个白边，更好看 */
    border-radius: 4px;
}

/* --- 追加到 guard.css --- */

/* 优化：给内容区域加一个最大高度，防止内容太长时不仅没有滚动条，还撑破弹窗 */
.guard-content-box {
    /* 其他样式保持不变 */
    overflow-y: auto; /* 超出高度允许滚动 */
    padding-right: 5px; /* 给滚动条留点位置 */
}

.text-mobile-only {
    display: none;
}

/* === 移动端核心适配代码 === */

/* === 移动端 & 平板适配 (屏幕宽度 < 950px) === */
@media screen and (max-width: 950px) {
    /* 1. 【核心】大幅减少灰色块的内边距 */
    .guard-gray-container {
        /* 原来是 padding: 20px 15px; */
        padding: 15px 10px !important; /* 左右只留10px，尽可能给文字腾地方 */
    }

    .guard-line {
        margin: 8px 0 12px 0; /* 手机上间距稍微缩小一点 */
    }

    /* 1. 强制重置 Layer 弹窗的宽度和位置 */
    .layui-layer {
        width: 90% !important; /* 宽度占屏幕 90% */
        left: 5% !important; /* 左右居中 (100-90)/2 */
        margin-left: 0 !important;
    }

    /* 2. 处理高度问题：如果屏幕很矮，弹窗内容区域必须限制高度并可滚动 */
    .layui-layer-content {
        max-height: 70vh !important; /* 内容最多占屏幕高度的 70% */
        overflow-y: auto !important; /* 允许纵向滚动 */
        -webkit-overflow-scrolling: touch; /* 让 iOS 滚动更丝滑 */
    }

    /* 3. 微调字号，手机上字太大显得拥挤 */
    .guard-title {
        font-size: 16px;
    }

    .guard-intro {
        font-size: 15px;
        margin-bottom: 15px; /* 拉近引言和灰色块的距离 */
    }

    .guard-method-title {
        font-size: 16px;
        margin-top: 5px; /* 减少标题上方的空隙 */
        margin-bottom: 5px;
    }

    .guard-method-desc {
        font-size: 15px;
        margin-bottom: 8px; /* 减少描述文字下方的空隙 */
        line-height: 1.5; /* 稍微调小一点行高 */
    }

    /* 4. Logo 也可以稍微缩小，省空间 */
    .guard-header-logo {
        height: 35px; /* 原来50px，手机上改小一点 */
        margin-bottom: 10px;
    }

    /* 2. 压缩按钮周边的巨大留白 */
    .guard-btn-action {
        width: 100% !important; /* 【建议】手机上按钮直接撑满，视觉上更饱满 */
        /* 原来是 margin: 20px auto 40px auto; 下边距40px太大了 */
        margin: 15px 0 25px 0 !important;
        font-size: 15px; /* 稍微改小一点字号，避免按钮太显眼抢戏 */
    }

    /* 4. 针对二维码的文字提示进行优化 */
    .guard-qrcode-box .mobile-tip {
        display: block !important; /* 显示“长按识别”提示 */
    }

    .text-pc-only {
        display: none;
    }

    .text-mobile-only {
        display: inline !important; /* 强制显示 */
    }
}

/* PC端默认隐藏“长按识别”提示 */
.mobile-tip {
    display: none;
}