@charset "utf-8";
/* ============================================================
   Contact Us 系列頁面共用樣式
   對應頁面：
     contact/rma_contact.php      分流頁（#contactUs）
     contact/contact_form.php     Business & Partnerships（#contactUs）
     rma/rma_form_global.php      Technical Support & RMA（#contactUs）

   本檔只補「作用域專屬」與「本系列新增」的樣式。
   以下版型直接沿用 css/default.css，不要在這裡重寫：
     .topHeader / .headerWrapper / .headerWordContainer / .headerWord  banner
     .pageTitleBox / .h2_hr                                            區塊標題＋粉紅線
     .supportIcon / .supportContrnt / .supportText / .supportBtn       卡片內部
     .a_center / .r_center                                             置中輔助
   ★ 使用前提：頁面必須引用 css/default.css
   ============================================================ */

/* ---------- 共用字體 -------------------------------------- */
/* 頁面需載入 Noto Sans TC 的 400/700/900 三種字重，
   只載 400 的話粗體會變成瀏覽器合成的偽粗體，看起來不夠重 */
#contactUs .headerWord,
#contactUs .faqSupportWarp {
  font-family: "Noto Sans TC", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    '微軟正黑體', "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* ---------- Banner ---------------------------------------- */
/* default.css 的 .headerWrapper 沒有 position，.a_center 會以 .topHeader
   為基準（含 64px padding-top）而偏移，這裡補回來 */
#contactUs .headerWrapper {
  position: relative;
  background: url(../images/download_banner.jpg) no-repeat center center;
  background-size: cover;
}

/* 覆寫 default.css 的 font-weight:bold，改用真正的 900 字重 */
#contactUs .headerWord {
  font-weight: 900;
}

/* ---------- 內容區底色 ------------------------------------ */
/* 麵包屑那條與下方卡片區塊統一底色，避免出現一條白帶。
   註：改用 .cuPathBar 直接指容器。掛在 #contactUs #content 上不會生效
   （原因不明，所有載入的 CSS 都查過沒有競爭規則），不要改回去。 */
#contactUs .cuPathBar {
  background: #F2F3F5;
}

/* ---------- 區塊容器（複製 default.css 的 #FAQ 版本）-------- */
#contactUs .pageExtraWarp {
  position: relative;
  width: 100%;
  height: auto;
  background: #F2F3F5;
  padding: 0 0 60px 0;
}

/* flex 容器：讓並排的卡片自動等高 */
#contactUs .faqSupportWarp {
  position: relative;
  margin: 0 auto;
  width: 80%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 1200px) {
  #contactUs .faqSupportWarp { width: 90%; }
}

#contactUs .faqSupportBox {
  position: relative;
  width: 48%;
  height: auto;
  margin: 20px 0.5% 0 0.5%;
  padding: 3% 2%;
  background: #fff;
  text-align: left;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
#contactUs .faqSupportBox:hover {
  -webkit-box-shadow: 0px 5px 12px 3px rgba(144, 142, 142, 0.8);
  box-shadow: 0px 5px 12px 3px rgba(144, 142, 142, 0.8);
}
@media screen and (max-width: 800px) {
  #contactUs .faqSupportBox { width: 100%; }
}

/* 整張卡片可點：連結不要帶預設色與底線，並撐滿卡片高度 */
#contactUs .faqSupportBox > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ---------- 卡片內容 -------------------------------------- */
/* icon 垂直置中；文字欄撐滿高度，好讓按鈕貼齊底部 */
#contactUs .supportBox {
  display: flex;
  align-items: stretch;
  height: 100%;
}
@media screen and (max-width: 450px) {
  #contactUs .supportBox { flex-wrap: wrap; }
}

#contactUs .supportIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}

#contactUs .supportContrnt {
  display: flex;
  flex-direction: column;
}

/* default.css 沒有卡片標題，這裡新增 */
#contactUs .supportTitle {
  width: 90%;
  margin: 0 auto 12px auto;
  font-size: 1.7rem;
  line-height: 2.2rem;
  font-weight: bold;
  color: #1A1A1A;
}
@media screen and (max-width: 450px) {
  #contactUs .supportTitle {
    width: 100%;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: center;
  }
}

