/**
 * Delivery availability check
 *
 * Sits under the Add to Cart button on the product page. Reuses `.input` and
 * `.button` so it reads as part of the store rather than a bolted-on plugin;
 * only the layout and the result line are specific to it.
 *
 *   <div class="delivery-check">
 *     <p class="delivery-check__title">Check delivery availability</p>
 *     <div class="delivery-check__row"> input + button </div>
 *     <p class="delivery-check__result is-available"> … </p>
 *   </div>
 */

.delivery-check {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

.delivery-check__title {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	line-height: var(--line-snug);
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0;
}

.delivery-check__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Roomy enough for six digits and no more; the button keeps its own width. */
.delivery-check__input {
	flex: 1 1 9rem;
	width: auto;
	min-width: 0;
	font-family: var(--font-mono);
	letter-spacing: var(--tracking-wide);
}

.delivery-check__submit {
	flex: 0 0 auto;
}

/* --- Result line --- */

.delivery-check__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
	font-size: var(--text-sm);
	line-height: var(--line-relaxed);
	color: var(--color-text);
	margin: 0;
}

/* Nothing to announce yet — keep the layout from reserving a blank line. */
.delivery-check__result:empty {
	display: none;
}

.delivery-check__mark {
	flex: none;
	font-family: var(--font-mono);
	line-height: 1;
}

/* The ETA sits on its own line under the verdict. */
.delivery-check__detail {
	flex: 1 0 100%;
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.delivery-check__result.is-loading {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-muted);
}

.delivery-check__result.is-available {
	color: var(--color-heading);
}

/* Unavailable and invalid are not failures of the site, so they stay quiet —
   only a genuine error takes the accent colour. */
.delivery-check__result.is-unavailable,
.delivery-check__result.is-invalid {
	color: var(--color-muted);
}

.delivery-check__result.is-error {
	color: var(--color-accent);
}

@media (max-width: 30rem) {
	.delivery-check__input,
	.delivery-check__submit {
		flex: 1 1 100%;
	}
}