/* --- 全局设置与缩放基础 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* 设计基准：假设我们的设计稿是 390px 宽 */
    /* 100vw = 390px, 那么 1px = (1 / 390) * 100vw = 0.2564vw */
    font-size: 3.59vw; /* 14px / 390px * 100vw = 3.59vw (作为基础rem单位，可选) */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f4f4; /* 截图中的浅灰色背景 */
    color: #333;
    /* 禁止用户缩放，确保布局稳定 */
    touch-action: manipulation;
}

.main-container {
    width: 100vw; /* 容器宽度始终为屏幕宽度 */
    padding: 3.07vw; /* 12px / 390px */
    display: flex;
    flex-direction: column;
    gap: 3.07vw; /* 模块间的统一间距 12px */
    padding-bottom: 20vw; /* 新增：为悬浮按钮留出空间，防止遮挡 */
}

/* --- 顶部横幅 --- */
.top-banner {
    background: #97109e;
    color: white;
    text-align: center;
    padding: 2.56vw; /* 10px */
    border-radius: 2.05vw; /* 8px */
    font-size: 3.33vw; /* 13px */
    font-weight: bold;
}

/* --- 公告与服务宣传 --- */
.notice-section, .service-promo {
    background: white;
    padding: 3.07vw; /* 12px */
    border-radius: 2.05vw; /* 8px */
    text-align: center;
    font-weight: bold;
    box-shadow: 0 0.51vw 1.54vw rgba(0,0,0,0.05); /* 0 2px 6px */
}
.notice-content {
    font-size: 3.59vw; /* 14px */
}
.promo-text {
    color: #e91e63;
    font-size: 3.84vw; /* 15px */
}

/* --- 地区导航 --- */
.area-nav {
    background: white;
    padding: 3.07vw; /* 12px */
    border-radius: 2.05vw; /* 8px */
    box-shadow: 0 0.51vw 1.54vw rgba(0,0,0,0.05); /* 0 2px 6px */
}
.area-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 始终为4列 */
    gap: 2.56vw; /* 10px */
}
.area-card {
    text-decoration: none;
}
.logo {
    width: 100%;
    aspect-ratio: 1 / 1; /* 保持正方形 */
    overflow: hidden;
}
.logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.area-desc {
    background: #4CAF50;
    color: white;
    text-align: center;
    font-size: 2.82vw; /* 11px */
    font-weight: bold;
    padding: 1.54vw 0; /* 6px */
    margin-top: 1.54vw; /* 6px */
    border-radius: 10vw; /* 大圆角 */
}

/* --- 轮播图 --- */
.carousel-ad {
    border-radius: 2.05vw; /* 8px */
    overflow: hidden;
    box-shadow: 0 1.02vw 2.56vw rgba(0,0,0,0.1); /* 0 4px 10px */
}
.carousel-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1.5 / 1; /* 根据截图调整宽高比 */
}
/* (轮播图内部样式，如按钮、圆点等，也需要用vw单位，此处省略以保持简洁) */
.carousel-wrapper { position: relative; width: 100%; height: 100%; }
.carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; }
.carousel-slide.active { opacity: 1; z-index: 1; } /* 新增 z-index */
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 2vw 3vw;
    font-size: 5vw;
    cursor: pointer;
    z-index: 2; /* 确保在图片上层 */
    border-radius: 1.5vw;
    display: block; /* 恢复显示 */
}
.carousel-btn.carousel-prev { left: 2vw; }
.carousel-btn.carousel-next { right: 2vw; }
.carousel-dots { position: absolute; bottom: 2.56vw; left: 50%; transform: translateX(-50%); display: flex; gap: 2.05vw; z-index: 2; } /* 新增 z-index */
.dot { width: 2.05vw; height: 2.05vw; border-radius: 50%; background: rgba(255,255,255,0.6); cursor: pointer; } /* 新增 cursor */
.dot.active { background: white; }

/* --- 底部推荐 --- */
.floating-recommend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.56vw 3.84vw; /* 10px 15px */
    border-radius: 2.05vw; /* 8px */
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: white;
}
.floating-text {
    font-size: 3.07vw; /* 12px */
    line-height: 1.4;
}
.floating-text strong {
    font-size: 3.59vw; /* 14px */
    display: block;
    margin-bottom: 1.02vw; /* 4px */
}
.floating-btn {
    background: white;
    color: #ff5722;
    font-weight: bold;
    text-decoration: none;
    padding: 2.05vw 4.1vw; /* 8px 16px */
    border-radius: 10vw;
    font-size: 3.33vw; /* 13px */
    box-shadow: 0 0.51vw 1.54vw rgba(0,0,0,0.2);
}

/* --- 客服悬浮按钮 --- */
#custom-kf-button {
    position: fixed;
    right: 4.1vw; /* 16px */
    bottom: 4.1vw; /* 16px */
    width: 13.33vw; /* 52px */
    height: 13.33vw; /* 52px */
    z-index: 999;
}
#custom-kf-button img {
    width: 100%;
    height: 100%;
}

/* --- 加载提示遮罩层 --- */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: none; /* 默认隐藏 */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* 确保在最上层 */
    font-size: 4vw;
}

.loading-message {
    padding: 5vw;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 2vw;
    text-align: center;
}