/* 覆寫 default.css：固定 height:100px 會讓不同長度的文案對不齊 */
#contactUs .supportText {
  width: 90%;
  height: auto;
  margin: 0 0 20px 5%;
  padding: 0;
}

/* 覆寫 default.css：預設是 width:90% 的長條，設計稿是貼合文字的按鈕。
   margin-top:auto 把按鈕推到卡片底部，兩張卡的按鈕才會齊平 */
#contactUs .supportBtn {
  align-self: flex-start;
  width: auto;
  margin: auto 0 0 5%;
  padding: 10px 25px;
  font-weight: 600;
  /* font-size: 1rem; */
  /* letter-spacing: 1px; */
}
@media screen and (max-width: 450px) {
  #contactUs .supportBtn { 
    margin: 0 auto;
  }
  #contactUs .faqSupportBox{
    padding: 2% 0 8% 0;
  }
}

/* ---------- 底部 FAQ 導引 --------------------------------- */
#contactUs .cuFaqNote {
  margin: 45px auto 0 auto;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6rem;
  color: #3c3c3c;
}
#contactUs .cuFaqNote a {
  color: #E84CDF;
  font-weight: bold;
}
#contactUs .cuFaqNote a:hover {
  text-decoration: underline;
}

/* ============================================================
   表單頁樣式（rma/rma_form_global.php）
   對應設計稿：.claude/ui-ref/Brook-contact us-Technical Support & RMA.jpg

   ★ 這支頁面是「一支檔案服務 8 個語系」（?lang= 切換），
     所以這裡的樣式與語言無關，只處理版型。
   ★ 靜態欄位是 div，動態注入的列保留 <table id="myTable">
     （dataAjax.php echo 的是 <tr>，且驗證 JS 靠 tr.qtnList / td[data-type] 走訪）
     table 的列在下方用 display:block 重排成跟 div 欄位一致的外觀。
   ============================================================ */

/* ---------- 版面容器 -------------------------------------- */
#contactUs .cuIntroWarp {
  position: relative;
  margin: 0 auto;
  width: 56%;
  max-width: 1080px;
}
#contactUs .cuFormWarp {
  position: relative;
  margin: 0 auto;
  width: 69%;
  max-width: 1320px;
}
@media screen and (max-width: 1200px) {
  #contactUs .cuIntroWarp { width: 80%; }
  #contactUs .cuFormWarp  { width: 88%; }
}
@media screen and (max-width: 800px) {
  #contactUs .cuIntroWarp,
  #contactUs .cuFormWarp { width: 92%; }
}

#contactUs .cuIntroWarp,
#contactUs .cuFormWarp {
  font-family: "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", -apple-system,
    BlinkMacSystemFont, '微軟正黑體', "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* ---------- 前言 ------------------------------------------ */
#contactUs .cuIntro {
  margin: 0 0 32px 0;
  font-size: 1.1rem;
  line-height: 1.95rem;
  color: #3c3c3c;
  text-align: left;
}

/* 過年公告等臨時訊息（$rma_holiday_str 有值時才輸出） */
#contactUs .cuHolidayNote {
  margin: 0 0 32px 0;
  font-size: 1.05rem;
  line-height: 1.8rem;
  font-weight: bold;
  color: #D61D1D;
}

/* ---------- 必填欄位說明 ---------------------------------- */
#contactUs .cuRequiredNote {
  margin: 0 0 10px 0;
  font-size: .95rem;
  line-height: 1.5rem;
  color: #E84CDF;
  text-align: right;
}

/* ---------- 表單分區 -------------------------------------- */
/* 上緣的粉→藍漸層線是設計稿的分區標記。用 ::before 疊，
   比 border-image 的瀏覽器支援穩 */
#contactUs .cuFormSection {
  position: relative;
  padding-top: 3px;
  background: #fff;
}
#contactUs .cuFormSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #E84CDF 0%, #4a3cff 100%);
}

#contactUs .cuFormSectionTitle {
  padding: 18px 30px;
  font-size: 1.25rem;
  line-height: 1.7rem;
  font-weight: bold;
  color: #1A1A1A;
  background: #EDEEF0;
}
#contactUs .cuFormBody {
  padding: 30px;
}
@media screen and (max-width: 600px) {
  #contactUs .cuFormSectionTitle { padding: 15px 20px; }
  #contactUs .cuFormBody { padding: 22px 20px; }
}

