/* ============================================================
   KLAS × Paid Memberships Pro 前台頁面 DS 重皮
   涵蓋：/membership-checkout/、確認頁、收據、等級頁、帳單頁
   顏色／字體／間距一律跟 KLAS Master DS tokens
   版本：1.6.6
   部署：public_html/wp-content/themes/klas-child-theme/klas-pmpro.css
   ============================================================ */

/* ── DS tokens（本檔自足，唔依賴其他 stylesheet） ── */
body .pmpro {
  --k-gray-0: #FFFFFF;
  --k-gray-1: #F6F7F8;
  --k-gray-2: #EDEEF1;
  --k-gray-3: #E2E4E8;
  --k-ink:    #17191E;
  --k-sec:    #5A6068;
  --k-ter:    #6B7178;
  --k-body:   #3D424A;   /* = 首頁 .fp-st-p 內文色 */
  --k-border: #E2E4E8;
  --k-blue:   #0057FF;
  --k-blue-h: #0046CC;
  --k-blue-50:#EEF3FF;
  --k-blue-300:#93B4FF;
  --k-blue-ink:#0A2D6E;
  --k-adv:    #6366F1;
  --k-r-sm:   8px;
  --k-r-md:   12px;
  --k-r-lg:   16px;
  --k-r-pill: 999px;
  --k-shadow: 0 1px 3px rgba(16,19,24,.06), 0 1px 2px rgba(16,19,24,.04);
  --k-font:   'Outfit', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, sans-serif;
  /* DS：標題嘅拉丁字用 Montserrat（同首頁 --fp-font-display 一致），中文用 Noto Sans TC Black。
     Outfit 冇 900 字重，中文標題入面嘅英文會變合成粗體，同旁邊嘅中文字對唔上 */
  --k-font-head: 'Montserrat', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, sans-serif;

  /* 蓋過 PMPro 自己嘅變數，令未明確覆寫嘅元件都跟 KLAS */
  --pmpro--color--accent: #0057FF;
  --pmpro--color--base: #FFFFFF;
  --pmpro--color--base-2: #EDEEF1;
  --pmpro--color--contrast: #17191E;
  --pmpro--color--border: #E2E4E8;
  --pmpro--color--border--variation: #E2E4E8;
  --pmpro--base--border-radius: 16px;
  --pmpro--base--spacing--small: 12px;
  --pmpro--base--spacing--medium: 20px;
  --pmpro--base--spacing--large: 32px;
}

[data-theme="dark"] body .pmpro {
  --k-gray-0: #25282E;
  --k-gray-1: #1C1E22;
  --k-gray-2: #202329;
  --k-gray-3: rgba(255,255,255,.24);
  --k-ink:    #F4F6FA;
  --k-sec:    #DDE1EA;
  --k-ter:    #B4BAC5;
  --k-body:   #DDE1EA;
  --k-border: rgba(255,255,255,.24);
  --k-blue:   #2E7BFF;
  --k-blue-h: #4D8DFF;
  --k-blue-50:rgba(46,123,255,.16);
  --k-blue-300:rgba(46,123,255,.42);
  --k-blue-ink:#CFE0FF;
  --k-adv:    #C4B5FD;
  --k-shadow: none;
  --pmpro--color--accent: #2E7BFF;
  --pmpro--color--base: #25282E;
  --pmpro--color--base-2: #202329;
  --pmpro--color--contrast: #F4F6FA;
  --pmpro--color--border: rgba(255,255,255,.24);
  /* ⚠️ 之前漏咗呢個變數，深色模式下 .pmpro_card_actions 用返淺色線 #E2E4E8，
     喺深色卡上面好突兀。PMPro 有兩個邊框變數，兩個都要覆寫。 */
  --pmpro--color--border--variation: rgba(255,255,255,.24);
}

