/* WooCommerce 我的帳號登入頁美化前端樣式。 */

/* 僅在 WooCommerce 未登入帳號頁的中間內容區套用，不修改 Header、Footer 或全頁背景。 */
body.woo-account-login-styler-page .my-account-header.page-title.normal-title {
	display: none !important;
}

body.woo-account-login-styler-page #main,
body.woo-account-login-styler-page #main .content-area,
body.woo-account-login-styler-page #main .woocommerce,
body.woo-account-login-styler-page .page-wrapper.my-account.mb {
	padding-top: 0 !important;
}

body.woo-account-login-styler-page .account-container {
	box-sizing: border-box !important;
	display: flex !important;
	align-items: stretch !important;
	position: relative !important;
	isolation: isolate !important;
	width: 100% !important;
	max-width: 1180px !important;
	min-height: 520px !important;
	margin: 0 auto 48px !important;
	padding: 0 !important;
	border: 0 !important;
	background-color: var(--wals-background, #f4512c) !important;
	background-image: none !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}

/* Flatsome 的登入欄位必須佔滿中間容器，白色登入卡再獨立靠右，避免卡片被壓縮或跑到左側。 */
body.woo-account-login-styler-page .account-container > #customer_login {
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 1 !important;
	display: block !important;
	float: none !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	text-align: left !important;
}

body.woo-account-login-styler-page .account-container > #customer_login > .col-1,
body.woo-account-login-styler-page .account-container > #customer_login > .col-2 {
	box-sizing: border-box !important;
	border: 0 !important;
	display: block !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.woo-account-login-styler-page .account-container > #customer_login > .col-2 {
	display: none !important;
}

body.woo-account-login-styler-page .account-container.wals-register-view > #customer_login > .col-1 {
	display: none !important;
}

body.woo-account-login-styler-page .account-container.wals-register-view > #customer_login > .col-2 {
	display: block !important;
}

/* Banner 只作為中間登入區的後方圖層，不參與 flex 排版，因此不會推開或錯位登入卡片。 */
body.woo-account-login-styler-page .account-container::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	z-index: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 58% !important;
	height: 100% !important;
	min-height: 0 !important;
	pointer-events: none !important;
	background-color: transparent !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: contain !important;
}

/* 遮住 Banner 素材底部可能存在的白邊，避免在橘色登入區形成水平白線。 */
body.woo-account-login-styler-page .account-container > #customer_login::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	z-index: 1 !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 58% !important;
	height: 8px !important;
	background: var(--wals-background, #f4512c) !important;
	border: 0 !important;
	pointer-events: none !important;
}

body.woo-account-login-styler-page .account-login-inner,
body.woo-account-login-styler-page .account-register-inner {
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 2 !important;
	display: block !important;
	float: none !important;
	flex: 0 0 var(--wals-card-width, 460px) !important;
	width: var(--wals-card-width, 460px) !important;
	max-width: calc(100% - 40px) !important;
	margin-top: 42px !important;
	margin-right: 40px !important;
	margin-bottom: 42px !important;
	margin-left: auto !important;
	padding: 38px 34px !important;
	background: #fff !important;
	border-radius: 8px !important;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .16) !important;
	text-align: left !important;
}

/* 由 frontend.js 在登入／註冊之間切換；預設先顯示登入卡。 */
body.woo-account-login-styler-page .account-register-inner {
	display: none !important;
}

body.woo-account-login-styler-page .account-container.wals-register-view .account-login-inner {
	display: none !important;
}

body.woo-account-login-styler-page .account-container.wals-register-view .account-register-inner {
	display: block !important;
}

body.woo-account-login-styler-page .account-login-inner h3,
body.woo-account-login-styler-page .account-register-inner h3 {
	margin: 0 0 26px !important;
	color: #333 !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
}

body.woo-account-login-styler-page .woocommerce-form-login,
body.woo-account-login-styler-page .woocommerce-form-register {
	max-width: none !important;
	margin: 0 !important;
}

/* 移除 WooCommerce 原生「我們會使用你的個人資料……」段落；本外掛保留自訂政策連結。 */
body.woo-account-login-styler-page .account-register-inner .woocommerce-privacy-policy-text {
	display: none !important;
}

body.woo-account-login-styler-page .woocommerce-form-login label,
body.woo-account-login-styler-page .woocommerce-form-register label {
	color: #555 !important;
	font-size: 14px !important;
}

body.woo-account-login-styler-page .woocommerce-form-login input.input-text,
body.woo-account-login-styler-page .woocommerce-form-register input.input-text {
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 46px !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	font-size: 15px !important;
}

