/**
 * SC-ICG Compat — Easy Login WooCommerce 表單視覺統一。
 *
 * 設計語彙對齊 sc-icg-ysco 的結帳頁登入區塊；配色跟隨各站 Blocksy 主視覺色。
 * selector 一律以 .xoo-el-form-container 起頭，因此 modal 彈窗、inline 嵌入、
 * my-account 與 checkout 的 ELW 表單會得到同一套外觀。
 *
 * 權重策略：本檔以 deps 掛在 xoo-el-style / xoo-aff-style 之後，
 * 同權重即勝出，故除 ELW 自己用了 !important 的極少數位置外一律不用 !important。
 * 詳細背景見 inc/elw-style.php 檔頭。
 */

/* ===============================================================
 * 1. 設計 token
 *
 * 色票來源與 sc-icg-ysco 一致（Blocksy --theme-palette-color-*），
 * 非 Blocksy 主題會落回中性灰階，不會失控成無色。
 * --scc-elw-pad-left 由 PHP 依後台 s-show-icons 覆寫。
 * =============================================================== */
.xoo-el-container,
.xoo-el-form-container {
	--scc-elw-primary: var(--theme-palette-color-1, #333333);
	--scc-elw-accent:  var(--theme-palette-color-2, #555555);
	--scc-elw-text:    var(--theme-palette-color-3, #444444);
	--scc-elw-title:   var(--theme-palette-color-4, #1a1a1a);

	--scc-elw-border:     color-mix(in srgb, var(--scc-elw-primary) 25%, transparent);
	--scc-elw-border-str: color-mix(in srgb, var(--scc-elw-primary) 45%, transparent);
	--scc-elw-surface:    color-mix(in srgb, var(--scc-elw-primary) 4%, #fff);
	--scc-elw-hover:      color-mix(in srgb, var(--scc-elw-primary) 75%, #000);
	--scc-elw-ring:       color-mix(in srgb, var(--scc-elw-primary) 18%, transparent);

	--scc-elw-label: #5a6570;
	--scc-elw-muted: #8a939c;
	--scc-elw-white: #ffffff;

	--scc-elw-radius:   8px;
	--scc-elw-radius-s: 6px;
	--scc-elw-field-h:  44px;
	--scc-elw-gap:      14px;

	/* 欄位內距。左內距由 PHP 依「是否顯示欄位圖示」決定，
	 * 右內距必須獨立——密碼欄的眼睛圖示恆存在，不能跟著圖示設定縮掉。 */
	--scc-elw-pad-x:       14px;
	--scc-elw-icon-w:      40px;
	--scc-elw-pad-left:    var(--scc-elw-pad-x);
	--scc-elw-pw-pad:      40px;
	--scc-elw-icon-display: none;
}

/* ===============================================================
 * 2. 容器
 * =============================================================== */

/* modal 內容區：ELW 後台的 padding 設定常年偏小，統一給呼吸空間 */
.xoo-el-container .xoo-el-main {
	padding: 28px;
}

.xoo-el-form-container {
	color: var(--scc-elw-text);
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
}

/* ===============================================================
 * 3. Tabs（登入 / 註冊）
 *
 * 取代 ELW 預設的色塊式 tab，改為底線式。
 * ELW 的對應規則權重為 0-2-2（一般）與 0-3-2（active），此處刻意同權重靠載入順序勝出。
 * =============================================================== */
.xoo-el-form-container .xoo-el-header {
	margin-bottom: 22px;
}

.xoo-el-form-container ul.xoo-el-tabs {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--scc-elw-border);
}

.xoo-el-form-container ul.xoo-el-tabs li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 2px 12px;
	background-color: transparent;
	color: var(--scc-elw-muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	position: relative;
	transition: color 0.2s;
}

.xoo-el-form-container ul.xoo-el-tabs li:hover {
	color: var(--scc-elw-text);
}

.xoo-el-form-container ul.xoo-el-tabs li.xoo-el-active {
	background-color: transparent;
	color: var(--scc-elw-primary);
	font-weight: 600;
}

/* 底線指示器：畫在 li 上並下移 1px 蓋住 ul 的底線 */
.xoo-el-form-container ul.xoo-el-tabs li.xoo-el-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background-color: var(--scc-elw-primary);
	border-radius: 2px 2px 0 0;
}

/* ===============================================================
 * 4. 表單骨架
 *
 * 間距一律交給 flex gap，避免 ELW 後台的 s-field-bmargin 讓各站節奏不一。
 * hidden input 不參與 flex（UA 樣式為 display:none），不會多出空隙。
 * =============================================================== */
/*
 * ELW 靜態 CSS 給 .xoo-el-section 一個 padding-left: 20px，
 * 但 tabs 是左右對稱的 padding——結果欄位整組比 tabs 多縮 20px。
 * 這裡歸零，改由外層容器統一控制左右留白。
 */
.xoo-el-form-container .xoo-el-section {
	padding-left: 0;
}

.xoo-el-form-container .xoo-el-action-form {
	display: flex;
	flex-direction: column;
	gap: var(--scc-elw-gap);
	margin: 0;
}

/*
 * 保留 ELW 原本的橫向 flex-wrap，只把垂直節奏換成 row-gap。
 *
 * 不可改成 flex-direction: column——ELW 給 .xoo-aff-group 的是 align-self: flex-end，
 * 在橫向 flex 裡意思是「底部對齊」（讓不同標籤高度的欄位輸入框對齊同一條底線）；
 * 一旦改成直向，同一條規則的意義變成「靠右對齊」，欄位會整組右移 20px 與按鈕錯開。
 * column-gap 歸零則是因為 AFF 的欄距本來就用 margin-right: 20px 做，會重複加總。
 */
.xoo-el-form-container .xoo-el-fields-cont {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--scc-elw-gap);
	column-gap: 0;
}

.xoo-el-form-container .xoo-aff-group {
	margin: 0;
	padding: 0;
	position: relative;
}

/*
 * AFF 給所有 .xoo-aff-group 的寬度是 calc(100% - 20px)，那 20px 是橫向欄距的預留位。
 * 單欄（.one）不需要，否則欄位會比同層的送出按鈕窄 20px。
 * 只鎖定 .one，不動 .onehalf / .onethird 等多欄配置。
 */
.xoo-el-form-container .xoo-aff-group.one {
	width: 100%;
	margin-right: 0;
}

/*
 * form 本身是直向 flex，其直接子項（如「記住我／忘記密碼」那列）
 * 同樣會被 align-self: flex-end 推到右緣，需明確回正。
 */
.xoo-el-form-container .xoo-el-action-form > .xoo-aff-group {
	width: 100%;
	align-self: stretch;
	margin-right: 0;
}

/* 說明文字（忘記密碼區塊的引導語） */
.xoo-el-form-container .xoo-el-form-txt {
	display: block;
	margin: 0;
	color: var(--scc-elw-label);
	font-size: 13px;
	line-height: 1.6;
}

/* ===============================================================
 * 5. 欄位
 *
 * ELW 新版模板的欄位權重為 0-2-1（.xoo-aff-group input[type="x"].xoo-aff-field），
 * 此處用 0-3-1 蓋過，同時涵蓋舊版模板的 0-1-1。
 * =============================================================== */

/* 標籤：僅在後台該欄位開啟「顯示標籤」時才存在 */
.xoo-el-form-container .xoo-aff-group label.xoo-aff-label {
	display: block;
	margin: 0 0 6px;
	color: var(--scc-elw-label);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.xoo-el-form-container .xoo-aff-group .xoo-aff-input-group {
	position: relative;
	display: block;
}

.xoo-el-form-container .xoo-aff-group input.xoo-aff-field,
.xoo-el-form-container .xoo-aff-group select.xoo-aff-field {
	width: 100%;
	height: var(--scc-elw-field-h);
	margin: 0;
	padding: 0 var(--scc-elw-pad-x) 0 var(--scc-elw-pad-left);
	box-sizing: border-box;
	background-color: var(--scc-elw-white);
	color: var(--scc-elw-text);
	font-size: 14px;
	line-height: normal;
	border: 1px solid var(--scc-elw-border);
	border-radius: var(--scc-elw-radius);
	box-shadow: none;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

/* 密碼欄要留出右側眼睛圖示的位置——與左側圖示設定無關，恆為 --scc-elw-pw-pad */
.xoo-el-form-container .xoo-aff-cont-password input.xoo-aff-field {
	padding-right: var(--scc-elw-pw-pad);
}

.xoo-el-form-container .xoo-aff-group input.xoo-aff-field::placeholder {
	color: var(--scc-elw-muted);
	opacity: 1;
}

/*
 * focus 改用 ring，不換底色。
 * ELW 舊版模板的 focus 是把 background-color 換成後台設定值，各站設定不一、
 * 視覺跳動明顯；ring 只動邊框與外圈，任何底色下都成立。
 */
.xoo-el-form-container .xoo-aff-group input.xoo-aff-field:focus,
.xoo-el-form-container .xoo-aff-group select.xoo-aff-field:focus {
	background-color: var(--scc-elw-white);
	color: var(--scc-elw-text);
	border-color: var(--scc-elw-primary);
	box-shadow: 0 0 0 3px var(--scc-elw-ring);
	outline: none;
}

/* 瀏覽器自動填入時強行套上的黃/藍底 */
.xoo-el-form-container .xoo-aff-group input.xoo-aff-field:-webkit-autofill {
	-webkit-text-fill-color: var(--scc-elw-text);
	-webkit-box-shadow: 0 0 0 1000px var(--scc-elw-white) inset;
}

/* ---------------------------------------------------------------
 * 5a. 欄位圖示
 *
 * ELW 預設把圖示做成貼在輸入框左側的獨立灰色色塊（inline CSS 給 40px 寬 + #eee 底）。
 *
 * 預設隱藏，對齊參考稿的乾淨欄位。實測改成「框內 inset 的透明圖示」並不理想：
 * 一個 14px 的字符被關在 40px 的空框裡，左右各留約 13px 空白，讀起來就是一段莫名的空隙，
 * 反而比沒有圖示更雜。要保留圖示的站可用 filter sc_icg_compat_elw_style_field_icons 開啟，
 * 屆時 PHP 會把 --scc-elw-pad-left 撐到 --scc-elw-icon-w 讓出位置。
 *
 * 權重需壓過 ELW 的 body:not(.rtl) .xoo-aff-input-group .xoo-aff-input-icon（0-3-1），
 * 故此處刻意寫到 0-4-0。
 * --------------------------------------------------------------- */
.xoo-el-form-container .xoo-aff-group .xoo-aff-input-group .xoo-aff-input-icon {
	position: absolute;
	left: 1px;
	top: 1px;
	bottom: 1px;
	z-index: 2;
	display: var(--scc-elw-icon-display);
	align-items: center;
	justify-content: center;
	min-width: calc(var(--scc-elw-icon-w) - 2px);
	max-width: calc(var(--scc-elw-icon-w) - 2px);
	background-color: transparent;
	color: var(--scc-elw-muted);
	font-size: 14px;
	border: 0;
	border-radius: var(--scc-elw-radius) 0 0 var(--scc-elw-radius);
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * 5b. 密碼顯示切換
 * --------------------------------------------------------------- */
.xoo-el-form-container .xoo-aff-group .xoo-aff-pw-toggle {
	position: absolute;
	right: 1px;
	top: 1px;
	bottom: 1px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--scc-elw-pw-pad) - 2px);
	background-color: transparent;
	color: var(--scc-elw-muted);
	font-size: 14px;
	cursor: pointer;
	transition: color 0.2s;
}

.xoo-el-form-container .xoo-aff-group .xoo-aff-pw-toggle:hover {
	color: var(--scc-elw-text);
}

/* 必填星號：ELW 絕對定位在欄位右上，與眼睛圖示會疊在一起 */
.xoo-el-form-container .xoo-aff-cont-password.xoo-aff-cont-required::after {
	display: none;
}

/* ===============================================================
 * 6. 記住我 / 忘記密碼
 * =============================================================== */
.xoo-el-form-container .xoo-el-login-btm-fields {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 13px;
}

.xoo-el-form-container .xoo-el-login-btm-fields .xoo-el-form-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--scc-elw-label);
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}

.xoo-el-form-container .xoo-el-login-btm-fields input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--scc-elw-primary);
	border-radius: 4px;
	cursor: pointer;
}

