/* GAMEPAL 陪玩平台 - 小程序版本样式 */
/* 当管理后台开启"小程序版本"且用户通过手机端访问时加载此样式 */
/* 仅在 768px 以下屏幕生效 */

/* ===== 小程序版本根变量 ===== */
@media (max-width: 768px) {
    :root {
        --miniapp-primary: var(--crab-yellow, #ffb347);
        --miniapp-primary-dark: var(--crab-yellow-dark, #ff9a1f);
        --miniapp-bg: #f5f5f5;
        --miniapp-card-bg: #ffffff;
        --miniapp-text: #333333;
        --miniapp-text-secondary: #999999;
        --miniapp-border: #eeeeee;
        --miniapp-tab-height: 56px;
        --miniapp-header-height: 48px;
        --miniapp-radius: 12px;
        --miniapp-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
}

/* ===== 全局布局改造 ===== */
@media (max-width: 768px) {
    /* 隐藏顶部导航栏 */
    body.miniapp-mode .navbar {
        display: none !important;
    }

    /* 小程序模式全局：顶部安全间距 */
    body.miniapp-mode {
        padding-top: calc(env(safe-area-inset-top, 12px) + 10px) !important;
        background: var(--miniapp-bg) !important;
    }

    /* 主内容区统一顶部间距 */
    body.miniapp-mode .container,
    body.miniapp-mode main,
    body.miniapp-mode .main-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 统一首页和其他页面的容器起始位置 */
    body.miniapp-mode .container.mt-4,
    body.miniapp-mode .container.py-4,
    body.miniapp-mode .container.mt-3 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 为主内容添加底部Tab留白 */
    body.miniapp-mode .container,
    body.miniapp-mode main {
        padding-bottom: calc(var(--miniapp-tab-height) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    }

    /* 隐藏原有底部导航 */
    body.miniapp-mode .bottom-nav {
        display: none !important;
    }

    /* 隐藏页脚 */
    body.miniapp-mode footer {
        display: none !important;
    }
}

/* ===== 小程序自定义顶部导航（已隐藏） ===== */
@media (max-width: 768px) {
    body.miniapp-mode .miniapp-header {
        display: none !important;
    }
}

/* ===== 小程序底部Tab导航 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .miniapp-tabbar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: var(--miniapp-card-bg);
        border-top: 1px solid var(--miniapp-border);
        height: var(--miniapp-tab-height);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.06);
    }

    body.miniapp-mode .miniapp-tabbar .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--miniapp-text-secondary);
        font-size: 10px;
        transition: color 0.25s ease, transform 0.15s ease;
        padding: 4px 0;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    body.miniapp-mode .miniapp-tabbar .tab-item i {
        font-size: 22px;
        margin-bottom: 2px;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Tab点击按下效果 */
    body.miniapp-mode .miniapp-tabbar .tab-item:active {
        transform: scale(0.88);
    }

    body.miniapp-mode .miniapp-tabbar .tab-item:active i {
        transform: scale(0.85);
    }

    /* Active状态 - 图标弹跳动画 */
    body.miniapp-mode .miniapp-tabbar .tab-item.active {
        color: var(--miniapp-primary-dark);
        font-weight: 600;
    }

    body.miniapp-mode .miniapp-tabbar .tab-item.active i {
        animation: tabBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Active指示点 */
    body.miniapp-mode .miniapp-tabbar .tab-item.active::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 3px;
        border-radius: 2px;
        background: var(--miniapp-primary);
        animation: indicatorFadeIn 0.3s ease;
    }

    /* Tab切换水波纹效果 */
    body.miniapp-mode .miniapp-tabbar .tab-item::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.15);
        transform: translate(-50%, -50%);
        transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
        opacity: 0;
    }

    body.miniapp-mode .miniapp-tabbar .tab-item:active::before {
        width: 60px;
        height: 60px;
        opacity: 1;
    }

    body.miniapp-mode .miniapp-tabbar .tab-item .tab-badge {
        position: absolute;
        top: 2px;
        right: 50%;
        margin-right: -18px;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        background: #ff4d4f;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        padding: 0 4px;
    }
}

/* ===== 卡片样式改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .card {
        background: var(--miniapp-card-bg) !important;
        border: none !important;
        border-radius: var(--miniapp-radius) !important;
        box-shadow: var(--miniapp-shadow) !important;
        margin-bottom: 12px !important;
        overflow: hidden;
    }

    /* 支付方式选中状态 - 覆盖card的border/box-shadow覆盖 */
    body.miniapp-mode .card.active-pay,
    body.miniapp-mode .pay-method.active-pay {
        border: 3px solid var(--miniapp-primary) !important;
        background: linear-gradient(135deg, rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.15), rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.08)) !important;
        box-shadow: 0 0 15px rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.3) !important;
    }

    /* 规格选中状态 */
    body.miniapp-mode .card.active-spec,
    body.miniapp-mode .spec-card.active-spec {
        border: 2px solid var(--miniapp-primary) !important;
        background: linear-gradient(135deg, rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.15), rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.08)) !important;
        box-shadow: 0 0 15px rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.3) !important;
    }

    body.miniapp-mode .card-header {
        background: var(--miniapp-card-bg) !important;
        border-bottom: 1px solid var(--miniapp-border) !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--miniapp-text) !important;
    }

    body.miniapp-mode .card-header .neon-text {
        color: var(--miniapp-text) !important;
        text-shadow: none !important;
    }

    body.miniapp-mode .card-body {
        padding: 16px !important;
        background: var(--miniapp-card-bg) !important;
    }

    body.miniapp-mode .card-footer {
        background: #fafafa !important;
        border-top: 1px solid var(--miniapp-border) !important;
    }
}

