/* =========================================================================
   ym_v2 全站通知系統

   問題：整站是粉色系，通知卻全是 Bootstrap 3 的出廠色 —— 加入購物車成功是
   #DFF0D8 綠、促銷提示條是 #FCF8E3 黃、登入失敗是 #F2DEDE 紅。ym-v2.css:591
   的 `.ym-v2 .alert` 只改了圓角與邊框，四個語意色一條都沒接管。

   這裡把四種語意（成功／提示／注意／錯誤）收進品牌色系，但**仍然分得出來**：
   底色與框線走同色系的深淺，語意差別由「圖示顏色 + 左側 3px 色條 + 文字色」
   三者一起承擔，不是只靠底色深淺（那在弱對比或色覺障礙下會失效）。

   錯誤態刻意做得比其他三種重（較深的框、較粗的字、較實的底）—— 錯誤看不到
   會讓客人卡住不知道原因，這是通知裡唯一不能為了「好看」而讓步的一種。

   為什麼獨立成一支檔案而不是寫進 ym-v2.css：
   1) ym-v2.css 是主題主檔，多工同時在改，衝突面大；
   2) ym-v2.css:1295-1298（.alert-dismissible / .islpr-alert 的 56px 內距與
      44px 關閉鈕觸控靶）被 tests/e2e/specs/98-security-hardening.spec.ts
      的原始碼正則斷言鎖住，那兩條不能動 —— 本檔一律不設 padding-right，
      只用 padding 的長寫法，讓那兩條繼續生效。
   載入點：catalog/controller/extension/module/form_fix.php（ym_v2 全站）。
   載入順序在 ym-v2.css 之後，同分特異度由本檔勝出。

   覆蓋到的來源（盤點自 2026-08-30）：
   - twig 內寫死的 alert-success / -info / -warning / -danger（約 58 處）
   - catalog/view/javascript/common.js:37 的 ymSuccessAlert()（加入購物車／收藏／比較）
   - storage/modification 的 IsenseLabs 促銷提示條
     `alert alert-{type} islpr-alert islpr-alert-{theme}`（每頁 ping、prepend 到 #content）
   - catalog/view/javascript/quote_request.js:1178（型別由變數拼，四色都會用到）
   - 一頁式結帳 vendor 的 .ve-alert--*
   - 表單欄位錯誤 .text-danger
   ========================================================================= */

:root {
  /* ym-v2.css 的 :root 只有 --ym-success / --ym-warning 兩個語意前景色，
     沒有 danger / info，也沒有任何底色與框線。這裡補齊四組。
     danger 的值收斂自 ym-v2.css:1011（商品頁 .text-danger 已在用的那組），
     不另創第五種紅 —— 站上原本散落 #a3243f / #b3263f / #b22440 / #9c2940 /
     #a22c2c / #8f243b / #9d2037 共七種紅。 */
  --ym-danger: #a3243f;
  --ym-danger-bg: #fff1f3;
  --ym-danger-line: #eeaebb;

  --ym-success-bg: #eef8f3;
  --ym-success-line: #bcdfd0;

  --ym-warning-bg: #fdf4ea;
  --ym-warning-line: #f0d4b5;

  /* 「提示」用品牌粉本身：它是最中性、出現頻率最高的一種，
     讓它直接長得像站上的其他粉色卡片。 */
  --ym-info: var(--ym-coral-dark);
  --ym-info-bg: #fff4f6;
  --ym-info-line: #e8cbd1;
}

/* ---------- 1. 共同骨架 ----------
   圓角、內距、字級與站上其他卡片同一套（--ym-radius-md、14px/1.6）。
   不設 padding-right：留給 ym-v2.css:1295 的 56px（有關閉鈕時）。 */
.ym-v2 .alert {
  position: relative;
  margin-bottom: 14px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 16px;
  border: 1px solid var(--ym-info-line);
  border-left-width: 3px;
  border-radius: var(--ym-radius-md);
  background: var(--ym-info-bg);
  color: #5a4046;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: var(--ym-shadow-xs);
}

/* 這些 alert 的圖示是 twig／common.js 直接寫在文字前面的 inline <i>，
   不是背景圖，所以只給間距與顏色，不動它的排版流。
   促銷提示條沒有圖示，少了這個選擇器也不會壞。 */
