/* ============================================================
   member-login  —  會員登入(website/member/login.php)、重新驗證(recertify.php)、
   忘記密碼(forgot-password.php)、重設密碼(reset-password.php)、會員中心的變更密碼(change-password.php)   〔單元〕
   視覺和會員註冊頁(member-register.css)同一種調性:淺灰底 + 白底圓角區塊、膠囊按鈕、主題色
   擺法:學員、教練各一張卡片,桌機左右並排;手機一次顯示一張,用最上面的頁籤切換;
   學員卡片是帳號密碼 → 登入按鈕 → 一排小按鈕(忘記密碼 / 註冊 / 再次驗證) → 第三方登入(圓形圖示)
   只作用於 <main class="member-login-page">,class 一律用 ml- 開頭,不和舊的 auth.css 共用;
   本檔需排在全站樣式之後載入(由 login.php 自己引入)
   表單和欄位的 id / name 有被 member-login-js.php 用到,只改外觀
   主題色用 blocks/web-base.css 的 --theme 系列
   ============================================================ */

.member-login-page {
	/* 輸入框的字不要小於 16px:頁面的縮放鎖定哪天拿掉,iOS 點到小於 16px 的輸入框會自動放大畫面 */
	--ml-input-size: 16px;
	--ml-border: #ddd;
	--ml-error: #d93025;
	background: #f5f5f5
}

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

/* 學員、教練兩張卡片左右並排、等寬(手機改成上下排),上緣對齊;
   高度各自跟著內容:教練那張內容少,不拉成和學員一樣高,才不會留一大塊空白 */
.member-login-page .ml-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 24px;
	max-width: 920px;
	margin: 0 auto;
	padding: 30px 16px 60px;
	box-sizing: border-box
}

/* 身分頁籤(我是學員 / 我是教練)只在手機版出現,桌機兩張卡片並排,不需要 */
.member-login-page .ml-tabs {
	display: none
}

/* 只有一張卡片的頁面(重新驗證、忘記密碼、重設密碼):不分欄,收窄、置中 */
.member-login-page .ml-container--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 480px
}

.member-login-page .ml-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	box-sizing: border-box;
	padding: 36px 40px
}

/* 放在會員中心版面裡的表單(變更密碼 change-password.php):灰底由 member-menu.css 鋪在整個會員中心,
   這裡不用再鋪;卡片和會員中心其他頁一樣佔滿右邊欄位,裡面的表單只有三個密碼欄位,收窄、置中,才不會拉得太長 */
.member-login-page.ml-embed {
	background: none
}

.member-login-page.ml-embed .ml-card form {
	max-width: 480px;
	margin: 0 auto
}

/* 卡片標題(我是學員 / 我是教練):左側主色直線,和註冊頁的區塊標題一致 */
.member-login-page .ml-card-title {
	margin: 0 0 24px;
	border-left: 4px solid var(--theme);
	padding-left: 12px;
	color: #1a1a1a;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	text-align: left
}

/* 卡片最上面的一句說明(重新驗證、忘記密碼、重設密碼頁) */
.member-login-page .ml-card-desc {
	margin: 0 0 20px;
	color: #666;
	font-size: 15px;
	line-height: 1.7
}

/* ---------- 欄位:輸入框左邊帶圖示,說明寫在輸入框裡(placeholder) ---------- */

.member-login-page .ml-field {
	margin-bottom: 16px
}

/* 欄位標題(帳號 / 密碼)不顯示:只有兩個欄位,圖示 + placeholder 已經夠清楚,省下兩行高度;
   label 還是留在 HTML 裡給螢幕閱讀器讀,所以用「看不到但讀得到」的寫法,不是 display:none */
.member-login-page .ml-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap
}

/* 欄位比較多、光靠圖示分不出來的頁面(重設密碼:信箱 / 新密碼 / 確認密碼),標題要顯示出來 */
.member-login-page .ml-label--show {
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 0 0 8px;
	overflow: visible;
	clip: auto;
	white-space: normal;
	color: #2d2d2d;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5
}

.member-login-page .ml-input-wrap {
	position: relative
}

.member-login-page .ml-input-wrap > i {
	position: absolute;
	left: 14px;
	top: 0;
	color: #aaa;
	font-size: 18px;
	line-height: 46px;
	pointer-events: none;
	transition: color .25s ease
}

