/* 前台控制項覆蓋層(2026-11,前台改版第 3 批)
 *
 * 只由前台表單 / 會員區 / 展商專區的版型在 <head> 最後載入,版型的 <body> 加 class="fe-ui";
 * 規則一律以 .fe-ui 開頭:
 *   - 後台、城市站、海洋明星頁、總站首頁(header_site_view)沒有載入這支,也沒有 .fe-ui,不受影響
 *   - 頁面 CSS(css/pages/…)是在 <body> 裡載入的,比這支晚;多一層 .fe-ui 讓這裡的規則權重高過頁面 CSS
 * 規格與用法見 docs/系統設計/開發規範.md §3.2。數值改這裡,不要在頁面 CSS 另外覆寫尺寸 / 顏色。
 */

/* ---------- 輸入框 / 下拉 / 多行文字 ---------- */
/* 勾選框、單選、檔案、隱藏欄位、按鈕型 input 不套用(:where 讓排除條件不增加權重) */
.fe-ui form.customform input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"])),
.fe-ui form.customform select,
.fe-ui form.customform textarea {
	font-size: 16px;              /* 小於 16px 時 iOS 聚焦會自動放大頁面 */
	line-height: 1.375;
	padding: 10px 12px;
	border: 1px solid #999;
	border-radius: 4px;
	color: #333;
	background-color: #fff;
	box-shadow: none;
	transition: border-color .15s ease-in-out;
}
.fe-ui form.customform input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"])),
.fe-ui form.customform select:where(:not([multiple], [size])) {
	height: 44px;
	margin-bottom: 0;
}
.fe-ui form.customform select {
	padding-top: 0;               /* 下拉的文字由瀏覽器垂直置中;上下 padding 會把長選項擠掉 */
	padding-bottom: 0;
}
.fe-ui form.customform :where(input, select, textarea):disabled,
.fe-ui form.customform :where(input, select, textarea)[readonly] {
	background-color: #eee;
	color: #555;
	cursor: not-allowed;
}
.fe-ui form.customform input[type="file"] {
	min-height: 44px;
	max-height: none;
	font-size: 16px;
	border: 1px solid #999;      /* 與其他輸入框一致(部分表單頁 CSS 把 input 框線設成 brown) */
	border-radius: 4px;
}

/* ---------- 勾選框 / 單選:放大到 20px,手機上整個文字標籤當觸控範圍 ---------- */
.fe-ui form.customform input[type="checkbox"],
.fe-ui form.customform input[type="radio"] {
	width: 20px;
	height: 20px;
	margin: 0 8px 0 0;
	vertical-align: middle;
	accent-color: #1d5f88;
	cursor: pointer;
}
.fe-ui form.customform input[type="checkbox"] + label,
.fe-ui form.customform input[type="radio"] + label {
	cursor: pointer;
}
/* 並排的單選(會員資料的性別):「○ 男  ○ 女」 */
.fe-ui .radio-inline-group label {
	display: inline-block;
	margin-right: 24px;
}
@media screen and (max-width: 768px) {
	.fe-ui form.customform input[type="checkbox"] + label,
	.fe-ui form.customform input[type="radio"] + label {
		/* 行內元素的上下內距不改排版、但會加大可點範圍:行高 2.1em(33.6px)+ 12px ≥ 44px。
		   不要改成 inline-block,長標籤會整段掉到勾選框下一行 */
		padding: 6px 0;
	}
}

/* ---------- 主要按鈕(form.customform 的送出鈕) ---------- */
/* .button 系列(橘 / 黃綠 / 灰)、預訂展位的區域分頁、上傳元件的按鈕各有自己的外觀,不套用 */
.fe-ui form.customform button:where(:not(.button, .color-btn, .booth_name_btn, [class*="qq-"])) {
	height: auto;
	min-height: 44px;
	padding: 10px 16px;
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	background: #1d5f88;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color .15s ease-in-out;
}
/* 原本 hover 會變成綠字綠框(user-style.css),深藍底上幾乎看不到字;改成白字、底色加深 */
.fe-ui form.customform button:where(:not(.button, .color-btn, .booth_name_btn, [class*="qq-"])):hover,
.fe-ui form.customform button:where(:not(.button, .color-btn, .booth_name_btn, [class*="qq-"])):active {
	color: #fff;
	background: #174c6d;
	border: 0;
}
.fe-ui form.customform button:disabled,
.fe-ui form.customform button.disabled {
	opacity: .5;
	cursor: not-allowed;
}
.fe-ui form.customform button:where(:not(.button, .color-btn, .booth_name_btn, [class*="qq-"])):disabled:hover,
.fe-ui form.customform button:where(:not(.button, .color-btn, .booth_name_btn, [class*="qq-"])).disabled:hover {
	background: #1d5f88;
}

