/**
 * 3D & AR Manager — measurement overlay.
 *
 * Loaded alongside frontend.css and inherits its custom properties, so it works
 * unchanged in the modal viewer, the inline [wc_3d_viewer] shortcode and either
 * side of the dual-model switch.
 *
 * Three kinds of element make up the overlay:
 *
 *   .wc3dar-dim-probe  zero-sized, invisible. Slotted only so <model-viewer>
 *                      will project a bounding-box corner to a screen point the
 *                      script can read back. Never seen.
 *   .wc3dar-dim-lines  one SVG stretched over the canvas, holding the edges and
 *                      the corner marks. Painted from those projected points.
 *   .wc3dar-dim-label  the measurement badges, positioned by <model-viewer>
 *                      exactly like an annotation hotspot.
 *
 * Nothing in here takes pointer events. The overlay must never be the reason a
 * drag fails to rotate the model.
 */

/* --------------------------------------------------------------- variables */

.wc3dar-stage,
.wc3dar-inline {
	--wc3dar-dim-stroke: rgba(15, 23, 42, 0.55);
	--wc3dar-dim-stroke-width: 1.25px;
	--wc3dar-dim-node: rgba(15, 23, 42, 0.75);
	--wc3dar-dim-badge-bg: rgba(17, 20, 26, 0.8);
	--wc3dar-dim-badge-border: rgba(255, 255, 255, 0.16);
	--wc3dar-dim-badge-text: #f4f6f9;
}

/* --------------------------------------------------------------- probes */

.wc3dar-dim-probe {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ----------------------------------------------------------------- lines */

.wc3dar-dim-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

.wc3dar-dim-line {
	fill: none;
	stroke: var(--wc3dar-dim-stroke);
	stroke-width: var(--wc3dar-dim-stroke-width);
	stroke-linecap: round;

	/*
	 * A hairline over a dark model disappears. The paired light halo underneath
	 * is cheaper and crisper than a drop-shadow filter, which would have to be
	 * recomposited on every frame of an orbit.
	 */
	paint-order: stroke;
}

.wc3dar-dim-node {
	fill: var(--wc3dar-dim-node);
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 1;
}

.wc3dar-dim-line.is-hidden,
.wc3dar-dim-node.is-hidden {
	display: none;
}

/* ---------------------------------------------------------------- badges */

.wc3dar-dim-label {
	box-sizing: border-box;
	display: block;
	width: max-content;
	max-width: 120px;
	padding: 4px 9px;

	border-radius: 999px;
	border: 1px solid var(--wc3dar-dim-badge-border);
	background: var(--wc3dar-dim-badge-bg);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);

	color: var(--wc3dar-dim-badge-text);
	font-family: var(--wc3dar-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-align: center;

	/*
	 * Never interactive. These sit in the middle of the model's silhouette, and
	 * a badge that swallowed a drag would make the viewer feel broken in exactly
	 * the place a shopper is most likely to grab it.
	 */
	pointer-events: none;
	user-select: none;

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

/* An axis this model has no measurement for. */
.wc3dar-dim-label[data-wc3dar-dim-unset] {
	display: none;
}

/*
 * Rotated to the back of the model. This is how the mirrored height and depth
 * pairs hand off to each other — <model-viewer> toggles `data-visible` because
 * the markup asks for it with data-visibility-attribute="visible".
 */
.wc3dar-dim-label:not([data-visible]) {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* ------------------------------------------------------------- on state */

.wc3dar-stage.is-dim-on .wc3dar-dim-lines,
.wc3dar-stage.is-dim-on .wc3dar-dim-label[data-visible] {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/*
 * Mid-switch on a dual-model product: the corners still describe the outgoing
 * mesh until the replacement loads and the script re-measures.
 */
.wc3dar-stage.is-switching .wc3dar-dim-lines,
.wc3dar-stage.is-switching .wc3dar-dim-label {
	opacity: 0 !important;
	transition-duration: 0.12s;
}

/* --------------------------------------------------------------- toggle */

.wc3dar-dim-toggle {
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 4;

	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 14px;

	border: 1px solid var(--wc3dar-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wc3dar-surface) 88%, transparent);
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	color: var(--wc3dar-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

/* color-mix is recent; older browsers get the solid surface colour. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.wc3dar-dim-toggle {
		background: var(--wc3dar-surface);
	}
}

.wc3dar-dim-toggle[hidden] {
	display: none;
}

.wc3dar-dim-toggle:hover {
	color: var(--wc3dar-text);
}

.wc3dar-dim-toggle:focus-visible {
	outline: 2px solid var(--wc3dar-accent);
	outline-offset: 2px;
}

.wc3dar-dim-toggle.is-active {
	background: var(--wc3dar-accent);
	border-color: var(--wc3dar-accent);
	color: var(--wc3dar-accent-contrast);
}

.wc3dar-dim-toggle__icon {
	flex: 0 0 auto;
}

/* --------------------------------------------------------- responsive */

/*
 * Below the breakpoint where the model switch goes full width, the two controls
 * would collide. Drop the toggle to its own row and shrink it to the icon.
 */
@media (max-width: 480px) {
	/*
	 * The corner-dodging that used to live here is gone: below 600px the toggle
	 * is a flex item in the stage's control bar, so it can no longer land on top
	 * of the model switch and has nothing to dodge.
	 */
	.wc3dar-dim-toggle {
		padding: 9px 12px;
	}

	.wc3dar-dim-toggle__label {
		font-size: 12px;
	}

	.wc3dar-dim-label {
		font-size: 11px;
		padding: 3px 7px;
	}
}

/* ------------------------------------------------------------ fallbacks */

/* No backdrop-filter (Firefox <103, older Safari): use an opaque panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wc3dar-dim-label {
		background: rgba(17, 20, 26, 0.95);
	}
}

@media (prefers-contrast: more) {
	.wc3dar-stage,
	.wc3dar-inline {
		--wc3dar-dim-stroke: rgba(15, 23, 42, 0.9);
		--wc3dar-dim-badge-bg: #0b0e13;
		--wc3dar-dim-badge-border: rgba(255, 255, 255, 0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc3dar-dim-lines,
	.wc3dar-dim-label,
	.wc3dar-dim-toggle {
		transition-duration: 0.01ms !important;
	}
}

/* A WebGL canvas prints as a blank box; the furniture over it is noise. */
@media print {
	.wc3dar-dim-toggle,
	.wc3dar-dim-lines,
	.wc3dar-dim-label {
		display: none !important;
	}
}