/* ============================================================
   coach-register  —  教練招募申請表(website/coach/register.php)   〔單元〕
   視覺比照內文頁(article.css):淺灰底 + 白底圓角區塊、主色、膠囊按鈕
   只作用於 <main class="coach-register-page">;
   舊的 recruit.css / new_css/coach-reg.css 仍會載入,這裡的選擇器都多帶一層
   .coach-register-page 來蓋過它們,本檔需排在它們之後載入(由 register.php 自己引入)
   JS 會用到的 class(.recruit-major-* / .recruit-select / .skill-item …)都保留,只改外觀
   主題色用 blocks/web-base.css 的 --theme 系列
   ============================================================ */

.coach-register-page {
	/* 表單主要字級:欄位標題、訓練專長的類別標題、輸入框與下拉的字、placeholder、欄位旁的說明文字
	   全部用這一個值,才會一致;電腦、手機都是 16px(和文章內頁的內文同級)。
	   不要小於 16px:頁面的縮放鎖定哪天拿掉,iOS 點到小於 16px 的輸入框會自動放大畫面。
	   次要字級是固定的:膠囊選項與小按鈕 14px、標題後的說明與錯誤訊息 13px */
	--cr-label-size: 16px;
	--cr-border: #ddd;
	--cr-error: #d93025;
	background: #f5f5f5
}

.coach-register-page .recruit-banners img {
	display: block;
	width: 100%
}

.coach-register-page .stars {
	color: var(--theme) !important;
	font-style: normal
}

/* ---------- 標題區(比照 .inside-title:白底 + 下緣細線) ---------- */

.coach-register-page .cr-page-head {
	background: #fff;
	padding: 30px 16px 14px;
	text-align: center
}

.coach-register-page .cr-page-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	color: #4d4d4d;
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.4
}

.coach-register-page .cr-page-title img {
	height: 34px
}

.coach-register-page .cr-page-desc {
	margin: 8px 0 0;
	color: #888;
	font-size: 14px;
	line-height: 1.6
}

/* ---------- 版面與白底區塊 ---------- */

/* 表單欄位不需要鋪滿 1200px,收窄比較好讀 */
.coach-register-page .cr-container {
	width: auto;
	max-width: 920px;
	margin: 0 auto;
	padding: 30px 16px 60px;
	box-sizing: border-box
}

.coach-register-page .cr-block {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	box-sizing: border-box;
	padding: 40px;
	margin-bottom: 24px
}

.coach-register-page .cr-block-head {
	padding-bottom: 20px;
	margin-bottom: 28px;
	border-bottom: 1px solid #eee
}

/* 區塊標題:左側主色直線(和內文頁的 h2 一致) */
.coach-register-page .cr-block-title {
	margin: 0;
	border-left: 4px solid var(--theme);
	padding-left: 12px;
	color: #1a1a1a;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5
}

/* ---------- 欄位排版:標題在上、欄位在下,桌機兩欄 ---------- */

.coach-register-page .cr-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 28px
}

.coach-register-page .cr-field {
	min-width: 0
}

.coach-register-page .cr-field--full {
	grid-column: 1 / -1
}

.coach-register-page .cr-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 8px;
	color: #2d2d2d;
	font-size: var(--cr-label-size);
	font-weight: bold;
	line-height: 1.5
}

/* 所有提示文字(placeholder)和欄位標題同一個字級;標題字級改 --cr-label-size,這裡會跟著變 */
.coach-register-page input::placeholder,
.coach-register-page textarea::placeholder {
	font-size: var(--cr-label-size)
}

.coach-register-page .cr-label .stars {
	margin-right: 3px
}

.coach-register-page .cr-hint {
	margin-left: 6px;
	color: #888;
	font-size: 13px;
	font-weight: normal
}

/* 區塊標題後面的說明(所有項目皆為必填 / *為必填項目 / 多選)用主色,提醒的意味比較強;
   欄位標題後面的說明(例如平均收入的「選填」)維持灰色 */
.coach-register-page .cr-block-title .cr-hint {
	margin-left: 10px;
	color: var(--theme)
}

/* 同一列並排的欄位;每個欄位包一層 .cr-cell,驗證訊息才會落在自己的欄位底下 */
.coach-register-page .cr-row {
	display: flex;
	align-items: flex-start;
	gap: 12px
}

.coach-register-page .cr-cell {
	position: relative;
	flex: 1 1 0;
	min-width: 0
}

/* ---------- 輸入框 / 下拉 ---------- */

.coach-register-page .recruit-form-input,
.coach-register-page .recruit-select {
	display: block;
	float: none;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--cr-border);
	border-radius: 8px !important;
	background-color: #fff;
	box-shadow: none;
	color: #333;
	font-family: inherit;
	font-size: var(--cr-label-size) !important;
	line-height: normal;
	transition: border-color .25s ease, box-shadow .25s ease
}

.coach-register-page .recruit-form-input::placeholder {
	color: #bbb
}

/* 下拉:關掉瀏覽器預設外觀,自己畫細線箭頭(Phosphor caret-down,寫成 data URI 才能指定顏色) */
.coach-register-page .recruit-select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23888'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 14px 14px !important;
	text-align: left !important;
	text-align-last: left !important;
	cursor: pointer
}

