/*
 * Genesis TIV skin (SALES-1228) - OEM button/font compliance for Genesis dealers.
 *
 * Applied only when Model.CheckFCADealer == "GENESIS" (see TradeInValet.cshtml). Scope is
 * intentionally limited to buttons + typography per the confirmed ticket scope - this is NOT a
 * full retheme and does not touch the Audi/Lexus _BlackLayout.
 *
 * Genesis Core Palette (Brand Elements): Black #000000, Carbon #1A1A1A, Gray #AAA8A6, White #FFFFFF.
 * Usage per brand guide: Black/Carbon = backgrounds & panels; Gray = typography, boxes & dividers.
 */

/* ---- Genesis brand fonts (converted from the OEM .otf kit to web formats) ---- */
@font-face {
    font-family: 'GenesisSansText';
    src: url('../../fonts/GenesisSansText-Regular.woff2') format('woff2'),
         url('../../fonts/GenesisSansText-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GenesisSansText';
    src: url('../../fonts/GenesisSansText-Medium.woff2') format('woff2'),
         url('../../fonts/GenesisSansText-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GenesisSansText';
    src: url('../../fonts/GenesisSansText-Bold.woff2') format('woff2'),
         url('../../fonts/GenesisSansText-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GenesisSansHead';
    src: url('../../fonts/GenesisSansHead-Light.woff2') format('woff2'),
         url('../../fonts/GenesisSansHead-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GenesisSansHead';
    src: url('../../fonts/GenesisSansHead-Regular.woff2') format('woff2'),
         url('../../fonts/GenesisSansHead-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---- Typography: body/UI uses Genesis Sans Text, headings use Genesis Sans Head ---- */
.genesis-form,
.genesis-form input,
.genesis-form select,
.genesis-form textarea,
.genesis-form button {
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
}

.genesis-form h1,
.genesis-form h2,
.genesis-form h3,
.genesis-form h4,
.genesis-form .heading-text {
    font-family: 'GenesisSansHead', 'Helvetica Neue', Arial, sans-serif;
}

/*
 * ---- Buttons ----
 * Replaces the default blue PNG-sprite buttons (.next-step / .back-step / .show-me-money) with
 * compliant solid Genesis buttons. Black fill + white label; hover darkens to Carbon; a hairline
 * Gray border (Gray = boxes & dividers) adds definition. Labels are CSS text, so the view must
 * emit the "Next"/"Back"/"Show me the money" text for Genesis (the old sprites baked the label
 * into the image). Box footprint (width/height) mirrors the sprite slot to avoid layout shift;
 * final dimensions are QA-tunable.
 */
.genesisnext-step,
.genesisback-step,
.genesis-show-me-money {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 161px;
    height: 48px;
    /*
     * The old cloud sprite was a 100px-tall box whose white label sat low in the frame (label
     * center ~58-62px from the top, not the geometric 50px). Offset the 48px flat button to that
     * label center, and reserve the full ~100px footprint (margin-top + height + margin-bottom) so
     * content below does not shift up now that the button is shorter.
     */
    margin-top: 36px;
    margin-bottom: 16px;
    padding: 0 28px;
    float: right;
    cursor: pointer;
    background: #000000 !important;      /* Genesis Black */
    color: #FFFFFF !important;           /* Genesis White */
    border: 1px solid #AAA8A6;           /* Genesis Gray (dividers/boxes) */
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;                    /* Medium */
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    overflow: hidden;
    transition: background-color 0.15s ease-in-out;
}

.genesisnext-step:hover,
.genesisback-step:hover,
.genesis-show-me-money:hover {
    background: #1A1A1A !important;      /* Genesis Carbon */
    color: #FFFFFF !important;
}

/*
 * Keyboard focus indicator. These CTAs are keyboard-focusable, so they must show a clear focus
 * ring; the subtle Black->Carbon hover change is not a reliable indicator on its own. Use
 * :focus-visible so the ring appears for keyboard/AT users but not on mouse click. The Genesis
 * Black button sits on the light form, so an offset Black outline reads clearly in the gap.
 */
.genesisnext-step:focus-visible,
.genesisback-step:focus-visible,
.genesis-show-me-money:focus-visible {
    outline: 2px solid #000000;          /* Genesis Black */
    outline-offset: 2px;
}

/*
 * ---- Chrome recolor: replace the default blue accents with the Genesis palette ----
 * The base theme (style-2.css) and the view's inline <style> paint numerous UI accents in blue
 * (#056c9c step-number circles, #0069b7 borders, #337ab7 links, #01345f checkboxes, #308EDF glows).
 * A Genesis dealer is never smart/toyota/BMW, so those elements fall through to the plain blue
 * defaults. Rather than fork the markup we recolor them here, scoped under .genesis-form so the
 * two-class selectors (0,2,x) outrank the base one-class rules regardless of source order, and the
 * inline `.blue_text_theme { !important }` (which a same-specificity override could not beat).
 * Map: blue backgrounds -> Genesis Black; blue text/links -> Black; dividers/outlines -> Gray;
 * blue focus glows -> neutral Gray.
 */

/* Numbered step circles (Step 1..8 "step-number_new" chips) */
.genesis-form .step-number_new {
    background: #000000 !important;      /* Genesis Black (was #056c9c) */
    color: #FFFFFF !important;
}

/* Large circular step badge (border + numeral) used on some headings */
.genesis-form .step-number {
    border-color: #000000 !important;    /* was 4px #0069b7 */
    color: #000000 !important;           /* was orange */
}

/* Blue heading/section text ("blue_text_theme" — base + inline both use !important) */
.genesis-form .blue_text_theme {
    color: #000000 !important;           /* Genesis Black (was #056c9c) */
}

/* Terms & conditions footer links */
.genesis-form .termsandcond li a {
    color: #1A1A1A !important;           /* Genesis Carbon (was #337ab7) */
}

/* "Got any of these?" checkboxes */
.genesis-form .checkbox_label .squire {
    border-color: #AAA8A6 !important;    /* Genesis Gray outline (was #01345f) */
}
.genesis-form input[type="checkbox"]:checked + input + .checkbox_label .squire {
    background: #000000 !important;      /* Genesis Black fill when checked (was #01345f) */
}

/*
 * Neutralize blue focus/hover glows on inputs and the active progress tab.
 * Two blue sources: the base style.css `input:hover` 30px #308EDF glow, and Bootstrap's
 * `.form-control:focus` rgba(102,175,233,.6) glow that fires when a field is clicked into.
 * Both are replaced with the same subtle neutral Gray glow the Genesis buttons use.
 */
.genesis-form input[type="text"]:hover,
.genesis-form input[type="password"]:hover,
.genesis-form select:hover,
.genesis-form input[type="checkbox"]:hover,
.genesis-form textarea:hover,
.genesis-form input[type="text"]:focus,
.genesis-form input[type="password"]:focus,
.genesis-form select:focus,
.genesis-form input[type="checkbox"]:focus,
.genesis-form textarea:focus,
.genesis-form .form-control:focus,
.genesis-form .form-control:hover {
    box-shadow: 0 0 6px #AAA8A6 !important;   /* subtle Gray (was 30px #308EDF / Bootstrap blue) */
    border-color: #AAA8A6 !important;         /* Genesis Gray (was Bootstrap #66afe9) */
}
/*
 * The Make dropdown carries its OWN blue focus glow via an ID-level !important rule
 * (`#CBRMakes:focus { box-shadow: 0 0 30px #308EDF !important }` in style-2*.css). An ID selector
 * outranks the class rule above even with !important, so it needs a matching ID-specificity
 * override to fall in line with the other Genesis fields.
 */
.genesis-form #CBRMakes:focus {
    box-shadow: 0 0 6px #AAA8A6 !important;   /* subtle Gray (was 30px #308EDF blue glow) */
    border-color: #AAA8A6 !important;         /* Genesis Gray */
}
/*
 * ---- Progress-tab cloud recolor (CSS mask — no new images) ----
 * The step tabs (Start / Details / Conditions / Options / Delivery) are a cloud-shaped PNG
 * background with the label rendered as real DOM text on top (color:#fff), NOT baked into the art.
 * Only the two ACTIVE cloud states are blue — details-nav-tab.png (.active) and
 * details-nav-tab-active.png (.active-tab), both ~#0060a0; the inactive cloud
 * (details-nav-tab-deactive-bg.png) is already neutral gray, so it is left alone.
 * `filter` could only desaturate the blue to a mid-gray and would tint the whole tab. Instead we
 * use each PNG's own alpha as a MASK and paint a solid Genesis Black fill through it — exact palette,
 * the white label is untouched (it sits above the fill), and no new artwork is needed. The anchor
 * box is 119x108 and the cloud is 120x77 drawn top-left, so the default mask size/position line up
 * with where the old background cloud sat.
 * Caveats: mask-image is unsupported in IE11 (there the tab would show no cloud fill), and the
 * active tab's soft blue halo becomes a soft black halo. Needs a visual pass — the .NET Framework
 * app cannot be built in-sandbox.
 */
.genesis-form .custom-tab li a.active,
.genesis-form .custom-tab li.active-tab a {
    background-image: none !important;
    background-color: #000000 !important;    /* Genesis Black cloud fill (was ~#0060a0) */
    color: #FFFFFF !important;                /* label text stays white, layered over the fill */
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
}
.genesis-form .custom-tab li a.active {
    -webkit-mask-image: url(../bootstrap/images/nav-images/details-nav-tab.png);
            mask-image: url(../bootstrap/images/nav-images/details-nav-tab.png);
}
.genesis-form .custom-tab li.active-tab a {
    -webkit-mask-image: url(../bootstrap/images/nav-images/details-nav-tab-active.png);
            mask-image: url(../bootstrap/images/nav-images/details-nav-tab-active.png);
}

/*
 * ---- VIN Decode button ----
 * The default .vin-decode is a blue two-state cloud sprite (btn-vin-decode.png, ~92% blue) with the
 * "VIN Decode" label baked into the raster and font-size:0, so it can't be recolored in place. For
 * a Genesis dealer the view now emits the label as real DOM text and tags the button
 * .genesisvin-decode; skin it as the same flat Genesis CTA used for Next / Back / Show me the money
 * so the whole action row is consistent. (.shadowed / .buttonhide carry no styling — JS hooks only.)
 */
.genesis-form .genesisvin-decode {
    box-sizing: border-box;
    display: inline-block;
    /*
     * Size to the "VIN DECODE" label. `width: auto` is shrink-to-fit *clamped to the narrow
     * col-md-4 vin-wrapper*, so on smaller desktop widths the label wrapped and overflowed the fixed
     * 48px button. max-content sizes to the label's intrinsic width and ignores that clamp; nowrap
     * guards against wrapping; min-width keeps the floor. (IE11 ignores max-content -> falls back to
     * auto, matching the Genesis skin's existing IE11 degradation.)
     */
    width: -webkit-max-content;
    width: max-content;
    min-width: 120px;
    white-space: nowrap;
    height: 48px;
    /*
     * Old .vin-decode was a 77px-tall cloud box with its label centered ~41px from the top; offset
     * the 48px flat button to that center and reserve the ~77px footprint (17 + 48 + 12) so the
     * adjacent VIN field row keeps its original height.
     */
    margin: 17px 0 12px;
    padding: 0 24px;
    cursor: pointer;
    background: #000000 !important;      /* Genesis Black */
    background-image: none !important;   /* drop the blue cloud sprite */
    color: #FFFFFF !important;           /* Genesis White */
    border: 1px solid #AAA8A6;           /* Genesis Gray */
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    line-height: 46px;                   /* vertically centers the label in the 48px box */
    overflow: visible;                   /* the default sprite button clips with overflow:hidden */
}
.genesis-form .genesisvin-decode:hover,
.genesis-form .genesisvin-decode:focus {
    background: #1A1A1A !important;      /* Genesis Carbon */
    color: #FFFFFF !important;
}
.genesis-form .genesisvin-decode:focus-visible {
    outline: 2px solid #000000;          /* Genesis Black keyboard focus ring */
    outline-offset: 2px;
}

/*
 * ---- Option / rating / feature tiles (desaturate — no new images) ----
 * The condition ratings (.just-between-section), the yes/no toggles (.first-or-not / .multi-or-not),
 * the transmission toggles (.automatic-or-not / .manual-or-not) and the equipment checkboxes
 * (.got-any-of-these) are circular tiles drawn from multi-state PNG sprites: a blue ring, a blue
 * selected-glow and blue text/stars (~30-40% blue), with the icon and label baked into the art.
 * They can't be masked (that would flatten the icon to a solid blob) and there is no DOM label to
 * preserve. Desaturate them so the blue reads as neutral Genesis Gray while every icon, star and
 * label stays legible across the default / hover / checked sprite frames. Scoped to .genesis-form,
 * and applied to the label (the element that carries the sprite) so layout is untouched.
 */
.genesis-form .just-between-section label,
.genesis-form .first-or-not label,
.genesis-form .multi-or-not label,
.genesis-form .automatic-or-not label,
.genesis-form .manual-or-not label,
.genesis-form .got-any-of-these-row .got-any-of-these label {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}

/*
 * ---- New/Used & Trade-In/Sell selection circles (desaturate — no new images) ----
 * The round New/Used, CPO and Trade-In/Sell selectors (_NeworUsedPage / _Tradeinorsellpage) are
 * .trademaker_labelimg circles. A Genesis dealer matches none of the theme branches in
 * Tradeinvalet.js, so on selection the tile falls through to the `else` and is tagged
 * .sterling_labelactvie -> circle-blue-active.png (blue); the colwidth variant uses the light-blue
 * new_circle_bg.png. Neither is reachable from the view (JS-applied) and both bake the ring into the
 * raster, so — as with the rating/feature tiles above — desaturate the sprite-bearing label so the
 * blue reads neutral (near-black) while the "New"/"Used"/"Trade-In"/"Sell" label stays legible.
 * filter is its own property, so it applies over whichever background sprite the cascade picks.
 */
.genesis-form .trademaker_labelimg {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}
/*
 * The desaturated New/Used/CPO (and Trade-In/Sell) tiles otherwise have no hover feedback -- the
 * grayscale filter above replaces any inherited hover drop-shadow, since a CSS `filter` holds a
 * single value. Chain a subtle neutral Gray glow on top of grayscale in a :hover rule so the tiles
 * keep their desaturation and gain a hover cue.
 */
.genesis-form .trademaker_labelimg:hover {
    -webkit-filter: grayscale(1) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6);
            filter: grayscale(1) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6);
}

/*
 * ---- Success page (Sucess.cshtml) ----
 * The success view carries no per-dealer theming, so a Genesis dealer gets the default blue chrome:
 * the "Success!" headline is hard-coded #419BFB and the "Done" CTA is the blue laststepimage.png
 * cloud sprite with its label baked in. The view now adds .genesis-form + this stylesheet and emits
 * the CTA as real DOM text tagged .genesis-alldone; recolor the headline to Genesis Black and skin
 * the CTA as the same flat Genesis button used for Next / Back / Show me the money / VIN Decode.
 */
.genesis-form .successhead {
    color: #000000 !important;           /* Genesis Black (was #419BFB) */
}

.genesis-form .genesis-alldone {
    box-sizing: border-box;
    display: inline-block;
    min-width: 161px;
    height: 48px;
    padding: 0 28px;
    cursor: pointer;
    background: #000000 !important;      /* Genesis Black */
    background-image: none !important;   /* drop the blue cloud sprite */
    color: #FFFFFF !important;           /* Genesis White */
    border: 1px solid #AAA8A6;           /* Genesis Gray */
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    line-height: 46px;                   /* vertically centers the label in the 48px box */
    overflow: visible;
}
.genesis-form .genesis-alldone:hover,
.genesis-form .genesis-alldone:focus {
    background: #1A1A1A !important;      /* Genesis Carbon */
    color: #FFFFFF !important;
}
.genesis-form .genesis-alldone:focus-visible {
    outline: 2px solid #000000;          /* Genesis Black keyboard focus ring */
    outline-offset: 2px;
}

/*
 * ---- Carfax "Go Back" toggle (_BothSinglelineandCarfax.cshtml) ----
 * The .frontPageBack "Go Back" control (id btnautocompcheck) in the Carfax/single-line flow renders
 * inside .genesis-form for a Genesis dealer but is only recolored for the Audi/Lexus isBlackLayout
 * branch, so Genesis fell through to the default blue #01629c. Recolor it to the Genesis palette
 * while keeping its compact geometry. (Mirror of the mobile genesis.css fix.)
 */
.genesis-form .frontPageBack {
    background: #000000 !important;      /* Genesis Black (was #01629c) */
    color: #FFFFFF !important;
    border: 1px solid #AAA8A6 !important;
}
.genesis-form .frontPageBack:hover,
.genesis-form .frontPageBack:focus {
    background: #1A1A1A !important;      /* Genesis Carbon */
    color: #FFFFFF !important;
}
.genesis-form .frontPageBack:focus-visible {
    outline: 2px solid #000000;          /* Genesis Black keyboard focus ring */
    outline-offset: 2px;
}

/*
 * ---- Hover glow (consistency with the tiles and with mobile) ----
 * Unlike mobile, the legacy base style.css keeps its .shadowed:hover / .shadowon drop-shadow blocks
 * commented out, so the Genesis flat buttons had no hover cue even though the New/Used tiles above
 * now glow. Give the Genesis buttons the same subtle neutral Gray hover glow so the whole Genesis
 * desktop form reads consistently. (Keyboard focus still uses the Black :focus-visible ring above.)
 */
.genesis-form .genesisnext-step:hover,
.genesis-form .genesisback-step:hover,
.genesis-form .genesis-show-me-money:hover,
.genesis-form .genesisvin-decode:hover,
.genesis-form .genesis-alldone:hover,
.genesis-form .frontPageBack:hover {
    -webkit-filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6);
            filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6);
}