/* ===== face-detection.html 專屬（沿用 multidisplay.css 共用元件，2026-09-17）===== */

/* 修正 multidisplay.css 的 .box1 span { display:block; float:left } 把 .gt 也整段換行的問題（比照 retail-solution.css 的做法）*/
.webTechnologies .contents .box1 span.gt { width: auto; float: none; display: inline; }

/* 三種觸發情境卡片（依性別 / 依年齡 / 依人數）*/
.fd-ways {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 900px;
	margin: 22px auto 10px;
	padding: 0 20px;
	box-sizing: border-box;
}

.fd-way {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 24px 18px;
	text-align: center;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
	transition: transform .3s ease, box-shadow .3s ease;
}

.fd-way:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 18px rgba(0, 126, 212, 0.22);
	border-color: #007ED4;
}

.fd-way__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	display: block;
}

.fd-way h3 {
	margin: 0 0 8px;
	font-size: 1.0625em;
	color: #222;
}

.fd-way p {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.6;
	color: #595959;
}

@media only screen and (max-width: 820px) {
	.fd-ways { grid-template-columns: 1fr; gap: 16px; }
}

/* 隱私保護 / 攝影機與 QNAP 整合說明（比照 retail-solution.css 的 .rs-scanner-info）*/
.fd-info-box {
	max-width: 860px;
	margin: 10px auto 0;
	padding: 22px 26px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-left: 4px solid #007ED4;
	border-radius: 8px;
	box-shadow: 0 0 15px rgba(142, 163, 175, .18);
	text-align: left;
}

.fd-info-box p {
	margin: 0 0 12px;
	font-size: 0.95em;
	line-height: 1.7;
	color: #595959;
}

.fd-info-box p:last-child { margin-bottom: 0; }

.fd-info-box__image {
	display: block;
	width: 100%;
	max-width: 480px;
	height: auto;
	margin: 0 auto 16px;
	border-radius: 8px;
}

.fd-info-box a { color: #007ED4; text-decoration: none; font-weight: 500; }
.fd-info-box a:hover { text-decoration: underline; }

/* 單一案例卡（台中智慧公車亭）置中呈現，不用多欄 grid */
.application-cards.single-card {
	grid-template-columns: minmax(260px, 460px);
	justify-content: center;
	max-width: 460px;
	margin: 0 auto;
	padding: 20px;
}

/* AI AudienceSense 架構圖：tab slider（SMP Player only / With NAS，比照 retail 的 .rs-apps 頁籤樣式）*/
.fd-struct { max-width: 760px; margin: 14px auto 0; padding: 0 20px; position: relative; box-sizing: border-box; }
.fd-struct .swiper-wrapper { padding: 0; }
.fd-struct .swiper-slide { height: auto; }
.fd-struct__slide { text-align: center; padding: 6px 0 10px; }
.fd-struct__svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.fd-struct__svg text { font-weight: 400; font-family: "Poppins", "Roboto", "Noto Sans", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans Thai", sans-serif; }
.fd-struct__svg .fd-gt { font-family: good-times, "Poppins", sans-serif; }
.fd-struct__note { max-width: 560px; margin: 14px auto 0; font-size: 0.95em; line-height: 1.7; color: #595959; text-align: center; }
.fd-struct__note .gt { width: auto; float: none; display: inline; }
.fd-struct .swiper-pagination,
.fd-struct .swiper-pagination.swiper-pagination-horizontal,
.fd-struct.swiper-horizontal > .swiper-pagination-bullets { position: static !important; inset: auto !important; transform: none !important; margin: 0 auto 18px !important; max-width: 420px; display: flex; flex-wrap: wrap; gap: 0 28px; justify-content: center; border-bottom: 1px solid #e0e0e0; }
.fd-struct .swiper-pagination-bullet { width: auto; height: auto; background: none; opacity: 1; border-radius: 0; color: #888; font-size: 0.95em; line-height: 1.3; padding: 8px 3px; margin: 0 !important; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.fd-struct .swiper-pagination-bullet:hover { color: #007ED4; }
.fd-struct .swiper-pagination-bullet-active { color: #007ED4; font-weight: 600; border-bottom-color: #007ED4; }
@media only screen and (max-width: 600px) {
	.fd-struct { padding: 0 12px; }
	.fd-struct .swiper-pagination,
	.fd-struct .swiper-pagination.swiper-pagination-horizontal { gap: 0 20px; margin: 0 auto 14px !important; }
}

/* hover / accent 統一用 CAYIN 藍，跟其他重建頁一致；hero 的藍紫漸層只留在 hero */
.face-detection-page .application-card:hover { box-shadow: 0 4px 16px rgba(0, 126, 212, 0.2); border-color: #007ED4; }
.face-detection-page .application-card:hover .card-title { color: #007ED4; }
.face-detection-page .wt-faq summary::after { color: #007ED4; }
.face-detection-page .contact-us-section .mail_btn { background: linear-gradient(225deg, #99b8ff 0%, #5701c1 100%); }
.face-detection-page .player-slider .player-name,
.face-detection-page .webTechnologies .contents .box2 .box21 h2 { color: #007ED4; }