.coach-register-page .recruit-select:disabled {
	background-color: #f8f8f8;
	color: #aaa;
	cursor: not-allowed
}

.coach-register-page .recruit-form-input:focus,
.coach-register-page .recruit-select:focus {
	border-color: var(--theme);
	box-shadow: 0 0 0 3px var(--theme-shadow);
	outline: none
}

.coach-register-page .recruit-form-input[readonly] {
	background-color: #f8f8f8;
	color: #888
}

/* 身高 / 體重的單位 */
.coach-register-page .recruit-form-position input {
	padding-right: 44px
}

.coach-register-page .recruit-form-unit {
	position: absolute;
	right: 12px;
	top: 0;
	color: #a3a3a3;
	font-size: 14px;
	line-height: 44px
}

/* 生日旁的年齡:小膠囊,靠在欄位標題右邊 */
.coach-register-page #age_text {
	display: inline-flex;
	align-items: center;
	height: 22px;
	margin-left: auto;
	padding: 0 10px;
	border-radius: 999px;
	background: #f1f1f1;
	color: #888;
	font-size: 12px;
	font-weight: normal;
	white-space: nowrap
}

/* 住址:縣市 / 區域 / 郵遞區號由 twzipcode 產生,排成一列 */
.coach-register-page #tw-address {
	display: flex;
	gap: 12px;
	margin-bottom: 12px
}

.coach-register-page #tw-address > * {
	flex: 1 1 0;
	min-width: 0
}

.coach-register-page #tw-address::after {
	display: none
}

/* ---------- 驗證狀態 ---------- */

.coach-register-page .is-invalid {
	border-color: var(--cr-error) !important
}

.coach-register-page .unique-error {
	display: block;
	margin: 6px 0 0;
	color: var(--cr-error);
	font-size: 13px;
	font-weight: normal;
	line-height: 1.5
}

.coach-register-page #past-company-error:empty {
	display: none
}

/* ---------- 單選 / 多選:膠囊選項 ---------- */

.coach-register-page .cr-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}

.coach-register-page .cr-chip {
	position: relative;
	display: inline-flex;
	margin: 0;
	font-weight: normal;
	cursor: pointer
}

/* 原生的 radio / checkbox 藏起來(仍可用鍵盤操作),外觀畫在後面的 span 上 */
.coach-register-page .cr-chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0
}

.coach-register-page .cr-chip span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 40px;
	padding: 6px 18px;
	border: 1px solid var(--cr-border);
	border-radius: 999px;
	background: #fff;
	color: #444;
	font-size: 14px;
	line-height: 1.4;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease
}

.coach-register-page .cr-chip:hover span {
	border-color: var(--theme);
	color: var(--theme)
}

/* 驗證套件會在 input 後面插一個訊息用的 span:膠囊裡不顯示它,
   下面的選取樣式也改用 ~(不是 +),才不會被它隔開而失效 */
.coach-register-page .cr-chip .unique-error {
	display: none !important
}

/* 選取只換顏色:不加勾、不加粗,膠囊寬度不變,其他選項才不會被擠得換位置 */
.coach-register-page .cr-chip input:checked ~ span {
	border-color: var(--theme);
	background: var(--theme-tint);
	color: var(--theme)
}

.coach-register-page .cr-chip input:focus-visible ~ span {
	box-shadow: 0 0 0 3px var(--theme-shadow)
}

/* ---------- 可上課區域 ---------- */

.coach-register-page .cr-area {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px
}

/* 實心按鈕:這一欄沒有輸入框,按鈕就是唯一的操作入口,要夠明顯 */
.coach-register-page .choice-city {
	-webkit-appearance: none;
	appearance: none;
	float: none;
	width: auto;
	height: 44px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid var(--theme);
	border-radius: 8px;
	background: var(--theme);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	line-height: normal;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease
}

.coach-register-page .choice-city:hover {
	border-color: var(--theme-hover);
	background: var(--theme-hover)
}

.coach-register-page .have-choice-city {
	float: none;
	color: #888;
	font-size: 14px;
	line-height: 1.5
}

/* 已選區域:依縣市分組,一個縣市一列;標籤上的叉可以直接移除 */
.coach-register-page .selected-area-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0 0;
	padding: 14px 16px;
	border: none;
	border-radius: 8px;
	background: #f8f8f8
}

.coach-register-page .area-group {
	display: flex;
	align-items: flex-start;
	gap: 12px
}

.coach-register-page .area-group-name {
	flex: 0 0 4.5em;
	color: #333;
	font-size: 14px;
	font-weight: bold;
	line-height: 30px
}

.coach-register-page .area-group-name em {
	margin-left: 4px;
	color: #999;
	font-size: 12px;
	font-style: normal;
	font-weight: normal
}

.coach-register-page .area-group-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0
}

.coach-register-page .selected-tag {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 30px;
	padding: 0 4px 0 12px;
	border-radius: 999px;
	background: var(--theme-tint);
	color: var(--theme);
	font-size: 13px;
	line-height: 1
}

.coach-register-page .selected-tag-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s ease
}

.coach-register-page .selected-tag-remove::before {
	content: "\2715"
}

.coach-register-page .selected-tag-remove:hover {
	background: rgba(159, 53, 58, .15)
}

/* ---------- 擔任健身教練資歷 ---------- */

