/* Travel Tools — shared styles. Scoped under .tp-tool so it never leaks into the rest of the theme. */

.tp-tool {
	background: var( --tp-color-surface, #fff );
	border: 1px solid var( --tp-color-border, #e4e0d8 );
	border-radius: 12px;
	padding: 1.5rem;
	max-width: 640px;
}

.tp-tool__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
}

.tp-tool__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
}

.tp-tool__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 140px;
}

.tp-tool__field label {
	font-size: 0.85rem;
	font-weight: 600;
	/* Full-strength text color, not the muted tone — a form label is
	   information the user needs, not decoration, so it gets the same
	   contrast bar as body text (spec: "labels must be clearly visible"). */
	color: var( --tp-color-text );
}

/* Color/background/border for inputs and selects come from the theme's
   global form-control baseline (main.css) — deliberately not repeated
   or overridden here, so there is exactly one place that can get the
   contrast wrong instead of two that can drift out of sync. This rule
   only adds tool-specific sizing. */
.tp-tool input,
.tp-tool select {
	padding: 0.6rem 0.7rem;
	border-radius: 8px;
	font-size: 1rem;
	width: 100%;
}

.tp-tool__swap {
	border: 1px solid var( --tp-color-border, #d8d3c8 );
	background: var( --tp-color-surface-alt, #f6f3ec );
	border-radius: 8px;
	width: 42px;
	height: 42px;
	font-size: 1.1rem;
	cursor: pointer;
	align-self: center;
}

.tp-tool__result {
	margin-top: 1.25rem;
	font-size: 1.15rem;
}

.tp-tool__result--big {
	font-size: 1.75rem;
	text-align: center;
}

.tp-tz-live-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--tp-color-border);
}
.tp-tz-live-compare__item { display: flex; flex-direction: column; gap: 0.25rem; }
.tp-tz-live-compare__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tp-color-text-muted); }
.tp-tz-live-compare__time { font-size: 1.3rem; font-weight: 700; font-family: var(--tp-font-body); }
@media (max-width: 480px) {
	.tp-tz-live-compare { grid-template-columns: 1fr; }
}

.tp-tool__meta {
	margin-top: 0.75rem;
	font-size: 0.8rem;
	color: var( --tp-color-text-muted, #6b675f );
}

.tp-tool__breakdown {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.tp-tool__breakdown-row {
	display: flex;
	justify-content: space-between;
	padding: 0.35rem 0;
	border-bottom: 1px dashed var( --tp-color-border, #e4e0d8 );
	font-size: 0.95rem;
}

.tp-tool__total {
	font-size: 1.2rem;
	padding-top: 0.5rem;
}

.tp-tool__warning {
	color: var( --tp-color-danger, #b3261e );
}

.tp-checklist {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.5rem 1.5rem;
}

.tp-checklist li label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
}

.tp-checklist li.is-packed label {
	color: var(--tp-color-text-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Contact form */
.tp-contact-form .tp-field-hidden {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tp-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.tp-form-row input,
.tp-form-row textarea {
	/* Color/background/border come from the global form-control
	   baseline in main.css — see the note on .tp-tool input above. */
	padding: 0.7rem 0.8rem;
	border-radius: 8px;
	font: inherit;
	width: 100%;
}

.tp-form-notice {
	padding: 0.85rem 1rem;
	border-radius: 8px;
	margin-bottom: 1.25rem;
	font-size: 0.95rem;
}

.tp-form-notice--success {
	background: #eaf4ea;
	color: #23572a;
}

.tp-form-notice--error {
	background: #fbeceb;
	color: #8a2c25;
}

/* Search autocomplete */
.tp-search-field {
	position: relative;
}

.tp-search-suggestions {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	inset-inline-end: 0;
	/* Fixed light surface + fixed dark text, same reasoning as the
	   --tp-input-* tokens: this panel must stay readable regardless of
	   whether the surrounding page is in light or dark mode. */
	background: var( --tp-input-bg );
	color: var( --tp-input-text );
	border: 1px solid var( --tp-input-border );
	border-radius: 0 0 10px 10px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	z-index: 40;
	max-height: 320px;
	overflow-y: auto;
}

.tp-search-suggestion {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.9rem;
	text-decoration: none;
	color: inherit;
}

.tp-search-suggestion:hover,
.tp-search-suggestion:focus {
	/* Fixed tint, not the theme-adaptive surface-alt — this panel's
	   background never changes with dark mode, so its hover state
	   can't either without going dark-text-on-dark-hover. */
	background: var( --tp-input-hover-bg );
}

.tp-search-suggestion__type {
	font-size: 0.75rem;
	color: var( --tp-input-placeholder );
	white-space: nowrap;
}

[dir="rtl"] .tp-search-suggestion,
[dir="rtl"] .tp-tool__breakdown-row {
	direction: rtl;
}

/* Distance Calculator: city search (see distance-calculator-search.js) */
.tp-tool__grid--places {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-bottom: 1rem;
}
.tp-place-search { position: relative; }
.tp-place-search__suggestions {
	position: absolute;
	top: 100%;
	inset-inline: 0;
	background: var( --tp-input-bg );
	color: var( --tp-input-text );
	border: 1px solid var( --tp-input-border );
	border-radius: 0 0 10px 10px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	z-index: 40;
	max-height: 260px;
	overflow-y: auto;
}
.tp-place-search__suggestion {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.6rem 0.9rem;
	border: none;
	background: none;
	font: inherit;
	text-align: start;
	color: inherit;
	cursor: pointer;
}
.tp-place-search__suggestion:hover,
.tp-place-search__suggestion:focus {
	background: var( --tp-input-hover-bg );
}
.tp-place-search__suggestion-country {
	font-size: 0.8rem;
	color: var( --tp-input-placeholder );
	white-space: nowrap;
}
.tp-tool__advanced {
	margin-bottom: 1rem;
	font-size: 0.85rem;
}
.tp-tool__advanced summary {
	cursor: pointer;
	color: var( --tp-color-text-muted, #6b675f );
}
.tp-tool__advanced[open] summary {
	margin-bottom: 0.75rem;
}

/* Checklist checkbox sizing.
   The `.tp-tool input, .tp-tool select { width: 100% }` rule near the top of
   this file is written for text fields and selects, but a bare element
   selector also matches the packing checklist's checkboxes. Each box was
   being stretched to the full grid column (measured 204px), which pushed the
   label text far to the right and squeezed it into a narrow, wrapping column
   -- the ragged, misaligned grid this fixes. Restore the control's intrinsic
   size and stop the flex row from shrinking it. Applies to radios too, for
   the same reason, before the next tool hits it. */
.tp-tool input[type="checkbox"],
.tp-tool input[type="radio"] {
	width: auto;
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--tp-color-accent);
}

/* Labels that wrap to two lines should hang from the first line, not centre
   the box against the whole block. The nudge is optical, matched to the
   1.45 line-height above it; margin-block-start is logical, so RTL needs no
   mirrored rule. */
.tp-checklist li label {
	align-items: start;
	line-height: 1.45;
}

.tp-checklist li label input[type="checkbox"] {
	margin-block-start: 0.18em;
}