.elementor-4886 .elementor-element.elementor-element-5460c20{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-4886 .elementor-element.elementor-element-cf2e7e2 img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-4886 .elementor-element.elementor-element-47facfe{--display:flex;}/* Start custom CSS for image, class: .elementor-element-cf2e7e2 *//* ==========================================================================
   格蘭英檢報名表 — WPForms 自訂樣式
   使用方式：
   1) 表單編輯器右上角「Embed」旁的「⚙ 齒輪」設定，或
   2) WPForms → Settings → General → Custom CSS，或
   3) 外觀 → 自訂 → 額外 CSS（Additional CSS）
   三選一貼上即可，皆為全站/全表單套用；若只想套用單一表單，
   把最外層每個規則的選擇器前面加上該表單的 ID，
   例如 .wpforms-container-1234 .wpforms-field { ... }
   （表單 ID 可在 WPForms 表單列表的 Shortcode 欄位看到，如 [wpforms id="1234"]）
   ========================================================================== */

:root{
  --gram-red:#D6282A;
  --gram-red-ink:#A81E20;
  --gram-blue:#1B3B7C;
  --gram-yellow:#F0B429;
  --gram-ink:#2A2118;
  --gram-ink-muted:#786B57;
  --gram-line:#E4D9C3;
  --gram-line-strong:#D8C79E;
  --gram-paper:#FFFFFF;
  --gram-paper-2:#F7F1E3;
  --gram-err:#C0392B;
  --gram-err-bg:#FBEAE8;
  --gram-focus: var(--gram-blue);
}

/* ---------- 整體容器 ---------- */
.wpforms-container{
  max-width:720px;
  margin:0 auto;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--gram-ink);
}
.wpforms-container .wpforms-form{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* ---------- 欄位間距與容器 ---------- */
.wpforms-container .wpforms-field{
  padding:0;
  margin-bottom:22px;
}
.wpforms-container .wpforms-field:last-of-type{
  margin-bottom:0;
}

/* ---------- 標籤 ---------- */
.wpforms-container .wpforms-field-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--gram-ink);
  margin-bottom:7px;
}
.wpforms-container .wpforms-field-required{
  color:var(--gram-red);
  margin-left:2px;
}
.wpforms-container .wpforms-field-sublabel{
  font-size:11px;
  font-weight:600;
  color:var(--gram-ink-muted);
  margin-top:4px;
}
.wpforms-container .wpforms-field-description{
  font-size:12.5px;
  color:var(--gram-ink-muted);
  margin-top:6px;
  line-height:1.6;
}

/* ---------- 文字 / Email / 電話 / 數字 / 下拉輸入框 ---------- */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container input[type=url],
.wpforms-container select,
.wpforms-container textarea{
  width:100%;
  max-width:100%;
  font-family:inherit;
  font-size:15px;
  color:var(--gram-ink);
  background:var(--gram-paper);
  border:1.5px solid var(--gram-line-strong);
  border-radius:10px;
  padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow:none;
}
.wpforms-container textarea{
  min-height:110px;
  resize:vertical;
}
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder{
  color:var(--gram-ink-muted);
  opacity:.7;
}
.wpforms-container input[type=text]:focus,
.wpforms-container input[type=email]:focus,
.wpforms-container input[type=tel]:focus,
.wpforms-container input[type=number]:focus,
.wpforms-container input[type=url]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus{
  outline:none;
  border-color:var(--gram-focus);
  box-shadow:0 0 0 3px rgba(27,59,124,.16);
}

/* 姓名欄位（英文姓名 姓/名）並排 */
.wpforms-container .wpforms-field-name .wpforms-field-row{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:12px;
}
.wpforms-container .wpforms-field-name .wpforms-field-row-block{
  width:100% !important;
  float:none !important;
}

