/* ==========================================================================
   Delivery ZIP checker

   One field, one button, one sentence back. The field and the button are
   form.css and button.css unchanged; only the layout around them, the answer,
   and the terms live here.

   The answer is not coloured. Covered and not-covered are both real answers
   and neither is an error — `accent` is reserved for interactive elements, and
   a red "no" would make a ZIP outside the van's range look like the visitor
   did something wrong. The dot in front of it carries the distinction, the
   same filled-or-hollow pair the availability indicator uses on a product.
   ========================================================================== */

.tfs-zip {
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--hairline);
	border-radius: var(--wp--custom--radius);
}

.tfs-zip > * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.tfs-zip > :first-child {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   The form
   -------------------------------------------------------------------------- */

.tfs-zip__form {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

/* Field and button share a row once there is one to share. The field is given
   a definite share rather than left to size itself to a five-digit value. */
@media (min-width: 600px) {
	.tfs-zip__form {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}
}

.tfs-zip__field {
	min-width: 0;
}

.tfs-zip__submit {
	margin: 0;
	display: grid;
}

/* --------------------------------------------------------------------------
   The answer

   role="status", empty until there is one, and present in the accessibility
   tree from page load so the first answer is announced. An empty box under the
   field would read as something having gone wrong before anything was asked,
   so it collapses to nothing rather than being hidden.
   -------------------------------------------------------------------------- */

.tfs-zip__answer {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--step--12);
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sub);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

/*
 * Empty until there is an answer, and it must not hold open a gap while it is.
 * Collapsed with margin rather than `display: none`: this is a live region,
 * and a region taken out of the accessibility tree between page load and the
 * first answer is one some screen readers will not announce when the answer
 * arrives. With no content and no dot it has no height either way.
 */
.tfs-zip__answer:empty {
	margin-block-start: 0;
}

/*
 * The availability indicator's own pair, reused: filled for on the route,
 * hollow for off it. Not a colour — this system says yes and no with a ring,
 * and `accent` is reserved for things you can click.
 *
 * The dot is drawn only for the two answers it distinguishes. "That is not a
 * ZIP code" is a note about the field, not a delivery answer, so it gets no
 * indicator to misread.
 */
.tfs-zip__answer[data-status="covered"]::before,
.tfs-zip__answer[data-status="uncovered"]::before {
	content: "";
	width: var(--wp--custom--control--dot);
	height: var(--wp--custom--control--dot);
	flex: 0 0 var(--wp--custom--control--dot);
	border: 1px solid currentColor;
	border-radius: 50%;
	background-color: transparent;
}

.tfs-zip__answer[data-status="covered"]::before {
	background-color: currentColor;
}

.tfs-zip__answer[data-status="invalid"] {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--muted);
}

.tfs-zip__note-copy {
	margin: 0;
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

.tfs-zip__note-copy + .tfs-zip__note-copy {
	margin-block-start: var(--wp--custom--step--12);
}

/* Nobody has filled in a delivery area yet. Said plainly rather than answered
   out of an empty list. */
.tfs-zip__unset {
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

/* --------------------------------------------------------------------------
   Terms — the two numbers somebody is really asking about

   Shown whatever the answer is, and shown when there is no ZIP list at all.
   The threshold and the setup fee are facts about delivery, not about this
   visitor's address.
   -------------------------------------------------------------------------- */

.tfs-zip__terms {
	display: grid;
	gap: var(--wp--custom--step--12);
	margin-block: var(--wp--preset--spacing--30) 0;
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--hairline);
}

@media (min-width: 600px) {
	.tfs-zip__terms {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}
}

.tfs-zip__term {
	min-width: 0;
}

.tfs-zip__term-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-zip__term-value {
	margin: var(--wp--custom--step--4) 0 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--ink);
}