/* ---------- 欄位 ------------------------------------------ */
#contactUs .cuField {
  margin-bottom: 26px;
}
#contactUs .cuFormBody > .cuField:last-child {
  margin-bottom: 0;
}
#contactUs .cuRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#contactUs .cuRow > .cuField {
  width: 48.5%;
}
@media screen and (max-width: 600px) {
  #contactUs .cuRow > .cuField { width: 100%; }
}

#contactUs .cuLabel {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: bold;
  color: #1A1A1A;
}
/* 必填星號 */
#contactUs .cuLabel em {
  color: #E84CDF;
  font-style: normal;
  font-weight: bold;
}
/* 標籤下方的補充說明（上傳圖片那三行提示） */
/* 內容是 $rma_form_upload_title 的第二段，本身就帶 <br> 斷行，
   所以裡面的 <span> 不要設成 block —— 會變成一個 <span> 加一個 <br>
   兩次斷行，行距整個散掉。 */
#contactUs .cuHint {
  margin: -2px 0 10px 0;
  font-size: .95rem;
  line-height: 1.6rem;
  color: #6b6b6b;
}

#contactUs .cuField input[type="text"],
#contactUs .cuField select,
#contactUs .cuField textarea {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #1A1A1A;
  background: #fff;
  border: 1px solid #C9CCD1;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contactUs .cuField textarea {
  height: 150px;
  resize: vertical;
}
#contactUs .cuField input[type="text"]:focus,
#contactUs .cuField select:focus,
#contactUs .cuField textarea:focus {
  outline: none;
  border-color: #7730DB;
}

/* ---------- 動態注入的表格列 ------------------------------ */
/* dataAjax.php echo 的 <tr>：產品／問題類型（tr.PrdAndSer）與
   問卷（tr.qtnList）。把 table 重排成 block，讓它跟 .cuField 長一樣。
   ★ 不要改成 div —— 驗證 JS 靠 tr.qtnList / td[data-type] 走訪，
     dataAjax.php 也不用動。 */
#contactUs #myTable,
#contactUs #myTable tbody,
#contactUs #myTable tr,
#contactUs #myTable th,
#contactUs #myTable td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contactUs #myTable {
  margin: 0;
  border-collapse: collapse;
}
/* 空的錨點列（#tr_prdSeries / #qtnStart）高度為 0，看不見 */
#contactUs #myTable tr:empty { display: none; }

/* 每一列＝一個欄位，間距與 .cuField 一致 */
#contactUs #myTable tr.PrdAndSer,
#contactUs #myTable tr.qtnList {
  margin-bottom: 26px;
}
/* <th> 當標籤用，樣式對齊 .cuLabel */
#contactUs #myTable tr.PrdAndSer > th,
#contactUs #myTable tr.qtnList > th {
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: bold;
  color: #1A1A1A;
  text-align: left;
}
/* dataAjax.php echo 的是 "產品<em>*</em>"，星號緊貼文字，
   跟靜態欄位 "產品系列 *" 的間距對不上，用 margin 補回來 */
#contactUs #myTable th em {
  margin-left: 4px;
  color: #E84CDF;
  font-style: normal;
  font-weight: bold;
}
/* <td> 裡的輸入元件，樣式對齊 .cuField 內的 */
#contactUs #myTable td input[type="text"],
#contactUs #myTable td select,
#contactUs #myTable td textarea {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #1A1A1A;
  background: #fff;
  border: 1px solid #C9CCD1;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contactUs #myTable td textarea {
  height: 110px;
  resize: vertical;
}
#contactUs #myTable td input[type="text"]:focus,
#contactUs #myTable td select:focus,
#contactUs #myTable td textarea:focus {
  outline: none;
  border-color: #7730DB;
}

/* 問卷的 radio / checkbox。
   ★ dataAjax.php 的 printQtn() 產生的是「<input> + 純文字 + <br>」，
     沒有 <label> 包裹，而且不能加 ——
     驗證 JS 用 $(td).children() 取輸入元件再讀 attr('name')，
     多包一層 label 會讓 children() 拿到 label、name 變 undefined，
     qtnData 就送出空的。所以這段只能靠「input＋相鄰文字」本身排版，
     做不成可點的方塊選項。
   設計稿沒有畫這一段，依現有規範自訂：一行一個選項，
   勾選框用主色 #7730DB，字級／行高沿用表單其他欄位。 */
