/* ==========================================================================
   BTmimi Custom CSS — 由 layouts/ 下各模板的 <style> 块与行内样式合并而来
   加载顺序：bulma.min.css 之后加载（见 partials/head.html）
   合并说明：
   - .list-header / .sticky-sidebar / .sticky-main / .ip-text 原本在两个模板中重复定义，已去重
   - .sidebar-link 在 dns-list/list.html 与 partials/sidebar.html 冲突，
     以 sidebar.html 版为准（transition 含 color 0.2s ease，更完整）
   - .table-container 与 Bulma 原生类重名，已更名为 .dns-table-container，避免污染 Bulma
   - 原各模板中的行内 style 已提取为下方「通用工具类」
   ========================================================================== */


/* ===== 1. 全站基础小工具（原 partials/head.html 内联样式） ===== */
.user-select-all { user-select: all; }
.is-vertical-center { display: flex; align-items: center; }
.faq-q { font-weight: bold; color: #4a4a4a; margin-top: 1.5rem; }
.faq-a { margin-bottom: 0.5rem; }


/* ===== 2. 404 页（原 layouts/404.html） ===== */
.error-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-card {
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f3f8;
    padding: 4rem 2rem;
    max-width: 600px;
    width: 100%;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}
/* 顶部细长的渐变装饰条 */
.error-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(135deg, #209cee 0%, #3273dc 100%);
}
.error-title {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.5rem;
    /* 渐变文字效果 */
    background: linear-gradient(135deg, #209cee 0%, #3273dc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 10px 20px rgba(32, 156, 238, 0.15);
}
.error-subtitle {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}
.error-desc {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}
.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-custom {
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
    font-weight: 600;
}
.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}


/* ===== 3. 首页（原 layouts/index.html） ===== */
.hero-gradient { background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf7 100%); }
.modern-box { border-radius: 12px; border: 1px solid #f0f3f8; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
.country-tag { border-radius: 8px; border: 1px solid #eef1f5; background: #fff; transition: all 0.3s ease; }
.country-tag:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(32,156,238,0.1); border-color: #209cee; color: #209cee !important; }
.faq-item { border-bottom: 1px solid #f0f0f0; padding-bottom: 1rem; margin-bottom: 1rem; }
.faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* 右侧浮动跟随（首页 / dns-list 列表页共用，原两处定义相同，已合并） */
.sticky-sidebar {
    position: -webkit-sticky; /* 兼容 Safari */
    position: sticky;
    top: 2rem; /* 距离浏览器顶部的悬浮距离，可根据需要调整 */
    z-index: 10;
}


/* ===== 4. 列表页头部（dns-list/list.html 与 dns-server/list.html 重复，已合并） ===== */
.list-header { border-bottom: 1px solid #eee; padding-bottom: 1rem; }


/* ===== 5. 国家/地区列表页（原 layouts/dns-list/list.html） ===== */
.country-card { border-radius: 8px; border: 1px solid #eef1f5; background: #fff; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.country-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(32,156,238,0.1); border-color: #209cee; color: #209cee !important; }


/* ===== 6. 国家详情页（原 layouts/dns-list/single.html） ===== */
.single-hero { border-radius: 12px; background: linear-gradient(135deg, #f5f9ff 0%, #e1efff 100%); border: 1px solid #cce2ff; }
.nav-card { border: 1px solid #eee; border-radius: 8px; padding: 1rem; transition: all 0.2s ease; background: #fff; }
.nav-card:hover { border-color: #209cee; box-shadow: 0 4px 12px rgba(32,156,238,0.1); }

/* 左侧主内容浮动（dns-list/single.html 与 dns-server/single.html 重复，已合并） */
.sticky-main {
    position: -webkit-sticky;
    position: sticky;
    top: 2rem; /* 距离浏览器顶部的悬浮高度 */
    z-index: 10;
}


/* ===== 7. 服务商列表页（原 layouts/dns-server/list.html） ===== */
.provider-card { border-radius: 12px; border: 1px solid #eef1f5; background: #fff; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.02); height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.provider-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(32,156,238,0.12); border-color: #209cee; }
.card-image-wrapper { padding: 1.5rem; display: flex; justify-content: center; align-items: center; height: 120px; background: #fafbfc; border-bottom: 1px solid #f5f7fa; }
.card-image-wrapper img { max-height: 60px; max-width: 80%; object-fit: contain; transition: transform 0.3s ease; }
.provider-card:hover .card-image-wrapper img { transform: scale(1.05); }
.card-content { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; }


/* ===== 8. 服务商详情页（原 layouts/dns-server/single.html） ===== */
.provider-hero { border-radius: 12px; background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); border: 1px solid #e2e8f0; padding: 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.provider-logo-box img { max-height: 80px; object-fit: contain; }

/* 注意：原类名 .table-container 与 Bulma 原生 .table-container 冲突，已更名 */
.dns-table-container { background: #fff; border: 1px solid #edf2f7; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.02); margin-bottom: 2rem; }

.custom-table th { background-color: #f8fafc; color: #64748b; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; border-bottom: 2px solid #edf2f7; }
.custom-table td { vertical-align: middle; padding: 1rem 0.75rem; }

.section-title { position: relative; padding-left: 12px; margin-bottom: 1rem; color: #1e293b; font-weight: 700; font-size: 1.25rem; }
.section-title::before { content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 4px; background-color: #209cee; border-radius: 2px; }


/* ===== 9. 侧边栏（原 layouts/partials/sidebar.html） ===== */
.sidebar-title {
    border-radius: 8px; /* 圆角背景 */
    background-color: #f0f4f8; /* 柔和的浅灰蓝色背景 */
    color: #2c3e50;
    font-size: 1.05rem;
}

/* Best DNS Servers 的链接特效（防折行 + 省略号 + 悬停微动）
   冲突解决：dns-list/list.html 中也定义过 .sidebar-link（transition 少 color），
   此处以 sidebar.html 版为准 */
.sidebar-link {
    display: block;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
    color: #4a4a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-link:hover {
    background-color: #f5f9ff;
    color: #209cee;
}

/* 国家列表链接特效 */
.country-link {
    display: block;
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.country-link:hover {
    color: #209cee !important;
}


/* ===== 10. 页脚（原 layouts/partials/footer.html 行内样式提取） ===== */
.site-footer { border-top: 1px solid #eee; }
.footer-links { line-height: 2; }
.footer-hr { height: 1px; background-color: #eee; margin: 1.5rem 0; }


/* ===== 11. IP 地址文本（dns-list/single.html 与 dns-server/single.html 重复，已合并） ===== */
.ip-text { font-family: 'Courier New', Courier, monospace; font-size: 1.15rem; font-weight: 600; color: #2c3e50; }


/* ===== 12. 通用工具类（由原各模板行内 style 提取） ===== */

/* 主按钮蓝色光晕：首页 "Browse All DNS Servers"、404 "Return Home" */
.btn-glow { box-shadow: 0 4px 15px rgba(32,156,238,0.3); }

/* 404 "Browse by Country" 白底描边按钮 */
.btn-outline-custom { border: 1px solid #e2e8f0 !important; color: #4a5568; }

/* 首页 DNS 示意图 */
.hero-img { border-radius: 8px; max-height: 200px; }

/* 首页提示条 / 小圆角 */
.radius-8 { border-radius: 8px; }

/* 首页 Best Public DNS 表格（去掉 bulma 表格默认背景） */
.table-transparent { background: transparent; }

/* 首页表格里的 IP code 标签 */
.code-soft { background: #f5f7fa; color: #4a4a4a; }

/* highlight 国家/地区高亮（原模板里 {{ if .Params.highlight }} 的行内样式）
   用法：<a ... class="country-tag country-tag-highlight"> */
.country-tag-highlight { font-weight: bold; border-color: #209cee !important; color: #209cee !important; }
.country-card-highlight { font-weight: bold; border-color: #209cee !important; color: #209cee !important; }
.country-link-highlight { font-weight: bold; color: #209cee !important; }

/* 侧边栏/推荐区卡片盒子（sidebar.html、dns-list/list.html 行内样式提取，两处相同） */
.sidebar-box { border-radius: 12px; border: 1px solid #f0f3f8; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }

/* 详情页左侧主内容盒子 */
.main-box { border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid #f0f3f8; }
/* 服务商详情页额外内边距（原行内 padding: 2rem） */
.main-box-padded { padding: 2rem; }

/* IP 行：IP 文本 + 复制图标 横向排列 */
.ip-row { display: flex; align-items: center; gap: 10px; }
.ip-row-sm { display: flex; align-items: center; gap: 8px; }

/* 复制按钮图标（JS 里 button.style.color 的行内覆盖优先级高于此类，复制交互不受影响） */
.copy-btn { cursor: pointer; color: #cbd5e1; transition: color 0.2s; }

/* 国家详情页正文区广告容器 */
.google-ad-box { border-radius: 8px; overflow: hidden; background: #fafafa; }

/* 服务商详情页：标题行（logo + 名称）、官网按钮过渡、正文的行高 */
.provider-title-row { gap: 1.5rem; }
.btn-transition { transition: all 0.3s; }
.content-lh { line-height: 1.8; }

/* about / privacy 正文排版（原两页行内样式不同，保留两个类） */
.legal-content { line-height: 1.8; color: #444; }
.legal-content-alt { line-height: 1.6; color: #4a4a4a; }