/* ---------- Facebook / Google 按鈕:與主要按鈕同尺寸(44px、圓角 4px、16px、同字型) ---------- */
.fe-ui a.btn-fb,
.fe-ui a.google-btn {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0;
	margin: 0;
	border-radius: 4px;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	text-decoration: none;
	float: none;
}
.fe-ui a.btn-fb {
	background: #3b5998;
	border: 1px solid #3b5998;
}
.fe-ui a.btn-fb:hover {
	background: #2f477a;
	box-shadow: none;
}
.fe-ui a.google-btn {
	background: #fff;
	border: 1px solid #999;
}
.fe-ui a.google-btn:hover {
	background: #f5f5f5;
	box-shadow: none;
}
.fe-ui a.btn-fb .fb-content {
	height: 42px;
}
.fe-ui a.btn-fb .fb-content .fb-logo {
	display: flex;
	align-items: center;
	padding: 0 13px;
}
.fe-ui a.btn-fb .fb-content p,
.fe-ui a.google-btn .btn-text {
	flex: 1;
	margin: 0;
	padding: 0 44px 0 0;          /* 右邊留出與左側圖示同寬的空白,文字在整顆按鈕置中 */
	float: none;
	width: auto;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: center;
}
.fe-ui a.btn-fb .fb-content p {
	color: #fff;
}
.fe-ui a.google-btn .btn-text {
	color: #444;
}
.fe-ui a.google-btn .btn-text b {
	font-weight: inherit;
}
.fe-ui a.google-btn .google-icon-wrapper {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 42px;
	margin: 0;
}
.fe-ui a.google-btn .google-icon-svg {
	position: static;
	margin: 0;
}

/* ---------- 焦點:鍵盤操作時看得到目前在哪裡 ---------- */
.fe-ui a:focus-visible,
.fe-ui button:focus-visible,
.fe-ui summary:focus-visible,
.fe-ui [tabindex]:focus-visible,
.fe-ui input[type="checkbox"]:focus-visible,
.fe-ui input[type="radio"]:focus-visible,
.fe-ui input[type="file"]:focus-visible {
	outline: 2px solid #1d5f88;
	outline-offset: 2px;
}
/* 深色底(頂列、頁首、頁尾)上用亮黃,深藍外框在深藍底上看不到 */
.fe-ui header a:focus-visible,
.fe-ui header button:focus-visible,
.fe-ui #header_wrapper a:focus-visible,
.fe-ui #header_wrapper button:focus-visible,
.fe-ui #topbar a:focus-visible,
.fe-ui footer a:focus-visible,
.fe-ui #footer a:focus-visible,
.fe-ui .background-dark a:focus-visible {
	outline-color: #ffd24d;
}
/* 輸入框:取代 Bootstrap 3 的淺藍光暈,改成品牌藍框(滑鼠點擊時也顯示,輸入框本來就要看得出正在輸入) */
.fe-ui form.customform :where(input, select, textarea):focus {
	border-color: #1d5f88;
	outline: 2px solid #1d5f88;
	outline-offset: 0;
	box-shadow: none;
}
.fe-ui form.customform input:where([type="checkbox"], [type="radio"]):focus:not(:focus-visible) {
	outline: none;
}

/* ---------- 驗證狀態(FormValidation 0.6:.form-group 加 has-error / has-success) ---------- */
.fe-ui form.customform .has-error :where(input, select, textarea):where(:not([type="checkbox"], [type="radio"])) {
	border-color: #a94442;
	box-shadow: none;
}
.fe-ui form.customform .has-error input[type="file"] {
	border-color: #a94442;
}
.fe-ui form.customform .has-error :where(input, select, textarea):focus {
	border-color: #a94442;
	outline-color: #a94442;
}
.fe-ui form.customform .help-block {
	display: block;
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
}
.fe-ui form.customform .has-error .help-block {
	color: #a94442;
}
/* 不顯示「通過」的綠框 / 綠字:選填欄沒填也會被標成綠色,看起來像已經填好 */
.fe-ui form.customform .has-success :where(input, select, textarea):where(:not([type="checkbox"], [type="radio"])) {
	border-color: #999;
	box-shadow: none;
}
.fe-ui form.customform .has-success :where(input, select, textarea):focus {
	border-color: #1d5f88;
}
.fe-ui form.customform .has-success :where(.help-block, .control-label, label, .radio, .checkbox) {
	color: inherit;
}
/* 「其他(請說明)」是選填的補充欄,和勾選群組在同一個 .form-group;群組沒勾時不要連它一起標紅 */
.fe-ui form.customform .has-error input[name$="_other"] {
	border-color: #999;
}

