/* ==========================================================================
   Forminator 表單樣式覆蓋（2026-09-29）

   目標：讓 Forminator 產生的欄位套上跟原本 .contact-form 一致的視覺語言
   （底線紡錘形輸入框、標籤左側固定寬度、textarea 灰底漸層、藥丸單選、方形核取框）。
   做法：不改 Forminator 的 DOM 結構與 JS 行為（欄位型態、驗證邏輯、AJAX 送出流程
   都是 Forminator 自己的機制，這裡完全不碰），只覆蓋外觀樣式。

   ⚠️ 載入順序：Forminator 官方樣式表（forminator-forms-default-base.css 等）
   在這份樣式表之前載入（見 wp_enqueue_scripts 的執行順序），所以凡是 Forminator
   官方 CSS 也有定義、且優先權相等的屬性（例如 .forminator-radio 的 border、
   .forminator-input 的 border），這裡一律加 !important 確保穩定覆蓋，避免
   日後 Forminator 更新版本、調整了它自己 CSS 的規則順序時，我們的樣式被打回原形。
   單純新增的樣式（不會跟官方樣式衝突，例如 gap、margin）維持正常優先權，
   方便之後如果要微調可以直接覆寫，不用先移除 !important。

   本檔內容已用 Forminator 實際輸出的 HTML（2026-09-29 業主提供，表單 ID 70）
   反覆比對截圖驗證過，涵蓋：文字輸入、單選、單選下拉（select2）、日期、
   多行文字、檔案上傳、複選核取方塊、送出按鈕，含手機／平板斷點（≤1024px）。
   ⚠️ 尚未驗證：Forminator 官方 CSS 實際內容（沙盒無法安裝外掛，見 handoff v168），
   若業主發現與此處假設不符的視覺差異，請回報實際畫面截圖以便調整。
   ========================================================================== */

/* 首頁與聯絡頁的表單外框（2026-09-30）：.contact-form 是 flex 欄，靠內容撐寬，靜態表單的欄位自帶寬度所以剛好撐滿
   640px；Forminator 表單沒有，會縮成內容寬度（沙盒實測 351px，基準是 640px）。明確指定 100% 再由 max-width: 640px 限制。 */
.contact-form--forminator {
  width: 100%;
}

/* 整個表單容器：比照 .contact-form 的寬度節奏 */
.forminator-custom-form {
  max-width: 640px;
}
.forminator-custom-form .forminator-row {
  margin-bottom: var(--space-8);
}
.forminator-custom-form .forminator-row:last-child {
  margin-bottom: 0;
}
.forminator-custom-form .forminator-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 標籤／說明文字：字體、字重、字級比照 .form-field label */
.forminator-custom-form .forminator-label,
.forminator-custom-form .forminator-description {
  font-family: var(--font-cn) !important;
}
.forminator-custom-form .forminator-label {
  font-weight: 500 !important;
  font-size: var(--text-16) !important;
  color: var(--ink);
}
.forminator-custom-form .forminator-description {
  font-weight: 500 !important;
  font-size: var(--text-14) !important;
  color: var(--grey-800);
  margin-top: var(--space-1) !important;
}
.forminator-custom-form .forminator-required {
  /* 比照 .required-mark：純視覺隱藏，保留語意（span 本身、required 屬性不受影響） */
  display: none;
}

/* ---- 純文字輸入框（稱呼／公司／電話／Email）：標籤在左、底線輸入框在右 ---- */
.forminator-custom-form .forminator-field-name .forminator-field,
.forminator-custom-form .forminator-field-text .forminator-field,
.forminator-custom-form .forminator-field-phone .forminator-field,
.forminator-custom-form .forminator-field-email .forminator-field {
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-6);
}
.forminator-custom-form .forminator-field-name .forminator-label,
.forminator-custom-form .forminator-field-text .forminator-label,
.forminator-custom-form .forminator-field-phone .forminator-label,
.forminator-custom-form .forminator-field-email .forminator-label {
  flex-shrink: 0;
  white-space: nowrap;
  width: 180px;
  display: flex !important;
  align-items: center;
}
.forminator-custom-form .forminator-field-name .forminator-input,
.forminator-custom-form .forminator-field-text .forminator-input,
.forminator-custom-form .forminator-field-phone .forminator-input,
.forminator-custom-form .forminator-field-email .forminator-input {
  flex: 1;
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  padding: var(--space-1) 0 var(--space-2) !important;
  font-size: var(--text-14) !important;
  font-family: var(--font-cn) !important;
  color: var(--ink) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  position: relative;
  /* 底線：跟純文字輸入框搭配的紡錘形線條，用線性漸層畫在 background 上
     （Forminator 沒有等效的 .input-line-wrap 容器可讓偽元素依附，
     這裡直接簡化成單純的實心底線，跟原設計的兩端漸細紡錘形不完全相同，
     但視覺效果一致：中間粗兩端細的細節差異在 1px 線條的尺度下不明顯） */
  background-image: linear-gradient(var(--ink), var(--ink)) !important;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: bottom;
}
.forminator-custom-form .forminator-field-name .forminator-input:focus,
.forminator-custom-form .forminator-field-text .forminator-input:focus,
.forminator-custom-form .forminator-field-phone .forminator-input:focus,
.forminator-custom-form .forminator-field-email .forminator-input:focus {
  outline: none;
  box-shadow: none !important;
}
/* 覆蓋瀏覽器內建的 autofill 淺藍色背景（同 .form-field 既有做法） */
.forminator-custom-form .forminator-input:-webkit-autofill,
.forminator-custom-form .forminator-input:-webkit-autofill:hover,
.forminator-custom-form .forminator-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---- 需求描述（textarea）：灰底漸層、大圓角，比照 .form-field textarea ---- */
.forminator-custom-form .forminator-textarea {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-4) var(--space-5) !important;
  font-size: var(--text-14) !important;
  font-family: var(--font-cn) !important;
  color: var(--ink) !important;
  background-color: var(--grey-200) !important;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%) !important;
  resize: vertical;
  line-height: var(--leading-3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset -1px 0 0 rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.06) !important;
  width: 100%;
}
.forminator-custom-form .forminator-textarea:focus {
  outline: none;
}