/* ---------- Multiple Choice（考生身份／報名場次）卡片式單選 ---------- */
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-checkbox ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
.wpforms-container .wpforms-field-radio ul.wpforms-list-inline,
.wpforms-container .wpforms-field-checkbox ul.wpforms-list-inline{
  grid-template-columns:1fr;
}
.wpforms-container .wpforms-field-radio ul li,
.wpforms-container .wpforms-field-checkbox ul li{
  margin:0;
}
.wpforms-container .wpforms-field-radio ul li label,
.wpforms-container .wpforms-field-checkbox ul li label{
  display:flex;
  align-items:center;
  gap:10px;
  border:1.5px solid var(--gram-line-strong);
  border-radius:10px;
  padding:12px 14px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  transition:border-color .15s ease, background .15s ease;
}
.wpforms-container .wpforms-field-radio ul li input[type=radio],
.wpforms-container .wpforms-field-checkbox ul li input[type=checkbox]{
  width:17px;
  height:17px;
  accent-color:var(--gram-blue);
  flex:none;
  margin:0;
}
/* 選取後高亮（現代瀏覽器；若需支援較舊瀏覽器，見檔案最下方 JS 備援） */
.wpforms-container .wpforms-field-radio ul li:has(input:checked) label,
.wpforms-container .wpforms-field-checkbox ul li:has(input:checked) label{
  border-color:var(--gram-blue);
  background:rgba(27,59,124,.06);
}
.wpforms-container .wpforms-field-radio ul li label.wpforms-selected,
.wpforms-container .wpforms-field-checkbox ul li label.wpforms-selected{
  border-color:var(--gram-blue);
  background:rgba(27,59,124,.06);
}

/* ---------- 下拉選單（報考級數）加一點指標樣式 ---------- */
.wpforms-container select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%23786B57' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}

/* ---------- HTML 說明區塊（A~D級數對照表）外距 ---------- */
.wpforms-container .wpforms-field-html{
  margin-bottom:26px;
}