.ym-v2 .alert > .fa {
  margin-right: 7px;
  color: var(--ym-info);
}

.ym-v2 .alert a {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 2. 四種語意 ---------- */
.ym-v2 .alert-success {
  border-color: var(--ym-success-line);
  background: var(--ym-success-bg);
  color: #1f5c4b;
}
.ym-v2 .alert-success > .fa { color: var(--ym-success); }

.ym-v2 .alert-info {
  border-color: var(--ym-info-line);
  background: var(--ym-info-bg);
  color: #5a4046;
}
.ym-v2 .alert-info > .fa { color: var(--ym-info); }

.ym-v2 .alert-warning {
  border-color: var(--ym-warning-line);
  background: var(--ym-warning-bg);
  color: #7a4315;
}
.ym-v2 .alert-warning > .fa { color: var(--ym-warning); }

/* 錯誤：整組裡最重的一個。深一階的框線、粗一階的字、明確的紅字，
   確保它在四種通知裡第一眼就跳出來。 */
.ym-v2 .alert-danger {
  border-color: var(--ym-danger-line);
  background: var(--ym-danger-bg);
  color: var(--ym-danger);
  font-weight: 700;
  box-shadow: var(--ym-shadow-sm);
}
.ym-v2 .alert-danger > .fa { color: var(--ym-danger); }

/* ---------- 3. 關閉鈕 ----------
   位置與 44px 觸控靶由 ym-v2.css:1295-1298 負責（受 e2e 斷言保護），
   這裡只接管顏色與 hover，並補上原生 × 沒有的 focus 環。
   促銷提示條的 × 是字面字元且沒有 aria-label，所以焦點狀態要看得見。 */
.ym-v2 .alert > .close,
.ym-v2 .islpr-alert > .close {
  color: inherit;
  text-shadow: none;
  opacity: .5;
  border-radius: var(--ym-radius-xs);
}
.ym-v2 .alert > .close:hover,
.ym-v2 .islpr-alert > .close:hover { opacity: 1; }
.ym-v2 .alert > .close:focus-visible,
.ym-v2 .islpr-alert > .close:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* 促銷提示條沒有 alert-danger 之類的第二個 class 時，至少不要是裸底色 */
.ym-v2 .islpr-alert { border-radius: var(--ym-radius-md); }

/* ---------- 4. 表單欄位錯誤 ----------
   .text-danger 站上有七種紅，且只有商品頁（ym-v2.css:1010）做過造型。
   這裡不把商品頁那個「紅底提示塊」推到全站（結帳頁有自己的 .ve-text-danger，
   欄位密集，加底色會變得很吵），只把顏色與字重收斂成同一個 danger token。 */
.ym-v2 .text-danger {
  color: var(--ym-danger);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.ym-v2 .form-group .text-danger { margin-top: 5px; display: block; }

/* ---------- 5. 一頁式結帳的 vendor alert ----------
   checkout-base.min.css 自帶一套綠/黃/藍（#cdf3e2 / #fff4e6 / #e8f9f9），
   跟本檔的四色是兩套語言，結帳頁會同時看到。統一過來。 */
.ym-v2 .ve-alert--success { border-color: var(--ym-success-line); background: var(--ym-success-bg); color: #1f5c4b; }
.ym-v2 .ve-alert--info    { border-color: var(--ym-info-line);    background: var(--ym-info-bg);    color: #5a4046; }
.ym-v2 .ve-alert--warning { border-color: var(--ym-warning-line); background: var(--ym-warning-bg); color: #7a4315; }
.ym-v2 .ve-alert--danger  { border-color: var(--ym-danger-line);  background: var(--ym-danger-bg);  color: var(--ym-danger); font-weight: 700; }

/* ---------- 6. clearance 的規格未選提示 ----------
   原本是透明底 + 自己一種紅（clearance.css:537 的 #b22440）。
   留著它「靠右、不佔高度」的排版（那是刻意的，避免按鈕跳動），只換色。 */
.ym-v2 .cl-options__notice { color: var(--ym-danger); }

/* ---------- 7. 手機 ---------- */
@media (max-width: 767px) {
  .ym-v2 .alert {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 14px;
    border-radius: var(--ym-radius-sm);
    font-size: 13.5px;
  }
}