#contactUs #myTable td[data-type="radio"],
#contactUs #myTable td[data-type="checkbox"] {
  padding: 2px 0 0 0;
  font-size: 1rem;
  line-height: 2.1rem;
  color: #1A1A1A;
}
#contactUs #myTable td[data-type="radio"] input,
#contactUs #myTable td[data-type="checkbox"] input {
  width: 17px;
  height: 17px;
  margin: 0 9px 0 0;
  /* 對齊相鄰的純文字，用 middle 會偏高 */
  vertical-align: -3px;
  accent-color: #7730DB;
  cursor: pointer;
}
/* 選項文字。原本是裸的文字節點（只有圓圈能點），由頁面的
   wrapQtnOptionLabels() 包成 <label for>，讓文字也能點選。
   刻意不做 hover 變色 —— 原生表單的選項文字不會變色。 */
#contactUs #myTable .qtnOptLabel {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

/* ---------- 檔案上傳（設計稿是 2×2＋1 網格）--------------- */
/* 元件本身（.inputFileContainer / .inputFileTrigger / .file_txt / .fileName）
   的基礎樣式在 rma_form_global.php 的 inline <style>，那是舊版型留下來的
   110×30 灰色小方塊。這一組規則靠 #contactUs .cuUploadGrid 的高權重把它
   重畫成跟其他欄位同一套：整格是白底方框，左邊的觸發鈕沿用「次要按鈕」
   的樣式（白底 + #7730DB 邊框與文字，跟清除表單鈕同一套）。
   ★ 不要改 HTML 的 class 名稱 —— 頁尾 JS 靠 .file_N / .real_file_N /
     .fileName_N 這組編號配對觸發鈕、真正的 input 與檔名顯示。 */
#contactUs .cuUploadGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 3%;
}
#contactUs .cuUploadGrid .inputFileContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 48.5%;
  margin: 0;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid #C9CCD1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1);
  -o-transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1);
  transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1);
}
#contactUs .cuUploadGrid .inputFileTrigger {
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0 12px 0 0;
  padding: 7px 16px;
  font-size: .95rem;
  line-height: 1.4rem;
  font-weight: bold;
  color: #7730DB;
  background: #fff;
  border: 1px solid #7730DB;
  vertical-align: baseline;
  -webkit-transition: color 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
  -o-transition: color 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
  transition: color 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}
/* label 有 tabindex="0"，鍵盤使用者要看得出焦點在哪 */
#contactUs .cuUploadGrid .inputFileTrigger:focus {
  outline: 2px solid #7730DB;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  #contactUs .cuUploadGrid .inputFileContainer:hover { border-color: #7730DB; }
  #contactUs .cuUploadGrid .inputFileTrigger:hover {
    color: #fff;
    background: #7730DB;
    border-color: #7730DB;
  }
}
#contactUs .cuUploadGrid .file_txt {
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
  top: 0;
  margin: 0;
}
#contactUs .cuUploadGrid .fileName {
  display: block;
  font-size: .95rem;
  line-height: 1.4rem;
  color: #6b6b6b;
}
@media screen and (max-width: 600px) {
  #contactUs .cuUploadGrid .inputFileContainer { width: 100%; }
}
/* 上傳限制的補充說明 */
#contactUs .cuUploadNote {
  margin: 12px 0 0 0;
  font-size: .9rem;
  line-height: 1.5rem;
  color: #8a8a8a;
}

/* ---------- 條款同意 -------------------------------------- */
#contactUs .cuTerms {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 0 26px 0;
  padding: 16px 18px;
  font-size: 1rem;
  line-height: 1.7rem;
  color: #3c3c3c;
  background: #F2F3F5;
}
#contactUs .cuTerms input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 4px 10px 0 0;
  accent-color: #7730DB;
  cursor: pointer;
}
/* 條款文字本身。是 <label for="req_check">，點文字就能勾選。
   文字裡的「退換貨流程」外部連結靠頁面 JS 擋掉 click 冒泡，
   才不會點連結的同時也把勾選框切掉。 */