/* ---------- 表單排版 ---------- */
/* 單欄表單(登入 / 註冊 / 忘記密碼 / 重發驗證信 / 會員與展商的資料表單):最大 480px,手機滿寬 */
.fe-ui .form-narrow {
	max-width: 480px;
}
.fe-ui .form-narrow.center {
	margin-left: auto;
	margin-right: auto;
}
.fe-ui .form-narrow .form-group {
	margin-bottom: 16px;
}
.fe-ui .form-narrow .form-group > label {
	display: block;
	line-height: 1.5;
	margin-bottom: 6px;
}
.fe-ui .form-narrow .form-actions {
	margin-top: 24px;
}
.fe-ui .form-narrow .form-actions > * + * {
	margin-top: 12px;
}
.fe-ui .form-narrow .form-actions button {
	width: 100%;
}
/* 驗證碼列:輸入框撐滿、驗證碼圖固定寬,中間 12px */
.fe-ui .captcha-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.fe-ui .captcha-row > input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}
.fe-ui .captcha-row > .captcha_image,
.fe-ui .captcha-row > #captcha_image {
	flex: 0 0 140px;
	line-height: 0;
	cursor: pointer;
}
/* 欄位右邊接一顆按鈕(預訂展位的展覽下拉 +「現在預定」):中間 12px,窄螢幕上下排時同樣隔 12px */
.fe-ui .field-with-action {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
}
.fe-ui .field-with-action > * {
	float: none;
}
@media screen and (max-width: 768px) {
	.fe-ui .field-with-action > * {
		flex: 0 0 100%;
	}
}
/* 國碼下拉 + 手機號碼:桌機並排、窄螢幕上下兩列(原本國碼下拉在手機上被擠到約 146px,國名被截斷) */
.fe-ui .phone-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.fe-ui form.customform .phone-row > select {
	flex: 0 0 calc(50% - 4px);
	width: calc(50% - 4px);
}
.fe-ui form.customform .phone-row > input {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}
.fe-ui .phone-row > .help-block {
	flex: 0 0 100%;
}
@media screen and (max-width: 480px) {
	.fe-ui form.customform .phone-row > select,
	.fe-ui form.customform .phone-row > input {
		flex: 0 0 100%;
		width: 100%;
	}
}
/* 「或使用其他帳號登入」分隔線 */
.fe-ui .form-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 12px;
	color: #666;
	font-size: 14px;
}
.fe-ui .form-divider::before,
.fe-ui .form-divider::after {
	content: "";
	flex: 1;
	border-top: 1px solid #ddd;
}
/* 表單下方的文字連結(忘記密碼 / 重發驗證信 / 註冊):手機上補足觸控高度 */
.fe-ui .form-links {
	margin-top: 16px;
	line-height: 1.5;
}
.fe-ui .form-links a {
	display: inline-block;
	padding: 6px 0;
}
.fe-ui .form-links .sep {
	margin: 0 8px;
	color: #999;
}

/* ---------- 分頁標籤(訪客 / 展商):觸控高度 44px ---------- */
.fe-ui .tabs a.tab-label {
	min-height: 44px;
	line-height: 1.5;
	padding: 10px 20px;
}
/* 只有一個分頁的頁面(重發驗證信):靠左,與下方欄位對齊(原本 .tab-nav display:table 被置中) */
.fe-ui .tabs > .tab-nav {
	display: initial;
}

/* ---------- 會員區 / 展商專區側欄:手機(≤768px)收成一列「目前頁名 ▾」 ---------- */
/* 原本手機上選單全部展開排在內容上面(展商 8 項 + 子選單約 470~620px),第一屏幾乎看不到內容。
   Responsee 內建的收合只在 ≤480px 生效,這裡延伸到 ≤768px,並改成和側欄同色的一列 */
@media screen and (max-width: 768px) {
	.fe-ui .aside-nav.minimize-on-small .aside-nav-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 48px;
		padding: 10px 16px;
		border: 0;
		background: #2b4c61;
		color: #fff;
		font-family: inherit;
		font-size: 16px;
		line-height: 1.5;
		text-align: left;
		cursor: pointer;
	}
	.fe-ui .aside-nav.minimize-on-small .aside-nav-text::after {
		content: "\f107";
		margin-left: 8px;
		font-family: FontAwesome;
		font-size: 1.2rem;
	}
	.fe-ui .aside-nav.minimize-on-small:has(> ul.show-menu) .aside-nav-text::after {
		content: "\f106";
	}
	.fe-ui .aside-nav.minimize-on-small > ul {
		height: 0;
		overflow: hidden;
	}
	.fe-ui .aside-nav.minimize-on-small > ul.show-menu {
		height: auto;
	}
	/* 手機頁首不是固定定位(user-style.css),原本替固定頁首預留的 50px 上方空白用不到 */
	.fe-ui.app-layout .margin2x.margin-top {
		margin-top: 0 !important;
	}
}

/* ---------- SweetAlert 確認鈕:品牌藍(原本是套件預設的亮藍 #3085d6) ---------- */
.fe-ui .swal2-popup .swal2-styled.swal2-confirm {
	background-color: #1d5f88;
	border-radius: 4px;
}
.fe-ui .swal2-popup .swal2-styled.swal2-confirm:hover {
	background-color: #174c6d;
	background-image: none;
}
.fe-ui .swal2-popup .swal2-styled:focus {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d5f88;
}