/**
 * Online Message 在线留言页面样式文件
 * ---------------------------------------------
 * 本文件定义在线留言页面的表单样式
 * 包含：表单容器、表单项、输入框、复选框、提交按钮等
 * 
 * @author WDWeb Team
 * @version 1.0
 */

/* ========================================
    表单容器样式
   ======================================== */

/**
 * .formBox 表单容器
 * width: 1440px - 固定宽度
 * margin: auto - 水平居中
 * background: #F0F6FF - 浅蓝色背景
 * padding: 90px 120px - 内边距
 */
.formBox {
  width: 1440px;
  margin: auto;
  background: #f0f6ff;
  padding: 90px 120px;
}

/* ========================================
    表单项样式
   ======================================== */

/**
 * .form-item 表单项容器
 * width: 100% - 全宽
 * margin-bottom: 40px - 底部间距
 */
.form-item {
  width: 100%;
  margin-bottom: 40px;
}

/**
 * .form-item label 表单项标签
 * display: block - 块级显示
 * font-size: 18px - 字号
 * color: #3E3A39 - 深灰色
 * margin-bottom: 10px - 底部间距
 * font-weight: 600 - 半粗体
 */
.form-item label {
  display: block;
  font-size: 18px;
  color: #3e3a39;
  margin-bottom: 10px;
  font-weight: 600;
}

/**
 * .form-item input, textarea 输入框和文本域
 * width: 100% - 全宽
 * padding: 15px 20px - 内边距
 * border - 浅灰色边框
 * border-radius: 8px - 圆角
 * font-size: 16px - 字号
 * outline: none - 移除焦点轮廓
 * background: #FFFFFF - 白色背景
 * box-shadow - 阴影效果
 */
.form-item input,
.form-item textarea {
  width: 100%;
  padding: 15px 20px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  background: #ffffff;
  box-shadow: 0px 3px 7px 0px rgba(42, 65, 151, 0.47);
  border-radius: 5px;
}

/**
 * .form-item input:focus, textarea:focus 输入框焦点状态
 * border-color: #FFF - 白色边框（与阴影配合）
 */
.form-item input:focus,
.form-item textarea:focus {
  border-color: #fff;
}

/* ========================================
    提交按钮样式
   ======================================== */

/**
 * .submit-btn 提交按钮
 * padding: 15px 50px - 内边距
 * background: #e12600 - 红色背景
 * color: #fff - 白色文字
 * border: none - 无边框
 * border-radius: 8px - 圆角
 * font-size: 18px - 字号
 * cursor: pointer - 手型光标
 * transition - 过渡动画
 */
.submit-btn {
  padding: 15px 50px;
  background: #e12600;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s;
}

/**
 * .submit-btn:hover 提交按钮悬停状态
 * background - 半透明红色
 */
.submit-btn:hover {
  background: rgba(225, 38, 0, 0.5);
}

/* ========================================
    小型表单项样式
   ======================================== */

/**
 * .form-item.mini 小型表单项
 * width: 550px - 固定宽度（半宽）
 */
.form-item.mini {
  width: 550px;
}

/**
 * .form-item i 必填标记
 * color: #e12600 - 红色
 */
.form-item i {
  color: #e12600;
}

/* ========================================
    复选框组样式
   ======================================== */

/**
 * .checkbox-group 复选框组容器
 * display: flex - 弹性布局
 * flex-wrap: wrap - 自动换行
 * gap: 20px - 项目间距
 * padding: 10px 0 - 上下内边距
 */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 0;
}

/**
 * .checkbox-label 复选框标签
 * display: flex - 弹性布局
 * align-items: center - 垂直居中
 * cursor: pointer - 手型光标
 * font-size: 16px - 字号
 * color: #3E3A39 - 深灰色
 * font-weight: normal - 常规字重
 */
.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: #3e3a39;
  font-weight: normal;
}

/**
 * .checkbox-label input[type="checkbox"] 复选框
 * width/height: 18px - 固定尺寸
 * margin-right: 8px - 右侧间距
 * cursor: pointer - 手型光标
 * box-shadow: none - 无阴影
 */
.checkbox-label input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  cursor: pointer;
  box-shadow: none;
}

/**
 * .checkbox-label 复选框标签宽度
 * width: 220px - 固定宽度
 */
.checkbox-label {
  width: 220px;
}

/* ========================================
    底部提示文字样式
   ======================================== */

/**
 * .bottomText 底部提示文字
 * padding-top: 44px - 顶部内边距
 * width: 574px - 固定宽度
 * height: 80px - 固定高度
 * font-family: Microsoft YaHei - 微软雅黑
 * font-weight: 400 - 常规字重
 * font-size: 18px - 字号
 * color: #3E3A39 - 深灰色
 * line-height: 30px - 行高
 * font-style: italic - 斜体
 */
.bottomText {
  padding-top: 44px;
  width: 574px;
  height: 80px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 18px;
  color: #3e3a39;
  line-height: 30px;
  font-style: italic;
}