/* ============================================================
   _v2_funnel.css — V2 reskin for the new-part-request funnel
   Scope: every rule is scoped under html.v2-funnel-page so it can
   never leak into other pages. Loaded AFTER bootstrap + css-site.
   Tokens (match customer area):
     page bg      #f6f6f9
     card         #fff, 1px solid #e6e6ea, radius 16-20px
     shadow       0 1px 2px rgba(20,20,30,.04)
     text         #15151a   muted #8a8a96
     primary red  #c2253a  (hover #a81f33)
     inputs/btns  radius 12px
   ============================================================ */

/* ---------- page shell ---------- */
html.v2-funnel-page body {
    background-color: #f6f6f9 !important;
    color: #15151a;
}

/* header: recolor the yellow Commercial Area button to v2 red */
html.v2-funnel-page .sub-menu .btn-warning {
    background-color: #c2253a !important;
    border-color: #c2253a !important;
    color: #fff !important;
    border-radius: 12px;
    font-weight: 700;
}
html.v2-funnel-page .sub-menu .btn-warning:hover {
    background-color: #a81f33 !important;
    border-color: #a81f33 !important;
}

/* ---------- hero band: black -> v2 light ---------- */
html.v2-funnel-page .hero-section,
html.v2-funnel-page .hero-section.no-bg {
    background-color: #f6f6f9 !important;
    background-image: none !important;
    color: #15151a !important;
}
html.v2-funnel-page .hero-section .titles-section,
html.v2-funnel-page .hero-section .titles-section h1,
html.v2-funnel-page .hero-section .titles-section .split-title,
html.v2-funnel-page .hero-section h1 {
    color: #15151a !important;
}
html.v2-funnel-page .hero-section .titles-section h1,
html.v2-funnel-page .hero-section h1,
html.v2-funnel-page .hero-section .split-title {
    font-weight: 800;
}
html.v2-funnel-page .hero-section .titles-section h2 {
    color: #5a5a66 !important;
    font-weight: 500;
    font-size: 1.35rem;
}
/* generic headings inside main content */
html.v2-funnel-page #maincontent h1,
html.v2-funnel-page #maincontent h2,
html.v2-funnel-page #maincontent h3,
html.v2-funnel-page #maincontent h4 {
    color: inherit;
}

/* dark bands INSIDE the funnel content only (never the footer) */
html.v2-funnel-page #maincontent .bg-dark,
html.v2-funnel-page #maincontent section.bg-dark,
html.v2-funnel-page .block__wrapper1.bg-dark {
    background-color: #f6f6f9 !important;
    color: #15151a !important;
}
html.v2-funnel-page #maincontent .bg-dark h3,
html.v2-funnel-page .block__wrapper1.bg-dark h3 {
    color: #15151a !important;
    font-weight: 800;
}
html.v2-funnel-page #maincontent .text-white-50,
html.v2-funnel-page #maincontent .subtext.text-white-50 {
    color: #8a8a96 !important;
}

/* light hero variant used on selection page */
html.v2-funnel-page #maincontent .bg-light {
    background-color: #f6f6f9 !important;
}

/* ---------- the red search/details card -> white v2 card ---------- */
html.v2-funnel-page .hero-seach-section {
    background-color: #fff !important;
    color: #15151a !important;
    border: 1px solid #e6e6ea !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(20, 20, 30, .04) !important;
    padding: 1.5rem;
}
html.v2-funnel-page .hero-seach-section > h3,
html.v2-funnel-page .hero-seach-section h3 {
    color: #15151a !important;
    font-weight: 600;
}
html.v2-funnel-page .hero-seach-section hr {
    border-color: #e6e6ea;
    opacity: 1;
}
html.v2-funnel-page .hero-seach-section .text-white,
html.v2-funnel-page .hero-seach-section label,
html.v2-funnel-page .hero-seach-section .form__label {
    color: #15151a !important;
}
html.v2-funnel-page .hero-seach-section a,
html.v2-funnel-page .hero-seach-section a.text-white {
    color: #c2253a !important;
    text-decoration: underline;
}
html.v2-funnel-page .hero-seach-section .supplier-wrapper_request-refresh a {
    color: #c2253a !important;
}