/* ── 頁面底色 + 內容區間距（Header 對下 == Footer 對上 = 72px） ── */
body.pmpro-checkout,
body.pmpro-account,
body.pmpro-billing,
body.pmpro-invoice,
body.pmpro-levels,
body.pmpro-confirmation { background: #F6F7F8; }

[data-theme="dark"] body.pmpro-checkout,
[data-theme="dark"] body.pmpro-account,
[data-theme="dark"] body.pmpro-billing,
[data-theme="dark"] body.pmpro-invoice,
[data-theme="dark"] body.pmpro-levels,
[data-theme="dark"] body.pmpro-confirmation { background: #1C1E22; }

body .pmpro {
  box-sizing: border-box;
  max-width: 1160px;   /* 同 page-account.php 一致，內距 40px 對齊 nav logo */
  margin: 0 auto;
  padding: 72px 40px;  /* Header 對下 == Footer 對上 */
  font-family: var(--k-font);
  color: var(--k-ink);
  font-size: 16px;
  line-height: 1.75;
}
body .pmpro *, .pmpro *::before, .pmpro *::after { box-sizing: border-box; }

/* ── 兩欄：左表單、右訂單摘要 ── */
body.klas-pmpro-split .pmpro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;     /* 兩欄各自跟內容高度，唔強拉同高 */
}
/* ⚠️ 之前用 align-items:stretch + .kpc-trust{margin-top:auto} 迫兩欄底邊對齊，
   實測喺摘要卡中間撐出 287px 空洞（「這個方案包含」尾 y=789，信任清單頭 y=1076）。
   底邊對齊唔值得換一個窿：兩欄改為各自跟內容高度，摘要卡 sticky 跟住捲。 */
body.klas-pmpro-split .pmpro > section {
  grid-column: 1; grid-row: 1; min-width: 0;
  align-self: start;
  display: flex;
  margin-bottom: 0;    /* PMPro 預設 64px，會令底部空間變 136px ≠ 頂部 72px */
}
body.klas-pmpro-split #pmpro_form {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
}
/* CTA 對上空間：舊版用 margin-top:auto 迫兩欄底部對齊，
   結果喺左欄較短嗰陣撐出成 100px 空隙。左欄冇底色，
   收窄之後見唔到差異，所以改用固定 40px（原本嘅四成）。 */
body.klas-pmpro-split .pmpro_form_submit {
  margin-top: 0;
  padding-top: 40px;
}
/* 用戶指定：訂單摘要唔跟住捲（唔用 sticky），就噉停喺原位 */
body.klas-pmpro-split .kpc-side {
  grid-column: 2; grid-row: 1;
  align-self: start;
  position: static;
}

/* ── 結帳頁專用窄 header（只有 logo，跟 /earlybird 嘅 52px 條）──
   forum.css 嘅 `body.klas-has-header{padding-top:64px!important}` 特異度加 !important，
   所以呢度都要用 !important 先蓋得到。 */
body.pmpro-checkout .klas-header-slim { height: 52px; }
body.pmpro-checkout.klas-has-header { padding-top: 52px !important; }
body.admin-bar.pmpro-checkout.klas-has-header { padding-top: 52px !important; }

/* 摘要卡已列出價格，主欄嘅重複價目行收起 */
body.klas-pmpro-split #pmpro_level_cost,
body.klas-pmpro-split .pmpro_level_expiration_text { display: none; }

/* ── 卡片 ── */
body .pmpro .pmpro_card {
  background: var(--k-gray-0);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-lg);
  box-shadow: var(--k-shadow);
  margin: 0 0 20px;
  padding: 32px;
  /* 兩張卡內容行數唔同（一段 vs 兩段），唔設下限會差成十幾 px，
     睇落似兩個唔同組件。176px 令一般情況下兩張卡等高，內容多過就自然撐開。 */
  min-height: 176px;
}
body .pmpro .pmpro_card:last-of-type { margin-bottom: 0; }

body .pmpro .pmpro_card_title,
body .pmpro .pmpro_card h2,
body .pmpro .pmpro_card h3,
body .pmpro .pmpro_form_legend,
body .pmpro .pmpro_form_heading {
  font-family: var(--k-font-head);
  font-size: 24px;          /* = 首頁 .fp-st-t 卡片標題 */
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.48px;
  color: var(--k-ink);
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  text-transform: none;
}
/* PMPro 自己有 `.pmpro_section:has(.pmpro_form) .pmpro_card_content{padding-top:32px}`
   同 `.pmpro_card_title + .pmpro_card_content{padding-top:12px}` 兩條規則，
   令「會籍資料」同「帳戶資料」兩張卡標題上方間距唔一致（12px vs 32px）。
   佢哋特異度高過一般覆寫，所以要 !important 一次過歸零，間距全部交返卡片自己控制。 */