.coach-register-page .coach-experience-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0;
	color: #333;
	font-size: var(--cr-label-size);
	line-height: 44px
}

.coach-register-page .coach-experience-row .recruit-select {
	width: 150px
}

.coach-register-page .coach-years-text {
	color: #888;
	font-size: 14px
}

.coach-register-page .coach-want-inline,
.coach-register-page .recruit-until-now label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: #333;
	font-size: 14px;
	font-weight: normal;
	white-space: nowrap;
	cursor: pointer
}

/* 「我還不是，但我想當教練」:和年份下拉是二選一,做成同樣高度、同樣外框的一格,份量才對等;
   勾選後整格變主色 */
.coach-register-page .coach-want-inline {
	box-sizing: border-box;
	gap: 8px;
	height: 44px;
	margin-left: 4px;
	padding: 0 14px;
	border: 1px solid var(--cr-border);
	border-radius: 8px;
	background: #fff;
	font-size: var(--cr-label-size);
	line-height: 1.4;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease
}

.coach-register-page .coach-want-inline:hover {
	border-color: var(--theme)
}

.coach-register-page .coach-want-inline:has(input:checked) {
	border-color: var(--theme);
	background: var(--theme-tint);
	color: var(--theme)
}

.coach-register-page .coach-want-inline:has(input:focus-visible) {
	box-shadow: 0 0 0 3px var(--theme-shadow)
}

.coach-register-page .coach-experience-row .coach-want-inline input {
	width: 18px;
	height: 18px
}

.coach-register-page .coach-want-inline input,
.coach-register-page .recruit-until-now input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--theme);
	cursor: pointer
}

/* ---------- 過去服務單位 ---------- */

.coach-register-page .recruit-major-group {
	display: flex;
	flex-direction: column;
	gap: 12px
}

/* 單位 / 職稱 / 開始年份 ~ 結束年份 / 至今 / 刪除 */
.coach-register-page .recruit-major-groups {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 124px 12px 124px 56px 40px;
	align-items: start;
	gap: 10px;
	margin: 0
}

/* clearfix 的 ::after 在格線裡會被當成一格,關掉 */
.coach-register-page .recruit-major-groups::before,
.coach-register-page .recruit-major-groups::after {
	display: none
}

.coach-register-page .cr-tilde {
	color: #a3a3a3;
	font-size: 16px;
	line-height: 44px;
	text-align: center
}

/* 「至今」只會出現在最後一筆(由 JS 放進 .recruit-until-now) */
.coach-register-page .recruit-until-now {
	position: static;
	line-height: 44px
}

.coach-register-page .recruit-major-del {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 44px;
	border-radius: 8px;
	color: #999;
	font-size: 16px;
	cursor: pointer;
	transition: color .25s ease, background-color .25s ease
}

.coach-register-page .recruit-major-del:hover {
	background: var(--theme-soft);
	color: var(--theme)
}

/* 第一筆不能刪;保留位置,各列欄位才會對齊 */
.coach-register-page .recruit-major-groups:first-child .recruit-major-del {
	display: flex;
	visibility: hidden
}

/* 新增鈕放在清單最下面:JS 是把新的一筆 append 到 .recruit-major-group 尾端,用 order 讓按鈕永遠排最後 */
.coach-register-page .recruit-major-add {
	order: 99;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px;
	border: 1px dashed #c6c6c6;
	border-radius: 999px;
	background: #fff;
	color: #666;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease
}

.coach-register-page .recruit-major-add:hover {
	border-color: var(--theme);
	background: var(--theme-soft);
	color: var(--theme)
}

/* ---------- 平均收入 ---------- */

.coach-register-page .income-inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 36px;
	width: auto;
	color: #333;
	font-size: var(--cr-label-size);
	line-height: 44px
}

/* 「說明文字 [金額] 萬 / 月」固定排成一列不折行;寬度不夠時縮的是金額欄位 */
.coach-register-page .income-inline-group {
	display: flex;
	align-items: center;
	margin: 0;
	white-space: nowrap
}

.coach-register-page .income-input {
	flex: 0 1 150px;
	box-sizing: border-box;
	width: 150px;
	min-width: 0;
	height: 44px;
	margin: 0 8px;
	padding: 0 8px;
	border: 1px solid var(--cr-border);
	border-radius: 8px;
	background: #fff;
	color: #333;
	font-family: inherit;
	font-size: var(--cr-label-size);
	text-align: center;
	transition: border-color .25s ease, box-shadow .25s ease
}

.coach-register-page .income-input::placeholder {
	color: #bbb
}

.coach-register-page .income-input:focus {
	border-color: var(--theme);
	box-shadow: 0 0 0 3px var(--theme-shadow);
	outline: none
}

/* ---------- 訓練專長(依類別分組) ---------- */

.coach-register-page .skill-category + .skill-category {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #eee
}

.coach-register-page .skill-category-title {
	margin-bottom: 12px;
	color: #2d2d2d;
	font-size: var(--cr-label-size);
	font-weight: bold;
	line-height: 1.5
}

.coach-register-page .skill-item {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: 0;
	font-size: 14px;
	vertical-align: top
}