/* ---------- condition toggle (btn-outline-light on dark -> light) ---------- */
html.v2-funnel-page .btn-check + .btn.btn-outline-light,
html.v2-funnel-page .btn-outline-light {
    --bs-btn-color: #15151a;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #d9d9e0;
    --bs-btn-hover-color: #15151a;
    --bs-btn-hover-bg: #f6f6f9;
    --bs-btn-hover-border-color: #c9c9d2;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c2253a;
    --bs-btn-active-border-color: #c2253a;
    --bs-btn-focus-shadow-rgb: 194, 37, 58;
    color: #15151a;
    background-color: #fff;
    border-color: #d9d9e0;
    font-weight: 600;
}
html.v2-funnel-page .btn-check:checked + .btn.btn-outline-light {
    color: #fff;
    background-color: #c2253a;
    border-color: #c2253a;
}

/* ---------- inputs / selects / textareas ---------- */
html.v2-funnel-page .form__input:not([type="checkbox"]):not([type="radio"]),
html.v2-funnel-page .form__select,
html.v2-funnel-page .form__textarea,
html.v2-funnel-page #maincontent .form-control {
    background-color: #fff !important;
    color: #15151a !important;
    border: 1px solid #e0e0e6 !important;
    border-radius: 12px !important;
}
html.v2-funnel-page .form__input::placeholder,
html.v2-funnel-page .form__textarea::placeholder,
html.v2-funnel-page #maincontent .form-control::placeholder {
    color: #8a8a96;
}
html.v2-funnel-page .form__input:focus,
html.v2-funnel-page .form__select:focus,
html.v2-funnel-page .form__textarea:focus,
html.v2-funnel-page #maincontent .form-control:focus {
    border-color: #c2253a !important;
    box-shadow: 0 0 0 3px rgba(194, 37, 58, .12) !important;
    outline: none;
}

/* ---------- buttons ---------- */
/* primary actions: submit buttons + green continue pills -> v2 red */
html.v2-funnel-page .form__button,
html.v2-funnel-page .form__button:hover,
html.v2-funnel-page .form__button--green,
html.v2-funnel-page .form--parts-request__submit,
html.v2-funnel-page .hero-seach-section .form__button,
html.v2-funnel-page .hero-seach-section .form__button:hover,
html.v2-funnel-page .link-button--green,
html.v2-funnel-page a.link-button {
    background-color: #c2253a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: none !important;
}
html.v2-funnel-page .form__button:hover,
html.v2-funnel-page .form__button--green:hover,
html.v2-funnel-page .form--parts-request__submit:hover,
html.v2-funnel-page .link-button--green:hover,
html.v2-funnel-page a.link-button:hover {
    background-color: #a81f33 !important;
    color: #fff !important;
}
/* bootstrap green success buttons inside the funnel -> v2 red */
html.v2-funnel-page #maincontent .btn-success,
html.v2-funnel-page #maincontent input.btn-success,
html.v2-funnel-page .block__wrapper1 .btn-success {
    background-color: #c2253a !important;
    border-color: #c2253a !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 700;
}
html.v2-funnel-page #maincontent .btn-success:hover,
html.v2-funnel-page .block__wrapper1 .btn-success:hover {
    background-color: #a81f33 !important;
    border-color: #a81f33 !important;
}
/* secondary action: the plain Back link-button on the confirm form */
html.v2-funnel-page .button-container a.link-button {
    background-color: #fff !important;
    color: #15151a !important;
    border: 1px solid #d9d9e0 !important;
    font-weight: 600 !important;
}
html.v2-funnel-page .button-container a.link-button:hover {
    background-color: #f6f6f9 !important;
    color: #15151a !important;
}

