/* 移动端适配样式 - 美名集 */

/* 响应式导航 */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 18px;
    }

    .navbar-nav {
        margin: 0;
    }

    .navbar-nav > li > a {
        padding: 10px 15px;
        font-size: 14px;
    }

    /* 移动端菜单折叠 */
    .navbar-collapse {
        border-top: 1px solid #e7e7e7;
        margin-top: 10px;
    }
}

/* 移动端首页布局 */
@media (max-width: 768px) {
    .hero-section {
        padding: 30px 0;
        text-align: center;
    }

    .hero-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .service-cards {
        padding: 20px 0;
    }

    .service-card {
        margin-bottom: 20px;
        padding: 20px;
        text-align: center;
    }

    .service-icon {
        font-size: 48px;
        margin-bottom: 15px;
    }

    .service-title {
        font-size: 18px;
        margin-bottom: 10px;
    }
}

/* 移动端表单优化 */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 15px;
    }

    .form-control {
        font-size: 16px; /* 防止iOS缩放 */
        padding: 10px 12px;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
        padding: 12px;
        font-size: 16px;
    }

    .btn-group {
        display: block;
    }

    .btn-group .btn {
        display: block;
        margin-bottom: 5px;
    }
}

/* 移动端结果展示 */
@media (max-width: 768px) {
    .result-card {
        margin-bottom: 15px;
        padding: 15px;
    }

    .result-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .result-content {
        font-size: 14px;
    }

    .score-badge {
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* 移动端分页 */
@media (max-width: 768px) {
    .pagination {
        text-align: center;
    }

    .pagination li {
        display: inline-block;
        margin: 0 2px;
    }

    .pagination li a {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* 移动端表格 */
@media (max-width: 768px) {
    .table-responsive {
        border: none;
    }

    .table {
        font-size: 14px;
    }

    .table thead {
        display: none;
    }

    .table tr {
        display: block;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 10px;
    }

    .table td {
        display: block;
        text-align: left;
        border: none;
        padding: 5px 0;
    }

    .table td:before {
        content: attr(data-label) ": ";
        font-weight: bold;
        display: inline-block;
        width: 80px;
    }
}

/* 移动端模态框 */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
        width: auto;
    }

    .modal-content {
        border-radius: 0;
    }

    .modal-header {
        padding: 15px;
    }

    .modal-body {
        padding: 15px;
    }

    .modal-footer {
        padding: 15px;
        text-align: center;
    }
}

/* 移动端标签页 */
@media (max-width: 768px) {
    .nav-tabs {
        border-bottom: 1px solid #ddd;
    }

    .nav-tabs li {
        float: none;
        display: block;
        text-align: center;
    }

    .nav-tabs li a {
        border: none;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
        margin: 0;
        padding: 15px;
    }

    .nav-tabs li.active a {
        border-bottom: 2px solid #337ab7;
    }

    .tab-content {
        padding: 15px 0;
    }
}

/* 移动端用户中心 */
@media (max-width: 768px) {
    .user-sidebar {
        position: static;
        width: 100%;
        margin-bottom: 20px;
    }

    .user-content {
        width: 100%;
    }

    .list-group-item {
        padding: 15px;
        font-size: 16px;
    }
}

/* 移动端底部 */
@media (max-width: 768px) {
    #footer {
        text-align: center;
        padding: 20px 0;
    }

    .seo-links .col-md-3 {
        width: 50%;
        float: left;
        margin-bottom: 20px;
    }

    .seo-links h5 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .seo-links ul {
        padding-left: 0;
    }

    .seo-links li {
        margin-bottom: 5px;
    }
}

/* 移动端工具提示 */
@media (max-width: 768px) {
    .tooltip {
        font-size: 12px;
    }
}

/* 移动端加载动画 */
@media (max-width: 768px) {
    .loading-spinner {
        width: 40px;
        height: 40px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px; /* iOS推荐的最小触摸目标 */
    }

    a {
        padding: 5px 0;
    }
}

/* 防止横向滚动 */
html, body {
    overflow-x: hidden;
}

/* 移动端图片优化 */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }

    .img-responsive {
        display: block;
        margin: 0 auto;
    }
}

/* 移动端字体优化 */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        line-height: 1.6;
    }

    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }
    h5 { font-size: 14px; }
}

/* 移动端间距优化 */
@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        padding-left: 10px;
        padding-right: 10px;
    }
}