/* 「其他」選項後面的補充說明 */
.coach-register-page .skill-item .cr-chip-other {
	box-sizing: border-box;
	width: 200px;
	height: 40px;
	padding: 0 4px;
	border: none;
	border-bottom: 1px solid #c6c6c6;
	background: transparent;
	color: #333;
	font-family: inherit;
	font-size: var(--cr-label-size);
	line-height: normal;
	transition: border-color .25s ease
}

.coach-register-page .skill-item .cr-chip-other:focus {
	border-bottom-color: var(--theme);
	outline: none
}

/* 這一格緊貼著 14px 的膠囊選項,提示文字用同樣的 14px 才不會顯得特別大
   (其他輸入框的提示文字維持和標題一樣的 16px;實際打進去的字也還是 16px) */
.coach-register-page .skill-item .cr-chip-other::placeholder {
	color: #bbb;
	font-size: 14px
}

.coach-register-page .skill-item .unique-error {
	flex: 0 0 100%
}

/* ---------- 驗證(Turnstile) + 同意 + 送出 ---------- */

.coach-register-page .cr-submit {
	padding-top: 8px;
	text-align: center
}

.coach-register-page #cf-turnstile:not(:empty) {
	margin-bottom: 16px
}

/* 同意公開資料:獨立的白底區塊(和上面的表單區塊同一種卡片),整塊都可以點;
   勾選後變主色邊框 + 淡底,沒勾就送出時邊框變紅 */
.coach-register-page .cr-agree {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-bottom: 24px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	text-align: left;
	transition: border-color .25s ease, background-color .25s ease
}

.coach-register-page .cr-agree:hover {
	border-color: var(--cr-border)
}

.coach-register-page .cr-agree:has(input:checked) {
	border-color: var(--theme);
	background: var(--theme-soft)
}

.coach-register-page .cr-agree:has(input.is-invalid) {
	border-color: var(--cr-error)
}

/* 勾選框和文字的內距各自帶,兩者接在一起,卡片上幾乎每一處都點得到 */
.coach-register-page .cr-agree input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 20px 0 20px 24px;
	accent-color: var(--theme);
	cursor: pointer
}

.coach-register-page .cr-agree label {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 18px 24px 18px 12px;
	color: #2d2d2d;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.6;
	cursor: pointer
}

.coach-register-page .cr-agree .unique-error {
	flex: 0 0 100%;
	margin: -8px 0 0;
	padding: 0 24px 16px 56px
}

/* ---------- 按鈕:實心主按鈕(下一步 / 送出申請)、外框次按鈕(上一步) ---------- */

.coach-register-page .cr-btn {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: auto;
	min-width: 180px;
	height: 50px;
	padding: 0 32px;
	border: 1px solid var(--theme);
	border-radius: 999px;
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	line-height: normal;
	letter-spacing: 2px;
	cursor: pointer;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease
}

/* 和頁首「教練加入」同一種 */
.coach-register-page .cr-btn--primary {
	background: var(--theme);
	box-shadow: 0 6px 16px var(--theme-shadow);
	color: #fff
}

.coach-register-page .cr-btn--primary:hover {
	border-color: var(--theme-hover);
	background: var(--theme-hover);
	opacity: 1
}

.coach-register-page .cr-btn--ghost {
	min-width: 130px;
	border-color: #ccc;
	background: #fff;
	color: #666
}

.coach-register-page .cr-btn--ghost:hover {
	border-color: var(--theme);
	background: var(--theme-soft);
	color: var(--theme)
}

.coach-register-page .cr-btn:focus-visible {
	outline: 3px solid var(--theme-tint);
	outline-offset: 2px
}

/* ---------- 分步驟:一次只顯示一步 ---------- */

/* 不用 display:none:第 3 步裡的機器人驗證(Turnstile)要在頁面載入時就能正常產生 */
.coach-register-page .cr-step:not(.is-active) {
	height: 0;
	overflow: hidden;
	visibility: hidden
}

/* 上一步靠左、下一步 / 送出靠右;只有一顆時靠右 */
.coach-register-page .cr-step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 8px
}

.coach-register-page .cr-step-nav > :only-child {
	margin-left: auto
}

/* ---------- 進度條:分段式細線,捲動時固定在頁首下方 ---------- */

/* web-frame.css 把 body 設成 overflow-y:auto,body 成了不會捲的捲動容器,sticky 會失效;
   這一頁把 body 改回 visible,一樣由視窗捲動,外觀不變(和內文頁同一個做法) */
body:has(.coach-register-page) {
	overflow: visible !important
}

/* top 是頁首高度:由 register.php 的 JS 依實際高度寫進 --cr-head-h,這裡的數字是 JS 沒跑時的預設值 */
.coach-register-page .cr-progress-wrap {
	position: sticky;
	top: var(--cr-head-h, 100px);
	z-index: 900;
	padding: 14px 16px 12px;
	border-bottom: 1px solid #ececec;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px)
}

.coach-register-page .cr-progress {
	display: flex;
	gap: 8px;
	max-width: 888px;
	margin: 0 auto;
	padding: 0;
	list-style: none
}

.coach-register-page .cr-progress-item {
	flex: 1 1 0;
	min-width: 0
}

.coach-register-page .cr-progress-item button {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: default
}

/* 只有「到過、而且不是目前這一步」的步驟可以點(JS 加 .is-clickable):
   游標變手指、名稱 hover 變主色;還沒到過的步驟沒有任何 hover,不會讓人以為能點 */