body.woo-account-login-styler-page .woocommerce-form-login input.input-text:focus,
body.woo-account-login-styler-page .woocommerce-form-register input.input-text:focus {
	border-color: var(--wals-accent, #f4512c) !important;
	box-shadow: 0 0 0 1px var(--wals-accent, #f4512c) !important;
}

body.woo-account-login-styler-page .woocommerce-form-login button[type="submit"],
body.woo-account-login-styler-page .woocommerce-form-register button[type="submit"] {
	width: 100% !important;
	min-height: 46px !important;
	margin: 12px 0 18px !important;
	border: 0 !important;
	border-radius: 3px !important;
	background: var(--wals-accent, #f4512c) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}

body.woo-account-login-styler-page .woocommerce-form-login button[type="submit"]:hover,
body.woo-account-login-styler-page .woocommerce-form-login button[type="submit"]:focus,
body.woo-account-login-styler-page .woocommerce-form-register button[type="submit"]:hover,
body.woo-account-login-styler-page .woocommerce-form-register button[type="submit"]:focus {
	background: var(--wals-accent-hover, #cf3e20) !important;
	color: #fff !important;
}

body.woo-account-login-styler-page .woocommerce-LostPassword {
	margin-bottom: 20px !important;
}

body.woo-account-login-styler-page .woocommerce-LostPassword a {
	color: var(--wals-accent, #f4512c) !important;
	font-size: 14px !important;
}

body.woo-account-login-styler-page .woocommerce-form-login .woocommerce-form__label-for-checkbox,
body.woo-account-login-styler-page .woocommerce-form-register .woocommerce-form__label-for-checkbox {
	font-size: 14px !important;
}

/* 登入／註冊政策同意文字與畫面切換入口。 */
body.woo-account-login-styler-page .wals-policy-notice {
	margin: 18px 0 12px !important;
	color: #777 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;
	text-align: center !important;
}

body.woo-account-login-styler-page .wals-policy-brand {
	color: #555 !important;
	font-weight: 500 !important;
}

body.woo-account-login-styler-page .wals-policy-link {
	color: var(--wals-accent, #f4512c) !important;
	text-decoration: none !important;
}

body.woo-account-login-styler-page .wals-policy-link:hover,
body.woo-account-login-styler-page .wals-policy-link:focus {
	text-decoration: underline !important;
}

body.woo-account-login-styler-page .wals-policy-label {
	color: #777 !important;
}

body.woo-account-login-styler-page .wals-register-prompt,
body.woo-account-login-styler-page .wals-login-prompt {
	margin: 20px 0 0 !important;
	padding-top: 20px !important;
	border-top: 0 !important;
	color: #999 !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	text-align: center !important;
}

body.woo-account-login-styler-page .wals-register-link,
body.woo-account-login-styler-page .wals-login-link {
	color: var(--wals-accent, #f4512c) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

body.woo-account-login-styler-page .wals-register-link:hover,
body.woo-account-login-styler-page .wals-register-link:focus,
body.woo-account-login-styler-page .wals-login-link:hover,
body.woo-account-login-styler-page .wals-login-link:focus {
	text-decoration: underline !important;
}

/* 不隱藏社群登入外掛；只讓其內容在登入／註冊卡中保持正常寬度。 */
body.woo-account-login-styler-page .account-login-inner .wclon-social-login-wrapper,
body.woo-account-login-styler-page .account-register-inner .wclon-social-login-wrapper,
body.woo-account-login-styler-page .account-login-inner .wals-social-login-ordered,
body.woo-account-login-styler-page .account-register-inner .wals-social-login-ordered {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 12px 0 16px !important;
	padding: 14px 0 16px !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	text-align: center !important;
}

body.woo-account-login-styler-page .account-login-inner .nsl-container,
body.woo-account-login-styler-page .account-login-inner .social-login,
body.woo-account-login-styler-page .account-login-inner [class*="social-login"],
body.woo-account-login-styler-page .account-register-inner .nsl-container,
body.woo-account-login-styler-page .account-register-inner .social-login,
body.woo-account-login-styler-page .account-register-inner [class*="social-login"] {
	max-width: 100% !important;
}

@media (max-width: 767px) {
	body.woo-account-login-styler-page .account-container {
		display: block !important;
		min-height: auto !important;
		margin: 0 14px 32px !important;
		width: auto !important;
		background-image: none !important;
		background: transparent !important;
		overflow: visible !important;
	}

	body.woo-account-login-styler-page .account-container::before,
	body.woo-account-login-styler-page .account-container > #customer_login::after {
		display: none !important;
	}

	body.woo-account-login-styler-page .account-container > #customer_login {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	body.woo-account-login-styler-page .account-container > #customer_login > .col-1,
	body.woo-account-login-styler-page .account-container > #customer_login > .col-2 {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
	}

	body.woo-account-login-styler-page .account-login-inner,
	body.woo-account-login-styler-page .account-register-inner {
		width: 100% !important;
		max-width: 460px !important;
		margin: 0 auto !important;
		padding: 28px 22px !important;
		float: none !important;
	}
}