.xoo-el-form-container .xoo-el-lostpw-tgr {
	color: var(--scc-elw-primary);
	font-size: 13px;
	text-decoration: none;
	transition: color 0.2s;
}

.xoo-el-form-container .xoo-el-lostpw-tgr:hover {
	color: var(--scc-elw-hover);
	text-decoration: underline;
}

/* ===============================================================
 * 7. 送出按鈕
 *
 * ELW 的按鈕規則權重為 0-5-1
 * （.xoo-el-form-container button[type="submit"].btn.button.xoo-el-action-btn），
 * 是整份樣式表最高的一條，此處以同一組 selector 對等權重靠載入順序勝出。
 * =============================================================== */
.xoo-el-form-container button[type="submit"].btn.button.xoo-el-action-btn,
.xoo-el-form-container button.btn.button.xoo-el-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	height: var(--scc-elw-field-h);
	margin: 0;
	padding: 0 16px;
	box-sizing: border-box;
	background-color: var(--scc-elw-primary);
	color: var(--scc-elw-white);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none;
	border: 1px solid var(--scc-elw-primary);
	border-radius: var(--scc-elw-radius);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.xoo-el-form-container button[type="submit"].btn.button.xoo-el-action-btn:hover,
.xoo-el-form-container button.btn.button.xoo-el-action-btn:hover {
	background-color: var(--scc-elw-hover);
	color: var(--scc-elw-white);
	border-color: var(--scc-elw-hover);
	border-radius: var(--scc-elw-radius);
}

