/*
 * Oil Finder — the ONLY styling we add to the store's search form.
 *
 * The form is the child theme's own markup (`.custom-search-box`), styled by a
 * <style> block inside their `custom_product_search_form()`. The grey panel,
 * the 48px controls with 8px corners, the #FF0015 button and the red note all
 * come from there. We deliberately declare none of it: an earlier version did,
 * with higher specificity, and silently replaced their design with a guess.
 *
 * The selects and the VIN field we add are `<select>` and `input[type=search]`
 * inside their form, so their rules style those for us with nothing from here.
 *
 * What is ours: the "Search by:" row, the line break that starts row two, and
 * the handful of rules that make `hidden` work inside a flex container.
 */

/* A flex item ignores the `hidden` attribute unless told otherwise, which would
   otherwise leave every mode's fields on screen at once. */
.custom-search-box [hidden] {
	display: none !important;
}

/* --- the line break between row one and row two -------------------------- */

/* Their form is a flat flex row. A full-width, zero-height item forces what
   follows onto the next line — so their keyword field and their Search button
   drop to row two without either being moved or re-parented. */
.custom-search-box .nk-break {
	flex: 0 0 100%;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
}

/* --- the "Search by:" row ------------------------------------------------ */

/* Sits BESIDE the category select on the first line, at its natural width. */
.custom-search-box .nk-modes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	flex: 0 1 auto;
	font-size: 14px;
	color: #444;
	margin: 0;
}

/* With only one mode available there is nothing to choose, so the row would be
   a label and a single radio that cannot be unticked -- noise. Hide it, and let
   their category select have the line to itself exactly as it always did. */
.custom-search-box.nk-single-mode .nk-modes {
	display: none;
}

/* --- their category select ----------------------------------------------- */

/* Their rule is `flex: 1 1 250px` on every select in the panel, which makes
   this one swallow the whole first line. It only ever holds short category
   names, so cap it and give the space back to the row. Their rule is untouched;
   this narrows one element of theirs by id, the way a theme customisation
   would, and it reverts to full width when they stack at 768px. */
.custom-search-box #product-category {
	flex: 0 1 320px;
	max-width: 320px;
}

.custom-search-box .nk-modes-label {
	color: #777;
	white-space: nowrap;
}

.custom-search-box .nk-mode {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
}

.custom-search-box .nk-mode input {
	/* Tinted to their button red, so the control reads as part of their design
	   rather than a browser default blue. */
	accent-color: #FF0015;
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
	/* Their rules size every input in the panel to 48px; a radio must not be. */
	height: 16px;
	padding: 0;
	border-radius: 50%;
	appearance: auto;
	-webkit-appearance: radio;
	flex-basis: auto;
}

.custom-search-box .nk-mode.is-unavailable {
	opacity: .45;
	cursor: not-allowed;
}

.custom-search-box .nk-mode.is-unavailable input {
	cursor: not-allowed;
}

/* --- the vehicle cascade ------------------------------------------------- */

/* Four selects cannot share a line under their `flex: 1 1 250px` -- 250px
   floors force the fourth onto a row of its own. These are our elements, so we
   set our own basis: they divide the line evenly and still grow or shrink with
   it. Everything else about them -- height, border, corners, background --
   still comes from their stylesheet. */
.custom-search-box .nk-year,
.custom-search-box .nk-make,
.custom-search-box .nk-model,
.custom-search-box .nk-engine {
	flex: 1 1 0;
	min-width: 0;
}

/* --- VIN field ----------------------------------------------------------- */

/* It is an input[type=search] inside their panel, so it already carries their
   height, border and corners. Only the monospacing is ours, so that a
   17-character VIN stays readable while it is typed. */
.custom-search-box .nk-vin {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- our own messages ---------------------------------------------------- */

/* Sits in the same full-width slot as their note, below the controls. */
.custom-search-box .nk-feedback:not(:empty) {
	width: 100%;
	margin-top: 12px;
	padding: 10px 14px;
	border-left: 3px solid #FF0015;
	background: #fff;
	border-radius: 8px;
	font-size: 14px;
}

/* --- vehicle result page ------------------------------------------------- */

/* There is deliberately no result heading of ours. The store names a result
   page in its breadcrumb, in its own type and colour, and a vehicle search
   says what it is in that same trail -- so there is nothing here to style. */

/* --- the engine-choice dialog -------------------------------------------- */

/* The choice is rendered inline by the server so it works without scripting;
   the script lifts that same panel in here. These rules therefore style a
   wrapper around markup that already exists, rather than a second copy of it. */
.nk-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 16, 40, .55);
	overflow-y: auto;
}

.nk-modal.is-closed {
	display: none;
}

.nk-modal-box {
	position: relative;
	width: 100%;
	max-width: 620px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 24px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}

.nk-modal-box .nk-choices {
	margin: 0;
}

/* The theme styles every button on the site through
   `:is(.btn, .button, button, [type="submit"], [type="button"])` -- red fill,
   inline-flex, 5px/20px padding. That rule outranks a single class, so this one
   is scoped through the dialog to outrank it back. Without this the close
   control renders as a red block below the options, reading as a broken tile
   rather than a way out. */
