/**
 * Genesis OEM branding - color overrides
 *
 * Genesis requires black text and accents wherever our digital forms render blue.
 * https://trello.com/c/ZifZ31lY/
 *
 * This file only loads when site_cfg_main.branding = 'genesis', so it is inherently
 * scoped to Genesis dealers. It is registered to CePageObj::REGISTER_PAGE (see
 * cxGetHeadLinks() in SiteMainApp/functions.php) rather than the header bucket, because
 * it has to win over two later stylesheets: the dealer's own theme_full/style.css and
 * the form sheets that register to REGISTER_FOOTER mid-render (pqp_style.css,
 * updated_form_style.css). Loading last settles ties; specificity still decides first,
 * so rules keep an "html body" prefix as cheap insurance and every declaration is
 * !important.
 *
 * BUTTON SHAPES - the thing to understand before editing section 4. Two looks coexist:
 *   solid   - filled black, white label. Carries .prequalButton (PreQual Plus + the
 *             Updated form style), plus the non-plus Pre-Qual popup submit.
 *   outline - black label and border on a light fill. The Classic credit-app look;
 *             jQuery UI .ui-button, or a .btn wrapped by jquery.bootstrap.js.
 * The outline rules therefore exclude .submitButton / .prequalButton / .ui-state-active.
 * Without those exclusions the outline rule out-specifies the solid rule and paints
 * black text on a black fill.
 *
 * DELIBERATELY NOT COVERED (per card author - no Genesis dealers on these products yet;
 * they get purpose-built Genesis templates when they do):
 *   - Instant Screen TU/EQ: the #blueArea banner, BlueTabBar.jpg, submit button images.
 *   - AE+ (ae_style.css): its seven #0E88C9 accents.
 * Both are reached only by the generic link rules below, via .actionformholder. Do not
 * add .appraisalExpress or #instantscreenwrapper selectors to this file.
 *
 * Not touched because it is not blue: the grey #6e6d73 Back/Prev buttons.
 *
 * REACH BEYOND THE FORMS. This sheet loads on EVERY page of a Genesis site, and a few
 * rules are deliberately not form-scoped because the elements they target are not
 * form-only. Nothing here is accidental, but it does need testing off the form pages:
 *   .spanLink (section 1)      - site footer privacy link (functions.php:2304), staff
 *                                gallery "(More)", vehicle gallery email link, Instant
 *                                Screen score-definition link. All of them get the black,
 *                                bold and underline; see section 1 for why.
 *   .ui-dialog (section 9)     - not just the Privacy/T&Cs popup: also the Contact Us
 *                                dialog and cxAlert (CX5scripts.js:347, 768) and the
 *                                window-sticker incentives dialogs on inventory pages.
 *                                Their active/hover button chrome goes black.
 *   .dropdown-item (section 8) - currently inert on dealer sites (the class is only used
 *                                by ProMaxServices, a different app). Kept as cover for
 *                                Bootstrap markup added later.
 *   .ui-menu / .ui-autocomplete (section 9) - also inert today; no autocomplete widget is
 *                                instantiated on a dealer site. Defensive only.
 *
 * :has() is used in three places here - the language toggle wrapper below, and the
 * textarea and required-field exemptions in section 7. Not a new dependency: pqp_style.css
 * and updated_form_style.css already shipped :has() rules before this sheet existed. Each
 * is a standalone rule, so an engine without :has() drops that rule and invalidates
 * nothing else; what degrades is (1) the language toggle keeps its red fill and reads
 * black-on-red, (2) a Comments textarea shows a box inside a box, (3) a field that is both
 * focused and invalid shows the black focus ring instead of the red error state.
 */


/* ==========================================================================
   1. Privacy Notice / Terms & Conditions links - ALL form types
   CXGeneric.css:143 colors .spanLink #236ea3. !important is required rather than
   stylistic: CarExpressFrontScript.js:188-199 sets text-decoration on .spanLink as an
   inline style and rewrites it on hover/mouseout.

   Applies to every .spanLink, not only the Privacy / T&Cs triggers. The class is
   general-purpose - it is also the staff-gallery "(More)" toggle (staffGallery.php:267),
   the vehicle-gallery email link (PageUtilLib.php:834) and the Instant Screen score
   definition link - and all of those are #236ea3 today, so all of them want the black.
   Carrying the bold + underline along to them is deliberate: it is the cue that replaces
   the color on something clickable, and it should not be reserved for two of the several
   places this class is used.
   ========================================================================== */
