/* ================================================================
   rfq.css — RFQ 询价页（@layer pages）
   D 方向。复用全局 form-field/form-control/btn。
   ================================================================ */
@layer pages {

  .rfq-page { padding: var(--space-xl) 0; }

  .rfq-card {
    max-width: 880px;
    margin: 0 auto;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  /* 顶部蓝色标题区 */
  .rfq-header {
    background: var(--color-primary-grad, var(--color-primary));
    color: var(--color-text-white);
    padding: var(--space-lg) var(--space-xl);
  }
  .rfq-header__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin: 0 0 4px; color: var(--color-text-white); }
  .rfq-header__subtitle { font-size: var(--font-size-sm); opacity: .9; margin: 0; color: var(--color-text-white); }

  .rfq-body { padding: var(--space-xl); }

  /* 区块 */
  .rfq-section { margin-bottom: var(--space-xl); }
  .rfq-section:last-of-type { margin-bottom: 0; }
  .rfq-section__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-bg-light);
    position: relative;
  }
  .rfq-section__title::before {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 40px; height: 2px; background: var(--color-accent);
  }

  /* 字段行：桌面 label 左对齐，移动堆叠 */
  .rfq-field {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--space-md);
    align-items: start;
    margin-bottom: var(--space-md);
  }
  .rfq-field__label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    padding-top: 9px;
  }
  .rfq-field__label.required::before { content: "*"; color: var(--color-danger); margin-right: 4px; }
  .rfq-field__hint { margin: 6px 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }

  /* ④ WhatsApp / Email 并排两格（至少填一项），手机堆叠 */
  .rfq-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
  .rfq-contact__label { display: block; margin-bottom: 4px; font-size: var(--font-size-xs); color: var(--color-text-secondary); }

  /* 内联输入组（数量+单位 / 价格+币种 / 预算+USD） */
  .rfq-input-group { display: flex; gap: var(--space-sm); align-items: stretch; }
  .rfq-input-group .form-control { flex: 1 1 auto; min-width: 0; }
  /* 短下拉（单位 / 币种 / 贸易条款 / 运输 / 付款）：宽度跟着最长选项走，下限 150px。
     ⚠ 别写回定宽：2026-10-02 前是 `flex:0 0 150px; max-width:150px`（手机 110px），
     英文「Square Foot(Feet)」在所有宽度下被裁、手机默认值「Sea freight」直接显示成「Sea freigh」——
     select 被裁不报错，canvas 量「最长选项宽 > clientWidth − 左右内边距」才看得出来。 */
  /* 选择器写成 0-2-0：组内那条 `.rfq-input-group .form-control{flex:1 1 auto;min-width:0}` 也是 0-2-0 且在前，
     写成单类会被它压住、select 被压到几十 px（2026-10-02 实测踩到）。 */
  .rfq-input-group__sm, .rfq-input-group .rfq-input-group__sm { flex: 0 0 auto; width: auto; min-width: 150px; max-width: 100%; }
  /* 「输入框 + 短下拉」那两组（数量+单位、单价+币种）：输入框至少留 120px（「Enter quantity」占位符的宽），
     放不下就让下拉自己折到下一行，而不是把输入框挤成「Enter qu」——单位下拉跟着最长选项要 161px，
     只有 320 这档会折（字段宽 256）。预算那组（下拉 + USD 标签）没有输入框，不参与。 */
  /* 独立的短下拉（贸易条款 / 运输 / 付款）直接是字段网格的格子：不写 justify-self 会被拉满整列
     （桌面 552px 宽的「FOB」），以前靠 max-width:150px 挡着。 */
  .rfq-field > .rfq-input-group__sm { justify-self: start; }
  .rfq-input-group:has(> input) { flex-wrap: wrap; }
  .rfq-input-group:has(> input) > input.form-control { flex: 1 1 120px; }
  .rfq-input-group__addon {
    display: inline-flex; align-items: center;
    padding: 0 12px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  /* select 加自定义下拉箭头 */
  .rfq-page select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%2364748B'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
  }

  /* 交货期内联 */
  .rfq-leadtime { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
  .rfq-leadtime .form-control { flex: 0 0 90px; max-width: 90px; }

  /* 文件上传 */
  .rfq-file__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg-light);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
  }
  .rfq-file__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
  .rfq-file__btn input[type="file"] { display: none; }
  .rfq-file__help { color: var(--color-text-muted); cursor: help; }
  .rfq-file__list { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 6px; }
  .rfq-file__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
  }
  .rfq-file__item .file-icon { color: var(--color-primary); }
  .rfq-file__item .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rfq-file__item .file-status { color: var(--color-success); }
  .rfq-file__item .file-delete { color: var(--color-danger); text-decoration: none; font-size: var(--font-size-xs); cursor: pointer; }
  .rfq-file__item .file-delete:hover { text-decoration: underline; }

  /* 提交 */
  .rfq-actions { margin-top: var(--space-lg); padding-left: 196px; }
  .rfq-actions .btn { min-width: 200px; }

  .form-control.is-invalid { border-color: var(--color-danger); }

  /* 响应式 */
  @media (max-width: 767.98px) {
    .rfq-body { padding: var(--space-md); }
    .rfq-field { grid-template-columns: 1fr; gap: 6px; margin-bottom: var(--space-md); }
    .rfq-field__label { padding-top: 0; }
    .rfq-contact { grid-template-columns: minmax(0, 1fr); }
    .rfq-input-group__sm, .rfq-input-group .rfq-input-group__sm { min-width: 110px; }
    .rfq-actions { padding-left: 0; }
    .rfq-actions .btn { width: 100%; }
  }

}