/**
 * csp-plugin 專案覆蓋層 (project overrides)
 *
 * 用途：以「覆蓋」方式微調 Elementor 匯出頁面的排版，
 *       避免直接改動 view 模板內嵌的 Elementor min CSS。
 *
 * 覆蓋原則：
 * - 目標頁的 Elementor 內嵌 <style> 位於 <body>，本檔於 <head> 載入，
 *   同 specificity 會被內嵌覆蓋；故一律以「重複 class」提高 specificity
 *   （例如 .elementor-element-XXXX.elementor-element-XXXX，(0,4,0) > (0,3,0)）
 *   確保穩定勝出，且僅覆寫 Elementor 讀取的 CSS 變數，與其排版機制一致。
 * - 選擇器以頁面 wrapper class（.elementor-1453）限定範圍，不外溢其他頁。
 */

/* -------------------------------------------------------------------------
 * 線上申請專區 /main：頁面內容區底色改 #f8f8f8（對齊 260111 設計稿灰底）。
 * 錨點用頁面 wrapper .elementor-1453（滿版、涵蓋 header 以下整個內容區），
 * header/footer 在此 wrapper 之外不受影響；scoped 於本頁不外洩其他 CSP 頁。
 *
 * display:flow-root：wrapper 內第一個 section 有 margin-top:60px 會「margin collapse」
 * 溢出到 wrapper 之外、露出白色 body（灰底與 top bar 間出現 60px 白色落差）。
 * 讓 wrapper 形成 BFC 即可收住該邊距，灰底上移接到 header 底、落差消除。
 * ------------------------------------------------------------------------- */
.elementor-1453 {
	background-color: #f8f8f8;
	display: flow-root;
}

/* -------------------------------------------------------------------------
 * 線上申請專區 /main（Elementor page 1453）— 服務項目總覽
 * 兩張分組卡（帳號資料管理 / 帳號被盜服務）由「左右並排」改為「上下堆疊」，
 * 並取消固定 min-height 使卡片高度貼合內容（比照設計稿 260111）。
 * ------------------------------------------------------------------------- */

/* 兩卡的 flex 容器：橫向 → 縱向堆疊 */
.elementor-1453 .elementor-element.elementor-element-4eab664.elementor-element-4eab664 {
	--flex-direction: column;
}

/* 兩張分組卡：取消 400px 固定高，改貼合內容 */
.elementor-1453 .elementor-element.elementor-element-2f0001b.elementor-element-2f0001b,
.elementor-1453 .elementor-element.elementor-element-822be7a.elementor-element-822be7a {
	--min-height: 0px;
}

/* -------------------------------------------------------------------------
 * 常用服務卡列：三卡等分一列（對齊 260111 §2「flex row + gap 12px + 每卡 flex-1」）
 * 現有卡片為內容寬（各約 365px），補第 3 卡後會爆列換行；改為 flex:1 等分，
 * 使三卡在一列平均分配。以重複-class 提權覆蓋內嵌 min css 的 width:100%。
 * ------------------------------------------------------------------------- */
.elementor-1453 .elementor-element.elementor-element-be75ebe > .elementor-widget-wrap {
	gap: 12px;
}
/* 桌機（≥768px）三卡等分一列；手機維持原本滿版堆疊（避免卡片過窄壓縮 icon） */
@media (min-width: 768px) {
	.elementor-1453 .elementor-element.elementor-element-8b70754.elementor-element-8b70754,
	.elementor-1453 .elementor-element.elementor-element-7ad2f19.elementor-element-7ad2f19,
	.elementor-1453 .elementor-element.elementor-element-589104d.elementor-element-589104d {
		flex: 1 1 0;
		width: auto;
		max-width: none;
	}
}

/* 快捷卡標題行距 line-height 1.8em（放寬兩行標題行距，對齊設計）。
 * 重複-class 提權覆蓋內嵌 min css 的標題樣式。 */
.elementor-1453 .elementor-element.elementor-element-8b70754.elementor-element-8b70754 .elementor-cta__title,
.elementor-1453 .elementor-element.elementor-element-7ad2f19.elementor-element-7ad2f19 .elementor-cta__title,
.elementor-1453 .elementor-element.elementor-element-589104d.elementor-element-589104d .elementor-cta__title {
	line-height: 1.8em;
}

/* 快捷卡固定外框高度 218px（桌機，對齊 260111 §2「每卡高 218px」），
 * 並讓 icon／文字在卡內垂直置中。重複-class 提權確保覆蓋。 */
@media (min-width: 768px) {
	.elementor-1453 .elementor-element.elementor-element-8b70754.elementor-element-8b70754 .elementor-cta__content,
	.elementor-1453 .elementor-element.elementor-element-7ad2f19.elementor-element-7ad2f19 .elementor-cta__content,
	.elementor-1453 .elementor-element.elementor-element-589104d.elementor-element-589104d .elementor-cta__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* 260px ≥ 兩行標題卡(卡1，line-height 1.8em 後自然高 259px)，
		 * 使三卡白底等高填滿邊框盒（§2 基準 218px，本站 45px 上下留白 +
		 * 1.8em 行距使兩行卡較高）。 */
		min-height: 260px;
	}
}

