/*
 * nhy-quote.css — Slide-out Quote Panel
 * v1.2 — 完全覆盖 Fluent Forms 内联样式 + 后台自定义 CSS
 */

/* =============================================
   1. 遮罩层
   ============================================= */
.nhy-quote-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 10, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nhy-quote-overlay.open {
  opacity: 1;
  visibility: visible;
}


/* =============================================
   2. 面板主体
   ============================================= */
.nhy-quote-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--nhy-white, #FFFFFF);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
}
.nhy-quote-panel.open {
  transform: translateX(0);
}


/* =============================================
   3. 顶部标题栏
   ============================================= */
.nhy-quote-head {
  padding: 40px 28px 20px;
  border-bottom: 1px solid var(--nhy-gray-border, #E0E0E0);
  flex-shrink: 0;
}
.nhy-quote-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.nhy-quote-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nhy-gold, #C9A84C);
  font-weight: 600;
  margin-bottom: 6px;
}
.nhy-quote-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nhy-black, #0A0A0A);
  line-height: 1.3;
}
.nhy-quote-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--nhy-gray-border, #E0E0E0);
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0;
}
.nhy-quote-close:hover {
  border-color: var(--nhy-black, #0A0A0A);
  background: var(--nhy-gray-bg, #F5F5F3);
}
.nhy-quote-close svg {
  width: 14px; height: 14px;
  stroke: var(--nhy-gray, #666666);
  stroke-width: 2;
  fill: none;
}

/* 产品信息条 */
.nhy-quote-product {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--nhy-gray-bg, #F5F5F3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nhy-quote-product-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nhy-quote-product-icon svg {
  width: 18px; height: 18px;
  stroke: var(--nhy-gold, #C9A84C);
  stroke-width: 1.5;
  fill: none;
}
.nhy-quote-product-name {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--nhy-black, #0A0A0A);
  line-height: 1.4;
  flex: 1;
}


/* =============================================
   4. 表单区域
   ============================================= */
.nhy-quote-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 28px;
}

/* -------------------------------------------
   4a. 清除 Fluent Forms 所有默认样式
   覆盖内联 <style> + 后台自定义 CSS
   ------------------------------------------- */
.nhy-quote-body .fluent_form_4,
.nhy-quote-body form.fluent_form_4,
.nhy-quote-body .frm-fluent-form,
.nhy-quote-body .fluentform_wrapper_4 {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* fieldset 边框 */
.nhy-quote-body fieldset,
.nhy-quote-body .fluent_form_4 fieldset {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* -------------------------------------------
   4b. 字段间距 — 紧凑
   ------------------------------------------- */
.nhy-quote-body .ff-el-group {
  margin-bottom: 14px !important;
}

/* -------------------------------------------
   4c. 标签 — 精致大写
   ------------------------------------------- */
.nhy-quote-body .ff-el-input--label label,
.nhy-quote-body .fluent_form_4 .ff-el-input--label label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--nhy-gray, #666666) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* 必填星号 — 金色（覆盖 FF 的红色） */
.nhy-quote-body .ff-el-is-required .ff-el-asterisk {
  color: var(--nhy-gold, #C9A84C) !important;
}
.nhy-quote-body .fluent_form_4 .ff-el-is-required label::after,
.nhy-quote-body .ff-el-is-required label::after {
  color: var(--nhy-gold, #C9A84C) !important;
}

/* -------------------------------------------
   4d. 输入框 — 无圆角 + 金色焦点
   ------------------------------------------- */
.nhy-quote-body .ff-el-form-control,
.nhy-quote-body .fluent_form_4 .ff-el-form-control {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--nhy-black, #0A0A0A) !important;
  border: 1px solid var(--nhy-gray-border, #E0E0E0) !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  margin-bottom: 0 !important;
  background: var(--nhy-white, #FFFFFF) !important;
  transition: border-color 0.3s !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.nhy-quote-body .ff-el-form-control:focus,
.nhy-quote-body .fluent_form_4 .ff-el-form-control:focus {
  border-color: var(--nhy-gold, #C9A84C) !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.15) !important;
}
.nhy-quote-body .ff-el-form-control::placeholder {
  color: var(--nhy-gray-light, #999999) !important;
  font-size: 12px !important;
}

/* Textarea */
.nhy-quote-body textarea.ff-el-form-control,
.nhy-quote-body .fluent_form_4 textarea.ff-el-form-control {
  min-height: 80px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

/* -------------------------------------------
   4e. Name 两列布局
   ------------------------------------------- */
.nhy-quote-body .ff-t-container {
  gap: 12px !important;
  display: flex !important;
}
.nhy-quote-body .ff-t-cell {
  flex: 1 !important;
}

/* -------------------------------------------
   4f. Product 字段 — 灰色只读态
   ------------------------------------------- */
.nhy-quote-body input#ff_4_product,
.nhy-quote-body .fluent_form_4 input[data-name="product"] {
  background: var(--nhy-gray-bg, #F5F5F3) !important;
  color: var(--nhy-black, #0A0A0A) !important;
  font-weight: 500 !important;
}

/* -------------------------------------------
   4g. 提交按钮 — 黑底金色 hover
   覆盖 FF 的 #4CAF50 绿色 + --fluentform-primary
   ------------------------------------------- */
.nhy-quote-body .ff-btn-submit,
.nhy-quote-body .ff-btn-submit:not(.ff_btn_no_style),
.nhy-quote-body form.fluent_form_4 .ff-btn-submit,
.nhy-quote-body form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style),
.nhy-quote-body .fluent_form_4 .ff-btn-submit {
  width: 100% !important;
  padding: 13px 24px !important;
  background: var(--nhy-black, #0A0A0A) !important;
  color: var(--nhy-white, #FFFFFF) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  box-shadow: none !important;
}
.nhy-quote-body .ff-btn-submit:hover,
.nhy-quote-body .ff-btn-submit:not(.ff_btn_no_style):hover,
.nhy-quote-body form.fluent_form_4 .ff-btn-submit:hover,
.nhy-quote-body .fluent_form_4 .ff-btn-submit:hover {
  background: var(--nhy-gold, #C9A84C) !important;
  color: var(--nhy-black, #0A0A0A) !important;
}
.nhy-quote-body .ff_submit_btn_wrapper {
  margin-top: 6px !important;
  padding-top: 6px !important;
}

/* -------------------------------------------
   4h. 验证错误
   ------------------------------------------- */
.nhy-quote-body .ff-el-is-error .ff-el-form-control {
  border-color: #DC2626 !important;
}
.nhy-quote-body .error.text-danger,
.nhy-quote-body .fluent_form_4 .ff-el-is-error .error {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #DC2626 !important;
  margin-top: 4px !important;
}

/* -------------------------------------------
   4i. 成功消息
   ------------------------------------------- */
.nhy-quote-body .ff-message-success {
  background: rgba(201, 168, 76, 0.06) !important;
  border: 1px solid rgba(201, 168, 76, 0.25) !important;
  color: var(--nhy-black, #0A0A0A) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 24px 20px !important;
  border-radius: 0 !important;
  text-align: center !important;
  line-height: 1.7 !important;
}

/* -------------------------------------------
   4j. 隐藏多余元素
   ------------------------------------------- */
.nhy-quote-body .ff-powered-by,
.nhy-quote-body .ff_tc {
  display: none !important;
}


/* =============================================
   5. 底部隐私提示
   ============================================= */
.nhy-quote-foot {
  padding: 14px 28px 20px;
  border-top: 1px solid var(--nhy-gray-border, #E0E0E0);
  flex-shrink: 0;
}
.nhy-quote-privacy {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--nhy-gray-light, #999999);
  line-height: 1.5;
  text-align: center;
}


/* =============================================
   6. 响应式
   ============================================= */
@media (max-width: 520px) {
  .nhy-quote-panel {
    width: 100vw;
  }
  .nhy-quote-head {
    padding: 36px 20px 16px;
  }
  .nhy-quote-body {
    padding: 16px 20px 24px;
  }
  .nhy-quote-foot {
    padding: 12px 20px 18px;
  }
  .nhy-quote-title {
    font-size: 16px;
  }
  .nhy-quote-body .ff-t-container {
    flex-direction: column !important;
    gap: 0 !important;
  }
}

/* =============================================
   7. 单品详情页 — GET QUOTE 按钮
   ============================================= */
.nhy-single-quote {
  margin: 24px 0;
}
.nhy-single-quote-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 40px;
  background: var(--nhy-black, #0A0A0A);
  color: var(--nhy-white, #FFFFFF);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
}
.nhy-single-quote-btn:hover {
  background: var(--nhy-gold, #C9A84C);
  color: var(--nhy-black, #0A0A0A);
}
.nhy-single-quote-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}