/* ============================================================================
   捐款流程三頁的樣式:Donate/Content、Donate/Signup、Donate/Checkdone

   為什麼要獨立一份
   ---------------------------------------------------------------------------
   這三頁用的 class(progressBar / amountBox / doneBox / atmBox …)在 common.css
   裡**一個都沒有**。common.css 是舊站的樣式表,它只認自己那套很長的選擇器鏈
   (`.ep .epContent #s2Box .containBox > .dataBox > .box0 > .tel` 這種),
   自己新開 class 等於完全沒有樣式 —— 畫面照樣 render、不報錯、CI 全綠。

   2026-09-11 用 tools/view-css-audit 掃出來:捐款四頁全中,而
   `/donate/content/6` 的募款進度條**根本不存在**(只剩一行純文字)。

   ⚠️ 不要把這些規則加進 common.css。那份是舊站的,cutover 之前兩邊共用,
      改它等於改線上舊站。這份獨立檔案由捐款三頁用 `@section styles` 各自載入。

   視覺沿用站上既有語彙:主色 #c9151e、hover #980107、圓角 5px、
   文字 #1c1c1c / #666、底色 #f3f2f0。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ⚠️ 容器寬度:必須給「明確的像素寬」,百分比沒有用

   `.rootBox`(版面的左欄,在 _Layout 裡)是 `float: left` 而且**沒有指定寬度**,
   所以它是 shrink-to-fit —— 寬度由內容決定。

   Donate/Content 之所以正常,是因為它有一張大圖把 `.rootBox` 撐到上限 750px。
   Signup / Checkdone 只有文字與表單,`.rootBox` 就縮成 441px,整頁被擠成一條。

   而 CSS 規範在算 shrink-to-fit 時**會忽略百分比寬度的子元素** ——
   所以 `.epContent { width: 100% }`(common.css 本來就有)撐不開它。
   2026-09-11 實測:加了 .epContent 這一層之後寬度完全沒變,量了才發現是這個原因。

   解法是給一個**定值**。這條規則只在捐款三頁生效(donate.css 只有它們載入),
   不影響其他頁面。
   --------------------------------------------------------------------------- */
.ep .epContent {
    width: 727px;       /* 對齊站上其他內容頁的欄寬 */
    max-width: 100%;    /* 視窗窄的時候讓它縮回來 */
}

/* ---------------------------------------------------------------------------
   共用:卡片
   --------------------------------------------------------------------------- */
.ep .donateCard,
.ep .donateFormBox,
.ep .doneBox,
.ep .atmBox,
.ep .receiptBox {
    background: #fff;
    border-radius: 5px;
    padding: 24px 3%;
    margin: 20px 0;
    text-align: left;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Donate/Content —— 募款進度
   --------------------------------------------------------------------------- */
.ep .epContent #s0Box .containBox > .progressBox {
    margin: 24px 0;
    text-align: left;
}

.ep .epContent #s0Box .containBox > .progressBox > .progressBar {
    width: 100%;
    height: 18px;
    background: #e6e3df;
    border-radius: 9px;
    overflow: hidden;   /* 讓 fill 的圓角被裁齊,尤其 100% 時 */
}

.ep .epContent #s0Box .containBox > .progressBox > .progressBar > .progressFill {
    height: 100%;
    background: #c9151e;
    border-radius: 9px 0 0 9px;
    transition: width .4s ease;
    min-width: 0;
}

.ep .epContent #s0Box .containBox > .progressBox > p {
    font-size: 16px;
    line-height: 1.8em;
    color: #666;
    margin-top: 10px;
}

.ep .epContent #s0Box .containBox > .progressBox > p strong {
    font-size: 22px;
    color: #c9151e;
    font-weight: bold;
}

/* ---------------------------------------------------------------------------
   Donate/Content —— 金額輸入
   --------------------------------------------------------------------------- */
.ep .epContent #s0Box .containBox > .donateForm {
    margin: 24px 0;
}

.ep .epContent #s0Box .containBox > .donateForm > .amountBox {
    background: #f3f2f0;
    border-radius: 5px;
    padding: 20px;
    text-align: left;
}

.ep .epContent #s0Box .containBox > .donateForm > .amountBox label {
    font-size: 18px;
    color: #1c1c1c;
    line-height: 2em;
    display: block;
}

.ep .epContent #s0Box .containBox > .donateForm > .amountBox input {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 50px;
    line-height: 50px;
    padding: 0 16px;
    margin-top: 6px;
    font-size: 20px;
    border: 1px solid #666;
    border-radius: 5px;
    box-sizing: border-box;
}

