/* ==========================================================================
   基础变量 (可能相关)
   ========================================================================== */
   :root {
    --primary-color: #007aff;
    --primary-hover: #007aff;
    /* --gradient-primary: Define this gradient if needed for the button */
    /* ... 其他可能用到的变量 ... */
}

/* ==========================================================================
   基础和容器样式 (可能相关)
   ========================================================================== */
*, *:before, *:after {
    box-sizing: border-box;
}

.container {
    max-width: 1680px; /* 或根据您的设计 */
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Added transform for button arrow */
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h2, h3 {
    margin: 0; /* 重置外边距 */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   立即体验部分 (.footer-cta) - ** NEW STYLES INTEGRATED **
   ========================================================================== */
.footer-cta {
    /* === NEW STYLES START === */
    background-image: url('/themes/web/www/common/footer.jpg'); /* New */
    background-size: cover;                  /* New */
    background-position: center;             /* New */
    background-repeat: no-repeat;            /* New */
    padding: 60px 0;                         /* New */
    position: relative;                      /* New */
    /* === NEW STYLES END === */
    /* text-align: center; */ /* Removed - Handled by .cta-content */
    /* background-color: #f8f9fa; */ /* Removed - Replaced by background-image */
    border-top: 1px solid #eee;  /* Kept existing border, adjust if needed */
}

/* Styles specifically for the content wrapper inside .footer-cta */
/* Positioned within the .container in your HTML */
.cta-content {
    /* === NEW STYLES START === */
    position: relative;                      /* New */
    z-index: 1;                              /* New */
    text-align: left;                        /* New */
    max-width: 1200px;                       /* New */
    /* margin: 0; */ /* Let .container handle centering via margin: auto */
    /* padding-left: 20px; */ /* Let .container handle padding via padding: 0 20px */
    /* Note: If .cta-content should NOT be centered by .container, */
    /* you might need `margin: 0 auto 0 0;` or similar depending on exact layout goal */
    /* === NEW STYLES END === */
}


/* Styles for the heading inside .cta-content */
.cta-content h2 {
    /* === NEW STYLES START === */
    font-size: 32px;                         /* New */
    color: #000;                             /* New */
    margin-bottom: 30px;                     /* New */
    font-weight: 500;                        /* New */
    text-align: left;                        /* New */
    margin-left: 0;                          /* New */
    /* === NEW STYLES END === */
}

/* Styles for the button inside .cta-content */
.cta-button { /* Note: This targets <a> tag directly based on your HTML */
    /* === NEW STYLES START === */
    display: flex;                           /* New */
    align-items: center;                     /* New */
    justify-content: space-between;        /* New */
    padding: 8px 24px;                       /* New */
    width: 280px;                            /* New */
    /* background: var(--gradient-primary); */ /* New - Requires variable definition */
    background-color: var(--primary-color);  /* Using existing variable as placeholder */
    color: #fff;                             /* New */
    text-decoration: none;                   /* New */
    font-size: 16px;                         /* New */
    border-radius: 0;                        /* New */
    margin-left: 0;                          /* New */
    /* === NEW STYLES END === */
    /* display: inline-block; */ /* Removed */
    /* transition: background-color 0.3s ease, box-shadow 0.3s ease; */ /* Combined transitions in base `a` tag */
      /* 新增圆角样式 */
    border-radius: 8px; /* 调整这个值可以改变圆角大小 */
}


/* Added pseudo-element style for the arrow */
.cta-button::after {
    content: '→';
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* Styles for the button hover state */
.cta-button:hover {
    /* background: var(--gradient-primary); */ /* New - Requires variable definition */
    background-color: var(--primary-hover); /* Using existing variable as placeholder */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */ /* Removed - Define hover effect as needed */
}

/* Added hover effect for the arrow */
.cta-button:hover::after {
    transform: translateX(5px);
}


/* ==========================================================================
   服务特点部分 (.service-features) - 基础样式 (Unchanged)
   ========================================================================== */
.service-features {
    padding: 20px 0;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.features-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.service-features .feature-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.service-features .feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    flex-shrink: 0;
}

.service-features .feature-icon svg {
    width: 100%;
    height: 100%;
}

.service-features .feature-content {
    flex: 1;
}

.service-features .feature-content h3 {
    font-size: 16px;
    color: #333;
    margin: 0 0 5px 0;
    font-weight: 500;
    line-height: 1.4;
}

.service-features .feature-content p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   页脚导航部分 (.footer-nav) - 基础样式 (Unchanged)
   ========================================================================== */
.footer-nav {
    padding: 60px 0;
    background: #fff;
}

.footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 默认5列 */
    gap: 40px;
}

.footer-nav-item h3 {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
}

.footer-nav-item ul li {
    margin-bottom: 12px;
}

.footer-nav-item ul li a {
    color: #666;
    font-size: 14px;
}

.footer-nav-item ul li a:hover {
    color: var(--primary-color);
}

.contact-info li {
    color: #666;
    font-size: 14px;
    margin-bottom: 12px;
}

.qr-codes {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.qr-item {
    text-align: center;
}

.qr-item img {
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
}

.qr-item span {
    font-size: 12px;
    color: #666;
    display: block;
}




/* 二维码悬停放大效果 */
.qr-codes {
    position: relative; /* 为绝对定位的放大图提供参考 */
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.qr-item {
    position: relative; /* 为子元素提供定位上下文 */
    text-align: center;
    transition: all 0.3s ease;
    z-index: 1;
}

.qr-item img {
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.qr-item span {
    font-size: 12px;
    color: #666;
    display: block;
}

/* 放大效果现在由JavaScript处理 */
/* 移除CSS悬停效果，改用JavaScript动态实现 */

/* 二维码放大效果现在由JavaScript处理 */
/* 移除无法工作的CSS变量，改用JavaScript动态设置 */

/* ==========================================================================
   版权信息部分 (.footer-copyright) - 基础样式 (Unchanged)
   ========================================================================== */
.footer-copyright {
    padding: 20px 0;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.copyright-content {
    text-align: center;
}

.copyright-content p {
    color: #999;
    font-size: 12px;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.copyright-content p:last-child {
    margin-bottom: 0;
}

.copyright-content a {
    color: #999;
    display: inline-flex;
    align-items: center;
    margin: 0 8px;
    vertical-align: middle;
}

.copyright-content a:hover {
    color: #666;
}

.copyright-content img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.copyright-content .divider {
    display: none; /* 通常移动端不显示分隔符 */
}


/* ==========================================================================
   响应式样式 - 针对移动端 (小于等于 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. 隐藏不需要在移动端显示的部分 */
    .service-features,        /* 隐藏服务特点 */
    .footer-nav {             /* 隐藏页脚导航 */
        display: none !important; /* 使用 !important 确保覆盖其他规则 */
    }

    /* 2. 应用 .footer-cta 的移动端样式 (** NEW STYLES INTEGRATED **) */
    .footer-cta {
        /* === NEW MOBILE STYLES START === */
        padding: 40px 0;                 /* New */
        /* === NEW MOBILE STYLES END === */
    }

    .cta-content {
        /* === NEW MOBILE STYLES START === */
        /* padding-left: 15px; */ /* Let .container handle padding */
        /* === NEW MOBILE STYLES END === */
    }

    .cta-content h2 {
        /* === NEW MOBILE STYLES START === */
        font-size: 24px;                 /* New */
        margin-bottom: 20px;             /* New */
        /* === NEW MOBILE STYLES END === */
    }

    .cta-button { /* Targeting the <a> tag */
        /* === NEW MOBILE STYLES START === */
        padding: 6px 20px;               /* New */
        font-size: 14px;                 /* New */
        width: 240px;                    /* New */
        /* === NEW MOBILE STYLES END === */
    }

    /* 3. 调整需要在移动端显示的部分 (版权信息) 的样式 (Unchanged from previous) */
    .footer-copyright {
        display: block; /* 确保它显示 */
        padding: 20px 0; /* 调整移动端内边距 */
    }

    .copyright-content p {
        font-size: 11px; /* 调整移动端字号 */
        line-height: 1.8; /* 增加行高 */
    }

    .copyright-content a {
        margin: 4px; /* 调整移动端链接间距 */
    }

    .copyright-content img {
        width: 14px; /* 调整移动端图标大小 */
        height: 14px;
    }

    /* 4. (可选) 调整其他相关元素的布局 */
    /* footer { padding-bottom: 20px; } */

}

/* ==========================================================================
   响应式样式 - 针对更大屏幕 (如果需要的话) (Unchanged)
   ========================================================================== */

/* 调整中等屏幕 (例如 769px - 1200px) 的布局 */
@media (min-width: 769px) and (max-width: 1200px) {
    .footer-nav-grid {
        grid-template-columns: repeat(3, 1fr); /* 中屏幕3列 */
        gap: 30px;
    }
    .features-wrapper {
        flex-wrap: wrap; /* 服务特点也可能需要换行 */
        gap: 20px;
    }
    .service-features .feature-item {
        flex: 0 0 calc(50% - 10px); /* 服务特点在中屏也可能需要调整布局 */
    }
}

/* 调整更小屏幕 (例如小于 576px) 的布局 (如果需要在 768px 以下进一步调整) */
@media (max-width: 576px) {
    /* 这里可以进一步调整 .footer-cta 和 .footer-copyright 的样式 */
    .cta-content h2 {
        font-size: 20px; /* 在更小的屏幕上进一步减小字号 */
    }
    .cta-button {
        width: 200px; /* 在更小的屏幕上进一步减小按钮宽度 */
        padding: 5px 16px;
        font-size: 13px;
    }
    .copyright-content p {
        font-size: 10px; /* 在更小的屏幕上进一步减小字号 */
    }
}
/* ==========================================================================
   联系方式样式
   ========================================================================== */
.contact-method {
    margin-bottom: 15px;
}

.contact-method p {
    font-size: 15px;
    color: #444;
    line-height: 1.5;
}

.contact-method a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
}

.contact-method a:hover {
    text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 768px) {
    /* 移动端隐藏添加的联系信息 */
    .contact-method {
        display: none;
    }
}


/* ==========================================================================
   图标样式
   ========================================================================== */

.contact-method p {
    margin: 0.5em 0;
    padding-left: 1.8em; /* 给图标留出空间 */
    position: relative;
    line-height: 1.5;
}

.email::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1em;
    height: 1em;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.phone::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1em;
    height: 1em;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}