/**
 * 我的帳戶版型。
 *
 * 所有可調整的部分都走 CSS 變數，--swk-accent 與 --swk-radius 由後台設定
 * 以 inline style 注入。要接主題配色的話，在子主題覆寫這些變數即可，
 * 例如：.swk-account { --swk-accent: var(--e-global-color-primary); }
 */

.swk-account {
	/* 智慧多層色彩：後台設定 -> Elementor 全域主色 -> WP 主題色 -> 預設色 */
	--swk-accent-color: var(--swk-accent, var(--e-global-color-primary, var(--wp--preset--color--primary, #18181b)));
	--swk-bg: #fff;
	--swk-text: #1f2937;
	--swk-muted: #6b7280;
	--swk-border: #e5e7eb;
	--swk-hover-bg: color-mix( in srgb, var(--swk-accent-color) 10%, transparent );
	--swk-active-bg: color-mix( in srgb, var(--swk-accent-color) 14%, transparent );
	--swk-shadow: 0 8px 24px rgba( 15, 23, 42, 0.06 );
	--swk-gap: 24px;
}

/* ---------- 版面與外層容器 ---------- */

body.swk-account .site-main,
body.swk-account #primary,
body.swk-account #content.site-main {
	max-width: 1200px !important;
	margin: 32px auto 60px auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

/* woocommerce-account 與 swk-account 都是 body 的 class，所以這裡不能寫成
   後代選擇器（.swk-account .woocommerce-account），那樣永遠不會命中。
   直接以 .swk-account 為根往下找 WooCommerce 輸出的容器即可 —— 不論
   my-account 頁是純 shortcode 還是包在 Elementor 的 shortcode widget 裡，
   .woocommerce 這層都存在。 */

body.swk-account .woocommerce,
body.swk-account .woocommerce-MyAccount-content,
body.swk-account .woocommerce-MyAccount-navigation {
	box-sizing: border-box;
}

body.swk-account .woocommerce {
	display: grid;
	gap: var(--swk-gap);
	align-items: start;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

body.swk-account .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	width: 100%;
}

@media ( min-width: 900px ) {
	.swk-account--sidebar .woocommerce {
		grid-template-columns: minmax( 200px, 260px ) 1fr;
	}

	.swk-account--sidebar .woocommerce-MyAccount-navigation {
		grid-column: 1;
	}

	.swk-account--sidebar .woocommerce-MyAccount-content {
		grid-column: 2;
	}
}

.swk-account--tabs .woocommerce {
	grid-template-columns: 1fr;
}

/* WooCommerce 預設用 float 排版，這裡一併清掉，避免跟 grid 打架。 */
.swk-account .woocommerce-MyAccount-navigation,
.swk-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* ---------- 選單 ---------- */

.swk-account .swk-account-nav__panel {
	background: var(--swk-bg);
	border: 1px solid var(--swk-border);
	border-radius: var(--swk-radius, 14px);
	box-shadow: var(--swk-shadow);
	padding: 10px;
}

@media ( min-width: 900px ) {
	.swk-account--sidebar .swk-account-nav__panel {
		position: sticky;
		top: 24px;
	}
}

.swk-account .swk-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.swk-account--tabs .swk-account-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.swk-account .swk-account-nav__list li {
	margin: 2px 0;
}

.swk-account .swk-account-nav__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	border-radius: calc( var(--swk-radius, 14px) - 4px );
	color: var(--swk-text);
	text-decoration: none;
	line-height: 1.4;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.swk-account .swk-account-nav__list a:hover,
.swk-account .swk-account-nav__list a:focus-visible {
	background-color: var(--swk-hover-bg);
	color: var(--swk-accent-color);
}

.swk-account .swk-account-nav__list li.is-active > a {
	background-color: var(--swk-active-bg);
	color: var(--swk-accent-color);
	font-weight: 600;
}

.swk-account .swk-account-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	color: currentColor;
}

.swk-account .swk-account-icon__img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* 登出獨立成一區。 */
.swk-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--swk-border);
}

.swk-account--tabs .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	margin-left: auto;
}

