/**
 * B2B RFQ Pro — frontend base styles.
 * Elementor widget Style-tab controls override these via {{WRAPPER}}-scoped
 * selectors, which win on specificity, so these are just sane defaults for
 * the shortcode fallback and unstyled widget instances.
 */

/**
 * Failsafe: hide any native WooCommerce "Add to Cart" button that might
 * still render through a path our PHP-side filters don't reach — e.g. a
 * theme's own markup, or WooCommerce Blocks (Product Collection/All
 * Products blocks), which render via the Store API and never fire the
 * classic woocommerce_after_shop_loop_item / add_to_cart_link hooks at
 * all. This is a store-wide RFQ-only site: the only button that should
 * ever be visible is "Add to RFQ".
 */
.add_to_cart_button,
.ajax_add_to_cart,
.single_add_to_cart_button,
a.button.product_type_simple,
a.button.product_type_variable,
a.button.product_type_grouped,
a.button.product_type_external,
.wc-block-components-product-button,
.wc-block-grid__product-add-to-cart,
.wp-block-woocommerce-product-button {
	display: none !important;
}

.b2b-rfq-add-to-cart-form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.b2b-rfq-qty-input {
	width: 60px;
}

/**
 * Add to RFQ Button widget only (AddToRfqButtonWidget::render() is the
 * only caller that passes this modifier class — the product archive/
 * related products cards and the single-product-page Add to RFQ row
 * never do). .b2b-rfq-condition-field's own `margin: 0 0 8px` (further
 * up this file) exists for genuinely stacked contexts, spacing it above
 * whatever sits below it in a column. This widget lays condition/
 * quantity/button out as one horizontal row instead
 * (.b2b-rfq-add-to-cart-form's own align-items: center, above) — flexbox
 * centers each item's own margin box, so that same bottom-only margin
 * shifts the condition control's visible content above the shared center
 * line the quantity input and button (both margin-free) actually sit on.
 * Zeroing it out here, and nowhere else, is what actually lines the three
 * controls up on one row without touching the stacked contexts that
 * still need the spacing.
 */
.b2b-rfq-add-to-cart-form--widget .b2b-rfq-condition-field {
	margin: 0;
}

.b2b-rfq-add-to-cart-feedback {
	font-size: 0.85em;
	color: #2e7d32;
}

.b2b-rfq-mini-cart {
	position: relative;
	display: inline-block;
}

.b2b-rfq-mini-cart-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.b2b-rfq-mini-cart-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
	transition: color 0.15s ease;
}

.b2b-rfq-mini-cart-icon svg {
	width: 1em;
	height: 1em;
}

.b2b-rfq-mini-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #1a1a1a;
	color: #fff;
	font-size: 11px;
	line-height: 1;
}

.b2b-rfq-mini-cart-panel {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 100;
	min-width: 260px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 12px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
}

.b2b-rfq-mini-cart:hover .b2b-rfq-mini-cart-panel,
.b2b-rfq-mini-cart:focus-within .b2b-rfq-mini-cart-panel {
	display: block;
}

.b2b-rfq-mini-cart-items {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.b2b-rfq-mini-cart-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
}

/**
 * Fixed-size thumbnail — never stretched by a tall/wide source image
 * (object-fit: cover), never shrunk by the name/qty flexing beside it
 * (flex: 0 0 auto). ProductImageResolver::get_html() always returns an
 * <img>, so there is always exactly one element in here to size.
 */
.b2b-rfq-mini-cart-item-image {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
}

.b2b-rfq-mini-cart-item-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}

/**
 * The mini-cart's structural equivalent of the full table's fixed
 * Product column: a long product name wraps in place, inside its own
 * span, rather than pushing the quantity out of the row or overflowing
 * the panel. max-width (not width) so a short name still hugs its own
 * content — only a name long enough to matter is ever capped. flex: 1 1
 * auto (rather than relying on justify-content on the parent, as before
 * the image column existed) is what makes this one span absorb the
 * space between the fixed-width image and the fixed-width quantity.
 * Elementor's Product Column Width control (RfqMiniCartWidget) overrides
 * this same max-width per breakpoint; this is the shortcode/no-Elementor
 * default.
 */
