/**
 * Custom Login & Form reCAPTCHA Guard - 前端與 Storefront 響應式相容樣式
 */

/* reCAPTCHA 基本容器 */
.crg-recaptcha-wrapper {
	margin: 16px 0;
	clear: both;
	display: block;
}

/* WordPress 原生登入表單微調 (wp-login.php)
 * 1. 恢復並強制登入表單清除浮動 (BFC)，徹底解決 Remember Me 與 Log In 按鈕掉出卡片底部的問題。
 * 2. 精準等比縮放 reCAPTCHA 核取方塊 (304px -> 272px)，完美貼合 272px 的帳號密碼輸入欄位，杜絕右側突出。
 */
body.login form#loginform,
body.login .login form {
	overflow: hidden !important;
	position: relative;
	clear: both;
}

body.login form#loginform::after,
body.login .login form::after {
	content: "";
	display: table;
	clear: both;
}

body.login form#loginform .forgetmenot {
	float: left !important;
	margin-top: 6px !important;
	margin-bottom: 0 !important;
	max-width: 60%;
}

body.login form#loginform .submit {
	float: right !important;
	margin: 0 !important;
	padding: 0 !important;
}

#login form .crg-recaptcha-wrapper {
	margin: 16px 0 16px 0 !important;
	width: 272px !important;
	max-width: 100% !important;
	height: 70px !important;
	overflow: hidden !important;
	display: block !important;
	clear: both !important;
}

#login form .crg-recaptcha-wrapper .g-recaptcha {
	transform: scale(0.895) !important;
	-webkit-transform: scale(0.895) !important;
	transform-origin: 0 0 !important;
	-webkit-transform-origin: 0 0 !important;
}

/* WooCommerce 登入表單與結帳微調 */
.woocommerce form.login .crg-recaptcha-wrapper,
.woocommerce-form-login .crg-recaptcha-wrapper {
	margin: 15px 0 20px 0;
}

#order_review .crg-recaptcha-wrapper {
	margin: 15px 0;
	padding-top: 10px;
	border-top: 1px dashed #e2e2e2;
}

/* custom-contact-qa-form 聯絡表單專屬容器樣式 */
.ccqa-contact-form .crg-recaptcha-wrapper {
	margin: 20px 0;
}

/* 手機版與小螢幕防破版 (等比自適應縮放) */
@media screen and (max-width: 360px) {
	body.login #login {
		width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	#login form .crg-recaptcha-wrapper {
		width: 100%;
		overflow: hidden;
		justify-content: flex-start;
	}

	.crg-recaptcha-wrapper .g-recaptcha {
		transform: scale(0.85);
		-webkit-transform: scale(0.85);
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}
}

@media screen and (max-width: 320px) {
	.crg-recaptcha-wrapper .g-recaptcha {
		transform: scale(0.77);
		-webkit-transform: scale(0.77);
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}
}