/* =====================================================================
   THOMI AUTH — trang tai khoan (dang nhap / dang ky / quen & dat lai mat khau)
   Nap CHI tren is_account_page() qua functions.php. Prefix .thomi-auth-
   de KHONG dung CSS cua Flatsome / WooCommerce / plugin khac.
   Bo mau Thomi: nen kem, the trang, chu den am, nhan vang champagne.
===================================================================== */

.thomi-auth {
	--tw-bg1: #FBF9F6;
	--tw-bg2: #F4EFE8;
	--tw-card: #FFFFFF;
	--tw-border: #E7E0D6;
	--tw-ink: #1A1814;
	--tw-cream: #F6F1E9;
	--tw-gold: #B89A6A;
	--tw-gold-d: #9E8353;
	--tw-muted: #8A8276;
}

/* --- nen chung MAN HINH AUTH (body.thomi-auth-page = chi khi CHUA dang nhap; xem functions.php 13.6).
       KHONG dung body.woocommerce-account de tranh lan sang dashboard/orders/edit-address... da dang nhap. --- */
body.thomi-auth-page { background: #F4EFE8; }
body.thomi-auth-page .page-wrapper.my-account { background: transparent; }

/* --- vung dat card --- */
.thomi-auth { display: flex; justify-content: center; padding: 48px 16px 66px; }
.thomi-auth, .thomi-auth * { box-sizing: border-box; }

/* --- notices: can giua theo be rong card (chi tren man hinh auth) --- */
body.thomi-auth-page .woocommerce-notices-wrapper { max-width: 452px; margin: 0 auto; }
body.thomi-auth-page .woocommerce-notices-wrapper:empty { display: none; margin: 0; }
body.thomi-auth-page .woocommerce-error,
body.thomi-auth-page .woocommerce-message,
body.thomi-auth-page .woocommerce-info { border-radius: 12px; }

/* --- CARD --- */
.thomi-auth-card {
	width: 100%; max-width: 452px;
	background: var(--tw-card);
	border: 1px solid var(--tw-border);
	border-radius: 18px;
	box-shadow: 0 20px 52px -26px rgba(26,24,20,.30), 0 2px 8px -4px rgba(26,24,20,.10);
	padding: 38px 34px 34px;
}
.thomi-auth--narrow .thomi-auth-card { max-width: 436px; }

/* --- HEAD: logo + duong ke vang --- */
.thomi-auth-head { text-align: center; margin-bottom: 22px; }
.thomi-auth-logo { height: 46px; width: auto; margin: 0 auto 14px; display: inline-block; }
.thomi-auth-rule {
	display: block; width: 54px; height: 2px; margin: 0 auto;
	background: linear-gradient(90deg, var(--tw-gold), var(--tw-gold-d));
	border-radius: 2px;
}

/* --- TABS --- */
.thomi-auth-tabs {
	display: flex; gap: 4px; margin: 0 0 24px; padding: 5px;
	background: var(--tw-bg1); border: 1px solid var(--tw-border); border-radius: 12px;
}
.thomi-auth-tab {
	flex: 1 1 0; display: flex; align-items: center; justify-content: center;
	margin: 0; min-height: 0; appearance: none; -webkit-appearance: none;
	background: transparent; border: 0; cursor: pointer;
	font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .3px; line-height: 1.2;
	color: var(--tw-muted); padding: 12px 8px; border-radius: 9px;
	transition: color .25s ease, background .25s ease;
}
.thomi-auth-tab:hover { color: var(--tw-ink); }
.thomi-auth-tab.is-active { color: var(--tw-cream); background: var(--tw-ink); }

/* --- PANELS --- */
.thomi-auth-panel { display: none; }
.thomi-auth-panel.is-active { display: block; animation: thomi-auth-fade .32s ease; }
@keyframes thomi-auth-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- title / intro (lost, reset) --- */
.thomi-auth-title { text-align: center; font-size: 21px; font-weight: 600; color: var(--tw-ink); margin: 0 0 8px; letter-spacing: .2px; }
.thomi-auth-intro { text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--tw-muted); margin: 0 auto 22px; max-width: 340px; }

/* --- FIELDS --- */
.thomi-auth .form-row,
.thomi-auth-field { margin: 0 0 16px; display: block; padding: 0; }
.thomi-auth label {
	display: block; font-size: 13px; font-weight: 500; color: var(--tw-ink);
	margin: 0 0 7px; line-height: 1.3;
}
.thomi-auth label .required { color: var(--tw-gold-d); border: 0 !important; text-decoration: none; }
.thomi-auth .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

