/* ========================================
   三不澡堂游泳馆 - 主样式入口文件
   按模块导入所有样式
   ======================================== */

/* 1. 基础变量 */
@import 'variables.css';

/* 2. 基础重置 */
@import 'base.css';

/* 3. 动画定义 */
@import 'animations.css';

/* 4. 组件样式 */
@import 'components/header.css';
@import 'components/tabs.css';
@import 'components/package.css';
@import 'components/detail.css';
@import 'components/quantity.css';
@import 'components/cart.css';
@import 'components/toast.css';

/* 5. 购物车栏修复样式 */
/* 确保购物车在页面底部正确显示 */

/* 1. 确保body有正确的高度和位置 */
body {
    min-height: 100vh;
    position: relative;
    padding-bottom: 80px; /* 为购物车栏留出空间 */
    box-sizing: border-box;
}

/* 2. 主内容容器 */
#app {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden; /* 防止水平滚动 */
}

/* 3. 购物车容器 - 修复版本 */
.cart-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    max-width: var(--max-width, 100%);
    margin: 0 auto;
    pointer-events: none; /* 让下面的元素可以通过 */
}

/* 4. 购物车栏在容器内部 */
.cart-container .cart-bar {
    pointer-events: auto; /* 单独启用购物车栏的交互 */
}

/* 5. 调整主内容区域的安全边距 */
.main-content {
    padding-bottom: 120px;
}

/* 6. 当购物车显示时调整页面布局 */
.has-cart {
    padding-bottom: 80px;
}

/* 7. 移动端适配 */
@media (max-width: 768px) {
    body {
        padding-bottom: 60px;
    }
    
    .cart-container {
        max-width: 100%;
    }
}

/* 8. 确保不会和fixed的其他元素冲突 */
.bottom-nav, .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999; /* 购物车栏是1000，所以不会冲突 */
}