.coach-register-page .cr-progress-item.is-clickable button {
	cursor: pointer
}

.coach-register-page .cr-progress-item.is-clickable button:hover .cr-progress-text {
	color: var(--theme)
}

/* 每一步一段細線;走到的步驟由左往右填滿主色 */
.coach-register-page .cr-progress-bar {
	position: relative;
	display: block;
	height: 4px;
	border-radius: 999px;
	background: #e8e8e8;
	overflow: hidden
}

.coach-register-page .cr-progress-bar::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	background: var(--theme);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s ease
}

.coach-register-page .cr-progress-item.is-active .cr-progress-bar::after,
.coach-register-page .cr-progress-item.is-done .cr-progress-bar::after {
	transform: scaleX(1)
}

.coach-register-page .cr-progress-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	min-width: 0
}

/* 步驟編號:小圓點。還沒到的是灰底,目前這一步主色實心,做完的換成勾 */
.coach-register-page .cr-progress-num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #efefef;
	color: #999;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	transition: color .3s ease, background-color .3s ease
}

.coach-register-page .cr-progress-text {
	overflow: hidden;
	color: #999;
	font-size: 14px;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color .3s ease
}

.coach-register-page .cr-progress-item.is-active .cr-progress-num {
	background: var(--theme);
	color: #fff
}

.coach-register-page .cr-progress-item.is-active .cr-progress-text {
	color: #1a1a1a;
	font-weight: bold
}

.coach-register-page .cr-progress-item.is-done .cr-progress-num {
	background: var(--theme-tint);
	color: var(--theme);
	font-size: 0
}

.coach-register-page .cr-progress-item.is-done .cr-progress-num::after {
	content: "\2713";
	font-size: 12px
}

.coach-register-page .cr-progress-item.is-done .cr-progress-text {
	color: #555
}

.coach-register-page .cr-progress-item button:focus-visible {
	outline: 2px solid var(--theme-tint);
	outline-offset: 4px;
	border-radius: 4px
}

/* ---------- 手機版 ---------- */

@media (max-width: 767px) {
	.coach-register-page .cr-page-head {
		padding: 18px 16px 8px
	}

	.coach-register-page .cr-page-title {
		gap: 10px;
		font-size: 22px
	}

	.coach-register-page .cr-page-title img {
		height: 26px
	}

	.coach-register-page .cr-page-desc {
		margin-top: 4px;
		font-size: 13px
	}

	.coach-register-page .cr-container {
		padding: 15px 12px 30px
	}

	.coach-register-page .cr-block {
		padding: 20px 16px;
		margin-bottom: 15px
	}

	.coach-register-page .cr-block-head {
		padding-bottom: 14px;
		margin-bottom: 20px
	}

	.coach-register-page .cr-block-title {
		font-size: 18px
	}

	/* 一列一個欄位 */
	.coach-register-page .cr-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px
	}

	.coach-register-page .cr-row {
		gap: 8px
	}

	.coach-register-page .recruit-select {
		padding: 0 30px 0 10px;
		background-position: right 10px center !important
	}

	.coach-register-page #tw-address {
		gap: 8px
	}

	.coach-register-page .cr-options {
		gap: 8px
	}

	.coach-register-page .cr-chip span {
		padding: 6px 14px
	}

	.coach-register-page .skill-item .cr-chip-other {
		width: 160px
	}

	/* 資歷:「自 [年份] 開始 (已擔任教練 N 年)」以 393px 寬為準排成一列,年份下拉縮窄一點 */
	.coach-register-page .coach-experience-row {
		gap: 8px
	}

	.coach-register-page .coach-experience-row .recruit-select {
		width: 124px
	}

	.coach-register-page .coach-years-text {
		font-size: 13px;
		white-space: nowrap
	}

	/* 資歷:「我還不是，但我想當教練」自己一列,整列寬 */
	.coach-register-page .coach-want-inline {
		flex: 0 0 100%;
		margin-left: 0
	}

	/* 過去服務單位:單位、職稱各一列,年份一列,「至今」和刪除鈕一列;每筆之間用細線分開 */
	.coach-register-page .recruit-major-group {
		gap: 16px
	}

	.coach-register-page .recruit-major-groups {
		grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
		gap: 8px;
		padding-bottom: 16px;
		border-bottom: 1px solid #eee
	}

	.coach-register-page .recruit-major-groups .cr-major-wide {
		grid-column: 1 / -1
	}

	.coach-register-page .cr-until {
		grid-column: 1 / 3
	}

	.coach-register-page .recruit-until-now {
		line-height: 36px
	}

	.coach-register-page .recruit-major-del {
		justify-self: end;
		height: 36px
	}

	/* 手機版第一筆的刪除鈕直接拿掉,沒有「至今」時這一列才不會留白 */
	.coach-register-page .recruit-major-groups:first-child .recruit-major-del {
		display: none
	}

	/* 平均收入:一組一列 */
	.coach-register-page .income-inline {
		gap: 10px
	}

	.coach-register-page .income-inline-group {
		flex: 0 0 100%;
		min-width: 0
	}

	/* 以 393px 寬的手機為準:金額欄位縮到 90px 上下,整列剛好放得下;更窄的手機會再縮 */
	.coach-register-page .income-input {
		flex: 0 1 96px;
		width: 96px;
		margin: 0 6px;
		padding: 0 4px
	}

	.coach-register-page .skill-category + .skill-category {
		margin-top: 20px;
		padding-top: 20px
	}

	.coach-register-page .cr-agree {
		margin-bottom: 16px
	}

	.coach-register-page .cr-agree input {
		margin: 18px 0 18px 16px
	}

	.coach-register-page .cr-agree label {
		padding: 16px 16px 16px 10px
	}

	.coach-register-page .cr-agree .unique-error {
		padding: 0 16px 14px 46px
	}

	/* 下一步 / 送出吃掉剩下的寬度,上一步維持小顆 */
	.coach-register-page .cr-btn {
		min-width: 0;
		height: 48px;
		padding: 0 20px
	}

	.coach-register-page .cr-btn--primary {
		flex: 1 1 auto
	}

	.coach-register-page .cr-btn--ghost {
		flex: 0 0 auto
	}

	.coach-register-page .cr-progress-wrap {
		top: var(--cr-head-h, 50px);
		padding: 10px 12px 8px
	}

	.coach-register-page .cr-progress {
		gap: 6px
	}

	.coach-register-page .cr-progress-meta {
		gap: 6px;
		margin-top: 8px
	}

	.coach-register-page .cr-progress-num {
		width: 20px;
		height: 20px;
		font-size: 11px
	}

	.coach-register-page .cr-progress-text {
		font-size: 13px
	}
}