/* ---- 服務項目（Radio）：細邊框圓角矩形藥丸，比照 .tag-pill 樣式 ---- */
.forminator-custom-form .forminator-field-radio [role="radiogroup"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2) !important;
}
.forminator-custom-form .forminator-radio {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-6) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-cn) !important;
  font-size: var(--text-14) !important;
  color: var(--ink);
  cursor: pointer !important;
  transition: background-color 0.3s var(--ease-water), color 0.3s var(--ease-water);
  margin: 0 !important;
}
.forminator-custom-form .forminator-radio input[type="radio"] {
  /* 隱藏原生圓點，改用整顆藥丸被選取時變色來表示狀態 */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.forminator-custom-form .forminator-radio-bullet {
  display: none !important;
}
.forminator-custom-form .forminator-radio:has(input:checked) {
  background: var(--ink);
  color: var(--white);
}
.forminator-custom-form .forminator-radio:hover {
  background: var(--grey-200);
}
.forminator-custom-form .forminator-radio:has(input:checked):hover {
  background: var(--ink);
}

/* ---- 預算範圍：比照 .budget-noscript-select 的底線樣式 ----
   Forminator 用 select2 這個 JS 套件把原生 <select> 換成自訂下拉選單（.select2-container）。
   select2 初始化完成前（JS 尚未載入、或被瀏覽器封鎖）畫面上還是原生 <select>，
   所以原生 select 本身也要套用底線樣式，確保任一情況下都不是瀏覽器預設外觀 */
.forminator-custom-form .forminator-select--field {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: var(--space-2) 0 !important;
  margin-top: var(--space-2);
  font-size: var(--text-14) !important;
  font-family: var(--font-cn) !important;
  color: var(--ink) !important;
  background-color: transparent !important;
  cursor: pointer;
}
.forminator-custom-form .select2-container {
  width: 100% !important;
  margin-top: var(--space-2);
}
.forminator-custom-form.forminator-custom-form.forminator-custom-form .select2-container .select2-selection--single {
  height: auto !important;
  border: none !important;
  border-bottom: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: var(--space-2) 0 !important;
}
.forminator-custom-form .select2-container .select2-selection__rendered {
  padding: 0 !important;
  font-family: var(--font-cn) !important;
  font-size: var(--text-14) !important;
  color: var(--ink) !important;
  line-height: normal !important;
}
.forminator-custom-form.forminator-custom-form.forminator-custom-form .select2-container .select2-selection__arrow {
  height: 100% !important;
  top: 0;
  right: 4px;
}

/* ---- 預計完工日期：單一輸入框＋圖示，比照 .date-input-single ---- */
.forminator-custom-form .forminator-field-date .forminator-input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: var(--space-2);
}
.forminator-custom-form .forminator-datepicker {
  flex: 1;
  min-width: 160px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  border-bottom: 1px solid var(--grey-500) !important;
  border-radius: 0 !important;
  padding: var(--space-1) 24px var(--space-2) 0 !important;
  font-size: var(--text-14) !important;
  font-family: var(--font-cn) !important;
  color: var(--ink) !important;
  background-color: transparent !important;
}
.forminator-custom-form .forminator-datepicker:focus {
  outline: none;
  border-bottom-color: var(--ink) !important;
}
.forminator-custom-form .forminator-icon-calendar {
  position: absolute;
  right: 0;
  color: var(--grey-700);
  pointer-events: none;
}

/* ---- 上傳附件：比照 .attachment-field 的藥丸按鈕，比照虛線框容器 ---- */
.forminator-custom-form .forminator-field-upload .forminator-description {
  display: block;
  margin-top: 0;
  margin-bottom: var(--space-2) !important;
}
.forminator-custom-form .forminator-multi-upload {
  border: 1px dashed var(--grey-500) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-6) !important;
  text-align: center;
  position: relative;
}
.forminator-custom-form.forminator-custom-form.forminator-custom-form .forminator-input-file {
  /* 原生 <input type="file"> 疊在整個虛線框上方，維持可點擊／拖曳，
     但視覺上完全透明，畫面上只看得到下面的自訂按鈕與提示文字 */
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
}
.forminator-custom-form .forminator-multi-upload-message a {
  display: inline-flex !important;
  align-items: center;
  padding: var(--space-2) var(--space-6) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-cn);
  font-size: var(--text-14);
  color: var(--ink);
  transition: background-color 0.3s var(--ease-water), color 0.3s var(--ease-water);
  position: relative;
  z-index: 1;
  pointer-events: none; /* 點擊一律交給上層透明的原生 input，避免兩層都能觸發造成行為不一致 */
}

