/*
 * The booking flow.
 *
 * Colours come from the theme's tokens throughout, so a booking for a 走进中国 tour
 * picks up the red without anything here knowing that section exists.
 */

/* ---- Steps ----
 * Measured off 预订步骤.png (1440 canvas): 48px circles on a 291px pitch — a quarter
 * of a 1164px bar, so the geometry falls out of four equal cells. The track is navy
 * up to and including the step you are on, muted blue after it; a pending circle
 * carries a navy number, not a white one.
 *
 * The circle sits in normal flow and the label follows it in a flex column. An
 * earlier version took the circle out of flow and reserved room for it with
 * padding-top on the item — which works right up until anything on the page
 * disagrees about the item's box, and then the circle has nothing holding it: it
 * lands beside the label instead of above it and gets clipped by whatever is
 * nearest. In flow, the label can only be below the circle and the row can only be
 * as tall as its contents. There is nothing left to disagree about.
 *
 * Only the 3px track is positioned, and it sits at the circle's own centre line —
 * 1.5rem down, which is half of the circle's 3rem.
 */
.tc-steps__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The reset line stays, but the border it was added for came from inside this file,
   not from a plugin: the number stepper in the 查询价格 dialog was also called
   .tc-step, later in the source, and won. It is .tc-counter now. The reset is still
   worth having — these are <li> elements sitting in page content, where plenty of
   stylesheets have opinions about lists — but it is a second line of defence, not
   the fix. */
.tc-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	text-align: center;
	color: var(--wp--preset--color--secondary, #415F7E);
}

