/**
 * Made to order — the two fields on a product page.
 *
 * Every value is a theme token, so the block takes the shop's field geometry,
 * its ink and its accent rather than carrying a look of its own. On the
 * Patisserie pack that means the ghost underline; on Precision it means the
 * hairline box. The module never decides which.
 *
 * @package urartu-core
 */

.urartu-mto {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4, 16px);
	margin-block: var(--sp-5, 20px);
	padding-block: var(--sp-5, 20px);
	/* A hairline above and below, because these two questions are a different
	   kind of thing from the variation selects above them: those choose the
	   product, these describe the order. */
	border-top: 1px solid var(--u-border, rgba(36, 31, 28, .14));
	border-bottom: 1px solid var(--u-border, rgba(36, 31, 28, .14));
}

.urartu-mto__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.urartu-mto__label {
	font-family: var(--u-font-body, inherit);
	font-size: var(--u-caps-fs, 12px);
	font-weight: var(--u-caps-fw, 600);
	letter-spacing: var(--u-caps-track, .08em);
	text-transform: uppercase;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

.urartu-mto__label .required {
	border: 0;
	text-decoration: none;
	color: var(--color-error, #B42318);
}

/*
 * The controls take the theme's own field geometry.
 *
 * Written without a fill or a border of their own: a pack that draws fields as
 * ghost underlines and a module that draws them as boxes is two kinds of input
 * in one form, which is exactly the fault the checkout had.
 */
.urartu-mto__date,
.urartu-mto__text {
	box-sizing: border-box;
	width: 100%;
	max-width: 22rem;
	min-height: var(--u-field-h, 48px);
	padding-inline: var(--u-field-px, 16px);
	font-family: var(--u-font-body, inherit);
	font-size: var(--u-field-fs, 16px);
	color: var(--u-field-fg, #241F1C);
	background: var(--u-field-bg, #fff);
	border: var(--u-field-bd-w, 1px) solid var(--u-field-bd, #D9D2C7);
	border-radius: var(--u-field-radius, 2px);
}

.urartu-mto__date:focus,
.urartu-mto__text:focus {
	border-color: var(--u-field-bd-focus, var(--u-btn-bg, #2A6F62));
	outline: none;
}

/*
 * Chrome hides the calendar button on a date input until the field is hovered
 * or focused, which on a field that is required reads as a plain text box the
 * customer is expected to type a date into. Shown always, and tinted with the
 * shop's own accent rather than left as the browser's blue.
 */
.urartu-mto__date::-webkit-calendar-picker-indicator {
	opacity: .65;
	cursor: pointer;
	filter: saturate(0);
}

.urartu-mto__date:hover::-webkit-calendar-picker-indicator,
.urartu-mto__date:focus::-webkit-calendar-picker-indicator {
	opacity: 1;
}

.urartu-mto__note {
	font-family: var(--u-font-body, inherit);
	font-size: var(--fs-small, .875rem);
	line-height: 1.5;
	color: var(--u-muted-fg, rgba(36, 31, 28, .62));
}

/* Side by side once there is room for both without either going narrower than
   a date fits in. */
@media (min-width: 640px) {

	.urartu-mto {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sp-6, 24px);
	}

	.urartu-mto__field {
		flex: 1 1 15rem;
		min-width: 0;
	}
}