/* ==========================================================================
   7kf 移动端适配补丁（mobile.css）
   - 只在 max-width:768px 生效，桌面端零影响
   - 载入顺序在 home.css / page-faka.css 之后；用 `html body` 前缀提升特异性，
     以压过 home.css 里带 !important 的老规则（含 sidebar-platform.php 里二次加载的 home.css?v=9）
   ========================================================================== */

/* ---------- 结构性基础样式（桌面也生效，供模板改用 class） ---------- */
.kf-uc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.kf-uc-main  { display: flex; gap: 8px; align-items: flex-start; }
.kf-uc-side  { width: 107px; flex-shrink: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); overflow: hidden; padding: 8px 0; }
.kf-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kf-table-scroll table { margin: 0; }

/* 右侧资源栏的手机触发器（桌面隐藏） */
.kf-dl-fab, .kf-dl-mask { display: none; }
/* 「留言板」右上角悬浮按钮（桌面隐藏，手机上与右下角「共享资源」同款） */
.kf-msg-fab { display: none; }

/* 下层导航「商品购买 / 帐号购买」双文案：桌面显示「商品购买」，手机显示「帐号购买」 */
.kf-lbl-m { display: none; }

/* 首页分类标题（白色胶囊）：桌面 + 手机统一缩小（原 17px / padding 12·16 / 圆角 15） */
.kf-faka-page .kf-group-head {
    gap: 6px !important;
    margin-bottom: 9px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
}
.kf-faka-page .kf-group-head h2 {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
.kf-faka-page .kf-group-count {
    font-size: 9px !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
}
/* 首页内容区上移一点，让缩小后的胶囊别和导航条隔得太远（手机端在下面覆盖为 -14px） */
.kf-home-wrap { margin-top: -18px !important; }


@media (max-width: 768px) {

    /* 手机上「商品购买」用底部面板替代，桌面那套 hover 下拉直接关掉
       （否则 tap 后 hover 状态残留，会在面板后面露出一个灰框） */
    html body .kf-subnav-dropdown { display: none !important; }

    /* 导航文案：手机显示「帐号购买」 */
    html body .kf-lbl-pc { display: none !important; }
    html body .kf-lbl-m { display: inline !important; }

    /* ===== 1. 内容区不再给左侧留 100px：内页全部拿满屏宽 ===== */
    html body .kf-page-wrap,
    html body .kf-content-wrap,
    html body .kf-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: auto !important;
    }
    html body .kf-page-wrap {
        padding: 16px 12px !important;
    }
    /* 商品详情 / 分类页：面包屑贴紧上方导航条 */
    html body .kf-page-wrap.kf-faka-page {
        margin-top: -16px !important;
        padding-top: 6px !important;
    }
    html body .kf-home-wrap {
        /* 收掉导航条与第一个分类标题之间多出来的一段空白（原 33px，现约 12px） */
        margin-top: -14px !important;
        padding: 8px 10px 14px !important;
    }

    /* 正文里的图片/视频/iframe 不许撑破屏幕 */
    html body .kf-page-wrap img,
    html body .kf-page-wrap video,
    html body .kf-page-wrap iframe,
    html body .kf-page-wrap table { max-width: 100%; }
    html body .kf-page-wrap img { height: auto; }

    /* ===== 2. 底部安全区：只给悬浮按钮留一点余量（底部导航条已移除） ===== */
    html body { padding-bottom: 22px !important; }

    /* ===== 3. 底部平台 Tab 条：手机端整体移除 =====
       该条由 sidebar-platform.php 输出（.kf-sidebar），桌面端仍是左侧竖栏；
       手机上不再需要这排导航按钮，分类入口统一走下导航「帐号购买」的底部面板。 */
    html body .kf-sidebar { display: none !important; }

    /* ===== 4. 右侧资源栏 → 抽屉 + 悬浮按钮（原来手机上被 display:none 掉了） ===== */
    html body .kf-dl-float {
        display: flex !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-height: 74vh !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 3000 !important;
        border-radius: 12px !important;
    }
    html body .kf-dl-float .kf-dl-nav {
        max-height: 74vh !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
    }
    /* 收起时不占位（移动端用悬浮按钮控制） */
    html body .kf-dl-float.kf-dl-collapsed {
        display: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    html body .kf-dl-fab {
        display: flex !important;
        position: fixed !important;
        right: 12px !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 3001 !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        padding: 0 14px !important;
        border: none !important;
        border-radius: 20px !important;
        background: linear-gradient(180deg,#7fbf4d 0%,#63a62f 100%) !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 14px rgba(99,166,47,.45) !important;
        cursor: pointer !important;
    }
    /* 「留言板」：从导航条里拿出来，改成右上角悬浮按钮，样式与右下角「共享资源」完全一致 */
    html body .kf-nav-msg { display: none !important; }
    html body .kf-msg-fab {
        display: flex !important;
        position: fixed !important;
        right: 12px !important;
        top: 152px !important; /* 兜底值；JS 会按导航条实际高度覆盖 */
        z-index: 3000 !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        padding: 0 14px !important;
        border: none !important;
        border-radius: 20px !important;
        background: linear-gradient(180deg,#7fbf4d 0%,#63a62f 100%) !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        box-shadow: 0 4px 14px rgba(99,166,47,.45) !important;
        cursor: pointer !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    html body .kf-dl-mask {
        display: block !important;
        position: fixed !important;
        /* 不用 inset 简写：手机 Chrome 78 起才支持 inset，老内核会算成 0 尺寸 */
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        background: rgba(0,0,0,.35) !important;
        z-index: 2999 !important;
    }
    html body .kf-dl-mask[hidden] { display: none !important; }

    /* ===== 5. 商品详情页 ===== */
    html body .kf-faka-page .kf-detail-card { padding: 14px !important; }
    html body .kf-faka-page .kf-detail-main { flex-direction: column !important; gap: 12px !important; }
    html body .kf-faka-page .kf-detail-right { min-width: 0 !important; }
    html body .kf-faka-page .kf-detail-left { flex: 0 0 auto !important; }
    html body .kf-faka-page .kf-detail-icon,
    html body .kf-faka-page .kf-detail-icon-sub { width: 88px !important; height: 88px !important; min-height: 88px !important; }
    /* 详情的副图占位是空 div，手机上会把标题顶到很下面，直接收掉 */
    html body .kf-faka-page .kf-detail-icon-sub:empty { display: none !important; }
    html body .kf-faka-page .kf-related-list { grid-template-columns: 1fr !important; }
    html body .kf-faka-page .kf-trust-badges { gap: 10px !important; }

    /* ===== 5.1 首页分类标题（白色胶囊）：尺寸已在下方全局段统一缩小，手机端只保留间距 ===== */

    /* ===== 6. 个人中心 ===== */
    html body .kf-uc-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 18px !important; }
    html body .kf-uc-main { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
    /* 列方向下必须 stretch，否则子卡片会按内容撑宽（表格会顶出屏幕） */
    html body .kf-uc-main > div { width: auto !important; min-width: 0 !important; max-width: 100% !important; }
    html body .kf-uc-side {
        width: auto !important;
        align-self: stretch !important;
        padding: 6px !important;
        border-radius: 10px !important;
    }
    html body .kf-uc-side nav {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    html body .kf-uc-side nav::-webkit-scrollbar { display: none; }
    html body .kf-uc-side nav a {
        display: inline-block !important;
        flex: 0 0 auto !important;
        padding: 8px 14px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        border-radius: 14px !important;
    }
    /* 订单/购物车表格：容器内横滑，保留表格结构 */
    html body .kf-table-scroll table { min-width: 620px; }
    html body .kf-table-scroll table th,
    html body .kf-table-scroll table td { white-space: nowrap; }
    html body .kf-table-scroll table td:nth-child(2) { white-space: normal; min-width: 160px; }

    /* ===== 7. 其它内页 ===== */
    html body .kf-2fa { padding: 22px 16px !important; max-width: 100% !important; }
    html body .kf-faq-card-img { width: 100% !important; }      /* FAQ 卡片图已由 720 断点处理，这里兜底 */
    html body .kf-detail-section,
    html body .kf-tabs { padding: 18px 14px !important; }

    /* 顶部导航条允许横滑（原逻辑保留，仅补个渐隐提示） */
    html body .kf-subnav-inner { overflow-x: auto !important; }

    /* ===== 8. 下载类页面：克隆模板是旧版 1300px 桌面布局，做通用手机降级 ===== */
    .kf-dl-page img,
    .kf-dl-page video,
    .kf-dl-page iframe,
    .kf-dl-page table { max-width: 100% !important; }
    .kf-dl-page img { height: auto !important; }
    .kf-dl-page .mw1300,
    .kf-dl-page .comm_part,
    .kf-dl-page .SDetzt_top,
    .kf-dl-page .inner,
    .kf-dl-page .zb_list {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: auto !important;
        right: auto !important;
    }
    .kf-dl-page .fr,
    .kf-dl-page .fl {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
    }
    .kf-dl-page li { max-width: 100% !important; }
}

/* ==========================================================================
   9. 下层导航「商品购买」手机端分类面板
      （桌面靠 :hover 展开，手机没有 hover 且下拉被 overflow-x 裁掉 →
        由 assets/js/kf7-mobile.js 改成底部面板）
   ========================================================================== */
.kf-dd-mask {
    display: none;
    position: fixed;
    /* 同上：不用 inset，兼容 Chrome 87 以下 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .42);
    z-index: 3500;
}
.kf-dd-mask.open { display: block; }
.kf-dd-sheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3501;
    flex-direction: column;
    max-height: 78vh;
    background: #fff;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 26px rgba(0, 0, 0, .22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.kf-dd-sheet.open { display: flex; }
.kf-dd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid #eef2f6;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}
.kf-dd-x {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.kf-dd-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.kf-dd-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 14px;
}
/* 内置滚动条：Android Chrome 不渲染原生滚动条，这里自绘一条（内容超出时才显示） */
.kf-dd-sbar {
    position: absolute;
    right: 5px;
    top: 8px;
    width: 5px;
    border-radius: 3px;
    background: rgba(15, 23, 42, .06);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    overflow: hidden;
}
.kf-dd-sbar.show { opacity: 1; }
.kf-dd-sbar > i {
    display: block;
    width: 100%;
    height: 0;
    border-radius: 3px;
    background: rgba(15, 23, 42, .32);
}
/* 桌面内核仍给个原生细条（手机不认，不影响自绘条） */
.kf-dd-body::-webkit-scrollbar { width: 6px; }
.kf-dd-body::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .22); border-radius: 3px; }
.kf-dd-body::-webkit-scrollbar-track { background: transparent; }
.kf-dd-body .kf-cate-menu { min-width: 0 !important; width: 100%; }
.kf-dd-body .kf-cate-menu > li > a { padding: 12px 14px !important; }
.kf-dd-body .kf-cate-menu > li > a .name { white-space: normal; }
/* 子分类：手机上没有桌面那套悬浮样式，这里排成可点的胶囊 */
.kf-dd-body .kf-cate-products {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    position: static !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 2px 14px 12px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
.kf-dd-body .kf-cate-product-link {
    display: inline-block !important;
    padding: 7px 11px !important;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #475569 !important;
    text-decoration: none !important;
}
.kf-dd-empty { margin: 0; padding: 26px 14px; text-align: center; color: #94a3b8; font-size: 14px; }

/* 右侧抽屉的收起按钮（桌面隐藏） */
.kf-dl-close {
    display: none;
    position: absolute;
    top: 7px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
}

/* 弹层打开时收起所有悬浮件，避免"共享资源"按钮从弹层留白里露出来 */
body.kf-ov-open .kf-dl-fab,
body.kf-ov-open .kf-dl-mask { display: none !important; }

@media (max-width: 768px) {
    /* ===== 10. 右侧抽屉内点击区域的修正 ===== */
    /* 悬浮按钮原压在抽屉右下角，点列表最后几项其实点到了按钮（抽屉被收起，看着像“点击无效”） */
    html body .kf-dl-float:not(.kf-dl-collapsed) ~ .kf-dl-fab { display: none !important; }

    /* 标题吸顶 + 收起按钮，抽屉能明确关掉 */
    html body .kf-dl-float .kf-dl-nav-title {
        position: sticky !important;
        top: 0;
        z-index: 3;
        margin: -14px -14px 10px !important;
        padding: 13px 46px 10px 14px !important;
        background: #fff !important;
        border-bottom: 1px solid #f1f5f9;
    }
    html body .kf-dl-close { display: flex; align-items: center; justify-content: center; }
    /* 列表末项不再贴着抽屉底边 */
    html body .kf-dl-float .kf-dl-tabs { padding-bottom: 4px; }

    /* ===== 11. vpn / vpn2 弹层在窄屏不再溢出被裁 ===== */
    html body .kf-dl-overlay { padding: 12px !important; background: rgba(0, 0, 0, .45) !important; }
    html body .kf-dl-overlay-box { max-height: 88vh !important; border-radius: 14px !important; }
    html body .kf-dl-overlay-inner { padding: 18px 14px 20px !important; max-height: 76vh !important; }
    html body .kf-ov-h { font-size: 16px !important; }
    html body .kf-ov-import,
    html body .kf-ov-copybtn,
    html body .kf-ov-off {
        max-width: 100% !important;
        width: auto !important;
        box-sizing: border-box;
        padding: 8px 14px 8px 44px !important;
        white-space: normal !important;
        text-align: left !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
    html body .kf-ov-card { gap: 10px !important; padding: 10px !important; }
    html body .kf-ov-img { flex: 0 0 72px !important; width: 72px !important; height: 72px !important; }
    html body .kf-ov-title { font-size: 13px !important; }
    html body .kf-ov-copytext { font-size: 11px !important; }
}

/* ==========================================================================
   12. 老内核兜底（Chrome < 87 / 部分国产内置内核）
   - 这些版本不支持 `inset` 简写（不支持时元素尺寸会算成 0、或跑到页面底部），
     也不支持 flex 布局的 gap（列表会挤在一起）。
   - 用 `@supports not (inset:0)` 精确命中这批内核，新浏览器完全不受影响。
   ========================================================================== */
@supports not (inset: 0) {
    /* 抽屉里的资源列表项之间补间距 */
    .kf-dl-tab { margin-bottom: 6px; }
    .kf-dl-tabs > li:last-child .kf-dl-tab { margin-bottom: 0; }
    /* 底部平台 Tab 条已移除，无需老内核间距补丁 */
    /* 个人中心上下卡片 */
    .kf-uc-main > div + div { margin-top: 12px; }
    /* 分类面板里的子分类胶囊 */
    .kf-dd-body .kf-cate-products { margin-right: -8px; }
    .kf-dd-body .kf-cate-product-link { margin: 0 8px 8px 0; }
    /* 分类行：图标与文字（原来靠 flex gap 撑开，老内核会贴在一起） */
    .kf-cate-menu > li > a .icon { margin-right: 10px !important; }
    .kf-subnav-item > a .kf-caret { margin-left: 4px; }
    /* vpn2 二维码卡片纵向间距 */
    .kf-ov-list .kf-ov-card + .kf-ov-card { margin-top: 12px; }
}

/* ==========================================================================
   13. 个人中心头部：手机端「更换密码」按钮固定靠右，用户名过长自动省略号，
       两者之间始终保留间距，彻底避免按钮压住用户名
   ========================================================================== */
@media (max-width: 768px) {
    html body .kf-uc-headrow {
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }
    html body .kf-uc-headrow .kf-uc-name {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    html body .kf-uc-headrow h2 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    html body .kf-uc-headrow button {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
}

/* ==========================================================================
   14. 手机端登录表单主按钮：绿色实心（圆角 6px + 2px 投影）
       背景：WooCommerce 的 submit 按钮此前只有宽度补丁、没有任何配色规则，
       手机上呈现为浏览器默认灰按钮，与站点视觉脱节。
       新增日期：2026-10-30
   ========================================================================== */
@media (max-width: 768px) {
    html body .woocommerce form.login button.button,
    html body .woocommerce form.login button[type="submit"],
    html body .woocommerce-form-login .woocommerce-form-login__submit {
        background: #22c55e !important;
        background-image: none !important;
        border: none !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 6px rgba(34, 197, 94, .38) !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        text-shadow: none !important;
        padding: 12px 16px !important;
        line-height: 1.2 !important;
        transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease !important;
        -webkit-appearance: none;
        appearance: none;
    }
    html body .woocommerce form.login button.button:hover,
    html body .woocommerce form.login button[type="submit"]:hover,
    html body .woocommerce-form-login .woocommerce-form-login__submit:hover,
    html body .woocommerce form.login button.button:focus,
    html body .woocommerce-form.login button[type="submit"]:focus {
        background: #16a34a !important;
        box-shadow: 0 3px 10px rgba(22, 163, 74, .42) !important;
        color: #fff !important;
    }
    html body .woocommerce form.login button.button:active,
    html body .woocommerce form.login button[type="submit"]:active,
    html body .woocommerce-form-login .woocommerce-form-login__submit:active {
        background: #15803d !important;
        box-shadow: 0 1px 3px rgba(21, 128, 61, .40) !important;
        transform: translateY(1px) !important;
    }
}

/* ==========================================================================
   15. 手机端订单支付页表格：窄屏下「商品/单价/数量/金额」四列会挤压，
       「数量」竖排换行、金额与数量粘连。收紧字号 + 禁止表头换行 + 商品列可折行。
       新增日期：2026-10-30
   ========================================================================== */
@media (max-width: 768px) {
    html body .kf-pay-table th,
    html body .kf-pay-table td {
        font-size: 12px !important;
        white-space: nowrap !important;
        padding: 8px 0 !important;
    }
    html body .kf-pay-table th:first-child,
    html body .kf-pay-table td:first-child {
        white-space: normal !important;
        padding-right: 8px !important;
        line-height: 1.45 !important;
    }
    html body .kf-pay-table th.r,
    html body .kf-pay-table td.r {
        padding-left: 10px !important;
    }
    html body .kf-pay-table th:nth-child(2),
    html body .kf-pay-table td:nth-child(2) {
        white-space: nowrap !important;
    }
}