/* 微信H5专用优化样式 */

/* 基础设置 - 防止微信内置浏览器的各种问题 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* 防止微信内的触摸高亮和选择问题 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 允许文本内容被选择 */
p, span, div.content, .text-content, .description {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* 微信内输入框优化 */
input, textarea, select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px !important;
    font-size: 16px !important; /* 防止iOS自动缩放 */
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #b8a082;
    box-shadow: 0 0 0 2px rgba(184,160,130,0.2);
}

/* 微信内按钮优化 */
button, .btn, input[type="submit"], input[type="button"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px !important;
    min-height: 44px; /* 符合苹果触摸标准 */
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 12px 24px;
    transition: all 0.3s ease;
}

/* 微信内滚动优化 */
.scroll-container, .chat-messages, .content-area {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* 防止微信状态栏遮挡 */
.header, .navbar, .top-bar {
    padding-top: env(safe-area-inset-top, 0);
    padding-top: constant(safe-area-inset-top, 0); /* iOS 11.0-11.2 兼容 */
}

/* 防止微信底部导航遮挡 */
.footer, .bottom-nav, .bottom-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-bottom: constant(safe-area-inset-bottom, 0); /* iOS 11.0-11.2 兼容 */
}

/* 微信内图片优化 */
img {
    max-width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 微信内链接优化 */
a {
    -webkit-touch-callout: none;
    text-decoration: none;
    color: inherit;
}

/* 微信内表单优化 */
form {
    width: 100%;
}

.form-group {
    margin-bottom: 16px;
    width: 100%;
}

.form-control {
    width: 100%;
    font-size: 16px !important;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fff;
    -webkit-appearance: none;
    appearance: none;
}

/* 微信内弹窗优化 */
.modal, .popup, .dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content, .popup-content, .dialog-content {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 90%;
    max-height: 80%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 微信内加载动画优化 */
.loading, .spinner {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 微信内响应式优化 */
@media (max-width: 768px) {
    .container, .content-container {
        padding: 16px 12px;
        margin: 0;
        max-width: 100%;
    }
    
    .row {
        margin: 0 -8px;
    }
    
    .col, [class*="col-"] {
        padding: 0 8px;
    }
}

@media (max-width: 480px) {
    .container, .content-container {
        padding: 10px 8px; /* 缩小内边距 */
    }

    h1, .main-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important; /* 进一步缩小行间距 */
        margin: 12px 0 8px 0 !important; /* 缩小上下边距 */
    }

    h2 {
        font-size: 1.1rem !important;
        line-height: 1.2 !important; /* 进一步缩小行间距 */
        margin: 12px 0 6px 0 !important; /* 缩小上下边距 */
    }

    h3 {
        font-size: 1rem !important;
        line-height: 1.2 !important; /* 进一步缩小行间距 */
        margin: 10px 0 6px 0 !important; /* 缩小上下边距 */
    }

    h4 {
        font-size: 0.95rem !important;
        line-height: 1.2 !important; /* 进一步缩小行间距 */
        margin: 8px 0 4px 0 !important; /* 缩小上下边距 */
    }

    p {
        font-size: 0.8rem !important;
        line-height: 1.3 !important; /* 缩小行间距 */
        margin-bottom: 6px !important; /* 缩小下边距 */
    }

    .btn, button {
        width: 100%;
        margin-bottom: 8px; /* 缩小下边距 */
        font-size: 15px !important; /* 稍微缩小字体 */
        padding: 12px 18px; /* 缩小内边距 */
        min-height: 40px !important; /* 缩小最小高度 */
    }
}

/* 微信内特殊元素优化 */
.card, .section {
    border-radius: 12px;
    padding: 16px 12px; /* 缩小内边距 */
    margin-bottom: 12px; /* 缩小下边距 */
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* 微信内文字优化 */
.text-content, .description, .content {
    line-height: 1.4; /* 缩小行间距 */
    word-break: break-word;
    word-wrap: break-word;
    margin-bottom: 8px; /* 添加下边距控制 */
}

/* 移动端专用行间距优化 */
@media (max-width: 768px) {
    .text-content, .description, .content, p {
        line-height: 1.4 !important; /* 强制缩小行间距 */
        margin-bottom: 8px !important; /* 强制缩小下边距 */
    }

    .card, .section {
        padding: 14px 10px !important; /* 强制缩小内边距 */
        margin-bottom: 10px !important; /* 强制缩小下边距 */
    }

    /* 表单元素间距优化 */
    .form-group {
        margin-bottom: 12px !important; /* 缩小表单组间距 */
    }

    .form-control {
        margin-bottom: 8px !important; /* 缩小表单控件下边距 */
        padding: 10px 12px !important; /* 缩小内边距 */
    }

    /* 列表元素间距优化 */
    li {
        margin-bottom: 4px !important; /* 缩小列表项间距 */
        line-height: 1.3 !important; /* 缩小列表项行间距 */
    }

    /* 标签和小元素间距优化 */
    .tag, .badge, .label {
        margin: 2px 4px 2px 0 !important; /* 缩小标签间距 */
        padding: 4px 8px !important; /* 缩小标签内边距 */
    }
}

/* 微信内导航优化 */
.navbar, .nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* 微信内底部固定元素优化 */
.fixed-bottom, .bottom-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
}

/* 微信内隐藏滚动条 */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* 微信内性能优化 */
.gpu-accelerated {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}