/**
 * ============================================================================
 * 产品咨询表单区域样式 - Product Inquiry Form Section
 * ============================================================================
 * 采用BEM命名规范，仅影响 .chanpin-comment-container 及其子元素
 * 确保与页面现有设计风格保持视觉一致性
 * ============================================================================
 */

/**
 * Block: chanpin-comment-container
 * 产品咨询表单区域主容器
 * 采用左右两栏布局，左侧表单，右侧图片
 */
.chanpin-comment-container {
    padding: 80px 0;
    background-color: #ffffff;
}

.chanpin-comment-container>.w-banxin {
    display: flex;
    gap: 100px;
    align-items: stretch;
    /* max-width: 1400px; */
    margin: 0 auto;
    padding: 0 40px;
}

/**
 * Element: chanpin-comment__left
 * 左侧表单区域
 */
.chanpin-comment__left {
    flex: 1;
    min-width: 0;
}

/**
 * Element: chanpin-comment__right
 * 右侧图片区域
 */
.chanpin-comment__right {
    flex: 0 0 50%;
    /* max-width: 560px; */
    display: flex;
    align-items: center;
}

.chanpin-comment__right {
    background-image: url("../images/index/bc-logo-2.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* .chanpin-comment__right img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(26, 54, 93, 0.12);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
} */

/* .chanpin-comment__right img:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(26, 54, 93, 0.18);
} */

/**
 * Block: fc-form-body (表单主体)
 * 表单字段容器
 */
.chanpin-comment__left .fc-form-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/**
 * Element: form-group
 * 表单字段组
 */
.chanpin-comment__left .form-group {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 0;
}

/**
 * Element: control-label
 * 表单标签
 */
.chanpin-comment__left .control-label {
    flex: 0 0 100px;
    font-size: 15px;
    font-weight: 500;
    color: var(--header-color-text, #221815);
    line-height: 44px;
    text-align: right;
    margin-bottom: 0;
}

.chanpin-comment__left .control-label .required {
    color: #e74c3c;
    margin-right: 4px;
}

/**
 * Element: col-md-10
 * 表单输入区域
 */
.chanpin-comment__left .col-md-10 {
    flex: 1;
    min-width: 0;
}

/**
 * Element: form-control
 * 表单输入控件
 */
.chanpin-comment__left .form-control {
    width: 100% !important;
    height: 44px;
    padding: 10px 16px;
    font-size: 15px;
    color: var(--header-color-text, #221815);
    background-color: #ffffff;
    border: 1px solid var(--header-color-border, #E0E8EC);
    border-radius: 6px;
    transition: all 0.25s ease;
    outline: none;
}

.chanpin-comment__left .form-control:hover {
    border-color: #b8c5d0;
}

.chanpin-comment__left .form-control:focus {
    border-color: var(--header-color-accent, #1345E2);
    box-shadow: 0 0 0 3px rgba(19, 69, 226, 0.1);
}

.chanpin-comment__left .form-control::placeholder {
    color: #a0aec0;
}

/**
 * Modifier: textarea
 * 多行文本输入框
 */
.chanpin-comment__left textarea.form-control {
    height: 120px !important;
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

/**
 * Element: help-block
 * 帮助提示文本
 */
.chanpin-comment__left .help-block {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--header-color-text-secondary, #666666);
}

/**
 * Block: form-actions
 * 表单操作按钮区域
 */
.chanpin-comment__left .form-actions {
    margin-top: 32px;
    padding-left: 116px;
}

/**
 * Element: btn
 * 提交按钮
 */
.chanpin-comment__left .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--header-color-accent);
    /* background: linear-gradient(135deg, var(--header-color-accent, #1345E2) 0%, var(--header-color-accent-2, #08359C) 100%); */
    border: none;
    /* border-radius: 6px; */
    cursor: pointer;
    transition: all 0.3s ease;
    /* box-shadow: 0 4px 12px rgba(19, 69, 226, 0.25); */
}

.chanpin-comment__left .btn:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 6px 20px rgba(19, 69, 226, 0.35); */
}

.chanpin-comment__left .btn:active {
    transform: translateY(0);
}

.chanpin-comment__left .btn i {
    font-size: 14px;
}

/**
 * Modifier: green (按钮颜色修饰符)
 */
.chanpin-comment__left .btn.green {
    background: linear-gradient(135deg, #27ae60 0%, #219a52 100%);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.25);
}

.chanpin-comment__left .btn.green:hover {
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.35);
}

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

/* 平板设备 (1024px以下) */
@media screen and (max-width: 1024px) {
    .chanpin-comment-container {
        padding: 60px 0;
    }

    .chanpin-comment-container>.w-banxin {
        gap: 40px;
        padding: 0 30px;
    }

    .chanpin-comment__right {
        flex: 0 0 40%;
    }

    .chanpin-comment__right img {
        max-height: 450px;
    }
}

/* 小平板/大手机 (768px以下) */
@media screen and (max-width: 768px) {
    .chanpin-comment-container {
        padding: 48px 0;
    }

    .chanpin-comment-container>.w-banxin {
        flex-direction: column-reverse;
        gap: 40px;
        padding: 0 20px;
    }

    .chanpin-comment__left,
    .chanpin-comment__right {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    .chanpin-comment__right img {
        max-height: 300px;
        width: 100%;
    }

    .chanpin-comment__left .form-group {
        flex-direction: column;
        gap: 6px;
    }

    .chanpin-comment__left .control-label {
        flex: none;
        text-align: left;
        line-height: 1.4;
        font-size: 14px;
    }

    .chanpin-comment__left .col-md-10 {
        width: 100%;
    }

    .chanpin-comment__left .form-control {
        width: 100% !important;
        height: 46px;
        padding: 12px 14px;
        font-size: 16px;
        /* 防止iOS缩放 */
        border-radius: 8px;
    }

    .chanpin-comment__left .form-actions {
        padding-left: 0;
        margin-top: 28px;
    }

    .chanpin-comment__left .btn {
        width: 100%;
        height: 50px;
        justify-content: center;
        font-size: 16px;
        border-radius: 8px;
    }
}

/* 小屏手机 (480px以下) */
@media screen and (max-width: 480px) {
    .chanpin-comment-container {
        padding: 32px 0;
    }

    .chanpin-comment-container>.w-banxin {
        padding: 0 16px;
        gap: 32px;
    }

    .chanpin-comment__left .form-group {
        gap: 4px;
        margin-bottom: 4px;
    }

    .chanpin-comment__left .control-label {
        font-size: 16px;
        font-weight: 500;
    }

    .chanpin-comment__left .col-md-10 {
        width: 100%;
    }

    .chanpin-comment__left .form-control {
        width: 100% !important;
        height: 44px;
        padding: 10px 12px;
        font-size: 16px;
        /* 保持16px防止iOS缩放 */
        border-radius: 6px;
    }

    .chanpin-comment__left textarea.form-control {
        height: 90px !important;
        min-height: 90px;
    }

    .chanpin-comment__left .form-actions {
        margin-top: 24px;
    }

    .chanpin-comment__left .btn {
        height: 46px;
        font-size: 15px;
        border-radius: 6px;
    }

    .chanpin-comment__right img {
        max-height: 200px;
    }
}

/**
 * ============================================================================
 * 表单验证状态样式
 * ============================================================================
 */

/* 验证错误状态 */
.chanpin-comment__left .form-control.error,
.chanpin-comment__left .form-control.is-invalid {
    border-color: #e74c3c;
    background-color: #fdf2f2;
}

.chanpin-comment__left .form-control.error:focus,
.chanpin-comment__left .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* 验证成功状态 */
.chanpin-comment__left .form-control.success,
.chanpin-comment__left .form-control.is-valid {
    border-color: #27ae60;
}

.chanpin-comment__left .form-control.success:focus,
.chanpin-comment__left .form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

/* 错误提示信息 */
.chanpin-comment__left .help-block.error {
    color: #e74c3c;
}