.b2b-rfq-mini-cart-item-name {
	flex: 1 1 auto;
	max-width: 70%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.b2b-rfq-mini-cart-item-qty {
	flex: 0 0 auto;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 4px;
}

.b2b-rfq-mini-cart-qty-input {
	width: 48px;
	box-sizing: border-box;
	padding: 2px 4px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	font: inherit;
	font-size: inherit;
	text-align: center;
}

.b2b-rfq-mini-cart-qty-input:focus {
	border-color: #1a1a1a;
	outline: none;
}

/**
 * Quantity-rejection notice (SPEC.md §3.7.1) — hidden by having nothing in
 * it; handleCartQtyChange()/setQuantityMessage() in frontend.js are the
 * only things that ever put text here. Styled unconditionally as an error
 * notice since nothing else is ever shown in this element.
 */
.b2b-rfq-mini-cart-message:not(:empty) {
	margin: 0 0 8px;
	padding: 6px 8px;
	border: 1px solid #b00020;
	border-radius: 4px;
	background-color: #fbeaec;
	color: #b00020;
	font-size: 12px;
}

.b2b-rfq-mini-cart-view-btn {
	display: block;
	width: 100%;
	text-align: center;
}

.b2b-rfq-cart-form {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.b2b-rfq-cart-form-items,
.b2b-rfq-cart-form-fields {
	flex: 1 1 320px;
	min-width: 280px;
}

.b2b-rfq-cart-form-heading {
	margin-top: 0;
}

/**
 * Fixed table layout: column widths come from the widths set below (or
 * from Elementor's own Product Column Width control, which overrides
 * .b2b-rfq-col-product via a higher-specificity {{WRAPPER}}-scoped
 * selector), never from cell content. Without this, a wide cell (a line
 * with several stacked condition names, or a long product title) makes
 * the browser's default auto layout stretch that column and squeeze the
 * others — the exact bug this table layout exists to prevent.
 *
 * A min-width floor keeps every column legible rather than crushed on a
 * narrow viewport; .b2b-rfq-cart-table-wrap below scrolls horizontally
 * once the viewport is narrower than that floor, so the table's own
 * column proportions — and the alignment between them — never change
 * across breakpoints, only how much of the table is visible at once.
 */
.b2b-rfq-cart-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.b2b-rfq-cart-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	table-layout: fixed;
}

.b2b-rfq-cart-table th,
.b2b-rfq-cart-table td {
	text-align: left;
	vertical-align: top;
	padding: 8px;
	border-bottom: 1px solid #e0e0e0;
}

/**
 * Default column shares (10/30/13/22/17/8 = 100%), overridden per-column
 * only where a dedicated control exists (Product Column Width here;
 * Quantity Input Width targets the input itself, not this td/th, so it
 * stays as-is). Percentages (not px) so the table still scales fluidly
 * with no Elementor override at all — the shortcode path's only styling.
 */
.b2b-rfq-col-image {
	width: 10%;
}

.b2b-rfq-col-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}

.b2b-rfq-col-product {
	width: 30%;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.b2b-rfq-col-sku {
	width: 13%;
}

.b2b-rfq-col-condition {
	width: 22%;
}

.b2b-rfq-col-qty {
	width: 17%;
}

.b2b-rfq-col-remove {
	width: 8%;
}

/**
 * One condition name per line inside the Condition cell — a line with
 * three conditions is still one table row, with three stacked lines in
 * this one cell, never three separate rows. Bounds the cell's natural
 * content width to whichever single name is longest rather than the sum
 * of all of them, which is what let this column stretch before.
 */
.b2b-rfq-condition-line {
	display: block;
}

.b2b-rfq-condition-line:not( :last-child ) {
	margin-bottom: 2px;
}

.b2b-rfq-cart-qty-input {
	width: 70px;
	max-width: 100%;
}

.b2b-rfq-cart-remove-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: #b00020;
}

/**
 * Quantity-rejection notice (SPEC.md §3.7.1) — see the mini-cart's own
 * .b2b-rfq-mini-cart-message rule above for why this is unconditionally
 * styled as an error and never toggled between states.
 */
.b2b-rfq-cart-message:not(:empty) {
	margin: 0 0 12px;
	padding: 8px 12px;
	border: 1px solid #b00020;
	border-radius: 4px;
	background-color: #fbeaec;
	color: #b00020;
	font-size: 13px;
}