.xoo-el-form-container button.btn.button.xoo-el-action-btn:focus-visible {
	outline: 2px solid var(--scc-elw-primary);
	outline-offset: 2px;
}

/* 送出中：ELW 會把 spinner 塞進按鈕 */
.xoo-el-form-container button.btn.button.xoo-el-action-btn .xoo-el-spinner {
	margin-right: 8px;
}

/* ===============================================================
 * 8. 通知訊息
 *
 * 外層 .xoo-el-notice 的 display 由 ELW 的 JS 控制，此處絕不碰 display，
 * 只設定內層樣式，否則錯誤訊息會被永久顯示或永久隱藏。
 * =============================================================== */
.xoo-el-form-container .xoo-el-notice:not(:empty) {
	margin-bottom: var(--scc-elw-gap);
}

.xoo-el-form-container .xoo-el-notice-error,
.xoo-el-form-container .xoo-el-notice-success,
.xoo-el-form-container .xoo-el-notice-warning {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.5;
	border: 1px solid;
	border-radius: var(--scc-elw-radius-s);
}

.xoo-el-form-container .xoo-el-notice-error {
	background-color: #fdf0ef;
	color: #c0392b;
	border-color: #f5c6cb;
}

.xoo-el-form-container .xoo-el-notice-warning {
	background-color: #fdf7e7;
	color: #a06b00;
	border-color: #f2e0b5;
}

