/* 
 * 手机站紧凑布局优化
 * 全站手机版优化 - 减少空白间距，提升操作体验
 */

/* ========== 全局基础优化 ========== */
body {
    font-size: 14px;  /* 基础字体大小，更适合手机阅读 */
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;  /* 移除点击高亮 */
    touch-action: manipulation;  /* 优化触摸操作 */
}

/* 移除所有容器的默认间距。
   手机屏幕本来就窄，.main-content（header.php 内联 0.5rem）与 .container 各留一次左右内边距，
   叠加后两侧各空 16px，内容被明显挤窄 —— 这里把两侧都收到 0.25rem（合计约 8px）。
   .main-content 的内联值写在前面的 <style> 里，靠加载顺序覆盖即可，无需 !important。 */
.container,
.container-fluid {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.main-content {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* 页面上下的空白也收一收（详情页用的是 .container.py-4，
   Bootstrap 的 py-4 = 上下 1.5rem，手机上纯属浪费） */
.container {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

/* 卡片紧凑化 */
.card {
    border-radius: 8px !important;
    margin-bottom: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.card-body {
    padding: 0.75rem !important;
}

.card-header {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.9rem;
}

/* 按钮紧凑化 - 更适合手机触摸 */
.btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
    white-space: nowrap;
}

.btn-sm {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.8rem !important;
}

.btn-lg {
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
}

/* 表单元素优化 */
.form-control,
.form-select {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
}

.form-label {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

/* 表格紧凑化 */
.table {
    font-size: 0.85rem;
}

.table th,
.table td {
    padding: 0.5rem !important;
    white-space: nowrap;
}

/* 列表紧凑化 */
.list-group-item {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.9rem;
}

/* 警告框和提示框 */
.alert {
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.alert-heading {
    font-size: 0.95rem;
}

/* 标题优化 */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.9rem; }

/* 段落和文本 */
p {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

/* 徽章紧凑化 */
.badge {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

/* 导航和面包屑 */
.breadcrumb {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    border-radius: 6px;
    margin-bottom: 0.4rem;
}

.breadcrumb-item {
    font-size: 0.85rem;
}

/* 分页紧凑化 */
.pagination {
    margin: 0.75rem 0;
    flex-wrap: wrap;
    justify-content: center;
}

.page-link {
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
}

/* 手机版分页优化 */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .page-item {
        margin: 0;
    }
    
    .page-link {
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 间隔工具类优化 */
.mb-1 { margin-bottom: 0.3rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }

.mt-1 { margin-top: 0.3rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }

.p-1 { padding: 0.3rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }

/* 行间距优化 */
.row {
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

/* 响应式间距优化（手机优先） */
@media (max-width: 768px) {
    /* 更紧凑的间距 */
    .g-2, .gy-2 { --bs-gutter-y: 0.5rem !important; }
    .g-2, .gx-2 { --bs-gutter-x: 0.5rem !important; }
    
    /* 卡片间距更小 */
    .card {
        margin-bottom: 0.5rem !important;
    }
    
    /* 按钮全宽显示，更易点击 */
    .btn-block-mobile {
        width: 100%;
        display: block;
    }
    
    /* 表格可滚动 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========== 首页特定优化 ========== */
/* 平台公告紧凑化 */
.alert-warning {
    padding: 0.6rem 0.75rem !important;
}

.alert-warning ol {
    padding-left: 1.2rem;
}

.alert-warning li {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

/* APP 下载卡片 */
.card[style*="linear-gradient"] {
    margin-bottom: 0.75rem !important;
}

/* ========== 会员中心优化 ========== */
/* 用户信息卡片 */
.user-info-card {
    margin-bottom: 0.75rem;
}

.user-info-header {
    padding: 0.75rem;
}

.user-name {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.user-level {
    font-size: 0.8rem;
}

/* 收益统计卡片 */
.row.g-2 .card {
    margin-bottom: 0.5rem;
}

/* 按钮组紧凑化 */
.btn-group .btn {
    padding: 0.5rem 0.65rem !important;
    font-size: 0.85rem !important;
}

/* ========== 订单列表优化 ========== */
/* 订单卡片 */
.order-card {
    margin-bottom: 0.75rem;
    border-radius: 8px !important;
}

.order-header {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.85rem;
}

.order-body {
    padding: 0.75rem !important;
}

/* 订单状态标签 */
.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-info {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
}

/* ========== 商品列表优化 ========== */
/* 商品卡片 */
.product-card {
    margin-bottom: 0.75rem;
}

.product-card .card-body {
    padding: 0.75rem !important;
}

/* 标题与价格的移动端字号以 style.css 的 @media(max-width:768px) 规则为准。
   本文件最后加载，普通选择器会覆盖 style.css，所以这里的字号必须与
   style.css 保持一致，否则会"改了没反应"。
   需要调整时请两处同步改。

   ⚠️ 横向长条卡片（.product-card-horizontal）的标题/价格由 style.css 控制：
   标题 0.9rem 单行省略、价格 1.15rem 红色。下面的通用规则会覆盖它们，
   所以必须用 .product-card 限定作用域，只作用于纵向卡片。 */
.product-card .product-title {
    font-size: 0.92rem;
    margin-bottom: 0.3rem;
}

.product-card .product-price {
    font-size: 1.05rem;
    font-weight: 700;
}

/* ========== 登录注册页面优化 ========== */
/* 登录注册表单 */
.auth-card {
    max-width: 100%;
    margin: 0;
    border-radius: 8px !important;
}

.auth-card .card-body {
    padding: 1rem !important;
}

.auth-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* ========== 后台管理页面优化 ========== */
/* 数据卡片 */
.stats-card {
    margin-bottom: 0.75rem;
}

.stats-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.stats-label {
    font-size: 0.8rem;
}

/* ========== 导航栏优化 ========== */
/* 侧边栏样式已迁移到 assets/css/nav.css（极简版），此处仅保留主内容区避让 */

/* 顶部导航栏 */
.site-banner {
    height: 55px !important;
}

.banner-title {
    font-size: 1.1rem !important;
}

.banner-right .btn {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.8rem !important;
}

/* 极窄屏（≤480px）：banner 标题 + 两个按钮必须塞进视口。
   ⚠️ header-top.php 把 font-size / padding / gap 写在元素的style 内联上，
   内联样式优先级高于本文件的选择器，所以这里每一项都必须带 !important 才压得住。
   实测 375px 下 .banner-right 右边缘到 379px，超出视口 4px（末位按钮被裁）。 */
@media (max-width: 480px) {
    .banner-content {
        padding: 0 0.5rem !important;
    }

    .banner-left {
        min-width: 0;/* 允许收缩，否则 flex 子项按内容宽度撑开 */
    }

    .banner-title-link {
        padding: 0.25rem 0.35rem !important;
        min-width: 0;
    }

    .banner-title {
        font-size: 0.95rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .banner-right {
        gap: 0.4rem !important;
        flex-shrink: 0;      /* 按钮组不参与压缩，保证可点 */
    }

    .banner-right .btn {
        padding: 0.3rem 0.45rem !important;
        font-size: 0.75rem !important;
    }

    .banner-right .btn .bi {
        font-size: 0.85rem !important;
        margin-right: 0.2rem !important;
    }
}

/* ========== 触摸优化 ========== */
/* 所有可点击元素最小触摸区域 */
a, button, .btn, input, select, textarea {
    min-height: 44px;  /* iOS 推荐触摸区域 */
    min-width: 44px;
}

/* 按钮触摸反馈 */
.btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* 链接触摸反馈 */
a:active {
    opacity: 0.7;
}

/* ========== 性能优化 ========== */
/* 硬件加速 —— 注意不要包含 .sidebar：
   will-change:transform 会给全屏固定元素额外提升一个图层，白占内存且可能让文字发虚 */
.card, .btn, .main-content {
    will-change: transform;
}

/* 减少重绘 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== 特殊场景优化 ========== */
/* 空状态提示 */
.empty-state {
    padding: 2rem 1rem;
    text-align: center;
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state-text {
    font-size: 0.9rem;
    color: #6c757d;
}

/* 加载动画 */
.loading-spinner {
    width: 2rem;
    height: 2rem;
    border-width: 0.2rem;
}

/* 消息提示紧凑化 */
.alert-dismissible .btn-close {
    padding: 0.75rem;
    right: 0.5rem;
}

/* 模态框优化 */
.modal-content {
    border-radius: 8px !important;
    border: none;
}

.modal-header {
    padding: 0.75rem 1rem !important;
}

.modal-body {
    padding: 1rem !important;
}

.modal-footer {
    padding: 0.75rem 1rem !important;
}

/* 下拉菜单优化 */
.dropdown-menu {
    border-radius: 6px !important;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.dropdown-item {
    padding: 0.5rem 1rem !important;
}

/* 工具提示优化 */
.tooltip {
    font-size: 0.85rem;
}

/* 进度条优化 */
.progress {
    height: 0.75rem !important;
    border-radius: 6px !important;
}

.progress-bar {
    font-size: 0.75rem;
}

/* 复选框和单选框 */
.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
}

.form-check-label {
    font-size: 0.9rem;
    margin-left: 0.3rem;
}

/* 输入框组 */
.input-group-text {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
}

/* 分割线 */
hr {
    margin: 0.75rem 0;
    opacity: 0.15;
}

/* 图标大小优化 */
.bi {
    font-size: 1rem;
    vertical-align: middle;
}

.btn .bi {
    margin-right: 0.3rem;
}

/* 列表组优化 */
.list-group {
    border-radius: 8px !important;
    overflow: hidden;
}

/* 面包屑导航 */
.breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
}

/* 固定底部操作栏 */
.fixed-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 0.75rem 1rem;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* 安全区域适配（iPhone X+） */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .fixed-bottom-bar {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
    
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================================
   前台订单页分页优化（2026-10-22）
   ------------------------------------------------------------
   问题：订单多时（如 370 页），分页在手机上 flex-wrap 换行成 4-5 行，
        把页脚都顶出去了，页面变得很长。

   解法：
     1. PHP 侧改为窗口式渲染（只渲染 首页/当前页±2/末页 + 省略号），
        页面元素数量固定，与总页数无关。
     2. CSS 侧改为**单行横向滚动**，不再换行 → 分页恒为一行。
     3. 加「跳至第 N 页」输入框（桌面端隐藏），手机上直接输页码。

   ⚠️ 桌面端保持原样（可换行居中），只影响手机。
   ============================================================ */

/* 跳页表单：桌面端隐藏 */
.order-jump-box {
    display: none;
}

/* 「13 / 26」紧凑指示器：只在手机端出现（桌面端显示完整页码） */
.order-pagination .page-item.pg-mobile-indicator {
    display: none;
}

@media (max-width: 768px) {

    .order-pagination {
        margin: 0.6rem 0;
    }

    /* 分页条基础：必须是 flex 单行/可换行，且不能退化成 block
       ⚠️ 原来只写 flex-wrap/justify-content，依赖 Bootstrap 的 .pagination{display:flex}。
        Bootstrap 未加载时 ul 会退化成纵向列表（一个页码占一行），就是之前截图里的问题。
        ≤620px 的紧凑模式在下面单独一段。 */
    .order-pagination .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center;
        gap: 0.2rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* li 也不要带项目符号 */
    .order-pagination .pagination li {
        list-style: none;
    }

    /* 链接去掉下划线、居中 */
    .order-pagination .page-link {
        text-decoration: none;
        color: #486df1;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
    }

    .order-pagination .page-item.active .page-link {
        background: #486df1;
        color: #fff;
        border-color: #486df1;
    }

    .order-pagination .page-item.disabled .page-link {
        color: #adb5bd;
        background: #f8f9fa;
    }

    .order-pagination .pagination::-webkit-scrollbar {
        display: none;
    }

    .order-pagination .page-item {
        flex: 0 0 auto;
        margin: 0;
    }

    .order-pagination .page-link {
        min-width: 36px;
        min-height: 36px;
        padding: 0.35rem 0.5rem;
        font-size: 0.82rem;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* 「上一页/下一页」文字较长，固定不压缩 */
    /* 上一页/下一页：手机上只显示 ‹ › 符号
       （原来用 Bootstrap 的 d-none d-sm-inline 隐藏文字，
        手机上是空按钮 + 58px min-width → 大白块，就是截图里那个空白框） */
    .order-pagination .page-link .pg-txt-full {
        display: none !important;
    }

    .order-pagination .page-link .pg-txt-short {
        display: inline-block;
        font-size: 1.15rem;
        line-height: 1;
        font-weight: 700;
    }

    .order-pagination .page-item:first-child .page-link,
    .order-pagination .page-item:last-child .page-link {
        min-width: 40px;
    }

    /* 跳页输入框：手机显示。
       与上方页码左对齐（原来 center 居中，视觉上和页码"分家"）。 */
    .order-jump-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        margin-top: 0.5rem;
    }

    .order-jump-box .form-control {
        width: 68px;
        min-height: 36px;
        font-size: 0.85rem;
        text-align: center;
    }

    .order-jump-box .btn {
        min-height: 36px;
        padding: 0.3rem 0.75rem;
        font-size: 0.82rem;
    }
}

/* ===== ≤620px 紧凑分页：只显示「‹  13 / 26  ›」 =====
   完整页码是 13 个按钮（上一页 + 1 + … + 窗口内 7 个 + … + 末页 + 下一页），
   实测需要约 512px；620px 以上放得下（768 平板实测可用 668px），以下放不下。
   之前用单行横向滚动，结果当前页和「下一页」必然被推出屏幕，
   用户看不出自己在第几页、也点不到下一页（截图里的"页码不对"）。
   这里改成紧凑条：上一页 / 当前页·总页数 / 下一页 —— 任意窄屏都放得下。
   要直接跳页用下方「跳至 __ / 26 页」输入框。 */
@media (max-width: 620px) {

    .order-pagination .pagination {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 0.4rem;
        overflow: hidden;
    }

    /* 除「上一页 / 当前页指示器 / 下一页」外，页码按钮全部隐藏 */
    .order-pagination .page-item {
        display: none !important;
    }

    .order-pagination .page-item:first-child,
    .order-pagination .page-item:last-child,
    .order-pagination .page-item.pg-mobile-indicator {
        display: flex !important;
    }

    /* 「13 / 26」当前页指示器：居中、无边框无底色 */
    .order-pagination .page-item.pg-mobile-indicator {
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        font-size: 0.82rem;
        color: #94a3b8;
        white-space: nowrap;
    }

    .order-pagination .pg-mobile-indicator .pg-cur {
        color: #486df1;
        font-weight: 700;
        font-size: 0.95rem;
    }

    .order-pagination .pg-mobile-indicator .pg-total {
        color: #64748b;
        font-weight: 600;
    }
}

/* 桌面端（≥769px）：上一页/下一页显示完整文字，隐藏 ‹ › 符号 */
@media (min-width: 769px) {
    .order-pagination .page-link .pg-txt-full {
        display: inline !important;
    }

    .order-pagination .page-link .pg-txt-short {
        display: none !important;
    }
}