/**
 * The MRO/Special forms' own <form> wrapper (SPEC.md §3.2.3/§3.2.4,
 * manual-rfq-form.php) is deliberately a different class,
 * .b2b-rfq-manual-submission-form, from the Standard cart form's — two
 * separate submit-handling scripts (frontend.js, manual-rfq-form.js) each
 * need their own unambiguous selector to bind to. Both wrappers still
 * share this one flex-layout rule, since .b2b-rfq-field-half's own
 * `flex: 1 1 calc(50% - 6px)` (below) only takes effect on a flex child —
 * without this, MRO/Special's identical .b2b-rfq-field markup (same
 * RfqFormFieldsRenderer output as Standard) falls back to plain block
 * layout and every field renders at 100% width regardless of its own
 * flex-basis.
 */
.b2b-rfq-submission-form,
.b2b-rfq-manual-submission-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.b2b-rfq-field {
	flex: 1 1 45%;
	margin: 0;
}

.b2b-rfq-field-full {
	flex: 1 1 100%;
}

.b2b-rfq-field-half {
	flex: 1 1 calc( 50% - 6px );
	min-width: 0;
}

.b2b-rfq-cart-form [hidden],
.b2b-rfq-mini-cart [hidden] {
	display: none !important;
}

.b2b-rfq-field label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.b2b-rfq-field input,
.b2b-rfq-field textarea,
.b2b-rfq-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	font: inherit;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.b2b-rfq-field input:focus,
.b2b-rfq-field textarea:focus,
.b2b-rfq-field select:focus {
	border-color: #1a1a1a;
	outline: none;
}

.b2b-rfq-phone-group {
	display: flex;
	gap: 8px;
}

.b2b-rfq-phone-code {
	flex: 0 0 auto;
	width: auto;
	max-width: 45%;
}

.b2b-rfq-phone-number {
	flex: 1 1 auto;
}

.b2b-rfq-required {
	color: #b00020;
}

/**
 * Honeypot field: visually hidden off-screen (not display:none) so bots
 * that specifically skip display:none inputs still fill it in, while
 * aria-hidden + tabindex="-1" in the markup keeps it invisible to screen
 * readers and unreachable by keyboard for real visitors.
 */
.b2b-rfq-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.b2b-rfq-form-message {
	min-height: 1em;
}

.b2b-rfq-form-message:not(:empty) {
	padding: 10px 14px;
	border-radius: 4px;
}

.b2b-rfq-form-message-success {
	color: #2e7d32;
	background-color: #eaf6ea;
	border: 1px solid #2e7d32;
}

.b2b-rfq-form-message-error {
	color: #b00020;
	background-color: #fbeaec;
	border: 1px solid #b00020;
}

@media ( max-width: 480px ) {
	.b2b-rfq-field-half {
		flex-basis: 100%;
	}

	.b2b-rfq-phone-group {
		flex-direction: column;
	}

	.b2b-rfq-phone-code {
		max-width: 100%;
	}
}

@media ( max-width: 768px ) {
	.b2b-rfq-cart-form {
		flex-direction: column;
	}
}

/* Product Condition Management System — baseline styling.
 * Full Elementor style controls (typography/design/spacing) for this
 * field ship with the Mini Cart & Product Summary styling phase; these
 * are just sane unstyled-HTML defaults, deliberately theme-agnostic (no
 * dependency on Elementor being present, no assumption of a specific
 * theme's form-control styles), so the field isn't naked before then.
 */
.b2b-rfq-condition-field {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	font-size: 13px;
}

.b2b-rfq-condition-label {
	font-weight: 600;
	color: #3f3f46;
}

.b2b-rfq-condition-text {
	color: #18181b;
}

/**
 * Multi-condition checklist (Requirement 4): a plain <fieldset>/<legend>
 * grouped checkbox list rather than a custom ARIA widget, so keyboard
 * and screen-reader behaviour comes from native HTML semantics instead
 * of a hand-rolled pattern that's easy to get subtly wrong.
 */
.b2b-rfq-condition-field--multiple {
	display: block;
}

.b2b-rfq-condition-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.b2b-rfq-condition-legend {
	padding: 0;
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 13px;
	color: #3f3f46;
}

.b2b-rfq-condition-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}

.b2b-rfq-condition-option {
	display: flex;
	align-items: center;
	gap: 4px;
}

.b2b-rfq-condition-option label {
	font-size: 13px;
	color: #18181b;
	cursor: pointer;
}

.b2b-rfq-condition-checkbox {
	cursor: pointer;
}

.b2b-rfq-condition-checkbox:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

