/**
 * 報名頁 / 完成頁版面（plan-enroll-page-redesign-20261028；畫面 docs/design/enroll-page-redesign-20261028.html）。
 *
 * 這支只管「版面 + 第三方 CSS 隔離」：顏色 / 字型 / 字級 / 圓角 / 按鈕一律來自**前台站台 token**（PHP 掛 class，
 * Support\EnrollPageTokens：卡片 surface、課名 / 內文 typography + 色票、主鈕 / 套用鈕 button preset）—— ⛔ 抄殼的 --hz-shell-* 值（D4）。
 * 線 / 淡底用 currentColor 調（color-mix）；選中態（票種卡、勾選框、焦點）用 --hz-ep-accent（PHP 從 button.01 讀色票、
 * 寫在根元素的 style；讀不到就不輸出 → 退 currentColor）。
 *
 * 第三方隔離（D7 / TBD-2）：主題（Blocksy）與 Fluent Forms 的全站 CSS 會改 input / radio / checkbox / fieldset / legend →
 * 這裡逐元素重設；⛔ all: revert（會把 .hz-btn-* preset 也倒回瀏覽器預設，主鈕就沒樣式）。主鈕 / 套用鈕只管版面、⛔ 碰顏色。
 * 每條規則鎖在 `.hz-enroll-page` 底下、用 `:root body` 提高特異性；⛔ !important（D14：站主要能用頁面自訂段 / 全站 CSS 蓋掉，
 * 門牌是根元素的 data-hz-custom="enroll"，hz-ep-* class 對外穩定）。
 * EnrollmentPageService::render() 只在有短碼的頁 enqueue（handle hz-enroll-page）。
 */
.hz-enroll-page {
  /* 墨色 / 線 / 淡底：全部從站台的字色與 --hz-ep-accent 調出來（⛔ 定任何色值） */
  --hz-ep-ink: var(--hz-ep-accent, currentColor);
  --hz-ep-line: color-mix(in srgb, currentColor 16%, transparent);
  --hz-ep-line-strong: color-mix(in srgb, currentColor 30%, transparent);
  --hz-ep-muted: color-mix(in srgb, currentColor 68%, transparent);
  --hz-ep-tint: color-mix(in srgb, var(--hz-ep-ink) 10%, transparent);
  /* 圓角：欄位 / 票種卡跟著站台卡片（surface.01）的圓角走 */
  --hz-ep-radius-field: calc(var(--hz-surface-01-radius, 0.75rem) / 2);
  /* 字級：相對於內文 typography（em），站台換字級會一起縮放 */
  --hz-ep-text-note: 0.875em;
  --hz-ep-text-tag: 0.75em;
  --hz-ep-text-icon: 1.375em;
  --hz-ep-box: 1.125em;
  --hz-ep-radius-check: 0.25em;
  --hz-ep-check-stroke: 2px;
  /* 間距 */
  --hz-ep-space-page: 1.5rem;
  --hz-ep-space-card-y: 1.25rem;
  --hz-ep-space-card: 1.375rem;
  --hz-ep-space-section: 1rem;
  --hz-ep-space-field: 0.875rem;
  --hz-ep-space-row: 0.5rem;
  --hz-ep-space-gap: 0.75rem;
  --hz-ep-space-label: 0.375rem;
  --hz-ep-space-xs: 0.125rem;
  --hz-ep-space-sm: 0.25rem;
  /* 控制項內距（按鈕 / 欄位 / 膠囊 / 提示框本身的內部 padding） */
  --hz-ep-pad-btn-y: 0.75rem;
  --hz-ep-pad-btn-x: 1.125rem;
  --hz-ep-pad-input-y: 0.625rem;
  --hz-ep-pad-input-x: 0.75rem;
  --hz-ep-pad-tag-x: 0.625rem;
  --hz-ep-pad-notice-x: 1rem;
  /* 尺寸 / 線 */
  --hz-ep-max-width: 40rem;
  --hz-ep-day-label-width: 3.5rem;
  --hz-ep-check-size: 3rem;
  --hz-ep-hairline: 1px;
  --hz-ep-focus-ring: 2px;
  --hz-ep-radius-pill: 999px;
}

:root body .hz-enroll-page {
  box-sizing: border-box;
  max-width: var(--hz-ep-max-width);
  margin: 0 auto;
  padding: var(--hz-ep-space-page) 0;
  text-align: left;
}

:root body .hz-enroll-page *,
:root body .hz-enroll-page *::before,
:root body .hz-enroll-page *::after {
  box-sizing: border-box;
}

/* ---- 卡片（底色 / 圓角 / 陰影由 surface preset class 給） ---- */
:root body .hz-enroll-page .hz-ep-card {
  margin: 0 0 var(--hz-ep-space-section);
  padding: var(--hz-ep-space-card-y) var(--hz-ep-space-card);
}

