/* ==========================================================================
   精銳建設 · 精銳 WORLD EDM — 表單送出相關樣式
   2026-08-24

   刻意獨立成一支檔案，不動客戶原本的 layout_240118.css，日後要回溯或整支移除都容易。
   載入順序須排在 layout_240118.css 之後。
   ========================================================================== */

/*-----------------------------------------------------
  驗證錯誤訊息（jquery-validation 產生 label.error）
-----------------------------------------------------*/
#form label.error {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    text-align: left;
    color: #C0392B;
}

/* 個資同意是置中的單行勾選，錯誤訊息跟著置中 */
#field-agree label.error {
    text-align: center;
}

/* 未通過的欄位改用紅色底線，與原本的黑色底線同一種視覺語彙 */
#form input.error,
#form select.error,
#form textarea.error {
    border-bottom-color: #C0392B !important;
}

/*-----------------------------------------------------
  個資同意與隱私權連結（2026-08-25）
  勾選框改為不預設打勾後，訪客一定得自己點一次，
  因此把「我已閱讀並同意」做成 label，讓文字也能點、不必瞄準小方框。
-----------------------------------------------------*/

/* 在 flex 橫列裡，勾選框會被旁邊的長段文字擠到變形 */
#agree {
    flex: 0 0 auto;
}

/* Bootstrap 的 label 預設有 margin-bottom，會把這行文字推離下一行 */
.agree-label {
    margin-bottom: 0;
    font-weight: inherit;
    cursor: pointer;
}

/* 連結落在白底的 #section7 上，用品牌咖啡色而不是瀏覽器預設的藍 */
.privacy-link {
    color: #9D7D61;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy-link:hover,
.privacy-link:focus {
    color: #9D7D61;
    opacity: 0.7;
    text-decoration: underline;
}

/*-----------------------------------------------------
  reCAPTCHA 徽章（2026-08-25）

  v3 的徽章會固定浮在右下角，擋住版面、還跟回到頂端鍵疊在一起。
  Google 允許隱藏，但條件是**必須在使用者流程中保留文字聲明** ——
  也就是 index.html 送出鍵下方那段 .recaptcha-note。兩者是一組的，
  只隱藏徽章而刪掉聲明，等於違反 reCAPTCHA 的使用條款。

  用 visibility 而不是 display: none —— 徽章其實是個 iframe，
  display: none 在某些情況下會讓驗證流程失效。
-----------------------------------------------------*/
.grecaptcha-badge {
    visibility: hidden;
}

.recaptcha-note {
    margin: 28px 0 0;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    text-align: center;
    color: #888;
    /* 需要斷行時把各行長度拉平，不讓最後一行只剩一兩個字 */
    text-wrap: pretty;
}

.recaptcha-note a {
    color: #9D7D61;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.recaptcha-note a:hover,
.recaptcha-note a:focus {
    color: #9D7D61;
    opacity: 0.7;
    text-decoration: underline;
}

/*-----------------------------------------------------
  送出鍵
  原本樣式掛在 #submit 上，因送出鍵改名為 #form-submit
  （表單內有 id="submit" 的元素會遮蔽原生的 form.submit()）而在此重新宣告。
-----------------------------------------------------*/
#form-submit {
    padding: 24px 60px;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #000;
    border-radius: 0;
    font-weight: bold;
    width: 350px;
    border: 1px solid #000;
}

#form-submit:hover {
    opacity: 0.6;
}

/* 送出中：按鈕變灰並停用游標，明確表示「已經在送了，不用再按」 */
#form-submit:disabled,
#form-submit[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/*-----------------------------------------------------
  送出成功後隱藏表單
  表單本身是 Bootstrap 的 d-flex（display:flex !important），
  jQuery hide() 寫的行內 display:none 壓不過它，故在此以同等權重蓋掉。
-----------------------------------------------------*/
#form.is-hidden {
    display: none !important;
}

/*-----------------------------------------------------
  送出結果訊息（成功卡／失敗提示）
-----------------------------------------------------*/
.form-message {
    display: none;
    margin: 24px auto 0;
    padding: 30px 24px;
    max-width: 640px;
    border: 1px solid #000;
    background-color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.form-message.is-visible {
    display: block;
}

.form-message-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #000;
    margin-bottom: 10px;
}

.form-message-text {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    margin: 0;
}

.form-message.is-error {
    border-color: #C0392B;
}

.form-message.is-error .form-message-title {
    color: #C0392B;
}

/*-----------------------------------------------------
  送出中的等待遮罩
-----------------------------------------------------*/
.loader-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.75);
}

.loader-overlay.is-active {
    display: flex;
}

.loader-spinner {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #9D7D61;
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

.loader-text {
    margin-top: 14px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #000;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/*-----------------------------------------------------
  手機版
-----------------------------------------------------*/
@media (max-width: 767px) {
    #form-submit {
        width: 100%;
        padding: 18px 20px;
    }

    .form-message {
        padding: 24px 16px;
    }

    .form-message-title {
        font-size: 19px;
    }
}