/**
 * Collapsed condition dropdown (ConditionManager::render_condition_checklist()):
 * the fieldset/legend/checklist above are completely unchanged — only now
 * sit inside a `.b2b-rfq-condition-dropdown-panel` that's `hidden` until
 * `assets/js/frontend.js`'s trigger-click handler reveals it. Baseline,
 * theme-agnostic defaults only, same as the rest of this block — full
 * Elementor style controls for the trigger/panel live in
 * ProductListingStyleControlsTrait::register_condition_style_controls().
 */
.b2b-rfq-condition-field--dropdown {
	position: relative;
	display: block;
}

.b2b-rfq-condition-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 13px;
	color: #18181b;
	background: #fff;
	border: 1px solid #d4d4d8;
	border-radius: 4px;
	padding: 6px 10px;
	cursor: pointer;
}

.b2b-rfq-condition-dropdown-trigger:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

.b2b-rfq-condition-dropdown-trigger-icon {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.15s ease;
}

.b2b-rfq-condition-dropdown-trigger[aria-expanded="true"] .b2b-rfq-condition-dropdown-trigger-icon {
	transform: rotate( 180deg );
}

.b2b-rfq-condition-dropdown-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	margin-top: 4px;
	min-width: 220px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 10px 12px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
}

.b2b-rfq-condition-dropdown-panel[hidden] {
	display: none;
}

.b2b-rfq-add-to-cart-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/**
 * Shared product-table renderer (SPEC.md §3.4.2) — baseline, theme- and
 * Elementor-agnostic styling. Loaded unconditionally along with the rest
 * of this file (see Assets::register_frontend()'s own docblock for why a
 * stylesheet can't be conditionally enqueued once a page has started
 * rendering) — the same reason the cart table's own CSS below already
 * lives here rather than in a separate, conditionally-loaded file.
 *
 * Same fixed-table-layout + horizontal-scroll approach as
 * .b2b-rfq-cart-table above, for the same reason: a wide cell (a long
 * title, several stacked conditions) must never stretch its column and
 * squeeze the others. Per-column classes below carry sensible default
 * percentage widths (summing to 100%); a later Elementor widget
 * (Phase 8/15/16) overrides them with its own add_responsive_control()
 * targeting these same classes via a {{WRAPPER}}-scoped selector, exactly
 * like .b2b-rfq-col-product's own "Product Column Width" control does
 * today — column width is therefore "set by the caller" at the widget
 * layer, not by a runtime argument on this renderer.
 *
 * Breakpoints (768px / 480px) match this file's own .b2b-rfq-cart-form/
 * .b2b-rfq-field-half breakpoints below — reused, not invented.
 */
.b2b-rfq-product-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.b2b-rfq-product-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	table-layout: fixed;
}

/**
 * .b2b-rfq-add-to-cart-form (above) is also carried on every interactive
 * row (see ProductTableRenderer::render_row()) purely as frontend.js's
 * event-delegation scope — the same class the single Add to RFQ button
 * control (add-to-rfq-button.php) uses for its own flex/align-items/gap
 * layout. Left unopposed, that flex rule overrides a `<tr>`'s native
 * `display: table-row`, which silently breaks every column-width rule
 * above (the row's cells stop being table cells at all). This restores
 * correct table-row behaviour specifically for a product-table row,
 * without touching the single-button control's own layout.
 */
.b2b-rfq-product-table-row.b2b-rfq-add-to-cart-form {
	display: table-row;
}

.b2b-rfq-product-table th,
.b2b-rfq-product-table td {
	text-align: left;
	vertical-align: top;
	padding: 10px 8px;
	border-bottom: 1px solid #e0e0e0;
}

.b2b-rfq-product-table-col-image {
	width: 12%;
}