.xoo-el-form-container .xoo-el-notice-success {
	background-color: #edfbf0;
	color: #27ae60;
	border-color: #c3e6cb;
}

.xoo-el-form-container .xoo-el-notice-icon {
	flex: 0 0 auto;
	margin-top: 1px;
	font-size: 14px;
}

.xoo-el-form-container .xoo-el-noticetitle {
	font-weight: 600;
}

/* ===============================================================
 * 9. Turnstile（由 sc-icg-spam-guard 注入）
 *
 * lazy load 前高度為 0、載入後撐開 65px，會把按鈕往下推。
 * 預留高度消除這個 layout shift。
 * =============================================================== */
.xoo-el-form-container .scsg-turnstile-elw {
	min-height: 65px;
	margin-bottom: 0;
}

/* ===============================================================
 * 10. Modal 外殼
 *
 * inline 嵌入不會有這些節點，規則自動不生效。
 * =============================================================== */
/*
 * 這裡刻意不加 overflow: hidden。
 * ELW 的關閉鈕是 span.xoo-el-close { position:absolute; right:-9px; top:-12px }，
 * 故意突出在 modal 外緣——一旦裁切，popup 開了就關不掉。
 * 圓角由 ELW 自己加在 .xoo-el-sidebar 與 .xoo-el-srcont 的外側角，不需在這層重複。
 */

.xoo-el-container .xoo-el-srcont {
	background-color: var(--scc-elw-white);
}

.xoo-el-container .xoo-el-close {
	color: var(--scc-elw-muted);
	transition: color 0.2s;
}

.xoo-el-container .xoo-el-close:hover {
	color: var(--scc-elw-text);
}

/* ===============================================================
 * 11. RWD
 * =============================================================== */
@media (max-width: 480px) {
	.xoo-el-container .xoo-el-main {
		padding: 20px;
	}

	.xoo-el-form-container ul.xoo-el-tabs {
		gap: 18px;
	}

	.xoo-el-form-container ul.xoo-el-tabs li {
		font-size: 14px;
	}

	/* iOS Safari 在 font-size < 16px 的輸入框上會自動放大整頁 */
	.xoo-el-form-container .xoo-aff-group input.xoo-aff-field,
	.xoo-el-form-container .xoo-aff-group select.xoo-aff-field {
		font-size: 16px;
	}
}