html body .spanLink,
html body .spanLink:link,
html body .spanLink:visited,
html body .spanLink:hover,
html body .spanLink:focus,
html body .spanLink:active {
	color: #000000 !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}


/* ==========================================================================
   2. Every link inside a form, plus the credit-app page content blocks.
   .actionformholder wraps every lead type (actionform.php), so this is also the only
   thing Instant Screen and AE+ pick up - their page chrome sits outside it.
   ========================================================================== */
html body :is(
	.actionform,
	.actionformholder,
	.preQualPlus,
	.updatedFormStyle,
	.prequalWrapStyle,
	.pageHeader,
	.infoRight,
	.formLeft,
	.cx-terms-conditions,
	.ui-dialog .ui-dialog-content
) a:is(:link, :visited, :hover, :focus, :active) {
	color: #000000 !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}

/* The language toggle is built in translate.php with INLINE styles - for site type 3 a
   red pill with white text (translate.php:50). The wrapper div carries no class, so it
   has to be reached through the link it contains. Genesis wants the business-app look:
   black label, black border, no fill. */
html body div:has(> a.translatelink) {
	background: none !important;
	background-color: transparent !important;
	border: 1px solid #000000 !important;
	color: #000000 !important;
}

html body a.translatelink,
html body a.translatelink:link,
html body a.translatelink:visited,
html body a.translatelink:hover,
html body a.translatelink:focus {
	color: #000000 !important;
}


/* ==========================================================================
   3. Form headings.
   Covers the PreQual Plus "Get Pre-Qualified!" header and each step header
   (pqp_style.css:363), every Business App section name and "Final Steps"
   (updated_form_style.css:243 - these are dealerConfigLeadFormSections rows rendered
   into one selector), the Classic section titles, and the type 10/11 page headings
   "Get Pre-Approved and Drive Your Business Forward" / "Benefits of Getting
   Pre-Approved:" which are colored by the dealer's own theme_full/style.css.
   ========================================================================== */
html body .preQualPlus .sectionHeader h2,
html body .updatedFormStyle .sectionHeader h2,
html body .preQualPlus .subHeader h3,
html body .actionformholder .formsectiontitle,
html body .pageHeader h1,
html body .pageHeader h2,
html body .pageHeader h3,
html body .infoRight h3,
html body .formLeft h3 {
	color: #000000 !important;
}

/* Classic section header bar. Neutral values copied from the Bootstrap-UI equivalent
   (.cx5_header, CX5_jquery_bootstrap.css:76-82) so both Page UI Types match, instead of
   inheriting whatever the site's jQuery UI CDN theme paints .ui-widget-header. */
html body .actionformholder .formsectiontitle.ui-widget-header {
	background: #e9eaeb !important;
	background-image: none !important;
	border-color: #dbdbdb !important;
	color: #000000 !important;
}

/* The "Benefits of Getting Pre-Approved" bullets use a green fa-check-square
   (template10 seed style.css:175 .makeGreen #48b02c). The glyph is a filled square with
   the tick knocked out, so coloring it black gives a black box with a white check. */
html body .makeGreen,
html body .makeGreen .fa {
	color: #000000 !important;
}


/* ==========================================================================
   4. Buttons. See the BUTTON SHAPES note in the file header before editing.
   ========================================================================== */

/* --- solid: filled black, white label ---
   Deliberately carries .actionformholder so these sit at the same specificity as the
   outline rules below rather than under them - a solid button losing its white label to
   an outline rule is the exact regression this section is written to prevent. */
html body .actionformholder .prequalButton.next_button,
html body .actionformholder .prequalButton.submitButton,
html body .actionformholder .updatedFormStyle .next_button,
html body .actionformholder .updatedFormStyle .submitButton,
/* the non-plus Pre-Qual popup submit was green - CXForm.css:196-215 paints it #57d900
   with white text at (0,2,0)!important, so this needs the html body prefix to win */
html body .actionformholder.prequalWrapStyle .submit_button {
	background: #000000 !important;
	background-color: #000000 !important;
	background-image: none !important;
	border: 1px solid #000000 !important;
	color: #ffffff !important;
}

html body .actionformholder .prequalButton.next_button:hover,
html body .actionformholder .prequalButton.submitButton:hover,
html body .actionformholder .updatedFormStyle .next_button:hover,
html body .actionformholder .updatedFormStyle .submitButton:hover,
html body .actionformholder.prequalWrapStyle .submit_button:hover {
	background: #333333 !important;
	background-color: #333333 !important;
	border-color: #333333 !important;
	color: #ffffff !important;
}

/* --- outline: black label and border on a light fill ---
   Every :not() here is load-bearing; see the file header. .prequalWrapStyle is excluded
   wholesale because its submit is solid (above). */
html body .actionformholder:not(.prequalWrapStyle) .submit_button:not(.submitButton),
html body .actionformholder:not(.prequalWrapStyle) .next_button:not(.prequalButton),
html body .actionformholder:not(.prequalWrapStyle) .prev_button:not(.prequalButton),
html body .actionformholder:not(.prequalWrapStyle) .next_button:not(.prequalButton) .btn,
html body .actionformholder:not(.prequalWrapStyle) .prev_button:not(.prequalButton) .btn,
html body .actionformholder:not(.prequalWrapStyle) .button.ui-button:not(.ui-state-active):not(.submitButton),
html body .actionformholder:not(.prequalWrapStyle) label.ui-button:not(.ui-state-active),
html body .actionformholder:not(.prequalWrapStyle) .ui-button:not(.ui-state-active):not(.submitButton) .ui-button-text {
	color: #000000 !important;
	border-color: #000000 !important;
}

/* Radio pairs rendered as a toggle (Individual/Joint). jquery.bootstrap.js's buttonset()
   shim gives the group .btn-group-toggle and each label .btn.btn-primary, adding .active
   to the checked one - so without splitting on .active both halves looked identical.
   Scoped to .btn-group-toggle so real .btn-primary submits are unaffected, and carrying
   .actionformholder so it out-specifies the generic .btn-primary rule in section 8. */
html body .actionformholder .btn-group-toggle .btn-primary:not(.active),
html body .actionformholder .btn-group-toggle .btn-primary:not(.active):hover {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border-color: #000000 !important;
	color: #000000 !important;
}

html body .actionformholder .btn-group-toggle .btn-primary.active {
	background: #000000 !important;
	background-color: #000000 !important;
	background-image: none !important;
	border-color: #000000 !important;
	color: #ffffff !important;
}


/* ==========================================================================
   5. Progress markers - the numbered step icons and the line joining them.
   ========================================================================== */
html body .preQualPlus div.numIconProgress div.icons hr,
html body .updatedFormStyle div.numIconProgress div.icons hr {
	color: #000000 !important;
	background-color: #000000 !important;
}

/* The resting step markers are #526171 - a slate that is blue-dominant, and it reads
   blue next to the black active marker. The step labels below them are a true neutral
   #4A4A4A and are deliberately left alone. */
html body .preQualPlus div.numIconProgress div.icons div.section div.icon,
html body .updatedFormStyle div.numIconProgress div.icons div.section div.icon {
	color: #000000 !important;
	border-color: #000000 !important;
}

html body .preQualPlus div.numIconProgress div.icons div.section.active div.icon,
html body .updatedFormStyle div.numIconProgress div.icons div.section.active div.icon {
	border-color: #000000 !important;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

html body .preQualPlus div.numIconProgress div.icons div.section.active.complete div.icon,
html body .updatedFormStyle div.numIconProgress div.icons div.section.active.complete div.icon {
	background-color: #000000 !important;
	color: #ffffff !important;
}

/* Classic progress bar. Dark grey rather than black so the filled portion still reads as
   a bar against the black type around it. .progress-bar is the Bootstrap-UI shim
   (jquery.bootstrap.js progressbar()); .ui-progressbar-value is the jQuery UI widget.
   The template10 seed paints this "#0070AD !important" at (0,4,0), so this needs both the
   later load position and the html body prefix to out-specify it. */
html body .actionformholder .cxprogressbar.progress-bar,
html body .actionformholder .cxprogressbar .ui-progressbar-value,
html body .actionformholder .actionform .cxprogressbar .ui-progressbar-value {
	background: #4a4a4a !important;
	background-color: #4a4a4a !important;
	background-image: none !important;
	border-color: #4a4a4a !important;
}


/* ==========================================================================
   6. Field accents - the blue focus ring, the blue-tinted resting shadow and the
   light blue fill on completed fields.
   ========================================================================== */
html body .preQualPlus .formfield,
html body .updatedFormStyle .formfield {
	box-shadow: 0 3.71px 3.71px 0 rgba(0, 0, 0, 0.24) !important;
}

html body .preQualPlus .formfield:not(.customField).focused,
html body .updatedFormStyle .formfield:not(.customField).focused {
	border-color: #000000 !important;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

html body .preQualPlus .formfield:not(.customField).filled,
html body .updatedFormStyle .formfield:not(.customField).filled {
	background-color: #f0f0f0 !important;
}

/* A field wrapping a textarea deliberately carries no chrome of its own: the textarea draws its
   own border (updated_form_style.css:89-104). The rules above are !important, so without this
   they put the wrapper box back and it reads as two overlapping boxes. The :has() argument adds
   an element unit, which is what lets these out-specify the .focused/.filled rules above. */
html body .preQualPlus .formfield:has(textarea),
html body .updatedFormStyle .formfield:has(textarea),
html body .preQualPlus .formfield:has(textarea).focused,
html body .updatedFormStyle .formfield:has(textarea).focused,
html body .preQualPlus .formfield:has(textarea).filled,
html body .updatedFormStyle .formfield:has(textarea).filled {
	border: none !important;
	box-shadow: none !important;
	background-color: initial !important;
}

/* The browser's own focus ring is blue on every input. Keep a visible ring - just not a
   blue one - so keyboard focus is still obvious. */
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) :is(input, select, textarea, button):focus,
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) :is(input, select, textarea, button):focus-visible {
	outline-color: #000000 !important;
	border-color: #000000 !important;
}

/* Guard 1: the privacy section deliberately has no border, shadow or fill
   (pqp_style.css:69-81). The rules above are more specific than those originals, so
   without re-asserting this a box would appear around the consent checkbox rows.
   .formfield is repeated purely to bump specificity past the rules above. */
html body .preQualPlus .privacy_section .formfield.formfield.formfield,
html body .updatedFormStyle .privacy_section .formfield.formfield.formfield {
	border: none !important;
	box-shadow: none !important;
	background-color: initial !important;
}

/* Guard 2: keep the red required-field state. A field that is both focused and invalid
   would otherwise take the black focus ring above and lose its error styling
   (pqp_style.css:141-147). Same specificity-bump trick. */
html body .preQualPlus .formfield.formfield.formfield:has(.field_isRequired),
html body .updatedFormStyle .formfield.formfield.formfield:has(.field_isRequired) {
	border: 1px solid rgb(255, 0, 0) !important;
	box-shadow: rgb(255, 0, 0) 0px 0px 1.5px 1px !important;
	background-color: #fbeeee !important;
}

html body .field_isRequired,
html body .field_isRequired:focus {
	border-color: rgb(255, 0, 0) !important;
	outline-color: rgb(255, 0, 0) !important;
}


/* ==========================================================================
   7. Checkboxes and radios.
   pqp_style.css:129 and updated_form_style.css:145 set "accent-color: green"; the
   browser default is blue. accent-color paints the checked fill and leaves the tick
   white, which is exactly the black-box-white-check Genesis wants.
   ========================================================================== */
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) input[type=checkbox],
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) input[type=radio] {
	accent-color: #000000 !important;
}