/* ===== 英雄区域/首页轮播改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .hero-section,
    body.miniapp-mode .hero-full-wrapper {
        border-radius: 12px !important;
        margin: 0 0 20px !important;
        border: 2px solid var(--miniapp-border) !important;
        overflow: hidden;
        box-shadow: var(--miniapp-shadow) !important;
    }

    body.miniapp-mode .fade-in {
        animation: none !important;
    }

    /* 首页：统一各区块间距，确保Banner到服务下单 = 服务下单到平台公告 */
    body.miniapp-mode .home-section-block {
        margin-bottom: 20px !important;
    }
}

/* ===== 按钮改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .btn-primary {
        background: var(--miniapp-primary) !important;
        border-color: var(--miniapp-primary) !important;
        color: #fff !important;
        border-radius: 24px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.3) !important;
    }

    body.miniapp-mode .btn-primary:active {
        background: var(--miniapp-primary-dark) !important;
        border-color: var(--miniapp-primary-dark) !important;
        transform: scale(0.97);
    }

    body.miniapp-mode .btn-outline-primary {
        border-color: var(--miniapp-primary) !important;
        color: var(--miniapp-primary-dark) !important;
        border-radius: 24px !important;
    }

    body.miniapp-mode .btn-outline-primary:active {
        background: var(--miniapp-primary) !important;
        color: #fff !important;
    }

    body.miniapp-mode .btn-success {
        border-radius: 24px !important;
    }

    body.miniapp-mode .btn-danger {
        border-radius: 24px !important;
    }

    body.miniapp-mode .btn {
        border-radius: 24px !important;
        font-size: 15px !important;
        min-height: 44px;
        transition: transform 0.15s, opacity 0.15s;
    }

    body.miniapp-mode .btn:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    body.miniapp-mode .btn-sm {
        border-radius: 16px !important;
        min-height: 32px;
        font-size: 13px !important;
    }
}

/* ===== 表单改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .form-control,
    body.miniapp-mode .form-select {
        border-radius: 10px !important;
        border-color: var(--miniapp-border) !important;
        background: #f9f9f9 !important;
        font-size: 16px !important;
        min-height: 46px;
        padding: 12px 16px !important;
    }

    body.miniapp-mode .form-control:focus,
    body.miniapp-mode .form-select:focus {
        border-color: var(--miniapp-primary) !important;
        box-shadow: 0 0 0 3px rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.15) !important;
        background: #fff !important;
    }

    body.miniapp-mode .form-label {
        font-size: 14px !important;
        color: var(--miniapp-text) !important;
        font-weight: 500 !important;
    }

    body.miniapp-mode .form-check-input:checked {
        background-color: var(--miniapp-primary) !important;
        border-color: var(--miniapp-primary) !important;
    }

    body.miniapp-mode .input-group-text {
        border-radius: 10px !important;
        background: #f9f9f9 !important;
        border-color: var(--miniapp-border) !important;
    }
}

/* ===== 列表改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .list-group-item {
        border-color: var(--miniapp-border) !important;
        padding: 14px 16px !important;
    }

    body.miniapp-mode .list-group {
        border-radius: var(--miniapp-radius) !important;
        overflow: hidden;
    }
}

/* ===== 警告框改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .alert {
        border-radius: 10px !important;
        border: none !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
    }

    body.miniapp-mode .alert-success {
        background: #f0fff4 !important;
        color: #38a169 !important;
    }

    body.miniapp-mode .alert-danger {
        background: #fff5f5 !important;
        color: #e53e3e !important;
    }

    body.miniapp-mode .alert-info {
        background: #ebf8ff !important;
        color: #3182ce !important;
    }

    body.miniapp-mode .alert-warning {
        background: #fffbeb !important;
        color: #d69e2e !important;
    }
}

/* ===== 陪玩人员卡片改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .companion-card,
    body.miniapp-mode [class*="companion"] {
        border-radius: var(--miniapp-radius) !important;
        overflow: hidden;
    }

    /* 头像更大 */
    body.miniapp-mode .avatar,
    body.miniapp-mode img[alt*="头像"],
    body.miniapp-mode img[alt*="avatar"] {
        border-radius: 50% !important;
        border: 2px solid var(--miniapp-border) !important;
    }

    body.miniapp-mode .avatar {
        width: 56px !important;
        height: 56px !important;
    }

    body.miniapp-mode .avatar-lg {
        width: 72px !important;
        height: 72px !important;
    }
}