.ep .epContent #s0Box .containBox > .donateForm > .amountBox > .donateBtn {
    margin-top: 16px;
    min-width: 200px;
    height: 56px;
    line-height: 56px;
    padding: 0 30px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    background: #c9151e;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.ep .epContent #s0Box .containBox > .donateForm > .amountBox > .donateBtn:hover {
    background: #980107;
}

/* ---------------------------------------------------------------------------
   Donate/Content —— 已結束 / 尚未開放、錯誤、附註
   --------------------------------------------------------------------------- */
.ep .epContent #s0Box .containBox > .closedBox {
    background: #f3f2f0;
    border-radius: 5px;
    padding: 20px;
    margin: 24px 0;
    text-align: center;
}

.ep .epContent #s0Box .containBox > .closedBox p {
    font-size: 20px;
    color: #666;
    line-height: 1.8em;
}

.ep .epContent #s0Box .containBox > .errorBox {
    background: #fbeceb;
    border-left: 4px solid #c9151e;
    border-radius: 0 5px 5px 0;
    padding: 14px 18px;
    margin: 20px 0;
    text-align: left;
    font-size: 16px;
    line-height: 1.8em;
    color: #8c1a14;
}

.ep .epContent #s0Box .containBox > .endInfoBox,
.ep .epContent #s0Box .containBox > .otherInfoBox {
    margin: 20px 0;
    padding: 18px 20px;
    background: #f3f2f0;
    border-radius: 5px;
    text-align: left;
    font-size: 16px;
    line-height: 1.9em;
    color: #555;
}

/* ---------------------------------------------------------------------------
   Donate/Signup —— 填表
   這一頁沒有走 .epContent > #sNBox > .containBox 的骨架,直接掛在 .ep.pageBox 下,
   所以選擇器也從 .ep 起算。
   --------------------------------------------------------------------------- */
.ep .donateFormBox {
    max-width: 760px;
    margin: 20px auto;
}

.ep .donateFormBox > .summary {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0dcd7;
}

.ep .donateFormBox > .summary h3 {
    font-size: 22px;
    font-weight: bold;
    color: #1c1c1c;
    line-height: 1.6em;
}

.ep .donateFormBox > .summary p {
    font-size: 18px;
    color: #666;
    line-height: 2em;
}

.ep .donateFormBox > .summary p strong {
    font-size: 24px;
    color: #c9151e;
    font-weight: bold;
}

