/*
 * Login / register.
 *
 * The photo is a background on a flex child rather than an <img>: it is decoration,
 * it has no content to describe, and it has to fill an arbitrary height.
 */
/* Login and register share the split. The two mockups draw it differently — 56%
   of the width to the photo on login, 37% on register — but they are the same
   screen a moment apart, and a panel that jumps width when you follow the "立即
   注册" link reads as a different page rather than the next step of one. The
   .tc-auth--register class stays as a hook; it no longer changes the geometry. */
.tc-auth {
	display: grid;
	grid-template-columns: 55% 1fr;
	min-height: 68vh;
	/* How far the content sits in from the window edge: the page gutter on a narrow
	   screen, half the leftover once the window is wider than the content column.
	   The band itself stays full width — only what is written on it lines up with
	   the rest of the site. */
	--tc-auth-gutter: max(
		var(--wp--style--root--padding-left, 20px),
		(100vw - var(--wp--style--global--content-size, 1240px)) / 2
	);
}

.tc-auth__photo {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--primary, #1D3653) center/cover no-repeat;
}

/* The panel is on white, the photo is not — this fades one into the other so the
   seam isn't a hard edge the design doesn't have. */
.tc-auth__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 55%, var(--wp--preset--color--base, #F3F4F6) 100%);
}

.tc-auth__hero {
	position: relative;
	z-index: 1;
	padding: var(--wp--preset--spacing--70, 3rem);
	/* Left edge on the content column, not on the window. The photo behind it still
	   runs to the edge. */
	padding-left: var(--tc-auth-gutter);
	color: #fff;
}

.tc-auth__title {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	color: #fff;
	font-size: var(--wp--preset--font-size--xx-large, 2.5rem);
	font-weight: 300;
	text-shadow: 0 1px 12px rgba(21, 42, 64, 0.35);
}

.tc-auth__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	text-shadow: 0 1px 10px rgba(21, 42, 64, 0.35);
}

.tc-auth__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--70, 3rem) var(--wp--preset--spacing--50, 1.5rem);
	/* Right edge on the content column, matching the hero on the other side. */
	padding-right: var(--tc-auth-gutter);
}

.tc-auth__form {
	width: 100%;
	max-width: 355px;
}

.tc-auth__error {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	padding: 0.75rem 1rem;
	border-left: 3px solid #D0342C;
	background: #fff;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: #D0342C;
}

.tc-pass {
	position: relative;
	display: block;
}

.tc-pass__forgot {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--subtle, #6B7280);
	text-decoration: none;
}

