/* ChromaLab — Color filter widget
   Layout:
     .chromalab                         flex row, align-items: flex-start
     ├── .chromalab__center             flex row, align-items: stretch
     │   ├── .chromalab__sidebar        vertical CHROMALAB title
     │   └── .chromalab__stack          column: body + precision
     │       ├── .chromalab__body       row: wheel-wrapper + lightness
     │       └── .chromalab__precision  horizontal tolerance slider
     └── .chromalab__finish-filters     vertical text list, flex: 1

   The sidebar lives inside .chromalab__center, not at the root, so its
   height is bound to the stack's height (B → top of wheel, C → bottom
   of precision). The finish-filters column stretches to match that same
   height (align-self: stretch) and wraps into a 2nd column if needed. */

.chromalab {
	--cl-wheel: 210px;
	--cl-tool: 36px;
	--cl-gap: 20px;
	--cl-gap-body: 24px;
	--cl-gap-tag: 10px;
	--cl-color-text: var(--un-text);
	--cl-color-muted: var(--un-text-2);
	--cl-color-border: var(--un-border);
	--cl-color-track: var(--un-bg-soft);

	display: flex;
	align-items: flex-start;
	gap: var(--cl-gap);
	padding: 0;
	background: transparent;
	width: 100%;
	box-sizing: border-box;
}

.chromalab *,
.chromalab *::before,
.chromalab *::after {
	box-sizing: border-box;
}

/* === Sidebar + stack (paired so sidebar matches stack height) === */

.chromalab__center {
	display: flex;
	align-items: stretch;
	gap: var(--cl-gap-body);
	flex-shrink: 0;
}

.chromalab__sidebar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.chromalab__title {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	/* Starting size — the real size is set by JS on init/resize to match
	   the sidebar height exactly (glyph advance in vertical writing modes
	   is font-metric dependent, so a pure CSS calc is unreliable). */
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
}

.chromalab__title-chroma {
	font-weight: 800;
	color: var(--cl-color-text);
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.chromalab__title-lab {
	font-weight: 300;
	color: var(--cl-color-muted);
}

.chromalab__stack {
	display: flex;
	flex-direction: column;
	gap: var(--cl-gap);
	flex-shrink: 0;
}

/* === Body: wheel + lightness slider === */

.chromalab__body {
	display: flex;
	align-items: stretch;
	gap: var(--cl-gap-body);
}

.chromalab__wheel-wrapper {
	position: relative;
	flex-shrink: 0;
	width: var(--cl-wheel);
	display: flex;
	flex-direction: column;
	gap: 8px;
	line-height: 0;
}

.chromalab__wheel-tools {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--cl-tool);
}

.chromalab__wheel {
	position: relative;
	width: var(--cl-wheel);
	height: var(--cl-wheel);
	touch-action: none;
	border-radius: 50%;
	overflow: hidden;
}

/* Product wheel: sized per breakpoint by --cl-wheel-max (the Elementor control).
 * MUST be a definite px, NOT min(100%, …): `.chromalab__center` is flex
 * `0 0 auto` (content-sized), so a percentage here is circular — when iro's
 * `.chromalab__wheel` is emptied on rebuild the box would collapse, and iro
 * would then build a too-small wheel that the round mask clips. A fixed px keeps
 * the box stable so iro rebuilds at the right size. iro v5 has no resize API, so
 * chroma-product.js rebuilds it on breakpoint change. */
