/*
 * Register-2 layout - "Option A: compact grid" from the layout study.
 *
 * Deliberately the simplest of the layout options: everything stays in
 * its original single-column order (see register-form.js) - only
 * First/Last Name and each Town/City + State + Postcode share a row.
 * Replaces an earlier, more ambitious two-column "Option E" version that
 * proved difficult to get pixel-correct on this live form; this one is
 * intentionally smaller in scope for reliability.
 *
 * Kept separate from um-forms.css (the general UM look-and-feel file)
 * since this row-pairing is specific to this one form's field set.
 */

/* "Create your trade account" card heading (added via functions.php's
   um_before_register_fields hook - see mre_register_form_heading()),
   matching the Option A mockup's card title exactly. */
.reg-form-heading {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 18px;
	color: #1a1a1a;
	font-weight: 700;
}

/* Field labels, matching the Option A mockup exactly - smaller and
   tighter than um-forms.css's default (14px/6px), which was tuned for
   the original single-column login/register pages. */
.um-register .um-field-label {
	font-size: 11px;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 5px;
}

.reg-row-pair {
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
}
.reg-row-pair > .um-field {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}

/* All three widths are fixed pixel values, none left to "auto" - a text
   input's auto-computed flex-basis is unreliable across browsers (it's
   based on the input's own intrinsic preferred size, not its actual
   rendered width), which caused real rendering bugs during the Option E
   attempt at this same row. */
.reg-row-triad {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}
.reg-row-triad > .um-field {
	min-width: -1;
	margin-bottom: 0;
}
.reg-row-triad > .um-field:nth-child(1) {
	flex: 0 0 220px;
}
.reg-row-triad > .um-field:nth-child(2) {
	flex: 0 0 110px;
}
.reg-row-triad > .um-field:nth-child(3) {
	flex: 0 0 140px;
}
/* State/Postcode are short values (a couple of characters, four digits) -
   the map-pin icon UM already puts on every address field just eats the
   little width these two have to spare; City keeps it since it has room. */
.reg-row-triad > .um-field:not(:first-child) .um-field-icon {
	display: none;
}
.reg-row-triad > .um-field:not(:first-child) input.um-iconed {
	padding-left: 14px !important;
}

/* This page's rows need a bit more width than the general 640px card cap
   (um-forms.css) to fit the three-across address row comfortably. */
.um-register.um {
	max-width: 720px;
}

/* Billing Address / Shipping Address headings, matching the Option A
   mockup exactly: small bold uppercase red label with a line trailing
   after it on the same row, instead of um-forms.css's default (text
   overlapping a line sitting above it). Scoped to this page only - other
   UM pages keep the general style. */
.um-register .um-field-divider {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 18px 0 13px;
	border-top: none;
	border-bottom: none !important;
}
.um-register .um-field-divider-text {
	position: static;
	top: 0;
	background: none;
	padding: 0;
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ED1B24;
	white-space: nowrap;
}
.um-register .um-field-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e5e5e5;
}

/* Field validation errors - UM's default is a solid red speech-bubble
   (.um-field-error) with a little arrow pointer (.um-field-arrow) made
   from an icon font glyph. Replaced with plain red text and a small
   circular "!" badge instead, which reads more like a normal inline
   field error and doesn't depend on an icon font actually loading (the
   arrow glyph can render as a broken/missing character if that font
   doesn't load, which is likely what looked "bad"). The input's own red
   border on error (um-forms.css) is untouched - only the message below
   it changes here. Scoped to this page; other UM pages keep UM's default. */
.um-register .um-field-error {
	background: none;
	color: #C74A4A;
	padding: 0;
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.4 !important;
	border-radius: 0;
	display: flex;
	align-items: flex-start;
	gap: 6px;
}
.um-register .um-field-error::before {
	content: "!";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	border-radius: 50%;
	background: #C74A4A;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.um-register .um-field-arrow {
	display: none;
}

/* Below ~560px there isn't room for paired/three-across rows - drop back
   to a plain single-column stack. */
@media (max-width: 560px) {
	.reg-row-pair,
	.reg-row-triad {
		flex-wrap: wrap;
	}
	.reg-row-pair > .um-field,
	.reg-row-triad > .um-field:nth-child(1),
	.reg-row-triad > .um-field:nth-child(2),
	.reg-row-triad > .um-field:nth-child(3) {
		flex: 1 1 100%;
		margin-bottom: 14px;
	}
	.reg-row-triad > .um-field:not(:first-child) .um-field-icon {
		display: block;
	}
	.reg-row-triad > .um-field:not(:first-child) input.um-iconed {
		padding-left: 44px !important;
	}
}