/* ---------- 城市區域選擇彈窗(thr-linkage 共用元件) ----------
   彈窗是 JS 產生後放進本頁的 .form-div,所以這裡加 .coach-register-page 就只會改到這一頁,
   首頁教練搜尋用的同一個元件不受影響。
   版面(底部的確定列、依縣市分組的已選區域…)用的是 register.php 傳給元件的自訂模板,
   選取邏輯仍是 thr-linkage-1.0.js 原本的;元件自己的已選清單(dl.thr-select-area)留在畫面外當資料來源 */

/* 蓋過固定的頁首(1001)和進度條(900) */
.coach-register-page .thr-linkage-shade {
	z-index: 1100 !important;
	background-color: rgba(0, 0, 0, .45) !important
}

/* 直向排列:標題 / 已選區域 / 縣市+區域(吃掉剩下的高度) / 底部確定列 */
.coach-register-page div.thr-linkage {
	z-index: 1101 !important;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(760px, calc(100vw - 24px));
	height: min(640px, calc(100vh - 40px));
	margin: 0;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	overflow: hidden;
	transform: translate(-50%, -50%);
	color: #333;
	text-align: left
}

.coach-register-page .thr-linkage button {
	font-family: inherit;
	cursor: pointer
}

/* 標題列 */
.coach-register-page .thr-linkage .thr-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px 0 24px;
	border-bottom: 1px solid #eee;
	background: #fff;
	color: #1a1a1a;
	font-size: 17px;
	font-weight: bold;
	line-height: 56px
}

/* 關閉鈕:原本是圖片,改用文字畫的細線叉 */
.coach-register-page .thr-linkage .thr-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: none;
	color: #888;
	font-size: 16px;
	font-weight: normal;
	line-height: 1;
	cursor: pointer;
	transition: color .25s ease, background-color .25s ease
}

.coach-register-page .thr-linkage .thr-close::before {
	content: "\2715"
}

.coach-register-page .thr-linkage .thr-close:hover {
	background: #f3f3f3;
	color: #333
}

/* ----- 已選擇的區域(依縣市分組) ----- */

.coach-register-page .thr-linkage .thr-areas {
	flex: 0 0 auto;
	padding: 14px 24px;
	border-bottom: 1px solid #eee;
	background: #fafafa
}

.coach-register-page .thr-linkage .thr-areas-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #666;
	font-size: 13px;
	line-height: 28px
}

/* 小顆外框膠囊按鈕:全部清除(灰)、全選(主色) */
.coach-register-page .thr-linkage .thr-select-clear,
.coach-register-page .thr-linkage .thr-select-all {
	flex: 0 0 auto;
	box-sizing: border-box;
	height: 30px;
	padding: 0 14px;
	border: 1px solid #ccc;
	border-radius: 999px;
	background: #fff;
	color: #555;
	font-size: 13px;
	line-height: 28px;
	white-space: nowrap;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease
}

.coach-register-page .thr-linkage .thr-select-all {
	border-color: var(--theme);
	color: var(--theme)
}

.coach-register-page .thr-linkage .thr-select-clear:hover {
	border-color: var(--theme);
	color: var(--theme)
}

.coach-register-page .thr-linkage .thr-select-all:hover {
	background: var(--theme);
	color: #fff
}

/* 還沒選任何區域時:只顯示提示文字,清除鈕收起來 */
.coach-register-page .thr-linkage .thr-empty {
	display: none;
	margin: 4px 0 2px;
	color: #aaa;
	font-size: 14px;
	line-height: 1.6
}

.coach-register-page .thr-linkage.is-empty .thr-empty {
	display: block
}

.coach-register-page .thr-linkage.is-empty .thr-select-clear,
.coach-register-page .thr-linkage.is-empty .thr-summary {
	display: none
}