/* Bootstrap's custom (styled) checkbox draws its own box instead of using accent-color. */
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) .custom-control-input:checked ~ .custom-control-label::before,
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) .form-check-input:checked {
	background-color: #000000 !important;
	border-color: #000000 !important;
}


/* ==========================================================================
   8. Bootstrap primaries used inside the forms (Page UI Type = Bootstrap).
   The palette sheets leave Bootstrap's derived shades blue regardless of the site's
   chosen palette, so force these rather than relying on the palette.
   ========================================================================== */
html body :is(.actionform, .preQualPlus, .updatedFormStyle) .btn-primary:not(.active) {
	background-color: #000000 !important;
	border-color: #000000 !important;
	color: #ffffff !important;
}

html body :is(.actionform, .preQualPlus, .updatedFormStyle) .btn-primary:hover,
html body :is(.actionform, .preQualPlus, .updatedFormStyle) .btn-primary:focus,
html body :is(.actionform, .preQualPlus, .updatedFormStyle) .btn-primary:active,
html body :is(.actionform, .preQualPlus, .updatedFormStyle) .btn:hover,
html body :is(.actionform, .preQualPlus, .updatedFormStyle) .btn:focus,
html body :is(.actionform, .preQualPlus, .updatedFormStyle) .form-control:focus {
	border-color: #000000 !important;
	box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25) !important;
}

