/* ==========================================================================
   Rodar Build & Price — MOBILE REDESIGN (applies to app/index.html only)
   Visual language taken from app/mobile-design-preview.html.
   Desktop (>= 768px) is completely untouched: everything here lives inside
   a max-width media query and is scoped to body.mwx-on (added by
   js/mobile-build-price.js on the Build & Price page only).
   ========================================================================== */

/* Injected chrome is hidden by default (desktop / other pages) */
.mwx-header,
.mwx-heading,
.mwx-footer7,
.mwx-cta-label,
.mwx-swatch-head,
.mwx-colour-chips,
.mwx-otherlabel {
    display: none;
}

@media (max-width: 767.98px) {

    body.mwx-on {
        --mwx-blue: #2F55ED;
        --mwx-blue-hover: #3E60E8;
        --mwx-blue-50: #EEF2FE;
        --mwx-black: #1B1B1C;
        --mwx-heading: #303030;
        --mwx-slate: #1E293B;
        --mwx-grey-body: #707781;
        --mwx-grey-cool: #717883;
        --mwx-grey-soft: #97A0AE;
        --mwx-line: #E6E8EC;
        --mwx-line-strong: #D4D8DF;
        --mwx-surface: #F8F8F8;
        --mwx-green: #28A745;
        --mwx-radius-md: 14px;
        --mwx-radius-xl: 28px;
        --mwx-radius-pill: 999px;
        --mwx-shadow-xs: 0 1px 2px rgba(27, 27, 28, .06);
        --mwx-shadow-blue: 0 12px 28px rgba(47, 85, 237, .28);
        background: #fff;
    }

    /* ------------------------------------------------------------------
       1. Hide the desktop chrome on mobile
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_progress_bar_wrapper,
    body.mwx-on .Ro_global_content_wrapper,
    body.mwx-on .Ro_next_button_back_container,
    body.mwx-on .Ro_next_est_drive_away_price_note_container,
    body.mwx-on span.Ro_next_est_drive_away_price_text,
    body.mwx-on #RoBuildCarFab {
        display: none !important;
    }

    body.mwx-on .Ro_container_wrapper#build-price-new-step-2 {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100%;
    }

    body.mwx-on .Ro_progress_bar_layout {
        display: block;
        padding: 0;
        margin: 0;
        gap: 0;
    }

    body.mwx-on .Ro_progress_main_content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: var(--mwx-top, 84px) 18px calc(112px + env(safe-area-inset-bottom, 0px));
    }

    /* When the success / thank-you view is shown, footer chrome goes away */
    body.mwx-on.mwx-done .Ro_progress_navigation,
    body.mwx-on.mwx-done .mwx-footer7,
    body.mwx-on.mwx-done .mwx-heading {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       2. Injected fixed header (logo / back · title · step chip · progress)
       ------------------------------------------------------------------ */
    body.mwx-on .mwx-header {
        display: block;
        position: fixed;
        /* pinned just below the site's fixed global header */
        top: 60px;
        left: 0;
        right: 0;
        z-index: 999;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--mwx-line);
        padding-top: env(safe-area-inset-top, 0);
        border-top: 1px solid var(--mwx-line);
    }

    body.mwx-on .mwx-header-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
    }

    body.mwx-on .mwx-back {
        width: 38px;
        height: 38px;
        flex: none;
        border-radius: 50%;
        border: 1px solid var(--mwx-line);
        background: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    body.mwx-on .mwx-back[hidden] {
        display: none;
    }

    /* The site's global header already shows the Rodar logo, so the
       wizard header never repeats it */
    body.mwx-on .mwx-logo {
        display: none !important;
    }

    body.mwx-on .mwx-header-title {
        flex: 1;
        text-align: center;
        min-width: 0;
    }

    body.mwx-on .mwx-header-title b {
        display: block;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--mwx-heading);
        line-height: 1.25;
    }

    body.mwx-on .mwx-header-title span {
        display: block;
        font-size: 11px;
        color: var(--mwx-grey-soft);
        margin-top: 1px;
    }

    body.mwx-on .mwx-stepnum {
        flex: none;
        min-width: 38px;
        height: 26px;
        padding: 0 10px;
        border-radius: var(--mwx-radius-pill);
        background: var(--mwx-blue-50);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        color: var(--mwx-blue);
    }

    body.mwx-on .mwx-progress {
        height: 4px;
        width: 100%;
        background: var(--mwx-line);
    }

    body.mwx-on .mwx-progress-fill {
        height: 100%;
        width: 0;
        background: var(--mwx-blue);
        border-radius: 0 99px 99px 0;
        transition: width .4s cubic-bezier(.16, 1, .3, 1);
    }

    /* Car context bar (visible once a vehicle is chosen, steps 3-6) */
    body.mwx-on .mwx-carbar {
        display: flex;
        align-items: center;
        gap: 12px;
        width: calc(100% - 28px);
        margin: 12px 14px;
        padding: 8px 12px;
        border: 1px solid var(--mwx-line);
        border-radius: 16px;
        background: linear-gradient(135deg, #fff, var(--mwx-surface));
        cursor: pointer;
        text-align: left;
        box-shadow: var(--mwx-shadow-xs);
        appearance: none;
    }

    body.mwx-on .mwx-carbar[hidden] {
        display: none;
    }

    body.mwx-on .mwx-carbar img {
        width: 92px;
        height: 54px;
        object-fit: contain;
        flex: none;
    }

    body.mwx-on .mwx-carbar > div {
        flex: 1;
        min-width: 0;
    }

    body.mwx-on .mwx-carbar-name {
        font-size: 14.5px;
        font-weight: 800;
        color: var(--mwx-heading);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.mwx-on .mwx-carbar-sub {
        font-size: 11.5px;
        color: var(--mwx-grey-cool);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ------------------------------------------------------------------
       3. Injected step heading (title + subtitle)
       ------------------------------------------------------------------ */
    body.mwx-on .mwx-heading {
        display: block;
        margin: 4px 0 20px;
    }

    body.mwx-on .mwx-title {
        font-size: 23px;
        font-weight: 900;
        letter-spacing: -.02em;
        line-height: 1.2;
        margin: 0;
        color: var(--mwx-heading);
    }

    body.mwx-on .mwx-sub {
        font-size: 14px;
        color: var(--mwx-grey-body);
        line-height: 1.5;
        margin: 7px 0 0;
    }

    /* Hide the sections' own desktop headlines (replaced by .mwx-heading) */
    body.mwx-on .Ro_build_my_new_car,
    body.mwx-on .Ro_build_price_exterior .col-lg-7 > h2.title_small-size,
    body.mwx-on .Ro_exterior_color_header h2,
    body.mwx-on .Ro_build_price_options .col-lg-7 > h2.title_small-size,
    body.mwx-on .Ro_build_price_your_details .col-lg-7 > h2.title_small-size,
    body.mwx-on .Ro_build_price_aftermarket_selections .col-lg-7 > h2.title_small-size {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       4. Fixed footer CTA (re-uses the existing #nextButton + skip)
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_progress_navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        margin: 0;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--mwx-line);
        background: #fff;
        display: flex;
        flex-direction: column-reverse;
        gap: 4px;
    }

    body.mwx-on #nextButton {
        width: 100%;
        height: 54px;
        min-height: 54px;
        border: none;
        border-radius: var(--mwx-radius-pill);
        background: var(--mwx-blue) !important;
        color: #fff !important;
        font-size: 17px;
        font-weight: 600;
        box-shadow: var(--mwx-shadow-blue);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.mwx-on #nextButton:hover,
    body.mwx-on #nextButton:focus {
        background: var(--mwx-blue-hover) !important;
    }

    body.mwx-on #nextButton:disabled {
        background: var(--mwx-line-strong) !important;
        color: var(--mwx-grey-soft) !important;
        box-shadow: none;
    }

    body.mwx-on .Ro_next_button_container {
        width: 100%;
        margin: 0;
        display: block;
    }

    /* Swap "Next" for "Continue" on mobile */
    body.mwx-on #nextButton .hide {
        display: none !important;
        visibility: hidden !important;
    }

    body.mwx-on #nextButton .mwx-cta-label {
        display: inline;
    }

    body.mwx-on #nextButton.loading .mwx-cta-label {
        display: none;
    }

    /* Step 1's own Next button (AJAX-injected into the vehicle overview)
       becomes a fixed footer CTA identical to the other steps' button */
    body.mwx-on .Ro_next_est_drive_away_main_page_section {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        margin: 0;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--mwx-line);
        background: #fff;
        /* desktop uses align-items:end, which shrinks the button wrapper */
        align-items: stretch !important;
    }

    body.mwx-on .Ro_next_est_drive_away_main_page_section .Ro_lets_begin_section {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 0;
        float: none;
        text-align: left;
    }

    body.mwx-on .Ro_next_est_drive_away_main_page_section #build-price-new-next-button {
        width: 100% !important;
        flex: none;
    }

    body.mwx-on #build-price-new-next-button {
        width: 100%;
        height: 54px;
        min-height: 54px;
        margin: 0;
        border: none;
        border-radius: var(--mwx-radius-pill);
        background: var(--mwx-blue) !important;
        color: #fff !important;
        font-size: 17px;
        font-weight: 600;
        box-shadow: var(--mwx-shadow-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    body.mwx-on #build-price-new-next-button:hover,
    body.mwx-on #build-price-new-next-button:focus {
        background: var(--mwx-blue-hover) !important;
    }

    body.mwx-on #skipButton {
        width: 100%;
        background: none;
        border: none;
        color: var(--mwx-grey-body);
        font-size: 14px;
        font-weight: 600;
        padding: 8px 0 2px;
        text-decoration: underline;
    }

    /* Step 7 fixed footer (proxy of "Get Your Quotes Now") */
    body.mwx-on.mwx-final .mwx-footer7 {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--mwx-line);
        background: #fff;
    }

    body.mwx-on .mwx-footer7 .mwx-cta {
        width: 100%;
        height: 54px;
        border: none;
        border-radius: var(--mwx-radius-pill);
        background: var(--mwx-blue);
        color: #fff;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: var(--mwx-shadow-blue);
    }

    /* ------------------------------------------------------------------
       5. Shared field styling (labels, inputs, selects, textareas)
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_label_form_label {
        /* desktop uses an absolutely-positioned floating label inside the
           field — on mobile the label sits above the field (as in the
           mobile-design-preview) */
        position: static;
        top: auto;
        left: auto;
        font-size: 14px;
        font-weight: 600;
        color: var(--mwx-heading);
        margin-bottom: 7px;
        display: block;
    }

    body.mwx-on .Ro_fit_your_details_label_required {
        display: none !important;
    }

    /* Mobile number: label on its own line, then [prefix | number].
       Desktop draws ONE border around the whole prefix wrapper and strips
       the inner input borders (!important) — mobile inverts that so each
       control has its own border, like every other field. */
    body.mwx-on .Ro_fit_your_details_input_prefix {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    body.mwx-on .Ro_fit_your_details_input_prefix > .Ro_label_form_label {
        flex: 0 0 100%;
        margin-bottom: 0;
    }

    body.mwx-on .Ro_fit_your_details_input_prefix input.Ro_label_form_input,
    body.mwx-on .Ro_fit_your_details_input_prefix select.Ro_label_form_input {
        border: 1.5px solid var(--mwx-grey-soft) !important;
        border-radius: var(--mwx-radius-md) !important;
    }

    body.mwx-on .Ro_fit_your_details_input_prefix input.Ro_label_form_input:focus,
    body.mwx-on .Ro_fit_your_details_input_prefix select.Ro_label_form_input:focus {
        border-color: var(--mwx-blue) !important;
    }

    body.mwx-on .Ro_fit_your_details_input_prefix > select.Ro_label_form_input {
        width: 112px !important;
        flex: none;
        /* single option (+61 AU) — shown as static; avoids the misplaced
           dropdown popup. Remove this line if more country codes are added.
           (Still enabled, so the value submits with the form.) */
        pointer-events: none;
    }

    body.mwx-on .Ro_fit_your_details_input_prefix > div {
        flex: 1;
        min-width: 0;
    }

    body.mwx-on input.Ro_label_form_input,
    body.mwx-on select.Ro_label_form_input,
    body.mwx-on select.Ro_dropdown_input,
    body.mwx-on .Ro_build_price_finalise select.form-select,
    body.mwx-on .Ro_build_price_your_details select.form-select {
        width: 100%;
        height: 50px;
        border: 1.5px solid var(--mwx-grey-soft);
        border-radius: var(--mwx-radius-md);
        padding: 0 16px;
        background-color: #fff;
        font-size: 16px;
        color: var(--mwx-slate);
        outline: none;
        box-shadow: none;
    }

    body.mwx-on input.Ro_label_form_input:focus,
    body.mwx-on select.Ro_label_form_input:focus,
    body.mwx-on select.Ro_dropdown_input:focus {
        border-color: var(--mwx-blue);
        box-shadow: 0 0 0 4px rgba(47, 85, 237, .15);
    }

    body.mwx-on textarea.form-control {
        width: 100%;
        border: 1.5px solid var(--mwx-grey-soft);
        border-radius: var(--mwx-radius-md);
        padding: 13px 16px;
        background: #fff;
        font-size: 16px;
        color: var(--mwx-slate);
        outline: none;
        resize: none;
        box-shadow: none;
        margin-top: 10px;
    }
    body.mwx-on .user_color_options_form{
        display: block;
    }

    body.mwx-on textarea.form-control:focus {
        border-color: var(--mwx-blue);
        box-shadow: 0 0 0 4px rgba(47, 85, 237, .15);
    }

    /* Select2 (make / model / variant + other dropdowns) */
    body.mwx-on .select2-container .select2-selection--single {
        height: 50px;
        border: 1.5px solid var(--mwx-grey-soft);
        border-radius: var(--mwx-radius-md);
        background: #fff;
    }

    body.mwx-on .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 47px;
        padding-left: 16px;
        padding-right: 42px;
        font-size: 16px;
        color: var(--mwx-slate);
    }

    body.mwx-on .select2-container .select2-selection--single .select2-selection__arrow {
        height: 47px;
        right: 12px;
    }

    body.mwx-on .select2-container--disabled .select2-selection--single {
        background: var(--mwx-surface);
        border-color: var(--mwx-line-strong);
    }

    body.mwx-on .select2-container--disabled .select2-selection--single .select2-selection__rendered {
        color: var(--mwx-grey-soft);
    }

    body.mwx-on .select2-container--focus .select2-selection--single,
    body.mwx-on .select2-container--open .select2-selection--single {
        border-color: var(--mwx-blue);
        box-shadow: 0 0 0 4px rgba(47, 85, 237, .15);
    }

    /* Grey helper note (used on colour / options / aftermarket steps) */
    body.mwx-on .Ro_additional_colors_text {
        display: block;
        margin-top: 16px;
        padding: 13px 15px;
        background: var(--mwx-surface);
        border-radius: var(--mwx-radius-md);
        font-size: 12.5px;
        color: var(--mwx-grey-body);
        line-height: 1.45;
    }

    body.mwx-on .Ro_additional_colors_text a,
    body.mwx-on .Ro_additional_colors_text a strong {
        color: var(--mwx-blue);
        font-weight: 700;
        text-decoration: none;
    }

    /* ------------------------------------------------------------------
       6. STEP 1 · Select your vehicle
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_build_price_select_vehicle .Ro_car_filters_dropdown {
        display: block;
    }

    body.mwx-on .Ro_build_price_select_vehicle .dropdowns-select-section {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    body.mwx-on .Ro_build_price_select_vehicle .Ro_car_filters_dropdown_area .row {
        margin: 0;
    }

    /* Vehicle preview image card */
    body.mwx-on .Ro_model_makes_filters_image {
        margin-top: 6px;
        border: 1px solid var(--mwx-line);
        border-radius: var(--mwx-radius-xl);
        background: linear-gradient(180deg, #fff, var(--mwx-surface));
        padding: 12px;
        overflow: hidden;
    }

    body.mwx-on .Ro_model_makes_filters_image:empty {
        display: none;
    }

    /* Only the car slider images go full width — NOT every img inside the
       AJAX-injected block (the vehicle overview icons live there too) */
    body.mwx-on .Ro_model_makes_filters_image .Ro_final_details_main_slider img,
    body.mwx-on .Ro_model_makes_filters_image .Ro_final_details_main_slider_inner_slider img {
        width: 100%;
        height: 178px;
        object-fit: contain;
        display: block;
    }

    /* Vehicle overview (Performance / Practicality) icons: uniform size,
       matching the FontAwesome icon tiles */
    body.mwx-on .Ro_final_vehicle_overview_left img,
    body.mwx-on .Ro_final_vehicle_overview_left i {
        width: 42px !important;
        height: 42px !important;
        flex: none;
    }

    /* ------------------------------------------------------------------
       7. STEP 2 · Preferred colour
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_build_price_exterior .col-lg-5,
    body.mwx-on .Ro_build_price_exterior .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.mwx-on .Ro_build_price_exterior .Ro_final_details_left_wrapper {
        border: 1px solid var(--mwx-line);
        border-radius: 15px;
        padding: 12px;
        margin-bottom: 6px;
        max-width: 100%;
    }
    body.mwx-on .Ro_build_price_exterior .Ro_final_details_left_wrapper .Ro_final_details_slider_container{
         margin-bottom: 0;
    }

    body.mwx-on .Ro_build_price_exterior .Ro_build_image_thumbs_wrapper {
        display: none;
    }

    body.mwx-on .Ro_build_price_exterior .Ro_final_details_main_slider_inner_slider img {
        width: 100%;
        height: 178px;
        object-fit: contain;
    }

    /* Spec chips — horizontal scroll strip */
    body.mwx-on .Ro_build_price_exterior .Ro_vehicle_specifications {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        padding: 14px 0 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 0 8px;
        border: none;
        background: transparent;
    }

    body.mwx-on .Ro_build_price_exterior .Ro_vehicle_specifications::-webkit-scrollbar {
        display: none;
    }

    body.mwx-on .Ro_build_price_exterior .Ro_vehicle_spec_item {
        flex: none;
        display: flex;
        flex-direction: column;
        gap: 2px;
        border: 1px solid var(--mwx-line);
        border-radius: 12px;
        background: #fff;
        padding: 9px 13px;
        box-shadow: var(--mwx-shadow-xs);
        width: auto;
        text-align: left;
    }

    body.mwx-on .Ro_build_price_exterior .Ro_vehicle_spec_icon {
        display: none;
    }

    body.mwx-on .Ro_build_price_exterior .Ro_vehicle_spec_value {
        order: -1;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--mwx-heading);
        white-space: nowrap;
    }

    body.mwx-on .Ro_build_price_exterior .Ro_vehicle_spec_label {
        font-size: 10.5px;
        color: var(--mwx-grey-soft);
        white-space: nowrap;
    }

    /* Swatches — laid out as in mobile-design-preview:
       [Preferred colour · <name>] / swatch row / chips / other-colour / note */
    body.mwx-on .Ro_exterior_color_wrapper {
        display: flex;
        flex-direction: column;
    }

    body.mwx-on .Ro_exterior_color_header { order: 0; margin: 0; }
    body.mwx-on .mwx-swatch-head { order: 1; }
    body.mwx-on .Ro_exterior_color_grid { order: 2; }
    body.mwx-on .mwx-colour-chips { order: 3; }
    body.mwx-on .user_color_options { order: 4; }
    body.mwx-on .Ro_additional_colors_text { order: 5; }

    body.mwx-on .mwx-swatch-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 2px 14px;
    }

    body.mwx-on .mwx-swatch-head b {
        font-size: 14px;
        font-weight: 700;
        color: var(--mwx-heading);
    }

    body.mwx-on .mwx-swatch-head span {
        font-size: 13px;
        font-weight: 600;
        color: var(--mwx-grey-cool);
    }

    body.mwx-on .Ro_exterior_color_nav_arrows {
        display: none !important;
    }

    body.mwx-on .Ro_exterior_color_grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 14px;
        overflow: visible !important;
        padding: 0;
        margin: 0 0 16px;
    }

    /* "No Colour Preference" is offered as a chip instead of a swatch */
    body.mwx-on .Ro_exterior_color_option_item:has(input[value="No Color Preference"]) {
        display: none;
    }

    body.mwx-on .Ro_exterior_color_option_item {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: auto;
        margin: 0;
        cursor: pointer;
    }

    body.mwx-on .Ro_exterior_color_option_item input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    body.mwx-on .Ro_vehicle_color_swatch {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 2px solid var(--mwx-line-strong);
        box-shadow: var(--mwx-shadow-xs);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.mwx-on .Ro_vehicle_color_swatch_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    body.mwx-on .Ro_vehicle_color_swatch.selected,
    body.mwx-on .Ro_exterior_color_option_item input:checked ~ .Ro_vehicle_color_swatch {
        border: 2.5px solid var(--mwx-blue);
        outline: 2px solid #fff;
        outline-offset: -6px;
    }

    /* No text labels under the swatches (preview shows plain circles) */
    body.mwx-on .Ro_exterior_color_option_text {
        display: none !important;
    }

    /* Chips: No Colour Preference / Other */
    body.mwx-on .mwx-colour-chips {
        display: flex;
        gap: 10px;
    }

    body.mwx-on .mwx-chip {
        flex: 1;
        padding: 13px 10px;
        border-radius: var(--mwx-radius-md);
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        border: 1.5px solid var(--mwx-line-strong);
        background: #fff;
        color: var(--mwx-grey-body);
        appearance: none;
    }

    body.mwx-on .mwx-chip.selected {
        border-color: var(--mwx-blue);
        background: var(--mwx-blue-50);
        color: var(--mwx-blue);
    }

    /* Custom colour box only appears when "Other" is selected */
    body.mwx-on .user_color_options {
        display: none;
        margin-top: 18px;
    }

    body.mwx-on.mwx-other-colour .user_color_options {
        display: block;
    }

    body.mwx-on .mwx-otherlabel {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: var(--mwx-heading);
        margin: 0 0 7px;
    }

    /* ------------------------------------------------------------------
       8. STEP 3 · Add your accessories
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_build_price_options .col-lg-5 {
        display: none !important;
    }

    body.mwx-on .Ro_build_price_options .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.mwx-on .Ro_accessory_card {
        border: none;
        background: transparent;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }

    body.mwx-on .Ro_build_price_options .col-lg-6,
    body.mwx-on .Ro_build_price_options .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 8px !important;
    }

    /* Group titles: bold black uppercase section headings */
    body.mwx-on .Ro_accessory_card > h3 {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--mwx-heading);
        text-align: left !important;
        margin: 16px 2px 12px !important;
    }

    body.mwx-on .Ro_divider_line {
        display: none;
    }

    body.mwx-on .Ro_accessory_list {
        display: block;
    }

    /* Accessory rows → choice cards with the check on the right */
    body.mwx-on .Ro_accessory_item {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 14px;
        background: #fff;
        border: 1.5px solid var(--mwx-line);
        border-radius: 16px;
        padding: 15px 16px;
        margin-bottom: 12px;
        box-shadow: var(--mwx-shadow-xs);
        cursor: pointer;
    }

    body.mwx-on .Ro_accessory_item:has(input:checked) {
        border-color: var(--mwx-blue);
        background: var(--mwx-blue-50);
        box-shadow: inset 0 0 0 1px var(--mwx-blue);
    }

    body.mwx-on .Ro_accessory_item label {
        flex: 1;
        margin: 0;
        font-size: 15px !important;
        font-weight: 700;
        color: var(--mwx-heading);
        cursor: pointer;
    }

    body.mwx-on .Ro_build_price_checkbox_wrapper {
        flex: none;
        display: flex;
    }

    /* Square check (accessories + aftermarket) */
    body.mwx-on .Ro_build_price_checkbox,
    body.mwx-on .Ro_aftermarket_checkbox_wrapper .form-check-input {
        appearance: none;
        -webkit-appearance: none;
        width: 24px;
        height: 24px;
        min-width: 24px;
        margin: 0;
        border: 2px solid var(--mwx-line-strong);
        border-radius: 8px;
        background-color: #fff;
        cursor: pointer;
        background-position: center;
        background-repeat: no-repeat;
    }

    body.mwx-on .Ro_build_price_checkbox:checked,
    body.mwx-on .Ro_aftermarket_checkbox_wrapper .form-check-input:checked {
        border-color: var(--mwx-blue);
        background-color: var(--mwx-blue);
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* ------------------------------------------------------------------
       9. STEP 4 · Your details
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_build_price_your_details .col-lg-5 {
        display: none !important;
    }

    body.mwx-on .Ro_build_price_your_details .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.mwx-on .Ro_your_details_form_col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
    }

    body.mwx-on .Ro_your_details_form_col > .Ro_fit_your_details_input_wrapper {
        grid-column: span 2;
        margin-bottom: 16px !important;
    }

    /* Uniform field spacing: the wrapper's 16px is the ONLY vertical gap.
       Desktop adds its own margins per field type (inputs 15px, dropdown
       wrappers 20px, phone row 0) which made the gaps uneven. */
    body.mwx-on .Ro_your_details_form_col input.Ro_label_form_input,
    body.mwx-on .Ro_your_details_form_col select.Ro_label_form_input,
    body.mwx-on .Ro_your_details_form_col select.Ro_dropdown_input {
        margin-bottom: 0 !important;
    }

    body.mwx-on .Ro_your_details_form_col .Ro_dropdown_wrapper {
        margin-bottom: 0 !important;
    }

    /* First / Last name and Near / Employer share a row (like the preview).
       Targeted by the fields inside them (robust against DOM-order changes)
       with the original position-based selectors kept as fallback. */
    body.mwx-on .Ro_your_details_form_col > .Ro_fit_your_details_input_wrapper:nth-child(1),
    body.mwx-on .Ro_your_details_form_col > .Ro_fit_your_details_input_wrapper:nth-child(2) {
        grid-column: span 1;
    }

    body.mwx-on .Ro_your_details_form_col > .Ro_fit_your_details_input_wrapper:has(#build_price_first_name),
    body.mwx-on .Ro_your_details_form_col > .Ro_fit_your_details_input_wrapper:has(#build_price_last_name) {
        grid-column: span 1;
    }

    /* Near + Employer: full width, one field per row */
    body.mwx-on .Ro_your_details_form_col > .Ro_fit_your_details_input_wrapper:has(input[name="near_postcode"]),
    body.mwx-on .Ro_your_details_form_col > .Ro_fit_your_details_input_wrapper:has(input[name="employer_organisation"]) {
        grid-column: span 2 !important;
    }

    body.mwx-on .Ro_your_details_form_col > .vehicle_type_step {
        grid-column: span 2;
    }

    /* (Mobile number prefix row styled in section 5 — shared fields) */

    /* Trade-in block */
    body.mwx-on .Ro_build_price_your_details .vehicle_type_step .Ro_progress_content_header h2 {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--mwx-grey-soft);
    }
    body.mwx-on .Ro_must_have_label {
        padding: 0 !important;
    }

    body.mwx-on .Ro_build_price_your_details .vehicle_type_step .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Trade-in fields (Rego / State / Postcode / Odometer): same 16px
       rhythm and field styling as the rest of the form */
    body.mwx-on .Ro_fit_your_details_input_wrapper_postcode .Ro_fit_your_details_input_wrapper,
    body.mwx-on .Ro_fit_your_details_input_wrapper_postcode .Ro_dropdown_wrapper {
        margin-bottom: 16px !important;
    }

    body.mwx-on .Ro_fit_your_details_input_wrapper_postcode {
        margin-top: 16px;
    }

    /* ------------------------------------------------------------------
       Choice cards (radio Yes/No, finance type…) — shared
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_must_have_option {
        border: 1.5px solid var(--mwx-line) !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: var(--mwx-shadow-xs);
        margin-bottom: 12px;
    }

    body.mwx-on .Ro_must_have_option:has(input:checked),
    body.mwx-on .Ro_must_have_option.is-checked {
        border-color: var(--mwx-blue) !important;
        background: var(--mwx-blue-50) !important;
        box-shadow: inset 0 0 0 1px var(--mwx-blue);
    }

    body.mwx-on .Ro_must_have_option.is-checked .Ro_must_have_text {
        color: var(--mwx-heading);
    }

    b/*ody.mwx-on .Ro_must_have_label {
        padding: 16px 56px 16px 16px;
    }*/

    body.mwx-on .Ro_must_have_text {
        font-size: 16px;
        font-weight: 700;
        color: var(--mwx-heading);
    }

    body.mwx-on .Ro_must_have_checkbox {
        appearance: none;
        -webkit-appearance: none;
        width: 24px !important;
        height: 24px !important;
        border: 2px solid var(--mwx-line-strong) !important;
        border-radius: 50% !important;
        right: 16px !important;
        margin-left: 0;
        background-color: #fff !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    body.mwx-on .Ro_must_have_checkbox:checked {
        border-color: var(--mwx-blue) !important;
        background-color: var(--mwx-blue) !important;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    /* ------------------------------------------------------------------
       10. STEP 5 · Aftermarket selections
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_build_price_aftermarket_selections .col-lg-5 {
        display: none !important;
    }

    body.mwx-on .Ro_build_price_aftermarket_selections .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.mwx-on .Ro_aftermarket_card {
        border: 1.5px solid var(--mwx-line);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--mwx-shadow-xs);
        margin-bottom: 12px;
        padding: 15px 16px;
    }

    body.mwx-on .Ro_aftermarket_card:has(input:checked) {
        border-color: var(--mwx-blue);
        background: var(--mwx-blue-50);
        box-shadow: inset 0 0 0 1px var(--mwx-blue);
    }

    body.mwx-on .Ro_aftermarket_content {
        padding: 0;
    }

    body.mwx-on .Ro_aftermarket_header {
        display: flex;
        align-items: flex-start;
    }

    body.mwx-on .Ro_aftermarket_item_info {
        flex: 1;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
    }

    body.mwx-on .Ro_aftermarket_pricing {
        display: none !important;
    }

    body.mwx-on .Ro_aftermarket_item_details {
        flex: 1;
    }

    body.mwx-on .Ro_aftermarket_toggle_title,
    body.mwx-on .Ro_aftermarket_toggle_title a {
        font-size: 16px !important;
        font-weight: 700;
        color: var(--mwx-heading) !important;
        text-decoration: none;
    }

    body.mwx-on .Ro_aftermarket_description {
        display: block !important;
        margin-top: 5px;
        padding: 0;
    }

    body.mwx-on .Ro_aftermarket_description p {
        font-size: 12.5px !important;
        color: var(--mwx-grey-cool) !important;
        line-height: 1.45;
        margin: 0;
    }

    /* ------------------------------------------------------------------
       11. STEP 6 · Finalise (finance)
       ------------------------------------------------------------------ */

    /* Estimate banner */
    body.mwx-on .Ro_build_price_finalise > .Ro_progress_content_header {
        background: var(--mwx-blue-50);
        border-radius: var(--mwx-radius-md);
        padding: 13px 15px;
        margin-bottom: 18px;
    }

    body.mwx-on .Ro_finance_drive_away_estimate {
        font-size: 11.5px;
        color: var(--mwx-grey-cool);
    }

    body.mwx-on .Ro_finance_drive_away_estimate strong {
        display: block;
        font-size: 15px;
        font-weight: 800;
        color: var(--mwx-heading);
    }

    body.mwx-on .Ro_finance_drive_away_estimate small {
        font-size: 11px;
        color: var(--mwx-grey-soft);
    }

    body.mwx-on .Ro_build_price_finalise > .Ro_progress_content_header h2 {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--mwx-grey-cool);
        margin: 6px 0 0;
    }

    body.mwx-on .Ro_build_price_finalise > .Ro_progress_content_header h2 strong {
        display: block;
        font-size: 15px;
        font-weight: 800;
        color: var(--mwx-heading);
    }

    /* Question headings → micro labels */
    body.mwx-on .Ro_build_price_finalise .vehicle_type_step .Ro_progress_content_header h2 {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--mwx-grey-soft);
        margin: 8px 2px 11px;
    }

    body.mwx-on .Ro_build_price_finalise .vehicle_type_step .col-lg-4,
    body.mwx-on .Ro_build_price_finalise .vehicle_type_step .col-md-6,
    body.mwx-on .Ro_build_price_finalise .vehicle_type_step .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Promotion box → plain */
    body.mwx-on .Ro_finance_promotion_box {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    body.mwx-on .Ro_finance_promotion_header {
        display: none !important;
    }

    /* Calculator card */
    body.mwx-on .Ro_calculator_section_content {
        display: block !important;
        background: #fff;
        border: 1px solid var(--mwx-line);
        border-radius: var(--mwx-radius-xl);
        padding: 18px;
        box-shadow: var(--mwx-shadow-xs);
        margin-top: 6px;
    }

    body.mwx-on .Ro_calculator_section_content_left,
    body.mwx-on .Ro_calculator_section_content_right {
        width: 100% !important;
        max-width: 100%;
        padding: 0;
        flex: none;
    }

    body.mwx-on .Ro_loan_amount_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    body.mwx-on .Ro_loan_amount_header label {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--mwx-heading) !important;
        margin: 0;
    }

    body.mwx-on .Ro_loan_amount_value_wrapper {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    body.mwx-on .Ro_loan_amount_currency {
        font-size: 16px;
        font-weight: 800;
        color: var(--mwx-heading);
    }

    body.mwx-on .Ro_loan_amount_manual_input {
        width: 96px;
        border: none !important;
        outline: none;
        font-size: 20px !important;
        font-weight: 800 !important;
        color: var(--mwx-heading) !important;
        text-align: right;
        background: transparent;
        -moz-appearance: textfield;
        appearance: textfield;
        box-shadow: none !important;
        padding: 0;
        height: auto;
    }

    body.mwx-on .Ro_loan_slider_container {
        margin-top: 12px;
    }

    body.mwx-on .Ro_loan_slider_active {
        background: var(--mwx-blue) !important;
    }

    body.mwx-on .Ro_loan_slider_handle {
        border-color: var(--mwx-blue) !important;
    }

    /* Term / Repayments labels + pills */

    body.mwx-on .Ro_term_section > label {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--mwx-grey-soft) !important;
        margin: 0 2px 11px;
        display: block;
    }

    body.mwx-on .Ro_term_buttons {
        display: flex;
        gap: 9px;
        flex-wrap: wrap;
    }

    body.mwx-on .Ro_term_payment_button {
        flex: 1;
        min-width: 70px;
        padding: 12px 4px !important;
        border-radius: var(--mwx-radius-md) !important;
        border: 1.5px solid var(--mwx-line-strong) !important;
        background: #fff !important;
        color: var(--mwx-grey-body) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center;
        box-shadow: none !important;
    }

    body.mwx-on .Ro_term_payment_button.active {
        border-color: var(--mwx-blue) !important;
        background: var(--mwx-blue-50) !important;
        color: var(--mwx-blue) !important;
    }

    /* Residual / balloon */
    body.mwx-on .Ro_residual_section {
        margin-top: 18px;
    }

    body.mwx-on .residual-toggle-btn {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 13px 16px;
        border-radius: var(--mwx-radius-md);
        border: 1.5px solid var(--mwx-line-strong);
        background: var(--mwx-surface);
        font-size: 14px;
        font-weight: 700;
        color: var(--mwx-heading);
        text-align: left;
    }

    /* The "—" icon becomes a blue info circle (as in the preview) */
    body.mwx-on .residual-toggle-btn .residual-icon {
        font-size: 0;
        line-height: 0;
        width: 16px;
        height: 16px;
        flex: none;
        background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%232F55ED' stroke-width='2'/%3E%3Cpath d='M12 8v5M12 16h.01' stroke='%232F55ED' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* Caret on the right, rotating when open */
    body.mwx-on .residual-toggle-btn::after {
        content: "";
        width: 14px;
        height: 9px;
        flex: none;
        margin-left: auto;
        background: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23707781' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform .2s;
    }

    body.mwx-on .residual-toggle-btn.active::after {
        transform: rotate(180deg);
    }

    body.mwx-on .residual-inputs {
        margin-top: 12px;
    }

    /* One row: [25% select] = [$ amount] — calculator.css stacks these in
       its own mobile media query, so row layout needs !important */
    body.mwx-on .residual-input-row {
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 10px;
    }

    body.mwx-on .residual-percentage-input {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        display: block;
    }

    body.mwx-on .residual-percentage-input select {
        width: 100%;
        height: 50px;
        border: 1.5px solid var(--mwx-line-strong);
        border-radius: var(--mwx-radius-md);
        padding: 0 16px;
        font-size: 16px;
        background-color: #fff;
    }

    body.mwx-on .residual-or {
        flex: none;
        font-size: 15px;
        font-weight: 700;
        color: var(--mwx-grey-cool);
    }

    /* The outer dollar box is THE field; the input inside stays naked
       (otherwise it renders as a box inside a box) */
    body.mwx-on .residual-dollar-input {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        display: flex;
        align-items: center;
        height: 50px;
        border: 1.5px solid var(--mwx-line-strong) !important;
        border-radius: var(--mwx-radius-md) !important;
        padding: 0 14px !important;
        background: var(--mwx-surface) !important;
    }

    body.mwx-on .residual-dollar-input .dollar-symbol {
        flex: none;
        margin-right: 6px;
        font-size: 15px;
        font-weight: 700;
        color: var(--mwx-grey-cool);
    }

    body.mwx-on .residual-amount-input {
        width: 100%;
        height: auto;
        border: none !important;
        border-radius: 0;
        padding: 0 !important;
        background: transparent !important;
        font-size: 16px;
        font-weight: 700;
        color: var(--mwx-heading);
        outline: none;
    }

    /* Dark payment card */
    body.mwx-on .Ro_payment_summary_card {
        margin-top: 20px;
        border-radius: 20px !important;
        background: var(--mwx-black) !important;
        border: none !important;
        color: #fff;
        padding: 18px !important;
        box-shadow: none !important;
        overflow: hidden;
    }

    body.mwx-on .Ro_payment_summary_content {
        padding: 0 !important;
        background: transparent !important;
    }

    body.mwx-on #payment_heading {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .55) !important;
        margin-bottom: 0;
    }

    body.mwx-on .Ro_payment_display > span {
        display: none;
    }

    body.mwx-on .Ro_payment_amount {
        margin-top: 6px;
    }

    body.mwx-on .Ro_payment_amount_value {
        font-size: 34px !important;
        font-weight: 900 !important;
        letter-spacing: -.02em;
        color: #fff !important;
        line-height: 1.1;
    }

    body.mwx-on .Ro_payment_frequency {
        font-size: 14px !important;
        font-weight: 600;
        color: rgba(255, 255, 255, .6) !important;
        bottom: 0;
    }

    body.mwx-on .Ro_payment_divider {
        border-color: rgba(255, 255, 255, .14) !important;
        opacity: 1;
    }

    body.mwx-on .Ro_rate_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    body.mwx-on .Ro_rate_item > span {
        font-size: 13px !important;
        color: rgba(255, 255, 255, .7) !important;
    }

    body.mwx-on .Ro_interest_rate_controls {
        display: flex;
        align-items: center;
        gap: 8px;
        /* desktop gives this a light pill background — on the dark payment
           card it must be transparent or the white text disappears */
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    body.mwx-on .Ro_interest_rate_step_btn {
        width: 30px;
        height: 30px;
        border-radius: 50% !important;
        border: 1px solid rgba(255, 255, 255, .3) !important;
        background: transparent !important;
        color: #fff !important;
        font-size: 16px;
        line-height: 1;
        padding: 0;
    }

    body.mwx-on .Ro_interest_rate_input {
        width: 52px !important;
        border: none !important;
        background: transparent !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        text-align: center;
        outline: none;
        box-shadow: none !important;
        padding: 0;
        height: auto;
    }

    body.mwx-on .Ro_interest_rate_suffix {
        color: #fff;
        font-weight: 800;
    }

    body.mwx-on .Ro_interest_rate_presets {
        margin-top: 12px;
        display: block !important;
    }

    body.mwx-on .Ro_interest_rate_presets > span {
        display: none;
    }

    body.mwx-on .Ro_interest_rate_preset_buttons {
        display: flex;
        gap: 8px;
        width: 100%;
    }

    body.mwx-on .Ro_interest_rate_preset_btn {
        flex: 1;
        padding: 8px 0 !important;
        border-radius: var(--mwx-radius-pill) !important;
        border: 1px solid rgba(255, 255, 255, .25) !important;
        background: transparent !important;
        color: rgba(255, 255, 255, .85) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    body.mwx-on .Ro_interest_rate_preset_btn.active,
    body.mwx-on .Ro_interest_rate_preset_btn.selected {
        background: #fff !important;
        color: var(--mwx-black) !important;
        border-color: #fff !important;
    }

    /* Finance feature ticks */
    body.mwx-on .Ro_finance_promotion_content {
        margin-top: 18px !important;
        background: transparent;
        border: none;
        padding: 0;
    }

    body.mwx-on .Ro_finance_promotion_features {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    body.mwx-on .Ro_finance_feature {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        color: var(--mwx-grey-body);
    }

    body.mwx-on .Ro_finance_feature_icon {
        color: var(--mwx-green) !important;
    }

    /* ------------------------------------------------------------------
       12. STEP 7 · Your vehicle (review)
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_build_price_final_details .col-md-5,
    body.mwx-on .Ro_build_price_final_details .col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.mwx-on .Ro_build_price_final_details .Ro_car_gallery .Ro_final_details_slider_container {
        border: 1px solid var(--mwx-line);
        border-radius: var(--mwx-radius-xl);
        background: linear-gradient(180deg, #fff, var(--mwx-surface));
        padding: 12px;
        margin-bottom: 14px;
    }

    body.mwx-on .Ro_build_price_final_details .Ro_car_thumbs {
        display: none !important;
    }

    body.mwx-on .Ro_final_page_apprax_price_section {
        background: var(--mwx-blue-50);
        border-radius: var(--mwx-radius-md);
        padding: 13px 15px;
        margin-bottom: 14px;
        border: none;
    }

    body.mwx-on .Ro_final_apprax_row {
        display: flex;
        align-items: baseline;
        gap: 6px;
        flex-wrap: wrap;
    }

    body.mwx-on .Ro_final_apprax_label {
        font-size: 11.5px;
        color: var(--mwx-grey-cool);
    }

    body.mwx-on .Ro_final_apprax_value {
        font-size: 15px;
        font-weight: 800;
        color: var(--mwx-heading);
    }

    body.mwx-on .Ro_final_apprax_change {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--mwx-blue);
        margin-left: auto;
        text-decoration: none;
    }

    /* In-flow quote buttons hidden — the fixed .mwx-footer7 CTA replaces them */
    body.mwx-on.mwx-final .Ro_final_page_quotes_btn {
        display: none !important;
    }

    /* Selections accordion → review card */
    body.mwx-on .Ro_selections_accordion .accordion-item {
        border: 1px solid var(--mwx-line);
        border-radius: var(--mwx-radius-md);
        overflow: hidden;
        box-shadow: var(--mwx-shadow-xs);
    }

    /* Why-choose chips */
    body.mwx-on .Ro_why_choose_list {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    body.mwx-on .Ro_why_choose_item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--mwx-grey-body);
        border: 1px solid var(--mwx-line);
        border-radius: var(--mwx-radius-pill);
        padding: 7px 12px;
        background: #fff;
        width: auto;
        margin: 0;
    }

    body.mwx-on .Ro_why_choose_check {
        color: var(--mwx-blue);
    }

    /* ------------------------------------------------------------------
       13. Thank-you / success view
       ------------------------------------------------------------------ */
    body.mwx-on .Ro_enquiry_thankyou_wrapper {
        padding: 8px 0 30px;
    }

    body.mwx-on .Ro_book_finance_enquiry .success-img {
        width: 62px;
        height: auto;
    }
}

@media (max-width: 580px) {
    body.mwx-on .mwx-header {
        top: 40px;
    }
    body.mwx-on .user_color_options {
        margin-top: 0px; 
    }
    body.mwx-on textarea.form-control {
        font-size: 12px;
    }

}