/* ---- 上傳附件：選檔後的「已選擇檔案」卡片（2026-09-29 依業主提供的真實 HTML 撰寫）----
   真實結構（Forminator 輸出，AJAX 動態插入，位置在虛線框下方）：
   li > .forminator-uploaded-file--content（flex）
     ├ .forminator-uploaded-file--image[aria-hidden] > .forminator-img-preview
     │    （縮圖是 inline style 的 background-image，不是 <img>，
     │      所以縮放裁切一律用 background-size，不能用 object-fit）
     ├ .forminator-uploaded-file--text > p.--title（檔名）、p.--size（大小）
     └ button.--delete > span.forminator-icon-close + span.screen-reader-only
   ⚠️ 只針對上面確認過的 class 撰寫，沒有依賴 <li>／<ul> 自己的 class（截圖被切掉，未確認）。
   視覺數值（邊框、圓角、縮圖 48px、✕ 28px）是依業主截圖描述（縮圖／檔名+大小／黑底圓形 ✕）
   與全站 token 做的設計決定，非精確校正值，如與截圖有落差請回報。 */
.forminator-custom-form .forminator-uploaded-files {
  list-style: none;
  margin: var(--space-3) 0 0 !important;
  padding: 0 !important;
}
.forminator-custom-form .forminator-uploaded-files li {
  list-style: none;
  margin: 0 0 var(--space-2) !important;
  padding: 0 !important;
}
.forminator-custom-form .forminator-uploaded-file--content {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4) !important;
  border: 1px solid var(--grey-500) !important;
  border-radius: var(--radius-md) !important;
  background: var(--white) !important;
  box-shadow: none !important;
}
.forminator-custom-form .forminator-uploaded-file--image,
.forminator-custom-form .forminator-uploaded-file--preview {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
}
/* 非圖片檔（例如 PDF，2026-09-29 業主提供真實 HTML）：外層 class 是 --preview（不是 --image），
   裡面只有 span.forminator-icon-file，沒有縮圖。做成跟縮圖同尺寸的灰底方塊，
   文件圖示同樣用 CSS 自己畫（一張右上角無缺口的簡化紙張輪廓），不依賴 Forminator 圖示字體 */
.forminator-custom-form .forminator-uploaded-file--preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm) !important;
  background: var(--grey-100);
}
.forminator-custom-form .forminator-uploaded-file--preview .forminator-icon-file {
  display: block;
  width: 16px;
  height: 20px;
  font-size: 0 !important;
  border: 1px solid var(--grey-700);
  border-radius: 2px;
  position: relative;
}
.forminator-custom-form .forminator-uploaded-file--preview .forminator-icon-file::before {
  content: '' !important;
  position: absolute;
  left: 3px;
  right: 3px;
  top: 6px;
  height: 5px;
  border-top: 1px solid var(--grey-700);
  border-bottom: 1px solid var(--grey-700);
}
.forminator-custom-form .forminator-img-preview {
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--radius-sm);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.forminator-custom-form .forminator-uploaded-file--text {
  flex: 1;
  min-width: 0 !important; /* 讓長檔名能在 flex 裡被截斷，不會把卡片撐破 */
  text-align: left;
}
.forminator-custom-form .forminator-uploaded-file--title,
.forminator-custom-form .forminator-uploaded-file--size {
  margin: 0 !important;
  font-family: var(--font-cn) !important;
  font-size: var(--text-14) !important;
  line-height: var(--leading-2) !important;
}
.forminator-custom-form .forminator-uploaded-file--title {
  color: var(--ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forminator-custom-form .forminator-uploaded-file--size {
  color: var(--grey-700) !important;
}
.forminator-custom-form .forminator-uploaded-file--delete {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  background: var(--ink) !important;
  color: var(--white) !important;
  cursor: pointer;
  transition: opacity 0.3s var(--ease-water);
}
.forminator-custom-form .forminator-uploaded-file--delete:hover {
  opacity: var(--state-hover-opacity);
}
/* ✕ 改用 CSS 自己畫兩條斜線，不依賴 Forminator 圖示字體（icon font）是否載入成功，
   這樣無論官方字體有沒有載到，視覺都一致、也能在沙盒直接驗證 */
.forminator-custom-form .forminator-uploaded-file--delete .forminator-icon-close {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  font-size: 0 !important;
}
.forminator-custom-form .forminator-uploaded-file--delete .forminator-icon-close::before,
.forminator-custom-form .forminator-uploaded-file--delete .forminator-icon-close::after {
  content: '' !important;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--white);
}
.forminator-custom-form .forminator-uploaded-file--delete .forminator-icon-close::before { transform: translateY(-50%) rotate(45deg); }
.forminator-custom-form .forminator-uploaded-file--delete .forminator-icon-close::after  { transform: translateY(-50%) rotate(-45deg); }

/* ---- 得知管道（Checkbox）：方形小勾選框，比照 .checkbox-item ---- */
.forminator-custom-form .forminator-field-checkbox [role="group"] {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-6);
  row-gap: var(--space-3);
  margin-top: var(--space-2);
}
.forminator-custom-form .forminator-checkbox {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-cn) !important;
  font-size: var(--text-14) !important;
  color: var(--ink);
  cursor: pointer !important;
}
.forminator-custom-form.forminator-custom-form.forminator-custom-form .forminator-checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border: 1px solid var(--ink) !important;
  border-radius: 2px !important;
  cursor: pointer;
  position: relative !important;
  margin: 0 !important;

  /* Forminator 官方用 clip／overflow:hidden 把原生核取框裁成看不見（螢幕閱讀器專用隱藏手法）。
     我們的方框就是這個原生 input 本身，所以要把裁切還原（2026-09-30，用官方樣式實測發現） */
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}
.forminator-custom-form .forminator-checkbox input[type="checkbox"]:checked {
  background: var(--ink) !important;
}
.forminator-custom-form .forminator-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid var(--white);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.forminator-custom-form .forminator-checkbox-box {
  /* Forminator 原生會另外畫一個方框圖示；我們已經用 input[type=checkbox]
     本身呈現方框＋勾勾（見上方樣式），這裡只隱藏重複的那一個，
     文字標籤（.forminator-checkbox-label）維持正常顯示，不影響可選取性與無障礙 */
  display: none !important;
}

