/*
 * Styles for [mb_request_info_picker] - the Belt Spec / Fabrication
 * picker that sits beside a duplicated "Request Info" Elementor Contact
 * Form widget (typically as the second column of a two-column layout).
 * Deliberately scoped to .mrf-picker and kept minimal so it inherits the
 * page's own theme, fonts, and colors rather than fighting them -
 * override any of these with Elementor's own Custom CSS on the
 * widget/page if it needs to match more closely.
 *
 * Height behavior: .mrf-picker fills whatever height its container
 * gives it (100%) and .mrf-picker-list grows to consume whatever's left
 * after the summary line, scrolling internally past --mrf-picker-
 * max-height. In a two-column Elementor layout, the row's default
 * flex stretch already makes the picker's column match the contact
 * form column's height - the rules below (plus the .elementor-widget-
 * shortcode :has() rules further down) just let the list actually use
 * that space instead of stopping at a fixed height with empty space
 * below it. Used standalone (no stretched ancestor, e.g. embedded
 * directly on a Belt Spec / Fabrication page), "100%" simply can't
 * resolve, so it falls back to auto/content sizing exactly as before -
 * --mrf-picker-max-height then acts purely as a safety ceiling.
 */

.mrf-picker {
	--mrf-picker-max-height: 640px;
	--mrf-picker-border: #ddd;
	--mrf-picker-accent: #1e63c9;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	text-align: left;
}

.mrf-picker-empty {
	margin: 0;
}

.mrf-picker-summary {
	/*
	 * relocateSummary() (mrf-picker.js) moves this element out into the
	 * nearby Elementor form, where it becomes a flex item among the
	 * form's own fields. Flex items default to min-width:auto - "never
	 * shrink narrower than my content's natural width" - which is
	 * exactly what let a long selection list push past the form's edge
	 * instead of wrapping. width/max-width/min-width/box-sizing below
	 * force it back to the row's actual width regardless of which
	 * flex/block context it ends up in, and overflow-wrap/word-break
	 * make sure a single very long unbroken run (e.g. no spaces in a
	 * part number) still wraps rather than overflowing on its own.
	 *
	 * --mrf-summary-max-height caps how tall this box can grow before it
	 * scrolls internally (overflow-y: auto) instead of pushing the rest
	 * of the form further down the page - roughly 10 items' worth at
	 * this font-size/line-height/spacing. Below that, overflow:auto has
	 * no visible effect at all (no scrollbar appears until content
	 * actually exceeds the box), so a short list just sizes to fit.
	 */
	--mrf-summary-max-height: 260px;
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	max-height: var(--mrf-summary-max-height);
	overflow-y: auto;
	box-sizing: border-box;
	margin: 6px 0 12px;
	padding: 8px 12px;
	background: #f5f7fa;
	border: 1px solid var(--mrf-picker-border);
	border-radius: 4px;
	font-size: 0.9em;
	overflow-wrap: break-word;
	word-break: break-word;
	/*
	 * relocateSummary() moves this element into the Elementor form,
	 * which (like many Elementor/theme form styles) centers text on its
	 * own fields by default - that's inherited down into this box and
	 * its nested list, flattening the indentation that's supposed to
	 * set Fabrications apart from their parent Belt Spec. !important
	 * guards against that ancestor rule outright targeting this element
	 * (rather than just being inherited), which plain text-align: left
	 * wouldn't be guaranteed to beat.
	 */
	text-align: left !important;
}

.mrf-picker-summary-empty {
	margin: 0;
	text-align: left !important;
}

.mrf-picker-summary-list,
.mrf-picker-summary-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left !important;
}

.mrf-picker-summary-list > li {
	margin: 0 0 8px;
}

.mrf-picker-summary-list > li:last-child {
	margin-bottom: 0;
}

.mrf-picker-summary-sublist {
	margin: 4px 0 0 16px;
}

.mrf-picker-summary-sublist > li {
	margin: 0 0 4px;
}

.mrf-picker-summary-sublist > li:last-child {
	margin-bottom: 0;
}

.mrf-picker-list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-height: 200px;
	max-height: var(--mrf-picker-max-height);
	overflow-y: auto;
	border: 1px solid var(--mrf-picker-border);
	border-radius: 4px;
}