/* ---------- 內容區 ---------- */

.swk-account .woocommerce-MyAccount-content {
	background: var(--swk-bg);
	border: 1px solid var(--swk-border);
	border-radius: var(--swk-radius, 14px);
	box-shadow: var(--swk-shadow);
	padding: clamp( 16px, 3vw, 28px );
}

.swk-account .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

/* ---------- 系統訊息與通知（方案 A：現代極簡中性風） ---------- */

body.swk-account .woocommerce-info,
body.swk-account .woocommerce-message,
body.swk-account .woocommerce-error {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap;
	gap: 16px;
	position: relative !important;
	padding: 16px 20px !important;
	box-sizing: border-box !important;
	background: #f9fafb !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.03 ) !important;
	color: #374151 !important;
	font-size: 0.925rem !important;
	font-weight: 500 !important;
	line-height: 1.5;
	margin: 0 0 16px 0 !important;
}

body.swk-account .woocommerce-info:last-child,
body.swk-account .woocommerce-message:last-child,
body.swk-account .woocommerce-error:last-child {
	margin-bottom: 0 !important;
}

body.swk-account .woocommerce-message {
	background: #f0fdf4 !important;
	border-color: #bbf7d0 !important;
	color: #166534 !important;
}

body.swk-account .woocommerce-error {
	background: #fef2f2 !important;
	border-color: #fecaca !important;
	color: #991b1b !important;
}

/* 關閉 WooCommerce 內建清除浮動用的 ::after，避免在 flex 容器中變成多餘空白區塊 */
body.swk-account .woocommerce-info::after,
body.swk-account .woocommerce-message::after,
body.swk-account .woocommerce-error::after {
	display: none !important;
	content: none !important;
}

/* 向量 SVG Mask 圖示 */
body.swk-account .woocommerce-info::before,
body.swk-account .woocommerce-message::before,
body.swk-account .woocommerce-error::before {
	content: "" !important;
	display: inline-block !important;
	position: static !important;
	order: -1 !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	flex-shrink: 0 !important;
	margin: 0 2px 0 0 !important;
	background-color: #64748b !important;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

body.swk-account .woocommerce-message::before {
	background-color: #10b981 !important;
}

body.swk-account .woocommerce-error::before {
	background-color: #ef4444 !important;
}

body.swk-account .woocommerce-info::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

body.swk-account .woocommerce-message::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

body.swk-account .woocommerce-error::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

/* 通知按鈕：方案 A 精緻次級外框按鈕，消除底部多餘間距 */
body.swk-account .woocommerce-info .button,
body.swk-account .woocommerce-message .button,
body.swk-account .woocommerce-error .button {
	order: 1 !important;
	margin: 0 0 0 auto !important;
	float: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 16px !important;
	height: 34px !important;
	min-height: 34px !important;
	line-height: 1 !important;
	font-size: 0.825rem !important;
	font-weight: 500 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	border: 1px solid #d1d5db !important;
	color: #374151 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ) !important;
	transition: all 0.15s ease !important;
	vertical-align: middle !important;
}

body.swk-account .woocommerce-info .button:hover,
body.swk-account .woocommerce-message .button:hover,
body.swk-account .woocommerce-error .button:hover {
	background: #ffffff !important;
	color: var(--swk-accent-color) !important;
	border-color: var(--swk-accent-color) !important;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.08 ) !important;
	transform: translateY( -1px ) !important;
}

/* 頁面標題優化：高權重覆蓋 Hello Elementor 的 1140px 限縮與自動左右邊距 */
body.swk-account .page-header,
body.swk-account .entry-header {
	max-width: 100% !important;
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

body.swk-account .entry-title {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	font-size: clamp( 1.75rem, 3vw, 2.25rem ) !important;
	color: var(--swk-text) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}

/* ---------- 地址管理卡片 (Addresses Dual Cards) ---------- */

body.swk-account .woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ) !important;
	gap: 20px !important;
	margin-top: 24px !important;
	width: 100% !important;
}

body.swk-account .woocommerce-Addresses::before,
body.swk-account .woocommerce-Addresses::after {
	display: none !important;
}