/* ---------- selected-parts card ---------- */
html.v2-funnel-page .parts-selection-wrapper__items-wrapper {
    background-color: #fff;
    border: 1px solid #e6e6ea;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 20, 30, .04);
}
html.v2-funnel-page .parts-selection-wrapper-items-header {
    background-color: #fff !important;
    color: #15151a !important;
    border-bottom: 1px solid #e6e6ea;
    border-radius: 0 !important;
    font-weight: 800 !important;
}
html.v2-funnel-page .parts-selection-wrapper__items-wrapper_item {
    border: none !important;
    border-top: 1px solid #f0f0f4 !important;
    color: #15151a !important;
    text-align: start !important;
    background-color: #fff !important;
}
html.v2-funnel-page .parts-selection-wrapper__items-wrapper_item:first-of-type {
    border-top: none !important;
}
html.v2-funnel-page .parts-selection-wrapper__items-wrapper_item h4 {
    font-weight: 700;
    color: #15151a;
}
html.v2-funnel-page .parts-selection-wrapper__items-wrapper_item p {
    color: #8a8a96;
    margin-bottom: 0;
}
html.v2-funnel-page .parts-selection-wrapper__items-wrapper_item-delete {
    color: #c2253a;
}
/* RTL: pin the delete icon to the correct corner */
html.v2-funnel-page[dir="rtl"] .parts-selection-wrapper__items-wrapper_item-delete {
    right: auto;
    left: 10px;
}
/* the results container is usually empty — keep it invisible, and let
   the part-edit form inside carry the card look instead */
html.v2-funnel-page .parts-selection-wrapper {
    background: transparent !important;
    border: none;
    box-shadow: none;
    padding: 0;
}
html.v2-funnel-page .form__parts-request-item {
    background-color: #fff !important;
    border: 1px solid #e6e6ea !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    color: #15151a !important;
    box-shadow: 0 1px 2px rgba(20, 20, 30, .04);
}
/* empty results wrapper shouldn't paint a dark box */
html.v2-funnel-page .parts-selection-wrapper__results__wrapper {
    background-color: #fff !important;
    color: #15151a !important;
}
html.v2-funnel-page .parts-selection-wrapper__parts-search {
    background-color: #fff;
    color: #15151a;
    border: 1px solid #e6e6ea;
    border-radius: 16px;
}

/* ---------- cards inside the funnel (confirm form card etc.) ---------- */
html.v2-funnel-page #maincontent .card,
html.v2-funnel-page .block__wrapper1 .card,
html.v2-funnel-page #maincontent .card.bg-light,
html.v2-funnel-page .block__wrapper1 .card.bg-light {
    background-color: #fff !important;
    border: 1px solid #e6e6ea !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(20, 20, 30, .04);
    color: #15151a;
}
html.v2-funnel-page .form__checkbox .form__label,
html.v2-funnel-page .form__checkbox label {
    color: #15151a;
}
html.v2-funnel-page .form__checkbox a {
    color: #c2253a;
}
html.v2-funnel-page #maincontent .form-group label,
html.v2-funnel-page #maincontent .text-muted {
    color: #5a5a66 !important;
}
html.v2-funnel-page #maincontent .form-group .form__label {
    color: #5a5a66;
}

/* alert on selection page keeps bootstrap look — fine on light bg */

/* ============================================================
   Legacy ASGARD shell pages (variants / summary / summary-vin)
   These load only css-site (no bootstrap): give them a clean,
   light, v2-consistent shell.
   ============================================================ */
