/* ============================================================================
   驗證失敗的欄位外觀。

   舊站是自己寫 JS 驗證、失敗時整個輸入框變紅框;新站用 HTML5 原生驗證,
   而原生的提示框**無法用 CSS 改樣式**(它畫在瀏覽器層)。
   所以訊息交給 form-validation-zh.js 換成中文,外觀由這裡負責。

   ⚠️ 不要用 :invalid 選擇器。它從頁面載入的第一刻就成立 ——
   使用者還沒碰過任何欄位,整張表單就已經滿江紅。
   紅框只在「送出被擋下來」之後才加(那支 JS 加 .invalidField),
   填對了就移除。
   ============================================================================ */
.invalidField,
input.invalidField,
select.invalidField,
textarea.invalidField {
    border: 1px solid #c9151e !important;
    background-color: #fff5f5 !important;
    outline: none;
}

/* 舊 common.css 對 input 大多沒有 box-shadow,所以用它來加強而不會打架。 */
.invalidField:focus {
    box-shadow: 0 0 0 2px rgba(201, 21, 30, .18);
}