.chromalab--in-product .chromalab__wheel-wrapper {
	width: var(--cl-wheel-max, 200px);
}
.chromalab--in-product .chromalab__wheel {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Tolerance halo (overlay on wheel) */
.chromalab__halo {
	position: absolute;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	border: 1.5px solid rgba(0, 0, 0, 0.15);
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: width 0.15s ease, height 0.15s ease;
	z-index: 1;
}

/* === Wheel tools (camera + reset), in a row above the wheel === */

.chromalab__tool {
	width: var(--cl-tool);
	height: var(--cl-tool);
	padding: 0;
	border: 1px solid var(--cl-color-border);
	border-radius: 50%;
	background: var(--un-white);
	/* Resting icon colour lives in the tint fallback so the `.un-chroma-fg`
	   class fully owns `color` (order-independent) and tints to the selected
	   ChromaLab colour; hover below still overrides. */
	--un-chroma-fallback: var(--un-text-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Reserve space for the camera button even when hidden, so the reset
   button stays right-aligned and the layout doesn't shift. */
.chromalab__tool[hidden] {
	visibility: hidden;
	display: inline-flex;
}

.chromalab__tool:hover,
.chromalab__tool:focus-visible {
	border-color: var(--cl-color-text);
	color: var(--cl-color-text);
	outline: none;
}

.chromalab__tool:active { background: var(--un-bg-soft); }

/* === Lightness (vertical slider + label) === */

.chromalab__lightness {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.chromalab__lightness-slider {
	align-self: stretch;
	position: relative;
	width: 12px;
	background: linear-gradient(to bottom, var(--un-white), var(--lightness-mid, #808080), var(--un-black));
	border-radius: var(--un-radius);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
	/* Query container so the rotated input below can take its length from
	   the track's height via the cqh unit. */
	container-type: size;
}

/* The slider is a NORMAL horizontal range that we stand upright with a 90°
   rotation. Horizontal sliders centre their thumb natively and keep it
   perfectly round in every engine, and a rotation preserves a circle — so
   this sidesteps the long-standing vertical-writing-mode bug where the
   oversized thumb was start-aligned (pushed off to the right) and went oval
   the moment its box was resized to compensate.
   - width: 100cqh  → the horizontal track length follows the gradient's height.
   - height: 24px   → track thickness equals the thumb, so the thumb centres.
   - rotate(90deg)  → stands it up with value 0 at the top (bright end), 100 at
                      the bottom; the JS already flips lightness into that axis. */
.chromalab .chromalab__lightness-slider input[type="range"] {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100cqh;
	height: 24px;
	transform: translate(-50%, -50%) rotate(90deg);
	cursor: ns-resize;
	/* A vertical finger drag drives the slider, never scrolls the page/drawer
	   (the browser would otherwise claim the vertical pan for scrolling). */
	touch-action: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	outline: none;
	margin: 0;
	padding: 0;
	z-index: 2;
}

.chromalab .chromalab__lightness-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; width: 100%; }
.chromalab .chromalab__lightness-slider input[type="range"]::-moz-range-track           { background: transparent; border: 0; width: 100%; }
.chromalab .chromalab__lightness-slider input[type="range"]::-moz-range-progress         { background: transparent; }

.chromalab .chromalab__lightness-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--un-white);
	border: 2px solid var(--precision-color, var(--cl-color-muted));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.chromalab .chromalab__lightness-slider input[type="range"]::-moz-range-thumb {
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--un-white);
	border: 2px solid var(--precision-color, var(--cl-color-muted));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.chromalab__lightness-label {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	user-select: none;
	order: -1;
}

/* === Precision (horizontal tolerance slider + dots) === */

.chromalab__precision-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.chromalab__tolerance {
	display: flex;
	align-items: center;
	gap: 12px;
}

.chromalab__tolerance-track {
	position: relative;
	flex: 1;
	height: 12px;
	background: var(--cl-color-track);
	border-radius: var(--un-radius);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.chromalab__tolerance-track::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--precision-pct, 25%);
	background: var(--precision-color, var(--cl-color-muted));
	border-radius: var(--un-radius);
	transition: width 0.1s ease;
}

.chromalab .chromalab__tolerance-track input[type="range"] {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 40px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	outline: none;
	z-index: 3;
	margin: 0;
	padding: 0;
}

.chromalab .chromalab__tolerance-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; height: 12px; }
.chromalab .chromalab__tolerance-track input[type="range"]::-moz-range-track           { background: transparent; border: 0; height: 12px; }
/* Firefox-specific fills (visible without appearance: none overrides) */
.chromalab .chromalab__tolerance-track input[type="range"]::-moz-range-progress { background: transparent; }

.chromalab .chromalab__tolerance-track input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--un-white);
	border: 2px solid var(--precision-color, var(--cl-color-muted));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	margin-top: -6px;
}

.chromalab .chromalab__tolerance-track input[type="range"]::-moz-range-thumb {
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--un-white);
	border: 2px solid var(--precision-color, var(--cl-color-muted));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.chromalab__tolerance-value {
	font-family: monospace;
	font-size: 14px;
	font-weight: 700;
	color: var(--cl-color-text);
	min-width: 40px;
	text-align: right;
}

.chromalab__tolerance-dots {
	position: absolute;
	inset: 50% 0 auto 0;
	height: 12px;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
}

.chromalab__tolerance-dot {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--cl-color-text);
	pointer-events: auto;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.chromalab__tolerance-dot--minor { width: 6px;  height: 6px;  opacity: 0.25; }
.chromalab__tolerance-dot--major { width: 10px; height: 10px; opacity: 0.5;  }
.chromalab__tolerance-dot:hover  { opacity: 1; }

/* === Finish filters (text list, one per line) ===
   align-self: stretch makes this column match .chromalab__center height
   (wheel + precision row); column-wrap lets entries flow into a 2nd column
   if there are too many to fit vertically. */

.chromalab__finish-filters {
	flex: 1;
	min-width: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}

.chromalab__finish-label {
	user-select: none;
}

.chromalab__finish-list {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 2px 24px;
	overflow: hidden;
}

.chromalab__finish-btn {
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: var(--un-text-2);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	text-transform: capitalize;
	cursor: pointer;
	transition: color 0.15s ease;
	white-space: nowrap;
}

.chromalab__finish-btn:hover {
	color: var(--cl-color-text);
}