.nk-modal .nk-modal-close,
.nk-modal button.nk-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	min-width: 0;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	opacity: .45;
	box-shadow: none;
}

.nk-modal .nk-modal-close:hover,
.nk-modal button.nk-modal-close:hover {
	opacity: 1;
	background: #f2f2f2;
	color: inherit;
}

/* Hold the page still while the question is open. */
.nk-modal-open,
.nk-modal-open body {
	overflow: hidden;
}

@media (max-width: 768px) {
	.nk-modal {
		padding: 12px;
		align-items: flex-start;
	}

	.nk-modal-box {
		padding: 20px 16px;
	}
}

/* --- "which engine?" ----------------------------------------------------- */

/* A VIN can fit several engines, or none exactly. Either way the choice is the
   whole content of the moment, so it is laid out as a decision: the car the
   customer recognises first, the engine that separates the rows second, and a
   warning that looks like one when the sizes do not agree. */
.nk-choices {
	margin: 0 0 30px;
}

.nk-choices-title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wd-text-color, rgba(30, 22, 71, .61));
}

.nk-choices-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nk-choices-list li {
	margin: 0;
	list-style: none;
}

/* A card per option, so each reads as a thing you can pick rather than a line
   of text. The left keyline is what the pointer lights up. */
.nk-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border: 1px solid var(--wd-border-color, #e6e4ec);
	border-left: 3px solid transparent;
	border-radius: var(--wd-brd-radius, 5px);
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.nk-choice:hover,
.nk-choice:focus-visible {
	background: #fbfafc;
	border-color: var(--wd-primary-color, #FF0015);
	text-decoration: none;
}

.nk-modal .nk-choice:focus-visible {
	outline: 2px solid var(--wd-primary-color, #FF0015);
	outline-offset: 2px;
}

.nk-choice-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* The car, in the page's own title colour and weight. */
.nk-choice-vehicle {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wd-title-color, rgb(30, 22, 71));
}

/* The engine, quieter but monospaced so sizes line up down the column. */
.nk-choice-engine {
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--wd-text-color, rgba(30, 22, 71, .61));
}

.nk-choice:hover .nk-choice-vehicle,
.nk-choice:focus-visible .nk-choice-vehicle {
	color: var(--wd-primary-color, #FF0015);
}

/* Says out loud what the reader would otherwise have to work out by comparing
   two numbers in different parts of the dialog. */
.nk-choice-flag {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 100px;
	background: #fdeaec;
	color: #b3000f;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.nk-choice {
		align-items: flex-start;
		gap: 8px;
	}
}

/* What remains is the one case their design does not cover: a VIN we could not
   resolve. It is a message, not a listing, so it needs somewhere to live. */
.nk-result-note {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-left: 3px solid #FF0015;
	background: #f9f9f9;
	border-radius: 8px;
	font-size: 14px;
}

/* --- mobile -------------------------------------------------------------- */

/* Their panel stacks to a single column at 768px. The break is redundant once
   every control is full-width, and the radio row tightens to match. */
@media (max-width: 768px) {
	.custom-search-box .nk-break {
		display: none;
	}

	/* Stacked, every control is full width again -- including theirs. */
	.custom-search-box #product-category {
		flex: 1 1 auto;
		max-width: none;
	}

	.custom-search-box .nk-year,
	.custom-search-box .nk-make,
	.custom-search-box .nk-model,
	.custom-search-box .nk-engine {
		flex: 1 1 auto;
	}

	.custom-search-box .nk-modes {
		gap: 8px 14px;
		font-size: 13.5px;
		margin: 0;
	}

	.custom-search-box .nk-mode input {
		width: 16px;
		height: 16px;
	}
}

/* The explanation, once moved inside the dialog.
   Two lines with different jobs: a heading that says what happened, and the
   detail underneath. As one grey paragraph it read as small print and was
   skipped, which is how a near miss gets mistaken for a recommendation. */
.nk-modal .nk-modal-note {
	display: block;
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid #f5d5d9;
	border-left: 3px solid var(--wd-primary-color, #FF0015);
	border-radius: var(--wd-brd-radius, 5px);
	background: #fdf7f8;
	width: auto;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wd-text-color, rgba(30, 22, 71, .8));
}

/* A way out for the customer whose engine is neither option. */
.nk-modal .nk-modal-note .nk-note-link {
	display: inline-block;
	margin-top: 6px;
	color: #b3000f;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nk-modal .nk-modal-note .nk-note-link:hover {
	text-decoration: none;
}

.nk-modal .nk-modal-note strong {
	font-weight: 600;
	color: var(--wd-title-color, rgb(30, 22, 71));
}

/* The VIN heads the dialog as its subject, with a rule under it so the
   explanation below reads as a separate statement rather than a run-on. */
.nk-modal-vin {
	margin: 0 0 16px;
	padding: 0 0 14px 0;
	border-bottom: 1px solid var(--wd-border-color, #eceaf1);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wd-text-color, rgba(30, 22, 71, .5));
}

.nk-modal-vin strong {
	display: inline-block;
	margin-left: 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--wd-title-color, rgb(30, 22, 71));
}