/* 元件自己的已選清單不顯示(仍在 DOM 裡,分組清單是依它畫出來的) */
.coach-register-page .thr-linkage .thr-select-area {
	display: none
}

/* 選很多時這一塊自己捲動,不把彈窗撐高 */
.coach-register-page .thr-linkage .thr-summary {
	max-height: 104px;
	margin-top: 4px;
	overflow-y: auto
}

.coach-register-page .thr-linkage .thr-summary-group {
	display: flex;
	align-items: flex-start;
	gap: 10px
}

.coach-register-page .thr-linkage .thr-summary-group + .thr-summary-group {
	margin-top: 6px
}

.coach-register-page .thr-linkage .thr-summary-county {
	flex: 0 0 4em;
	color: #333;
	font-size: 13px;
	font-weight: bold;
	line-height: 28px
}

.coach-register-page .thr-linkage .thr-summary-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0
}

/* 淡色標籤,點一下取消 */
.coach-register-page .thr-linkage .thr-summary-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	border: none;
	border-radius: 999px;
	background: var(--theme-tint);
	color: var(--theme);
	font-size: 13px;
	line-height: 1;
	transition: background-color .25s ease
}

.coach-register-page .thr-linkage .thr-summary-tag::after {
	content: "\2715";
	font-size: 10px
}

.coach-register-page .thr-linkage .thr-summary-tag:hover {
	background: #efc9cb
}

/* ----- 左:縣市清單;右:該縣市的區域。兩邊各自捲動 ----- */

.coach-register-page .thr-linkage .thr-body {
	flex: 1 1 auto;
	display: flex;
	min-height: 0
}

.coach-register-page .thr-linkage .thr-list-area {
	flex: 0 0 170px;
	float: none;
	box-sizing: border-box;
	width: 170px;
	margin: 0;
	border-right: 1px solid #eee;
	overflow-y: auto
}

.coach-register-page .thr-linkage .thr-list-area ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 0 14px 0 21px;
	border-bottom: none;
	border-left: 3px solid transparent;
	color: #444;
	font-size: 15px;
	line-height: 42px;
	transition: color .25s ease, background-color .25s ease
}

/* 第一列是欄位名稱(縣市),不是選項 */
.coach-register-page .thr-linkage .thr-list-area ul li:first-child {
	position: sticky;
	top: 0;
	z-index: 1;
	padding-left: 24px;
	border-left: none;
	border-bottom: 1px solid #eee;
	background: #fff;
	color: #999;
	font-size: 13px;
	line-height: 36px;
	cursor: default
}

.coach-register-page .thr-linkage .thr-list-area ul li:not(:first-child):hover {
	background: var(--theme-soft);
	color: var(--theme)
}

.coach-register-page .thr-linkage .thr-list-area ul li.on {
	border-left-color: var(--theme);
	background: var(--theme-soft);
	color: var(--theme);
	font-weight: bold
}

/* 縣市旁的已選數量 */
.coach-register-page .thr-linkage .thr-badge {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--theme);
	color: #fff;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	line-height: 20px;
	text-align: center
}

.coach-register-page .thr-linkage .thr-pane {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	min-width: 0
}

/* 目前縣市名稱 + 全選 */
.coach-register-page .thr-linkage .thr-pane-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 46px;
	padding: 0 20px 0 24px;
	border-bottom: 1px solid #eee;
	color: #333;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4
}

.coach-register-page .thr-linkage .thr-check-box {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	border-top: none;
	overflow-y: auto
}

.coach-register-page .thr-linkage .thr-check-box dl {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 10px;
	margin: 0;
	padding: 20px 24px
}

/* 區域:膠囊選項(原本是小圖示的勾選框) */
.coach-register-page .thr-linkage .thr-check-box dl dd {
	margin: 0;
	padding: 7px 16px !important;
	border: 1px solid var(--cr-border);
	border-radius: 999px;
	background: #fff;
	color: #444;
	font-size: 14px;
	line-height: 1.4;
	opacity: 1;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease
}

.coach-register-page .thr-linkage .thr-check-box dl dd:hover {
	border-color: var(--theme);
	color: var(--theme)
}

/* 選取只換顏色:不加勾、不加粗,膠囊寬度不變,其他選項才不會被擠得換位置 */
.coach-register-page .thr-linkage .thr-check-box dl dd.on {
	border-color: var(--theme);
	background: var(--theme-tint);
	color: var(--theme)
}

/* ----- 底部:已選數量 + 取消 / 確定 ----- */

.coach-register-page .thr-linkage .thr-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border-top: 1px solid #eee;
	background: #fff
}

.coach-register-page .thr-linkage .thr-count {
	margin-right: auto;
	color: #666;
	font-size: 14px
}

.coach-register-page .thr-linkage .thr-count b {
	margin: 0 2px;
	color: var(--theme);
	font-size: 18px
}

.coach-register-page .thr-linkage .thr-cancel,
.coach-register-page .thr-linkage .thr-confirm {
	box-sizing: border-box;
	height: 42px;
	padding: 0 24px;
	border: 1px solid #ccc;
	border-radius: 999px;
	background: #fff;
	color: #666;
	font-size: 15px;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease
}

.coach-register-page .thr-linkage .thr-cancel:hover {
	border-color: var(--theme);
	color: var(--theme)
}