body.swk-account .woocommerce-Address {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 22px !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	border: 1px solid var(--swk-border, #e5e7eb) !important;
	border-radius: var(--swk-radius, 14px) !important;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.04 ) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.swk-account .woocommerce-Address:hover {
	border-color: color-mix( in srgb, var(--swk-accent-color) 45%, var(--swk-border, #e5e7eb) ) !important;
	box-shadow: 0 4px 14px rgba( 15, 23, 42, 0.06 ) !important;
}

body.swk-account .woocommerce-Address-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin: 0 0 16px 0 !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid var(--swk-border, #f3f4f6) !important;
	width: 100% !important;
}

body.swk-account .woocommerce-Address-title h2,
body.swk-account .woocommerce-Address-title h3 {
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: #111827 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

body.swk-account .woocommerce-Address-title .edit {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 5px 12px !important;
	font-size: 0.8rem !important;
	font-weight: 500 !important;
	color: #4b5563 !important;
	background: #f9fafb !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}

body.swk-account .woocommerce-Address-title .edit:hover {
	color: var(--swk-accent-color) !important;
	border-color: var(--swk-accent-color) !important;
	background: #ffffff !important;
}

body.swk-account .woocommerce-Address address {
	font-style: normal !important;
	font-size: 0.925rem !important;
	line-height: 1.7 !important;
	color: #4b5563 !important;
	margin: 0 !important;
	flex-grow: 1 !important;
	white-space: normal !important;
}

/* ---------- 表單與帳戶詳細資料優化 ---------- */

body.swk-account .woocommerce form .form-row {
	display: block;
	margin-bottom: 20px;
	padding: 0;
}

body.swk-account .woocommerce form .form-row label,
body.swk-account .woocommerce-address-fields__field label {
	display: block !important;
	margin-bottom: 7px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #374151 !important;
	line-height: 1.4 !important;
}

body.swk-account .woocommerce form .form-row label .required,
body.swk-account .woocommerce-address-fields__field label .required {
	color: #ef4444 !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	margin-left: 2px !important;
}

body.swk-account .woocommerce form .input-text,
body.swk-account .woocommerce form select,
body.swk-account .woocommerce form textarea,
body.swk-account .swk-district-select {
	width: 100% !important;
	box-sizing: border-box !important;
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	font: inherit !important;
	font-size: 0.925rem !important;
	color: #1f2937 !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.swk-account .woocommerce form textarea {
	height: auto !important;
	min-height: 88px !important;
	padding: 10px 14px !important;
}

body.swk-account .woocommerce form .input-text:focus,
body.swk-account .woocommerce form select:focus,
body.swk-account .woocommerce form textarea:focus {
	outline: none !important;
	border-color: var(--swk-accent-color) !important;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--swk-accent-color) 20%, transparent ) !important;
}

body.swk-account .woocommerce form .woocommerce-invalid .input-text {
	border-color: #ef4444 !important;
}

/* 顯示名稱輔助說明文字 */
body.swk-account #account_display_name_description {
	display: block !important;
	margin-top: 6px !important;
	font-size: 0.8125rem !important;
	color: #6b7280 !important;
	font-style: normal !important;
	line-height: 1.4 !important;
}

body.swk-account #account_display_name_description em {
	font-style: normal !important;
}

/* 變更密碼區塊：去除原生 fieldset 框線，改用現代分隔線與區塊標題 */
body.swk-account form.woocommerce-EditAccountForm fieldset {
	border: 0 !important;
	padding: 28px 0 0 0 !important;
	margin: 36px 0 0 0 !important;
	border-top: 1px solid var(--swk-border, #e5e7eb) !important;
	width: 100% !important;
}

body.swk-account form.woocommerce-EditAccountForm fieldset legend {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: #111827 !important;
	padding: 0 0 16px 0 !important;
	margin: 0 !important;
	display: block !important;
	width: 100% !important;
	float: none !important;
	border: 0 !important;
}

/* 姓名等成對欄位在桌機並排 */
@media ( min-width: 768px ) {
	body.swk-account .woocommerce-address-fields__field-wrapper,
	body.swk-account form.woocommerce-EditAccountForm,
	body.swk-account form.woocommerce-EditAccountForm fieldset {
		display: grid !important;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
		column-gap: 16px !important;
	}

	body.swk-account .woocommerce-address-fields__field-wrapper > *,
	body.swk-account form.woocommerce-EditAccountForm > *,
	body.swk-account form.woocommerce-EditAccountForm fieldset > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	body.swk-account .woocommerce-address-fields__field-wrapper > .form-row-first,
	body.swk-account .woocommerce-address-fields__field-wrapper > .form-row-last,
	body.swk-account form.woocommerce-EditAccountForm > .form-row-first,
	body.swk-account form.woocommerce-EditAccountForm > .form-row-last {
		grid-column: span 1;
	}

	/* 密碼欄位：新密碼與確認新密碼並排 */
	body.swk-account form.woocommerce-EditAccountForm fieldset p:has(#password_1),
	body.swk-account form.woocommerce-EditAccountForm fieldset p:has(#password_2) {
		grid-column: span 1 !important;
	}
}

/* 儲存設定按鈕 */
body.swk-account .woocommerce-Button,
body.swk-account .woocommerce button[type="submit"] {
	min-height: 44px !important;
	height: 44px !important;
	padding: 0 28px !important;
	border-radius: 8px !important;
	background-color: var(--swk-accent-color) !important;
	border: 1px solid var(--swk-accent-color) !important;
	color: #fff !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

body.swk-account .woocommerce-Button:hover,
body.swk-account .woocommerce button[type="submit"]:hover {
	filter: brightness( 0.92 ) !important;
	box-shadow: 0 4px 12px color-mix( in srgb, var(--swk-accent-color) 25%, transparent ) !important;
}

/* ---------- 手機抽屜 ---------- */

.swk-account .swk-account-nav__trigger,
.swk-account .swk-account-nav__close {
	display: none;
}

@media ( max-width: 899px ) {
	.swk-account .swk-account-nav__trigger {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 11px 16px;
		border: 1px solid var(--swk-border);
		border-radius: calc( var(--swk-radius, 14px) - 4px );
		background: var(--swk-bg);
		color: var(--swk-text);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}

	.swk-account .swk-account-nav__burger,
	.swk-account .swk-account-nav__burger::before,
	.swk-account .swk-account-nav__burger::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}

	.swk-account .swk-account-nav__burger {
		position: relative;
	}

	.swk-account .swk-account-nav__burger::before,
	.swk-account .swk-account-nav__burger::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.swk-account .swk-account-nav__burger::before {
		top: -6px;
	}

	.swk-account .swk-account-nav__burger::after {
		top: 6px;
	}

	.swk-account .swk-account-nav__close {
		display: block;
		margin: 0 0 4px auto;
		padding: 6px;
		border: 0;
		background: transparent;
		color: var(--swk-muted);
		cursor: pointer;
	}

	.swk-account .swk-account-nav__overlay {
		position: fixed;
		inset: 0;
		z-index: 9998;
		background: rgba( 15, 23, 42, 0.45 );
	}

	.swk-account .swk-account-nav__overlay[hidden] {
		display: none;
	}

	.swk-account .swk-account-nav__panel {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 9999;
		width: min( 84vw, 320px );
		border-radius: 0;
		border-width: 0 1px 0 0;
		overflow-y: auto;
		transform: translateX( -100% );
		transition: transform 0.25s ease;
	}

	.swk-account .swk-account-nav__panel.is-open {
		transform: translateX( 0 );
	}

	/* JS 未載入時（或關閉抽屜設定時）不能讓選單消失。 */
	.swk-account .swk-account-nav:not( .is-drawer-ready ) .swk-account-nav__panel {
		position: static;
		width: auto;
		transform: none;
		border-width: 1px;
		border-radius: var(--swk-radius, 14px);
	}

	.swk-account .swk-account-nav:not( .is-drawer-ready ) .swk-account-nav__trigger {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.swk-account .swk-account-nav__panel {
		transition: none;
	}
}