/* 多IP（站群）专题页专属样式 —— 多IP物理服务器 / 多IP裸机云
 * 还原 Confluence 设计稿（RakSmart_多IP物理服务器_推荐配置标题版.html / 多IP裸机云同款）。
 * 主题 token（颜色/间距/字号/字体）沿用精品CN2 专题页那一套：
 *   cn2-fonts.css + cn2-tailwind.css + cn2.css
 * 本文件承载两部分：
 *   1) 设计稿用到、但已编译的 cn2-tailwind.css 里没有的 Tailwind 工具类（见下）
 *   2) cn2.css 里没有的、多IP页新增的装饰类（.cn2-page 作用域内）
 */

/* ============================================================================
 * 1) 补齐缺失的 Tailwind 工具类
 *
 * 本仓库没有 Tailwind 构建环境，cn2-tailwind.css 是按「精品CN2 页面用到的类」
 * 预编译出来的产物。多IP 页面用到的下列工具类不在其中，缺了就完全没有样式 ——
 * 例如线路 tab 与地区 tab 之间的 mt-6 间距、hero 图容器的 w-[370px]/h-[260px]。
 *
 * 取值与 Tailwind 默认刻度一致：1=.25rem 2=.5rem 3=.75rem 4=1rem 6=1.5rem 12=3rem
 * 断点沿用同一套：sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536
 * 注意 2xl: 的类名以数字开头，CSS 里必须转义成 .\32xl\:
 *
 * 只有引入 group.css 的多IP 页面会加载，不影响其它页面。
 * 以后如果补了 Tailwind 构建，这一段可以整体删掉。
 * ========================================================================== */

/* flex / 对齐 */
.flex-1 { flex: 1 1 0%; }
.items-start { align-items: flex-start; }
.gap-3 { gap: .75rem; }

/* 外距 */
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-\[10px\] { margin-top: 10px; }
.mx-1 { margin-left: .25rem; margin-right: .25rem; }

/* 内距 */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.pb-12 { padding-bottom: 3rem; }

/* 字号 */
.text-sm { font-size: .875rem; line-height: 1.25rem; }

/* 尺寸 */
.max-w-full { max-width: 100%; }
.max-h-full { max-height: 100%; }
.max-w-3xl { max-width: 48rem; }
.w-\[370px\] { width: 370px; }
.h-\[260px\] { height: 260px; }
@media (min-width: 1280px) { .xl\:w-\[420px\] { width: 420px; } }
@media (min-width: 1536px) { .\32xl\:w-\[450px\] { width: 450px; } }

/* ----------------------------------------------------------------------------
 * filter-new 组件用 closest('li.container') 定过滤作用域，所以包裹「tab 区 + 产品表格」
 * 的那个 li 必须叫 container。但 Tailwind 的 .container 自带 max-width（640~1536px），
 * 会把里面本该整宽的 section 背景带压窄、且左对齐。这里只对多IP 页的这个包裹层解除限制。
 * -------------------------------------------------------------------------- */
.group-table-wrap,
.group-table-wrap > li.container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============================================================================
 * 2) 多IP页装饰类（cn2.css 里没有的）
 * ========================================================================== */

/* ===== 上新徽标（Banner 与「北美精品CN2方案」小节共用） ===== */
.cn2-page .launch-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    margin-bottom: 18px;
    border-radius: 9999px;
    background: #fff1e5;
    border: 1px solid #ffd5b6;
    color: #b85000;
    font-size: 13px;
    font-weight: 700;
}
.cn2-page .launch-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #FF8F32;
    box-shadow: 0 0 0 5px rgba(255, 143, 50, .12);
}

/* ===== 线路类型选择 ===== */
.cn2-page #line-tabs {
    padding-top: 10px;
}
.cn2-page .line-button {
    position: relative;
}
/* 不可用线路（当前实现不渲染不可用线路，保留以备后用） */
.cn2-page .line-button[aria-disabled="true"] {
    color: #a7adb7;
    background: #f0f1f3;
    border-color: #e1e3e7;
    cursor: not-allowed;
    box-shadow: none;
}
.cn2-page .line-button[aria-disabled="true"]:hover {
    background: #f0f1f3;
    color: #a7adb7;
}
.cn2-page .line-recommend {
    position: absolute;
    right: -7px;
    top: -10px;
    z-index: 30;
    padding: 1px 7px;
    border-radius: 9999px;
    background: #FF8F32;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    letter-spacing: .3px;
    box-shadow: 0 4px 10px rgba(255, 143, 50, .22);
}
/* ===== 多IP页纵向节奏：每一块只负责自己的「上外边距」 =====
   这样任何一块缺席（比如该地区没有筛选项、或没有线路说明），
   下面的块自己带着间距顶上来，不会塌成 0，也不会出现双倍间距。

   ⚠️ 只限定在多IP页（.group-config-section / .group-list-section 这两个 class
      只在 group-product-list.html 里出现）。
      .filter-container 的样式写在 public/filter-new.html 的内联 <style> 里，
      那个片段被 5 类列表页共用（cn2 / 裸机 / 独服 / 产品列表 / 多IP），
      而其中 product-bare-list-new、product-dedicated-list-new、cn2-product-list
      紧跟其后的表格都没有自己的上边距 —— 直接去掉那份公共的 margin-bottom，
      那几个页面会塌。要全站铺开的话，得同时给它们各自的下一块补上 margin-top。

   ⚠️ 别用 tailwind 的 mt-4 / pb-12 这类工具类：cn2-tailwind.css 是手工维护的静态快照，
      仓库里没有 tailwind 构建，只有已经编译进去的那些类才生效（margin-top 一族只有 .mt-1）。 */
.cn2-page .group-config-section .filter-container {
    margin-bottom: 0;
}
.cn2-page .group-list-section {
    margin-top: 16px;
}

/* 线路说明（设计稿「线路资源方案D：竖线稍长对齐版」）
   不是卡片：没有底色、边框、圆角和阴影，只有左侧一根橙色竖线 + 一行文字。
   标题行（原 font-semibold 的线路名）按需求方要求已从模板里删掉，这里不再有对应样式。 */
.cn2-page .line-description {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 8px;
    padding: 6px 0 6px 22px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* 竖线：定高 18px 并垂直居中，比单行文字略短一点，多行时也不会拉长 */
.cn2-page .line-description::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 18px;
    background: #ff8f32;
    border-radius: 2px;
}
.cn2-page .line-description .line-copy {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0;
    color: #606773;
    overflow-wrap: anywhere;
}

/* ===== 多 IP × 精品CN2 示意图 ===== */
.cn2-page .multi-ip-visual {
    position: relative;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(145deg, #18243a, #2e4c77);
    box-shadow: 0 22px 55px rgba(28, 45, 74, .18);
}
.cn2-page .multi-ip-visual::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -80px;
    top: -90px;
    border-radius: 9999px;
    background: rgba(255, 143, 50, .16);
}
.cn2-page .multi-ip-visual::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    left: -100px;
    bottom: -110px;
    border-radius: 9999px;
    background: rgba(59, 111, 221, .18);
}
.cn2-page .multi-ip-visual svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}