/* ==========================================================================
   Newsletter「Stay informed」（首页技术方案 3.7）：首页、分类 / 搜索 / 归档页、文章详情页共用
   从 home.css 拆出来，详情页不用加载整份 home.css
   ========================================================================== */

/* ---------- Newsletter「Stay informed」（Figma 2:4185 / 2:4186）：[btse_newsletter] ----------
   B 新建一个 section（背景留空）+ 全宽行，放 Code 模块；通栏 #F7F9FC 由这里输出，section / row 的 Divi 默认内边距去掉 */
.et_pb_section:has(.btse-newsletter) {
  padding: 0;
}

.et_pb_row:has(.btse-newsletter) {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* 上下 45 / 46 + 顶部 1px 分割线 = 通栏高 144.9（Figma）
   margin-top 56（mockup）+ 上一个 section 现有的 padding-bottom 25 = 分页底 → 本区块 81（Figma） */
.btse-newsletter {
  box-sizing: border-box;
  margin-top: 56px;
  padding: 45px 0 46px;
  background: #F7F9FC;
  border-top: 1px solid #E4E7EC;
  font-family: Inter, inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

.btse-newsletter .in {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* #main-content 前缀：交付的 btse-blog.css 有 #main-content h2 { line-height:1.3 }；Divi 标题默认 letter-spacing:-1px */
.btse-newsletter h2,
#main-content .btse-newsletter h2 {
  margin: 0 0 7px;
  padding: 0;
  font-family: inherit;
  font-size: 23px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
  color: #1F2328;
}

.btse-newsletter .nl-text p {
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 17.5px;
  color: #5A6472;
}

/* MailerLite 表单（JS 在浏览器里生成）：它的样式全挂在 #mlb2-数字 上、很多带 !important，
   所以这里用 #main-content + 稳定的 class 结构压过去（不写 mlb2-数字，运营重建表单后 ID 会变） */
.btse-newsletter .nl-form {
  flex: 0 0 auto;
}

#main-content .btse-newsletter .ml-form-embedContainer {
  display: block;
  margin: 0;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-align-center {
  text-align: left;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper {
  display: block !important;
  max-width: none;
  width: auto;
  background: transparent !important;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
  padding: 0 !important;
}

/* 输入框 255 + 间距 9 + 按钮 100，高 40.5（Figma） */
#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
  display: flex;
  align-items: stretch;
  gap: 9px;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent {
  flex: 0 0 255px;
  width: 255px;
  margin: 0;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
  height: 40.5px;
  margin: 0;
  padding: 11px 14px !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E4E7EC !important;
  border-radius: 4px !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 16.5px !important;
  color: #1F2328 !important;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder {
  color: #8A94A6;
  opacity: 1;
}

/* MailerLite 校验不通过时给 .ml-field-group 加 .ml-error；上面的边框 !important 会盖掉它自带的红框，这里补回 */
#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .ml-error input {
  border-color: #D93025 !important;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
  float: none;
  width: auto;
  margin: 0;
}

/* Subscribe 和提交中的 loading 按钮同一外观（loading 只在提交时显示） */
#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  width: 100px !important;
  height: 100%;
  padding: 0 16px !important;
  background-color: #015FE5 !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  color: #FFFFFF !important;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover {
  background-color: #0149B8 !important;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus-visible,
#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible {
  outline: 2px solid #015FE5;
  outline-offset: 2px;
}

/* 提交成功后 MailerLite 隐藏表单、显示这段（设计稿未画，按本区块文字样式） */
#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
  margin: 0;
  text-align: left;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
  margin: 0 0 4px;
  padding: 0; /* Divi 给 h1–h6 的 padding-bottom:10px */
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
  color: #1F2328;
}

#main-content .btse-newsletter .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: #5A6472;
}