/* ---------- 檔案上傳欄位 ---------- */
.wpforms-container .wpforms-field-file-upload .dz-clickable,
.wpforms-container .wpforms-field-file-upload .wpforms-file-upload-modern{
  border:1.5px dashed var(--gram-line-strong) !important;
  border-radius:12px !important;
  background:var(--gram-paper-2) !important;
  padding:22px 16px !important;
  text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.wpforms-container .wpforms-field-file-upload .dz-clickable:hover,
.wpforms-container .wpforms-field-file-upload .wpforms-file-upload-modern:hover{
  border-color:var(--gram-blue) !important;
  background:#fff !important;
}
.wpforms-container .wpforms-field-file-upload .dz-message,
.wpforms-container .wpforms-field-file-upload .wpforms-uploader-message{
  color:var(--gram-ink-muted);
  font-size:13px;
}

/* ---------- 付款欄位（報名費） ---------- */
.wpforms-container .wpforms-payment-total,
.wpforms-container .wpforms-field-payment-single{
  background:var(--gram-paper-2);
  border:1.5px solid var(--gram-line-strong);
  border-radius:12px;
  padding:14px 16px;
}
.wpforms-container .wpforms-field-payment-single .wpforms-field-label{
  margin-bottom:2px;
}
.wpforms-container .wpforms-payment-price{
  font-weight:800;
  color:var(--gram-red);
  font-size:16px;
}

/* ---------- 錯誤提示 ---------- */
.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error{
  color:var(--gram-err);
  font-size:12.5px;
  font-weight:700;
  margin-top:6px;
  display:block;
}
.wpforms-container .wpforms-field.wpforms-has-error input,
.wpforms-container .wpforms-field.wpforms-has-error select,
.wpforms-container .wpforms-field.wpforms-has-error textarea{
  border-color:var(--gram-err) !important;
  box-shadow:0 0 0 3px rgba(192,57,43,.14) !important;
}

/* ---------- 送出按鈕 ---------- */
.wpforms-container .wpforms-submit-container{
  margin-top:12px;
}
.wpforms-container button.wpforms-submit{
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  color:#fff;
  background:linear-gradient(135deg, var(--gram-red), var(--gram-red-ink));
  border:none;
  border-radius:10px;
  padding:13px 26px;
  cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
.wpforms-container button.wpforms-submit:hover{
  filter:brightness(1.06);
}
.wpforms-container button.wpforms-submit:active{
  transform:translateY(1px);
}
.wpforms-container button.wpforms-submit:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* ---------- Confirmation / 完成訊息 ---------- */
.wpforms-container .wpforms-confirmation-container-full{
  background:var(--gram-paper-2);
  border:1.5px solid var(--gram-line-strong);
  border-radius:14px;
  padding:22px;
  font-size:14.5px;
  line-height:1.8;
}

/* ---------- RWD ---------- */
@media (max-width:560px){
  .wpforms-container .wpforms-field-name .wpforms-field-row{
    grid-template-columns:1fr;
  }
  .wpforms-container .wpforms-field-radio ul,
  .wpforms-container .wpforms-field-checkbox ul{
    grid-template-columns:1fr;
  }
}/* End custom CSS */
/* Start custom CSS for wpforms, class: .elementor-element-85dd7fb *//* ==========================================================================
   格蘭英檢報名表 — WPForms 自訂樣式
   使用方式：
   1) 表單編輯器右上角「Embed」旁的「⚙ 齒輪」設定，或
   2) WPForms → Settings → General → Custom CSS，或
   3) 外觀 → 自訂 → 額外 CSS（Additional CSS）
   三選一貼上即可，皆為全站/全表單套用；若只想套用單一表單，
   把最外層每個規則的選擇器前面加上該表單的 ID，
   例如 .wpforms-container-1234 .wpforms-field { ... }
   （表單 ID 可在 WPForms 表單列表的 Shortcode 欄位看到，如 [wpforms id="1234"]）
   ========================================================================== */

:root{
  --gram-red:#D6282A;
  --gram-red-ink:#A81E20;
  --gram-blue:#1B3B7C;
  --gram-yellow:#F0B429;
  --gram-ink:#2A2118;
  --gram-ink-muted:#786B57;
  --gram-line:#E4D9C3;
  --gram-line-strong:#D8C79E;
  --gram-paper:#FFFFFF;
  --gram-paper-2:#F7F1E3;
  --gram-err:#C0392B;
  --gram-err-bg:#FBEAE8;
  --gram-focus: var(--gram-blue);
}

/* ---------- 整體容器 ---------- */
.wpforms-container{
  max-width:720px;
  margin:0 auto;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--gram-ink);
}
.wpforms-container .wpforms-form{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* ---------- 欄位間距與容器 ---------- */
.wpforms-container .wpforms-field{
  padding:0;
  margin-bottom:22px;
}
.wpforms-container .wpforms-field:last-of-type{
  margin-bottom:0;
}

/* ---------- 標籤 ---------- */
.wpforms-container .wpforms-field-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--gram-ink);
  margin-bottom:7px;
}
.wpforms-container .wpforms-field-required{
  color:var(--gram-red);
  margin-left:2px;
}
.wpforms-container .wpforms-field-sublabel{
  font-size:11px;
  font-weight:600;
  color:var(--gram-ink-muted);
  margin-top:4px;
}
.wpforms-container .wpforms-field-description{
  font-size:12.5px;
  color:var(--gram-ink-muted);
  margin-top:6px;
  line-height:1.6;
}

/* ---------- 文字 / Email / 電話 / 數字 / 下拉輸入框 ---------- */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container input[type=url],
.wpforms-container select,
.wpforms-container textarea{
  width:100%;
  max-width:100%;
  font-family:inherit;
  font-size:15px;
  color:var(--gram-ink);
  background:var(--gram-paper);
  border:1.5px solid var(--gram-line-strong);
  border-radius:10px;
  padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow:none;
}
.wpforms-container textarea{
  min-height:110px;
  resize:vertical;
}
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder{
  color:var(--gram-ink-muted);
  opacity:.7;
}
.wpforms-container input[type=text]:focus,
.wpforms-container input[type=email]:focus,
.wpforms-container input[type=tel]:focus,
.wpforms-container input[type=number]:focus,
.wpforms-container input[type=url]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus{
  outline:none;
  border-color:var(--gram-focus);
  box-shadow:0 0 0 3px rgba(27,59,124,.16);
}

/* 姓名欄位（英文姓名 姓/名）並排
   改用 flex，避免不同 WPForms 版本的 class（wpforms-field-row-block／
   wpforms-one-half）寬度設定衝突，並用 !important 確保蓋過核心樣式。 */
