/* ========================================
   移动端响应式优化CSS - 温暖治愈风
   ======================================== */

/* ========================================
   1. 移动端导航优化
   ======================================== */

/* 汉堡按钮增强 */
@media (max-width: 991px) {
    .navbar-toggler {
        border: 2px solid var(--accent-orange) !important;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        transition: all 0.3s;
    }

    .navbar-toggler:hover {
        background: rgba(255, 154, 86, 0.1);
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(255, 154, 86, 0.25);
    }

    /* 移动端菜单样式 */
    .navbar-collapse {
        background: #243b5a;
        padding: 1.5rem;
        margin-top: 1rem;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        border: 1px solid rgba(255, 154, 86, 0.2);
    }

    /* 移动端导航链接 */
    .navbar-nav .nav-link {
        padding: 1rem 1.25rem !important;
        margin-bottom: 0.5rem;
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.3s;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:active {
        background: rgba(255, 154, 86, 0.1);
        color: #ff9a56 !important;
    }

    /* 下拉菜单 */
    .dropdown-menu {
        background: #2a4a6f !important;
        border: none !important;
        margin-top: 0.5rem;
        border-radius: 8px !important;
    }

    .dropdown-item {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9375rem;
    }

    .dropdown-item:hover {
        background: rgba(255, 154, 86, 0.15) !important;
        color: #ff9a56 !important;
    }

    /* 移动端预约按钮 */
    .navbar .btn-primary {
        width: 100%;
        margin-top: 1rem;
        padding: 14px 24px !important;
        font-size: 1rem !important;
    }
}

/* 顶部信息栏移动端优化 */
@media (max-width: 767px) {
    .top-bar {
        display: none; /* 移动端隐藏顶部信息栏 */
    }

    .navbar {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .navbar-brand img {
        height: 40px !important;
    }
}

/* ========================================
   2. 移动端按钮和表单优化
   ======================================== */

/* 触摸友好按钮 */
@media (max-width: 767px) {
    .btn {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 1rem;
        border-radius: 8px;
    }

    .btn-lg {
        min-height: 56px;
        padding: 16px 32px;
        font-size: 1.0625rem;
    }

    .btn-sm {
        min-height: 40px;
        padding: 10px 20px;
        font-size: 0.9375rem;
    }

    /* 表单输入框 */
    .form-control,
    .form-select {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 1rem;
        border-radius: 8px;
        border: 2px solid rgba(255, 154, 86, 0.2);
        background: #243b5a;
        color: #e0e0e0;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--accent-orange);
        box-shadow: 0 0 0 0.25rem rgba(255, 154, 86, 0.15);
    }

    /* 文本域 */
    textarea.form-control {
        min-height: 120px;
    }

    /* 复选框和单选框 */
    .form-check-input {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }

    .form-check-label {
        font-size: 1rem;
        padding-top: 2px;
    }
}

/* ========================================
   3. 移动端卡片布局优化
   ======================================== */

@media (max-width: 767px) {
    /* 卡片间距 */
    .row.g-4 {
        --bs-gutter-y: 1.5rem;
    }

    /* 卡片样式 */
    .card {
        margin-bottom: 1.5rem;
        border-radius: 12px;
    }

    .card-body {
        padding: 1.5rem !important;
    }

    /* 服务卡片 */
    .service-card {
        padding: 2rem 1.5rem !important;
        margin-bottom: 1.5rem;
    }

    .service-card h4 {
        font-size: 1.25rem;
    }

    .service-card p {
        font-size: 0.9375rem;
    }

    /* 咨询师卡片 */
    .consultant-card {
        margin-bottom: 2rem;
    }

    .consultant-card .card-img-top {
        height: 250px !important;
    }

    .consultant-card .card-body {
        padding: 1.75rem 1.5rem !important;
    }

    /* 案例卡片 */
    .case-card {
        margin-bottom: 1.5rem;
    }

    /* 新闻卡片 */
    .news-card .card-img-top {
        height: 180px !important;
    }
}

/* ========================================
   4. 移动端文字大小优化
   ======================================== */

@media (max-width: 767px) {
    /* 标题 */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    h4 {
        font-size: 1.25rem !important;
    }

    h5 {
        font-size: 1.125rem !important;
    }

    /* 正文 */
    p {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* 小字 */
    small, .small {
        font-size: 0.875rem;
    }

    /* Display类 */
    .display-1 {
        font-size: 3rem !important;
    }

    .display-4 {
        font-size: 2rem !important;
    }

    .display-5 {
        font-size: 1.75rem !important;
    }
}

/* ========================================
   5. 移动端Hero区优化
   ======================================== */

@media (max-width: 767px) {
    .hero {
        min-height: 70vh !important;
    }

    .hero .row {
        min-height: 70vh !important;
    }

    .hero h1 {
        font-size: 2.25rem !important;
        margin-bottom: 1.5rem !important;
    }

    .hero p {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }

    /* Hero按钮组 */
    .hero .btn {
        width: 100%;
        margin-bottom: 1rem;
    }

    /* 数据指标 */
    .hero [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        margin-top: 2rem !important;
        padding-top: 2rem !important;
    }
}

/* ========================================
   6. 移动端Section间距优化
   ======================================== */

@media (max-width: 767px) {
    section {
        padding: 3rem 0 !important;
    }

    .py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* 分隔线 */
    hr {
        margin: 2rem 0;
    }
}

/* ========================================
   7. 底部固定CTA按钮
   ======================================== */

@media (max-width: 767px) {
    /* 固定底部预约按钮 */
    .fixed-bottom-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: linear-gradient(135deg, #ff9a56 0%, #ffb380 100%);
        padding: 1rem 1.5rem;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
        border-top: 2px solid rgba(255, 179, 128, 0.3);
    }

    .fixed-bottom-cta .btn {
        width: 100%;
        min-height: 56px;
        font-size: 1.125rem;
        font-weight: 600;
        background: white;
        color: #ff9a56;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .fixed-bottom-cta .btn:hover,
    .fixed-bottom-cta .btn:active {
        background: #f8f9fa;
        transform: scale(0.98);
    }

    /* 为固定按钮预留空间 */
    body {
        padding-bottom: 90px;
    }
}

/* ========================================
   8. 移动端图片优化
   ======================================== */

@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }

    .card-img-top {
        border-radius: 12px 12px 0 0;
    }

    /* Logo */
    .navbar-brand img {
        max-height: 40px;
    }
}

/* ========================================
   9. 移动端返回顶部按钮
   ======================================== */

@media (max-width: 767px) {
    #btn-back-to-top {
        width: 48px !important;
        height: 48px !important;
        bottom: 100px !important; /* 避免被固定CTA遮挡 */
        right: 16px !important;
        font-size: 1.25rem;
    }
}

/* ========================================
   10. 移动端表格优化
   ======================================== */

@media (max-width: 767px) {
    .table-responsive {
        border-radius: 8px;
        border: 1px solid rgba(255, 154, 86, 0.2);
    }

    .table {
        font-size: 0.9375rem;
    }

    .table th,
    .table td {
        padding: 0.875rem 0.75rem;
    }
}

/* ========================================
   11. 移动端模态框优化
   ======================================== */

@media (max-width: 767px) {
    .modal-dialog {
        margin: 1rem;
    }

    .modal-content {
        border-radius: 12px;
    }

    .modal-header,
    .modal-footer {
        padding: 1.25rem;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .modal-title {
        font-size: 1.25rem;
    }
}

/* ========================================
   12. 移动端Toast通知
   ======================================== */

@media (max-width: 767px) {
    .toast {
        max-width: calc(100% - 2rem);
        margin: 1rem;
        border-radius: 8px;
        font-size: 0.9375rem;
    }

    .toast-header {
        padding: 0.875rem 1rem;
    }

    .toast-body {
        padding: 1rem;
    }
}

/* ========================================
   13. 触摸目标最小尺寸
   ======================================== */

@media (max-width: 767px) {
    /* 所有可点击元素最小44x44px */
    a, button, .btn, .nav-link, .dropdown-item,
    .form-check-input, .form-check-label, select, input[type="checkbox"], input[type="radio"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* 链接间距 */
    a + a {
        margin-left: 0.75rem;
    }

    /* 列表项间距 */
    .list-unstyled li {
        margin-bottom: 0.875rem;
    }

    .list-group-item {
        padding: 1rem 1.25rem;
    }
}

/* ========================================
   14. 移动端禁用悬停效果
   ======================================== */

@media (max-width: 767px) {
    /* 移动端使用点击效果而非悬停 */
    .card:hover,
    .service-card:hover,
    .consultant-card:hover {
        transform: none;
    }

    /* 点击时的反馈 */
    .card:active,
    .service-card:active,
    .consultant-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
}

/* ========================================
   15. 移动端页脚优化
   ======================================== */

@media (max-width: 767px) {
    footer {
        text-align: center;
        padding: 2.5rem 0 1.5rem !important;
    }

    footer .row {
        text-align: center !important;
    }

    footer .col-lg-4,
    footer .col-lg-2,
    footer .col-lg-3 {
        margin-bottom: 2rem;
    }

    footer h5 {
        font-size: 1.125rem;
        margin-bottom: 1.25rem;
    }

    footer .list-unstyled li {
        margin-bottom: 0.875rem;
    }

    footer img {
        max-width: 100px;
    }
}

/* ========================================
   16. 性能优化 - 减少移动端动画
   ======================================== */

@media (max-width: 767px) {
    /* 简化动画以提升性能 */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }

    /* 禁用复杂动画 */
    .feature-icon::before,
    .card::before,
    .service-card::after {
        display: none;
    }
}

/* ========================================
   17. 横屏适配
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        min-height: 100vh !important;
    }

    .modal-dialog {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ========================================
   18. 小屏手机优化 (<375px)
   ======================================== */

@media (max-width: 374px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9375rem;
    }

    .card-body {
        padding: 1.25rem !important;
    }
}