/* Life Hub member accounts: register / login / account page shared styles.
   v1.0.224. Deliberately its own small stylesheet with its own class
   names (.lhc-member-*) rather than reusing .lhc-submit-form and
   friends -- those are tightly coupled to specific
   [data-lhc-submit-type="housing|flatmate|secondhand"] variants
   throughout frontend.css, and borrowing them here risked picking up
   half-matching rules that don't fully apply. Each custom property below
   has a plain fallback so the page still looks reasonable even if
   body.lhc-inner-page-shell's token scope ever changes. */

/* v1.0.229: the logged-out state card dropped its visible "登录查看会员
   中心" heading (redundant with the body text right under it -- see
   render_logged_out_notice() in class-life-hub-membership.php), but the
   page still gets a real, non-visual <h1> for screen readers/SEO via this
   class. Most block themes already ship an identical .screen-reader-text
   rule, but this local fallback keeps it working even if the active theme
   doesn't define one, without overriding anything if it does. */
body.lhc-inner-page-shell .lhc-member-card--state .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

body.lhc-inner-page-shell .lhc-member-shell {
	display: flex;
	justify-content: center;
	padding: clamp(24px, 5vw, 56px) 16px;
}

body.lhc-inner-page-shell .lhc-member-card {
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
	display: grid;
	gap: 16px;
	padding: clamp(20px, 4vw, 32px);
	border: 1px solid var(--lhc-ui-line, rgba(64, 89, 142, 0.16));
	border-radius: var(--lhc-ui-radius, 8px);
	background: var(--lhc-ui-surface, #fff);
	box-shadow: var(--lhc-ui-shadow, 0 18px 46px rgba(36, 61, 118, 0.12));
}

/* v1.0.226: the plugin's block theme prints its own generic page-title
   block above the shortcode content (it renders the page's own post_title
   -- "会员中心"/"会员注册"/"会员登录" -- in the theme's plain default
   heading style), so .lhc-member-title was showing up as an oversized,
   unstyled-looking SECOND heading stacked right above this one, and
   neither one matched the rest of the site. This is the exact same
   problem the favorites/compare/recently-viewed pages hit before (see
   the v1.0.205 comment on .lhc-user-listing-tool__title in
   user-listing-tools.css) -- removing the custom <h1> entirely was tried
   there first and reverted, because the theme's own title font doesn't
   match the plugin's "serif display font + brand blue" heading style
   used on every other Life Hub page (房源/找室友/资源库/收藏/对比...).
   So this follows that same established fix instead: restyle this title
   to the exact same site-wide heading tokens, and hide the theme's
   duplicate title below (see the body.lhc-inner-page-shell:has(...) rule
   further down). */
body.lhc-inner-page-shell .lhc-member-title {
	margin: 0 0 4px;
	color: var(--lhc-brand-blue, #1687f8);
	font-family: var(--lhc-type-display-family, Georgia, "Times New Roman", "NSimSun", "新宋体", SimSun, "宋体", serif);
	font-size: var(--lhc-type-h2-size, clamp(24px, 2.1vw, 30px));
	font-weight: 800;
	line-height: var(--lhc-type-h2-line-height, 1.25);
	letter-spacing: 0;
}

/* Hides the theme's own generic page-title block specifically on the
   three member pages, so it doesn't appear a second time above the card
   -- same selector list as the identical fix in user-listing-tools.css. */
body.lhc-inner-page-shell:has(.lhc-member-shell) :where(.wp-block-post-title, .entry-title, .page-title, h1.wp-block-post-title, main > h1:first-child, .site-main > h1:first-child, .content-area > h1:first-child) {
	display: none !important;
}

body.lhc-inner-page-shell .lhc-member-message {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #f6f7f7;
	color: #1d2327;
	font-size: 14px;
	line-height: 1.5;
}

body.lhc-inner-page-shell .lhc-member-message.is-success {
	border-color: #00a32a;
	background: #f0fff4;
	color: #00450c;
}

body.lhc-inner-page-shell .lhc-member-message.is-error {
	border-color: #d63638;
	background: #fcf0f1;
	color: #8a1f1f;
}

body.lhc-inner-page-shell .lhc-member-message.is-info {
	border-color: var(--lhc-brand-blue, #1687f8);
	background: #eef6ff;
	color: #0b3d75;
}

body.lhc-inner-page-shell .lhc-member-form {
	display: grid;
	gap: 14px;
}

body.lhc-inner-page-shell .lhc-member-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

body.lhc-inner-page-shell .lhc-member-field label {
	color: var(--lhc-ui-ink, #14213d);
	font-size: 13px;
	font-weight: 400;
}

body.lhc-inner-page-shell .lhc-member-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--lhc-ui-line, rgba(64, 89, 142, 0.16));
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.4;
}

body.lhc-inner-page-shell .lhc-member-field input:focus {
	outline: 2px solid var(--lhc-brand-blue, #1687f8);
	outline-offset: 1px;
}

body.lhc-inner-page-shell .lhc-member-code-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

body.lhc-inner-page-shell .lhc-member-code-row input {
	flex: 1 1 auto;
	min-width: 0;
}

body.lhc-inner-page-shell .lhc-member-code-row .lhc-member-button {
	flex: 0 0 auto;
}

body.lhc-inner-page-shell .lhc-member-code-feedback {
	margin: 0;
	min-height: 1em;
	color: var(--lhc-ui-muted, #61708a);
	font-size: 13px;
}

/* v1.0.229: the register/login form's submit button ("注册"/"登录") used to
   be forced to width:100% (a full-bleed pill spanning the whole card) --
   the user found it too long. It now just centers at its own natural
   width (the base .lhc-member-button padding below already gives it a
   comfortable size for a 2-character label; see .lhc-member-actions--row
   further down for the differently-styled "navigate elsewhere" buttons). */
body.lhc-inner-page-shell .lhc-member-actions {
	margin-top: 4px;
	display: flex;
	justify-content: center;
}

body.lhc-inner-page-shell .lhc-member-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 1px solid var(--lhc-ui-line, rgba(64, 89, 142, 0.16));
	border-radius: var(--lhc-brand-pill-radius, 999px);
	background: #fff;
	color: var(--lhc-ui-ink, #14213d);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

/* v1.0.226: white text directly on --lhc-brand-blue (#1687f8) measures
   ~3.6:1 contrast -- under WCAG AA's 4.5:1 floor for normal-weight text
   this size (14px bold doesn't reach the "large text" 3:1 exemption,
   which needs ~18.7px bold). This exact blue/white pairing is also used
   site-wide (e.g. the homepage's "预约咨询" mini-cta), so darkening the
   shared --lhc-brand-blue variable itself would shift color everywhere
   else on the site too -- instead this deepens the blue only for this
   component's own class, which keeps every other button/badge on the
   site untouched. #0a5fc2 keeps the same hue family (still reads as
   "brand blue") while reaching ~6.1:1 against white. */
body.lhc-inner-page-shell .lhc-member-button--primary {
	border-color: #0a5fc2;
	background: #0a5fc2;
	color: #fff;
}

body.lhc-inner-page-shell .lhc-member-button[disabled] {
	opacity: 0.6;
	cursor: default;
}

body.lhc-inner-page-shell .lhc-member-switch {
	margin: 0;
	color: var(--lhc-ui-muted, #61708a);
	font-size: 14px;
	text-align: center;
}

/* Same contrast reasoning as .lhc-member-button--primary above -- this
   text link uses --lhc-brand-blue directly on the card's near-white
   background (~3.6:1), so it gets the same darkened, component-local
   shade rather than touching the shared variable. */
body.lhc-inner-page-shell .lhc-member-switch a {
	color: #0a5fc2;
	font-weight: 700;
	text-decoration: none;
}

body.lhc-inner-page-shell .lhc-member-switch a:hover {
	text-decoration: underline;
}

body.lhc-inner-page-shell .lhc-member-switch .lhc-member-button {
	margin: 0 6px;
}

/* v1.0.228: redesign of the "state" cards -- logged-out notice, already-
   logged-in notice, registration success, and the logged-in account view
   itself. The user pointed out the old version (a small bordered
   light-blue ".lhc-member-message.is-info" box, e.g. "登录后即可查看会员
   中心。") looked plain and its text was hard to read against the tinted
   background. Rather than just darkening that box's text again (already
   did that kind of fix once this round for the buttons/links -- doing it
   a second time for every tinted box would be treating the symptom), this
   drops the colored-box treatment for these specific cards entirely: a
   small circular icon badge, a centered heading, and plain body text
   directly on the card's own white background -- the best contrast
   available, and it reads as content instead of a warning banner (a
   bordered alert-style box is the right pattern for a transient message
   ABOVE a still-visible form, like a failed login attempt, but not for a
   whole page that IS a message). .lhc-member-message.is-info itself is
   kept for that other case (see render_notice() in
   class-life-hub-membership.php) and is unaffected by this change. */
body.lhc-inner-page-shell .lhc-member-card--state {
	text-align: center;
	justify-items: center;
}

body.lhc-inner-page-shell .lhc-member-state-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(10, 95, 194, 0.1);
	color: #0a5fc2;
}

/* v1.0.229: the checkmark badge on the "confirmed" cards (account view /
   registration success / already-logged-in) is replaced with the site's
   own logo mark (see icon_logo() in class-life-hub-membership.php) at the
   user's request. The logo already carries its own blue/teal/amber
   colors, so it sits on a plain near-white circle instead of a tinted one
   -- a colored badge behind an already-colored mark would fight it rather
   than frame it. */
body.lhc-inner-page-shell .lhc-member-state-icon--brand {
	background: #f8fafc;
	border: 1px solid var(--lhc-ui-line, rgba(64, 89, 142, 0.16));
}

body.lhc-inner-page-shell .lhc-member-state-icon svg {
	display: block;
	width: 26px;
	height: 26px;
}

body.lhc-inner-page-shell .lhc-member-state-icon img {
	display: block;
	width: 30px;
	height: auto;
}

body.lhc-inner-page-shell .lhc-member-title--center {
	text-align: center;
}

body.lhc-inner-page-shell .lhc-member-state-text {
	margin: -6px 0 0;
	max-width: 32rem;
	color: var(--lhc-ui-muted, #61708a);
	font-size: 15px;
	line-height: 1.6;
}

/* v1.0.229: these "go somewhere else" actions (去登录/去注册/前往会员中心/
   退出登录) used to reuse the same filled-pill .lhc-member-button look as
   the form's real submit buttons, sized with a 120px minimum -- the user
   found the pills too large and asked for them to hug their own text
   instead, with no background color. Unlike the form submit button above
   (a genuine "commit this form" action that keeps its filled CTA
   treatment), these are just links to another page, so they get the same
   plain-text treatment already used for .lhc-member-switch a elsewhere in
   this file: no border, no fill, width based purely on the label itself.
   When two of them sit side by side a thin divider separates them --
   borrowed from the exact same pattern already used for the header's
   中文｜EN language switcher (see .lhc-language-switcher__item in
   homepage.css) instead of inventing a new one. */
body.lhc-inner-page-shell .lhc-member-actions--row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	justify-content: center;
	width: 100%;
	margin-top: 6px;
}

body.lhc-inner-page-shell .lhc-member-actions--row .lhc-member-button {
	position: relative;
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
	padding: 10px 14px;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--lhc-ui-ink, #14213d);
	font-weight: 700;
}

body.lhc-inner-page-shell .lhc-member-actions--row .lhc-member-button:hover {
	text-decoration: underline;
}

body.lhc-inner-page-shell .lhc-member-actions--row .lhc-member-button--primary {
	border: none;
	background: transparent;
	color: #0a5fc2;
	font-weight: 800;
}

body.lhc-inner-page-shell .lhc-member-actions--row .lhc-member-button + .lhc-member-button::before {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 14px;
	background: rgba(18, 32, 63, 0.16);
	content: "";
}

/* The logged-in account view's 邮箱/注册时间 rows. Plain near-neutral
   panel (not blue-tinted) so the value text always reads clearly against
   it, whatever accent color the rest of the page uses. */
body.lhc-inner-page-shell .lhc-member-info-list {
	display: grid;
	gap: 10px;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--lhc-ui-line, rgba(64, 89, 142, 0.16));
	border-radius: 10px;
	background: #f8fafc;
	text-align: left;
}

body.lhc-inner-page-shell .lhc-member-info-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	font-size: 14px;
}

body.lhc-inner-page-shell .lhc-member-info-row + .lhc-member-info-row {
	padding-top: 10px;
	border-top: 1px solid var(--lhc-ui-line, rgba(64, 89, 142, 0.16));
}

body.lhc-inner-page-shell .lhc-member-info-label {
	color: var(--lhc-ui-muted, #61708a);
}

body.lhc-inner-page-shell .lhc-member-info-value {
	color: var(--lhc-ui-ink, #14213d);
	font-weight: 700;
	word-break: break-all;
}

@media (max-width: 480px) {
	body.lhc-inner-page-shell .lhc-member-code-row {
		flex-direction: column;
	}

	body.lhc-inner-page-shell .lhc-member-code-row .lhc-member-button {
		width: 100%;
	}

	body.lhc-inner-page-shell .lhc-member-switch .lhc-member-button {
		display: block;
		margin: 8px 0 0;
	}
}