.member-login-page .ml-input-wrap:focus-within > i {
	color: var(--theme)
}

/* 輸入框同時帶著 .form-control,這裡多帶一層 .member-login-page 蓋過它的外觀 */
.member-login-page .ml-input {
	display: block;
	float: none;
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 12px 0 42px;
	border: 1px solid var(--ml-border);
	border-radius: 8px !important;
	background-color: #fff;
	box-shadow: none;
	color: #333;
	font-family: inherit;
	font-size: var(--ml-input-size) !important;
	line-height: normal;
	transition: border-color .25s ease, box-shadow .25s ease
}

.member-login-page .ml-input::placeholder {
	color: #bbb;
	font-size: var(--ml-input-size)
}

/* 唯讀欄位(重設密碼頁的信箱):灰底,看得出不能改 */
.member-login-page .ml-input[readonly] {
	background-color: #f8f8f8;
	color: #888
}

.member-login-page .ml-input:focus {
	border-color: var(--theme);
	box-shadow: 0 0 0 3px var(--theme-shadow);
	outline: none
}

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

.member-login-page .is-invalid {
	border-color: var(--ml-error) !important
}

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

/* 機器人驗證(Turnstile):有內容時才佔位置,置中 */
.member-login-page .recaptchaClient-block {
	display: flex;
	justify-content: center
}

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

/* ---------- 按鈕:實心主按鈕(登入)、外框次按鈕(教練登入 / 教練加入) ---------- */

.member-login-page .ml-btn {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	margin: 4px 0 0;
	padding: 0 24px;
	border: 1px solid var(--theme);
	border-radius: 999px;
	background: var(--theme);
	box-shadow: 0 6px 16px var(--theme-shadow);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	line-height: normal;
	letter-spacing: 2px;
	text-decoration: none;
	cursor: pointer;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease
}

.member-login-page .ml-btn:hover {
	border-color: var(--theme-hover);
	background: var(--theme-hover);
	color: #fff;
	opacity: 1
}

.member-login-page .ml-btn:focus-visible {
	outline: 3px solid var(--theme-tint);
	outline-offset: 2px
}

/* 送出中 JS 會把按鈕鎖住 */
.member-login-page .ml-btn:disabled {
	opacity: .6;
	cursor: not-allowed
}

/* 高度不另外設,和實心的登入按鈕一樣高(桌機 50px、手機 48px) */
.member-login-page .ml-btn--ghost {
	margin: 0;
	border-color: var(--theme);
	background: #fff;
	box-shadow: none;
	color: var(--theme);
	font-size: 15px;
	letter-spacing: 1px
}

.member-login-page .ml-btn--ghost:hover {
	border-color: var(--theme);
	background: var(--theme);
	color: #fff
}

/* ---------- 登入按鈕下面的一排小按鈕(忘記密碼 / 註冊新會員 / 再次驗證) ---------- */

.member-login-page .ml-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 16px
}

.member-login-page .ml-links a {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	background: #f3f3f3;
	color: #666;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: color .25s ease, background-color .25s ease
}

.member-login-page .ml-links a:hover {
	background: var(--theme-tint);
	color: var(--theme);
	opacity: 1
}

/* ---------- 第三方登入 ---------- */

/* 分隔線:中間一行小字,兩邊各一條細線 */
.member-login-page .ml-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 28px 0 20px;
	color: #999;
	font-size: 13px;
	line-height: 1.5
}

.member-login-page .ml-divider::before,
.member-login-page .ml-divider::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: #eee
}

/* 只放圓形圖示,排成一列置中 */
.member-login-page .ml-social {
	display: flex;
	justify-content: center;
	gap: 16px
}

/* 各家品牌色的實心圓形按鈕 + 白色圖示(不套主題色,才認得出來),帶一點陰影,hover 時浮起來變亮 */
.member-login-page .ml-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
	color: #fff;
	line-height: 1;
	text-decoration: none;
	transition: background-color .25s ease, box-shadow .25s ease, filter .25s ease
}

.member-login-page .ml-social-btn:hover {
	color: #fff;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
	filter: brightness(1.12);
	opacity: 1
}

