/* 移动端完整优化方案 - 覆盖原有样式 */

/* ========== 移动端基础设置 ========== */
@media (max-width: 768px) {
    /* 确保页面不横向滚动 */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* ========== Header优化 - 减少高度 ========== */
    .top_panel,
    header.top_panel {
        min-height: auto !important;
    }

    /* 隐藏桌面版的header部分 */
    .elementor-section.sc_layouts_hide_on_mobile,
    .sc_layouts_hide_on_mobile {
        display: none !important;
    }

    /* Logo区域优化 */
    .sc_layouts_logo {
        padding: 10px 0 !important;
    }

    .sc_layouts_logo img {
        max-height: 50px !important;
        width: auto !important;
    }

    /* Header section间距优化 */
    .elementor-section[data-id="6900a790"],
    .elementor-section[data-id="17ec1d4c"] {
        padding: 10px 0 !important;
        min-height: auto !important;
    }

    /* ========== 汉堡菜单按钮优化 ========== */
    .sc_layouts_menu_mobile_button,
    .sc_layouts_menu_mobile_button_burger {
        display: flex !important;
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
        z-index: 999999 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-radius: 8px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.25) !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
    }

    .sc_layouts_menu_mobile_button:active,
    .sc_layouts_menu_mobile_button_burger:active {
        transform: scale(0.95) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }

    /* 汉堡图标 */
    .sc_layouts_menu_mobile_button .sc_layouts_item_icon,
    .sc_layouts_menu_mobile_button_burger .sc_layouts_item_icon {
        font-size: 24px !important;
        color: #333 !important;
        line-height: 1 !important;
    }

    /* 确保链接可点击 */
    .sc_layouts_menu_mobile_button a,
    .sc_layouts_menu_mobile_button_burger a {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }

    /* ========== 移动端菜单容器优化 ========== */
    .menu_mobile {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #ffffff !important;
        box-shadow: 3px 0 20px rgba(0,0,0,0.3) !important;
        z-index: 999998 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 菜单头部 */
    .menu_mobile_header_wrap {
        padding: 20px !important;
        background: linear-gradient(135deg, #0DB68D 0%, #0a9670 100%) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    .menu_mobile_header_wrap .sc_layouts_logo img {
        max-height: 40px !important;
        filter: brightness(0) invert(1) !important;
    }

    /* 关闭按钮 */
    .menu_mobile_close {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        width: 35px !important;
        height: 35px !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    .menu_mobile_close_icon::before,
    .menu_mobile_close_icon::after {
        background: white !important;
    }

    /* 菜单内容区 */
    .menu_mobile_content_wrap {
        padding: 0 !important;
    }

    /* 菜单导航项 */
    .menu_mobile_nav_area {
        padding: 0 !important;
    }

    .menu_mobile_nav_area ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .menu_mobile_nav_area li {
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .menu_mobile_nav_area li a {
        display: block !important;
        padding: 16px 20px !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        transition: all 0.3s !important;
        background: white !important;
    }

    .menu_mobile_nav_area li a:hover,
    .menu_mobile_nav_area li a:active {
        background: #f8f8f8 !important;
        padding-left: 25px !important;
    }

    /* 子菜单 */
    .menu_mobile_nav_area .sub-menu {
        background: #f9f9f9 !important;
        padding-left: 0 !important;
    }

    .menu_mobile_nav_area .sub-menu li a {
        padding-left: 40px !important;
        font-size: 14px !important;
        color: #666 !important;
    }

    /* 遮罩层 */
    .menu_mobile_overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.65) !important;
        z-index: 999997 !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    /* ========== 内容区域优化 ========== */
    .page_content_wrap {
        padding: 15px !important;
    }

    /* 轮播图优化 */
    .rev_slider,
    .tp-revslider-mainul,
    .tp-revslider-slidesli {
        height: auto !important;
        min-height: 250px !important;
        max-height: 350px !important;
    }

    /* 图片自适应 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Section间距 */
    .elementor-section {
        padding: 20px 0 !important;
    }

    .elementor-container {
        padding: 0 15px !important;
    }

    /* 栏目自适应 */
    .elementor-column {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* ========== 按钮优化 ========== */
    .elementor-button,
    .btn,
    button {
        padding: 12px 24px !important;
        font-size: 14px !important;
        width: auto !important;
        min-width: 120px !important;
    }

    /* ========== 文字大小优化 ========== */
    h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    h3 {
        font-size: 18px !important;
    }

    p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* ========== 悬浮客服按钮优化 ========== */
    #floating-customer-service,
    .floating-customer-service {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 16px rgba(13,182,141,0.4) !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #0DB68D 0%, #0a9670 100%) !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
    }

    #floating-customer-service:active,
    .floating-customer-service:active {
        transform: scale(0.95) !important;
    }

    #floating-customer-service img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
    }

    /* ========== Footer优化 ========== */
    .footer_wrap {
        padding: 30px 15px !important;
    }

    .footer_wrap .elementor-column {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .footer_wrap p {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    /* ========== 表单优化 ========== */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px !important;
        border-radius: 6px !important;
    }

    /* ========== 卡片优化 ========== */
    .service-card,
    .doctor-card,
    .package-card,
    .article-card {
        margin-bottom: 20px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    }
}

/* ========== 小屏手机优化 (480px以下) ========== */
@media (max-width: 480px) {
    .sc_layouts_menu_mobile_button,
    .sc_layouts_menu_mobile_button_burger {
        width: 45px !important;
        height: 45px !important;
        top: 12px !important;
        right: 12px !important;
    }

    .menu_mobile {
        width: 90% !important;
    }

    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    .elementor-button,
    .btn {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
}

/* ========== 横屏优化 ========== */
@media (max-width: 768px) and (orientation: landscape) {
    .rev_slider,
    .tp-revslider-mainul {
        min-height: 200px !important;
        max-height: 250px !important;
    }

    .elementor-section {
        padding: 15px 0 !important;
    }
}

/* ========== 确保可点击性 ========== */
@media (max-width: 768px) {
    .sc_layouts_menu_mobile_button,
    .sc_layouts_menu_mobile_button *,
    .sc_layouts_menu_mobile_button a {
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    /* 移除可能阻挡点击的元素 */
    .elementor-section::before,
    .elementor-section::after {
        pointer-events: none !important;
    }

    /* ========== 知识库页面优化 ========== */
    .knowledge-base-container,
    .zhishiku-container {
        padding: 15px !important;
    }

    .article-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .article-item {
        background: white !important;
        border-radius: 8px !important;
        padding: 15px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        transition: all 0.3s !important;
    }

    .article-item:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
    }

    .article-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }

    .article-excerpt {
        font-size: 14px !important;
        color: #666 !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
    }

    .article-meta {
        font-size: 12px !important;
        color: #999 !important;
    }

    /* ========== 医生列表页面优化 ========== */
    .doctors-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .doctor-card {
        display: flex !important;
        background: white !important;
        border-radius: 8px !important;
        padding: 15px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }

    .doctor-avatar {
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
        margin-right: 15px !important;
        flex-shrink: 0 !important;
    }

    .doctor-info {
        flex: 1 !important;
    }

    .doctor-name {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 5px !important;
    }

    .doctor-title {
        font-size: 13px !important;
        color: #0DB68D !important;
        margin-bottom: 8px !important;
    }

    .doctor-desc {
        font-size: 13px !important;
        color: #666 !important;
        line-height: 1.5 !important;
    }

    /* ========== 服务/套餐页面优化 ========== */
    .service-grid,
    .package-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .service-card,
    .package-card {
        background: white !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }

    .service-image,
    .package-image {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
    }

    .service-content,
    .package-content {
        padding: 15px !important;
    }

    .service-title,
    .package-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
    }

    .service-desc,
    .package-desc {
        font-size: 14px !important;
        color: #666 !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
    }

    .service-price,
    .package-price {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #0DB68D !important;
    }

    /* ========== 关于我们页面优化 ========== */
    .about-section {
        padding: 20px 15px !important;
    }

    .about-title {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .about-content {
        font-size: 14px !important;
        color: #666 !important;
        line-height: 1.8 !important;
        text-align: justify !important;
    }

    .about-image {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        margin: 15px 0 !important;
    }

    /* ========== 联系我们页面优化 ========== */
    .contact-section {
        padding: 20px 15px !important;
    }

    .contact-info {
        background: white !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }

    .contact-item {
        display: flex !important;
        align-items: center !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .contact-item:last-child {
        border-bottom: none !important;
    }

    .contact-icon {
        width: 40px !important;
        height: 40px !important;
        background: #0DB68D !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }

    .contact-icon i {
        color: white !important;
        font-size: 18px !important;
    }

    .contact-text {
        flex: 1 !important;
    }

    .contact-label {
        font-size: 12px !important;
        color: #999 !important;
        margin-bottom: 3px !important;
    }

    .contact-value {
        font-size: 14px !important;
        color: #333 !important;
        font-weight: 500 !important;
    }

    /* ========== 表格优化 ========== */
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table thead {
        display: none !important;
    }

    table tbody,
    table tr,
    table td {
        display: block !important;
        width: 100% !important;
    }

    table tr {
        margin-bottom: 15px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 10px !important;
        background: white !important;
    }

    table td {
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
    }

    table td:before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        display: inline-block !important;
        width: 100px !important;
        color: #666 !important;
    }

    /* ========== 导航面包屑优化 ========== */
    .breadcrumbs {
        font-size: 12px !important;
        padding: 10px 15px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ========== 搜索框优化 ========== */
    .search-form {
        padding: 15px !important;
    }

    .search-input {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        border: 1px solid #ddd !important;
        border-radius: 25px !important;
        background: white !important;
    }

    .search-button {
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: #0DB68D !important;
        color: white !important;
        border: none !important;
        padding: 8px 20px !important;
        border-radius: 20px !important;
        font-size: 13px !important;
    }

    /* ========== 分页优化 ========== */
    .pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 20px 15px !important;
        gap: 8px !important;
    }

    .pagination a,
    .pagination span {
        min-width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        background: white !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
        text-decoration: none !important;
    }

    .pagination .current {
        background: #0DB68D !important;
        color: white !important;
        border-color: #0DB68D !important;
    }

    /* ========== 模态框优化 ========== */
    .modal,
    .popup {
        padding: 15px !important;
    }

    .modal-content,
    .popup-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    .modal-header,
    .popup-header {
        padding: 15px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .modal-body,
    .popup-body {
        padding: 15px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-footer,
    .popup-footer {
        padding: 15px !important;
        border-top: 1px solid #f0f0f0 !important;
    }

    /* ========== 加载动画优化 ========== */
    .loading,
    .spinner {
        width: 40px !important;
        height: 40px !important;
    }

    /* ========== 提示信息优化 ========== */
    .alert,
    .notice,
    .message {
        padding: 12px 15px !important;
        margin: 10px 15px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* ========== 标签云优化 ========== */
    .tag-cloud,
    .tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 15px !important;
    }

    .tag {
        padding: 6px 12px !important;
        background: #f5f5f5 !important;
        border-radius: 15px !important;
        font-size: 13px !important;
        color: #666 !important;
        text-decoration: none !important;
    }

    .tag:active {
        background: #0DB68D !important;
        color: white !important;
    }
}