/* Seat Cover Finder: the one-line vehicle search, [scf_quick_search].

   Its own file and its own class names, so nothing here can reach the finder
   or the hero and nothing of theirs can reach in. The look is borrowed from
   the hero on purpose: a white field with its own ink, black with a yellow
   edge, the same two focus rings. Somebody who has used one should recognise
   the other. */

.scf-quick [hidden] {
	display: none !important;
}

.scf-quick,
.scf-quick * {
	box-sizing: border-box;
}

.scf-quick {
	/* The hero's numbers, repeated rather than shared: configurator.css is
	   not loaded on a page that carries only this widget. */
	--scf-q-yellow: #f2b705;
	--scf-q-yellow-ink: #241a00;
	--scf-q-black: #000;
	--scf-q-border: color-mix(in srgb, currentColor 14%, transparent);
	/* The field is its own white surface with its own ink, as in the hero:
	   it may sit on a photograph or a dark section, and a transparent field
	   over either is unreadable. */
	--scf-q-field-bg: var(--theme-palette-color-8, #fff);
	--scf-q-field-ink: var(--theme-palette-color-4, #111);
	/* Small print: the theme's ink is a mid grey and 0.82 of it on white
	   still clears 4.5:1. See --scf-faded in configurator.css. */
	--scf-q-faded: 0.82;
	--scf-q-radius: 12px;

	position: relative;
	max-width: 640px;
	margin: 0 auto;
	font-size: 15px;
}

/* Read out, never shown. */
.scf-quick-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.scf-quick-field {
	position: relative;
}

/* The line. A magnifier drawn in the field's own ink on the left, so it reads
   as a search at a glance without a word of copy. */
.scf-quick .scf-quick-input {
	display: block;
	width: 100%;
	margin: 0;
	min-height: 56px;
	padding: 0.95rem 3rem 0.95rem 2.9rem;
	border: 2px solid var(--scf-q-black);
	border-radius: var(--scf-q-radius);
	background-color: var(--scf-q-field-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0.95rem 50%;
	background-size: 20px 20px;
	color: var(--scf-q-field-ink);
	/* 16px or more, or iOS zooms the page in on focus. */
	font-size: 1.08rem;
	line-height: 1.3;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--scf-q-yellow) 40%, transparent),
		0 0 9px color-mix(in srgb, var(--scf-q-yellow) 42%, transparent);
	-webkit-appearance: none;
	appearance: none;
}

/* The theme fades placeholders to 0.7, which off a near-black ink is fine on
   white but is stated here so a theme change cannot take it lower. */
.scf-quick .scf-quick-input::placeholder {
	opacity: 1;
	color: color-mix(in srgb, var(--scf-q-field-ink) 62%, transparent);
}

/* The hero's two rings, yellow inside black, so focus is visible on a white
   card and on a dark section alike. The outline stays, transparent, for
   forced-colours mode, which paints outlines and drops shadows. */
.scf-quick .scf-quick-input:focus,
.scf-quick .scf-quick-input:focus-visible {
	outline: 3px solid transparent;
	border-color: var(--scf-q-black);
	box-shadow:
		0 0 0 3px var(--scf-q-yellow),
		0 0 0 6px var(--scf-q-black);
}

/* The browser's own clear cross on search-ish fields would sit on top of ours. */
.scf-quick .scf-quick-input::-ms-clear {
	display: none;
}

/* Clear the line. A cross drawn from two bars, big enough to hit with a
   thumb: 44px, the field's height less its border. */
.scf-quick .scf-quick-clear {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--scf-q-field-ink);
	cursor: pointer;
	box-shadow: none;
}

.scf-quick .scf-quick-clear::before,
.scf-quick .scf-quick-clear::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	margin: -1px 0 0 -8px;
	border-radius: 1px;
	background: currentColor;
	transform: rotate(45deg);
}

.scf-quick .scf-quick-clear::after {
	transform: rotate(-45deg);
}

.scf-quick .scf-quick-clear:hover {
	background: color-mix(in srgb, var(--scf-q-yellow) 25%, transparent);
}

.scf-quick .scf-quick-clear:focus-visible {
	outline: 3px solid transparent;
	box-shadow: inset 0 0 0 2px var(--scf-q-yellow), inset 0 0 0 4px var(--scf-q-black);
}

/* The suggestions, under the line and over whatever is below it. */
.scf-quick-pop {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--scf-q-field-ink) 16%, transparent);
	border-radius: var(--scf-q-radius);
	background: var(--scf-q-field-bg);
	color: var(--scf-q-field-ink);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	text-align: left;
}