html body :is(.actionform, .preQualPlus, .updatedFormStyle) .text-primary,
html body :is(.actionform, .preQualPlus, .updatedFormStyle) .btn-link {
	color: #000000 !important;
}

/* Focus ring on buttons and the Individual/Joint toggle. Bootstrap paints this
   rgba(0,123,255,.5) from ".btn-primary:not(:disabled):not(.disabled).active:focus" at
   (0,5,0), which out-specifies the plain .btn-primary:focus rule above -- hence the extra
   :not()s here purely to carry more weight. Bootstrap also toggles a ".focus" CLASS on the
   label as well as using :focus, so both forms have to be listed. */
html body .actionformholder :is(.btn, .btn-primary):is(:focus, .focus),
html body .actionformholder .btn-primary:not(:disabled):not(.disabled):is(.active, :active):is(:focus, .focus),
html body .btn-group-toggle :is(.btn, .btn-primary):not(:disabled):not(.disabled):is(:focus, .focus) {
	box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.35) !important;
	outline-color: #000000 !important;
}

/* Bootstrap dropdown / autocomplete list highlight. */
html body .dropdown-item:hover,
html body .dropdown-item:focus,
html body .dropdown-item.active,
html body .dropdown-item:active {
	background-color: #000000 !important;
	color: #ffffff !important;
}