body .pmpro .pmpro_card .pmpro_card_content,
body .pmpro .pmpro_card_title + .pmpro_card_content { padding: 0 !important; }
body .pmpro .pmpro_card_content > p { margin: 0 0 14px; }
body .pmpro .pmpro_card_content > p:last-child { margin-bottom: 0; }
/* PMPro 原生喺呢個欄落 rgba(0,0,0,.04) 底色 + 左右 32px 內距 + 直角，
   結果「按此更改」「按此登入」睇落似 disabled 欄，卡底仲出方角。
   改為淨係留一條分隔線，跟返卡片自己嘅內距。 */
body .pmpro .pmpro_card_actions {
  margin-top: 22px;
  padding: 20px 0 0 !important;
  background: transparent !important;
  border-top: 1px solid var(--k-border);
  border-radius: 0;
}

body .pmpro p,
body .pmpro li,
body .pmpro td,
body .pmpro th { font-size: 16px; line-height: 1.75; color: var(--k-body); }
/* 斷行規則：每行 20–30 個中文字。之前漏咗呢段，正文一行去到 43 字。
   表格同摘要卡自己有闊度限制，所以只鎖段落。 */
body .pmpro p,
body .pmpro .kpc-tt { max-width: 24em; line-break: strict; word-break: normal; text-wrap: pretty; }
body .pmpro .kpc-terms li { line-break: strict; word-break: normal; text-wrap: pretty; }
/* 內文連結先有底線，掣（.kbtn）唔可以有 */
body .pmpro a:not(.kbtn) { color: var(--k-blue); text-decoration: underline; text-underline-offset: 3px; }
body .pmpro a:not(.kbtn):hover { color: var(--k-blue-h); }
body .pmpro a.kbtn { text-decoration: none; }
body .pmpro strong { font-weight: 600; }

/* ── 表單 ── */
body .pmpro .pmpro_form_fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  background: var(--k-gray-0);
  border-radius: var(--k-r-lg);
}
body .pmpro .pmpro_form_fields { margin: 0; }
body .pmpro .pmpro_form_field { margin: 0 0 20px; }
body .pmpro .pmpro_form_field:last-child { margin-bottom: 0; }

body .pmpro .pmpro_form_label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--k-body);   /* 表單 label 跟正文色 #3D424A，對比度高過 --k-sec */
  margin: 0 0 8px;
  letter-spacing: 0;
  text-transform: none;
}
body .pmpro .pmpro_form_hint,
body .pmpro .pmpro_form_field small { font-size: 14px; color: var(--k-ter); }

body .pmpro input[type="text"],
body .pmpro input[type="email"],
body .pmpro input[type="password"],
body .pmpro input[type="tel"],
body .pmpro input[type="number"],
body .pmpro select,
body .pmpro textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--k-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--k-ink);
  background: var(--k-gray-0);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-sm);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
body .pmpro input::placeholder,
body .pmpro textarea::placeholder { color: var(--k-ter); opacity: 1; }
body .pmpro input:focus,
body .pmpro select:focus,
body .pmpro textarea:focus {
  outline: none;
  border-color: var(--k-blue);
  box-shadow: 0 0 0 3px rgba(0,87,255,.14);
}
body .pmpro .pmpro_form_fields-inline {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
body .pmpro .pmpro_form_fields-inline input[type="text"] { flex: 1 1 200px; width: auto; }

/* ── 按鈕 ── */
body .pmpro .pmpro_btn,
body .pmpro input[type="submit"].pmpro_btn,
body .pmpro button.pmpro_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--k-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 24px;
  border-radius: var(--k-r-pill);
  border: 1px solid transparent;
  background: var(--k-gray-2);
  color: var(--k-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, transform .1s;
}
body .pmpro .pmpro_btn:hover { background: var(--k-gray-3); color: var(--k-ink); }
body .pmpro .pmpro_btn:active { transform: translateY(1px); }

/* 全頁唯一實心主藍：結帳提交掣 */
/* 尺寸完全跟 /cart/ 嘅 .kbtn.lg：15px / 13px 28px / 高 41 */
body .pmpro .pmpro_btn-submit-checkout,
body .pmpro input#pmpro_btn-submit {
  background: var(--k-blue);
  border-color: var(--k-blue);
  color: #fff;
  padding: 13px 28px;
  font-size: 15px;
  letter-spacing: -.1px;
}
body .pmpro .pmpro_btn-submit-checkout:hover,
body .pmpro input#pmpro_btn-submit:hover { background: var(--k-blue-h); border-color: var(--k-blue-h); color: #fff; }