.chromalab__finish-btn.active {
	color: var(--cl-color-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* Too narrow for wheel + effects side by side (chroma-filter.js
   fitWheelSize): the effects wrap as a row under the wheel. */
.chromalab--stacked {
	flex-wrap: wrap;
}

.chromalab--stacked .chromalab__finish-filters {
	flex: 1 1 100%;
	align-self: auto;
}

.chromalab--stacked .chromalab__finish-list {
	flex-direction: row;
	gap: 2px 16px;
}

/* === Narrow viewport: scale the layout down, keep structure === */

@media (max-width: 600px) {
	.chromalab {
		--cl-tool: 32px;
		--cl-gap: 14px;
		--cl-gap-body: 10px;
		border-radius: var(--un-radius);
	}

	.chromalab__title      { font-size: 24px; }
	.chromalab__finish-btn { font-size: 13px; }
}

/* === Camera overlay (fullscreen color scanner) === */

/* The overlay is a <dialog> promoted into the top layer via showModal(), so
   it sits above every stacking context on the page (including the ChromaWheel
   drawer / Elementor popup). The UA-default dialog chrome (border, padding,
   auto margins, max-width/height) is reset here so it fills the viewport. */
.chromalab-cam {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	z-index: 2147483000;
	background: var(--un-black);
	color: var(--un-white);
	font-family: inherit;
	/* Neutralize any inherited transform/filter so iOS doesn't trap the
	   fixed positioning inside an ancestor stacking context. */
	transform: none;
	-webkit-transform: none;
	isolation: isolate;
}

/* Solid backdrop behind the top-layer dialog — hides the drawer beneath so
   the camera view reads as a clean fullscreen surface. */
.chromalab-cam::backdrop {
	background: var(--un-black, #000);
}

.chromalab-cam__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--un-black);
	/* Promote to its own compositing layer — fixes intermittent black video
	   on iOS Safari when a MediaStream is attached to a fresh element. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.chromalab-cam__scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, transparent 60px, rgba(0, 0, 0, 0.55) 120px);
	pointer-events: none;
}

.chromalab-cam__reticle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border: 2px solid var(--un-white);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.chromalab-cam__reticle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var(--un-white);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.chromalab-cam__close {
	position: absolute;
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: var(--un-white);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.chromalab-cam__hint {
	position: absolute;
	top: calc(16px + env(safe-area-inset-top, 0px));
	left: calc(16px + env(safe-area-inset-left, 0px));
	right: calc(64px + env(safe-area-inset-right, 0px));
	z-index: 1;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.45);
	border-radius: var(--un-radius);
	font-size: 13px;
	line-height: 1.3;
}

.chromalab-cam__footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px calc(16px + env(safe-area-inset-right))
	         calc(16px + env(safe-area-inset-bottom))
	         calc(16px + env(safe-area-inset-left));
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 2;
}

.chromalab-cam__readout {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.chromalab-cam__swatch {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--un-text);
	border: 2px solid var(--un-white);
	flex-shrink: 0;
}

.chromalab-cam__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.chromalab-cam__match {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chromalab-cam__hex {
	font-size: 12px;
	opacity: 0.7;
	font-family: ui-monospace, monospace;
}

.chromalab-cam__validate {
	padding: 12px 20px;
	border: 0;
	border-radius: var(--un-radius);
	background: var(--un-white);
	color: var(--un-black);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
}

.chromalab-cam__validate:disabled {
	opacity: 0.5;
	cursor: default;
}

.chromalab-cam__error {
	position: absolute;
	top: 50%;
	left: 16px;
	right: 16px;
	transform: translateY(-50%);
	padding: 16px 20px;
	background: rgba(0, 0, 0, 0.85);
	border-radius: var(--un-radius);
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	z-index: 3;
}

/* Photo fallback: shown in place of the video (same object-fit: cover and
   centring), so the reticle sits over the sampled area. */
.chromalab-cam__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--un-black);
}

.chromalab-cam__video[hidden],
.chromalab-cam__photo[hidden],
.chromalab-cam__error[hidden],
.chromalab-cam__tap[hidden],
.chromalab-cam__btn[hidden] {
	display: none;
}

.chromalab-cam__tap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 64px));
	padding: 12px 20px;
	border: 0;
	border-radius: var(--un-radius);
	background: var(--un-white);
	color: var(--un-black);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	z-index: 3;
}

.chromalab-cam__photo-link {
	padding: 12px 4px;
	border: 0;
	background: none;
	color: var(--un-white);
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
	flex-shrink: 0;
}

.chromalab-cam__error-msg {
	margin: 0;
}

.chromalab-cam__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.chromalab-cam__btn {
	padding: 10px 16px;
	border: 1px solid var(--un-white);
	border-radius: var(--un-radius);
	background: var(--un-white);
	color: var(--un-black);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.chromalab-cam__btn--ghost {
	background: transparent;
	color: var(--un-white);
}

/* Disabled state — display=products mode. Filter is greyed out with a
   permanent visible label (no tooltip, mobile-friendly). All inputs are
   inert; the body is dimmed but still readable so the layout stays
   stable. */
.chromalab--disabled {
	position: relative;
}
.chromalab--disabled > *:not(.chromalab__disabled-banner) {
	opacity: 0.4;
	pointer-events: none;
	filter: grayscale(0.8);
}
.chromalab__disabled-banner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max-content;
	max-width: min(360px, calc(100% - 32px));
	margin: 0;
	padding: 12px 18px;
	background: var(--un-white);
	border: 1px solid var(--un-border);
	border-radius: var(--un-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	color: var(--un-text);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	font-style: italic;
	z-index: 5;
}