/* 圖示檔在 /assets/icons/social/:LINE 用 Simple Icons 的對話框,
   Google 的 G、Facebook 的 f 用 Font Awesome 5 Brands 的粗體版,三顆的線條份量才一致;
   用 mask 畫,顏色跟著按鈕的文字色(白)。三個圖示的外框比例不同,高度各自微調才會看起來一樣大 */
.member-login-page .ml-social-icon {
	display: block;
	width: 26px;
	height: var(--ml-icon-h, 22px);
	background-color: currentColor;
	-webkit-mask: var(--ml-icon) center / contain no-repeat;
	mask: var(--ml-icon) center / contain no-repeat
}

.member-login-page .ml-social-btn--line {
	--ml-icon: url(/assets/icons/social/line.svg);
	--ml-icon-h: 22px;
	background: #06C755
}

.member-login-page .ml-social-btn--google {
	--ml-icon: url(/assets/icons/social/google.svg);
	--ml-icon-h: 20px;
	background: #DB4437
}

.member-login-page .ml-social-btn--facebook {
	--ml-icon: url(/assets/icons/social/facebook-f.svg);
	--ml-icon-h: 21px;
	background: #1877F2
}

/* Facebook 藍提亮 12% 幾乎看不出來,hover 時直接換成較亮的藍 */
.member-login-page .ml-social-btn--facebook:hover {
	background: #2a8aff;
	filter: saturate(1.25)
}

/* ---------- 教練專區 ---------- */

/* 按鈕緊接在標題下面,和左邊學員卡片的第一個欄位從同一個高度開始 */
.member-login-page .ml-coach-body {
	text-align: center
}

/* 教練登入、教練加入上下排(卡片比較窄,並排會擠) */
.member-login-page .ml-coach-actions {
	display: flex;
	flex-direction: column;
	gap: 12px
}

@media (max-width: 767px) {
	.member-login-page .ml-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 15px;
		padding: 15px 12px 30px
	}

	.member-login-page .ml-card {
		padding: 24px 16px
	}

	/* 身分頁籤:白底膠囊裡兩顆等寬的按鈕;選到的那顆底下有一塊主題色的膠囊,切換時滑過去 */
	.member-login-page .ml-tabs {
		position: relative;
		display: flex;
		gap: 4px;
		padding: 4px;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
	}

	/* 滑動的膠囊:寬度是一顆按鈕(扣掉左右內距 4px × 2 和中間的間距 4px 後對半分),
	   選到第二顆(我是教練)時往右移一顆按鈕 + 間距的距離 */
	.member-login-page .ml-tabs::before {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 4px;
		left: 4px;
		width: calc((100% - 12px) / 2);
		border-radius: 999px;
		background: var(--theme);
		transition: transform .3s ease
	}

	.member-login-page .ml-tabs:has(.ml-tab:last-child.is-active)::before {
		transform: translateX(calc(100% + 4px))
	}

	/* 按鈕本身沒有底色,疊在膠囊上面;選到的只換字色 */
	.member-login-page .ml-tab {
		-webkit-appearance: none;
		appearance: none;
		position: relative;
		z-index: 1;
		flex: 1 1 0;
		min-width: 0;
		height: 40px;
		padding: 0 12px;
		border: none;
		border-radius: 999px;
		background: none;
		color: #666;
		font-family: inherit;
		font-size: 15px;
		font-weight: bold;
		line-height: 1;
		letter-spacing: 1px;
		cursor: pointer;
		transition: color .3s ease
	}

	.member-login-page .ml-tab.is-active {
		color: #fff
	}

	.member-login-page .ml-tab:focus-visible {
		outline: 3px solid var(--theme-tint);
		outline-offset: 2px
	}

	/* 一次只顯示選到的那一張;卡片自己的標題和頁籤重複,手機版不顯示 */
	.member-login-page .ml-container--tabs .ml-tab-panel:not(.is-active) {
		display: none
	}

	.member-login-page .ml-container--tabs .ml-tab-panel .ml-card-title {
		display: none
	}

	.member-login-page .ml-card-title {
		margin-bottom: 18px;
		font-size: 18px
	}

	.member-login-page .ml-field {
		margin-bottom: 16px
	}

	.member-login-page .ml-btn {
		height: 48px
	}

	.member-login-page .ml-divider {
		margin: 24px 0 16px
	}
}