@import url('../header/sub.css');

/* ============================================
   联系我们页面样式 - Contact Page (.lianxi)
   模块划分：
   - .lianxi                    页面容器
   - .lianxi__inner             内部两栏布局
   - .lianxi__info              左侧联系信息区
   - .lianxi__title             主标题
   - .lianxi__desc              描述文字
   - .lianxi__list              联系信息列表
   - .lianxi__item              单条联系方式
   - .lianxi__icon              联系图标
   - .lianxi__form              右侧表单
   - .lianxi__form-grid         表单字段网格
   - .lianxi__form-field        表单字段
   - .lianxi__form-input-wrap   输入框外层包装
   - .lianxi__form-submit       提交按钮
   ============================================ */

.lianxi {
    width: 100%;
    padding: 20px 0 60px;
}

/* --------------------------------------------
   两栏布局容器
   -------------------------------------------- */
.lianxi__inner {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

/* --------------------------------------------
   左侧联系信息区域
   -------------------------------------------- */
.lianxi__info {
    flex: 0 0 380px;
    max-width: 380px;
}

.lianxi__title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #000;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.lianxi__desc {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 6px 0;
}

/* --------------------------------------------
   联系方式列表
   -------------------------------------------- */
.lianxi__list {
    list-style: none;
    margin: 36px 0 0 0;
    padding: 0;
}

.lianxi__item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
}

.lianxi__item:last-child {
    margin-bottom: 0;
}

.lianxi__item-body {
    flex: 1;
    min-width: 0;
}

.lianxi__item-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #000;
    margin: 0 0 4px 0;
    line-height: 1.4;
    text-transform: uppercase;
}

.lianxi__item-value {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
    word-break: break-word;
}

/* --------------------------------------------
   联系信息图标 - 使用内联 SVG
   -------------------------------------------- */
.lianxi__icon {
    flex-shrink: 0;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-top: 2px;
}

/* 电话图标 */
.lianxi__icon--phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* 邮件信封图标 */
.lianxi__icon--email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

/* 定位图标 */
.lianxi__icon--location {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* 工厂图标 */
.lianxi__icon--factory {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M3 20V8l5 3V8l5 3V8l5 3v9z'/%3E%3Cpath d='M7 16h2'/%3E%3Cpath d='M12 16h2'/%3E%3Cpath d='M17 16h2'/%3E%3C/svg%3E");
}

/* --------------------------------------------
   右侧表单区域
   -------------------------------------------- */
.lianxi__form {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lianxi__form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 30px;
    margin-bottom: 22px;
}

.lianxi__form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lianxi__form-field--full {
    margin-bottom: 22px;
}

.lianxi__form-label {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    margin-bottom: 10px;
    line-height: 1.2;
}

.lianxi__form-required {
    color: #e53935;
    margin-left: 2px;
}

/* --------------------------------------------
   表单输入框包装 - 含左侧图标
   -------------------------------------------- */
.lianxi__form-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d0d0d0;
    padding-bottom: 8px;
    transition: border-color 0.2s ease;
}

.lianxi__form-input-wrap:focus-within {
    border-bottom-color: #000;
}

.lianxi__form-input-wrap--file {
    cursor: pointer;
}

.lianxi__form-input-wrap--textarea {
    align-items: flex-start;
    padding-bottom: 0;
    border: 1px solid #d0d0d0;
    padding: 12px 14px;
    border-radius: 2px;
    min-height: 140px;
    position: relative;
    transition: border-color 0.2s ease;
}

.lianxi__form-input-wrap--textarea:focus-within {
    border-color: #000;
}

/* --------------------------------------------
   表单图标
   -------------------------------------------- */
.lianxi__form-icon {
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 10px;
}

/* 用户图标 */
.lianxi__form-icon--user {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* 邮件图标 */
.lianxi__form-icon--mail {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

/* 电话图标 */
.lianxi__form-icon--phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* 公司/建筑图标 */
.lianxi__form-icon--building {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9v.01'/%3E%3Cpath d='M9 12v.01'/%3E%3Cpath d='M9 15v.01'/%3E%3Cpath d='M9 18v.01'/%3E%3C/svg%3E");
}

/* 标签/书签图标 */
.lianxi__form-icon--tag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}

/* 回形针图标 */
.lianxi__form-icon--paperclip {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}

/* 下载图标 - 位于文件选择行最右侧 */
.lianxi__form-icon--download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7,10 12,15 17,10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
    margin-right: 0;
    margin-left: auto;
}

/* 消息/留言图标 */
.lianxi__form-icon--message {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    margin-top: 2px;
    position: absolute;
    top: 14px;
    left: 14px;
}

/* --------------------------------------------
   表单输入框
   -------------------------------------------- */
.lianxi__form-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    color: #000;
    line-height: 1.5;
}

.lianxi__form-input::placeholder {
    color: #b0b0b0;
    font-weight: 400;
}

.lianxi__form-filename {
    flex: 1;
    font-size: 14px;
    color: #b0b0b0;
    line-height: 1.5;
    user-select: none;
}

.lianxi__form-textarea {
    flex: 1;
    min-width: 0;
    width: 100%;
    min-height: 110px;
    border: none;
    background: transparent;
    outline: none;
    padding: 0 0 0 26px;
    font-family: inherit;
    font-size: 14px;
    color: #000;
    line-height: 1.6;
    resize: vertical;
}

.lianxi__form-textarea::placeholder {
    color: #b0b0b0;
    font-weight: 400;
}

/* --------------------------------------------
   提交按钮 - Send Inquiry
   -------------------------------------------- */
.lianxi__form-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 10px 0;
    margin-top: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lianxi__form-submit:hover {
    color: var(--header-color-accent-2, #fcbc04);
}

.lianxi__form-submit-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: background-image 0.2s ease;
}

.lianxi__form-submit:hover .lianxi__form-submit-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcbc04' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
}

/* ============================================
   响应式适配 - Responsive
   ============================================ */

/* 平板设备 - 切换为上下两栏 */
@media screen and (max-width: 992px) {
    .lianxi__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 50px;
    }

    .lianxi__info {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    .lianxi__form {
        flex: 0 0 auto;
        width: 100%;
    }

    .lianxi__title {
        font-size: 32px;
    }
}

/* 移动端 */
@media screen and (max-width: 768px) {
    .lianxi {
        padding: 10px 10px 40px;
    }

    .lianxi__inner {
        gap: 40px;
        align-items: stretch;
    }

    .lianxi__info,
    .lianxi__form {
        width: 100%;
        max-width: 100%;
    }

    .lianxi__title {
        font-size: 28px;
    }

    .lianxi__desc {
        font-size: 13px;
    }

    .lianxi__list {
        margin-top: 28px;
    }

    .lianxi__item {
        margin-bottom: 22px;
        gap: 14px;
    }

    .lianxi__form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lianxi__form-field,
    .lianxi__form-input-wrap {
        width: 100%;
    }

    .lianxi__form-input-wrap--textarea {
        min-height: 120px;
    }
}

/* 小屏移动端 */
@media screen and (max-width: 480px) {
    .lianxi__title {
        font-size: 24px;
    }

    .lianxi__item-label {
        font-size: 11px;
    }

    .lianxi__item-value {
        font-size: 13px;
    }
}