/* 顯示密碼掣：PMPro 用 .pmpro_btn 出，會食到上面嘅灰底膠囊樣式。
   佢其實係一個 icon 開關，唔應該似個掣。 */
/* ⚠️ 一定要寫 button.xxx：上面基本掣規則有 `body .pmpro button.pmpro_btn`（0,2,2），
   淨係寫 class（0,2,1）會輸，灰底照樣出返嚟。 */
body .pmpro button.pmpro_btn-plain,
body .pmpro button.pmpro_btn-password-toggle,
body .pmpro .pmpro_btn-password-toggle {
  background: none;
  border: 0;
  padding: 4px 6px;
  color: var(--k-ter);
  font-size: 14px;
  border-radius: var(--k-r-sm);
}
/* 用戶指定：hover 淨係變藍，唔可以放大
   ⚠️ 踩過嘅坑（2026-07-29）：PMPro variation_1.css 有一條 selector list
   同時包住 `button` 同 `button:hover`，入面落咗 `font-size:16px; padding:0`，
   特異度 (0,3,1) 高過上面條基本規則 (0,2,2)。
   結果 hover 一刻字級由 14px 跳去 16px、padding 變 0，睇落就係「變大」。
   所以 hover 態一定要連 font-size／padding／line-height 一齊寫返，唔可以淨係寫顏色。 */
/* PMPro 同一條 selector list 除咗 :hover 仲有 :focus 同 :active，
   所以撳完之後個掣仍然「大住」，要再撳一下失焦先縮返。三個狀態都要鎖死同一組尺寸。 */
body .pmpro button.pmpro_btn-plain:hover,
body .pmpro button.pmpro_btn-plain:focus,
body .pmpro button.pmpro_btn-plain:active,
body .pmpro button.pmpro_btn-password-toggle:hover,
body .pmpro button.pmpro_btn-password-toggle:focus,
body .pmpro button.pmpro_btn-password-toggle:active {
  background: none;
  color: var(--k-blue);
  transform: none;
  font-size: 14px;
  padding: 4px 6px;
  line-height: 1;
  box-shadow: none;   /* PMPro focus 落咗一個 0.2rem 藍光環，同 KLAS 唔夾 */
}
/* 用滑鼠撳唔會見到框，但鍵盤 Tab 過去一定要見到（無障礙） */
body .pmpro button.pmpro_btn-plain:focus-visible,
body .pmpro button.pmpro_btn-password-toggle:focus-visible {
  outline: 2px solid var(--k-blue);
  outline-offset: 2px;
}
/* PMPro 原生落 margin-top:8px，令「顯示密碼」跌低過「密碼」／「確認密碼」兩個 label 8px。
   兩者高度都係 28px，margin 歸零之後上下邊同 label 完全對齊。 */
body .pmpro .pmpro_form_field-password-toggle { margin-top: 0; align-self: start; }
body .pmpro .pmpro_btn-password-toggle svg { width: 18px; height: 18px; vertical-align: -4px; }

