/* ============================================
   隐私政策页面专属样式
   Privacy Policy Page - maibangtech.com
   ============================================ */

/* --- 页面 Banner --- */
.privacy-banner {
    width: 100%;
    height: 3.6rem;
    background: linear-gradient(135deg, #0a4d8c 0%, #00A7FF 100%);
    position: relative;
    overflow: hidden;
}

.privacy-banner .content-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.privacy-banner .banner-title {
    font-size: .56rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.08rem;
}

.privacy-banner .lang-switch-banner {
    position: absolute;
    top: 0;
    right: 1.5rem;
    z-index: 10;
}

/* --- 语言切换按钮 --- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.lang-switch:hover {
    border-color: #00A7FF;
}

.lang-switch-btn {
    padding: .12rem .28rem;
    font-size: .26rem;
    color: rgba(255,255,255,0.7);
    background: transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.lang-switch-btn.active {
    background: #00A7FF;
    color: #fff;
}

/* Header 内的语言切换 */
.header .lang-switch {
    border-color: #00A7FF;
    margin-left: .15rem;
    vertical-align: middle;
}

.header .lang-switch-btn {
    font-size: .28rem;
    color: #00A7FF;
    padding: .1rem .24rem;
}

.header .lang-switch-btn.active {
    background: #00A7FF;
    color: #fff;
}

/* --- 内容区 --- */
.privacy-content {
    padding: .6rem 0 1.2rem;
    background: #fff;
    min-height: 60vh;
}

/* 内容区顶部语言切换栏 */
.privacy-content .header-box {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 .4rem;
    display: flex;
    justify-content: flex-end;
    margin-bottom: -.1rem;
}

.privacy-content .lang-switch {
    border-color: #00A7FF;
    background: #fff;
}

.privacy-content .lang-switch-btn {
    font-size: .3rem;
    color: #00A7FF;
    padding: .14rem .36rem;
    font-weight: 500;
}

.privacy-content .lang-switch-btn.active {
    background: #00A7FF;
    color: #fff;
}

.privacy-article {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 .4rem;
}

/* 语言容器 - 显隐控制 */
.lang-zh,
.lang-en {
    display: none;
}

.lang-zh.active,
.lang-en.active {
    display: block;
}

/* ---- 文章排版 ---- */
.privacy-article h1 {
    font-size: .48rem;
    color: #222;
    text-align: center;
    margin-bottom: .5rem;
    font-weight: 700;
    line-height: 1.4;
}

.privacy-article h2 {
    font-size: .34rem;
    color: #333;
    margin-top: .6rem;
    margin-bottom: .25rem;
    padding-left: .16rem;
    border-left: 4px solid #00A7FF;
    line-height: 1.5;
    font-weight: 600;
}

.privacy-article h3 {
    font-size: .28rem;
    color: #444;
    margin-top: .4rem;
    margin-bottom: .18rem;
    font-weight: 600;
    line-height: 1.5;
}

.privacy-article p {
    font-size: .26rem;
    color: #555;
    line-height: 1.85;
    margin-bottom: .22rem;
    text-align: justify;
}

.privacy-article ul,
.privacy-article ol {
    margin: .2rem 0 .25rem .3rem;
    padding: 0;
    list-style: none;
}

.privacy-article ul li,
.privacy-article ol li {
    font-size: .26rem;
    color: #555;
    line-height: 1.85;
    margin-bottom: .12rem;
    padding-left: .3rem;
    position: relative;
}

.privacy-article ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00A7FF;
    position: absolute;
    left: 0;
    top: .55em;
}

.privacy-article ol li {
    counter-increment: privacy-ol;
}

.privacy-article ol li::before {
    content: counter(privacy-ol) '.';
    color: #00A7FF;
    font-weight: 600;
    position: absolute;
    left: 0;
}

.privacy-article ol {
    counter-reset: privacy-ol;
}

.privacy-article table {
    width: 100%;
    border-collapse: collapse;
    margin: .3rem 0;
    font-size: .24rem;
}

.privacy-article table th,
.privacy-article table td {
    border: 1px solid #e0e0e0;
    padding: .14rem .2rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}

.privacy-article table th {
    background: #f7f9fc;
    color: #333;
    font-weight: 600;
}

.privacy-article strong {
    color: #333;
    font-weight: 600;
}

.privacy-article a {
    color: #00A7FF;
    text-decoration: none;
}

.privacy-article a:hover {
    text-decoration: underline;
}

.privacy-article .update-date {
    font-size: .24rem;
    color: #999;
    text-align: right;
    margin-bottom: .4rem;
}

/* 最后更新时间 */
.privacy-article .last-updated {
    font-size: .24rem;
    color: #999;
    text-align: center;
    margin-top: .8rem;
    padding-top: .4rem;
    border-top: 1px solid #eee;
}

/* ---- 目录导航（可选）---- */
.toc-nav {
    max-width: 900px;
    margin: 0 auto .4rem;
    padding: .3rem .4rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e8ecf0;
    display: none; /* 移动端默认隐藏 */
}

.toc-nav.active {
    display: block;
}

.toc-nav-title {
    font-size: .26rem;
    color: #666;
    margin-bottom: .15rem;
    font-weight: 600;
}

.toc-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .3rem;
}

.toc-nav ul li a {
    font-size: .24rem;
    color: #00A7FF;
    text-decoration: none;
}

.toc-nav ul li a:hover {
    text-decoration: underline;
}

/* ---- 更新日期条 ---- */
.privacy-update-bar {
    max-width: 900px;
    margin: 0 auto .3rem;
    padding: 0 .4rem;
}

.privacy-update-bar span {
    font-size: .24rem;
    color: #999;
}

/* ============================================
   响应式适配
   ============================================ */

@media screen and (max-width: 768px) {
    .privacy-banner {
        height: 2.8rem;
    }

    .privacy-banner .banner-title {
        font-size: .42rem;
        letter-spacing: 0.05rem;
    }

    /* 内容区语言切换移动端适配 */
    .privacy-content .lang-switch-btn {
        font-size: .28rem;
        padding: .12rem .3rem;
    }

    /* Header 中语言切换在移动端微调 */
    .header .lang-switch {
        transform: scale(0.9);
        transform-origin: right center;
    }

    .privacy-article h1 {
        font-size: .38rem;
    }

    .privacy-article h2 {
        font-size: .3rem;
    }

    .privacy-article h3 {
        font-size: .26rem;
    }

    .privacy-article p,
    .privacy-article ul li,
    .privacy-article ol li {
        font-size: .25rem;
        line-height: 1.8;
    }

    .privacy-content {
        padding: .4rem 0 1rem;
    }

    .privacy-article {
        padding: 0 .3rem;
    }
}