/* 中間卡 icon 外框（.elementor-cta__image）比照兩側卡補到 106px，
 * icon 圖片本身尺寸不變（78×76），於框內置中，使三卡 icon 區等高對齊。
 * 框本即 flex、白色 hover img 為 position:absolute 不佔位，故加 align 安全。 */
.elementor-1453 .elementor-element.elementor-element-7ad2f19.elementor-element-7ad2f19 .elementor-cta__image {
	min-height: 106px;
}

/* 卡2/卡3 標題於 h2 後補的換行（對齊卡1 雙行高度）於手機版隱藏 */
@media (max-width: 767px) {
	.elementor-1453 .elementor-cta__title .csp-br-pc {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 線上申請專區 /main — 常用服務快捷卡「變更進階認證」（新增第 3 卡，id 7ad2f19）
 * 此卡為手動新增，內嵌 Elementor min css 無對應 per-id 樣式；於此鏡射現有卡
 * （8b70754）的視覺，使三卡外觀一致。選擇器沿用 .elementor-1453 前綴限定範圍。
 * ------------------------------------------------------------------------- */
.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta__content {
	text-align: center;
	padding: 10px 10px 10px 10px;
	background-color: #FFFFFF;
}
.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta__image {
	margin-bottom: 0px;
}
.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta__image img {
	width: 100%;
}
.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta__title {
	font-family: "Noto Sans TC", Sans-serif;
	font-size: 1.1rem;
	font-weight: 400;
	color: #727272;
}
.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta__title:not(:last-child) {
	margin-bottom: 5px;
}
.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta:hover .elementor-cta__content {
	background-color: #F19148;
}
.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta:hover .elementor-cta__title {
	color: #FFFFFF;
}
.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta .elementor-cta__bg,
.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta .elementor-cta__bg-overlay {
	transition-duration: 1500ms;
}
.elementor-1453 .elementor-element.elementor-element-7ad2f19 > .elementor-widget-container {
	margin: 0px 0px 0px 6px;
	padding: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #EEEEEE;
	border-radius: 10px 10px 10px 10px;
}
.elementor-1453 .elementor-element.elementor-element-7ad2f19 {
	width: 100%;
	max-width: 100%;
}
@media (max-width: 1024px) {
	.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta__content {
		padding: 10px 10px 10px 10px;
	}
	.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta__title {
		font-size: 18px;
	}
}
@media (max-width: 767px) {
	.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta__content {
		padding: 20px 20px 20px 20px;
	}
	.elementor-1453 .elementor-element.elementor-element-7ad2f19 .elementor-cta__title {
		font-size: 17px;
	}
	.elementor-1453 .elementor-element.elementor-element-7ad2f19 > .elementor-widget-container {
		margin: 5px 5px 5px 5px;
	}
}

/* -------------------------------------------------------------------------
 * 常用服務三卡（手機 <768px）：改「橫式滿版列」— icon 靠左 + 文字 + 右側箭頭
 * 對齊 260111 手機設計稿（每卡 icon 左 / 文字左 / 橘色 chevron 右、卡片撐滿容器）。
 * 桌機維持三卡等分直式（見上方 min-width:768px 區塊，不受影響）。
 * 以 #csp_app_actions（含 id，(1,x,y) 特異度）覆蓋內嵌 min css 與 public.css:164
 * 的 width:50%（(1,1,1)）；桌機等分靠 flex:1 只在 ≥768px，手機需明確改回 100%。
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* 每卡滿版單欄堆疊（覆蓋 public.css:164 #csp_app_actions ... > div{width:50%}） */
	#csp_app_actions .elementor-widget-wrap > div {
		width: 100%;
	}
	/* 卡間距淨 12px（手機）：flex gap 設 12px，並清掉卡片下邊距(內嵌 20px)
	 * 與 widget-container 上下邊距(內嵌 5px)，使三卡間距剛好等於 gap 的 12px。
	 * 以 #csp_app_actions（含 id）壓過內嵌 (0,9,0) 的 :not() 鏈。 */
	#csp_app_actions .elementor-widget-wrap {
		gap: 12px;
	}
	#csp_app_actions .elementor-widget-wrap > .elementor-widget {
		margin-bottom: 0;
	}
	#csp_app_actions .elementor-widget-wrap > div > .elementor-widget-container {
		margin-top: 0;
		margin-bottom: 0;
	}
	/* 卡內容由直式（icon 上／文字下）改橫式：icon 左、文字左、右側留箭頭空間。
	 * 選擇器深度對齊 public.css:168（(1,3,0) padding:45px 0），靠後載順序勝出。 */
	#csp_app_actions .elementor-widget-wrap .elementor-widget-container .elementor-cta__content {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
		padding: 18px 46px 18px 20px;
		min-height: 0;
	}
	/* icon 框縮為 48px、右邊距、不撐開；覆蓋中間卡的 min-height:106 直式設定 */
	#csp_app_actions .elementor-cta__image {
		width: 48px;
		min-height: 0;
		margin: 0 16px 0 0;
		flex: 0 0 48px;
	}
	#csp_app_actions .elementor-cta__image img {
		width: 48px;
		height: auto;
	}
	/* 標題左對齊、正常行距（覆蓋直式的置中與 1.8em 行距） */
	#csp_app_actions .elementor-cta__title {
		text-align: left;
		line-height: 1.4;
		margin: 0;
		font-size: 16px;
	}
	/* 右側橘色 chevron（純 CSS 偽元素，無需改 markup） */
	#csp_app_actions .elementor-cta {
		position: relative;
	}
	#csp_app_actions .elementor-cta__content::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 22px;
		width: 9px;
		height: 9px;
		border-top: 2px solid #FF8300;
		border-right: 2px solid #FF8300;
		transform: translateY(-50%) rotate(45deg);
	}
	/* hover 橘底時 chevron 轉白，與文字一致 */
	#csp_app_actions .elementor-cta:hover .elementor-cta__content::after {
		border-color: #FFFFFF;
	}
}