/* ==========================================================================
   9. jQuery UI states (Page UI Type = JQueryUI). The CDN theme paints .ui-state-active
   #3baae3 and gives .ui-state-hover/.ui-state-focus a blue-ish border, and the theme is
   per-site so the exact blue varies.
   ========================================================================== */
html body :is(.actionform, .preQualPlus, .updatedFormStyle) .ui-state-active,
html body .ui-dialog .ui-state-active {
	background: #000000 !important;
	background-image: none !important;
	border-color: #000000 !important;
	color: #ffffff !important;
}

html body :is(.actionform, .preQualPlus, .updatedFormStyle) .ui-state-active .ui-button-text,
html body .ui-dialog .ui-state-active .ui-button-text {
	color: #ffffff !important;
}

/* Hovered/focused button borders stay blue on several jQuery UI themes. */
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) .ui-state-hover,
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) .ui-state-focus,
html body .ui-dialog .ui-state-hover,
html body .ui-dialog .ui-state-focus {
	border-color: #000000 !important;
}

/* jQuery UI menu (autocomplete) highlight. */
html body .ui-menu .ui-state-focus,
html body .ui-menu .ui-state-active,
html body .ui-autocomplete .ui-state-focus {
	background: #000000 !important;
	background-image: none !important;
	border-color: #000000 !important;
	color: #ffffff !important;
}

/* Privacy Notice / T&Cs popups are jQuery UI dialogs (CX5_Form_privacy_terms.js:168). */
html body .ui-dialog .ui-dialog-title {
	color: #000000 !important;
}

/* Native <select> dropdowns. Keep expectations low: the open option list is drawn by the
   platform, not by the page. On macOS it is an AppKit menu that follows the system accent
   colour, so these declarations do nothing there and the highlight stays blue - the same
   category of "not reachable from CSS" as the <input type=date> calendar popup. Chromium
   on Windows/Linux does honour them, which is the only reason they are here. Making this
   black everywhere means replacing every native select with a JS listbox that renders its
   own list, which is a far bigger change than a branding sheet. */
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) select option:checked,
html body :is(.actionform, .actionformholder, .preQualPlus, .updatedFormStyle) select option:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
}


/* ==========================================================================
   10. In-field icons (phone, email, birthday, location).
   These four PNGs are a single flat #327FEF over full transparency - the cut-out detail
   is transparent, not white - so brightness(0) maps the blue to black and leaves the
   alpha channel alone. Keep this scoped to .iconField img: an icon that ever contains
   white detail would be blacked out entirely by this filter (which is exactly why the
   three "Know before you go" shield icons get real black assets instead).
   ========================================================================== */
html body .preQualPlus .iconField img,
html body .updatedFormStyle .iconField img {
	filter: brightness(0) !important;
}