/* 「‹ 看課程介紹」（plan-course-intro-tags-listing-filter-20261029 C3）：摘要卡上方、卡外、字小，不搶表單 */
:root body .hz-enroll-page .hz-ep-back {
  display: inline-block;
  margin: 0 0 var(--hz-ep-space-row);
  color: var(--hz-ep-muted);
  font-size: var(--hz-ep-text-note);
  text-decoration: underline;
}

:root body .hz-enroll-page .hz-ep-eyebrow {
  display: inline-block;
  margin: 0 0 var(--hz-ep-space-row);
  padding: var(--hz-ep-space-xs) var(--hz-ep-pad-tag-x);
  border-radius: var(--hz-ep-radius-pill);
  background: var(--hz-ep-tint);
  color: var(--hz-ep-ink);
  font-size: var(--hz-ep-text-tag);
  font-weight: 600;
}

/* 課名：字型 / 字級 / 色由 typography + 色票 class 給；詞不中斷（D8） */
:root body .hz-enroll-page .hz-ep-title {
  margin: 0 0 var(--hz-ep-space-gap);
  padding: 0;
  border: 0;
  background: none;
  text-transform: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

:root body .hz-enroll-page .hz-ep-days {
  margin: 0 0 var(--hz-ep-space-gap);
  padding: 0;
  border-top: var(--hz-ep-hairline) solid var(--hz-ep-line);
  list-style: none;
}

:root body .hz-enroll-page .hz-ep-days li {
  display: flex;
  gap: var(--hz-ep-space-gap);
  margin: 0;
  padding: var(--hz-ep-space-row) 0;
  border-bottom: var(--hz-ep-hairline) solid var(--hz-ep-line);
  font-variant-numeric: tabular-nums;
}

:root body .hz-enroll-page .hz-ep-day-label {
  min-width: var(--hz-ep-day-label-width);
  color: var(--hz-ep-muted);
}

:root body .hz-enroll-page .hz-ep-meta,
:root body .hz-enroll-page .hz-ep-lead {
  margin: 0 0 var(--hz-ep-space-row);
  color: var(--hz-ep-muted);
  font-size: var(--hz-ep-text-note);
}

/* ---- 表單：段落 / 欄名 / 文字欄（逐元素重設，蓋掉主題與 FF 的全站樣式） ---- */
:root body .hz-enroll-page .hz-ep-form p {
  margin: 0 0 var(--hz-ep-space-field);
}

:root body .hz-enroll-page .hz-ep-group {
  margin: 0 0 var(--hz-ep-space-section);
}

:root body .hz-enroll-page .hz-ep-form label,
:root body .hz-enroll-page .hz-ep-form legend {
  display: block;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: var(--hz-ep-text-note);
  font-weight: 600;
  line-height: inherit;
}

:root body .hz-enroll-page .hz-ep-form fieldset {
  min-width: 0;
  margin: 0 0 var(--hz-ep-space-field);
  padding: 0;
  border: 0;
  background: none;
}

:root body .hz-enroll-page .hz-ep-form legend {
  margin: 0 0 var(--hz-ep-space-label);
}

:root body .hz-enroll-page .hz-ep-form input:not([type="radio"]):not([type="checkbox"]),
:root body .hz-enroll-page .hz-ep-form select,
:root body .hz-enroll-page .hz-ep-form textarea {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: var(--hz-ep-space-label) 0 0;
  padding: var(--hz-ep-pad-input-y) var(--hz-ep-pad-input-x);
  border: var(--hz-ep-hairline) solid var(--hz-ep-line-strong);
  border-radius: var(--hz-ep-radius-field);
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
}

:root body .hz-enroll-page .hz-ep-form select option {
  color: initial;
}

:root body .hz-enroll-page .hz-ep-form input:focus-visible,
:root body .hz-enroll-page .hz-ep-form select:focus-visible,
:root body .hz-enroll-page .hz-ep-form textarea:focus-visible,
:root body .hz-enroll-page .hz-ep-form button:focus-visible,
:root body .hz-enroll-page .hz-ep-form summary:focus-visible {
  border-color: var(--hz-ep-ink);
  outline: var(--hz-ep-focus-ring) solid var(--hz-ep-ink);
  outline-offset: var(--hz-ep-hairline);
}

/* ---- radio / checkbox：自畫（瀏覽器預設 + 主題會把它拉成整行寬，修前實測 486px） ---- */
:root body .hz-enroll-page .hz-ep-form input[type="radio"],
:root body .hz-enroll-page .hz-ep-form input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: static;
  display: inline-grid;
  place-content: center;
  flex: none;
  float: none;
  width: var(--hz-ep-box);
  height: var(--hz-ep-box);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: var(--hz-ep-hairline) solid var(--hz-ep-line-strong);
  border-radius: var(--hz-ep-radius-check);
  background: transparent;
  box-shadow: none;
  opacity: 1;
  vertical-align: middle;
  cursor: pointer;
}

