/**
 * Mevotech Parts: search block layout and focus (the "Search parts" section, year/make/model mode,
 * part-number box, interchange and VIN boxes).
 *
 * @license GPL-2.0-or-later
 */
.mevo-parts-search { font-family: var(--wp--preset--font-family--roboto, inherit); }
.mevo-parts-ymm { position: relative; max-width: 22rem; }
.mevo-parts-ymm__panel { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.mevo-parts-ymm__panel[hidden] { display: none; }
.mevo-parts-ymm__select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 4px; font: inherit; font-size: 0.9rem; }
.mevo-parts-btn {
	box-sizing: border-box; min-height: 44px; padding: 0.6rem 1.6rem; border: 1px solid var(--wp--preset--color--primary, #005eb8);
	border-radius: 10px; background: #fff; color: #333; font: inherit; font-weight: 600; cursor: pointer; justify-self: start;
}
.mevo-parts-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.mevo-parts-status { margin: 0; min-height: 1.2em; font-size: 0.8rem; }
.mevo-parts-editor-note { padding: 1rem; border: 1px dashed currentColor; }

/* Part-number box: an editable combobox; list values as in assets/css/listbox.css. */
.mevo-parts-pn { position: relative; max-width: 22rem; margin-top: 0.75rem; }
.mevo-parts-combo { position: relative; }
.mevo-parts-combo__input {
	box-sizing: border-box; display: block; width: 100%; min-height: 44px; padding: 0.55rem 0.9rem;
	border: 1px solid #c9ccd0; border-radius: 4px; background: #fff; color: #000;
	font: inherit; font-size: 0.9rem; text-transform: uppercase;
}
.mevo-parts-combo__input::placeholder { color: #5f6368; text-transform: none; opacity: 1; }
.mevo-parts-combo__input:focus-visible { outline: 2px solid #000; outline-offset: 2px; box-shadow: 0 0 0 4px #fff; }
.mevo-parts-combo__input[aria-invalid="true"] { border-color: #b00020; }
.mevo-parts-combo__list {
	box-sizing: border-box; position: absolute; z-index: 1000; top: calc(100% + 4px); left: 0; right: 0;
	margin: 0; padding: 0; list-style: none; background: #fff; color: #000;
	border: 1px solid #c9ccd0; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	max-height: min(50vh, 20rem); overflow-y: auto; overscroll-behavior: contain;
}
.mevo-parts-combo__list[hidden] { display: none !important; }
.mevo-parts-combo__option {
	display: flex; align-items: center; min-height: 44px; padding: 0.5rem 0.9rem;
	border-top: 1px solid #d9d9d9; cursor: pointer; touch-action: manipulation;
}
.mevo-parts-combo__option:first-child { border-top: none; }
.mevo-parts-combo__option--active { outline: 2px solid #000; outline-offset: -2px; background: #eef2f7; }
.mevo-parts-hint { margin: 0.35rem 0 0; font-size: 0.8rem; }
.mevo-parts-pn__submit { margin-top: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
	.mevo-parts-combo__list:not([hidden]) { animation: mevo-parts-combo-in 0.15s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
	.mevo-parts-combo__list, .mevo-parts-combo__option, .mevo-parts-combo__input { transition: none; animation: none; }
}
@keyframes mevo-parts-combo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/*
 * The "Search parts" section: the previous site's values (header.css 725-790 and 945-968, media.css
 * 628-631, 669-735 and 738-790; body font sizes from media.css 595, 638, 756, 776). The open/closed
 * states are this plugin's own ([hidden], aria-expanded); no state rule of the old theme is copied.
 * The icon-button grey is #767676 instead of #999999 (contrast, WCAG 1.4.11).
 */
.mevo-parts-section {
	position: relative; box-sizing: border-box; padding: 15px; background: #1d76bc; color: #fff;
	font-size: 16px; line-height: 1.5;
}
.mevo-parts-section *, .mevo-parts-section *::before, .mevo-parts-section *::after { box-sizing: border-box; }
.mevo-parts-section [hidden] { display: none !important; }
/* Two classes on the section: the theme sizes page-content h2 with a (0,2,1) selector. */
.mevo-parts-section.mevo-parts-search .mevo-parts-section__title {
	margin: 0 0 0.3em; padding: 0; color: inherit; font-family: inherit; font-size: 28px; font-weight: 700;
	line-height: 1.2; letter-spacing: normal; text-transform: none;
}
.mevo-parts-boxes { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.mevo-parts-box { width: 25%; min-width: 0; margin: 0; padding: 0; }
.mevo-parts-section .mevo-parts-ymm,
.mevo-parts-section .mevo-parts-pn,
.mevo-parts-section .mevo-parts-mode { position: relative; max-width: none; margin: 0; }

/* Inputs and the trigger field: borderless, radius 5px; padding by breakpoint below. */
.mevo-parts-section .mevo-parts-ymm__trigger,
.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-ymm__caption,
.mevo-parts-section .mevo-parts-input,
.mevo-parts-section .mevo-parts-combo__input {
	display: block; width: 100%; min-height: 0; margin: 0; padding: 5px 10px; border: none; border-radius: 5px;
	background: #fff; color: #000; font-family: inherit; font-size: inherit; font-weight: 400; line-height: 1.5;
	text-align: left; box-shadow: none;
}
.mevo-parts-section .mevo-parts-ymm__trigger { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.mevo-parts-section .mevo-parts-ymm__trigger--placeholder { color: #757575; }
.mevo-parts-section .mevo-parts-input::placeholder,
.mevo-parts-section .mevo-parts-combo__input::placeholder { color: #757575; opacity: 1; }
.mevo-parts-section .mevo-parts-ymm__trigger:focus-visible,
.mevo-parts-section .mevo-parts-input:focus-visible,
.mevo-parts-section .mevo-parts-combo__input:focus-visible,
.mevo-parts-section .mevo-parts-ymm__search:focus-visible,
.mevo-parts-section__opener:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: none; }
.mevo-parts-section .mevo-parts-input[aria-invalid="true"],
.mevo-parts-section .mevo-parts-combo__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #b00020; }

/* Reset inside the trigger field. */
.mevo-parts-ymm__field { position: relative; }
.mevo-parts-ymm__reset {
	position: absolute; top: 6px; right: 8px; margin: 0; padding: 0; border: 0; background: none; color: #000;
	font-family: inherit; font-size: 14px; line-height: 1.5; cursor: pointer;
}
.mevo-parts-ymm__reset:focus-visible { outline: 2px solid #000; outline-offset: 1px; }

/* Without JS the field is a plain caption above the open panel (section.js turns it into the trigger). */
.mevo-parts-ymm__caption { display: block; margin: 0; font-weight: 700; }

/* The status line (counts, "please try again", reload hint): small text under the dropdowns. */
.mevo-parts-section .mevo-parts-ymm__status { min-height: 0; margin: 5px 0 0; color: inherit; font-size: 14px; line-height: 1.4; }
.mevo-parts-section .mevo-parts-ymm__status:empty { margin: 0; }

/* Panel in normal flow: the first dropdown 40px below the field, 5px between dropdowns. */
.mevo-parts-section .mevo-parts-ymm__panel { display: block; margin: 0; padding-top: 35px; }
.mevo-parts-section .mevo-parts-ymm__panel .mevo-parts-dd,
.mevo-parts-section .mevo-parts-ymm__panel .mevo-parts-ymm__select { margin: 5px 0; }
/* A level appears once it has values (year, make, model; sub model and drive type when the vehicle has them). */
.mevo-parts-section .mevo-parts-dd:has(> .mevo-parts-dd__trigger[aria-disabled="true"]) { display: none; }
.mevo-parts-section .mevo-parts-dd__trigger,
.mevo-parts-section .mevo-parts-ymm__select {
	min-height: 0; padding: 5px 10px; border: none; border-radius: 5px; background: #fff; color: #000;
	font-family: inherit; font-size: 14px; line-height: 1.5;
}
.mevo-parts-section .mevo-parts-dd__trigger::after {
	top: 10px; right: 8px; width: 12px; height: 12px; border: 0;
	background: url(../../assets/img/arrow-down.svg) no-repeat center / 100% auto; transform: none; transition: transform 0.3s;
}
.mevo-parts-section .mevo-parts-dd__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.mevo-parts-section .mevo-parts-dd__trigger--placeholder { color: #000; }
.mevo-parts-section .mevo-parts-dd__list {
	border: none; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); max-height: 400px; color: #000;
}
@media (min-width: 600px) {
	.mevo-parts-section .mevo-parts-dd__list { top: calc(100% + 5px); }
}

/* Search: appears after the model. */
.mevo-parts-ymm__search {
	display: inline-block; margin: 20px 0; padding: 14px 30px; border: none; border-radius: 10px; background: #fff;
	color: #333; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; cursor: pointer;
}
.mevo-parts-ymm__search::after {
	content: ""; display: inline-block; width: 15px; height: 10px; margin-left: 10px;
	background: url(../../assets/img/button-arrow-right.svg) no-repeat center / 100% auto; transition: all 0.3s;
}
.mevo-parts-ymm__search:hover:not(:disabled) { background: #333; color: #fff; }
.mevo-parts-ymm__search:hover:not(:disabled)::after { margin-left: 30px; filter: invert(100%); }
.mevo-parts-ymm__search:disabled { opacity: 0.6; cursor: not-allowed; }

/* Interchange and VIN: the icon button inside the input, on the right. */
.mevo-parts-iconbtn {
	position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; margin: 0; padding: 0; border: 0;
	border-radius: 5px; background: #767676 url(../../assets/img/search-arrow-right.svg) no-repeat center / 12px auto;
	cursor: pointer;
}
.mevo-parts-iconbtn:focus-visible { outline: 2px solid #000; outline-offset: 1px; }
.mevo-parts-error { margin: 5px 0 0; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; }

/* Mobile opener (shown by section.js below 992px): the arrow points down while the boxes are closed. */
.mevo-parts-section__opener {
	position: absolute; top: 20px; right: 12px; width: 28px; height: 16px; margin: 0; padding: 0; border: 0;
	background: transparent url(../../assets/img/arrow-up-white.svg) no-repeat center / 100% auto;
	transform: rotate(180deg); transition: transform 0.3s; cursor: pointer;
}
.mevo-parts-section__opener[aria-expanded="true"] { transform: rotate(0); }

@media (min-width: 768px) {
	.mevo-parts-section { font-size: 14px; }
}
@media (max-width: 991px) {
	.mevo-parts-boxes { flex-direction: column; padding-top: 10px; }
	.mevo-parts-box { width: 100%; }
	.mevo-parts-section .mevo-parts-ymm__trigger,
	.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-ymm__caption,
	.mevo-parts-section .mevo-parts-input,
	.mevo-parts-section .mevo-parts-combo__input { padding: 10px; }
	.mevo-parts-ymm__reset { top: 12px; }
	.mevo-parts-section .mevo-parts-ymm__panel { width: 80%; padding-top: 0; }
	.mevo-parts-section .mevo-parts-ymm__panel .mevo-parts-dd,
	.mevo-parts-section .mevo-parts-ymm__panel .mevo-parts-ymm__select { margin: 20px 0; }
	.mevo-parts-section .mevo-parts-dd__trigger,
	.mevo-parts-section .mevo-parts-ymm__select { padding: 10px; }
	.mevo-parts-section .mevo-parts-dd__trigger::after { top: 14px; width: 16px; }
	.mevo-parts-iconbtn { top: 7px; right: 7px; }
}
@media (min-width: 992px) {
	.mevo-parts-section { font-size: 13px; }
	.mevo-parts-section__opener { display: none; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.mevo-parts-section .mevo-parts-ymm__trigger,
	.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-ymm__caption,
	.mevo-parts-section .mevo-parts-input,
	.mevo-parts-section .mevo-parts-combo__input { padding: 7px 10px; }
}
@media (min-width: 1200px) {
	.mevo-parts-section { font-size: 15px; }
	.mevo-parts-section .mevo-parts-ymm__trigger,
	.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-ymm__caption,
	.mevo-parts-section .mevo-parts-input,
	.mevo-parts-section .mevo-parts-combo__input { padding: 6px 10px; }
}
@media (min-width: 1440px) {
	.mevo-parts-section { font-size: 16px; }
	.mevo-parts-section .mevo-parts-ymm__trigger,
	.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-ymm__caption,
	.mevo-parts-section .mevo-parts-input,
	.mevo-parts-section .mevo-parts-combo__input { padding: 5px 10px; }
}
/* Room on the right: the trigger text never runs under Reset, the input text never under the icon button. */
.mevo-parts-section .mevo-parts-ymm__trigger,
.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-ymm__caption { padding-right: 56px; }
.mevo-parts-section .mevo-parts-input { padding-right: 44px; }

/* Page variant (results page): the 3a dark-on-light look instead of the blue band. */
.mevo-parts-section--page { background: transparent; color: var(--wp--preset--color--dark, #1d1d1b); }
.mevo-parts-section--page .mevo-parts-ymm__trigger,
.mevo-parts-section--page .mevo-parts-input,
.mevo-parts-section--page .mevo-parts-combo__input,
.mevo-parts-section--page .mevo-parts-dd__trigger,
.mevo-parts-section--page .mevo-parts-ymm__select { border: 1px solid #c9ccd0; }
.mevo-parts-section--page .mevo-parts-ymm__search { border: 1px solid var(--wp--preset--color--primary, #005eb8); }
.mevo-parts-section--page .mevo-parts-ymm__trigger:focus-visible,
.mevo-parts-section--page .mevo-parts-input:focus-visible,
.mevo-parts-section--page .mevo-parts-combo__input:focus-visible,
.mevo-parts-section--page .mevo-parts-ymm__search:focus-visible,
.mevo-parts-section--page .mevo-parts-section__opener:focus-visible { outline-color: #000; }
.mevo-parts-section--page .mevo-parts-section__opener { filter: invert(1); }
.mevo-parts-section--page .mevo-parts-error { color: #b00020; }

/*
 * JS-ready state (html.mevo-parts-js, set in <head> by the config script): until the section's init has
 * finished (data-mevo-parts-ready), render the state the script will set — panel closed and, below 992 px,
 * boxes collapsed behind the opener — so nothing shifts on load. Without JS the class is never set.
 */
.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-ymm__panel { display: none; }
/* The caption takes the trigger's box (the selector is added to every trigger rule above) and its placeholder look;
   the part-number Search button is visually hidden as combobox.js does. */
.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-ymm__caption { color: #757575; }
.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-pn__submit {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	min-height: 0; margin: 0; padding: 0; border: 0;
}
@media (max-width: 991px) {
	.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-boxes { display: none; }
	.mevo-parts-js .mevo-parts-section:not([data-mevo-parts-ready]) .mevo-parts-section__opener[hidden] { display: block !important; }
}

/*
 * Bar variant (results and part pages): the previous site's blue bar, full width under the header, its content
 * on the container (header.css 666-668 and 725-735; Bootstrap h3 size). Fixed to the top on scroll from 768 px
 * (media.css 599-606) and only on screens at least 600 px high, never while the year/make/model panel is open
 * (class set by bar.js under the same media query); left/right 0 instead of width 100vw (no horizontal scroll), z-index
 * 1001 so the fit-check list (1000) passes under it. The spacer keeps the bar's height in the flow while fixed.
 */
.mevo-parts-section--bar {
	width: 100%;
	padding: 15px max(15px, calc((100% - var(--mevo-parts-container, 100%)) / 2 + 15px));
	overflow: visible;
}
.mevo-parts-section--bar.mevo-parts-search .mevo-parts-section__title { font-size: calc(1.3rem + 0.6vw); }
@media (min-width: 1200px) {
	.mevo-parts-section--bar.mevo-parts-search .mevo-parts-section__title { font-size: 1.75rem; }
}
@media (min-width: 768px) and (min-height: 600px) {
	.mevo-parts-section--bar.is-fixed {
		position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 1001;
	}
}
.mevo-parts-bar-spacer { display: block; height: 0; }

@media (prefers-reduced-motion: reduce) {
	.mevo-parts-section__opener, .mevo-parts-ymm__search, .mevo-parts-ymm__search::after,
	.mevo-parts-section .mevo-parts-dd__trigger::after { transition: none; }
}

/*
 * Visually hidden, still read by screen readers: the one clip rule of the block (labels, hints, the
 * part-number status and button, the trigger's name prefix). Last in the file, and with the box resets,
 * so it also collapses .mevo-parts-status and .mevo-parts-btn to 1 px.
 */
.mevo-parts-vh {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	min-height: 0; margin: 0; padding: 0; border: 0;
}