/**
 * Plate Wizard Configurator — front-end styles.
 *
 * Uses CSS custom properties for every themeable value so the Breakdance
 * "Plate Configurator" element can override colours per-instance simply
 * by setting inline custom properties on the container, with no need to
 * touch this stylesheet or generate per-instance CSS files.
 *
 * @package Plate_Wizard_Configurator
 */

.pwc-configurator,
.pwc-configurator *,
.pwc-configurator *::before,
.pwc-configurator *::after {
	/* Scoped to this component only (not a site-wide reset) — without an
	   explicit box-sizing, width:100% combined with padding/border on
	   inputs and selects can push their rendered size beyond their
	   container, causing exactly the kind of squeezed/overlapping layout
	   this is guarding against. */
	box-sizing: border-box;
}

.pwc-configurator {
	--pwc-accent: #1d4ed8;
	--pwc-accent-contrast: #ffffff;
	--pwc-border-colour: #d7dbe0;
	--pwc-text-colour: #1a1a1a;
	--pwc-muted-colour: #6b7280;
	--pwc-error-colour: #b3261e;
	--pwc-radius: 10px;
	--pwc-gap: 32px;

	/* Mobile-first default: a single, static, full-width column. This is
	   the safe fallback if the enhancements below don't apply for any
	   reason (e.g. a CSS optimizer stripping an @container block) —
	   failing back to "static and stacked" rather than "sticky and
	   possibly overlapping" is the important part. */
	display: block;
	max-width: 1100px;
	margin: 24px 0;
	color: var(--pwc-text-colour);
	font-size: 16px;
	line-height: 1.5;
}

/* Establishes this element as a query container, so the two-column
   breakpoint below responds to the width of whatever column/wrapper it's
   actually placed inside (e.g. WooCommerce's narrow product-summary
   column) rather than the full browser viewport. Kept as an isolated,
   optional enhancement — the base layout above works correctly even if
   this isn't supported/applied. */
@supports ( container-type: inline-size ) {
	.pwc-configurator {
		container-type: inline-size;
		container-name: pwc-configurator;
	}

	@container pwc-configurator (min-width: 701px) {
		.pwc-configurator {
			display: grid;
			grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
			gap: var(--pwc-gap);
			align-items: start;
		}
	}
}

/* Fallback for browsers without container query support: at least
   respond to the viewport width instead. */
@supports not ( container-type: inline-size ) {
	@media ( min-width: 900px ) {
		.pwc-configurator {
			display: grid;
			grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
			gap: var(--pwc-gap);
			align-items: start;
		}
	}
}

.pwc-configurator__preview {
	/* Static by default (mobile-first) — sticky positioning is only
	   switched on below, once there's actually a second column for it to
	   sit alongside. Sticky positioning next to a single stacked column
	   is exactly what caused the preview to visually overlap subsequent
	   content. */
	position: static;
	width: 100%;
	background: #f4f5f7;
	border-radius: var(--pwc-radius);
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media ( min-width: 900px ) {
	.pwc-configurator__preview {
		position: sticky;
		top: 24px;
	}
}

.pwc-configurator__svg-wrapper {
	width: 100%;
	max-width: 640px;
	/* Fixed to the Standard Car plate's own proportions (520:111mm),
	   regardless of which plate size is actually selected. This is what
	   stops the whole configurator growing/shrinking in height when a
	   very differently-shaped plate (Motorcycle, Square Motorcycle) is
	   chosen — that plate scales down to fit inside this fixed box
	   instead of the box following its shape. */
	aspect-ratio: 520 / 111;
	overflow: hidden;
}

.pwc-configurator__svg-wrapper svg {
	width: 100%;
	height: 100%;
	display: block;
	/* Deliberately no CSS object-fit here — see quick-plate.css for the
	   full explanation. Browser support for object-fit on an inline
	   <svg> (vs. an <img> tag) is inconsistent/ambiguous per spec; the
	   SVG's own preserveAspectRatio="xMidYMid meet" attribute (set by
	   PWC_Svg_Renderer::open_svg_tag()) achieves the identical
	   contain-and-centre behaviour natively and reliably instead. */
}

.pwc-configurator__options {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pwc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: none;
	padding: 0;
	margin: 0;
}

.pwc-field legend {
	font-weight: 600;
	padding: 0 0 4px;
}

.pwc-field label {
	font-weight: 600;
	font-size: 0.9375rem;
}

.pwc-field--dealer-text {
	gap: 10px;
	padding: 16px;
	background: #f9fafb;
	border-radius: var(--pwc-radius);
}

.pwc-field--dealer-text label {
	margin-top: 4px;
}

.pwc-input,
.pwc-configurator input[type="text"],
.pwc-configurator input[type="tel"],
.pwc-configurator input[type="url"] {
	border: 1px solid var(--pwc-border-colour);
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 1rem;
	background: #ffffff;
	color: var(--pwc-text-colour);
}

.pwc-input--registration {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 1.25rem;
}

.pwc-input:focus-visible,
.pwc-configurator input:focus-visible,
.pwc-configurator select:focus-visible {
	outline: 3px solid var(--pwc-accent);
	outline-offset: 2px;
}

.pwc-configurator fieldset label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	margin-right: 16px;
}

.pwc-border-extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

/* The [hidden] attribute and a plain `display: flex` rule on the same
   element have equal CSS specificity — without this explicit override,
   author-origin CSS always wins that tie over the browser's default
   [hidden] { display: none } rule, silently cancelling the hide. This
   combined selector has higher specificity than either rule alone, so
   it correctly wins whenever the attribute is present. */
.pwc-border-extra[hidden] {
	display: none;
}

.pwc-border-extra label {
	font-weight: 400;
	font-size: 0.875rem;
}

.pwc-range-value {
	font-weight: 700;
	min-width: 1.5em;
	display: inline-block;
	text-align: right;
}

.pwc-legal-disclaimer {
	font-size: 0.75rem;
	color: var(--pwc-muted-colour);
	margin: 4px 0 0;
}

.pwc-rendering-disclaimer {
	font-size: 0.75rem;
	color: var(--pwc-muted-colour);
	text-align: center;
	margin: 10px 0 0;
}

.pwc-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 16px;
	background: #f4f5f7;
	border-radius: var(--pwc-radius);
	font-size: 1.125rem;
}

.pwc-price__amount {
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--pwc-accent);
}

.pwc-field-error,
.pwc-form-error {
	color: var(--pwc-error-colour);
	font-size: 0.875rem;
	min-height: 1.2em;
}

/* Respects the OS/browser-level high contrast preference; the plugin's
   admin "high contrast mode" setting additionally adds this class via
   PWC_Public_Assets when the site owner enables it globally. */
@media (prefers-contrast: more), .pwc-configurator--high-contrast {
	.pwc-configurator {
		--pwc-border-colour: #000000;
		--pwc-text-colour: #000000;
		--pwc-muted-colour: #333333;
		--pwc-error-colour: #8b0000;
	}

	.pwc-input,
	.pwc-configurator input,
	.pwc-configurator select {
		border-width: 2px;
	}
}

/* Reduced motion: the configurator has no animated transitions by
   default, but this guards any future addition (e.g. a fade on preview
   update) from violating this preference. */
@media (prefers-reduced-motion: reduce) {
	.pwc-configurator * {
		transition: none !important;
		animation: none !important;
	}
}