:root body .hz-enroll-page .hz-ep-form input[type="radio"] {
  border-radius: var(--hz-ep-radius-pill);
}

:root body .hz-enroll-page .hz-ep-form input[type="radio"]:checked {
  border-color: var(--hz-ep-ink);
  background: radial-gradient(circle, var(--hz-ep-ink) 45%, transparent 50%);
}

:root body .hz-enroll-page .hz-ep-form input[type="checkbox"]:checked {
  border-color: var(--hz-ep-ink);
}

:root body .hz-enroll-page .hz-ep-form input[type="checkbox"]:checked::before {
  content: "";
  width: 0.55em;
  height: 0.3em;
  border: solid var(--hz-ep-ink);
  border-width: 0 0 var(--hz-ep-check-stroke) var(--hz-ep-check-stroke);
  transform: translateY(-15%) rotate(-45deg);
}

/* 勾選列（同意 / 通知）：框 + 一句話，整列可點 */
:root body .hz-enroll-page .hz-ep-form .hz-ep-check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--hz-ep-space-row);
  font-size: inherit;
  font-weight: 400;
  cursor: pointer;
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-check-row input {
  margin-top: 0.2em;
}

/* ---- 票種：整張可點的卡（D7），radio 視覺上藏起來（仍可鍵盤操作），選中的卡亮墨色 ---- */
:root body .hz-enroll-page .hz-ep-form .hz-ep-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--hz-ep-space-gap);
  margin: 0 0 var(--hz-ep-space-row);
  padding: var(--hz-ep-pad-input-y) var(--hz-ep-pad-btn-x);
  border: var(--hz-ep-hairline) solid var(--hz-ep-line-strong);
  border-radius: var(--hz-ep-radius-field);
  font-size: inherit;
  font-weight: 400;
  cursor: pointer;
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-ticket input,
:root body .hz-enroll-page .hz-ep-form .hz-ep-choice input {
  position: absolute;
  width: var(--hz-ep-hairline);
  height: var(--hz-ep-hairline);
  opacity: 0;
  pointer-events: none;
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-ticket:has(input:checked) {
  border-color: var(--hz-ep-ink);
  background: var(--hz-ep-tint);
  box-shadow: inset 0 0 0 var(--hz-ep-hairline) var(--hz-ep-ink);
}

/* 選班（?course=）：滿了沒候補的班不能選 */
:root body .hz-enroll-page .hz-ep-form .hz-ep-ticket:has(input:disabled) {
  color: var(--hz-ep-muted);
  cursor: not-allowed;
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-ticket:has(input:focus-visible),
:root body .hz-enroll-page .hz-ep-form .hz-ep-choice:has(input:focus-visible) {
  outline: var(--hz-ep-focus-ring) solid var(--hz-ep-ink);
  outline-offset: var(--hz-ep-hairline);
}

:root body .hz-enroll-page .hz-ep-ticket-name {
  font-weight: 600;
}

:root body .hz-enroll-page .hz-ep-ticket-seats {
  grid-column: 1;
  color: var(--hz-ep-muted);
  font-size: var(--hz-ep-text-note);
}

:root body .hz-enroll-page .hz-ep-ticket-price {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 第 2～N 位：一位一組、上方一條線 */
:root body .hz-enroll-page .hz-ep-form .hz-ep-attendee {
  padding: var(--hz-ep-space-field) 0 0;
  border-top: var(--hz-ep-hairline) solid var(--hz-ep-line);
}

/* ---- 是非（兩段切換）/ 複選（膠囊）：radio / checkbox 藏起來，選中的膠囊亮墨色 ---- */
:root body .hz-enroll-page .hz-ep-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hz-ep-space-row);
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--hz-ep-space-sm) var(--hz-ep-pad-btn-x);
  border: var(--hz-ep-hairline) solid var(--hz-ep-line-strong);
  border-radius: var(--hz-ep-radius-pill);
  font-size: inherit;
  font-weight: 400;
  cursor: pointer;
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-choice:has(input:checked) {
  border-color: var(--hz-ep-ink);
  background: var(--hz-ep-tint);
  color: var(--hz-ep-ink);
  font-weight: 600;
}

/* ---- 頂部標價（D16 上下各一：只標價 —— 早鳥時劃線原價 + 早鳥價 + 早鳥到期；⛔ 總額） ---- */
:root body .hz-enroll-page .hz-ep-price {
  margin: 0 0 var(--hz-ep-space-row);
  font-variant-numeric: tabular-nums;
}

:root body .hz-enroll-page .hz-ep-price .hz-ep-was {
  color: var(--hz-ep-muted);
}

:root body .hz-enroll-page .hz-ep-price .hz-ep-early {
  color: var(--hz-ep-ink);
  font-size: var(--hz-ep-text-note);
}

/* ---- 底部「要付」摘要（D16）：主鈕正上方；品項 / 折扣碼 / 要付各一列、左字右錢 ---- */
:root body .hz-enroll-page .hz-ep-pay {
  margin: var(--hz-ep-space-section) 0 0;
  padding: var(--hz-ep-space-field) 0 0;
  border-top: var(--hz-ep-hairline) solid var(--hz-ep-line);
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-pay-row {
  display: flex;
  justify-content: space-between;
  gap: var(--hz-ep-space-gap);
  margin: 0 0 var(--hz-ep-space-sm);
  font-variant-numeric: tabular-nums;
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-pay-discount {
  color: var(--hz-ep-ink);
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-pay-total {
  margin: var(--hz-ep-space-row) 0 var(--hz-ep-space-sm);
  padding: var(--hz-ep-space-row) 0 0;
  border-top: var(--hz-ep-hairline) solid var(--hz-ep-line);
  font-weight: 600;
}

:root body .hz-enroll-page .hz-ep-pay [hidden] {
  display: none;
}

/* ---- 折扣碼：隱性（D5），<details> 預設收合，摘要只是一行小字 ---- */
:root body .hz-enroll-page .hz-ep-coupon {
  margin: 0 0 var(--hz-ep-space-field);
  padding: 0;
  border: 0;
}

:root body .hz-enroll-page .hz-ep-coupon-toggle {
  display: inline;
  color: var(--hz-ep-muted);
  font-size: var(--hz-ep-text-note);
  text-decoration: underline;
  list-style: none;
  cursor: pointer;
}

:root body .hz-enroll-page .hz-ep-coupon-toggle::-webkit-details-marker {
  display: none;
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-coupon-row {
  display: flex;
  align-items: stretch;
  gap: var(--hz-ep-space-row);
  margin: var(--hz-ep-space-row) 0 0;
}

:root body .hz-enroll-page .hz-ep-form .hz-ep-coupon-row input {
  flex: 1;
  margin: 0;
}

:root body .hz-enroll-page .hz-ep-coupon-apply {
  flex: none;
  cursor: pointer;
}

:root body .hz-enroll-page .hz-ep-coupon-result p {
  margin: var(--hz-ep-space-sm) 0 0;
  font-size: var(--hz-ep-text-note);
}

/* ---- 主鈕：只有一顆、滿寬（D6）；顏色 / 圓角 / 內距 / 字型全由 button preset class 給，這裡只管版面 ---- */
:root body .hz-enroll-page .hz-ep-submit {
  margin: var(--hz-ep-space-card-y) 0 0;
}

:root body .hz-enroll-page .hz-ep-btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}

:root body .hz-enroll-page .hz-ep-waitlist-note {
  margin: var(--hz-ep-space-row) 0 0;
  text-align: center;
}

/* ---- 提示 / 完成頁 ---- */
:root body .hz-enroll-page .hz-ep-notice {
  margin: 0 0 var(--hz-ep-space-section);
  padding: var(--hz-ep-pad-btn-y) var(--hz-ep-pad-notice-x);
  border: var(--hz-ep-hairline) solid var(--hz-ep-ink);
  border-radius: var(--hz-ep-radius-field);
  background: var(--hz-ep-tint);
  color: inherit;
  font-size: var(--hz-ep-text-note);
}

:root body .hz-enroll-page .hz-ep-notice a {
  color: var(--hz-ep-ink);
  font-weight: 600;
  text-decoration: underline;
}

:root body .hz-enroll-page .hz-ep-done {
  text-align: center;
}

:root body .hz-enroll-page .hz-ep-check {
  display: grid;
  place-items: center;
  width: var(--hz-ep-check-size);
  height: var(--hz-ep-check-size);
  margin: var(--hz-ep-space-sm) auto var(--hz-ep-space-gap);
  border-radius: var(--hz-ep-radius-pill);
  background: var(--hz-ep-tint);
  color: var(--hz-ep-ink);
  font-size: var(--hz-ep-text-icon);
  font-weight: 700;
}

:root body .hz-enroll-page .hz-ep-info {
  margin: var(--hz-ep-space-section) 0;
  padding: var(--hz-ep-space-section) var(--hz-ep-pad-btn-x);
  border: var(--hz-ep-hairline) solid var(--hz-ep-line);
  border-radius: var(--hz-ep-radius-field);
  text-align: left;
}

:root body .hz-enroll-page .hz-ep-info-title {
  margin: 0 0 var(--hz-ep-space-row);
  font-weight: 600;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

:root body .hz-enroll-page .hz-ep-actions {
  margin: 0;
}