.b2b-rfq-product-table-col-title {
	width: 22%;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.b2b-rfq-product-table-col-short-description {
	width: 24%;
}

.b2b-rfq-product-table-col-condition {
	width: 16%;
}

.b2b-rfq-product-table-col-category {
	width: 10%;
}

/**
 * Quantity/Add to RFQ merged into one column (Phase C3, "matching Grid
 * view") — 10% replaces the two former columns' 10%/6% combined.
 */
.b2b-rfq-product-table-col-add-to-rfq {
	width: 16%;
}

/**
 * The merged Quantity/Add to RFQ cell (ProductTableRenderer::render_cell()'s
 * COLUMN_ADD_TO_RFQ case) — the same sibling-divs-in-a-flex-row shape as
 * `.b2b-rfq-product-grid-card-actions` (product-archive.css), so
 * ProductListingStyleControlsTrait's quantity_button_layout/
 * quantity_button_gap controls already target both from one control each.
 */
.b2b-rfq-product-table-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.b2b-rfq-product-table-quantity {
	flex: 0 0 auto;
}

.b2b-rfq-product-table-footer {
	flex: 1 1 auto;
	min-width: 0;
}

/**
 * The "Quantity" label — shared by Grid view's card
 * (ProductGridRenderer::render_card()) and this table's own merged cell
 * (ProductTableRenderer::render_quantity_label_html()), so
 * ProductListingStyleControlsTrait's show_quantity_label toggle hides the
 * text (never the input) in both layouts from one control.
 */
.b2b-rfq-product-quantity-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #3f3f46;
}

.b2b-rfq-product-table-thumb {
	display: block;
}

.b2b-rfq-product-table-thumb img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}

.b2b-rfq-product-table-title-link {
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

/**
 * Line-clamp caps the Short Description cell at
 * --b2b-rfq-short-desc-lines (set inline per row by
 * ProductTableRenderer::render_cell(), default 3) so one verbose
 * product's description can never make its whole row — and every other
 * cell in that row — taller than the rest of the table.
 */
.b2b-rfq-product-table-short-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var( --b2b-rfq-short-desc-lines, 3 );
	overflow: hidden;
}

.b2b-rfq-product-table-empty {
	text-align: center;
	padding: 24px 8px;
	color: #646970;
}

/**
 * Hidden by default; shown only at the mobile breakpoint, only inside the
 * two cells whose bare content (a number, a comma-separated text list)
 * would otherwise be ambiguous once the header row has scrolled out of
 * the viewport's visible area — see ProductTableRenderer::MOBILE_LABEL_COLUMNS.
 */
.b2b-rfq-product-table-mobile-label {
	display: none;
}

@media ( max-width: 768px ) {
	.b2b-rfq-product-table-col-image {
		width: 15%;
	}

	.b2b-rfq-product-table-col-title {
		width: 30%;
	}
}

@media ( max-width: 480px ) {
	.b2b-rfq-product-table-mobile-label {
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		color: #71717a;
	}
}

/**
 * Brand archive (SPEC.md §3.1.5) header — a plain page template with no
 * Elementor context of its own (see BrandArchiveController), so this is
 * unconditional baseline CSS, same as the product-table rules above,
 * rather than a widget-scoped stylesheet.
 */
.b2b-rfq-brand-archive-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
}

.b2b-rfq-brand-archive-image img {
	display: block;
	max-width: 160px;
	height: auto;
	object-fit: contain;
}

.b2b-rfq-brand-archive-title {
	margin: 0;
}

.b2b-rfq-brand-archive-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
}

.b2b-rfq-brand-archive-pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
}

.b2b-rfq-brand-archive-pagination .page-numbers.current {
	font-weight: 600;
	border-color: #1a1a1a;
}

/**
 * MRO/Special RFQ forms (SPEC.md §3.2.3/§3.2.4, Phase 14) — layout only.
 * The customer-info fields, submit button, and message area inside this
 * wrapper are .b2b-rfq-field/.b2b-rfq-submit-btn/.b2b-rfq-form-message —
 * the exact same classes .b2b-rfq-cart-form already styles above, reused
 * as-is rather than restyled here. The manual-entry table has its own
 * dedicated stylesheet (manual-entry-table.css).
 */
.b2b-rfq-manual-rfq-form {
	max-width: 100%;
	box-sizing: border-box;
}

.b2b-rfq-manual-rfq-form-heading {
	margin: 0 0 16px;
}

/**
 * Editor-only preview notice (AddToRfqButtonWidget::render()) — never
 * shown to a real front-end visitor. Same dashed-amber convention every
 * other editor-only notice in this plugin already uses (see
 * product-archive.css/related-products.css/brand-archive-header.css).
 */
.b2b-rfq-add-to-rfq-button-editor-notice {
	margin: 0 0 8px;
	padding: 8px 12px;
	border: 1px dashed #f59e0b;
	border-radius: 4px;
	background-color: #fffbeb;
	color: #92400e;
	font-size: 0.875em;
}