.wpforms-container .wpforms-field-name .wpforms-field-row{
  display:flex !important;
  flex-wrap:wrap;
  gap:12px;
}
.wpforms-container .wpforms-field-name .wpforms-field-row-block,
.wpforms-container .wpforms-field-name .wpforms-one-half{
  float:none !important;
  clear:none !important;
  width:auto !important;
  flex:1 1 180px !important;
  margin:0 !important;
}
/* 隱藏預設的 First／Last 小標籤：輸入框已用 placeholder
   顯示「姓 SURNAME」「名 GIVEN NAME」，兩者同時出現會重複、變擁擠 */
.wpforms-container .wpforms-field-name .wpforms-field-sublabel{
  display:none !important;
}

/* ---------- Multiple Choice（考生身份／報名場次）卡片式單選 ---------- */
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-checkbox ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  /* auto-fit：選項只有 1 個時（如同意事項勾選）會自動撐滿整行寬度，
     不會像固定 repeat(2,1fr) 那樣只佔一半、看起來比其他欄位短。
     有 2 個以上選項時（如台北場/台中場）才會自動排成 2 欄。 */
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:10px;
}
.wpforms-container .wpforms-field-radio ul.wpforms-list-inline,
.wpforms-container .wpforms-field-checkbox ul.wpforms-list-inline{
  grid-template-columns:1fr;
}
.wpforms-container .wpforms-field-radio ul li,
.wpforms-container .wpforms-field-checkbox ul li{
  margin:0;
  /* 邊框、圓角、內距都放在 li 這一層（不是 label），
     這樣不管 WPForms 把 input 寫在 label 裡面、還是跟 label
     並排的兩個獨立元素，圈圈跟文字都會被同一個框框包住 */
  display:flex !important;
  align-items:center;
  gap:10px;
  border:1.5px solid var(--gram-line-strong);
  border-radius:10px;
  padding:12px 14px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.wpforms-container .wpforms-field-radio ul li label,
.wpforms-container .wpforms-field-checkbox ul li label{
  display:flex !important;
  align-items:center;
  gap:10px;
  flex:1;
  margin:0;
  padding:0;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
}
.wpforms-container .wpforms-field-radio ul li input[type=radio],
.wpforms-container .wpforms-field-checkbox ul li input[type=checkbox]{
  width:18px;
  height:18px;
  accent-color:var(--gram-blue);
  flex:none;
  margin:0;
  /* 強制讓圈圈／方塊永遠排在文字最前面，同一行，
     不受原始 HTML 裡 input 和文字的先後順序影響，
     避免家長勾錯或看不清楚選項對應哪個圈圈 */
  order:-1;
}
/* 選取後高亮：框線改套在 li 上（現代瀏覽器；
   若需支援較舊瀏覽器，見檔案最下方 JS 備援） */
.wpforms-container .wpforms-field-radio ul li:has(input:checked),
.wpforms-container .wpforms-field-checkbox ul li:has(input:checked){
  border-color:var(--gram-blue);
  background:rgba(27,59,124,.06);
}
.wpforms-container .wpforms-field-radio ul li.wpforms-selected,
.wpforms-container .wpforms-field-checkbox ul li.wpforms-selected,
.wpforms-container .wpforms-field-radio ul li label.wpforms-selected,
.wpforms-container .wpforms-field-checkbox ul li label.wpforms-selected{
  border-color:var(--gram-blue);
  background:rgba(27,59,124,.06);
}

/* ---------- 下拉選單（報考級數）加一點指標樣式 ---------- */
.wpforms-container select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%23786B57' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}

/* ---------- HTML 說明區塊（A~D級數對照表）外距 ---------- */
.wpforms-container .wpforms-field-html{
  margin-bottom:26px;
}

/* ---------- 頂部橫幅 Banner ----------
   若透過「HTML」欄位插入 banner 圖片，在該欄位的
   Advanced → CSS Classes 填上 gram-banner，
   即可套用以下圓角、滿版、無多餘留白的樣式。 */
.wpforms-container .wpforms-field-html.gram-banner{
  margin-bottom:24px;
}
.wpforms-container .wpforms-field-html.gram-banner img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:0 8px 24px -14px rgba(42,33,24,.35);
}