html.v2-funnel-page .block--topline,
html.v2-funnel-page .block--masthead,
html.v2-funnel-page .block--user-menu,
html.v2-funnel-page .block__wrapper--topline,
html.v2-funnel-page .block__wrapper--masthead,
html.v2-funnel-page .block__wrapper--user-menu {
    background-color: #fff !important;
    color: #15151a !important;
}
html.v2-funnel-page .block--masthead img,
html.v2-funnel-page .block--area-masthead img,
html.v2-funnel-page .navbar-brand img {
    max-width: 180px !important;
    height: auto !important;
}
html.v2-funnel-page .block--content,
html.v2-funnel-page .block.block--content {
    background-color: #f6f6f9 !important;
    color: #15151a !important;
}
html.v2-funnel-page .menu--inline,
html.v2-funnel-page .menu--masthead,
html.v2-funnel-page .menu--customer {
    background-color: transparent !important;
}
html.v2-funnel-page .menu--inline a,
html.v2-funnel-page .menu--customer a {
    color: #15151a !important;
    background-color: transparent !important;
}
html.v2-funnel-page .menu--inline a:hover,
html.v2-funnel-page .menu--customer a:hover {
    color: #c2253a !important;
}
html.v2-funnel-page .v2-cust-menu {
    background-color: #fff !important;
    border-bottom: 1px solid #e6e6ea;
}
html.v2-funnel-page .parts-request-block {
    background-color: #f6f6f9 !important;
    color: #15151a !important;
}
html.v2-funnel-page .parts-request-block__selected-vehicle {
    color: #15151a !important;
    background-color: #fff !important;
    border: 1px solid #e6e6ea;
    border-radius: 16px !important;
}
html.v2-funnel-page .parts-request-form-wrapper {
    background-color: #fff;
    border: 1px solid #e6e6ea;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(20, 20, 30, .04);
    padding: 1.5rem;
    color: #15151a;
    margin: 0 auto;
    max-width: 720px;
}
html.v2-funnel-page .block--footer,
html.v2-funnel-page .block--subfooter,
html.v2-funnel-page .block__wrapper--footer {
    background-color: #f6f6f9 !important;
    color: #5a5a66 !important;
}
html.v2-funnel-page .block--footer a,
html.v2-funnel-page .block--subfooter a {
    color: #5a5a66 !important;
}
html.v2-funnel-page .block--footer .menu--footer a:hover {
    color: #c2253a !important;
}
html.v2-funnel-page .block--subfooter__all-rights-reserved {
    color: #8a8a96 !important;
}

/* ===== v2-selection-order : the part form put the Left/Right choice BELOW the notes card,
   and the funnel reskin had recoloured the green Continue button to red. Fix both. ===== */
.v2-funnel-page form.js-form__parts-request-item:not(.hidden){display:flex;flex-direction:column}
.v2-funnel-page form.js-form__parts-request-item > .text-muted{order:1}
.v2-funnel-page form.js-form__parts-request-item > h4{order:2}
.v2-funnel-page form.js-form__parts-request-item > .js-form__parts-request-item-variants{order:3}
.v2-funnel-page form.js-form__parts-request-item > .row{order:4}
.v2-funnel-page form.js-form__parts-request-item > hr{order:5}
.v2-funnel-page form.js-form__parts-request-item > .text-end{order:6}

/* give the side chooser room to breathe now that it sits up top */
.v2-funnel-page .js-form__parts-request-item-variants{margin:4px 0 18px}
.v2-funnel-page .js-form__parts-request-item-variants:empty{display:none;margin:0}

/* Continue / Next stays green, as it was before the reskin */
/* the reskin rule that turned this red is html.v2-funnel-page #maincontent .btn-success
   (specificity 1,2,1) so this has to outrank it, not just come later. */
html.v2-funnel-page #maincontent input[name="continue"],
html.v2-funnel-page #maincontent input.btn-success,
html.v2-funnel-page #maincontent .btn.btn-success,
html.v2-funnel-page #maincontent .form__button--green1{
  background-color:#1c9c5a !important;background-image:none !important;
  border-color:#1c9c5a !important;color:#fff !important}
html.v2-funnel-page #maincontent input[name="continue"]:hover,
html.v2-funnel-page #maincontent .btn.btn-success:hover{filter:brightness(1.07)}
/* ===== end v2-selection-order ===== */