/* -------------------------------------------------------------------------
 * Header logo 去擠壓（≤1024px，含平板/手機）
 * logo（wp-image-3023，natural 421×62 ≈ 6.79:1）base 正常渲染 210×31；
 * 但 header 模板內嵌 @media(max-width:1024px) 只把 width 改成 135px、height 仍固定
 * 31px（.elementor-32 ...-83c6d18 img，(0,3,1)）→ 橫向擠壓成 135×31（4.35:1）。
 * 這裡以更高特異度 (0,4,1) 在 ≤1024 還原 width:auto（依 height 31 自然回到 210×31），
 * 對齊桌機、消除變形；max-width:100% 保底避免極窄畫面溢出。
 * 註：logo 屬 Elementor header 模板（WP DB post 32），此處以 overrides 全站 CSS 修正。
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor-32 .elementor-element.elementor-element-83c6d18 .elementor-widget-container img {
		width: auto;
		height: 31px;
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * 全站 2b 頁：footer 下方空白 → 移到「內容與 footer 之間」
 * 各頁 Elementor 匯出的內嵌 CSS 把 padding-bottom:100px（手機 150px）打在 <body>，
 * 因 footer（get_footer 的 © 版權列）也在 <body> 內，該 padding 墊在 footer *下方*
 * → 頁尾出現一塊空白。這裡把 body 底部 padding 歸零，改成加在內容 wrapper
 * （[data-elementor-type="wp-page"]）的 margin-bottom，空間回到內容與 footer 之間，
 * footer 貼齊頁尾。
 *
 * 注意：2b 自渲染頁的 <body> 沒有 elementor-page-XXXX class（非標準 Elementor
 * 頁渲染），真正的 100px 來自模板手加的純 body{padding-bottom:100px}=(0,0,1)。
 * 故以 :has() 限定「含 CSP 內容 wrapper 的 body」——既避免全站其他頁誤傷，
 * 特異度 (0,2,1) 也穩勝內嵌純 body 規則。wrapper 選擇器本身即 CSP 頁專屬。
 * ------------------------------------------------------------------------- */
body:has(.elementor[data-elementor-type="wp-page"]) {
	padding-bottom: 0;
	/* 內容 wrapper 是 #f8f8f8，但下方 100px margin 留白露出的是 body 底色。
	   將 body 底色對齊 #f8f8f8，避免留白區塊與內容不同色（原本 /main/ body 為白）。 */
	background-color: #f8f8f8;
}
.elementor[data-elementor-type="wp-page"] {
	margin-bottom: 100px;
}
@media (max-width: 767px) {
	.elementor[data-elementor-type="wp-page"] {
		margin-bottom: 150px;
	}
}

/* -------------------------------------------------------------------------
 * 全站 Elementor 按鈕：focus 指標由瀏覽器預設藍框 → 品牌橘色
 * 模板僅 button.elementor-button{border:none}，未覆寫 outline，故 focus 時
 * 顯示瀏覽器預設藍色 outline。這裡改成品牌橘（#FF8300）並用 outline-offset 拉開
 * 與橘色按鈕的間距（露出頁面灰底成一圈可辨識的環），保留無障礙可及性指標。
 * 涵蓋 <a class="elementor-button">（回上一頁）與 <button class="elementor-button">（下一步）。
 *
 * 特異度：主題 normalize 有 [type="submit"]:focus, button:focus{outline:auto}=(0,2,0)，
 * 與 .elementor-button:focus 平手且後載入而勝出；故以重複-class 提到 (0,3,0) 穩勝。
 * ------------------------------------------------------------------------- */
.elementor-button.elementor-button:focus {
	outline: 2px solid #FF8300;
	outline-offset: 3px;
}