/* The vehicle picker (partials/ymm.html): RaceChip's car selector form, its classes and look from the theme's
stylesheet; this file adds what our form needs over it. */
/* the skin shows over the native selects except on phones, where the theme's stage shows the selects themselves;
the shop's theme would show its skin there too, over the selects, so phones get the selects everywhere */
html:not(.mobile) form.rc-ymm .picker-container select { display: none; }
html.mobile form.rc-ymm .picker-container .picker-selected { display: none !important; }
form.rc-ymm .picker-container[hidden] { display: none !important; }
/* the theme sets its three pickers absolutely (first left, last right, the middle one centred); with a
fourth, hidden until the API asks for a submodel, that breaks, so the row is a flex row of the same
widths (desktop widths; narrower, the theme stacks them): 3 fields of 33.1% spread to the edges, or 4 sharing the row while the submodel shows */
@media (min-width: 769px) {
html:not(.mobile) form.rc-ymm .by-car .selectors { display: flex; justify-content: space-between; height: 80px; }
html:not(.mobile) form.rc-ymm .by-car .selectors .picker-container { position: relative; left: auto; right: auto; margin: 0; flex: 0 0 33.1%; width: 33.1%; }
html:not(.mobile) form.rc-ymm.has-submodel .by-car .selectors .picker-container { flex: 1 1 0; width: auto; min-width: 0; }
html:not(.mobile) form.rc-ymm.has-submodel .by-car .selectors .picker-container + .picker-container { margin-left: 2px; }
}
/* Clear, shown only with an applied vehicle: a small line in the form's bottom edge, under the row on phones */
form.rc-ymm .rc-ymm__clear { position: absolute; right: 12px; bottom: 0; z-index: 2; font: 400 11px/16px Roboto, Arial, Verdana, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; text-decoration: underline; }
form.rc-ymm .rc-ymm__clear:hover { color: #ea5b0c; }
@media (max-width: 768px) {
form.rc-ymm .rc-ymm__clear { position: static; display: block; margin-top: 6px; text-align: center; }
}
/* Anywhere but a stage's .selector-container (the home's and a make page's, where the theme's stage rules
draw the form as RaceChip does: 48px fields stacked on phones) the theme's stage rules do not reach the form
(the shop hub's stage, a listing, the product page, the header's modal), so it takes their values here: the orange-edged black panel, the 80px fields in a row and the green START
(stacked at 52px under 769px), as the home bar measures */
form.rc-ymm:not(.selector-container form) { display: flex; align-items: center; position: relative; box-sizing: border-box; width: auto; height: auto; margin: 0; padding: 10px; background: #000; border: 1px solid #ea5b0c; border-radius: 8px; text-align: left; font-family: Roboto, Arial, Verdana, sans-serif; }
form.rc-ymm:not(.selector-container form) .form-container { display: flex; align-items: center; position: relative; width: 100%; height: auto; }
form.rc-ymm:not(.selector-container form) .by-car { flex: 1 1 auto; position: relative; float: none; width: auto; min-width: 0; max-width: none; height: 80px; padding: 0; }
form.rc-ymm:not(.selector-container form) .by-car .selectors { display: flex; justify-content: space-between; position: static; width: 100%; height: 80px; margin: 0; }
form.rc-ymm:not(.selector-container form) .by-car .selectors .picker-container { display: block; position: relative; left: auto; right: auto; flex: 1 1 0; width: auto; min-width: 0; max-width: none; height: 80px; margin: 0; border-radius: 2px; overflow: hidden; font-size: 1px; line-height: 1px; }
form.rc-ymm:not(.selector-container form) .by-car .selectors .picker-container + .picker-container { margin-left: 2px; }
form.rc-ymm:not(.selector-container form) .by-car .selectors .picker-container.open { overflow: visible; z-index: 5; }
form.rc-ymm:not(.selector-container form) .picker-container .picker-selected { height: 80px; padding: 0 40px 0 20px; font: italic 400 19.2px/80px Roboto, Arial, Verdana, sans-serif; }
form.rc-ymm:not(.selector-container form) .picker-container ul.picker { margin-top: 5px; }
form.rc-ymm:not(.selector-container form) .form-buttons { flex: 0 0 auto; position: relative; height: 80px; margin: 0 0 0 3px; }
form.rc-ymm:not(.selector-container form) .form-buttons .call-to-action.btn { display: block; height: 80px; margin: 0; padding: 0 24px; border: 0; border-radius: 2px 6px 6px 2px; background: linear-gradient(180deg, #00AC59 0%, #01875F 100%); color: #fff; font: 600 16px/80px "BarlowSemiCondensedItalic", sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
@media (max-width: 768px) {
form.rc-ymm:not(.selector-container form) { flex-direction: column; align-items: stretch; }
form.rc-ymm:not(.selector-container form) .form-container { display: block; }
form.rc-ymm:not(.selector-container form) .by-car { height: auto; padding-bottom: 4px; }
form.rc-ymm:not(.selector-container form) .by-car .selectors { display: block; height: auto; }
form.rc-ymm:not(.selector-container form) .by-car .selectors .picker-container { width: 100%; height: 52px; margin: 0 0 3px; }
form.rc-ymm:not(.selector-container form) .by-car .selectors .picker-container + .picker-container { margin-left: 0; }
form.rc-ymm:not(.selector-container form) .picker-container .picker-selected { height: 52px; font-size: 21.7142px; line-height: 50px; }
form.rc-ymm:not(.selector-container form) .form-buttons { height: auto; margin: 0; }
form.rc-ymm:not(.selector-container form) .form-buttons .call-to-action.btn { width: 100%; height: 52px; margin-top: -4px; line-height: 52px; border-radius: 2px 2px 6px 6px; }
}
/* there a field waiting for the one before it is solid, not the theme's 70% see-through select over the dark
stage: the theme's own disabled look (the skin's #fafafa field, #8b8b8b label) */
form.rc-ymm:not(.selector-container form) .picker-container select:disabled { opacity: 1; background-color: #fafafa; color: #8b8b8b; -webkit-text-fill-color: #8b8b8b; }
form.rc-ymm:not(.selector-container form) .picker-container.disabled,
form.rc-ymm:not(.selector-container form) .picker-container.disabled .picker-selected { opacity: 1; background-color: #fafafa; }
/* an open list shows at least 10 options before it scrolls (the theme's 220px held 7, under its 37px placeholder row) */
form.rc-ymm .picker-container ul.picker { max-height: 320px; }
/* the header's "Pick your car" popup: a rounded dark bubble in the stage's greys, an orange edge on top, the
title in white Roboto; the panel as tight as on other pages (the theme's 110px popup row left START 15px low
under the 80px fields), and Clear a small red button of START's family beside it (under START on phones), by
the window's id since the header menu's link rule (.header-container ... .level0.car a) pads it too; the shop's
bars below take the same Clear */
.modal-window.car-selector-modal { border: 1px solid #3c3c3c; border-top: 3px solid #ea5b0c; border-radius: 16px; background: linear-gradient(180deg, #2e2e2e 0%, #1b1b1b 100%); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.modal-window.car-selector-modal .modal-title { color: #fff; }
.modal-window.car-selector-modal .modal-content-container .titles .title,
.modal-window.car-selector-modal .modal-content-container .titles .sub-title { color: #e4e4e4; }
.modal-window.car-selector-modal form.rc-ymm { border-radius: 10px; }
.modal-window.car-selector-modal form.rc-ymm .by-car { min-height: 0; }
:is(#modal-window.car-selector-modal, .rc-stage-ymm, .op-pd-ymm) form.rc-ymm a.rc-ymm__clear { position: static; flex: 0 0 auto; align-self: center; margin: 0 0 0 8px; padding: 0 14px; height: 32px; border-radius: 2px 6px 6px 2px; background: linear-gradient(180deg, #e3262f 0%, #b3141c 100%); color: #fff; font: 600 13px/32px "BarlowSemiCondensedItalic", sans-serif; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; text-align: center; }
:is(#modal-window.car-selector-modal, .rc-stage-ymm, .op-pd-ymm) form.rc-ymm a.rc-ymm__clear:hover,
:is(#modal-window.car-selector-modal, .rc-stage-ymm, .op-pd-ymm) form.rc-ymm a.rc-ymm__clear:focus-visible { background: linear-gradient(180deg, #f0343d 0%, #c41a22 100%); color: #fff; }
@media (max-width: 768px) {
.modal-window.car-selector-modal { border-radius: 14px; }
:is(#modal-window.car-selector-modal, .rc-stage-ymm, .op-pd-ymm) form.rc-ymm a.rc-ymm__clear { align-self: center; margin: 8px 0 0; padding: 0 22px; border-radius: 6px; }
}
/* its open list: the window's box clips nothing (the theme scrolls .modal-content, which cut the list at the
popup's edge), and the header menu's link padding (3px 0 13px, meant for the menu, skipping only the theme's
own [data-picker-idx] links) leaves the options their 27px, so the 320px list shows 10 or more */
.modal-window.car-selector-modal .modal-content { overflow: visible; }
#modal-window.car-selector-modal form.rc-ymm ul.picker li.option a { padding: 0 5px 0 20px; }
/* the shop's bars (the hub's and a listing's stage, the product's Fitment): the popup's component on the page, its
16px radius and a 2px orange edge with room inside, the fields centred in it and sharing the row evenly (no
strip under them), Clear in its own slot at the row's end (centred under the fields on phones). #rc-bar names
nothing: in :is() it lifts these rules over the theme's long shop-stage selectors, as Clear's #modal-window does */
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm { padding: 14px 16px; border-width: 2px; border-radius: 16px; }
/* scrolled to (a field's list opening, a jump), the bar keeps the stage's heading above it clear of the fixed header */
.rc-stage-ymm form.rc-ymm { scroll-margin-top: 200px; }
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .by-car,
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .by-car .selectors { height: auto; min-height: 0; }
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .form-container { flex: 1 1 auto; min-width: 0; }
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .by-car .selectors { position: static; align-items: center; gap: 4px; }
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .by-car .selectors .picker-container { flex: 1 1 0; width: auto; height: auto; border-radius: 6px !important; }
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .by-car .selectors .picker-container + .picker-container { margin-left: 0; }
@media (max-width: 768px) {
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm { padding: 14px; }
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .by-car { padding-bottom: 0; }
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .by-car .selectors { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .by-car .selectors .picker-container { flex: 0 0 auto; max-width: none; height: auto; margin: 0; }
:is(.rc-stage-ymm, .op-pd-ymm, #rc-bar) form.rc-ymm .by-car .selectors .picker-container select { width: 100%; max-width: none; }
}