#contactUs .cuTermsText {
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  min-width: 0;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}
#contactUs .cuTerms a {
  color: #7730DB;
  font-weight: bold;
}
#contactUs .cuTerms a:hover { text-decoration: underline; }
#contactUs .cuTerms em {
  color: #E84CDF;
  font-style: normal;
  font-weight: bold;
}

/* ---------- 驗證碼 ---------------------------------------- */
#contactUs .cuCaptchaRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#contactUs .cuCaptchaRow input[type="text"] {
  width: 200px;
  margin-right: 14px;
}
#contactUs .cuCaptchaRow #code_img {
  display: block;
  /* 覆寫 default.css 的全域 img{width:100%}。authimg_sk.php 產生的圖是
     60x20，不設 width:auto 會被拉成滿版 */
  width: auto;
  height: auto;
  margin-right: 12px;
}
#contactUs .cuCaptchaRow #change_img {
  display: block;
  height: 25px;
  width: auto;
  cursor: pointer;
}

/* ---------- 按鈕列 ---------------------------------------- */
#contactUs .cuBtnBar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
#contactUs .cuBtnClear,
#contactUs .cuBtnSubmit {
  min-width: 170px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.3rem;
  font-weight: 600;
  /* letter-spacing 拿掉 —— 跟 .supportBtn 一致 */
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  /* 指定屬性而非 all；200ms + Corporate 簽名曲線 */
  -webkit-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1), -webkit-transform 140ms ease-out;
  -o-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
  transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
}
/* 按下回饋：觸控裝置也吃得到 */
#contactUs .cuBtnClear:active,
#contactUs .cuBtnSubmit:active {
  -webkit-transform: scale(0.97);
  -ms-transform: scale(0.97);
  transform: scale(0.97);
}
#contactUs .cuBtnClear {
  margin-right: 18px;
  color: #7730DB;
  background: #fff;
  border: 1px solid #7730DB;
}
#contactUs .cuBtnSubmit {
  color: #fff;
  border: 1px solid transparent;
  /* 漸層掃動：background-image 不能 transition，所以用三色停 + 兩倍寬 +
     移動 background-position。靜止 100% 是 #90268d → #4a3cff。 */
  background-color: #90268d;
  background-image: linear-gradient(to right, #4a3cff 0%, #90268d 50%, #4a3cff 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
/* hover 只在真正有指標裝置時啟用 */
@media (hover: hover) and (pointer: fine) {
  #contactUs .cuBtnClear:hover {
    background-color: #E5E7EA;
  }
  #contactUs .cuBtnSubmit:hover {
    background-position: 0% 0;
  }
}
@media screen and (max-width: 450px) {
  #contactUs .cuBtnBar { flex-wrap: wrap; }
  #contactUs .cuBtnClear,
  #contactUs .cuBtnSubmit {
    width: 100%;
    min-width: 0;
  }
  #contactUs .cuBtnClear { margin: 0 0 14px 0; }
}

/* ---------- 錯誤訊息 -------------------------------------- */
/* 兩個來源：jquery.validate.js 產生 <label class="error">，
   表單自己的 submit handler 產生 <span class="error">。
   ★ 只指 label / span —— jquery.validate 的 highlight() 會把 errorClass
     一起加到「輸入元件本身」，用泛用的 .error 會讓使用者打的字變紅色粗體。 */
/* 外觀跟 tw/css/contact-us.css 的 .cuFieldError 對齊（中文商務表單），
   兩支表單的錯誤提示看起來要是同一套：粉色 #E84CDF ＋ 圓形驚嘆號。
   色值沿用必填星號的 #E84CDF，讓「星號＝必填」與「提示＝沒填」讀成同一組訊息。 */
#contactUs label.error,
#contactUs span.error {
  display: flex;
  align-items: flex-start;
  margin-top: 7px;
  font-size: .95rem;
  line-height: 1.5rem;
  font-weight: bold;
  color: #E84CDF;
}
/* 圓形驚嘆號圖示：純 CSS，不用圖檔 ——
   default.css 有全域 img{width:100%}，放圖檔會被拉成滿版 */
