/* ==================================================================
   全站统一「在线留言 + 高德地图」组件样式
   主站 temp\main\contact.aspx 与 4 个事业部子站 temp\sub*\contact.aspx 共用。
   统一使用 .fb- 前缀，避免与各站自己的 CSS 冲突。
   ================================================================== */

/* ---------- 两栏布局：左侧在线留言，右侧公司位置 ---------- */
.fb-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.fb-card {
  background: #fff;
  border: 1px solid #e5e8ef;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(26, 57, 130, .06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fb-card-head {
  padding: 20px 24px;
  border-bottom: 1px solid #eef1f6;
}

.fb-card-head h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 2px;
  color: #1a3982;
}

.fb-card-head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #8a94a6;
}

.fb-card-body {
  padding: 24px;
  flex: 1;
}

/* ---------- 表单 ---------- */
.fb-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fb-row {
  margin-bottom: 16px;
}

.fb-row label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #3a4556;
  margin-bottom: 8px;
}

.fb-row label .req {
  color: #e74c3c;
}

.fb-row input,
.fb-row textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #dfe4ed;
  border-radius: 6px;
  font-size: 15px;
  color: #232833;
  background: #fafbfd;
  font-family: inherit;
  outline: none;
  transition: .25s;
  box-sizing: border-box;
}

.fb-row input:focus,
.fb-row textarea:focus {
  border-color: #1a3982;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26, 57, 130, .08);
}

.fb-row textarea {
  resize: vertical;
  min-height: 118px;
}

/* 验证码 */
.fb-captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fb-captcha-row input {
  flex: 1;
}

.fb-captcha-img {
  width: 96px;
  height: 42px;
  border: 1px solid #dfe4ed;
  border-radius: 6px;
  background: #f6f8fc;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fb-captcha-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fb-captcha-refresh {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  border: 1px solid #dfe4ed;
  background: #f6f8fc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: .25s;
}

.fb-captcha-refresh:hover {
  background: #eaf0fb;
}

.fb-captcha-refresh svg {
  width: 18px;
  height: 18px;
  fill: #1a3982;
}

.fb-submit {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 6px;
  background: #1a3982;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: .3s;
}

.fb-submit:hover {
  background: #254a9e;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26, 57, 130, .25);
}

.fb-submit:disabled {
  background: #9aa6bf;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 主站联系我们：结构对齐 htmls\contact.html
   容器 .contact-content / .contact-map-section / .contact-form-section 由 contact.css 提供，
   这里只补地图高度（与设计稿截图 580px 等高）与验证码图片自适应 */
.contact-map-section .fb-map-box {
  height: 580px;
  min-height: 420px;
}

.contact-map-section .fb-map-branches {
  padding: 0 28px 24px;
}

/* 验证码图片：contact.css 只给了 canvas 的样式，这里补 img */
.captcha-img img,
.fb-captcha-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: pointer;
}

.captcha-refresh:hover,
.fb-captcha-refresh:hover {
  background: #eaf0fb;
}

/* 提交结果提示 */
.fb-tip {
  display: none;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
}

.fb-tip.show {
  display: block;
}

.fb-tip.err {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: #b52d1e;
}

.fb-tip.ok {
  background: #eaf7ef;
  border: 1px solid #b6e3c6;
  color: #1d7a41;
}

/* ---------- 地图（高德 JS API 自绘；无 Key 时退回 iframe 兜底） ---------- */
.fb-map-box {
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 320px;
  overflow: hidden;
  background: #f6f8fc;
}
.fb-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fb-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #f6f8fc;
}

/* 高德 InfoWindow 内容（默认白底气泡内） */
.fb-map-info {
  font: 14px/1.7 "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  padding: 2px 4px;
  min-width: 180px;
}
.fb-map-info b {
  font-size: 15px;
  color: #1a66ff;
}


.fb-map-branches {
  padding: 0 24px 20px;
}

.fb-branch {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed #e5e8ef;
  font-size: 14px;
  color: #5b6474;
  line-height: 1.7;
}

.fb-branch:first-child {
  border-top: none;
}

.fb-branch b {
  color: #232833;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .fb-layout {
    grid-template-columns: 1fr;
  }

  .fb-row-half {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fb-map-box {
    height: 320px;
    min-height: 260px;
  }
  .contact-map-section .fb-map-box {
  height: auto;
  min-height: 350px;
}
}