.coach-register-page .thr-linkage .thr-confirm {
	min-width: 120px;
	border-color: var(--theme);
	background: var(--theme);
	color: #fff;
	font-weight: bold;
	letter-spacing: 2px
}

.coach-register-page .thr-linkage .thr-confirm:hover {
	border-color: var(--theme-hover);
	background: var(--theme-hover)
}

/* ----- 手機:從底部滑出的整版面板 ----- */

@keyframes cr-sheet-up {
	from {
		transform: translateY(100%)
	}

	to {
		transform: translateY(0)
	}
}

@media (max-width: 767px) {
	/* 面板開著時,後面的頁面不跟著捲 */
	html:has(.coach-register-page .thr-linkage-shade) {
		overflow: hidden !important
	}

	.coach-register-page div.thr-linkage {
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 92vh;
		height: 92dvh;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
		transform: none;
		animation: cr-sheet-up .3s ease
	}

	.coach-register-page .thr-linkage .thr-header {
		padding-left: 16px;
		font-size: 16px;
		line-height: 52px
	}

	.coach-register-page .thr-linkage .thr-areas {
		padding: 10px 16px
	}

	.coach-register-page .thr-linkage .thr-summary {
		max-height: 100px
	}

	.coach-register-page .thr-linkage .thr-list-area {
		flex-basis: 112px;
		width: 112px
	}

	.coach-register-page .thr-linkage .thr-list-area ul li {
		padding: 0 8px 0 11px;
		font-size: 14px;
		line-height: 44px
	}

	.coach-register-page .thr-linkage .thr-list-area ul li:first-child {
		padding-left: 14px;
		line-height: 36px
	}

	.coach-register-page .thr-linkage .thr-pane-head {
		padding: 0 10px 0 14px
	}

	.coach-register-page .thr-linkage .thr-check-box dl {
		gap: 8px;
		padding: 14px
	}

	.coach-register-page .thr-linkage .thr-check-box dl dd {
		padding: 8px 14px !important
	}

	/* 底部按鈕留出 iPhone 底部橫條的空間 */
	.coach-register-page .thr-linkage .thr-footer {
		padding: 10px 16px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom))
	}

	.coach-register-page .thr-linkage .thr-cancel {
		padding: 0 18px
	}

	.coach-register-page .thr-linkage .thr-confirm {
		min-width: 110px
	}
}

/* ---------- 生日年份:可打字搜尋的下拉(coach-register.js enhanceYearSearch) ---------- */
/* 原生 select 保留當資料來源,只是藏起來;驗證(ignore:'')照樣會檢查它 */
.coach-register-page .ys-native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0;
	pointer-events: none;
	clip: rect(0 0 0 0)
}

.coach-register-page .ys-wrap {
	position: relative
}

.coach-register-page .ys-trigger {
	text-align: left
}

.coach-register-page .ys-trigger.is-placeholder {
	color: #999
}

/* 驗證失敗時,紅框畫在看得見的按鈕上 */
.coach-register-page .cr-cell:has(.ys-native.is-invalid) .ys-trigger {
	border-color: var(--cr-error) !important
}

.coach-register-page .ys-panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 30;
	width: 100%;
	min-width: 160px;
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid var(--cr-border);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
}

.coach-register-page .ys-panel[hidden] {
	display: none
}

.coach-register-page .ys-search {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 38px;
	margin: 0 0 6px;
	padding: 0 10px;
	border: 1px solid var(--cr-border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	outline: none
}

.coach-register-page .ys-search:focus {
	border-color: var(--theme)
}

.coach-register-page .ys-list {
	position: relative;
	max-height: 220px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	-webkit-overflow-scrolling: touch
}

.coach-register-page .ys-item,
.coach-register-page .ys-empty {
	padding: 9px 10px;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.2
}

.coach-register-page .ys-item {
	color: #333;
	cursor: pointer
}

.coach-register-page .ys-item:hover,
.coach-register-page .ys-item.is-active {
	background: #f3f3f3
}

.coach-register-page .ys-item.is-selected {
	color: var(--theme);
	font-weight: 700
}

.coach-register-page .ys-empty {
	color: #999;
	text-align: center
}

/* ---------- 平均收入:超過 3 位數的提示(register.php .js-income-num,3 秒後自動隱藏) ---------- */
.coach-register-page .income-limit-hint {
	margin: 8px 0 0;
	padding: 6px 10px;
	border-radius: 6px;
	background: #fff4e5;
	color: #b26a00;
	font-size: 13px;
	line-height: 1.5
}

.coach-register-page .income-limit-hint[hidden] {
	display: none
}

/* ---------- 教練資歷:先選身分(目前是教練 / 想當教練),選「目前是教練」才出現年資 ---------- */
.coach-register-page .coach-identity-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 12px
}

.coach-register-page .coach-identity-row .coach-want-inline {
	margin-left: 0
}

.coach-register-page .coach-identity-row .coach-want-inline input {
	width: 18px;
	height: 18px
}

/* .coach-experience-row 有 display:flex,會蓋過 hidden 屬性,這裡補回來 */
.coach-register-page .coach-experience-row[hidden] {
	display: none
}

@media (max-width: 767px) {
	.coach-register-page .coach-identity-row .coach-want-inline {
		flex: 0 0 100%
	}
}