/* 折扣碼「使用」掣：中性次要 */
body .pmpro #other_discount_code_button { background: var(--k-gray-2); color: var(--k-ink); padding: 13px 24px; }
body .pmpro #other_discount_code_toggle {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 16px;
  color: var(--k-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
body .pmpro #other_discount_code_p { font-size: 16px; color: var(--k-sec); }

body .pmpro .pmpro_form_submit { margin-top: 36px; }
body.klas-pmpro-split .pmpro_form_submit { margin-top: 0; }
body .pmpro #pmpro_processing_message { font-size: 16px; color: var(--k-blue); margin-top: 12px; }

/* ── 訊息 / 錯誤 ── */
body .pmpro .pmpro_message {
  border-radius: var(--k-r-md);
  border: 1px solid var(--k-blue-300);
  border-left: 3px solid var(--k-blue);
  background: var(--k-blue-50);
  color: var(--k-blue-ink);
  font-size: 16px;
  padding: 14px 18px;
  margin: 0 0 20px;
}
body .pmpro .pmpro_error {
  border-color: rgba(239,68,68,.45);
  border-left-color: #EF4444;
  background: rgba(239,68,68,.08);
  color: #8A1F24;
}
[data-theme="dark"] body .pmpro .pmpro_error { color: #FBC4C7; }
/* 系統成功訊息一律機構藍（CLAUDE.md 系統訊息規則），唔用綠色；錯誤訊息先維持語意紅 */
body .pmpro .pmpro_success {
  border-color: rgba(0,87,255,.35);
  border-left-color: var(--k-blue);
  background: var(--k-blue-50);
  color: var(--k-blue-ink);
}
[data-theme="dark"] body .pmpro .pmpro_success { color: #CFE0FF; }

/* ── 訂單摘要（右欄） ── */
.kpc-side { min-width: 0; }
.kpc-card {
  background: var(--k-gray-0);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-lg);
  box-shadow: var(--k-shadow);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.kpc-t {
  font-family: var(--k-font-head);
  font-size: 24px;          /* = 首頁 .fp-st-t */
  font-weight: 900;
  letter-spacing: -0.48px;
  line-height: 1.3;
  color: var(--k-ink);
  margin: 0 0 20px;
}
.kpc-rows { margin: 0 0 4px; }
.kpc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  font-size: 16px;
  border-bottom: 1px solid var(--k-border);
}
.kpc-row:first-child { padding-top: 0; }
.kpc-row-k { color: var(--k-sec); flex: 0 0 auto; }
.kpc-row-v { color: var(--k-ink); font-weight: 500; text-align: right; }
.kpc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0 0;
  border-bottom: 0;
}
.kpc-total .kpc-row-k { font-size: 16px; color: var(--k-ink); font-weight: 600; }
.kpc-total .kpc-row-v { font-size: 24px; font-weight: 700; letter-spacing: -0.6px; }

.kpc-tier {
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--k-r-pill);
  background: var(--k-blue-50);
  color: var(--k-blue);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
}
.kpc-tier.is-adv { background: rgba(99,102,241,.12); color: var(--k-adv); }

.kpc-eb {
  display: block;
  margin: 16px 0 0;
  padding: 11px 14px;
  border-radius: var(--k-r-sm);
  background: var(--k-blue-50);
  color: var(--k-blue-ink);
  font-size: 16px;
  line-height: 1.6;
}

.kpc-incl { margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--k-border); }
.kpc-incl-t { font-size: 16px; font-weight: 700; color: var(--k-ink); margin: 0 0 12px; }
.kpc-incl ul { list-style: none; margin: 0; padding: 0; }
.kpc-incl li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--k-body);
  margin-bottom: 9px;
}
.kpc-incl li:last-child { margin-bottom: 0; }
.kpc-incl li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--k-blue);
}

.kpc-trust { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--k-border); }
.kpc-trust li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.7;
  color: var(--k-sec);
  margin-bottom: 12px;
}
.kpc-trust li:last-child { margin-bottom: 0; }
.kpc-trust svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  stroke: var(--k-blue);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpc-trust .kpc-tt { flex: 1 1 auto; min-width: 0; }

/* 付款條款（提交掣上方）
   ⚠️ 舊版係一個 360px 闊嘅灰底方盒，擺喺 688px 卡片下面，闊度對唔上，
   睇落似孤兒組件（呢個就係「設計唔統一」最搶眼嗰項）。
   改為無底色細明字，用一條 688px 全闊分隔線做對齊，
   文字本身仍然受 `body .pmpro p{max-width:24em}` 限制喺 20–30 字一行。 */