.tc-pass__forgot:hover {
	color: var(--wp--preset--color--primary, #1D3653);
	text-decoration: underline;
}

.tc-field--pass input {
	padding-right: 5.5rem;
}

.tc-pass__eye {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--secondary, #415F7E);
	cursor: pointer;
}

.tc-pass__eye svg {
	width: 18px;
	height: 18px;
}

.tc-pass__eye[aria-pressed="true"] {
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-auth__actions {
	margin: var(--wp--preset--spacing--40, 1rem) 0 0;
}

.tc-auth__actions .tc-btn {
	display: flex;
	width: 100%;
	text-align: center;
}

/* 退出登录 sits under the trip links, set apart from them: it leaves the section
   rather than moving around inside it. */
.tc-centre__link--out {
	margin-top: var(--wp--preset--spacing--50, 1.5rem);
	border-top: 1px solid var(--wp--preset--color--border, #D8DCE5);
	padding-top: var(--wp--preset--spacing--40, 1rem);
	color: var(--wp--preset--color--subtle, #6B7280);
}

.tc-centre__link--out:hover {
	color: var(--wp--preset--color--primary, #1D3653);
}

/* ---- 验证邮件已发送 / 注册成功 ---- */
.tc-notice {
	max-width: 520px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--80, 4rem) var(--wp--preset--spacing--40, 1rem);
	text-align: center;
}

.tc-notice__icon svg {
	width: 88px;
	height: 88px;
}

.tc-notice__title {
	margin: var(--wp--preset--spacing--50, 1.5rem) 0 var(--wp--preset--spacing--40, 1rem);
	font-size: var(--wp--preset--font-size--xx-large, 2.5rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-notice__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--contrast, #2B333B);
	line-height: 1.8;
}

.tc-notice__small {
	margin: var(--wp--preset--spacing--40, 1rem) 0 0;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--subtle, #6B7280);
}

.tc-notice__ok {
	margin: var(--wp--preset--spacing--40, 1rem) 0 0;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--island-teal, #126380);
}

.tc-notice__error {
	margin: var(--wp--preset--spacing--40, 1rem) 0 0;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: #D0342C;
}

/* A button that reads as a link — it posts, so it can't be an <a>, but it is the
   inline "重新发送" the design draws mid-sentence. */
.tc-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary, #1D3653);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.tc-notice__actions {
	margin: var(--wp--preset--spacing--50, 1.5rem) 0 0;
}

.tc-notice__actions .tc-btn {
	min-width: 355px;
	text-align: center;
}

@media (max-width: 768px) {
	.tc-auth,
	.tc-auth--register {
		grid-template-columns: 1fr;
	}
	.tc-auth__photo {
		min-height: 220px;
	}
	.tc-auth__photo::after {
		background: linear-gradient(180deg, transparent 40%, var(--wp--preset--color--base, #F3F4F6) 100%);
	}
	/* Stacked, so there is no content column to line up with — both sides take the
	   section's own padding and the gutter variable follows, keeping the panel
	   symmetric with the hero above it. */
	.tc-auth {
		--tc-auth-gutter: var(--wp--preset--spacing--50, 1.5rem);
	}
	.tc-auth__hero {
		padding: var(--wp--preset--spacing--50, 1.5rem);
	}
	.tc-notice__actions .tc-btn {
		min-width: 0;
		width: 100%;
	}
}

/* ---- 会员中心 ---- */
.tc-centre {
	display: grid;
	grid-template-columns: 285px 1fr;
	gap: var(--wp--preset--spacing--40, 1rem);
	align-items: start;
}

.tc-centre__nav {
	padding: var(--wp--preset--spacing--50, 1.5rem) 0;
	border-radius: 8px;
	background: #fff;
}

.tc-centre__link,
.tc-centre__group {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.85rem var(--wp--preset--spacing--40, 1rem);
	color: var(--wp--preset--color--primary, #1D3653);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-decoration: none;
}

.tc-centre__link--sub {
	padding-left: 3.1rem;
}

.tc-centre__ico {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--wp--preset--color--muted-blue, #AAB6C6);
}

.tc-centre__caret {
	margin-left: auto;
	color: var(--wp--preset--color--muted-blue, #AAB6C6);
}

.tc-centre__link.is-on {
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--primary, #1D3653);
	font-weight: 700;
}

.tc-centre__link:hover {
	background: var(--wp--preset--color--base, #F3F4F6);
}

.tc-centre__panel {
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}

.tc-centre__bar {
	margin: 0;
	padding: var(--wp--preset--spacing--40, 1rem);
	background: var(--wp--preset--color--primary, #1D3653);
	color: #fff;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	text-align: center;
}

.tc-centre__body {
	padding: var(--wp--preset--spacing--60, 2rem);
}

.tc-centre__empty {
	margin: var(--wp--preset--spacing--60, 2rem) 0 var(--wp--preset--spacing--40, 1rem);
	color: var(--wp--preset--color--subtle, #6B7280);
	text-align: center;
}

.tc-centre__empty-cta {
	margin: 0 0 var(--wp--preset--spacing--60, 2rem);
	text-align: center;
}

/* A rule with the heading sitting in a gap in it. */
.tc-prof__rule {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40, 1rem);
	margin: 0 0 var(--wp--preset--spacing--50, 1.5rem);
	color: var(--wp--preset--color--primary, #1D3653);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.tc-prof__rule::before,
.tc-prof__rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--border, #D8DCE5);
}

.tc-prof {
	max-width: 520px;
	margin: 0 auto var(--wp--preset--spacing--70, 3rem);
}

.tc-prof:last-child {
	margin-bottom: 0;
}

.tc-prof__ok {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	padding: 0.6rem 0.9rem;
	border-left: 3px solid var(--wp--preset--color--island-teal, #126380);
	background: var(--wp--preset--color--base, #F3F4F6);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--island-teal, #126380);
}

.tc-prof__actions {
	margin: var(--wp--preset--spacing--50, 1.5rem) 0 0;
	text-align: center;
}

.tc-field--narrow {
	max-width: 215px;
	margin-left: auto;
	margin-right: auto;
}

.tc-field__note {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--subtle, #6B7280);
	/* The note belongs to the field above it, not to the width of the row. Across
	   a full-width row one sentence would stretch to a single thin line and stop
	   looking attached to anything. */
	max-width: 46ch;
}

.tc-field input[readonly] {
	background: var(--wp--preset--color--base, #F3F4F6);
	border-color: var(--wp--preset--color--border, #D8DCE5);
	color: var(--wp--preset--color--subtle, #6B7280);
}

/* ---- trip cards ---- */
.tc-trip {
	display: grid;
	grid-template-columns: 220px 1fr auto;
	gap: var(--wp--preset--spacing--40, 1rem);
	align-items: end;
	margin-bottom: var(--wp--preset--spacing--40, 1rem);
	padding: var(--wp--preset--spacing--40, 1rem);
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #E5E7EC);
}

.tc-trip__pic {
	overflow: hidden;
	border-radius: 4px;
	background: var(--wp--preset--color--muted-blue, #AAB6C6);
	aspect-ratio: 16 / 11;
}

/* Two classes: WooCommerce's `.woocommerce img { height: auto }` is a tie with a
   single class plus an element, and loads later. Same reason as the cards. */
.tc-trip .tc-trip__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tc-trip__title {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

/* Labels and values as two columns, so the values line up down the card. */
.tc-trip__rows {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.55rem 1.5rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

.tc-trip__rows dt {
	color: var(--wp--preset--color--contrast, #2B333B);
}

.tc-trip__rows dd {
	margin: 0;
	color: var(--wp--preset--color--contrast, #2B333B);
}

.tc-trip__flag {
	margin: var(--wp--preset--spacing--40, 1rem) 0 0;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: #D0342C;
}

.tc-trip__act {
	margin: 0;
}

.tc-pager {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--wp--preset--spacing--50, 1.5rem);
}

.tc-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.4rem;
	border-radius: 4px;
	color: var(--wp--preset--color--primary, #1D3653);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	text-decoration: none;
}

.tc-pager .page-numbers.current {
	background: var(--wp--preset--color--primary, #1D3653);
	color: #fff;
}

.tc-pager a.page-numbers:hover {
	background: var(--wp--preset--color--surface, #E5E7EC);
}

@media (max-width: 768px) {
	.tc-centre {
		grid-template-columns: 1fr;
	}
	.tc-centre__body {
		padding: var(--wp--preset--spacing--40, 1rem);
	}
	.tc-trip {
		grid-template-columns: 1fr;
		align-items: stretch;
	}
	.tc-trip__act .tc-btn {
		display: block;
		text-align: center;
	}
	.tc-field--narrow {
		max-width: none;
	}
}