/* 文件名：guard.css */

/* --- 基础容器 --- */
.guard-content-box {
    text-align: center; /* 全局居中 */
    font-size: 16px;
    line-height: 1.8;
    padding: 10px 0;
    color: #333;
    overflow-y: auto;
}

/* 头部 Logo 容器 */
.guard-header-box {
    text-align: center;
    margin-bottom: 15px;
}

.guard-header-logo {
    height: 55px; /* 根据妇女报Logo实际长宽比微调 */
    display: inline-block;
}

/* 分割线 */
.guard-line {
    height: 1px;
    background-color: #eee;
    margin: 15px 0 25px 0;
    width: 100%;
}

/* --- 正文文本 --- */
.guard-body-text {
    font-size: 18px; /* 字体稍微加大，更清晰 */
    color: #333;
    line-height: 1.6;
    margin-bottom: 35px;
    padding: 0 20px;
    font-weight: 500;
}

/* --- 按钮组容器 --- */
.guard-btn-group {
    display: flex;
    justify-content: center;
    gap: 25px; /* 按钮之间的间距 */
    padding-bottom: 10px;
}

/* --- 红色按钮通用样式 --- */
.guard-btn-red {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px; /* PC端按钮宽度 */
    height: 44px;
    background-color: #e60012; /* 中国红 */
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid #e60012;
    cursor: pointer;
}

    .guard-btn-red:hover {
        background-color: #c4000f; /* 悬停深红 */
        border-color: #c4000f;
    }

    /* 描边风格按钮（可选：如果想让“立即订阅”和“登录”有所区分，可以用这个样式）
   目前代码里默认两个都是实心红，如需区分，可给其中一个加 .btn-outline 类 */
    .guard-btn-red.btn-outline {
        background-color: #fff;
        color: #e60012 !important;
    }

        .guard-btn-red.btn-outline:hover {
            background-color: #fff0f0;
        }

/* --- 移动端 & iPad 响应式适配 --- */

/* 屏幕宽度小于 768px (手机端) */
@media screen and (max-width: 950px) {
    .layui-layer {
        width: 90% !important;
        left: 5% !important;
    }

    .guard-header-logo {
        height: 40px; /* 手机端Logo缩小 */
    }

    .guard-body-text {
        font-size: 16px;
        padding: 0 5px;
        margin-bottom: 25px;
        text-align: justify; /* 手机端两端对齐可能更好看 */
    }

    .pc-break {
        display: none; /* 手机端隐藏强制换行 */
    }

    /* 手机端按钮改为上下堆叠，方便点击 */
    .guard-btn-group {
        flex-direction: column;
        gap: 15px;
        padding: 0 10px;
    }

    .guard-btn-red {
        width: 100%; /* 按钮撑满宽度 */
        height: 48px; /* 手机端加高一点，好点 */
    }
}