.kpc-terms {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--k-sec);
  font-size: 16px;
  line-height: 1.8;
  padding: 24px 0 0;
  margin: 0;
  max-width: none;
}
/* 要寫足 `body .pmpro` 前綴，否則被 `body .pmpro p{color:var(--k-body)}` 蓋過，
   標題會同正文同色，睇唔出係標題 */
body .pmpro .kpc-terms-t {
  font-size: 16px;
  font-weight: 700;
  color: var(--k-ink);
  margin: 0 0 10px;
  max-width: none;
}
.kpc-terms ul { list-style: none; margin: 0; padding: 0; }
.kpc-terms li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--k-sec);
  /* 28em ≈ 28 個中文字一行，喺 20–30 字上限內，又唔會太貼左邊留一大片白 */
  max-width: 28em;
}
.kpc-terms li:last-child { margin-bottom: 0; }
.kpc-terms li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--k-blue-300);
}

/* ── 表格（收據 / 帳戶頁） ── */
body .pmpro table {
  width: 100%;
  border-collapse: collapse;
  background: var(--k-gray-0);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-lg);
  overflow: hidden;
  font-size: 16px;
}
body .pmpro table th,
body .pmpro table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--k-border);
  text-align: left;
}
body .pmpro table thead th {
  font-size: 16px;
  font-weight: 600;
  color: var(--k-sec);
  background: var(--k-gray-1);
}
body .pmpro table tr:last-child td { border-bottom: 0; }

/* ── 手機 ── */
@media (max-width: 1024px) {
  body.klas-pmpro-split .pmpro { grid-template-columns: minmax(0, 1fr); }
  body.klas-pmpro-split .pmpro > section { display: block; }
  body.klas-pmpro-split .pmpro_form_submit { margin-top: 36px; padding-top: 0; }
  body .pmpro .pmpro_card { min-height: 0; }
  .kpc-card { height: auto; }
  .kpc-trust { margin-top: 22px; }
  body.klas-pmpro-split .pmpro > section { grid-column: 1; grid-row: 2; }
  body.klas-pmpro-split .kpc-side { grid-column: 1; grid-row: 1; position: static; }
}
@media (max-width: 600px) {
  .pmpro { padding: 48px 20px; }
  .pmpro .pmpro_card { padding: 24px 20px; }
  .kpc-card { padding: 22px 20px; }
  .pmpro .pmpro_form_fields-inline { flex-direction: column; }
  .pmpro .pmpro_form_fields-inline input[type="text"] { flex: 1 1 auto; width: 100%; }
  .pmpro #other_discount_code_button { width: 100%; }
}

/* ── 降級攔截頁（第一學年封鎖 / 第二學年確認）────────────────── */
.kpc-gate {
  max-width: 640px;
  background: var(--k-gray-0);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-lg);
  box-shadow: var(--k-shadow);
  padding: 40px;
}
.kpc-gate-t {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.48px;
  color: var(--k-ink);
  margin: 0 0 20px;
}
.kpc-gate-p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--k-body);
  margin: 0 0 16px;
}
.kpc-gate-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 20px 0 0;
  border-top: 1px solid var(--k-border);
}
.kpc-gate-list li {
  position: relative;
  font-size: 16px;
  line-height: 1.75;
  color: var(--k-body);
  padding-left: 22px;
  margin-bottom: 12px;
}
.kpc-gate-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--k-blue);
}
.kpc-gate-act {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--k-border);
}
.kpc-gate-cancel {
  font-size: 16px;
  color: var(--k-sec);
  text-decoration: none;
}
.kpc-gate-cancel:hover { color: var(--k-ink); text-decoration: underline; }

@media (max-width: 600px) {
  .kpc-gate { padding: 26px 22px; }
  .kpc-gate-act { gap: 14px; }
}

/* 變更失敗訊息 */
.kpc-gate-err {
  border: 1px solid rgba(239,68,68,.45);
  border-left: 3px solid #EF4444;
  background: rgba(239,68,68,.08);
  color: #8A1F24;
  border-radius: var(--k-r-md, 12px);
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
}
[data-theme="dark"] .kpc-gate-err { color: #FBC4C7; }