/* ============================================================
   TP5 交易平台 - 手机版响应式样式 (Mobile-First)
   兼容所有手机浏览器，时尚现代设计
   ============================================================ */

/* ========== 响应式容器 ========== */
@media (max-width: 1200px) {
    .container, .header-inner, .search-inner { width: 100%; padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 768px) {
    body { font-size: 14px; }
    .container { padding: 12px 12px; }

    /* ========== 导航栏 - 汉堡菜单 ========== */
    .header { position: sticky; top: 0; padding: 0; }
    .header-inner { height: 52px; position: relative; }
    .header .logo { font-size: 18px; white-space: nowrap; }
    .header .nav { display: none; }
    .header .user-info a { font-size: 13px; }

    /* 汉堡菜单按钮 */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        cursor: pointer;
        background: none;
        border: none;
    }
    .hamburger span {
        display: block;
        width: 24px;
        height: 2.5px;
        background: #fff;
        border-radius: 3px;
        transition: all 0.3s;
    }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

    /* 手机菜单面板 */
    .mobile-menu {
        display: none;
        position: absolute;
        top: 52px;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, #1e9fff 0%, #0a7dd6 100%);
        padding: 8px 0;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        z-index: 200;
    }
    .mobile-menu.open { display: block; }
    .mobile-menu a {
        display: block;
        color: #fff;
        padding: 14px 20px;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        text-decoration: none;
    }
    .mobile-menu a:last-child { border-bottom: none; }
    .mobile-menu a:hover { background: rgba(255,255,255,0.15); }
    .mobile-menu .menu-divider { height: 1px; background: rgba(255,255,255,0.2); margin: 6px 16px; }

    /* ========== Banner 响应式 ========== */
    .banner { padding: 40px 16px !important; min-height: auto !important; }
    .banner h1 { font-size: 24px !important; }
    .banner p { font-size: 14px !important; }

    /* ========== 搜索栏 ========== */
    .search-section { padding: 12px 0 !important; }
    .search-box { padding: 14px 16px !important; }
    .search-tabs { gap: 2px; }
    .search-tab { padding: 7px 14px !important; font-size: 13px !important; }
    .search-input-row { flex-wrap: wrap; }
    .search-input { width: 100%; font-size: 14px; padding: 12px 14px !important; }
    .search-price { width: 100%; }
    .price-input { width: 100% !important; }
    .search-submit { width: 100%; padding: 12px !important; font-size: 14px !important; }

    /* ========== 卡片网格 ========== */
    .card-grid-4, .card-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .card-grid-2 { grid-template-columns: 1fr !important; gap: 12px !important; }

    .card, .site-card {
        padding: 16px !important;
    }
    .card h3, .site-card h3 { font-size: 16px !important; }
    .card .price, .site-card .price { font-size: 20px !important; }

    /* ========== 网站详情页 ========== */
    .detail-layout { flex-direction: column !important; }
    .detail-main { width: 100% !important; padding-right: 0 !important; }
    .detail-sidebar { width: 100% !important; margin-top: 16px; }

    .detail-header { padding: 20px 18px !important; }
    .detail-header h1 { font-size: 20px !important; }

    .info-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

    /* ========== 列表页 ========== */
    .page-header { flex-direction: column; gap: 10px; align-items: flex-start !important; }
    .page-header h1 { font-size: 18px !important; }

    .filter-bar { flex-wrap: wrap; gap: 6px; padding: 10px 14px !important; }
    .filter-bar a.filter-tag { font-size: 12px !important; padding: 5px 12px !important; }

    .pagination { font-size: 13px; }
    .pagination a, .pagination span { padding: 6px 10px !important; }

    /* ========== 表格卡片化 ========== */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.admin-table { min-width: 600px; }
    table { width: 100%; font-size: 13px; }

    /* ========== 求购列表 ========== */
    .buy-list li { padding: 12px 14px !important; font-size: 14px !important; }
    .buy-list li a { font-size: 14px !important; }

    /* ========== 用户中心 ========== */
    .uc-layout { flex-direction: column !important; }
    .uc-sidebar { width: 100% !important; }
    .uc-sidebar .menu { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
    .uc-sidebar .menu a { 
        padding: 8px 14px !important; font-size: 13px !important; 
        border-radius: 8px !important; border: none !important;
        background: #f0f2f5; color: #333;
    }
    .uc-sidebar .menu a.active { background: #1e9fff; color: #fff; }
    .uc-main { width: 100% !important; padding: 12px !important; }
    .uc-info { flex-direction: column; align-items: flex-start !important; gap: 10px; padding: 16px !important; }

    /* ========== 订单/钱包等详情 ========== */
    .detail-row { flex-direction: column; gap: 8px; padding: 10px 12px !important; }
    .detail-row .label { width: 100% !important; }

    .stats-row, .info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    /* ========== 表格替换为卡片（用户中心部分） ========== */
    .site-list-item {
        padding: 14px;
        background: #fff;
        border-radius: 12px;
        margin-bottom: 10px;
        border: 1px solid #e8ecf2;
    }

    /* ========== 表单 ========== */
    .form-group input, .form-group select, .form-group textarea {
        font-size: 16px !important; /* 防止iOS缩放 */
        padding: 12px 14px !important;
    }
    .btn-block-mobile { width: 100%; text-align: center; padding: 14px; }

    /* ========== 友情链接 ========== */
    .links { display: flex; flex-wrap: wrap; gap: 8px; }
    .links a { 
        padding: 8px 14px !important; background: #fff; border-radius: 8px;
        border: 1px solid #e8ecf2; font-size: 13px;
    }

    /* ========== 广告 ========== */
    .ad-display img, .ad-display a img { max-width: 100% !important; height: auto !important; }
    [style*="width"] { max-width: 100% !important; }

    /* ========== 公共页脚 ========== */
    .footer { padding: 20px 16px !important; text-align: center; }
    .footer p { font-size: 13px !important; line-height: 1.8; }

    /* ========== 消息弹窗 ========== */
    .modal-content { width: 92% !important; margin: 10% auto !important; }
    .modal-header h3 { font-size: 16px !important; }

    /* ========== 分类导航 ========== */
    .category-nav { 
        display: flex; flex-wrap: wrap; gap: 6px;
        padding: 10px 0 !important;
    }
    .category-nav a.cat-item {
        padding: 6px 14px !important; font-size: 13px !important;
    }

    /* ========== 发布求购页 ========== */
    .form-row { grid-template-columns: 1fr !important; }

    /* ========== 图片自适应 ========== */
    img { max-width: 100%; height: auto; }

    /* ========== 分类列表 ========== */
    .section-title { font-size: 17px !important; }
}

/* ========== 平板适配 ========== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container, .header-inner { width: 100%; padding-left: 20px; padding-right: 20px; }
    .card-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .card-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    
    .detail-layout { gap: 20px; }
    .detail-main { width: 65% !important; }
    .detail-sidebar { width: 35% !important; }
    
    .search-input-row { flex-wrap: nowrap; }
    .search-price { width: auto; }
}

/* ========== 通用移动优化 ========== */
@media (max-width: 768px) {
    /* 所有表格添加横向滚动支持 */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    table th, table td { white-space: nowrap; }

    /* 微信内嵌浏览器兼容 */
    .header, .banner, .search-section { -webkit-transform: translateZ(0); }

    /* 安卓浏览器兼容 */
    input, textarea, select { -webkit-appearance: none; border-radius: 8px; }

    /* 平滑滚动 */
    html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

    /* 更好的触摸反馈 */
    a, button, .btn, .search-tab, .cat-item, .filter-tag {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* 解决 iOS 底部安全区 */
    .footer { padding-bottom: 20px !important; }
}

/* ========== 隐藏汉堡菜单（桌面） ========== */
.hamburger { display: none; }
.mobile-menu { display: none; }