.tc-step__n {
	position: relative;
	z-index: 1;
	flex: none;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--muted-blue, #AAB6C6);
	/* Navy on muted blue is 6.0:1. White on the same grey is 2.1:1, and was the
	   hardest thing on the bar to read. */
	color: var(--wp--preset--color--primary, #1D3653);
	font-weight: 600;
	line-height: 1;
}

.tc-step__label {
	display: block;
	text-align: center;
}

/* One segment per step, spanning that step's cell and passing behind its circle. */
.tc-step::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 1.5rem;
	left: 0;
	right: 0;
	height: 3px;
	margin-top: -1.5px;
	background: var(--wp--preset--color--muted-blue, #AAB6C6);
}

/* Reached: navy the whole way across, so the fill stops at the boundary of the
   cell you are in. */
.tc-step.is-done::before,
.tc-step.is-current::before {
	background: var(--wp--preset--color--primary, #1D3653);
}

.tc-step.is-done .tc-step__n,
.tc-step.is-current .tc-step__n {
	background: var(--wp--preset--color--primary, #1D3653);
	color: #fff;
}

/* ---- Shared ---- */
/* Some of these are <button>, some are <a>, and without the first three lines the
   two do not come out the same size:
   - browsers give <button> border-box and leave <a> on content-box, so a link at
     width:100% ended up 4rem wider than the button beside it, padding and all;
   - <button> does not inherit font-family, so it fell back to the UA's default and
     sat at a different height.
   Flex centring then makes the two agree on where the label goes. */
.tc-btn {
	box-sizing: border-box;
	font: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 2rem;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
	cursor: pointer;
	text-decoration: none;
}

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

.tc-btn--primary:hover {
	background: var(--wp--preset--color--primary-dark, #152A40);
	color: #fff;
}

.tc-btn--ghost {
	background: #fff;
	border-color: var(--wp--preset--color--border, #D8DCE5);
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem var(--wp--preset--spacing--60, 2.5rem);
}

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

.tc-field label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

/* Field controls, per the mockups: 44px tall, navy hairline border, 6px radius.
   One rule covers text inputs, selects and (via the shared class below) the
   consult textarea, so every form on the site — login, register, account,
   booking, consult — renders the same controls. */
.tc-field input,
.tc-field select {
	width: 100%;
	height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--primary, #1D3653);
	border-radius: 6px;
	background: #fff;
	color: var(--wp--preset--color--contrast, #2B333B);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	box-sizing: border-box;
}

/* Selects drop the native arrow for the mockups' thin navy chevron. */
.tc-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231D3653' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
}

.tc-field input::placeholder {
	color: var(--wp--preset--color--muted-blue, #AAB6C6);
}

.tc-field input:focus,
.tc-field select:focus {
	outline: 2px solid var(--wp--preset--color--primary, #1D3653);
	outline-offset: -1px;
}

/* ---- Step 1 ---- */
.tc-book__grid {
	display: grid;
	grid-template-columns: 38% 1fr;
	gap: var(--wp--preset--spacing--60, 2rem);
	padding: var(--wp--preset--spacing--60, 2rem);
	background: var(--wp--preset--color--surface, #E5E7EC);
	border-radius: 8px;
}

.tc-book__h {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.tc-book__people .tc-book__h + * {
	margin-top: 0;
}

.tc-trip {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: var(--wp--preset--spacing--40, 1rem);
	padding: var(--wp--preset--spacing--40, 1rem);
	background: rgba(255, 255, 255, 0.5);
	border-radius: 6px;
}

.tc-trip__img {
	display: block;
	min-height: 170px;
	border-radius: 4px;
	background: var(--wp--preset--color--muted-blue, #AAB6C6) center/cover no-repeat;
}

.tc-trip__title {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--medium, 1rem);
}

.tc-trip__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 0.75rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

.tc-trip__meta dt {
	color: var(--wp--preset--color--subtle, #6B7280);
}

.tc-trip__meta dd {
	margin: 0;
}

.tc-trip__price {
	margin: 1rem 0 0;
	text-align: right;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-person,
.tc-contact {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	padding: var(--wp--preset--spacing--40, 1rem);
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.5);
}

.tc-person__legend {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	margin-bottom: 0.75rem;
	padding: 0;
	font-weight: 600;
}

/* 不占床 sits under the name fields, indented like a note on the person rather than
   another field of theirs. */
.tc-person__bed {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

/* Two checkboxes when a departure offers both; they wrap rather than crowd. */
.tc-person__bed {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
}

.tc-person__bed label {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	cursor: pointer;
}

.tc-person__bed span {
	color: var(--wp--preset--color--subtle, #6B7280);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

/* Which row is whose — shown, not asked. */
.tc-person__type {
	margin-left: auto;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface, #E5E7EC);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 400;
	color: var(--wp--preset--color--subtle, #6B7280);
}

.tc-contact__note {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--subtle, #6B7280);
}

.tc-phone {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 0.5rem;
}

/* A field that spans both columns of .tc-fields. For the phone rows this is what
   makes the country code line up with the left-hand column and the number with
   the right, instead of the pair being squeezed into one cell — so the inner grid
   repeats the parent's columns and its gap rather than .tc-phone's own 40/60. */
.tc-fields .tc-field--wide {
	grid-column: 1 / -1;
}

.tc-field--wide .tc-phone {
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60, 2.5rem);
}

@media (max-width: 768px) {
	/* .tc-fields is one column below this width, so there is nothing left to line
	   up with and the parent's 2.5rem would only squeeze the number. Back to the
	   plain 40/60 the other forms use. */
	.tc-field--wide .tc-phone {
		grid-template-columns: 40% 1fr;
		gap: 0.5rem;
	}
}

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

.tc-code__send {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary, #1D3653);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	text-decoration: underline;
	cursor: pointer;
}

.tc-code__send:disabled {
	color: var(--wp--preset--color--subtle, #6B7280);
	cursor: default;
}

/* While the code is being sent. Without this the button only greys out, which
   reads as "broken" rather than "working" on a slow connection. The mark is drawn
   with ::before so the countdown can keep rewriting the label underneath. */
.tc-code__send.is-loading::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.4em;
	vertical-align: -0.1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: tc-spin 0.7s linear infinite;
}

@keyframes tc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* A still spinner would say nothing, so slow it right down rather than stopping
   it; the "发送中…" label carries the meaning either way. */
@media (prefers-reduced-motion: reduce) {
	.tc-code__send.is-loading::before {
		animation-duration: 2.4s;
	}
}

.tc-code input {
	padding-right: 6rem;
}

.tc-code__msg {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	min-height: 1.2em;
}

.tc-code__msg.is-ok {
	color: var(--wp--preset--color--island-teal, #126380);
}

.tc-code__msg.is-error {
	color: var(--wp--preset--color--china-red, #810B0B);
}

.tc-check {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.tc-check label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tc-book__actions,
.tc-pay__actions {
	grid-column: 1 / -1;
	margin: var(--wp--preset--spacing--50, 1.5rem) 0 0;
	text-align: right;
}

/* ---- Step 2 ---- */
.tc-pay__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60, 2rem);
	padding: var(--wp--preset--spacing--60, 2rem);
	background: var(--wp--preset--color--surface, #E5E7EC);
	border-radius: 8px;
}

.tc-method {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--40, 1rem);
	padding: 1.5rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.tc-method input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tc-method__radio {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--wp--preset--color--muted-blue, #AAB6C6);
	border-radius: 50%;
}

.tc-method input:checked + .tc-method__radio {
	border-color: var(--wp--preset--color--primary, #1D3653);
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px var(--wp--preset--color--primary, #1D3653);
}

.tc-method input:focus-visible + .tc-method__radio {
	outline: 2px solid var(--wp--preset--color--accent, #E1C19F);
	outline-offset: 2px;
}

.tc-method__icon img {
	max-height: 28px;
	width: auto;
}

.tc-method__text b {
	display: block;
}

.tc-method__text span {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--subtle, #6B7280);
}

.tc-summary {
	padding: var(--wp--preset--spacing--50, 1.5rem);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.5);
}

.tc-summary__title {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--medium, 1rem);
}

.tc-summary__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 1rem;
	align-items: baseline;
	padding: 0.6rem 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.tc-summary__calc {
	color: var(--wp--preset--color--subtle, #6B7280);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

.tc-summary__row--coupon b {
	color: var(--wp--preset--color--island-teal, #126380);
}

.tc-coupon {
	margin: 1rem 0;
}

.tc-coupon label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--subtle, #6B7280);
}

.tc-coupon__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem;
}

.tc-coupon__row input {
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border, #D8DCE5);
	border-radius: 4px;
	background: #fff;
}

.tc-coupon__row .button {
	padding: 0.65rem 1.5rem;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--primary, #1D3653);
	color: #fff;
	cursor: pointer;
}

.tc-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border, #D8DCE5);
	font-weight: 700;
}

.tc-summary__total b {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-pay__terms {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--subtle, #6B7280);
	line-height: 1.8;
}

.tc-empty {
	padding: 2rem;
	text-align: center;
	color: var(--wp--preset--color--subtle, #6B7280);
}

@media (max-width: 768px) {
	.tc-book__grid,
	.tc-pay__grid {
		grid-template-columns: 1fr;
		padding: var(--wp--preset--spacing--40, 1rem);
	}
	.tc-fields {
		grid-template-columns: 1fr;
	}
	/* Four cells across a phone leaves ~85px each; the circle keeps its size and
	   the label wraps under it rather than the whole bar shrinking. */
	.tc-step__n {
		width: 2.5rem;
		height: 2.5rem;
	}
	.tc-step::before {
		top: 1.25rem;
	}
	.tc-step__label {
		font-size: var(--wp--preset--font-size--x-small, 0.75rem);
		line-height: 1.35;
	}
	.tc-trip {
		grid-template-columns: 100px 1fr;
	}
}

/* ---- 查询价格 dialog ---- */
.tc-pq {
	width: min(760px, 92vw);
	max-height: 88vh;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #fff;
	color: var(--wp--preset--color--contrast, #2B333B);
	overflow: auto;
	/* Centre with translate, not auto margins. WordPress's blockGap reset keeps
	   zeroing margin-block on the last child and ties this file on specificity, so
	   margin-based centring loses to load order; translate sidesteps margin entirely.
	   inset:auto clears the [open] fallback's positioning below. */
	position: fixed;
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.tc-pq::backdrop {
	background: rgba(21, 42, 64, 0.55);
}

/* Open without JS (server-rendered result): a plain <dialog open> is in the page
   flow rather than centred, so it gets centred by hand. */
.tc-pq[open]:not(:modal) {
	position: static;
	inset: auto;
	top: auto;
	left: auto;
	transform: none;
	margin: var(--wp--preset--spacing--60, 2rem) auto;
}

.tc-pq__panel {
	padding: var(--wp--preset--spacing--50, 1.5rem);
}

.tc-pq__head {
	display: flex;
	align-items: center;
	padding-bottom: var(--wp--preset--spacing--40, 1rem);
	border-bottom: 1px solid var(--wp--preset--color--border, #D8DCE5);
}

.tc-pq__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-pq__close {
	margin-left: auto;
	/* A tap target, not just a glyph: 1.5rem of × is about 20px, well under the 44
	   a thumb needs. */
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.75rem;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--wp--preset--color--subtle, #6B7280);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* A <dialog> moves focus to its first control on open, so this button wears a
   focus ring the moment the dialog appears — the browser's own, which on iOS is a
   heavy blue rounded box that reads as a mistake. The ring has to stay; it is the
   only thing telling a keyboard user where they are. Ours just looks deliberate. */
.tc-pq__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #E1C19F);
	outline-offset: -2px;
}

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

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

.tc-pq__h {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	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);
}

.tc-pq__h + .tc-pq__h,
.tc-dates + .tc-pq__h {
	margin-top: var(--wp--preset--spacing--60, 2rem);
}

.tc-pq__error {
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 400;
	color: #D0342C;
}

.tc-pq__error:not(:empty)::after {
	content: "*";
}

/* Month tabs */
.tc-months {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tc-months__track {
	display: flex;
	flex: 1 1 auto;
	gap: 0.5rem;
	/* A flex item's automatic minimum is its content, so a track holding one tab
	   too many widened the whole row and pushed it through the side of the panel
	   rather than being contained by it. The script decides how many tabs show;
	   this makes sure a miscount can never break the dialog's width. */
	min-width: 0;
	overflow: hidden;
}

.tc-month {
	flex: 1 1 0;
	padding: 0.55rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border, #D8DCE5);
	border-radius: 4px;
	background: #fff;
	color: var(--wp--preset--color--subtle, #6B7280);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	cursor: pointer;
	white-space: nowrap;
}

.tc-month.is-on {
	border-color: var(--wp--preset--color--primary, #1D3653);
	color: var(--wp--preset--color--primary, #1D3653);
	font-weight: 700;
}

.tc-months__nav {
	flex: 0 0 auto;
	width: 2rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary, #1D3653);
	font-size: 1.25rem;
	cursor: pointer;
}

.tc-months__nav:disabled {
	color: var(--wp--preset--color--border, #D8DCE5);
	cursor: default;
}

/* Date cards */
.tc-dates {
	display: none;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

.tc-dates.is-on {
	display: flex;
	justify-content: center;
}

.tc-date input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tc-date__box {
	display: grid;
	gap: 0.15rem;
	place-items: center;
	width: 110px;
	padding: 1rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border, #D8DCE5);
	border-radius: 6px;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--subtle, #6B7280);
}

.tc-date__box b {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-date input:checked + .tc-date__box {
	background: var(--wp--preset--color--primary, #1D3653);
	border-color: var(--wp--preset--color--primary, #1D3653);
	color: #fff;
}

.tc-date input:checked + .tc-date__box b {
	color: #fff;
}

.tc-date input:focus-visible + .tc-date__box {
	outline: 2px solid var(--wp--preset--color--accent, #E1C19F);
	outline-offset: 2px;
}

/* Steppers */
.tc-count {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.3rem 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* Named .tc-step until now, which is also the progress bar's class. Being later in
   the file, this rule won: it gave every step of the booking bar a border and a
   background, turned the <li> into a shrink-wrapped inline-flex box so the label
   stopped centring, and its overflow:hidden clipped the numbered circle. A
   padding-top:0 had been added here to paper over one symptom of that, which is
   the tell — the two components were never the same thing and should not have
   shared a name. */
.tc-counter {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--border, #D8DCE5);
	border-radius: 4px;
	overflow: hidden;
	background: var(--wp--preset--color--base, #F3F4F6);
}

.tc-counter__btn {
	width: 2.25rem;
	height: 1.5rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary, #1D3653);
	font-size: 1rem;
	cursor: pointer;
}

.tc-counter input {
	width: 2.75rem;
	height: 1.5rem;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--border, #D8DCE5);
	border-right: 1px solid var(--wp--preset--color--border, #D8DCE5);
	background: #fff;
	text-align: center;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	-moz-appearance: textfield;
	appearance: textfield;
}

.tc-counter input::-webkit-outer-spin-button,
.tc-counter input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tc-pq__submit {
	width: 100%;
}

/* Busy state for the AJAX price query. Reuses the tc-spin keyframes defined above;
   the button already disables itself against double-clicks, this makes the wait
   visible. */
.tc-pq__submit.is-loading::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.5em;
	vertical-align: -0.12em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: tc-spin 0.7s linear infinite;
}

.tc-pq__submit:disabled {
	opacity: 0.85;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.tc-pq__submit.is-loading::before {
		animation-duration: 2.4s;
	}
}

.tc-pq__actions {
	display: grid;
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--50, 1.5rem) 0 0;
}

.tc-btn--muted {
	background: var(--wp--preset--color--base, #F3F4F6);
	color: var(--wp--preset--color--contrast, #2B333B);
	text-align: center;
}

.tc-btn--accent {
	background: var(--wp--preset--color--accent, #E1C19F);
	color: var(--wp--preset--color--primary, #1D3653);
	text-align: center;
	border: 0;
	cursor: pointer;
}

/* Result */
.tc-pq__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40, 1rem);
	padding: var(--wp--preset--spacing--50, 1.5rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #D8DCE5);
}

.tc-fact {
	display: flex;
	gap: 0.75rem;
}

.tc-fact__icon svg {
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-fact__label {
	display: block;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--subtle, #6B7280);
}

.tc-fact__body b {
	color: var(--wp--preset--color--primary, #1D3653);
}

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

.tc-pq__total-label {
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-pq__amount {
	margin: 0.5rem 0;
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-pq__lines {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--contrast, #2B333B);
}

.tc-pq__note {
	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);
}

@media (max-width: 480px) {
	.tc-pq__facts {
		grid-template-columns: 1fr;
	}
	/* Two per row, sized by the row rather than by themselves.
	
	   `width: 50%` was on the box, and the box's parent is the <label> — a flex item
	   sized to its own content, so the percentage had nothing definite to resolve
	   against. The cards stayed at their 110px and the content broke inside them:
	   "08.26" over two lines, "Wednesday" split mid-word, "剩余2位" wrapped after the
	   digit. Two grid columns give each card a real share of the dialog. */
	/* Narrower arrows: at 320px two tabs need 184px and the track had 176. The
	   arrows are the cheapest 16px on the row — they are 24px of tap target either
	   way once the row's own height is counted. */
	.tc-months__nav {
		width: 1.5rem;
	}

	.tc-dates.is-on {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: stretch;
	}

	.tc-date {
		display: block;
		min-width: 0;
	}

	.tc-date__box {
		width: auto;
	}
}

/* Package mode with nothing to choose. Rare and always a setup mistake, but the
   customer should not be left staring at a blank panel wondering what to click. */
.tc-pq__empty {
	margin: var(--wp--preset--spacing--40, 1rem) 0 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--wp--preset--color--muted-blue, #AAB6C6);
	background: var(--wp--preset--color--base, #F3F4F6);
	color: var(--wp--preset--color--subtle, #6B7280);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* Package radios */
.tc-pkg {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.7rem 0;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.tc-pkg input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tc-pkg__radio {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	border: 2px solid var(--wp--preset--color--muted-blue, #AAB6C6);
	border-radius: 50%;
}

.tc-pkg input:checked + .tc-pkg__radio {
	border-color: var(--wp--preset--color--primary, #1D3653);
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--wp--preset--color--primary, #1D3653);
}

.tc-pkg input:focus-visible + .tc-pkg__radio {
	outline: 2px solid var(--wp--preset--color--accent, #E1C19F);
	outline-offset: 2px;
}

.tc-fact__sub {
	font-weight: 400;
	color: var(--wp--preset--color--subtle, #6B7280);
}

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

/* ---- 联系我们 ----
   The page's top and bottom spacing lives here rather than on the template's
   <main>: the 发送成功 state is a full-bleed photo rendered by the same block, and
   padding on main would leave a strip of page background above and below it. */
.tc-consult {
	padding-block: var(--wp--preset--spacing--70, 3.5rem) var(--wp--preset--spacing--80, 5rem);
}

.tc-consult__title {
	margin: 0 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-consult__lead {
	margin: 0 0 var(--wp--preset--spacing--60, 2rem);
	color: var(--wp--preset--color--contrast, #2B333B);
}

.tc-consult__card {
	padding: var(--wp--preset--spacing--60, 2rem);
	border-radius: 8px;
	background: var(--wp--preset--color--surface, #E5E7EC);
}

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

.tc-consult__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--small, 0.875rem);
	color: #D0342C;
}

/* The fields sit in a left column and the button floats bottom-right of the
   message, per the design — so the message row is its own grid rather than the
   card being one. */
.tc-consult__body {
	max-width: 800px;
}

.tc-consult__body .tc-fields {
	max-width: 460px;
}

.tc-field--half {
	max-width: 210px;
}

.tc-consult__msg {
	display: grid;
	grid-template-columns: minmax(0, 460px) 1fr;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	align-items: end;
}

.tc-consult__msg .tc-field {
	margin-bottom: 0;
}

.tc-consult__msg textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--primary, #1D3653);
	border-radius: 6px;
	background: #fff;
	color: var(--wp--preset--color--contrast, #2B333B);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	resize: vertical;
}

.tc-consult__msg textarea::placeholder {
	color: var(--wp--preset--color--muted-blue, #AAB6C6);
}

.tc-consult__msg textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary, #1D3653);
	outline-offset: -1px;
}

.tc-consult__actions {
	margin: 0;
}

.tc-consult__actions .tc-btn {
	width: 100%;
	max-width: 225px;
}

/* Hidden from people, not from bots — display:none is the one thing they check. */
.tc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 768px) {
	.tc-consult__card {
		padding: var(--wp--preset--spacing--40, 1rem);
	}
	.tc-consult__msg {
		grid-template-columns: 1fr;
		align-items: stretch;
	}
	.tc-consult__actions .tc-btn {
		max-width: none;
	}
	.tc-field--half {
		max-width: none;
	}
}

/* Turnstile sits above the button; the widget has its own fixed size. */
.tc-turnstile {
	margin-bottom: var(--wp--preset--spacing--40, 1rem);
}

.tc-consult__actions {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.tc-consult__actions .tc-turnstile {
	align-self: flex-start;
}

@media (max-width: 768px) {
	.tc-consult__actions {
		align-items: stretch;
	}
}

/* ---- 行程细节按钮 + 弹窗 ---- */
.tc-itin__more {
	margin-top: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--island-teal, #126380);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	cursor: pointer;
}

.tc-itin__more:hover {
	text-decoration: underline;
}

.tc-daydlg {
	width: min(92vw, 760px);
	max-height: 88vh;
	padding: 0;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(21, 42, 64, 0.35);
	overflow: hidden;
}

.tc-daydlg::backdrop {
	background: rgba(21, 42, 64, 0.55);
}

.tc-daydlg__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--60, 2rem);
	/* Edge to edge, as in the mockup. A border on a padded box stops short of the
	   dialog's sides and reads as an underline on the title instead of as the
	   header's floor. */
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--border, #D8DCE5);
	border-bottom: 0;
}

/* The title is the day and its places. Long place lists wrap rather than push the
   close button off the edge. */
.tc-daydlg__title {
	margin: 0;
	min-width: 0;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

/* Lighter than the DAY it follows, so the two read as a heading and its subtitle
   rather than one long string. */
.tc-daydlg__places {
	margin-left: 0.6rem;
	font-weight: 400;
	color: var(--wp--preset--color--secondary, #415F7E);
}

.tc-daydlg__x {
	flex: none;
	width: 2rem;
	height: 2rem;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--subtle, #6B7280);
	cursor: pointer;
}

.tc-daydlg__body {
	padding: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--60, 2rem);
	overflow-y: auto;
	max-height: 52vh;
	color: var(--wp--preset--color--contrast, #2B333B);
	line-height: 1.8;
}

/* The rich text the editor produced. */
.tc-daydlg__body h4 {
	margin: var(--wp--preset--spacing--40, 1rem) 0 0.4rem;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-daydlg__body h4:first-child {
	margin-top: 0;
}

.tc-daydlg__body p {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.tc-daydlg__body ul {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	padding-left: 1.4rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* A fixed row of four — three meals and where you sleep — with a rule between
   each, as in the mockup. Equal columns so the rules land at even intervals
   however long the values are. */
.tc-daydlg__foot {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding: var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--50, 1.5rem);
	box-shadow: inset 0 1px 0 var(--wp--preset--color--border, #D8DCE5);
	background: #fff;
}

.tc-daydlg__fact {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.25rem var(--wp--preset--spacing--30, 0.75rem);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--primary, #1D3653);
	line-height: 1.5;
}

.tc-daydlg__fact + .tc-daydlg__fact {
	border-left: 1px solid var(--wp--preset--color--border, #D8DCE5);
}

.tc-daydlg__fact svg {
	width: 24px;
	height: 24px;
	flex: none;
	color: var(--wp--preset--color--primary, #1D3653);
}

/* Label above value, as two lines. <b>/<i> carry the two roles without inventing
   another pair of class names for text that is only ever these two things. */
.tc-daydlg__fact b,
.tc-daydlg__fact i {
	display: block;
	font-weight: 400;
	font-style: normal;
}

@media (max-width: 768px) {
	.tc-daydlg__head,
	.tc-daydlg__body,
	.tc-daydlg__foot {
		padding-left: var(--wp--preset--spacing--40, 1rem);
		padding-right: var(--wp--preset--spacing--40, 1rem);
	}

	/* Four columns in a phone-width dialog leaves about 60px each. Two rows of
	   two, and the vertical rules go with them. */
	.tc-daydlg__foot {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
	}

	.tc-daydlg__fact {
		justify-content: flex-start;
	}

	.tc-daydlg__fact + .tc-daydlg__fact {
		border-left: 0;
	}
}