.thomi-auth input[type="text"],
.thomi-auth input[type="email"],
.thomi-auth input[type="password"],
.thomi-auth input[type="tel"] {
	width: 100%; height: 48px; margin: 0; padding: 0 15px;
	background: var(--tw-bg1);
	border: 1px solid var(--tw-border); border-radius: 12px;
	font-family: inherit; font-size: 15px; color: var(--tw-ink); line-height: normal;
	box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.thomi-auth input::placeholder { color: #b8b0a4; }
.thomi-auth input:focus {
	outline: 0; border-color: var(--tw-gold); background: #fff;
	box-shadow: 0 0 0 3px rgba(184,154,106,.16);
}
/* WordPress tu boc o mat khau trong span.password-input + them nut hien/an (.show-password-input)
   -> span thanh inline cao 73px, day field cao them ~25px (lech khoang cach). Cho span ve block
   dung chieu cao input + an nut (thiet ke toi gian) -> moi field DEU nhau. */
.thomi-auth .password-input { display: block; width: 100%; line-height: normal; margin: 0; }
.thomi-auth .password-input > input { display: block; width: 100%; }
.thomi-auth .password-input .show-password-input { display: none !important; } /* an nut mac dinh WP */

/* Nut CON MAT hien/an mat khau (Thomi tu them qua JS) — dat gon ben phai trong o */
.thomi-auth .thomi-auth-pw { position: relative; display: block; width: 100%; }
.thomi-auth input.thomi-auth-has-eye { padding-right: 46px; }
.thomi-auth .thomi-auth-eye {
	position: absolute; top: 0; right: 0; z-index: 2;
	width: 44px; height: 48px; margin: 0; padding: 0;
	display: flex; align-items: center; justify-content: center;
	border: 0; background: transparent; cursor: pointer;
	color: var(--tw-muted); transition: color .2s ease;
}
.thomi-auth .thomi-auth-eye:hover { color: var(--tw-ink); }
.thomi-auth .thomi-auth-eye svg { display: block; width: 20px; height: 20px; }

/* --- 2 cot Ho / Ten --- */
.thomi-auth-row2 { display: flex; gap: 12px; }
.thomi-auth-row2 .thomi-auth-col { flex: 1 1 0; }

/* --- remember + quen mat khau --- */
.thomi-auth .thomi-auth-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 20px; }
.thomi-auth-remember { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--tw-ink); cursor: pointer; font-weight: 400; }
.thomi-auth-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--tw-ink); flex: 0 0 auto; }
.thomi-auth-remember span { font-size: 13px; }
.thomi-auth-lost { font-size: 13px; white-space: nowrap; }
.thomi-auth-link { color: var(--tw-gold-d); text-decoration: none; font-weight: 500; transition: color .2s ease; }
.thomi-auth-link:hover { color: var(--tw-ink); text-decoration: underline; }

/* --- terms --- */
.thomi-auth .thomi-auth-terms { margin: 4px 0 18px; }
.thomi-auth-terms label { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tw-muted); font-weight: 400; cursor: pointer; }
.thomi-auth-terms input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--tw-ink); flex: 0 0 auto; }

/* --- privacy text WooCommerce --- */
.thomi-auth .woocommerce-privacy-policy-text { font-size: 11.5px; line-height: 1.5; color: var(--tw-muted); margin: 0 0 14px; }
.thomi-auth .woocommerce-privacy-policy-text p { margin: 0; }

/* --- BUTTON chinh --- */
.thomi-auth .thomi-auth-btn {
	width: 100%; height: 50px; margin: 4px 0 0; padding: 0;
	background: var(--tw-ink); color: var(--tw-cream);
	border: 0; border-radius: 12px; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .4px;
	text-transform: none;
	transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.thomi-auth .thomi-auth-btn:hover { background: #000; box-shadow: 0 12px 26px -12px rgba(26,24,20,.55); transform: translateY(-1px); }
.thomi-auth .thomi-auth-btn:active { transform: translateY(0); }
.thomi-auth .thomi-auth-submit-row { margin-bottom: 0; }

/* --- OR divider + social (Google) --- */
.thomi-auth-or { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; color: var(--tw-muted); font-size: 12.5px; }
.thomi-auth-or::before, .thomi-auth-or::after { content: ""; flex: 1 1 0; height: 1px; background: var(--tw-border); }
.thomi-auth-social .nsl-container,
.thomi-auth-social .nsl-container-block,
.thomi-auth-social .nsl-container-buttons { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.thomi-auth-social .nsl-container-buttons > a,
.thomi-auth-social .nsl-container .nsl-button {
	width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
	height: 48px !important; border-radius: 12px !important;
	border: 1px solid var(--tw-border) !important; box-shadow: none !important;
}
/* An nut Google "lac" do Nextend/Flatsome chen o header trang tai khoan VA dau popup dang nhap
   Flatsome (#login-form-popup) -> chi giu duy nhat nut Google trong card cua minh (.thomi-auth-social) */
.my-account-header .social-login,
.page-title .social-login,
.page-title-inner .social-login,
#login-form-popup .social-login,
.mfp-content .social-login,
.lightbox-content .social-login { display: none !important; }

/* --- Popup dang nhap Flatsome (#login-form-popup): bo khung trang + khoang thua, chi hien card cua minh --- */
#login-form-popup,
#login-form-popup.lightbox-content {
	background: transparent !important; box-shadow: none !important; border: 0 !important;
	padding: 0 !important; max-width: 486px !important; width: 100% !important; margin: 0 auto !important;
}
#login-form-popup .thomi-auth { padding: 0 !important; display: block !important; }
#login-form-popup .thomi-auth-card { margin: 0 auto; }
/* An header tieu de trang (dai trang thua, chua nut do) trong popup VA tren man hinh auth (card da co logo) */
#login-form-popup .my-account-header,
body.thomi-auth-page .my-account-header { display: none !important; }

/* --- password strength meter (WooCommerce native) --- */
.thomi-auth .woocommerce-password-strength { margin-top: 8px; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 7px 10px; text-align: center; }
.thomi-auth .woocommerce-password-hint { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--tw-muted); }

/* --- back link --- */
.thomi-auth-back { text-align: center; margin: 20px 0 0; font-size: 13px; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 520px) {
	.thomi-auth { padding: 30px 12px 46px; }
	.thomi-auth-card { padding: 30px 20px 26px; border-radius: 16px; }
	.thomi-auth--narrow .thomi-auth-card { max-width: 452px; }
	.thomi-auth-row2 { flex-direction: column; gap: 0; }
	.thomi-auth-logo { height: 42px; }
}