/**
 * 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;
	width: 100%;
	box-sizing: border-box;
}

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

/**
 * Card Grid style preset (phase-product-data-style-presets,
 * templates/frontend/product-data-card-grid.php) — `.b2b-rfq-product-data
 * -row` is deliberately the *same* class the List preset above already
 * uses (not a parallel `-card`-named element), so Display Mode/Row Style/
 * Label Style/Value Style all keep applying unchanged in this preset; the
 * two rules below are the only things genuinely new. `1fr` (not `minmax
 * (0, 1fr)`) is safe here, unlike a fixed-count product-listing grid
 * elsewhere in this plugin might need to guard against: this widget's
 * rows carry short label/value content with their own `overflow-wrap`
 * protection above, never the long, admin-uncontrolled catalogue text
 * that motivates that guard elsewhere.
 */
.b2b-rfq-product-data--card-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 16px;
}

/**
 * Baseline boxed-card look — an admin's own Card Grid Style-tab controls
 * (ProductDataWidget::register_card_grid_style_controls()) override this
 * via the identical, higher-specificity {{WRAPPER}}-scoped selector, same
 * "CSS baseline default, Elementor control layers on top" convention
 * every other control in this plugin already follows.
 */
.b2b-rfq-product-data--card-grid .b2b-rfq-product-data-row {
	background-color: #fafafa;
	border: 1px solid #e4e4e7;
	border-radius: 6px;
	padding: 12px 14px;
}

/**
 * Category and Availability span the full grid width (SPEC.md/this
 * phase's own confirmed spec) — keyed off each row's own Source
 * (`b2b-rfq-product-data-row--source-{source}`, added by
 * ProductDataRenderer's own templates to every row, in both presets),
 * never off admin-editable label text.
 */
.b2b-rfq-product-data--card-grid .b2b-rfq-product-data-row--source-category,
.b2b-rfq-product-data--card-grid .b2b-rfq-product-data-row--source-availability {
	grid-column: 1 / -1;
}

/**
 * Defensive mobile fallback, same convention as this plugin's other
 * multi-column layouts (e.g. Product Archive grid's own narrow-viewport
 * handling) — a two-column grid of boxed cards is cramped well before a
 * typical phone's own portrait width; collapsing to one column keeps
 * every card's own label/value pair legible without an admin needing to
 * configure anything.
 */
@media ( max-width: 480px ) {
	.b2b-rfq-product-data--card-grid {
		grid-template-columns: 1fr;
	}
}

/**
 * Availability badge (phase-product-data-style-presets,
 * ProductDataRenderer::build_availability_badge_html()) — renders in
 * both style presets, inside `.b2b-rfq-product-data-value`, replacing
 * that Source's own plain text. Colours below are sane, theme-agnostic
 * defaults; ProductDataWidget's own Availability Badge Style section
 * overrides them via the identical, higher-specificity {{WRAPPER}}
 * -scoped selectors.
 */
.b2b-rfq-product-data-availability-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.b2b-rfq-product-data-availability-badge-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.b2b-rfq-product-data-availability-badge--in-stock {
	background-color: #eaf6ea;
	color: #2e7d32;
}

.b2b-rfq-product-data-availability-badge--in-stock .b2b-rfq-product-data-availability-badge-dot {
	background-color: #2e7d32;
}

.b2b-rfq-product-data-availability-badge--on-request {
	background-color: #f4f4f5;
	color: #52525b;
}

.b2b-rfq-product-data-availability-badge--on-request .b2b-rfq-product-data-availability-badge-dot {
	background-color: #52525b;
}

/**
 * Quantity number animation (Finding B, phase-availability-csv-autocheck-
 * and-qty-style, ProductDataWidget's own "Quantity Animation" control) —
 * only the substituted quantity number inside the badge text, isolated
 * into this element by AvailabilityManager::get_availability_display_html(),
 * ever animates; the surrounding admin-typed message text never does.
 * `animation` itself is set per-instance by that control's own
 * `selectors_dictionary` (default 'none', an explicit no-op); the three
 * named keyframes below are the only place the actual motion is defined,
 * so they're never duplicated into Elementor's own per-page generated
 * CSS. `display: inline-block` is required for the Pulse preset's
 * `transform: scale()` to visibly apply to what is otherwise a single
 * inline text token — harmless for every other preset, including 'none'.
 */
.b2b-rfq-product-data-availability-badge-quantity {
	display: inline-block;
}

@keyframes b2b-rfq-availability-qty-glow {
	0%, 100% {
		text-shadow: 0 0 0 transparent;
	}
	50% {
		text-shadow: 0 0 6px currentColor;
	}
}

@keyframes b2b-rfq-availability-qty-pulse {
	0%, 100% {
		transform: scale( 1 );
	}
	50% {
		transform: scale( 1.15 );
	}
}

@keyframes b2b-rfq-availability-qty-flash {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
}

/**
 * Reduced motion — mirrors Brand Grid's own hover-lift reasoning
 * (brand-grid.css): `!important` is deliberate here for the identical
 * reason that file documents. Elementor generates its own per-page
 * stylesheet for `availability_quantity_animation`, and there is no
 * guarantee it loads before or after this static file, so a plain
 * override could lose the cascade depending on load order. An
 * accessibility opt-out a visitor explicitly set at the OS level must
 * never depend on stylesheet load order to actually take effect.
 */
@media ( prefers-reduced-motion: reduce ) {
	.b2b-rfq-product-data-availability-badge-quantity {
		animation: none !important;
	}
}