/**
 * footer.css - 公共页脚组件样式
 */

.site-footer { width: 100%; background-color: #333333; color: #d1d1d1; font-size: 12px; position: relative; margin-top: 0px; }
.footer-top-bar { height: 80px; margin-top: 100px; background-color: #333333; border-bottom: 1px solid #444; position: relative; }
.footer-top-inner { width: 1200px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: flex-end; position: relative; }
.footer-scroll-top-btn { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background-color: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; }
.arrow-icon-up { width: 16px; height: 16px; border-left: 2px solid #999; border-top: 2px solid #999; transform: rotate(45deg); margin-top: 6px; }
.footer-social-area { display: flex; align-items: center; gap: 20px; }
.social-label { font-size: 16px; color: #ddd; font-weight: normal; }
.social-icons { display: flex; gap: 15px; align-items: center; }
.social-icon { height: 24px; width: auto; opacity: 0.8; cursor: pointer; transition: opacity 0.3s; }
.social-icon:hover { opacity: 1; }
.footer-main-content { background-color: #333333; padding: 40px 0 50px 0; }
.footer-flex-row { width: 1260px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
.footer-left-info { width: 320px; padding-right: 20px; }
.footer-logo { width: 240px; height: auto; margin-bottom: 30px; display: block; }
.footer-contact-title { font-size: 18px; color: #ddd; margin-bottom: 20px; font-weight: normal; letter-spacing: 1px; }
.contact-list p { margin-bottom: 8px; line-height: 1.6; color: #b0b0b0; font-size: 13px; }
.footer-right-links { flex: 1; margin-left: 60px; padding-top: 10px; }
.links-header-bar { width: 100%; background-color: #444444; height: 32px; line-height: 32px; text-align: center; color: #ddd; margin-bottom: 25px; font-size: 14px; letter-spacing: 2px; }
.links-grid { display: flex; justify-content: space-between; }
.link-col { flex: 1; padding-right: 10px; }
.link-col li { margin-bottom: 8px; list-style: none; }
.link-col li a { color: #aaa; font-size: 12px; display: block; text-decoration: none; }
.link-col li a:hover { color: #fff; text-decoration: underline; }
.footer-bottom-copyright { background-color: #58595b; padding: 25px 0; text-align: center; color: #b6b7b9; font-size: 12px; border-top: none; }
.copyright-container { width: 1200px; margin: 0 auto; display: flex; justify-content: center; gap: 30px; font-family: 'CustomArial', 'CustomArialUnicode'; }

/* 手机端专用样式 - 默认隐藏 */
.follow-us-section { display: none; }
.mobile-footer-content { display: none; }

/* 媒体查询：手机端适配 (最大宽度 768px) */
@media screen and (max-width: 768px) {
    /* 隐藏PC端内容 */
    .footer-scroll-top-btn,
    .footer-top-bar,
    .footer-main-content,
    .footer-bottom-copyright { display: none !important; }

    /* 重置footer边距 */
    .site-footer {
        margin-top: 0;
        background-color: #3f3f3f;
    }

    /* 显示手机端内容 */
    .follow-us-section { display: block; }
    .mobile-footer-content { display: block; }

    /* 手机端关注我们区域 */
    .follow-us-section {
        width: 100%;
        background: url('../img/bg-5.png') no-repeat center center;
        background-size: cover;
        padding: 20px 0;
        text-align: center;
    }

    .follow-us-container {
        max-width: 100%;
        margin: 0 auto;
    }

    .follow-us-title {
        font-size: 24px;
        color: #fff;
        margin-bottom: 30px;
        font-weight: normal;
        letter-spacing: 2px;
    }

    .follow-us-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 25px;
        padding-bottom: 10px;
    }

    .icon-item {
        width: 54px;
        height: 54px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #fff;
        border-radius: 50%;
        background: transparent;
    }

    .icon-item img {
        width: auto;
        height: auto;
        max-width: 32px;
        max-height: 32px;
        display: block;
        filter: brightness(0) invert(1);
    }

    /* 手机端主要内容区域 */
    .mobile-footer-content {
        background-color: #3f3f3f;
    }

    /* Logo和友情链接区域 */
    .mf-middle-section {
        display: flex;
        border-bottom: 1px solid #fff;
        height: 140px;
        position: relative;
    }

    .mf-middle-section::after {
        content: '';
        position: absolute;
        left: 40%;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: #fff;
    }

    .mf-logo-area {
        flex: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .mf-logo {
        width: 100%;
        max-width: 120px;
        height: auto;
    }

    .mf-links-area {
        flex: 6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 20px 30px 20px;
    }

    .mf-links-title {
        color: #ccc;
        font-size: 24px;
        margin-bottom: 15px;
        letter-spacing: 1px;
        font-weight: normal;
    }

    .mf-links-dropdown {
        width: 100%;
        position: relative;
        background-color: #555;
        border-radius: 20px;
        height: 36px;
    }

    .mf-links-dropdown select {
        width: 100%;
        height: 100%;
        background: transparent;
        border: none;
        color: #fff;
        padding: 0 30px 0 15px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
        font-size: 14px;
    }

    .mf-links-dropdown::after {
        content: '';
        position: absolute;
        right: 12px;
        top: 45%;
        transform: translateY(-50%) rotate(45deg);
        width: 8px;
        height: 8px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        pointer-events: none;
    }

    /* 联系我们区域 */
    .mf-contact-section {
        padding: 30px 25px;
        background-color: #3f3f3f;
        position: relative;
    }

    .mf-contact-title {
        font-size: 20px;
        color: #ccc;
        margin-bottom: 20px;
        font-weight: normal;
        letter-spacing: 1px;
    }

    .mf-contact-info {
        line-height: 1.8;
    }

    .mf-contact-info p {
        margin-bottom: 0;
        color: #ccc;
        font-size: 14px;
        line-height: 2;
        font-weight: normal;
    }

    /* 手机端回到顶部按钮 */
    .mf-scroll-top {
        position: absolute;
        right: 20px;
        bottom: 40px;
        width: 50px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        z-index: 10;
        cursor: pointer;
    }

    .mf-scroll-top .arrow-icon-up {
        width: 14px;
        height: 14px;
        border-left: 3px solid #999;
        border-top: 3px solid #999;
        transform: rotate(45deg);
        margin-top: 6px;
    }

    /* 版权区域 */
    .mf-copyright-section {
        background-color: #48484a;
        padding: 25px 15px;
        text-align: center;
    }

    .mf-copyright-section p {
        color: #ddd;
        font-size: 12px;
        line-height: 1.8;
        margin: 0;
    }
}