/* ===== 订单卡片改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .order-card,
    body.miniapp-mode [class*="order-item"] {
        border-radius: var(--miniapp-radius) !important;
        box-shadow: var(--miniapp-shadow) !important;
        border: none !important;
    }

    /* 状态标签 */
    body.miniapp-mode .badge {
        border-radius: 6px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        padding: 4px 8px !important;
    }
}

/* ===== 表格改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .table {
        font-size: 13px !important;
    }

    body.miniapp-mode .table th {
        background: #f9f9f9 !important;
        color: var(--miniapp-text-secondary) !important;
        font-weight: 500 !important;
        border-color: var(--miniapp-border) !important;
    }

    body.miniapp-mode .table td {
        border-color: var(--miniapp-border) !important;
    }
}

/* ===== 分页改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .pagination .page-link {
        border-radius: 8px !important;
        margin: 0 3px;
        min-width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-color: var(--miniapp-border) !important;
        color: var(--miniapp-text) !important;
    }

    body.miniapp-mode .pagination .page-item.active .page-link {
        background: var(--miniapp-primary) !important;
        border-color: var(--miniapp-primary) !important;
        color: #fff !important;
    }
}

/* ===== 模态框改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .modal-content {
        border-radius: 16px 16px 0 0 !important;
        border: none !important;
    }

    body.miniapp-mode .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        position: fixed !important;
        bottom: 0 !important;
    }

    body.miniapp-mode .modal.fade .modal-dialog {
        transform: translate(0, 100%);
        transition: transform 0.3s ease-out;
    }

    body.miniapp-mode .modal.show .modal-dialog {
        transform: translate(0, 0);
    }
}

/* ===== 下拉菜单改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .dropdown-menu {
        border: none !important;
        border-radius: var(--miniapp-radius) !important;
        box-shadow: var(--miniapp-shadow) !important;
        padding: 8px !important;
    }

    body.miniapp-mode .dropdown-item {
        border-radius: 8px !important;
        padding: 10px 14px !important;
        color: var(--miniapp-text) !important;
    }

    body.miniapp-mode .dropdown-item:active {
        background: rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.1) !important;
    }
}

/* ===== 用户中心页面改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .user-profile,
    body.miniapp-mode [class*="profile-"] {
        background: var(--miniapp-bg) !important;
    }

    /* 用户头像区 */
    body.miniapp-mode .col-md-4 > .card:first-child {
        margin-top: 0;
    }

    /* 用户头像区 */
    body.miniapp-mode .profile-header,
    body.miniapp-mode .user-info-card {
        background: linear-gradient(135deg, var(--miniapp-primary), var(--miniapp-primary-dark)) !important;
        color: #fff !important;
        border-radius: 0 0 24px 24px !important;
        padding: 24px 16px !important;
    }

    /* 右侧内容区卡片圆角 */
    body.miniapp-mode .col-md-8 .card {
        border-radius: 16px !important;
        overflow: hidden;
    }

    body.miniapp-mode .col-md-8 .card-header {
        border-radius: 16px 16px 0 0 !important;
    }

    /* 左侧快捷入口卡片圆角 */
    body.miniapp-mode .col-md-4 .card {
        border-radius: 16px !important;
        overflow: hidden;
    }
}

/* ===== 搜索框改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .search-box {
        background: var(--miniapp-card-bg) !important;
        border-radius: 24px !important;
        box-shadow: var(--miniapp-shadow) !important;
        border: none !important;
        padding: 4px !important;
    }

    body.miniapp-mode .search-box input {
        border-radius: 20px !important;
        border: none !important;
        background: #f5f5f5 !important;
        font-size: 15px !important;
    }
}

/* ===== 返回按钮通用样式（小程序版本隐藏） ===== */
@media (max-width: 768px) {
    body.miniapp-mode .miniapp-header .miniapp-back {
        display: none !important;
    }

    /* 隐藏所有返回按钮 */
    body.miniapp-mode a[href*="history.back()"],
    body.miniapp-mode a[href*="javascript:history"],
    body.miniapp-mode .btn-back,
    body.miniapp-mode .back-btn,
    body.miniapp-mode a:has(.bi-arrow-left) {
        display: none !important;
    }

    /* 通用小程序隐藏类 */
    body.miniapp-mode .miniapp-hide {
        display: none !important;
    }

    /* 小程序版本版权信息 */
    body.miniapp-mode .miniapp-footer {
        display: block !important;
    }
}