/* ---------- 檔案上傳欄位 ---------- */
.wpforms-container .wpforms-field-file-upload .dz-clickable,
.wpforms-container .wpforms-field-file-upload .wpforms-file-upload-modern{
  border:1.5px dashed var(--gram-line-strong) !important;
  border-radius:12px !important;
  background:var(--gram-paper-2) !important;
  padding:22px 16px !important;
  text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.wpforms-container .wpforms-field-file-upload .dz-clickable:hover,
.wpforms-container .wpforms-field-file-upload .wpforms-file-upload-modern:hover{
  border-color:var(--gram-blue) !important;
  background:#fff !important;
}
.wpforms-container .wpforms-field-file-upload .dz-message,
.wpforms-container .wpforms-field-file-upload .wpforms-uploader-message{
  color:var(--gram-ink-muted);
  font-size:13px;
}

/* 若欄位設定用的是「Classic」上傳樣式（單純 <input type="file">，
   不是拖拉上傳的 Modern 樣式），前面幾條規則不會生效，
   外觀就會變成瀏覽器原生的檔案選擇按鈕，跟其他欄位風格不一致。
   這裡額外包一層樣式，讓 Classic 上傳也有一致的外觀。 */
.wpforms-container .wpforms-field-file-upload input[type=file]{
  display:block;
  width:100%;
  font-size:13px;
  color:var(--gram-ink-muted);
  border:1.5px dashed var(--gram-line-strong);
  border-radius:12px;
  background:var(--gram-paper-2);
  padding:16px;
  cursor:pointer;
  box-sizing:border-box;
}
.wpforms-container .wpforms-field-file-upload input[type=file]::file-.elementor-4886 .elementor-element.elementor-element-85dd7fb-button{
  font:inherit;
  font-weight:700;
  font-size:12.5px;
  color:#fff;
  background:var(--gram-blue);
  border:none;
  border-radius:8px;
  padding:8px 14px;
  margin-right:12px;
  cursor:pointer;
}

/* ---------- 錯誤提示 ---------- */
.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error{
  color:var(--gram-err);
  font-size:12.5px;
  font-weight:700;
  margin-top:6px;
  display:block;
}
.wpforms-container .wpforms-field.wpforms-has-error input,
.wpforms-container .wpforms-field.wpforms-has-error select,
.wpforms-container .wpforms-field.wpforms-has-error textarea{
  border-color:var(--gram-err) !important;
  box-shadow:0 0 0 3px rgba(192,57,43,.14) !important;
}

/* ---------- 送出按鈕 ---------- */
.wpforms-container .wpforms-submit-container{
  margin-top:12px;
}
.wpforms-container button.wpforms-submit{
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  color:#fff;
  background:linear-gradient(135deg, var(--gram-red), var(--gram-red-ink));
  border:none;
  border-radius:10px;
  padding:13px 26px;
  cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
.wpforms-container button.wpforms-submit:hover{
  filter:brightness(1.06);
}
.wpforms-container button.wpforms-submit:active{
  transform:translateY(1px);
}
.wpforms-container button.wpforms-submit:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* ---------- Confirmation / 完成訊息 ---------- */
.wpforms-container .wpforms-confirmation-container-full{
  background:var(--gram-paper-2);
  border:1.5px solid var(--gram-line-strong);
  border-radius:14px;
  padding:22px;
  font-size:14.5px;
  line-height:1.8;
}

/* ---------- RWD ---------- */
@media (max-width:560px){
  .wpforms-container .wpforms-field-radio ul,
  .wpforms-container .wpforms-field-checkbox ul{
    grid-template-columns:1fr;
  }

  /* 手機版：英文姓名「姓／名」兩個框強制改成上下各佔滿整行寬度，
     並且外距、邊框寬度完全一致，確保左右邊緣對齊，
     不受 WPForms 核心在小螢幕下可能保留的 float/margin 影響 */
  .wpforms-container .wpforms-field-name .wpforms-field-row{
    flex-direction:column;
  }
  .wpforms-container .wpforms-field-name .wpforms-field-row-block,
  .wpforms-container .wpforms-field-name .wpforms-one-half{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
  }
  .wpforms-container .wpforms-field-name input[type=text]{
    width:100% !important;
    box-sizing:border-box !important;
  }
}/* End custom CSS */