/*
 * Create a Custom Label form (PROJECT_SPEC §13) and the Custom Stickers
 * form (docs/ARCHITECTURE.md) — both reuse this same file rather than
 * each getting their own: same field/pricing-summary layout, same
 * .yp-custom-order root class on both pages (a shared "one-off request
 * form" shell, not a Template-batch/configurator one), the only real
 * difference between the two is which fields the form asks for. Also
 * reuses .yp-field, .yp-quantity-* and .yp-configurator__cart-status
 * from configurator.css (enqueued alongside this file).
 */

.yp-custom-order {
	padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
}

.yp-custom-order .yp-field {
	margin-bottom: 1.5rem;
}

.yp-custom-order .yp-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.yp-custom-order__file-list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.yp-custom-order__file-list li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--wp--preset--color--light-gray);
}

.yp-custom-order__file-list .is-error {
	color: var(--wp--preset--color--magenta-deep);
}

.yp-custom-order__pricing {
	margin-top: 1.5rem;
	background: var(--wp--preset--color--warm-white);
	border-radius: var(--wp--custom--radius--control);
	overflow: hidden;
}

.yp-custom-order__fee {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.yp-custom-order__fee--total {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	border-top: 1px solid var(--wp--preset--color--light-gray);
}

.yp-custom-sticker__dimensions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.yp-custom-sticker__dimensions input {
	max-width: 8rem;
}

/* Contact form honeypot (class-contact-controller.php) — off-screen
   rather than display:none/visibility:hidden, which some spam bots
   specifically check for and skip filling in. aria-hidden on the
   wrapping div (contact-form.html) keeps it out of a screen reader's
   way too. */
.yp-field--honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}