/*
 * Elementor wraps every widget in its own .elementor-widget-container,
 * which sits inside the flex-item wrapper Elementor generates for the
 * widget (.elementor-widget-shortcode here, since the picker is placed
 * via a Shortcode widget). Neither stretches to fill its own parent's
 * height by default, which is what breaks the height:100% chain above -
 * these two rules close that gap, scoped narrowly (via :has()) to only
 * the specific widget instance that actually contains .mrf-picker, so
 * no other Shortcode widget on the site is affected.
 *
 * align-self:flex-start guards against the picker's column being
 * vertically centered against a taller sibling (e.g. the contact form)
 * if the row holding both columns doesn't already have its own Align
 * Items set to Start - a flex item with an explicit align-self ignores
 * its container's align-items regardless of that container's own
 * setting, so this holds the picker to the top either way. If the
 * *columns themselves* are still visibly offset after this (rather
 * than the widget within its own column), that's the row's own Align
 * Items setting in Elementor, one level up from anything this
 * selector reaches - not something safe to force blind from here.
 */
.elementor-widget-shortcode:has(> .elementor-widget-container > .mrf-picker) {
	height: 100%;
	align-self: flex-start;
}

.elementor-widget-shortcode:has(> .elementor-widget-container > .mrf-picker) > .elementor-widget-container {
	height: 100%;
}

.mrf-picker-belt-item {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mrf-picker-border);
}

.mrf-picker-belt-item:last-child {
	border-bottom: none;
}

.mrf-picker-item {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.mrf-picker-thumb {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border: 1px solid var(--mrf-picker-border);
	border-radius: 3px;
	flex-shrink: 0;
}

.mrf-picker-thumb-sm {
	width: 32px;
	height: 32px;
}

.mrf-picker-thumb-placeholder {
	background: #eee;
}

.mrf-picker-item-text {
	display: flex;
	flex-direction: column;
}

.mrf-picker-partnumber {
	font-weight: 600;
}

.mrf-picker-desc {
	font-size: 0.9em;
	color: #555;
}

.mrf-picker-toggle-fabs {
	margin: 8px 0 0 54px;
	background: none;
	border: 1px solid var(--mrf-picker-accent);
	color: var(--mrf-picker-accent);
	border-radius: 3px;
	padding: 4px 10px;
	font-size: 0.85em;
	cursor: pointer;
}

.mrf-picker-toggle-fabs[hidden] {
	display: none;
}

.mrf-picker-fab-list {
	list-style: none;
	margin: 10px 0 0 54px;
	padding: 0;
}

.mrf-picker-fab-list[hidden] {
	display: none;
}

.mrf-picker-fab-item {
	padding: 6px 0;
}

/*
 * Shown briefly while a belt's fabrications are being fetched on demand
 * (assets/js/mrf-picker.js's loadFabrications()), and on a failed fetch
 * with a retry button in its place.
 */
.mrf-picker-fab-loading,
.mrf-picker-fab-error {
	padding: 8px 0;
	font-size: 0.9em;
	color: #555;
}

.mrf-picker-fab-error {
	color: #b91c1c;
}

.mrf-picker-fab-error [data-mrf-retry-fabs] {
	background: none;
	border: 1px solid var(--mrf-picker-accent);
	color: var(--mrf-picker-accent);
	border-radius: 3px;
	padding: 2px 8px;
	font-size: 0.95em;
	cursor: pointer;
	margin-left: 4px;
}

/*
 * [mb_request_info_link] - the plain centered link placed on Belt Spec /
 * Fabrication pages that navigates to the Request Info page.
 */
.mrf-picker-trigger-wrap {
	--mrf-picker-link-color: #1a5f3f;
	--mrf-picker-link-hover: #144a31;

	text-align: center;
}

.mrf-picker-trigger-link {
	display: inline-block;
	color: var(--mrf-picker-link-color);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.mrf-picker-trigger-link:hover,
.mrf-picker-trigger-link:focus {
	color: var(--mrf-picker-link-hover);
}

/*
 * .mrf-hidden-field - apply this as a CSS Class (Advanced tab) on the
 * Elementor form field that receives the "requested items" list. That
 * field needs to be Type: Textarea rather than Type: Hidden - Hidden
 * fields go through WordPress's single-line sanitizer, which collapses
 * the newlines this list depends on down to a single space, the same
 * way it collapsed literal <br> tags to nothing. Textarea fields get
 * the newline-preserving sanitizer instead (the same one that already
 * keeps the Message field's line breaks intact), but render as a
 * visible multi-line box by default - this class hides it the same
 * way type="hidden" used to, without changing how its value survives
 * sanitization.
 */
.mrf-hidden-field {
	display: none !important;
}