/* BR-005：登入/註冊系列頁面（login/register/register_pos/confirmsetpswd/third_login）共用版面
   取代 backstretch 全螢幕背景圖 plugin，改用純 CSS 固定背景 */

body {
	font-size: 15px;
	font-family: "Microsoft JhengHei", sans-serif;
}

.auth-bg {
	background: url('../img/backgrounds/login_background.jpg') center center no-repeat fixed;
	background-size: cover;
	min-height: 100vh;
}

/* 反詐騙提醒收合箭頭（login.php） */
[data-bs-toggle="collapse"] .fa-chevron-down {
	transition: transform 0.2s;
}
[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down {
	transform: rotate(180deg);
}

/* 第三方登入按鈕（login.php 的 LINE/Google 圖示） */
.btn_third {
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
	padding: 12px 6px;
	border-radius: 5px;
}
.btn_line {
	border: 1px solid #00c300;
	background-color: #00c300;
	color: #00c300;
}
.btn_google {
	border: 1px solid #ffffff;
	background-color: #ffffff;
	color: #393939;
}
.btn_line:hover,
.btn_line:focus,
.btn_line:active {
	border-color: #00c300 !important;
	background-color: #00c300 !important;
	color: #00c300 !important;
}
.btn_google:hover,
.btn_google:focus,
.btn_google:active {
	border-color: #ffffff !important;
	background-color: #ffffff !important;
	color: #393939 !important;
}

/* 水滴玻璃卡片（login.php） */
.form-box .card {
	background-color: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.4);
}
.form-box {
	padding: 0 16px;
	box-sizing: border-box;
}
.form-box .form-control,
.form-box .form-select,
.form-box .input-group-text {
	background-color: transparent;
}
.form-box .form-control:focus,
.form-box .form-select:focus {
	background-color: rgba(0, 0, 0, 0.06);
	border-color: var(--mdb-border-color);
	box-shadow: none;
}

/* 瀏覽器自動填入（帳號/密碼記憶）預設會蓋上不透明底色，改回與玻璃卡片一致的半透明色 */
.form-box .form-control:-webkit-autofill,
.form-box .form-control:-webkit-autofill:hover,
.form-box .form-control:-webkit-autofill:focus,
.form-box .form-control:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.55) inset;
	-webkit-text-fill-color: var(--mdb-body-color);
	caret-color: var(--mdb-body-color);
	transition: background-color 9999s ease-in-out 0s;
}

/* 性別分段按鈕（register.php）：BS5 沒有原生「radio button group」元件，官方文件本身也是用 btn-check + btn-group 做這種切換效果，
   這裡保留 btn-group 設計，但拿掉 MDB `.btn` 預設就有的陰影（--mdb-btn-box-shadow），並讓選取/hover 呈現跟 input 一致的霧面灰底，
   不用 MDB 預設的藍色邊框變化。
   （修正）：原本整組直接 box-shadow:none，把 HTML 上加的 .shadow-sm 也一併蓋掉了（兩者 specificity 都是
   !important，但本規則的 .form-box .sex-group 選擇器比 .shadow-sm 更精確而勝出）。改為直接指定跟
   --mdb-box-shadow-sm 相同的陰影值，viewport 上跟其他已經是無邊框＋陰影的欄位風格一致，
   同時仍蓋掉 MDB `.btn` 各自的陰影（不會變成每顆按鈕各自一圈陰影）。 */
.form-box .sex-group {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.form-box .sex-group .btn-outline-secondary {
	flex: 1 1 0% !important;
	background-color: transparent;
	border-color: var(--mdb-border-color);
	border-width: 1px;
	color: inherit;
	box-shadow: none !important;
}
.form-box .sex-group .btn-outline-secondary:hover,
.form-box .sex-group .btn-outline-secondary:focus {
	background-color: rgba(0, 0, 0, 0.06);
	border-color: var(--mdb-border-color) !important;
	color: inherit !important;
	box-shadow: none !important;
}
.form-box .sex-group .btn-check:checked + .btn-outline-secondary {
	background-color: rgba(0, 0, 0, 0.16) !important;
	border-color: var(--mdb-border-color) !important;
	color: inherit !important;
	box-shadow: none !important;
}

/* 信箱類型下拉選單（register.php）：寬度限制在一半以內，高度對齊左側 input
   （MDB 只對 .input-group>.form-control 縮小高度，沒涵蓋 .form-select，兩者高度因此不一致） */
.form-box .input-group > .mailtype-select {
	flex: 0 0 auto;
	width: auto;
	max-width: 50%;
	min-height: calc(2.08rem + 2px);
	height: calc(2.08rem + 2px);
	padding-top: .27rem;
	padding-bottom: .27rem;
}

/* 等待中遮罩（5 支登入前流程頁面共用，無側邊欄疑慮，維持全螢幕）。
   置中改在這裡寫 display:flex（不加 !important），不用 BS5 的 .d-flex utility class，
   因為全站既有 $(...).show()/.hide() 慣例是直接切 inline style，.d-flex 的 !important
   會蓋掉 jQuery .hide() 設的 inline display:none，導致遮罩永遠關不掉 */
.auth-loading-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 尺寸參考 MaceWebPhone .loadingEhere_img，避免 gif 原始 110x140 過大 */
.auth-loading-overlay img {
	width: 3.5em;
}

/* 必填欄位標記：取代原本寫在 placeholder 開頭的「(必填) 」文字。placeholder 是純文字屬性，
   沒辦法只讓其中一部分變色，要嘛整串都變紅、要嘛整串都不變，沒辦法只標紅 * 其餘維持原色。
   改為在欄位最前面疊一個獨立的紅色 *、跟 placeholder 文字同一行垂直置中（傳統表單常見做法），
   需搭配 .position-relative 的外層容器使用。右側欄位留出左邊距，避免文字被 * 蓋住——
   可能直接接一個 input（如手機號碼），也可能接一個 .input-group（如姓名、密碼，此時只需
   讓 group 裡第一個 input 讓出空間，其餘欄位不受影響）。 */
.required-mark {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	color: var(--mdb-danger);
	font-weight: bold;
	font-size: 14px;
	line-height: 1;
	z-index: 3;
	pointer-events: none;
}
.required-mark + input,
.required-mark + .input-group > input:first-child {
	padding-left: 22px;
}
/* login.php 的手機/密碼欄位 .input-group 第一個子元素是圖示（.input-group-text），不是 input，
   讓文字/圖示都往右挪空間的做法改成加在 .required-mark--group 這個變體上，套用在整個 group，
   避免用 :has() 選擇器（部分行動裝置瀏覽器版本支援度不一致） */
.required-mark--group + .input-group {
	padding-left: 22px;
}
.required-mark + input,
.required-mark + .input-group > input:first-child {
	padding-left: 22px;
}