#contactUs label.error::before,
#contactUs span.error::before {
  content: "!";
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 4px 6px 0 0;
  border-radius: 50%;
  background: #E84CDF;
  color: #fff;
  font-size: .78rem;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
}
/* 產品系列／產品／問題類型的錯誤訊息，頁面 JS 是插 '<br><span class="error">'。
   span.error 本身已經是 block，那個 <br> 只會多撐出一行空白，把它藏起來，
   三個欄位的錯誤訊息間距才會跟其他欄位一致。
   ★ 選擇器要卡死範圍：
     - 只吃 .cuField 的「直接」子層 —— 上傳說明 .cuHint 裡的 <br> 是斷行用的
     - #myTable 只吃沒有 data-type 的 <td>（產品／問題類型那兩列）——
       radio / checkbox 的選項就是靠 <br> 一行一個，不能動 */
#contactUs .cuField > br,
#contactUs #myTable td:not([data-type]) > br {
  display: none;
}

/* 輸入元件本身被標記錯誤時只換邊框顏色 */
#contactUs .cuField input.error,
#contactUs .cuField select.error,
#contactUs .cuField textarea.error,
#contactUs #myTable td input.error,
#contactUs #myTable td select.error,
#contactUs #myTable td textarea.error {
  border-color: #E84CDF;
}

/* 上面那組靠 jquery.validate 的 highlight() 在元件上加 error class，
   但「產品系列／產品／問題類型／問卷／圖片上傳」的錯誤是頁面自己的
   submit handler 插的，它只插訊息、不碰元件，拿不到那個 class。
   用 :has() 從容器反推 —— 不支援 :has() 的舊瀏覽器只會少一個粉框，
   提示文字照樣顯示，不會壞掉。 */
#contactUs .cuField:has(> span.error) input[type="text"],
#contactUs .cuField:has(> span.error) select,
#contactUs .cuField:has(> span.error) textarea,
#contactUs #myTable td:has(> span.error) input[type="text"],
#contactUs #myTable td:has(> span.error) select,
#contactUs #myTable td:has(> span.error) textarea {
  border-color: #E84CDF;
}
/* 驗證碼的訊息是插在 .cuCaptchaRow 裡，不是 .cuField 的直接子層，
   上面那條 :has(> span.error) 抓不到，要單獨補一條 */
#contactUs .cuCaptchaRow:has(span.error) input[type="text"] {
  border-color: #E84CDF;
}
/* 「請至少上傳一張」的訊息掛在 .cuUploadGrid 後面（同一個 .cuField 裡），
   所以用 .cuField 反推，把 5 格一起標起來 —— 這是針對整組的訊息 */
#contactUs .cuField:has(> span.error) .inputFileContainer {
  border-color: #E84CDF;
}

/* 驗證碼列與條款列都是 flex 容器，錯誤訊息會被當成 flex item 插在
   元件中間。用 order + 佔滿整行把它擠到最後一行去。 */
#contactUs .cuCaptchaRow label.error,
#contactUs .cuCaptchaRow span.error {
  -webkit-box-flex: 0;
  flex: 0 0 100%;
  -webkit-box-ordinal-group: 10;
  order: 9;
  margin-top: 10px;
}
#contactUs .cuTerms label.error,
#contactUs .cuTerms span.error {
  -webkit-box-flex: 0;
  flex: 0 0 100%;
  -webkit-box-ordinal-group: 10;
  order: 9;
  margin: 8px 0 0 28px;
}
/* 條款的勾選框沒有邊框可以變色，改用 outline。
   :has() 那條是給頁面自己的檢查用的 —— 它只插訊息、不在元件上加 class。 */
#contactUs .cuTerms input[type="checkbox"].error,
#contactUs .cuTerms:has(span.error) input[type="checkbox"] {
  outline: 2px solid #E84CDF;
  outline-offset: 2px;
}

/* ============================================================
   以下三組從 tw/css/contact-us.css 移植過來，給
   contact/contact_form.php（Business & Partnerships，英文版）用。
   兩支表單共用同一份版型與 JS，樣式要保持一致。
   ★ 純新增，沒有改動本檔上面任何既有規則。
   ============================================================ */