.ep .donateFormBox .validation {
    background: #fbeceb;
    border-left: 4px solid #c9151e;
    border-radius: 0 5px 5px 0;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.ep .donateFormBox .validation ul {
    list-style: disc;
    padding-left: 20px;
}

.ep .donateFormBox .validation li {
    font-size: 16px;
    line-height: 1.9em;
    color: #8c1a14;
}

.ep .donateFormBox fieldset {
    border: 1px solid #e0dcd7;
    border-radius: 5px;
    padding: 16px 20px 20px 20px;
    margin-bottom: 20px;
}

.ep .donateFormBox fieldset legend {
    font-size: 18px;
    font-weight: bold;
    color: #1c1c1c;
    padding: 0 8px;
}

.ep .donateFormBox fieldset label {
    display: block;
    font-size: 16px;
    color: #444;
    line-height: 2em;
    margin: 8px 0;
}

/* radio 的 label 要跟文字同一行,不要撐成整塊 */
.ep .donateFormBox fieldset label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ep .donateFormBox fieldset input[type="text"],
.ep .donateFormBox fieldset input[type="tel"],
.ep .donateFormBox fieldset input[type="email"],
.ep .donateFormBox fieldset textarea {
    display: block;
    width: 100%;
    padding: 0 14px;
    margin-top: 4px;
    font-size: 16px;
    border: 1px solid #999;
    border-radius: 5px;
    box-sizing: border-box;
}

.ep .donateFormBox fieldset input[type="text"],
.ep .donateFormBox fieldset input[type="tel"],
.ep .donateFormBox fieldset input[type="email"] {
    height: 46px;
    line-height: 46px;
}

.ep .donateFormBox fieldset textarea {
    min-height: 90px;
    line-height: 1.7em;
    padding: 10px 14px;
    resize: vertical;
}

.ep .donateFormBox > form > .donateActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.ep .donateFormBox > form > .donateActions > .backBtn {
    font-size: 18px;
    line-height: 52px;
    padding: 0 28px;
    color: #666;
    background: #f3f2f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
}

.ep .donateFormBox > form > .donateActions > .backBtn:hover {
    background: #e6e3df;
}

.ep .donateFormBox > form > .donateActions > .submitBtn {
    font-size: 20px;
    font-weight: bold;
    line-height: 52px;
    height: 52px;
    padding: 0 32px;
    color: #fff;
    background: #c9151e;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.ep .donateFormBox > form > .donateActions > .submitBtn:hover {
    background: #980107;
}

/* ---------------------------------------------------------------------------
   Donate/Checkdone —— 結果頁
   --------------------------------------------------------------------------- */
.ep .doneBox,
.ep .atmBox,
.ep .receiptBox {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.ep .doneBox {
    border-left: 6px solid #999;
}

.ep .doneBox.done-ok      { border-left-color: #2c7a4b; }
.ep .doneBox.done-pending { border-left-color: #d08a1d; }
.ep .doneBox.done-fail    { border-left-color: #c9151e; }

.ep .doneBox > h3 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6em;
    margin-bottom: 10px;
}

.ep .doneBox.done-ok > h3      { color: #2c7a4b; }
.ep .doneBox.done-pending > h3 { color: #a8660b; }
.ep .doneBox.done-fail > h3    { color: #c9151e; }

.ep .doneBox > p {
    font-size: 16px;
    line-height: 2em;
    color: #444;
}

.ep .atmBox > h3 {
    font-size: 20px;
    font-weight: bold;
    color: #1c1c1c;
    line-height: 1.6em;
    margin-bottom: 12px;
}

/* ⚠️ dl/dt/dd 在 common.css 裡只有 reset(margin / padding 歸零),
   沒有任何版面規則 —— 不補這段就是一行一行疊在一起。 */
.ep .atmBox > dl > dt {
    font-size: 15px;
    color: #666;
    line-height: 1.8em;
    margin-top: 12px;
}

.ep .atmBox > dl > dd {
    font-size: 16px;
    color: #1c1c1c;
    line-height: 1.8em;
}

/* 虛擬帳號要好讀、好抄:等寬字、放大、字距拉開 */
.ep .atmBox > dl > dd > code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 22px;
    letter-spacing: .08em;
    background: #f3f2f0;
    border-radius: 4px;
    padding: 6px 12px;
    display: inline-block;
    color: #1c1c1c;
    user-select: all;   /* 點一下就能整段選取 */
}

.ep .atmBox > .warning {
    margin-top: 16px;
    padding: 14px 18px;
    background: #fdf3e3;
    border-left: 4px solid #d08a1d;
    border-radius: 0 5px 5px 0;
    font-size: 15px;
    line-height: 1.9em;
    color: #6b4c10;
}

.ep .receiptBox {
    border-left: 6px solid #2c7a4b;
}

.ep .receiptBox p {
    font-size: 16px;
    line-height: 2em;
    color: #444;
}

.ep .receiptBox a { color: #c9151e; text-decoration: underline; }

.ep .doneActions {
    max-width: 760px;
    margin: 24px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.ep .doneActions > a {
    font-size: 18px;
    line-height: 52px;
    padding: 0 30px;
    border-radius: 5px;
    display: inline-block;
    color: #c9151e;
    background: #f3f2f0;
    border: 1px solid #c9151e;
    font-weight: bold;
}

.ep .doneActions > a:hover {
    background: #c9151e;
    color: #fff;
}

/* ---------------------------------------------------------------------------
   手機
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .ep .donateCard,
    .ep .donateFormBox,
    .ep .doneBox,
    .ep .atmBox,
    .ep .receiptBox {
        padding: 18px 5%;
    }

    .ep .epContent #s0Box .containBox > .donateForm > .amountBox input {
        max-width: 100%;
    }

    .ep .donateFormBox > form > .donateActions > .backBtn,
    .ep .donateFormBox > form > .donateActions > .submitBtn {
        width: 100%;
        text-align: center;
    }

    .ep .atmBox > dl > dd > code {
        font-size: 18px;
    }

    .ep .doneActions > a { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   欄位說明文字(Signup 的「公開榜單顯示方式」用來解釋財團法人法第 25 條)。

   新增 class 時一定要同時補樣式 —— 舊 common.css 沒有這個名字,
   漏了就是一段跟選項同大小、同顏色的字擠在中間,看起來像壞掉而不是說明。
   (tools/view-css-audit/audit.py 掃得到這類漏網的 class。)
   --------------------------------------------------------------------------- */
.ep .fieldHint {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.7;
    color: #7a7a7a;
}