/* ---- 送出按鈕：空心圓角按鈕，比照 .form-submit ---- */
.forminator-custom-form .forminator-button-submit {
  align-self: flex-end;
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-2) var(--space-8) !important;
  font-family: var(--font-en) !important;
  font-weight: 500;
  font-size: var(--text-16) !important;
  color: var(--ink) !important;
  background: transparent !important;
  transition: background-color 0.3s var(--ease-water), color 0.3s var(--ease-water);
}
.forminator-custom-form .forminator-button-submit:hover {
  background: var(--ink) !important;
  color: var(--white) !important;
}

/* ---- 錯誤提示：紅字，比照 .field-error-message ---- */
.forminator-custom-form label.forminator-error,
.forminator-custom-form .forminator-response-message.forminator-error {
  color: #c0392b !important;
  font-size: var(--text-14) !important;
  margin-top: var(--space-1) !important;
}
.forminator-custom-form .forminator-input.error,
.forminator-custom-form .forminator-textarea.error {
  background-image: linear-gradient(#c0392b, #c0392b) !important;
}

/* 隱藏 Forminator 自帶的「編輯表單」連結（只有登入管理員會看到，前台訪客其實看不到，
   但保險起見明確隱藏，避免任何情境下外露後台連結） */
.forminator-edit-module {
  display: none !important;
}

/* ---- RWD：手機／平板斷點（1024px 以下），比照全站既有 .form-field--inline 規則 ----
   標籤寬度從桌機版 180px 縮到 162px（見上方桌機規則旁的根因說明對照：這是全站
   既有 .form-field--inline 在 1024px 以下實測過、六個標籤都不會換行的最短寬度，
   桌機版 >1024px 維持 180px 不變） */
@media (max-width: 1024px) {
  .forminator-custom-form .forminator-field-name .forminator-label,
  .forminator-custom-form .forminator-field-text .forminator-label,
  .forminator-custom-form .forminator-field-phone .forminator-label,
  .forminator-custom-form .forminator-field-email .forminator-label {
    width: 162px;
  }
}

/* ==========================================================================
   2026-09-30：用「真實 Forminator 官方樣式」實測後補上的覆蓋（宗霖回報首頁／聯絡頁表單整個跑版）

   根因：官方樣式（base／full／select2，以及每個表單專屬的 style-{表單編號}.css）的選擇器帶
   .forminator-ui.forminator-custom-form[data-design=default]，優先權 (0,4,0)～(0,9,2)，
   遠高於本檔原本 (0,2,0)～(0,3,0) 的選擇器。本檔沒加 !important 的宣告因此被蓋掉：
   標籤字級（16px→12px）、輸入框底線（background-image 被官方設成 unset）、單選圓圈
   （display:none 被蓋掉）、上傳框邊框與圓角、附件縮圖尺寸等共 40 多條。
   ⚠️ 不是載入順序問題：實測「覆蓋樣式排最前」與「排最後」結果相同，問題在優先權。
   修法：對「被蓋掉、且確定要我們的值勝出」的宣告加 !important；已有 !important 卻仍輸給官方
   !important 的規則（核取框、select2），把選擇器連寫 .forminator-custom-form 提高優先權。

   刻意不處理（維持官方行為）：原生 <select>、原生單選 input 被官方視覺隱藏（我們也不顯示它們）；
   上傳用的原生 <input type=file> 官方以 1px !important 隱藏，由官方按鈕觸發，這裡不強制蓋大
   （蓋大會讓透明輸入框疊在附件卡片上，刪除鈕可能點不到）。

   下面這段是「官方預設值」造成、我們沒宣告過的版面殘差：
   ========================================================================== */
.forminator-custom-form.forminator-custom-form .forminator-label,
.forminator-custom-form.forminator-custom-form .forminator-description {
  line-height: var(--leading-2) !important;
  margin-bottom: 0 !important;
}
/* 核取框：官方每個 .forminator-checkbox 上下各 20px 外距，造成一排選項高低不齊 */
.forminator-custom-form.forminator-custom-form .forminator-checkbox {
  margin: 0 !important;
}
/* 日期圖示：官方另外設了 left:10px、top/bottom 偏移，與我們的 right:0 同時生效，
   圖示會跑到輸入框左邊蓋住提示文字；明確清掉 left、改成垂直置中 */
.forminator-custom-form.forminator-custom-form .forminator-icon-calendar {
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
/* 上傳按鈕、附件卡片、送出鈕：官方預設外距與最小寬度 */
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message a {
  margin: 0 !important;
  min-width: 0 !important;
}
.forminator-custom-form.forminator-custom-form .forminator-uploaded-file--text,
.forminator-custom-form.forminator-custom-form .forminator-uploaded-file--delete {
  margin: 0 !important;
}
.forminator-custom-form.forminator-custom-form .forminator-button-submit {
  min-width: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
}

/* 服務項目（單選）：藥丸「一排、各自包住文字寬度」。
   2026-09-30 修正：原規則靠 [role="radiogroup"] 容器做 flex 橫排，但 Forminator 若把 role 直接放在
   .forminator-field 上，該元素同時被上面的「.forminator-field { flex-direction: column }」影響，
   藥丸會一個一列、被拉成整列寬（宗霖截圖）。改用 :has(> .forminator-radio)——不管 role 放在哪一層，
   只要「直接包著藥丸的那一層」就橫排換行；標籤獨占一整列（flex-basis 100%）。 */
.forminator-custom-form.forminator-custom-form .forminator-field-radio :has(> .forminator-radio) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--space-3) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-radio :has(> .forminator-radio) > .forminator-label {
  flex: 0 0 100% !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-radio .forminator-radio {
  flex: 0 0 auto !important;
  width: auto !important;
}
/* 官方給 .forminator-radio-label 預設 margin-left:10px（本來是替圓圈留位置）；圓圈隱藏後文字會偏右，清掉讓藥丸文字置中 */
.forminator-custom-form.forminator-custom-form .forminator-radio-label {
  margin: 0 !important;
}

/* ==========================================================================
   2026-09-30（第三輪）：拿到宗霖站上「真實頁面 HTML」後，以「靜態原型的同一段畫面」當設計基準逐項量化比對
   （工具：wp-theme/tools/forminator_css_audit/，見 handoff v179）。真實 DOM 與先前重建的差異：
   ・單選、核取框的容器是 <div class="forminator-field" role="radiogroup|group">，標題是 <span class="forminator-label">，
     選項與標題同在一個容器裡，容器被 .forminator-field 的直向排列影響 → 核取框一項一列（設計是一排）。
   ・上傳區：<div class="forminator-multi-upload-message"> 內含 <span class="forminator-icon-upload"> 與
     <p>拖曳放開 (或) <a>選擇檔案</a></p>，連結被官方套粗體＋底線。
   ・官方 .forminator-row 有 margin-bottom:30px，蓋掉我們的 32px。
   ========================================================================== */
.forminator-custom-form.forminator-custom-form .forminator-row {
  margin-bottom: var(--space-8) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-row:last-child,
.forminator-custom-form.forminator-custom-form .forminator-row-last {
  margin-bottom: 0 !important;
}

/* 服務項目藥丸：比照設計基準 .pill.tag-pill（量測：內距 4px 12px、字重 500、邊框 grey-600（#959696）、行高 14px） */
.forminator-custom-form.forminator-custom-form .forminator-radio {
  padding: var(--space-1) var(--space-3) !important;
  font-weight: 500 !important;
  line-height: 14px !important;
  border-color: var(--grey-600) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-radio:has(input:checked) {
  border-color: var(--ink) !important;
}

/* 得知管道（核取框）：與單選同樣的結構問題，改成橫排換行、標題獨占一列；字級字重比照設計（16px／500） */
.forminator-custom-form.forminator-custom-form .forminator-field-checkbox :has(> .forminator-checkbox) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: var(--space-6) !important;
  row-gap: var(--space-3) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-checkbox :has(> .forminator-checkbox) > .forminator-label {
  flex: 0 0 100% !important;
}
.forminator-custom-form.forminator-custom-form .forminator-checkbox,
.forminator-custom-form.forminator-custom-form .forminator-checkbox-label {
  font-size: var(--text-16) !important;
  font-weight: 500 !important;
  line-height: var(--leading-2) !important;
}

/* 上傳附件：官方的上傳圖示不要；「選擇檔案」比照設計的 .attachment-trigger 小藥丸（內距 4px 12px、字重 500、邊框 grey-600（#959696）、前面加 ＋），
   官方的「拖曳放開 (或)」提示文字排在藥丸後面、縮成次要文字 */
.forminator-custom-form.forminator-custom-form .forminator-multi-upload {
  text-align: left !important;
}
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message .forminator-icon-upload {
  display: none !important;
}
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message p {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  margin: 0 !important;
  font-family: var(--font-cn) !important;
  font-size: var(--text-14) !important;
  font-weight: 400 !important;
  color: var(--grey-700) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message a {
  padding: var(--space-1) var(--space-3) !important;
  font-weight: 500 !important;
  line-height: 14px !important;
  text-decoration: none !important;
  border-color: var(--grey-600) !important;
  color: var(--ink) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message a::before {
  content: '+';
  margin-right: var(--space-2);
  font-weight: 500;
}

/* ==========================================================================
   2026-09-30（第四輪）：還原原型的三個設計細節（宗霖貼靜態版 Netlify 畫面為準）
   1) 紡錘形底線（中間粗、兩端漸細）。原型是 .input-line-wrap::after 加 clip-path polygon，Forminator 的 <input> 外面沒有
      那層包裝可掛偽元素，v168 的覆蓋樣式當時「簡化成單純的實心底線」——這是我沒經過宗霖同意就做的降級，現在還原：
      用同一個多邊形（座標與原型 clip-path 逐點相同）畫成 SVG 當輸入框的 background，寬度 100%、高度 1px、貼底。
      ⚠️ 填色寫死 #505050（＝ --ink，見 css/style.css :root）；data URI 內無法使用 CSS 變數，日後改 --ink 要同步這裡。
   2) 預算範圍與預計完工日期並排（原型 .form-row：grid-template-columns: 1fr auto、gap: --space-16、完工日期 min-width 260px），
      單欄斷點比照原型（≤1099px 單欄）。Forminator 把它們放在各自獨立的 .forminator-row，改用 form 本身的 grid 讓兩列併成一排。
   3) 服務項目藥丸：原型 .pill-group { display:flex; justify-content: space-between } 且寬度＝預算欄位寬度（原型用 JS 量測，
      這裡改成讓「服務項目」那一列與預算同占第一欄，藥丸自然對齊預算欄位）。
   ========================================================================== */
.forminator-custom-form.forminator-custom-form .forminator-field-name .forminator-input,
.forminator-custom-form.forminator-custom-form .forminator-field-text .forminator-input,
.forminator-custom-form.forminator-custom-form .forminator-field-phone .forminator-input,
.forminator-custom-form.forminator-custom-form .forminator-field-email .forminator-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,50 3,20 50,0 97,20 100,50 97,80 50,100 3,80' fill='%23505050'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1px !important;
  background-position: left bottom !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-radio :has(> .forminator-radio) {
  justify-content: space-between !important;
}
@media (min-width: 1100px) {
  .forminator-custom-form.forminator-custom-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-16);
    align-items: start;
  }
  .forminator-custom-form.forminator-custom-form > * {
    grid-column: 1 / -1;
  }
  .forminator-custom-form.forminator-custom-form > .forminator-row:has(> .forminator-field-radio),
  .forminator-custom-form.forminator-custom-form > .forminator-row:has(> .forminator-field-select),
  .forminator-custom-form.forminator-custom-form > .forminator-row:has(> .spout-budget-range) {
    grid-column: 1;
  }
  .forminator-custom-form.forminator-custom-form > .forminator-row:has(> .forminator-field-date) {
    grid-column: 2;
    /* 原型 .completion-field 為 min-width:260px；官方 .forminator-row 左右各有 -15px 負邊距（對應 .forminator-col 的 15px 內距），
       會吃掉 30px，所以這裡加回 30px（290px），實際內容寬度才是 260px */
    min-width: 290px;
  }
}

/* 需求描述、上傳附件：原型是「標籤在左（180px，≤1024px 為 162px）、內容在右」（.form-field--inline），Forminator 預設是標籤在上。
   用 grid 兩欄：標籤占第一欄、其餘子元素（輸入區、說明、已選檔案清單、驗證訊息）都排第二欄。
   上傳區：官方的說明文字在 DOM 裡位於上傳框「上方」，原型是放在框「裡面」；CSS 無法可靠地把它搬進框內（說明文字長度不定），
   這裡把它排到框的下方（說明文字仍在同一欄、緊貼上傳框）。 */
.forminator-custom-form.forminator-custom-form .forminator-field-textarea .forminator-field,
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field {
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  align-items: start;
}
.forminator-custom-form.forminator-custom-form .forminator-field-textarea .forminator-field > *,
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > * {
  grid-column: 2;
}
.forminator-custom-form.forminator-custom-form .forminator-field-textarea .forminator-field > .forminator-label,
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-label {
  grid-column: 1;
  grid-row: 1 / span 4;
}
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-multi-upload { grid-row: 1; }
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-description { grid-row: 2; margin: 0 !important; }
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-uploaded-files { grid-row: 3; }
@media (max-width: 1024px) {
  .forminator-custom-form.forminator-custom-form .forminator-field-textarea .forminator-field,
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field {
    grid-template-columns: 162px minmax(0, 1fr);
  }
}

/* 手機（≤767px）：原型的上傳區改成上下排（.attachment-field { flex-direction: column }）——標籤在上、上傳框全寬。 */
@media (max-width: 767px) {
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field {
    grid-template-columns: minmax(0, 1fr);
  }
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > * { grid-column: 1; }
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-label { grid-row: 1; }
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-multi-upload { grid-row: 2; }
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-description { grid-row: 3; }
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-uploaded-files { grid-row: 4; }
}

/* 上傳框：比照設計基準 .attachment-body（量測：內距 16px、圓角 16px、虛線邊框 --grey-600） */
.forminator-custom-form.forminator-custom-form .forminator-multi-upload {
  padding: var(--space-4) !important;
  border-color: var(--grey-600) !important;
  border-radius: var(--radius-lg) !important;
}

/* 送出鈕：官方在窄螢幕會把 .forminator-button 拉成整列寬；原型的送出鈕在手機上仍是靠右的小按鈕 */
.forminator-custom-form.forminator-custom-form .forminator-button-submit {
  width: auto !important;
  max-width: none !important;
  align-self: flex-end !important;
}

/* ==========================================================================
   2026-09-30（第五輪）：完全對照宗霖的靜態定稿（contact.html／css/style.css）逐項量測後的數值修正
   方法：同一個瀏覽器、同一組字型，靜態定稿 vs 真實 Forminator DOM＋官方 CSS，逐元素比對全部屬性與位置（工具：
   wp-theme/tools/forminator_css_audit/fullcmp.py）。下面每一條的數字都來自定稿的實際計算值。
   ========================================================================== */
/* 全部標籤：定稿是 cursor: default（官方是 pointer） */
.forminator-custom-form.forminator-custom-form .forminator-label {
  cursor: default !important;
}

/* 文字欄位（稱呼／公司／電話／Email）：定稿輸入框高 26px（行高 normal ＋ 上下內距 12px），
   位在欄位頂端下 2px（行內元素的基線間隙），欄位總高 28px；官方多給了 line-height:18.2px → 30.2px */
.forminator-custom-form.forminator-custom-form .forminator-field-name .forminator-input,
.forminator-custom-form.forminator-custom-form .forminator-field-text .forminator-input,
.forminator-custom-form.forminator-custom-form .forminator-field-phone .forminator-input,
.forminator-custom-form.forminator-custom-form .forminator-field-email .forminator-input {
  line-height: normal !important;
  margin-top: 2px !important;
}

/* 服務項目：定稿是「標籤 24px＋間距 8px＋藥丸 24px」，欄位不帶額外上外距；官方文字標籤 line-height:21px 把藥丸撐到 30px */
.forminator-custom-form.forminator-custom-form .forminator-field-radio .forminator-field,
.forminator-custom-form.forminator-custom-form .forminator-field-radio :has(> .forminator-radio) {
  margin-top: 0 !important;
  row-gap: var(--space-2) !important;
  column-gap: var(--space-2) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-radio-label {
  line-height: 14px !important;
}

/* 預算說明：定稿 .budget-note 沒有上外距 */
.forminator-custom-form.forminator-custom-form .forminator-field-select .forminator-description {
  margin-top: 0 !important;
}

/* 預計完工日期：定稿 .date-inputs ＝ flex、置中、間距 12px；輸入框 flex:1、行高 normal、靠左、右內距 0；
   日曆圖示是 20×20 的按鈕（顏色 --grey-700），排在輸入框右邊（不是疊在輸入框裡）。
   圖示改用定稿同一個 SVG（mask 疊色），不依賴官方圖示字體。 */
.forminator-custom-form.forminator-custom-form .forminator-field-date .forminator-input-with-icon {
  gap: var(--space-3) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-datepicker {
  line-height: normal !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-date .forminator-icon-calendar {
  position: static !important;
  order: 2;
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  line-height: normal !important;
  color: var(--grey-700) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-date .forminator-icon-calendar::before {
  content: '' !important;
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='4' width='15' height='13.5' rx='1.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='2.5' y1='7.5' x2='17.5' y2='7.5' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='6' y1='2.3' x2='6' y2='5.3' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='14' y1='2.3' x2='14' y2='5.3' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='4' width='15' height='13.5' rx='1.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='2.5' y1='7.5' x2='17.5' y2='7.5' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='6' y1='2.3' x2='6' y2='5.3' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='14' y1='2.3' x2='14' y2='5.3' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 需求描述／上傳附件的標籤：定稿是 display:flex; align-items:flex-start; white-space:nowrap */
.forminator-custom-form.forminator-custom-form .forminator-field-textarea .forminator-label,
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-label {
  display: flex !important;
  align-items: flex-start !important;
  white-space: nowrap !important;
}
/* 需求描述：定稿 rows=5 → 高 154.5px（5 × 行高 24.5px ＋ 內距）；官方 rows/min-height 不同 */
.forminator-custom-form.forminator-custom-form .forminator-field-textarea .forminator-field {
  row-gap: 0 !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-textarea .forminator-textarea {
  height: 154.5px !important;
  min-height: 154.5px !important;
}

/* 上傳附件：定稿是「一個虛線框，裡面由上到下：選擇檔案按鈕 → 12px → 說明文字 →（已選檔案清單）」，框 padding 16px。
   官方的說明文字在 DOM 裡位於框「外面上方」，用 grid 疊回框內：
   ・欄位 grid：第 1 列 53px（＝框線 1 ＋ 內距 16 ＋ 按鈕 24 ＋ 間距 12），第 2 列說明文字，第 3 列已選檔案清單；
   ・虛線框（.forminator-multi-upload）跨第 1～3 列，仍是完整的可點擊／拖放區域；
   ・說明文字與清單放在框內（左右各 17px＝框線 1 ＋ 內距 16），並設 pointer-events:none 讓點擊與拖放穿透到框。
   官方在按鈕前面另外放一段「拖曳放開 (或)」字樣，定稿沒有，這裡收掉（font-size:0，只有連結恢復字級）。 */
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field {
  grid-template-rows: 53px auto auto !important;
  row-gap: 0 !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-multi-upload {
  grid-row: 1 / span 3 !important;
  align-self: stretch;
  padding: var(--space-4) var(--space-4) 0 !important;
  box-sizing: border-box;
}
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-description {
  grid-row: 2 !important;
  margin: 0 17px 17px !important;
  align-self: start;
  pointer-events: none;
  font-family: var(--font-cn) !important;
  font-size: var(--text-14) !important;
  font-weight: 400 !important;
  line-height: var(--leading-2) !important;
  color: var(--ink) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-uploaded-files {
  grid-row: 3 !important;
  margin: 0 17px 17px !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-uploaded-files:empty {
  display: none !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field:has(> .forminator-uploaded-files:not(:empty)) > .forminator-description {
  margin-bottom: var(--space-3) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message p {
  font-size: 0 !important;
  gap: var(--space-2) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message a {
  font-size: var(--text-14) !important;
  gap: var(--space-2) !important;
  margin: 0 !important;
}
/* 「＋」：定稿 .attachment-trigger-icon ＝ 8×8，兩條 1.5px 的線交叉 */
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message a::before {
  content: '' !important;
  display: block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}

/* 得知管道：官方 .forminator-checkbox-label 預設 margin-left:10px（每一項多 10px 寬）；
   定稿「標籤→選項」間距 8px、選項換行間距 12px：容器 row-gap 維持 12px，標籤下外距 -4px */
.forminator-custom-form.forminator-custom-form .forminator-checkbox-label {
  margin: 0 !important;
}
.forminator-custom-form.forminator-custom-form .forminator-field-checkbox :has(> .forminator-checkbox) > .forminator-label {
  margin-bottom: calc(var(--space-2) - var(--space-3)) !important;
}

/* 手機（≤767px）上傳區：定稿是「標籤 24px → 間距 8px → 虛線框（全寬）」上下排；桌機用的「第 1 列固定 53px」在這裡要挪到第 2 列 */
@media (max-width: 767px) {
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field {
    grid-template-rows: auto 53px auto auto !important;
  }
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-label {
    grid-row: 1 !important;
    margin-bottom: var(--space-2) !important;
  }
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-multi-upload {
    grid-row: 2 / span 3 !important;
  }
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-description {
    grid-row: 3 !important;
  }
  .forminator-custom-form.forminator-custom-form .forminator-field-upload .forminator-field > .forminator-uploaded-files {
    grid-row: 4 !important;
  }
}

/* 「選擇檔案」連結要能點：v168 的覆蓋樣式把它設成 pointer-events:none（假設點擊由上層透明的原生 <input type=file> 接手），
   但官方樣式把那個 input 強制縮成 1px（.forminator-multi-upload input[type=file]{width:1px!important}），
   連結因此完全點不到（實測 document.elementFromPoint 命中的是外層 <p>）。還原成可點，交給官方腳本處理。 */
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message a {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 互動狀態（定稿實測）：
   ・服務項目藥丸 hover ＝ 深底白字（與選取狀態相同）：.tag-pill:hover { background: var(--ink); color: var(--white) }；
     原本我寫成淺灰底（--grey-200），與定稿不同。
   ・送出鈕 hover／focus：定稿沒有陰影，官方 hover 會加 0 1px 4px 的陰影。 */
.forminator-custom-form.forminator-custom-form .forminator-radio:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--white) !important;
}
.forminator-custom-form.forminator-custom-form .forminator-button-submit:hover,
.forminator-custom-form.forminator-custom-form .forminator-button-submit:focus,
.forminator-custom-form.forminator-custom-form .forminator-button-submit:active {
  box-shadow: none !important;
}
/* 上傳「選擇檔案」按鈕 hover：定稿 .attachment-trigger:hover { background: var(--ink); border-color: var(--ink); color: var(--white) } */
.forminator-custom-form.forminator-custom-form .forminator-multi-upload-message a:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--white) !important;
}

/* ==========================================================================
   2026-09-30：預算範圍雙滑桿（方案 B）——見 js/main.js initForminatorBudgetSlider
   宗霖在 Forminator 新增一個「文字」欄位、自訂 CSS class 填 spout-budget-range；JS 把輸入框視覺隱藏、畫出定稿的滑桿
   （沿用 css/style.css 的 .range-slider／.range-slider-track／-fill／-handle／-labels），並把選取結果寫回輸入框。
   ・外框排成定稿 .budget-field：標籤 → 說明 → 滑桿 → 兩端金額，間距 8px（順序用 flex order，不依賴 Forminator 把說明放在輸入框前或後）。
   ・這個欄位是「文字」欄位，會吃到上面「稱呼／公司／電話／Email」那組「標籤在左、底線輸入框在右」的規則，這裡改回直排。
   ・輸入框本身用「螢幕閱讀器專用」的方式隱藏（仍在 DOM 裡、仍會送出，也能被 Forminator 驗證）。
   ========================================================================== */
.forminator-custom-form.forminator-custom-form .spout-budget-range.is-slider-enhanced .forminator-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--space-2) !important;
}
.forminator-custom-form.forminator-custom-form .spout-budget-range.is-slider-enhanced .forminator-label {
  order: 1;
  width: auto !important;
  display: block !important;
  white-space: normal !important;
}
.forminator-custom-form.forminator-custom-form .spout-budget-range.is-slider-enhanced .forminator-description {
  order: 2;
  margin: 0 !important;
}
.forminator-custom-form.forminator-custom-form .spout-budget-range.is-slider-enhanced .range-slider { order: 3; }
.forminator-custom-form.forminator-custom-form .spout-budget-range.is-slider-enhanced .range-slider-labels { order: 4; }
.forminator-custom-form.forminator-custom-form .spout-budget-range.is-slider-enhanced .forminator-error-message { order: 5; }
.forminator-custom-form.forminator-custom-form .spout-budget-range.is-slider-enhanced .forminator-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: none !important;
}

/* ==========================================================================
   2026-09-30：文字渲染還原成定稿設定（宗霖回報「各欄位表頭字重應該要加重」，截圖為靜態定稿）
   根因：字重（500）、字級（16px）、顏色（#505050）其實與定稿完全相同；差在 Forminator 官方樣式對整個表單套了三個文字渲染設定：
     ・-webkit-font-smoothing: antialiased ——macOS 上改用灰階抗鋸齒，字會明顯變「細」（定稿是預設 auto）；
     ・text-rendering: optimizeLegibility；
     ・text-shadow: rgba(0,0,0,0.01) 0 0 1px（標籤、單選、核取框）。
   這些只在 macOS 才有肉眼差異（沙盒是 Linux，看不出來），所以先前的截圖／數值比對都沒抓到，靠計算樣式才量到。
   整個表單（含所有子元素）一律還原成定稿的 auto／auto／none。
   ========================================================================== */
.forminator-custom-form.forminator-custom-form,
.forminator-custom-form.forminator-custom-form * {
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
  text-rendering: auto !important;
  text-shadow: none !important;
}