/* ---------- Brook Creators 導引卡 ------------------------- */
#contactUs .cuCreatorCard {
  margin: 0 0 55px 0;
  background: #fff;
  -webkit-transition: -webkit-box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
  -o-transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
}
/* 陰影值與分流頁的 .faqSupportBox:hover 相同 */
#contactUs .cuCreatorCard:hover {
  -webkit-box-shadow: 0px 5px 12px 3px rgba(144, 142, 142, 0.8);
  box-shadow: 0px 5px 12px 3px rgba(144, 142, 142, 0.8);
}

/* 整張卡片是一個連結：撐滿容器、不要連結預設色與底線 */
#contactUs .cuCreatorLink {
  display: flex;
  align-items: center;
  padding: 32px 40px;
  color: inherit;
  text-decoration: none;
}
#contactUs .cuCreatorLink:hover,
#contactUs .cuCreatorLink:focus {
  color: inherit;
  text-decoration: none;
}
#contactUs .cuCreatorLogo {
  flex: 0 0 26%;
  padding-right: 30px;
}
#contactUs .cuCreatorLogo img {
  display: block;
  width: 100%;
  height: auto;
}
#contactUs .cuCreatorBody {
  flex: 1 1 auto;
}
#contactUs .cuCreatorTitle {
  margin: 0 0 10px 0;
  font-size: 1.45rem;
  line-height: 1.9rem;
  font-weight: bold;
  color: #1A1A1A;
}
#contactUs .cuCreatorText {
  margin: 0 0 20px 0;
  font-size: 1.05rem;
  line-height: 1.7rem;
  color: #3c3c3c;
}
#contactUs .cuCreatorBtn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 1rem;
  line-height: 1.3rem;
  font-weight: 600;
  /* letter-spacing 拿掉 —— 跟 .supportBtn 一致 */
  color: #fff;
  text-decoration: none;
  /* background-image 不能 transition，所以改用「三色停 + 兩倍寬 + 移動
     background-position」來做可插值的漸層掃動。
     靜止 100% → 可見區是 #90268d → #4a3cff（與原設計同色）；
     hover 移到 0% 時圖片往右滑一個容器寬，形成左→右的前進感。 */
  background-color: #90268d;
  background-image: linear-gradient(to right, #4a3cff 0%, #90268d 50%, #4a3cff 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), -webkit-transform 140ms ease-out;
  -o-transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
  transition: background-position 200ms cubic-bezier(0.2, 0, 0, 1), transform 140ms ease-out;
}
#contactUs .cuCreatorBtn:active {
  -webkit-transform: scale(0.97);
  -ms-transform: scale(0.97);
  transform: scale(0.97);
}
/* hover 只在真正有指標裝置時啟用：觸控裝置點擊會觸發 hover 並殘留 */
@media (hover: hover) and (pointer: fine) {
  #contactUs .cuCreatorBtn:hover {
    background-position: 0% 0;
  }
}
@media screen and (max-width: 600px) {
  #contactUs .cuCreatorLink {
    flex-wrap: wrap;
    padding: 28px 22px;
    text-align: center;
  }
  #contactUs .cuCreatorLogo {
    flex: 0 0 70%;
    margin: 0 auto 18px auto;
    padding-right: 0;
  }
}

/* ---------- 欄位錯誤提示 ---------------------------------- */
/* 由 contact_form.php 的 JS 動態插入 .cuField 內（取代原本的 alert）。
   色值沿用必填星號的 #E84CDF，讓「星號＝必填」與「提示＝沒填」讀成同一套。 */
#contactUs .cuField.is-error input[type="text"],
#contactUs .cuField.is-error select,
#contactUs .cuField.is-error textarea {
  border-color: #E84CDF;
}
#contactUs .cuFieldError {
  display: flex;
  align-items: flex-start;
  margin-top: 7px;
  font-size: .95rem;
  line-height: 1.5rem;
  font-weight: bold;
  color: #E84CDF;
}
/* 圓形驚嘆號圖示：純 CSS，不用圖檔（避免 default.css 的全域 img 規則） */
#contactUs .cuFieldError::before {
  content: "!";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 4px 6px 0 0;
  border-radius: 50%;
  background: #E84CDF;
  color: #fff;
  font-size: .78rem;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
}

/* ★ 這裡刻意「不」搬 tw 版的 `#contactUs .error{color:#D61D1D}` ——
   那是泛用選擇器，jquery.validate 會把 errorClass 加到輸入元件本身，
   會讓使用者打的字變紅，而且跟本檔的粉色錯誤系統衝突。
   本檔的錯誤樣式看上面「錯誤訊息」那一節。 */

