/* =================================================
   pd-form · 公用表单组件 CSS（产品详情 / 联系我们 / 弹窗通用）
   - 说明：这是“基准版”，弹窗只需要再加一层覆盖（见文末）
   - 依赖：--brand / --accent 全站存在
================================================= */

/* ============ A. 容器与标题（可选） ============ */
/*.pd-message{margin-top:60px}*/
/*.pd-message>.container{max-width:1360px;padding:0 20px}*/

/*.pd-section-head{text-align:center;margin-bottom:35px}*/
/*.pd-section-title{*/
/*  margin:0;*/
/*  display:inline-block;*/
/*  font-size:18px;*/
/*  font-weight:700;*/
/*  color:#111827;*/
/*  position:relative;*/
/*}*/
/*.pd-section-title::after{*/
/*  content:"";*/
/*  position:absolute;*/
/*  left:50%;*/
/*  bottom:-10px;*/
/*  transform:translateX(-50%);*/
/*  width:60px;*/
/*  height:2px;*/
/*  background:var(--brand);*/
/*  border-radius:2px;*/
/*}*/

/* ============ B. 表单骨架 ============ */
.pd-form{max-width:none;margin:0}

/* 蜜罐：无障碍隐藏 */
.pd-hp{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

/* ============ C. 字段栅格 ============ */
.pd-form-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 20px;
}
.pd-field{display:flex;flex-direction:column;gap:8px}
.pd-field-wide{grid-column:span 2}
.pd-field label{font-size:14px;color:#374151}

/* ============ D. 输入控件（同款：圆角 + 轻边框 + 阴影） ============ */
.pd-field input,
.pd-field textarea,
.pd-verify-inline input{
  height:40px;
  padding:0 14px;
  font-size:14px;
  color:#111827;
  background:#fff;
  border:1px solid rgba(17,24,39,.14);
  border-radius:12px;
  outline:none;
  box-shadow:0 6px 18px rgba(17,24,39,.04);
}

.pd-field textarea{
  height:auto;
  padding:12px 14px;
  resize:vertical;
  min-height:160px;
}

.pd-field input::placeholder,
.pd-field textarea::placeholder,
.pd-verify-inline input::placeholder{color:rgba(17,24,39,.45)}

/* focus：品牌色一致 */
.pd-field input:focus,
.pd-field textarea:focus,
.pd-verify-inline input:focus{
  border-color:rgba(46,49,146,.55);
  box-shadow:0 8px 22px rgba(46,49,146,.10);
}

/* 错误态：字段级（压过 focus） */
.pd-field input.is-invalid,
.pd-field textarea.is-invalid,
.pd-verify-inline input.is-invalid{
  border-color:rgba(239,68,68,.65)!important;
  box-shadow:0 8px 22px rgba(239,68,68,.10)!important;
}
.pd-field input.is-invalid:focus,
.pd-field textarea.is-invalid:focus,
.pd-verify-inline input.is-invalid:focus{
  border-color:rgba(239,68,68,.75)!important;
  box-shadow:0 10px 26px rgba(239,68,68,.14)!important;
}

/* ============ E. 操作区（验证码 / 按钮 / 电话 / 提示） ============ */
.pd-form-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:22px;
  flex-wrap:wrap;
}

/* 验证码：统一高度与圆角 */
.pd-verify-inline{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.pd-verify-inline input{width:110px}
.pd-verify-inline img{
  height:38px;
  width:105px;                 /* 给一个稳定宽度，移动端不挤不变形 */
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  cursor:pointer;
  display:block;
  object-fit:cover;            /* 防止拉伸（若验证码为 img 渲染） */
}
/* 验证码：统一高度与圆角 */
.pd-verify-inline{display:flex;align-items:center;gap:10px}
.pd-verify-inline input{width:110px}
.pd-verify-inline img{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  cursor:pointer;
  display:block;
}

/* 提交按钮：同款按钮手感 */
.pd-btn-primary{
  height:40px;
  padding:0 22px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  border:none;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 10px 26px rgba(46,49,146,.22);
}
.pd-btn-primary:hover{filter:brightness(1.04)}
.pd-btn-primary:disabled{opacity:.68;cursor:not-allowed;filter:none}

/* 电话提示 */
.pd-form-tip{
  font-size:14px;
  color:rgba(17,24,39,.58);
  text-decoration:none;
  white-space:nowrap;
}
.pd-form-tip:hover{color:var(--accent)}

/* 表单内提示（成功/失败） */
.pd-form-msg{
  flex:1 1 100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:1.6;
  display:none;
}
.pd-form-msg.is-show{display:block}
.pd-form-msg.is-ok{
  background:rgba(16,185,129,.10);
  border:1px solid rgba(16,185,129,.25);
  color:rgba(6,95,70,.95);
}
.pd-form-msg.is-err{
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.25);
  color:rgba(153,27,27,.95);
}

/* ============ F. 响应式 ============ */
@media (max-width:768px){
  .pd-form-grid{grid-template-columns:1fr}
  .pd-field-wide{grid-column:span 1}

  /* 移动端：验证码块优先占满一行，避免被按钮/电话挤压 */
  .pd-verify-inline{flex:1 1 100%}
  .pd-verify-inline input{flex:0 0 110px}
  .pd-verify-inline img{flex:0 0 110px}
}

/* =================================================
   弹窗覆盖（可选）
   用法：弹窗外层加 .pd-form--modal（或你现有弹窗容器类名）
================================================= */

.pd-form--modal .pd-form-grid{gap:14px 14px}
.pd-form--modal .pd-form-actions{margin-top:16px}
.pd-form--modal .pd-field textarea{min-height:120px}
.pd-form--modal .pd-form-tip{display:none}
.pd-form--modal .pd-form-msg{margin-top:8px}