/*
 * 「Leave A Message」留言弹窗 —— 1:1 对应设计稿 Astra 6月(fwdnLm0W) / 1223:4810
 *
 *   头部 #141414 内距 20：标题 16/20 Bold 白(-0.16) + 关闭叉 12
 *   主体 #F9FAFA 内距 20、间距 20：
 *     说明 14/20 Bold #808080
 *     输入框：白底 + 1px #DEDFE0，内距 12/8，占位 14/20 Semi #999
 *     多行框 125 高
 *     提交钮 #E60012 满宽 36 高，14/20 Semi 白，投影 0 4px 2px rgba(0,0,0,.25)
 *
 * 弹窗本体是 Elementor 的 Popup 模板（里面放的是 Elementor Form 组件），
 * 提交因此照样落进 wp_e_submissions，跟联系页那套询盘后台同一条管线。
 * 这份样式给弹窗容器的自定义类 .astra-msg 用；弹窗里全是原生组件，
 * 没有哪个组件会把它拉进来，所以挂在悬浮联系栏组件的样式依赖里（那东西每页都有）。
 */

.astra-msg {
  --msg-primary: #e60012;
  --msg-dark: #141414;
  --msg-body: #f9fafa;
  --msg-line: #dedfe0;
  --msg-muted: #808080;
  --msg-subtle: #999999;
}

/* 头部：深色条 */
.astra-msg__head {
  background: var(--msg-dark);
}

/* 三级选择器是必要的：全局 kit 的 `.elementor-widget-heading .elementor-heading-title`
   也是两个 class，不加一级标题会变成主色红 */
.astra-msg__head .elementor-widget-heading .elementor-heading-title {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.16px;
  color: #ffffff;
}

/* 主体 */
.astra-msg__body {
  background: var(--msg-body);
}

/* 得两个 class：Elementor 的 .elementor-widget-text-editor 也是一个 class、且比主题样式后加载 */
.astra-msg .astra-msg__intro,
.astra-msg .astra-msg__intro p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--msg-muted);
}

/* ------------------------------------------------ Elementor Form 的壳 */
.astra-msg .elementor-form-fields-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--msg-gap, 20px);
  margin: 0;
}

.astra-msg .elementor-field-group {
  width: 100%;
  margin: 0;
  padding: 0;
}

.astra-msg .elementor-field-group .elementor-field-textual {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--msg-line);
  border-radius: 0;
  background: #ffffff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--msg-dark);
  box-shadow: none;
  transition: border-color 0.2s ease;
}

.astra-msg .elementor-field-group .elementor-field-textual:focus {
  border-color: var(--msg-primary);
  outline: none;
  box-shadow: none;
}

.astra-msg .elementor-field-group .elementor-field-textual::placeholder {
  font-weight: 600;
  color: var(--msg-subtle);
  opacity: 1;
}

.astra-msg .elementor-field-type-textarea .elementor-field-textual {
  height: var(--msg-textarea, 125px);
  min-height: var(--msg-textarea, 125px);
  resize: vertical;
}

/* 提交钮 */
.astra-msg .elementor-field-type-submit .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: var(--msg-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #ffffff;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
  transition: filter 0.2s ease;
}

.astra-msg .elementor-field-type-submit .elementor-button:hover {
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25)) brightness(0.92);
}

.astra-msg .elementor-message {
  margin-top: 4px;
  font-size: 13px;
  line-height: 20px;
}

/* ------------------------------------------------------- 弹窗自身 */
/* 关闭叉：设计稿里它在深色头部的右侧，所以把 Elementor 的那个叉挪进头部 */
.astra-msg-popup .dialog-close-button {
  top: 20px;
  right: 20px;
  width: 12px;
  height: 12px;
  margin: 0;
  color: #ffffff;
  opacity: 1;
}

/* Elementor 自带的是个「方框 X」图标，设计稿是纯叉，这里自己画 */
.astra-msg-popup .dialog-close-button svg,
.astra-msg-popup .dialog-close-button i {
  display: none;
}

.astra-msg-popup .dialog-close-button::before,
.astra-msg-popup .dialog-close-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
}

.astra-msg-popup .dialog-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.astra-msg-popup .dialog-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 弹窗一打开，Elementor 会把焦点放到关闭键上，Chrome 于是画一圈焦点框，
   看起来就像设计稿上多了个方框。鼠标/程序聚焦不画，键盘用户照旧有 */
.astra-msg-popup .dialog-close-button:focus,
.astra-msg-popup .dialog-close-button:focus-visible {
  outline: none;
}

/* 焦点提示不画描边（弹窗一打开关闭键就带焦点，画了就成了方框 X），
   改成把叉加粗加大一点，键盘用户照样看得出来 */
.astra-msg-popup .dialog-close-button:focus-visible::before,
.astra-msg-popup .dialog-close-button:focus-visible::after {
  width: 16px;
  height: 2.5px;
}

/* 手机上弹窗要收窄并离开右侧悬浮栏 */
@media (max-width: 768px) {
  .astra-msg .elementor-form-fields-wrapper {
    gap: 14px;
  }

  .astra-msg .elementor-field-type-textarea .elementor-field-textual {
    height: 96px;
    min-height: 96px;
  }
}