/* ===== 标签/导航标签改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .nav-tabs {
        border-bottom: none !important;
        background: var(--miniapp-card-bg) !important;
        padding: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden;
        display: flex !important;
    }

    body.miniapp-mode .nav-tabs .nav-item {
        flex: 1;
        display: flex;
        border-right: 1px solid var(--miniapp-border);
    }

    body.miniapp-mode .nav-tabs .nav-item:last-child {
        border-right: none;
    }

    body.miniapp-mode .nav-tabs .nav-link {
        color: var(--miniapp-text-secondary) !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        padding: 10px 4px !important;
        flex: 1;
        text-align: center;
        white-space: nowrap;
        transition: background 0.2s, color 0.2s;
    }

    body.miniapp-mode .nav-tabs .nav-link.active {
        color: var(--miniapp-primary-dark) !important;
        background: rgba(var(--crab-yellow-rgb, 255, 179, 71), 0.1) !important;
        font-weight: 600 !important;
        border-bottom: none !important;
    }
}

/* ===== 滚动条优化 ===== */
@media (max-width: 768px) {
    body.miniapp-mode ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }

    body.miniapp-mode {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== 页面标题改造 ===== */
@media (max-width: 768px) {
    body.miniapp-mode h1, body.miniapp-mode .h1 {
        font-size: 22px !important;
        color: var(--miniapp-text) !important;
    }

    body.miniapp-mode h2, body.miniapp-mode .h2 {
        font-size: 19px !important;
        color: var(--miniapp-text) !important;
    }

    body.miniapp-mode h3, body.miniapp-mode .h3 {
        font-size: 17px !important;
        color: var(--miniapp-text) !important;
    }

    body.miniapp-mode h4, body.miniapp-mode .h4 {
        font-size: 15px !important;
        color: var(--miniapp-text) !important;
    }

    body.miniapp-mode .neon-text {
        color: var(--miniapp-text) !important;
        text-shadow: none !important;
    }
}

/* ===== 文字颜色适配 ===== */
@media (max-width: 768px) {
    body.miniapp-mode {
        color: var(--miniapp-text) !important;
    }

    body.miniapp-mode p, body.miniapp-mode span, body.miniapp-mode div {
        color: var(--miniapp-text);
    }

    body.miniapp-mode .text-muted,
    body.miniapp-mode .text-secondary {
        color: var(--miniapp-text-secondary) !important;
    }
}

/* ===== 容器宽度适配 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }
}

/* ===== 动画优化 ===== */
@media (max-width: 768px) {
    body.miniapp-mode *:not(.miniapp-tabbar):not(.miniapp-tabbar *) {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
}

/* ===== 安全区域适配 ===== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        body.miniapp-mode .miniapp-tabbar {
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
    }
}

/* ===== 认证页面（登录/注册/忘记密码）小程序适配 ===== */
@media (max-width: 768px) {
    body.miniapp-mode .min-vh-100 {
        min-height: 100vh !important;
        padding-top: 40px !important;
        padding-bottom: calc(var(--miniapp-tab-height) + env(safe-area-inset-bottom, 0px) + 20px) !important;
    }

    /* 认证页面卡片 */
    body.miniapp-mode .card {
        border-radius: 16px !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
        border: none !important;
        background: var(--miniapp-card-bg) !important;
    }

    /* 认证页面标题 */
    body.miniapp-mode h2, body.miniapp-mode .h2,
    body.miniapp-mode h3, body.miniapp-mode .h3 {
        color: var(--miniapp-text) !important;
    }

    /* 登录/注册表单更紧凑 */
    body.miniapp-mode .auth-card .card-body {
        padding: 24px 20px !important;
    }

    /* 小程序风格登录Logo */
    body.miniapp-mode .text-center img[style*="max-height"],
    body.miniapp-mode .text-center .brand-icon {
        max-height: 60px !important;
    }
}

/* ===== 小程序切换动画 ===== */

/* Tab图标弹跳动画 */
@keyframes tabBounce {
    0% { transform: scale(1); }
    30% { transform: scale(0.85); }
    60% { transform: scale(1.15); }
    80% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Active指示点淡入 */
@keyframes indicatorFadeIn {
    0% { opacity: 0; transform: translateX(-50%) scaleX(0); }
    100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

/* 页面切换淡入动画 */
@media (max-width: 768px) {
    body.miniapp-mode .container,
    body.miniapp-mode main,
    body.miniapp-mode .main-content {
        animation: pageSlideIn 0.25s ease-out;
    }
}

@keyframes pageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 卡片出现动画 */
@media (max-width: 768px) {
    body.miniapp-mode .card {
        animation: cardFadeIn 0.3s ease-out;
    }
}

@keyframes cardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}