/**
 * Product Data widget (SPEC.md §3.13) — base layout only. Every
 * appearance detail an admin can actually configure (typography, colour,
 * spacing, divider) comes from ProductDataWidget's own Style-tab
 * controls, which target these same selectors with {{WRAPPER}}-scoped,
 * higher-specificity rules — this file only supplies the structural
 * defaults those controls have something sane to override.
 */

.b2b-rfq-product-data {
	display: flex;
	flex-direction: column;
}

/**
 * Inline vs stacked (Layout section's own responsive "Display Mode"
 * control) is driven entirely by Elementor's own generated CSS —
 * `flex-direction: row` (inline) or `flex-direction: column` (stacked) on
 * this exact selector, per breakpoint, via that control's own
 * `add_responsive_control()` 'selectors' — never a PHP-driven modifier
 * class. `align-items: baseline` keeps label/value visually aligned on
 * their shared text baseline in inline mode; in stacked mode it has no
 * visible effect (each child is full flex-basis wide already), so one
 * declaration serves both without conditioning it.
 */
.b2b-rfq-product-data-row {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 6px 8px;
}

.b2b-rfq-product-data-label {
	font-weight: 600;
	flex: 0 0 auto;
}

/**
 * flex: 1 1 auto — grows to fill whatever space Label Column Width (if
 * set) doesn't claim; min-width: 0 is the standard flex-item fix so a
 * genuinely long attribute value (e.g. several comma-separated term
 * names) wraps inside this column instead of forcing the row wider than
 * its container.
 */
.b2b-rfq-product-data-value {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/**
 * Phase (Category/Tags linking): Category/Tags rows can now render real
 * `<a>` elements inside this span (ProductDataRenderer::resolve_terms()).
 * Without this rule, the value_color Style control (ProductDataWidget's
 * own {{WRAPPER}} .b2b-rfq-product-data-value selector) would silently
 * stop applying to those two rows specifically: CSS `color` only
 * inherits into a child when nothing more specific sets it directly, and
 * every browser's own default stylesheet *does* set an explicit color on
 * `<a>` — that explicit (if low-specificity) default always wins over an
 * ancestor's inherited color, regardless of the ancestor selector's own
 * specificity. `color: inherit` makes the link explicitly adopt
 * whatever color this span itself resolves to (its own default, or an
 * admin's configured value_color), restoring that control's existing
 * effect. `text-decoration: underline` is kept as the link's own visual
 * "this is clickable" signal — SKU/Attribute rows never contain an `<a>`
 * at all, so this rule has no effect on them.
 */
.b2b-rfq-product-data-value a {
	color: inherit;
	text-decoration: underline;
}

/**
 * No divider by default. The Divider section's four style controls
 * (color/thickness/style/spacing) are scoped under this same
 * --divider modifier class, added by the template only when the Show
 * Divider switcher is on (see ProductDataRenderer's own docblock for why
 * a PHP-driven class, not the switcher's own CSS selector, is what
 * actually gates this — a SWITCHER control has no clean "off" CSS value
 * to interpolate into a shared selector the way a SELECT/SLIDER control
 * does). Last row never gets a divider, on or off, in either case.
 */
.b2b-rfq-product-data--divider .b2b-rfq-product-data-row:not(:last-child) {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #e0e0e0;
	padding-bottom: 6px;
}

.b2b-rfq-product-data-editor-notice {
	font-style: italic;
	opacity: 0.75;
	margin: 0 0 8px;
}