/* ---------- 送出鈕 disabled 狀態 -------------------------- */
/* 送出中不隱藏按鈕、改成 disabled，位置留著 */
#contactUs .cuBtnSubmit:disabled {
  opacity: .55;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  /* disabled 時不要有漸層掃動 */
  #contactUs .cuBtnSubmit:disabled:hover {
    background-position: 100% 0;
  }
}

/* ---------- 送出成功 popup -------------------------------- */
/* z-index 刻意低於固定檔頭的 1030，讓檔頭維持在最上層可用。
   footer 的回頂端箭頭 .mbr-arrow-up 是 5000，會浮在遮罩上，
   所以開啟時直接隱藏它。 */
#contactUs .cuModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1020;
  background: rgba(26, 26, 26, .6);
  align-items: center;
  justify-content: center;
  /* 上方留出檔頭的高度，內容才不會被壓在檔頭底下 */
  padding: 84px 20px 20px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contactUs .cuModal.is-open {
  display: flex;
}
/* 這頁真正的捲動容器是 <html>，只鎖 body 完全沒用（實測 popup 開著時
   scrollY 還是從 1878 掉到 1078），兩邊都要鎖。 */
html.cuModalOpen,
body.cuModalOpen {
  overflow: hidden;
}
/* 回頂端箭頭的腳本會自己寫 inline style="display:block"，
   沒有 !important 蓋不掉，它的 z-index 是 5000 會浮在遮罩上面。 */
body.cuModalOpen .mbr-arrow-up {
  display: none !important;
}

#contactUs .cuModalBox {
  width: 100%;
  max-width: 480px;
  padding: 45px 40px 40px 40px;
  background: #fff;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 進場從 0.95 放大，不從 scale(0) —— 現實中沒有東西從無到有 */
  opacity: 0;
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), -webkit-transform 260ms cubic-bezier(0.2, 0, 0, 1);
  -o-transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0, 0, 1);
  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0, 0, 1);
}
/* display:none 沒辦法 transition，所以由 JS 分兩步加 class */
#contactUs .cuModal.is-shown .cuModalBox {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

#contactUs .cuModalIcon {
  width: 90px;
  height: auto;
  margin: 0 auto 10px auto;
}
/* download_tips.png 原始尺寸 116x82。一定要明確給 width，否則會被
   default.css 的全域 img{width:100%} 拉成滿版（驗證碼圖踩過同一個坑）。*/
#contactUs .cuModalIcon img {
  display: block;
  width: 116px;
  height: auto;
  margin: 0 auto;
}
/* 失敗 popup 的圖示是 inline SVG（紅圓＋驚嘆號），64x64 */
#contactUs .cuModalIcon svg {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}

#contactUs .cuModalTitle {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: bold;
  color: #1A1A1A;
}
#contactUs .cuModalText {
  margin: 0 0 32px 0;
  font-size: 1.05rem;
  line-height: 1.8rem;
  color: #3c3c3c;
}

#contactUs .cuModalBtnBar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
/* popup 裡的按鈕是 <a>，補上 input 本來就有的 display 與去底線 */
#contactUs .cuModalBtnBar .cuBtnClear,
#contactUs .cuModalBtnBar .cuBtnSubmit {
  display: inline-block;
  text-decoration: none;
}
#contactUs .cuModalBtnBar .cuBtnClear:hover,
#contactUs .cuModalBtnBar .cuBtnSubmit:hover,
#contactUs .cuModalBtnBar .cuBtnClear:focus,
#contactUs .cuModalBtnBar .cuBtnSubmit:focus {
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  #contactUs .cuModal { padding: 76px 16px 16px 16px; }
  #contactUs .cuModalBox { padding: 35px 24px 30px 24px; }
  #contactUs .cuModalTitle { font-size: 1.35rem; line-height: 1.9rem; }
}

/* 減少動態偏好：只留淡入，去掉縮放 */
@media (prefers-reduced-motion: reduce) {
  #contactUs .cuModalBox {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    -webkit-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
  }
  #contactUs .cuModal.is-shown .cuModalBox {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}