/*
 * 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-order__mode {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.yp-radio-option {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--wp--preset--color--light-gray);
	border-radius: var(--wp--custom--radius--control);
	cursor: pointer;
	font-weight: 400;
}

.yp-radio-option:has(input:checked) {
	border-color: var(--wp--preset--color--near-black);
	box-shadow: 0 0 0 1px var(--wp--preset--color--near-black);
}

.yp-radio-option input {
	margin: 0;
}

.yp-radio-option.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.yp-radio-option__text {
	display: block;
}

/* The disabled-reorder-for-guests reason (custom-order-form.js) — a
   `title` attribute alone only surfaces on hover, which doesn't exist
   on a touch device, so this is the note's one real home: shown
   inline, always, rather than relying on hover at all. */
.yp-radio-option__note {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
}

/* Always-expanded batch rows (Custom Design) — same numbered-badge
   language as .yp-variant-card in configurator.css, but every row
   shows its fields inline rather than switching one active card, since
   a custom design row is only four fields, not a whole preview stage. */
.yp-custom-order__batch {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.yp-batch-row {
	border: 1.5px solid var(--wp--preset--color--light-gray);
	border-radius: var(--wp--custom--radius--control);
	padding: 1rem;
}

.yp-batch-row__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.yp-batch-row__title {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
}

.yp-batch-row__index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
}

.yp-batch-row:nth-child(3n+1) .yp-batch-row__index {
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--near-black);
}

.yp-batch-row:nth-child(3n+2) .yp-batch-row__index {
	background: var(--wp--preset--color--magenta-deep);
	color: var(--wp--preset--color--white);
}

.yp-batch-row:nth-child(3n) .yp-batch-row__index {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--near-black);
}

.yp-batch-row__actions {
	display: flex;
	gap: 0.4rem;
	flex-shrink: 0;
}

.yp-batch-row .yp-field {
	margin-bottom: 1rem;
}

.yp-batch-row .yp-field:last-child {
	margin-bottom: 0;
}

.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;
}