/* 前台版面覆蓋層(2026-11,前台改版第 4 批 F6)
 *
 * 和 controls.css 一樣:只由前台版型在 <head> 最後(controls.css 之後)載入,規則一律以 .fe-ui 開頭,
 * 後台、城市站、海洋明星頁、總站首頁(header_site_view)不受影響。
 * 這支放「版面」:頂列、表格、個別頁的排版;輸入框 / 按鈕 / 焦點等控制項規格在 controls.css。
 * 用法見 docs/系統設計/開發規範.md §3.2。
 */

/* ---------- 頂列(#topbar):一條 flex 列 ---------- */
/* 原本是 l-7 / l-2 / l-3 三欄格線、13.6px、可點高度 15px;390 寬換成 4 行(約 120px),「馬來西亞」被拆成兩行;
   語系橘色、城市 / 帳號綠色、逗號白色。改成:城市(左,撐滿)→ 語系 → 帳號(右),左右對齊下方白色內容框;
   14px、可點高度 32px(≤768px 44px);連結一色,帳號用粗體區分;≤1024px 城市收成「城市 ▾」下拉 */
.fe-ui #topbar {
	padding: 4px 0;
	font-size: 14px;
	line-height: 18px;
}
.fe-ui #topbar .topbar-row {
	display: flex;
	align-items: center;
	gap: 0 16px;
	padding: 0 10px;              /* 與下方 .box 同一左右緣 */
}
.fe-ui #topbar .topbar-row::before,
.fe-ui #topbar .topbar-row::after {
	content: none;                /* Responsee .line 的清除浮動用不到,會變成 flex 項目 */
}
.fe-ui #topbar .topbar-row ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fe-ui #topbar .topbar-row li {
	display: flex;
	align-items: center;
	margin: 0;                    /* 部分頁面 CSS 有全域 ul li{margin-bottom}(會刊表單等) */
	font-size: inherit;
	line-height: inherit;
	white-space: nowrap;          /* 「馬來西亞」不要從字中間斷行 */
}
.fe-ui #topbar .topbar-row li + li::before {
	content: "|";
	color: rgba(255, 255, 255, .35);
}
.fe-ui #topbar .topbar-row a,
.fe-ui #topbar .topbar-cities-toggle {
	display: block;
	min-height: 32px;
	padding: 7px 8px;
	color: #9bb800;               /* Responsee 連結色;語系原本是橘色 */
	font-size: inherit;
	line-height: inherit;
	border-radius: 2px;
}
.fe-ui #topbar .topbar-row a:hover,
.fe-ui #topbar .topbar-cities-toggle:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}
.fe-ui #topbar .topbar-cities {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
@media screen and (max-width: 1024px) {
	.fe-ui #topbar .topbar-cities {
		flex: 1 0 auto;           /* 只剩切換鈕,不要被壓縮;空間不夠時由帳號名稱截斷 */
	}
}
/* 左右負外距 = 連結的左右內距,讓第一個 / 最後一個連結的文字對齊內容框。
   選擇器要帶 .topbar-row(權重 1-3-0):上面 .topbar-row ul{margin:0} 是 1-2-1,只寫 .topbar-back / .topbar-account 會被蓋掉 */