.scf-quick .scf-quick-hint {
	margin: 0;
	padding: 0.65rem 0.95rem 0.5rem;
	font-size: 0.88rem;
	font-weight: 600;
	opacity: var(--scf-q-faded);
}

.scf-quick .scf-quick-hint + .scf-quick-list {
	border-top: 1px solid color-mix(in srgb, var(--scf-q-field-ink) 10%, transparent);
}

.scf-quick .scf-quick-list {
	max-height: min(22rem, 55vh);
	overflow-y: auto;
	margin: 0;
	padding: 0.3rem;
	list-style: none;
	overscroll-behavior: contain;
}

.scf-quick .scf-quick-opt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.15rem 0.75rem;
	margin: 0;
	padding: 0.7rem 0.75rem;
	border-radius: 8px;
	cursor: pointer;
	line-height: 1.3;
}

/* The row the arrow keys are on, and the one under the pointer: a wash of the
   yellow under the row's own ink, as in the finder's dropdowns. A bar down the
   left as well, so the keyboard row is not told apart by colour alone. */
.scf-quick .scf-quick-opt:hover,
.scf-quick .scf-quick-opt.is-active {
	background: color-mix(in srgb, var(--scf-q-yellow) 25%, transparent);
}

.scf-quick .scf-quick-opt.is-active {
	box-shadow: inset 3px 0 0 var(--scf-q-black);
}

.scf-quick .scf-quick-opt-name {
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.scf-quick .scf-quick-opt-meta {
	font-size: 0.85rem;
	opacity: var(--scf-q-faded);
	white-space: nowrap;
}

/* The series, the finder's own question, asked under the line. */
.scf-quick .scf-quick-series {
	margin-top: 1.1rem;
	text-align: left;
}

.scf-quick .scf-quick-series-label {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.scf-quick .scf-quick-series-list {
	display: grid;
	gap: 0.5rem;
}

.scf-quick .scf-quick-loading {
	margin: 0;
	opacity: var(--scf-q-faded);
	font-size: 0.9rem;
}

/* A series card: the finder's variant button, with the hero's black and
   yellow. White with its own ink for the same reason as the field. */
.scf-quick .scf-quick-variant {
	display: grid;
	gap: 0.15rem;
	width: 100%;
	margin: 0;
	padding: 0.8rem 0.95rem;
	border: 1px solid color-mix(in srgb, var(--scf-q-field-ink) 22%, transparent);
	border-radius: 10px;
	background: var(--scf-q-field-bg);
	color: var(--scf-q-field-ink);
	font: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	box-shadow: none;
}

.scf-quick .scf-quick-variant:hover {
	border-color: var(--scf-q-yellow);
	background: color-mix(in srgb, var(--scf-q-yellow) 14%, var(--scf-q-field-bg));
	color: var(--scf-q-field-ink);
}

.scf-quick .scf-quick-variant.is-active {
	border-color: var(--scf-q-black);
	background: var(--scf-q-yellow);
	color: var(--scf-q-yellow-ink);
}

.scf-quick .scf-quick-variant:focus-visible {
	outline: 3px solid transparent;
	box-shadow:
		0 0 0 3px var(--scf-q-yellow),
		0 0 0 6px var(--scf-q-black);
}

.scf-quick .scf-quick-variant-name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.scf-quick .scf-quick-variant-years,
.scf-quick .scf-quick-variant-note {
	font-size: 0.85em;
	opacity: var(--scf-q-faded);
}

/* As the finder's error box: red on pink, its link in the same red, since
   the theme's link colour is a yellow and yellow on pink is unreadable. */
.scf-quick .scf-quick-error {
	margin-top: 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	background: #fdecec;
	color: #8a1c1c;
	font-size: 0.9rem;
	text-align: left;
}

.scf-quick .scf-quick-error a,
.scf-quick .scf-quick-error a:hover {
	color: inherit;
	text-decoration: underline;
}

.scf-quick .scf-quick-fallback {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.9rem 1.5rem;
	border: 2px solid var(--scf-q-yellow);
	border-radius: var(--scf-q-radius);
	background: var(--scf-q-black);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

/* A phone: the meta drops under the name rather than squeezing it. */
@media (max-width: 480px) {
	.scf-quick .scf-quick-opt {
		flex-direction: column;
		align-items: flex-start;
	}

	.scf-quick .scf-quick-opt-meta {
		white-space: normal;
	}
}