/* ================= 在线留言预约表单（/zxyy/） ================= */
.msg-wrap{ display: flex; gap: 22px; align-items: flex-start; margin: 26px 0 10px;}
.msg-main{
  flex: 1; min-width: 0; background: #fff; border: 1px solid #ececec;
  border-radius: 6px; box-shadow: 0 2px 14px rgba(0,0,0,.05); overflow: hidden;
}
.msg-head{
  padding: 20px 28px; background: linear-gradient(90deg,#669934 0%,#7fb33f 100%);
}
.msg-head h2{ margin: 0; font-size: 20px; color: #fff; font-weight: bold; letter-spacing: 1px;}
.msg-head p{ margin: 6px 0 0; font-size: 13px; color: rgba(255,255,255,.85); line-height: 20px;}

.msg-form{ padding: 26px 28px 30px;}
.msg-grid{ display: flex; flex-wrap: wrap; gap: 18px 20px;}
.msg-grid .msg-field{ width: calc(50% - 10px);}
.msg-field{ margin-bottom: 18px;}
.msg-field > label{
  display: block; font-size: 14px; color: #444; font-weight: bold; margin-bottom: 8px; line-height: 20px;
}
.msg-field > label em{ color: #e0652a; font-style: normal; margin-right: 3px;}

.msg-ctrl{ position: relative;}
.msg-ctrl input[type=text],
.msg-ctrl input[type=tel],
.msg-ctrl select,
.msg-ctrl textarea{
  width: 100%; box-sizing: border-box; height: 44px; line-height: 22px; padding: 10px 12px 10px 38px;
  font-size: 14px; color: #333; font-family: "Microsoft YaHei", Arial, sans-serif;
  background: #fbfcfb; border: 1px solid #e2e2e2; border-radius: 4px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.msg-ctrl select{ padding-left: 38px; padding-right: 32px; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa898' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
}
.msg-ctrl textarea{
  height: 128px; padding: 12px 12px 12px 14px; line-height: 23px; resize: vertical; min-height: 90px;
}
.msg-ctrl:hover input, .msg-ctrl:hover select, .msg-ctrl:hover textarea{ border-color: #c9d8b7;}
.msg-ctrl input:focus, .msg-ctrl select:focus, .msg-ctrl textarea:focus{
  border-color: #669934; background: #fff; box-shadow: 0 0 0 3px rgba(102,153,52,.12);
}
.msg-ctrl input::placeholder, .msg-ctrl textarea::placeholder{ color: #b3b3b3;}

/* 输入框左侧小图标（内联 SVG，无额外请求） */
.msg-ctrl > .mi{
  position: absolute; left: 13px; width: 16px; height: 16px; z-index: 2; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: 16px 16px; opacity: .75;
}
.msg-ctrl > .mi{ top: 14px;}
.mi-user{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa898'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E");}
.mi-tel{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa898'%3E%3Cpath d='M6.6 3h3l1.5 4-2 1.5a11 11 0 0 0 5.4 5.4l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A16 16 0 0 1 4.6 5.2 2 2 0 0 1 6.6 3z'/%3E%3C/svg%3E");}
.mi-mail{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa898' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");}
.mi-type{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa898' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3C/svg%3E");}
.mi-code{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa898' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 10h2v4H7zM11 9h2v6h-2zM15 10h2v4h-2z'/%3E%3C/svg%3E");}
.msg-ctrl-area > .mi{ display: none;}
.msg-ctrl-area textarea{ padding-left: 14px;}
.msg-count{ position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: #b0b0b0;}
.msg-count b{ color: #8b8b8b; font-weight: normal;}

/* 验证码行 */
.msg-ctrl-code{ display: flex; align-items: center; gap: 10px;}
.msg-ctrl-code input{ width: 190px; flex: none;}
.msg-ctrl-code img{
  height: 44px; border: 1px solid #e2e2e2; border-radius: 4px; background: #fff;
  cursor: pointer; display: block;
}
.msg-ctrl-code img:hover{ border-color: #669934;}
.msg-refresh{ font-size: 12px; color: #999; line-height: 18px;}

/* 提交行 */
.msg-submit-row{ display: flex; align-items: center; gap: 16px; margin-top: 26px;
  padding-top: 22px; border-top: 1px dashed #ebebeb;}
.msg-submit{
  width: 190px; height: 46px; line-height: 46px; border: none; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg,#669934 0%,#7fb33f 100%); color: #fff;
  font-size: 17px; font-weight: bold; letter-spacing: 2px; font-family: "Microsoft YaHei", Arial, sans-serif;
  box-shadow: 0 6px 16px rgba(102,153,52,.28); transition: all .22s;
}
.msg-submit:hover{ box-shadow: 0 8px 20px rgba(102,153,52,.4); transform: translateY(-1px);}
.msg-submit:active{ transform: translateY(0); box-shadow: 0 3px 10px rgba(102,153,52,.3);}
.msg-tip{ font-size: 13px; color: #999; line-height: 20px;}

/* 右侧信息栏 */
.msg-aside{ width: 268px; flex: none;}
.msg-card{
  background: #fff; border: 1px solid #ececec; border-radius: 6px; padding: 18px 20px;
  margin-bottom: 16px; box-shadow: 0 2px 14px rgba(0,0,0,.05);
}
.msg-card h3{
  font-size: 15px; color: #2f3a2a; font-weight: bold; padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.msg-card .msg-tel{ font-size: 25px; color: #e0652a; font-weight: bold; line-height: 32px; letter-spacing: 1px;}
.msg-card .msg-sub{ font-size: 13px; color: #888; line-height: 22px; margin-bottom: 12px;}
.msg-btn-tel{
  display: block; height: 40px; line-height: 40px; text-align: center; border-radius: 4px;
  background: #669934; color: #fff; font-size: 15px; transition: background .22s;
}
.msg-btn-tel:hover{ background: #4f7825; color: #fff;}
.msg-card-flow ol li{
  position: relative; font-size: 13px; color: #666; line-height: 22px; padding: 3px 0 3px 26px;
}
.msg-card-flow ol li span{
  position: absolute; left: 0; top: 6px; width: 18px; height: 18px; line-height: 18px; text-align: center;
  background: #eaf2df; color: #669934; border-radius: 50%; font-size: 11px; font-weight: bold;
}
.msg-card-tip dl dd{
  position: relative; font-size: 13px; color: #666; line-height: 22px; padding-left: 16px;
}
.msg-card-tip dl dd:before{
  content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: #669934;
}

@media (max-width: 1100px){
  .msg-wrap{ flex-direction: column;}
  .msg-aside{ width: 100%; display: flex; gap: 16px;}
  .msg-aside .msg-card{ flex: 1; margin-bottom: 0;}
}
@media (max-width: 768px){
  .msg-grid .msg-field{ width: 100%;}
  .msg-aside{ flex-direction: column;}
  .msg-ctrl-code input{ width: 140px;}
  .msg-submit{ width: 100%;}
}