.fe-ui #topbar .topbar-cities > ul,
.fe-ui #topbar .topbar-row .topbar-back {
	flex-wrap: wrap;              /* 英文城市名較長、萬一放不下時換行,不要撐出橫捲 */
	margin-left: -8px;            /* 第一個連結的文字對齊內容框左緣 */
}
.fe-ui #topbar .topbar-back {
	flex: 1 1 auto;
}
.fe-ui #topbar .topbar-lang,
.fe-ui #topbar .topbar-account {
	flex: 0 0 auto;
}
.fe-ui #topbar .topbar-account {
	flex-shrink: 1;
	min-width: 0;
}
.fe-ui #topbar .topbar-row .topbar-account {
	margin-right: -8px;           /* 最後一個連結的文字對齊內容框右緣 */
}
.fe-ui #topbar .topbar-account li:first-child {
	min-width: 0;
}
.fe-ui #topbar .topbar-account-name {
	min-width: 0;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
}
.fe-ui #topbar span.topbar-account-name {
	display: block;
	padding: 7px 8px;
	color: #fff;                  /* 結帳頁的帳號不是連結(離開結帳頁要先確認),維持白字 */
}
/* 城市下拉的切換鈕:只在 ≤1024px 出現 */
.fe-ui #topbar .topbar-cities-toggle {
	display: none;
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}
.fe-ui #topbar .topbar-cities-toggle::after {
	content: "\f107";
	margin-left: 6px;
	font-family: FontAwesome;
}
.fe-ui #topbar .topbar-cities.is-open .topbar-cities-toggle::after {
	content: "\f106";
}
@media screen and (max-width: 1024px) {
	.fe-ui #topbar .topbar-cities-toggle {
		display: inline-block;
		margin-left: -8px;
	}
	.fe-ui #topbar .topbar-cities > ul {
		display: none;
		position: absolute;
		top: 100%;
		left: -8px;
		z-index: 30;
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		min-width: 180px;
		margin: 4px 0 0;
		padding: 4px 0;
		background: #012232;
		border: 1px solid #2b4c61;
		box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
	}
	.fe-ui #topbar .topbar-cities.is-open > ul {
		display: flex;
	}
	.fe-ui #topbar .topbar-cities > ul li::before {
		content: none;
	}
	.fe-ui #topbar .topbar-cities > ul a {
		width: 100%;
		min-height: 44px;
		padding: 13px 16px;
	}
}
@media screen and (max-width: 768px) {
	.fe-ui #topbar {
		padding: 0;
		text-align: left;
	}
	.fe-ui #topbar .topbar-row {
		gap: 0 8px;
	}
	.fe-ui #topbar .topbar-row a,
	.fe-ui #topbar .topbar-cities-toggle,
	.fe-ui #topbar span.topbar-account-name {
		min-height: 44px;
		padding: 13px 8px;
	}
	.fe-ui #topbar .topbar-row li + li::before {
		margin: 0 -2px;
	}
	.fe-ui #topbar .topbar-account-name {
		max-width: none;          /* 手機上依剩餘寬度截斷(flex 壓縮),不另外限寬 */
	}
}
@media screen and (max-width: 400px) {
	.fe-ui #topbar .topbar-row a,
	.fe-ui #topbar .topbar-cities-toggle,
	.fe-ui #topbar span.topbar-account-name {
		padding-left: 6px;
		padding-right: 6px;
	}
	/* 內距變 6px,負外距跟著改,左右仍對齊內容框 */
	.fe-ui #topbar .topbar-cities-toggle,
	.fe-ui #topbar .topbar-row .topbar-back {
		margin-left: -6px;
	}
	.fe-ui #topbar .topbar-row .topbar-account {
		margin-right: -6px;
	}
}

/* ---------- 列表(會員區 / 展商專區的 .table-wrap 表格) ---------- */
/* 表頭的中文不要從字中間斷行(原本「憑證上傳」「付款進度」被擠成一字一行);英文照常在空白處換行 */
.fe-ui .table-wrap th {
	word-break: keep-all;
	overflow-wrap: normal;
}
/* 憑證 / 發票 / 水單:原本只有一個沒有寬高的小圖示連結,手機上很難點、也看不出是什麼;
   改成「圖示 + 下載」的小按鈕(高 32px),多個檔案上下排、中間 4px;檔名仍在 title */
.fe-ui a.file-link,
.fe-ui a.file-link:link,
.fe-ui a.file-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	margin: 2px 0;
	padding: 3px 8px;
	border: 1px solid #c8d3dc;
	border-radius: 4px;
	background: #fff;
	color: #1d5f88;
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
}
.fe-ui a.file-link:hover {
	border-color: #1d5f88;
	background: #e8eef2;
}
.fe-ui a.file-link img {
	width: 20px;
	height: 20px;
	margin: 0;
}
/* 預訂展位的水單:下載 + 刪除排一列 */
.fe-ui .file-item {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
}
.fe-ui .file-item .file-link {
	margin: 0;
}
.fe-ui .table-wrap .fe-btn-sm {
	min-width: 32px;
	padding-left: 8px;
	padding-right: 8px;
}
/* 其他付款紀錄的「請款單下載」文字連結:手機觸控高度補到 32px(行內上下內距不改排版) */
.fe-ui .table-wrap td a[href^="/company/form_invoice"] {
	display: inline-block;
	padding: 6px 0;
}

