/* ==========================================================================
   留言板（在线留言 / 企业试用申请）通用样式
   版式参考 jiamisoft.cn 在线留言页，品牌色通过 .gb-page 下的变量覆盖，
   与站点主题 CSS 解耦，可独立升级。
   v20261025
   ========================================================================== */

.gb-page {
  --gb-brand: #ff8400;
  --gb-brand-dark: #e07000;
  --gb-brand-50: #fff6ec;
  --gb-brand-100: #ffe4c9;
  --gb-ink-900: #191919;
  --gb-ink-800: #2b2b2b;
  --gb-ink-600: #5a5a5a;
  --gb-ink-400: #9a9a9a;
  --gb-ink-300: #d9d9d9;
  --gb-ink-200: #e6e6e6;
  --gb-ink-100: #efefef;
  --gb-line: #e3e3e3;
  --gb-bg: #f5f5f5;
  --gb-white: #fff;
  --gb-danger: #e5484d;
  --gb-r-sm: 6px;
  --gb-r-md: 10px;
  --gb-r-lg: 14px;
  --gb-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}

/* ---------- 布局 ---------- */
.gb-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.gb-section { padding: 54px 0 72px; background: var(--gb-bg); }
.gb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }

/* ---------- 表单卡片 ---------- */
.gb-card {
  padding: 34px 32px;
  background: var(--gb-white);
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-lg);
  box-shadow: var(--gb-shadow);
}
.gb-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--gb-ink-900);
  padding-bottom: 16px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--gb-ink-100);
}
.gb-form { display: flex; flex-direction: column; gap: 18px; }
.gb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gb-field { display: flex; flex-direction: column; min-width: 0; }
.gb-field-half { max-width: 360px; }
.gb-field > label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gb-ink-800);
}
.gb-field > label em { font-style: normal; color: var(--gb-danger); margin-left: 2px; }
.gb-field input[type="text"],
.gb-field input[type="tel"],
.gb-field textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gb-ink-900);
  background: var(--gb-white);
  border: 1px solid var(--gb-ink-300);
  border-radius: var(--gb-r-sm);
  transition: border-color .2s, box-shadow .2s;
}
.gb-field input:focus,
.gb-field textarea:focus {
  outline: none;
  border-color: var(--gb-brand);
  box-shadow: 0 0 0 3px rgba(255, 132, 0, .14);
}
.gb-field input::placeholder,
.gb-field textarea::placeholder { color: var(--gb-ink-400); }
.gb-field textarea { resize: vertical; min-height: 132px; }
.gb-tip { margin: 7px 0 0; font-size: 12.5px; color: var(--gb-ink-400); line-height: 1.7; }
.gb-captcha-row { display: flex; align-items: center; gap: 12px; }
.gb-captcha-row input { flex: 1 1 auto; min-width: 0; }
.gb-captcha-row img {
  flex: none;
  height: 42px;
  border: 1px solid var(--gb-ink-200);
  border-radius: var(--gb-r-sm);
  cursor: pointer;
}

/* ---------- 提交 ---------- */
.gb-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--gb-ink-100);
}
.gb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--gb-r-sm);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.gb-btn-primary { background: var(--gb-brand); color: #fff; }
.gb-btn-primary:hover { background: var(--gb-brand-dark); color: #fff; }
.gb-btn[disabled] { opacity: .6; cursor: not-allowed; }
.gb-privacy { font-size: 12.5px; color: var(--gb-ink-400); }

/* ---------- 提示条 ---------- */
.gb-alert {
  display: none;
  margin-bottom: 18px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
  border-radius: var(--gb-r-sm);
}
.gb-alert.show { display: block; }
.gb-alert-ok { background: #eaf7ee; border: 1px solid #b7e2c4; color: #1e7a3c; }
.gb-alert-err { background: #fdeceb; border: 1px solid #f5c2bf; color: #b3261e; }

/* ---------- 提交成功弹窗 ---------- */
.gb-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gb-modal[hidden] { display: none; }
.gb-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .2s ease;
}
.gb-modal.show .gb-modal-mask { opacity: 1; }
.gb-modal-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 34px 30px 28px;
  text-align: center;
  background: #fff;
  border-radius: var(--gb-r-lg, 14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
  transform: translateY(-12px) scale(.97);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.gb-modal.show .gb-modal-box { transform: translateY(0) scale(1); opacity: 1; }
.gb-modal-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gb-brand, #ff8400);
  background: var(--gb-brand-50, #fff6ec);
}
.gb-modal-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--gb-ink-900, #191919);
}
.gb-modal-text {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gb-ink-600, #5a5a5a);
}
.gb-modal-btn { min-width: 130px; }

/* ---------- 右侧信息栏 ---------- */
.gb-side { display: flex; flex-direction: column; gap: 20px; }
.gb-side-card {
  padding: 24px 22px;
  background: var(--gb-white);
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-r-lg);
}
.gb-side-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gb-ink-900);
  margin: 0 0 12px;
}
.gb-side-card p { font-size: 13.5px; color: var(--gb-ink-600); line-height: 1.75; margin: 0 0 14px; }
.gb-side-cta { background: var(--gb-brand-50); border-color: var(--gb-brand-100); }
.gb-side-cta .gb-btn { width: 100%; }
.gb-side-tiny { margin: 10px 0 0 !important; font-size: 12px; color: var(--gb-ink-400); text-align: center; }
.gb-points { margin: 0; padding: 0; list-style: none; }
.gb-points li {
  position: relative;
  padding: 5px 0 5px 17px;
  font-size: 13.5px;
  color: var(--gb-ink-600);
}
.gb-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gb-brand);
}

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .gb-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gb-card { padding: 24px 18px; }
  .gb-row { grid-template-columns: 1fr; }
  .gb-field-half { max-width: none; }
  .gb-captcha-row { flex-wrap: wrap; }
  .gb-captcha-row img { height: 40px; }
  .gb-submit { flex-direction: column; align-items: stretch; }
  .gb-submit .gb-btn { width: 100%; }
}