/* ---------- 提示框(取代整段 #FF0000 純紅大字;純紅只留給欄位錯誤) ---------- */
.fe-ui .notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid #1d5f88;
	border-radius: 4px;
	background: #eef4f8;
	color: #1f3a4d;
	font-size: 16px;
	line-height: 1.6;
}
.fe-ui .notice-warning {
	border-left-color: #c58a00;
	background: #fff8e1;
	color: #5c4400;
}

/* ---------- 展商 Dashboard:參展申請表格清單 ---------- */
/* 「下載簽證邀請函」在 390 寬的狀態欄被擠成一字一行:桌機按鈕文字不斷行;窄螢幕可以換行,但按鈕至少 6 個字寬,
   欄寬才不會被壓到只剩一個字 */
.fe-ui .table .fe-btn-sm {
	white-space: nowrap;
}
@media screen and (max-width: 480px) {
	.fe-ui .table td .fe-btn-sm {
		min-width: 6em;
		padding: 4px 8px;
		line-height: 1.4;
		white-space: normal;
	}
}

/* ---------- 會員首頁(線上訂票)展覽卡片 ---------- */
/* 原本圖片(l-2)與文字框(l-10)是兩個分開的方塊,圖片外框跟著連結變綠;手機上圖片懸空疊在文字框上方。
   改成一張卡片:左圖右文、外框包住整張;≤480px 圖片在上(維持 132×125,不放大) */
.fe-ui .ticket-card {
	display: flex;
	gap: 16px;
	align-items: stretch;
	margin-bottom: 16px;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
}
.fe-ui .ticket-card-img {
	flex: 0 0 132px;
	line-height: 0;
}
.fe-ui .ticket-card-img img {
	width: 132px;                 /* 與原本 inline 尺寸相同 */
	height: 125px;
	border: 1px solid #e5e5e5;
}
.fe-ui .ticket-card .news-text {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	height: auto;
}
.fe-ui .ticket-card .news-text h4 {
	margin-top: 0;
}
.fe-ui .margin > .ticket-card {
	margin-left: .625rem;         /* 外層 .margin 是負邊距(原本由 s-12 的內距抵銷) */
	margin-right: .625rem;
}
@media screen and (max-width: 480px) {
	.fe-ui .ticket-card {
		flex-direction: column;   /* 圖片(原尺寸,不放大)在上、文字在下 */
	}
	.fe-ui .ticket-card-img {
		flex: 0 0 auto;
	}
}

/* ---------- 展商積分摘要:可用積分 / 效期 / 使用紀錄(原本是無框表格,三段間距不一) ---------- */
.fe-ui .info-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.fe-ui .info-cards > li {
	flex: 1 1 180px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid #dfe5ea;
	border-radius: 4px;
	background: #f7f9fb;
	font-size: 16px;
	line-height: 1.5;
}
.fe-ui .info-cards .info-label {
	display: block;
	color: #4b5d6b;
	font-size: 14px;
}
.fe-ui .info-cards .info-value {
	font-size: 20px;
	font-weight: 600;
	color: #00283a;
}
.fe-ui .info-cards .info-link {
	display: flex;
	align-items: center;
}
.fe-ui .info-cards .info-link a {
	display: inline-block;
	padding: 6px 0;
	font-weight: 600;
}

/* ---------- 展商記錄副本(form_copy,獨立頁面) ---------- */
.fe-ui .form-copy {
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 20px 40px;
}
.fe-ui .form-copy .print {
	margin-top: 24px;
}
@media print {
	.fe-ui .form-copy {
		padding: 0;
	}
}

/* ---------- 頁尾(會員區 / 展商專區 / 表單頁):ICP 連結觸控高度 16 → 32px(行內元素上下內距不改排版,F2-23) ---------- */
.fe-ui footer .text-size-12 a {
	padding: 8px 0;
}