/*:root { --bg-color: #1B1B1B; --accent-btn-color: #FF553C; }*/
:root { --bg-color: #F0F8FF; --accent-btn-color: #5671FF; --btn-bg-color: white; --table-odd: #EFEFEF; --text-color: #25293A; --search-head-color: #5671FF; --chk2-bg: #D9D9D9; --pillar-color: #cbcbcb54; --check-bg: #F6F6F6; --check-border: #BBCAEB; --pag-btn-bord: #25293A; --cd-bg: white; --scroll-btn-text: white; --scroll-btn: #25293A; --filter-btn: white; --filter-txt: black; --cars-bg: white; --grid-border: #D2D2D2; --search-input: black;}
.light-mode { --bg-color: #1B1B1B; --accent-btn-color: #5671FF; --btn-bg-color: #393939; --table-odd: #565656c2; --text-color: white; --search-head-color: white; --chk2-bg: #565656; --pillar-color: #3d3d3d54; --check-bg: #2C2C2C; --check-border: white; --pag-btn-bord: white; --cd-bg: white; --scroll-btn-text: #161925; --scroll-btn: white; --filter-btn: #3F3F3F; --filter-txt: white; --cars-bg: #00000000; --grid-border: #5671FF; --search-input: white; }
html, body {  /* Make sure html and body take full viewport height */ margin: 0; /* Reset default body margins */ }

body { color: white; background: /*var(--bg-color)*/ #e4f1fc; font-family: roboto; }
#filters {scrollbar-width: none; font-size: 13px; }
    #filters .chk-1 { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: solid 1px var(--check-border); border-radius: 4px; vertical-align: -1px; }
        #filters .chk-1:before { content: '\00a0'; color: white; font-size: 14px; font-weight:800; vertical-align: 1px; line-height: 1; font-family: 'Material Symbols Outlined'; }
        #filters .chk-1:checked { background: var(--accent-btn-color); cursor: pointer; }
            #filters .chk-1:checked + .t { font-weight: bold; color: black; }
            #filters .chk-1:checked:before { content: '\e876'; }
.move-drop-box .chk-1 { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: solid 1px #fff; border-radius: 4px;  margin-right: 8px; vertical-align: -1px; border: solid 1px var(--check-border); }
    .move-drop-box .chk-1:before { content: '\00a0'; color: white; font-size: 12px; font-weight: 800; vertical-align: 1px; line-height: 1; font-family: 'Material Symbols Outlined'; cursor: pointer; }
    .move-drop-box .chk-1:checked { background: var(--accent-btn-color); cursor: pointer; }
        .move-drop-box .chk-1:checked + .t { font-weight: bold; color: black; }
        .move-drop-box .chk-1:checked:before { content: '\e876'; }
.drop-box-other .t { font-size: 14px; white-space: nowrap; }
.drop-box-status .t { font-size: 14px; white-space: nowrap;  margin-right: 20px; }
.drop-box .t { font-size: 16px; line-height: 16px; padding-top: 4px; padding-bottom: 4px; margin-right: 6px; }
#filters::-webkit-scrollbar { display: none; }
.chk-2 { width: 41px; height: 20px; background-color: white; display: flex; align-items: center; padding: 2px 2px 2px 3px; border: 1px solid #5671ff; }
 .chk-2 { width: 41px; height: 20px; background-color: white; display: flex; align-items: center; padding: 2px 2px 2px 3px; border: 1px solid #5671ff; }
.chk-2:checked { background: #3455ff }
.chk-2:before { width: 14px; height: 14px; }
.fbo-profile-div { cursor: pointer; display: flex; text-decoration: none; color: white; }
    .filter > .h { display: flex; align-items: center; cursor: pointer; padding: 6px 20px; }
        .filter > .h > .ic:before { content: '\e5df'; }
        .filter > .h:hover { background: #424a66; }
    .filter > .c { display: none; padding: 0 20px 10px 30px; }
        .filter > .c > .i { display: flex; justify-content: space-between; align-items: center; }
.i > label { display: flex; align-items: center; }
.list .i { position: relative; }
.list .i { }
    /*.list .i .t::after { content: ""; position: absolute; left: 33px; bottom: 0; height: 1px; width: 50%;*/ /* or 100px */ /*border-bottom:1px dotted #9f9f9f; }*/
            .filter > .c > .i.disabled { opacity: .5; }
                .filter > .c > .i.disabled > .chk-2 { cursor: not-allowed; }
        .filter > .c > .list { }
            .filter > .c > .list > .i { margin: 5px 0; }
                .filter > .c > .list > .i > label, .filter > .c > .i > label > input { cursor: pointer; }
                .filter > .c > .list > .i > label { margin: 8px 0; display: block; }
                .filter > .c > .list > .i.disabled { opacity: .5;}
.list .i.disabled { background: #e9e9e9; border-bottom: 1px #f5f5f5 solid; border-radius: 5px; }
.list .i label:hover { cursor: pointer; }
.list .i.disabled label:hover { cursor: default; }
#filters .i .chk-1 { cursor: pointer; }
#filters .i.disabled .chk-1 { background: #dddddd; cursor: default }
#filters-gv-container .col-2-btns { border: #F2F2F2 solid 1px; margin-bottom: 10px;}
#filters-gv-container { margin-bottom: 25px;}
#filters-gv-container .filter { position: relative;}
#filters { max-height: 81vh !important;}
/*.drop-box-padding { border-bottom: 20px solid white; }*/
.drop-box { right: 0; top: 0; color: var(--text-color); height: 0px; border-radius: 10px; position: absolute; top: 62px; }
.options-dropdown .drop-box { position: relative;}
.drop-box::-webkit-scrollbar { width: 4px; }
    .drop-box::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 5px; }
#filters-cv-container .filter { position: relative; width: 215px; }
.filter > .c > .list > .i.disabled > label, .filter > .c > .i.disabled > label > input { cursor: not-allowed; }
.open-close-filters { cursor: pointer}
.add-margin-filters:hover { cursor: pointer; background-color: #e7e5e5; border-radius: 10px; margin-right: 25px; }
.filter > .c > .show { cursor: pointer; margin: 20px 0 10px 4px; font-size: 14px; font-weight: bold; }
            .filter > .c > .show:after { content: 'Show more'; }
            .filter > .c > .show:before { font-family: 'Material Symbols Outlined'; content: '\e145'; margin-right: 5px; vertical-align: -2px; }
        .filter > .c.show-all > .show:after { content: 'Show less'; }
        .filter > .c.show-all > .show:before { content: '\e15b'; }
        .filter > .c:not(.show-all) > .list > .i:not(:nth-child(-n+10)) { display: none; }
    .filter.open { background: #1E243D; }
        .filter.open > .c { display: block; }
        .filter.open > .h > .ic:before { content: '\e5c5'; }
 /*   .filter > .c > .slider-w { margin-top: 25px; height: 5px; margin-bottom: 20px; }
        .filter > .c > .slider-w > .lbl { position: absolute; top: -27px; background: red; color: white; padding: 2px 5px; border-radius: 4px; font-weight: bold; font-size: 11px; margin-left: -20px; }
        .filter > .c > .slider-w > .ui-slider-handle { border: solid 4px #625DF5; border-radius: 100%; width: 14px; height: 14px; }
        .filter > .c > .slider-w > .ui-slider-range { background: #625DF5; }*/
.desking-logo { text-decoration: none; color: var(--accent-btn-color); cursor: pointer; display: flex; height: auto; width: 230px; padding: 10px 15px; margin-left: 0px; justify-content: center;}
.desking-logo img { width: 100%; }
.header-search-div { display: none; width: 100%; padding: 20px 10px 20px 30px; }
.c > .slider-w { 
    margin-top: 25px; 
    height: 5px; 
    margin-bottom: 20px; 
    border-radius: 10px; 
    border: none; 
    background: rgba(147, 197, 253, 0.4); 
    box-shadow: 0 0 8px rgba(147, 197, 253, 0.3);
    position: relative;
}
.slider-w > .lbl { 
    position: absolute; 
    margin-top: -27px; 
    background: #c51412; 
    color: white; 
    padding: 2px 5px; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 11px; 
    display: none;
}
/*.c > .slider-w > .ui-slider-handle { border: solid 4px #c51412; border-radius: 100%; width: 14px; height: 14px; }*/
.c > .slider-w > .ui-slider-handle { 
    border: solid 4px #5671ff; 
    border-radius: 100%; 
    width: 15px; 
    height: 15px; 
    background: white;
    cursor: pointer;
}
.c > .slider-w > .ui-slider-range { 
    background: #1235c53b; 
}
/*.from { position: relative;}*/
/*.to { margin-left: 100px !important; position: relative; }*/
.in-transit-div { display: flex; justify-content: center; }
.in-transit { margin: 0px;}
#f-color { display: flex; }
#f-color > .side { margin-top: 0px; width: 50%; }
    #f-color > .side > .h { font-weight: bold; text-align: left; padding-left: 10px; font-size: 11px; }
    #f-color > .side > .c { display: flex; flex-wrap: wrap; padding: 10px 10px; }
        #f-color > .side > .c > .col-w { border-radius: 100%; width: 13px; height: 13px; border: solid 1px #636363; padding: 2px; margin-right: 5px; margin-bottom: 5px; cursor: pointer; }
            #f-color > .side > .c > .col-w.disabled { opacity: .5; cursor: not-allowed; }
            #f-color > .side > .c > .col-w > .col { height: 100%; border-radius: 100%; }
            #f-color > .side > .c > .col-w.active { border: none; padding: 0; }
#f-term, #f-miles { outline: none; border: none; padding: 5px 10px; border-radius: 4px; }

#vin-msrp { display: flex; width: 100%; padding: 0 30px 0 30px; }
    #vin-msrp > .fields { margin-right: 10px; width: 100%; display: flex; margin-top: 15px; justify-content: space-around; gap: 20px; } 
/*        #vin-msrp > .fields > input { border: none; margin: 5px 0; padding: 2px 5px; width: 140px; display: block }*/
.field-vin-msrp { border: none; margin: 5px 0; padding: 2px 5px; width: 140px; display: none; }
    #vin-msrp .btn-w button { background: var(--accent-btn-color); padding: 6px 10px; border-radius: 6px; border: none; cursor: pointer; }
#main { height: 100%; }
    #main > .intro > .line-1 { font-size: 22px; }
    #main > .intro > .line-2 { font-weight: bold; opacity: 0.7; }
    #main > .intro > .line-3 { opacity: 0.7; }
.remove-filter-btn { height: 24px; margin-right: 7px; border: none; border-radius: 50px; background: #f0f8ff; color: var(--filter-txt); padding: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; white-space: nowrap; flex-shrink: 0; }
.filter-state-name { font-size: 12px; font-weight: 500; }
.change-x-size { font-size: 12px;}
.engine-dots { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100px; }
.engine-dot-td { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100px; }
#badges { display: flex; flex-direction: column; margin-top: 20px; }
    #badges > .badge { width: 364px; padding: 26px 0 36px 29px; /*display: flex;*/ display:none; background: white; margin-right: 23px; border-radius: 10px; }
        #badges > .badge > .l { width: 68px; height: 68px; background: #54A2FE; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-right: 32px; }
        #badges > .badge > .r { }
            #badges > .badge > .r > .t { font-size: 16px; opacity: 0.7; }
            #badges > .badge > .r > .num { font-weight: bold; font-size: 50px; line-height: 50px; }
.row-for-filters-first { display: none; justify-content: space-between; margin-bottom: 0px; position: relative; }
.filters-container { display: flex; margin-left: 0px; margin-top: 10px;}
#best-min { color: var(--text-color); }
#best-max { color: var(--text-color); margin-bottom: 15px;}
.input-wrapper .left { cursor:pointer; user-select: none; display: none; }
.input-wrapper .right { cursor: pointer; user-select: none; display: none; }
#f-other { color: var(--text-color)}
#f-status { color: var(--text-color)}
.input-wrapper { position: relative; width: fit-content; color: var(--text-color) }
    .input-wrapper .money { position: absolute; left: 38px; top: 25px; font-size: 18px; font-weight: bold; }
    .input-wrapper input { border-radius: 6px; position: relative; height: 46px; margin: 10px 10px 15px 0px; line-height: 6ex; color: /*#A2A9B0*/ black; text-align: center; padding-top: 4px; font-size: 18px; letter-spacing: 2px;  }
    .input-wrapper label { position: absolute; top: 23px; z-index: 1; left: 5px;  padding: 0 5px; font-size: 14px; font-weight: 500; }
.grey-line { height: 56px; width: 1px; background: #D9D9D9; margin-left: 7px; margin-right: 7px; display: flex; align-self: center; }
input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
.arrow-min-max { display: flex; }
.input-wrapper .left { transform: rotate(90deg); position: absolute; right: 22px; top: 20px; font-size: 16px; color: #D2D2D2;}
.input-wrapper .right { transform: rotate(-90deg); position: absolute; right: 12px; top: 20px; font-size: 16px; color: #D2D2D2; } 
.badges-col-1 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-btn-color, #5671FF) transparent;
    padding-bottom: 8px;
}
.badges-col-1::-webkit-scrollbar {
    height: 6px;
}
.badges-col-1::-webkit-scrollbar-track {
    background: transparent;
}
.badges-col-1::-webkit-scrollbar-thumb {
    background-color: var(--accent-btn-color, #5671FF);
    border-radius: 3px;
}
.badges-col-1::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-btn-color, #5671FF);
    opacity: 0.8;
}
    .badges-col-1 .c { display: flex; gap: 15px; flex-wrap: nowrap;}
        .badges-col-1 .c .i { display: flex; align-items: center; justify-content: space-between; background: #f9fbff;  }
.badges-col-1 .move-drop-box-other,
.badges-col-1 .move-drop-box-status {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: nowrap;
}
.badges-col-1 .drop-box-other,
.badges-col-1 .drop-box-status {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: nowrap;
}
/* Button-style radio buttons */
.badges-col-1 .i { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 8px 16px; 
    border-radius: 20px; 
    border: 1px solid #BBCAEB; 
    background: white; 
    color: #5671FF; 
    cursor: pointer; 
    transition: all 0.2s;
    position: relative;
    white-space: nowrap;
    order: 0;
}
.badges-col-1 .i:hover {
    border-color: #5671FF;
}
.badges-col-1 .i .chk-2 {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    z-index: 1;
}
    .badges-col-1 .i::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #BBCAEB; background: #ebebeb; flex-shrink: 0; transition: all 0.2s; order: -1; }
.badges-col-1 .i .t {
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    order: 0;
}
.badges-col-1 .i:has(.chk-2:checked) {
    background: #3455ff;
    border-color: #3455ff;
    color: white;
    box-shadow: 0 2px 4px rgba(52, 85, 255, 0.3);
}
    .badges-col-1 .i:has(.chk-2:checked)::before { background: #3455ff; border-color: white; }
.badges-col-1 .i:has(.chk-2:checked) .t {
    color: white;
}
/*.badges-col-2 { display: none; }*/
.drop-box-dealer::-webkit-scrollbar { width: 4px; }
.drop-box-dealer::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 5px; }
.list-search-div::-webkit-scrollbar { width: 4px; }
.list-search-div::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 5px; }
#filters-collect-cv { /* text-wrap: nowrap; overflow: auto;*/ width: 100%; display: flex; align-items: center; margin-bottom: 10px; }
    #filters-collect-cv::-webkit-scrollbar { height: 4px; }
    #filters-collect-cv::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 5px; }
    .badges-col-3 { display: flex; justify-content: end; }
        .badges-col-3 p { display: none;}
        .view-as-text { margin-right: 30px; align-self: center; margin-right: 10px; }
.columns-text { margin-right: 10px; }
.view-select-div { display: flex; align-items: center; }
.inner-col-one { display:flex; justify-content: space-evenly; }
.inner-col-two { display: flex; justify-content: space-evenly; margin-top: 20px; }
.col-grid-view-select { cursor:pointer; width: 30px; height: 30px; background-color: #D9D9D9; border-radius: 7px; margin-right: 10px; display: flex; align-items: center; justify-content: center; }
.grid-box .material-symbols-outlined { font-size: 20px; }
/*.col-box { background-color: #C51412; color: white; }*/
/*.col-box .material-symbols-outlined { color: black; font-size: 20px; }*/
.selected-box { background-color: #C51412; color: white !important; }
    .selected-box .material-symbols-outlined { color: white; }
.reset-button-div { width: 165px; display: flex; justify-content: end; cursor: pointer; align-items: center;}
.clear-filters-div { width: 100%; justify-content: space-between; height: 40px; background-color: var(--accent-btn-color); /*border: #F2F2F2 solid 1px;*/ color: white; margin-top: 0px; display: flex; align-items: center; padding: 0 15px; font-weight: 500; margin-left: 15px; font-weight: 500; border-radius: 10px; }
.clear-filters-div { opacity: 0.5; pointer-events: none; }
 .clear-filters-div.active { opacity: 1; pointer-events: auto; }

/* Cost card label + predicted icons (shared with start-mini) */
.cost-box-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
    display: block;
    text-align: center;
    position: relative;
}

.msrp-predicted-icon,
.invoice-predicted-icon {
    position: absolute;
    left: calc(50% + 25px);
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    margin-left: 6px;
}

/* Make invoice + Predict align nicely - styled as one cohesive unit */
.invoice-field-with-button {
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb !important;
    background-color: #ffffff !important;
    padding: 0;
    height: 40px;
}

.invoice-field-with-button input {
    flex: 1;
    padding: 0 12px;
    border: none !important;
    border-radius: 0;
    background-color: transparent !important;
    outline: none;
    height: 100%;
    text-align: center;
}

.invoice-field-with-button .predict-button {
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: white;
    padding: 0 24px;
    height: 100%;
    min-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #2563ff 0%, #00c2ff 100%);
    border-radius: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    right: 0px !important;
}

.invoice-field-with-button .predict-button:hover {
    opacity: 0.9;
}

/* Primary "Go" button – pill style with icon */
.go-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 90px;
    height: 38px;
    padding: 0 18px;
    border-radius: 9999px;
    background: #3455ff;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 8px 16px rgba(52, 85, 255, 0.35);
    border: none;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    display: none;
}

.go-button .material-symbols-outlined {
    font-size: 18px;
}

.go-button:hover {
    background: #2745f2;
    box-shadow: 0 10px 20px rgba(52, 85, 255, 0.45);
    transform: translateY(-1px);
}

.go-button:active {
    background: #1f36c5;
    box-shadow: 0 4px 10px rgba(52, 85, 255, 0.35);
    transform: translateY(0);
}

/* Secondary "Reset / Clear filters" button – outlined pill */
.reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 90px;
    height: 38px;
    padding: 0 18px;
    border-radius: 9999px;
    border: 1px solid #d0dbff;
    background: #ffffff;
    color: #3455ff;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.reset-button:hover {
    background: #f3f6ff;
    border-color: #b4c5ff;
    box-shadow: 0 4px 10px rgba(52, 85, 255, 0.15);
}

.reset-button:active {
    background: #e3ebff;
    border-color: #9fb3ff;
    box-shadow: none;
}

/* Ensure any text utilities don't override the main color for reset buttons */
.reset-button span,
.reset-button strong {
    color: inherit;
}

/* Text-style reset variant for card headers */
.reset-button.reset-link {
    min-width: 0;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-weight: 500;
    font-size: 14px;
    color: #9ca3af; /* soft gray, like your screenshot */
    display: flex;
    justify-content: end;
}

.reset-button.reset-link:hover {
    color: #3455ff; /* blue on hover */
    background: transparent;
    text-shadow: 0 0 8px rgba(52, 85, 255, 0.35);
}

.reset-button.reset-link:active {
    color: #1d4ed8;
}

#cars-grid { display: flex; width: 100%; flex-wrap: wrap; justify-content: end; }
.grid-menu { display: flex; background-color: white; min-height: fit-content;  border-radius: 10px; }
.add-margin-filters { display: none; }
/*.drop-status-div, .drop-color-div, .drop-monthly-div, .drop-msrp-div, .drop-term-div, .drop-mileage-div, .add-margin-filters { display: none !important; }
*/
.filters-grid-div { display: flex; flex-direction: column;}
.filters-Column { padding-left: 0px; padding-top: 0px;  align-items: center; display: flex; width: 100%;justify-content: space-between;}
.card { margin: 10px; height: 488px; width: 444px; background-color: white; padding: 20px 40px 20px 50px; border-radius: 10px; }
.interior-style{ margin-left: 10px;}
.card-circle { height: 10px; width: 10px; border-radius: 100%; margin-left: 10px; }
.color-ex-text { color: #999999; }
.card img { width: 80%; }
.card-title { font-size: 18px; }
.card-text { font-size: 16px; }
.card-top { border-bottom: 1.5px solid #cdcdcd; margin-top: 10px; margin-bottom: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-top span { margin-bottom: 0px; }
    .card-top p { margin-top: 6px; color: #999999; }
.car-title { color: #000; font-family: Roboto; font-size: 19px; font-style: normal; font-weight: 700; line-height: normal; }
.card-body{ display: flex; margin-top: 10px;}
.card-body-row1 { width: 70% }
.card-body-row2 { width: 30% }
.card-body-title { color: #4d4d4d; font-family: Roboto; font-size: 13px; font-style: normal; font-weight: 700; line-height: normal; }
.card-body-text { color: #999999; font-family: Roboto; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; }
.card-body-title-margin { /*margin-top: 24px;*/ height: 25%;}
.selected-col-drop { width: 211px; height: 52px; background-color: white; border-radius: 10px; display: flex; align-items: center; justify-content: space-evenly; font-weight: 500; position: relative; cursor: pointer; }
.card-footer-btn { text-decoration: none; display: flex; width: 130px; padding: 10px; justify-content: center; align-items: center; gap: 10px; border-radius: 4px; background: var(--red, #C51412); color: white; border: none; }
.footer-price-text { color: #000; font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; opacity: 0.4000000059604645; }
.footer-price-header { margin-bottom:4px; color: var(--black, #000); font-family: Roboto; font-size: 13px; font-style: normal; font-weight: 700; line-height: normal; }
.select-col-drop-box { display: none; width: 211px; height: fit-content; background-color: #f5f5f5; border-radius: 10px; position: absolute; z-index: 2; margin-top: 10px; }
.card-footer { display: flex; justify-content: space-between; border-top: 1.5px solid #cdcdcd; padding-top: 20px; margin-top: 20px; margin-bottom: 20px; }
.footer-price { display: flex; flex-direction: column;}
.col1-div { display: flex; margin-top:15px;}
.col1-div-child { width: 50%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.right-grid-div { width: 80%}
.car-inventory { height: 20%}
.car-monthly { margin-top: 0px;}
.engine-trans-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 2; -webkit-box-orient: vertical; }
.car-engine { height: 40%; }
.chk-2:checked:before { background: red;}
.check-container { margin-left: 15px; display: block; position: relative; padding-left: 35px; margin-bottom: 35px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    .check-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: white; border-radius:5px; }
.check-container:hover input ~ .checkmark { background-color: #ccc; }
.check-container input:checked ~ .checkmark { background-color: #C51412; }
.checkmark:after { content: ""; position: absolute; display: none; }
.check-container input:checked ~ .checkmark:after { display: block; }
.checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.check-container-top { margin-top: 20px; }
/*th.header-center-text { text-align: center !important; }*/

.check-span-fw { font-weight: bold;}
.filter-name-marg { display: flex; justify-content: space-between; font-size: 18px !important; font-weight: 500; color: #3455ff; }
.col-2-btns { width: 245px; height: 45px; /*background-color: var(--btn-bg-color);*/ color: var(--text-color); border: none; /*margin-bottom: 10px; */ display: flex; justify-content: space-between; align-items: center; padding: 0 15px; font-weight: 500;  border: 1px solid gray; }
.icon-name { display: flex; align-items: center; }
.drop-color-btn { width: 215px; }
.plus-minus { font-size: 18px; }
.remove-icon { display: none;}
.icon-filter-text { display: flex; align-items: center; margin: 0 7px; font-size: 16px; font-weight: 500; }
#cars { font-size: 14px; border-radius: 10px; overflow: hidden; border-spacing: 0px; background: var(--cars-bg); display: none; box-shadow: 0px 10px 15px -5px rgba(186, 201, 255, 0.34),0px 10px 15px -5px rgba(186, 201, 255, 0.34),0px 0px 15px -4px rgba(186, 201, 255, 0.34); }
    #cars > thead > tr > th { text-align: center; /*background: black;*/ background: #ff000000; color: var(--text-color); border: none; white-space: nowrap; padding-top: 10px; padding-bottom: 10px; /*border-right: #565656 1px solid;*/ }
    #cars > thead > tr > th:last-child {  border-right: #bbbbbb6b; }
/*.bg-msrp { background: var(--pillar-color) !important; }*/
        #cars > thead > tr > th::before { opacity: 1; }
    #cars > thead > tr > th::after { opacity: 1; }
#cars > tbody > tr > td { color: var(--text-color); /*border-bottom: 8px solid #1b1b1b;*/ /*border-right: #565656 solid 1px;*/ border-top: none; border-bottom: none; height: 100%; width: 190px; text-align: left; }
#cars > tbody > tr > td:last-child { border-right: none; }
.even td { padding-top: 8px !important; padding-bottom: 8px !important;  }
#cars > tbody > tr > td:last-child { text-align: center; }
.no-image-class { text-align: center;}

#cars .car-img { width: 100%; cursor: pointer; width: 100%; height: 100%; display: block; padding-top: 3px; padding-bottom: 3px;  }
    #cars .wd-w { margin-top: 5px; display: flex; justify-content: center; }
#cars .wd { background: var(--accent-btn-color); border-radius: 10px; color: white; /* padding: 5px;*/ cursor: pointer; transition: background .3s; text-decoration: none; height: 38px; display: flex; align-items: center; width: 90px; justify-content: space-evenly; }
      /*  #cars .wd:hover { background: #625DF5; }*/
    #cars .vin { margin-top: 5px; }
        #cars .vin > a { font-size: 13px; opacity: 0.7; text-decoration: underline; color: var(--text-color); }
    #cars .colors > .col > .circle-w { display: inline-block; border: solid 1px #f1f1f1; padding: 2px; border-radius: 20px; vertical-align: -4px; }
        #cars .colors > .col > .circle-w > .circle { width: 10px; height: 10px; border-radius: 10px; }
    #cars .colors > .col > .t { width: 30px; display: inline-block;  }
    #cars .colors { display: flex; justify-content: start; flex-direction: column; }
    #cars .colors .col { margin-bottom: 10px; }
.col-colors { display: flex; align-items: center;}

/* #cars .colors > .col:not(:first-child) { margin-top: 8px; }*/
#cars .stock-num { font-size: 13px; opacity: 0.7; color: #10131e; }
    #cars .window-sticker { font-size: 13px; opacity: 0.7; text-decoration: underline; color: #10131e; display: block; }
    #cars .monthly-info { vertical-align: -6px; margin-left: 5px; cursor: pointer; }
    #cars .mmr { text-decoration: none; }
.feature-search-div .drop-box { margin-bottom: 10px; padding: 10px; max-height: 200px; height: fit-content; overflow: auto; background: var(--btn-bg-color); position: absolute; z-index: 2; margin-top: 58px; left: 6px; border-radius: 10px; border: 1px solid #cfcfcf; display: none; }
.drop-box-year { margin-bottom: 10px; padding: 10px; width: 100%; height: fit-content; background: var(--btn-bg-color);   z-index: 10; margin-top: -10px; display: none; }
.drop-box-make { margin-bottom: 10px; padding: 10px; width: 100%; height: fit-content; background: var(--btn-bg-color);   z-index: 10; margin-top: -10px; display: none; }
.drop-box-model { margin-bottom: 10px; padding: 10px; width: 100%; height: fit-content; background: var(--btn-bg-color);   z-index: 10; margin-top: -10px; display: none; }
.drop-box-trim { margin-bottom: 10px; padding: 10px; min-width: 300px; width: 100%; height: fit-content; overflow-x: auto; background: var(--btn-bg-color);   z-index: 10; margin-top: -10px; display: none; }
.drop-box-style { margin-bottom: 10px; padding: 20px 10px; width: 100%; height: fit-content; background: var(--btn-bg-color); z-index: 10; margin-top: -10px; display: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.drop-box-style .c,
.drop-box-style .list,
.drop-box-style .i { padding-left: 6px; }
.drop-box-drive { margin-bottom: 10px; padding: 20px 10px; width: 100%; height: fit-content; background: var(--btn-bg-color); z-index: 10; margin-top: -10px; display: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.drop-box-drive .c,
.drop-box-drive .list,
.drop-box-drive .i { padding-left: 6px; }
.feature-search-div .drop-box.general { left: -71px; }
.drop-box-make #make-list { overflow: auto; height: 200px; }
.drop-box-model #model-list { overflow: auto; height: 200px; }
.drop-box-trim #trim-list { overflow:auto; height: 200px; }
.drop-box-trim .t { overflow: visible; text-overflow: clip; white-space: normal; }
.drop-box-style #passengers-list { overflow: auto; height: 200px; }
.drop-box-style #style-list { overflow: auto; height: 200px; }
.drop-box-drive #drive-list { overflow: auto; height: 200px; }
.clear-filter-button { cursor: pointer; padding-top: 5px; text-decoration: underline; font-size: 14px; color: #697077; }
.drop-box-status { margin-top: 10px; padding-left: 0px; width: 100%; height: fit-content; z-index: 10; margin-top: 0px; display: flex; text-align: center; }
    .drop-box-status .ck-2 { width: 40px; height: 20px; }
.drop-box-color { margin-bottom: 10px; padding: 10px; width: 215px; height: fit-content; background: var(--btn-bg-color);   z-index: 10; margin-top: -10px; display: none; }
.drop-box-monthly { margin-bottom: 10px; text-align: center; padding: 0px 20px 0px 32px; height: fit-content; z-index: 2; display: block; }
.drop-box-msrp { margin-bottom: 10px; text-align: center; padding: 0px 20px 0px 32px; width: 100%; height: fit-content; z-index: 10; display: block; }
.drop-box-term { margin-bottom: 10px; padding: 10px; width: 100%; height: 150px; background: var(--btn-bg-color);   z-index: 10; margin-top: -10px; display: none; text-align: center; }
.drop-box-mileage { margin-bottom: 10px; padding: 10px; width: 100%; height: 150px; background: var(--btn-bg-color);   z-index: 10; margin-top: -10px; display: none; text-align: center; }
.drop-box-dealer { color: var(--text-color); height: fit-content; border-radius: 10px; z-index: 20; display: block; text-align: center; margin-top: 15px; display: none; position: absolute; top: 25px; left: -10px; } 
.dropdown { position: relative; cursor: pointer; }
.slider-head { font-size: 12px; font-weight: bold; }
.ui-slider-handle.ui-corner-all.ui-state-default:last-child { right: 0; }
/*.drop-box-padding { padding-left: 0px !important; }*/
.drop-box-color .c { margin-top: 0px; }
.bottom-filters { margin: auto; margin-top: 20px; }
.behind-filters { display: relative; }
.drop-dealership-btn { display: none;}
.column-view { display: flex; }
.grid-view { display: flex; }
.move-drop-box .drop-box-dealer .i { font-size: 13px; text-align: left; margin-top: 10px; margin-left: 0px !important; line-height: 18px; }
.move-drop-box { height: fit-content; background: #ffffff00; color: black; margin-bottom:0px; position: absolute; }
.grid-container { width: 100%; display: flex; justify-content: end; justify-content: end; margin-top: 15px; margin-bottom: 7px; }
#cars_wrapper { margin-top: 0px; overflow: auto; }
#cars_length { top: 0; right: 0; float: right; }
    #cars_length select { border: none; color: #25293a; font-size: 13px; font-weight: 500; border-radius: 5px; cursor: pointer; }
.has-images .img-cell { position: relative; text-align: center; padding: 0 5px; }
    .has-images .img-cell > .in-transit { position: absolute; bottom: 0; left: 0; }
#cars { width: 100% !important;}
#import-date { position: relative; top: 10px; font-size: 12px; margin-left: 40px; }
/*#free-text-w { margin: 5px 0 5px 20px; }*/
#free-text { outline: none; border: none; padding: 5px 10px; border-radius: 10px;  }
.add-width-feed { width: 175px !important;}
.footer { display: none; }
.arrow-dealer { position: absolute; right: 15px; cursor: pointer; color: var(--text-color); display: none; }
/*.arrow-dealer-no-show { display: none; }*/
/*Header with search and vin*/
.vin-header { color: var(--text-color); height: 74px; width: 100%; top: 0; background: var(--bg-color); /* left: 220px; */ display: flex; justify-content: flex-end; align-items: center; }
#free-text-w.mobile-only { display: none; }

#vin-msrp.mobile-only { display: none; }
/*#vin-msrp .fields { display: flex; }*/

#dealers-search-new-btn { display: flex; align-items: center; position: relative; margin-right: 0px; border-bottom: 1px solid grey}
.list-search-div { height: 425px; overflow-y: auto; padding-left: 20px; margin-top: 15px; background: white; z-index: 100; }
.clear-dealer-filter-div { padding: 10px 20px; border-top: 1px solid #e5e5e5; background: white; }
.clear-dealer-filter-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 8px 15px; background: transparent; border: 1px solid #dc3545; color: #dc3545; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s ease; }
.clear-dealer-filter-btn:hover { background: #dc3545; color: white; }
.clear-dealer-filter-btn .material-symbols-outlined { font-size: 18px; }
#selected-filters-box .remove-filter-btn { width: fit-content;}
.title-button-div { font-size: 16px; font-weight: 500; color: var(--search-head-color) }
.blue-box { color: white; cursor: pointer; width: 25px; height: 25px; background-color: var(--accent-btn-color); border-radius: 7px; display: flex; justify-content: center; align-items: center; }
.blue-box span { font-size: 15px; }
.title-button-div { display: flex; width: 215px; align-items: center; justify-content: space-between; margin: auto; margin-top: 5px; margin-bottom: 5px;   }
    .title-button-div.feature { justify-content: end;}
    #selected-filters-box::-webkit-scrollbar { height: 4px; width: 4px; }
#selected-filters-box::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 5px; }
/*#selected-filters-box { width: 100%; max-height: 80px; display: flex; overflow-y: auto; padding-top: 2px; padding-bottom: 2px; display: flex; margin-left: 15px; }*/
#dealers-input-new { cursor: pointer; width: 200px; font-size: medium;  position: relative; padding: 5px 10px; margin-left: 0px; height: 50px; border-radius: 4px; /*border: none; */ border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: none; padding-left: 0; border: solid 1px #D9D9D9; border-left: none; }
    #dealers-input-new:focus { outline: none; }

.dealers-input-button { padding-left: 10px; color: var(--text-color); display: flex; justify-content: center; align-items: center; border-radius: 4px; width: 46px; height: 50px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; cursor: pointer; border: solid 1px /*#25293a*/ #BBCAEB; border-right: none; border: none; }
.search-input-button { 
    padding-left: 12px; 
    color: #8b9dc3; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border-radius: 0;
    width: 46px; 
    height: 44px; 
    cursor: pointer; 
    border: none;
    background: transparent;
    position: absolute;
    left: 0;
    z-index: 1;
}
.search-input-button .material-symbols-outlined {
    font-size: 22px;
    color: #8b9dc3;
}
.dealers-input-button .material-symbols-outlined { font-size: 24px; }
#dealers-search-new-btn #dealers-input-new { width: 100%; color: black; padding-left: 15px; border-bottom-left-radius: 0px; border: none; border-left: none; background: white; border-top-right-radius: 10px; border-bottom-left-radius: 0px; }
#dealers-search-new-btn .dealers-input-button { background: white; }
#vin-msrp .fields input { width: 100%; height: 48px; border-radius: 16px; border: 1px solid /*#D9D9D9*/ #BBCAEB; text-align: left; }
#free-text-w { 
    display: flex; 
    align-items: center; 
    width: 50%;
    background: #ffffff;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 0;
}
.move-drop-box-other { display: flex; }
/* .move-drop-box-other .drop-box-other .c .i { display: block !important;}*/
#free-text-w > #free-text { 
    height: 40px; 
    align-self: center; 
    font-size: 16px; 
    font-weight: 400; 
    color: black; 
    border-radius: 9999px;
    padding-left: 48px; 
    width: 100%; 
    border: none;
    background: transparent;
    outline: none;
}
#free-text-w > #free-text::placeholder {
    color: #6b7280;
    font-weight: 400;
} 
#vin-msrp .btn-w button { width: 45px; height: 40px; }
.custom-deal-text { margin-left: 25px; display: none; margin-right: 35px; cursor: pointer; }
.custom-deal-btn { user-select: none; height: 40px; display: flex; padding: 15px; justify-content: center; align-items: center; border-radius: 10px; background: #fff; cursor: pointer; display: none;}
.custom-deal-span { align-self: center; user-select: none; }
#left { display: none; }
.price-change::before { color: white; }
.price-change::after { color: white;}
.inner-container { padding-left: 0px; padding-right: 0px; }
.inner-container.grid-view { padding-left: 0; padding-right: 0px; }
.filters-grid-text { align-self:center;}
.feature-search-div { margin-top: 15px; display: flex; }
.feature-search-div .col-2-btns { padding: 10px 17px 10px 20px; height: 40px; border: 1px solid #BBCAEB; background: #f9fbff !important; border-radius: 4px; }
.feature-search-div .drop-box,
.options-dropdown { padding: 14px 14px 14px 20px; border-radius: 10px; background: var(--btn-bg-color); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.feature-search-div .drop-box-style.drop-box,
.feature-search-div .drop-box-drive.drop-box { padding: 14px 14px 14px 20px !important; overflow-x: visible; }
.feature-search-div .drop-box .c,
.feature-search-div .drop-box .list,
.feature-search-div .drop-box .i,
.options-dropdown .c,
.options-dropdown .list,
.options-dropdown .i { padding-left: 6px; }
.feature-search-div .drop-box-style .c,
.feature-search-div .drop-box-style .list,
.feature-search-div .drop-box-style .i,
.feature-search-div .drop-box-drive .c,
.feature-search-div .drop-box-drive .list,
.feature-search-div .drop-box-drive .i { padding-left: 14px !important; }
.feature-search-div .drop-box-style .clear-filter-div,
.drop-box-style .pt-3,
.drop-box-drive .clear-filter-div,
.drop-box-drive .pt-3 { padding-left: 6px; }
.feature-search-div .drop-box-style .clear-filter-div,
.feature-search-div .drop-box-drive .clear-filter-div,
.feature-search-div .drop-box-style .pt-3,
.feature-search-div .drop-box-drive .pt-3 { padding-left: 14px; }
.add-margin-filters { margin-bottom: 15px; margin-left: 15px; display: none; color: inherit; /* blue colors for links too */ text-decoration: inherit; /* no underline */ }
.grey-filters-box { width: 35.445px; height: 35.445px; flex-shrink: 0; border-radius: 10px; background: #F2F2F2; margin-right: 10px; display: flex; justify-content: center; align-items: center;}
.desk-arrow { font-size: 14px; color: black; align-self: center; }
.circle-arrow { width: 20px; height: 20px; background-color: white; border-radius: 100%; display: flex; justify-content: center; justify-items: center; }
.row-for-filters{ width: 100%}
#cars-grid ul { display: contents; list-style-type: none;}
.column-div-view { display: flex;}
.column-view-left { width: 15%; padding-top: 5px;}
.column-view-right { width: 100%; padding-right: 30px; padding-left: 30px; padding-bottom: 300px; }
.mobile-menu-close { display: none;}
.menu-open-div { display: flex; justify-content: center; }
#spinner-w { position: absolute; top: 70%; width: 100%; text-align: center; margin: 0 auto; left: 0; right: 0; display: flex; justify-content: center; }
.options-list-title { color: var(--text-color); display: flex; display: flex; cursor: pointer; position: relative; justify-content: space-between; /*background: var(--btn-bg-color);*/ padding: 10px 17px 10px 20px; font-size: 13px; border: 1px solid #BBCAEB; border: none; background: #f9fbff !important; }
.options-list {  align-items: center;  display: flex; justify-content: center; }
.option-list-drop-div { position: relative; margin-bottom: 15px; }
.options-dropdown { display: none; width: 100%; height: fit-content; background: var(--btn-bg-color); z-index: 250; padding: 20px 10px; margin-bottom: 15px; font-size: 12px; text-align: left; color: var(--text-color);  flex-direction: column; position: absolute; }
    .options-dropdown::-webkit-scrollbar { width: 4px; }
    .options-dropdown::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 5px; }
    /*  .options-dropdown h2 { margin-left: 20px;}*/
    .options-dropdown .chk-1:checked:before { content: '\e876'; color: white; font-size: 13px; font-weight: 800; vertical-align: 1px; line-height: 1; font-family: 'Material Symbols Outlined'; }
    .options-dropdown .chk-1 { -webkit-appearance: none; min-width: 15px; height: 15px; border: solid 1px var(--check-border); border-radius: 5px; vertical-align: -1px; }
    .options-dropdown .i { margin-bottom: 10px; }
    .options-dropdown .chk-1:checked { background: var(--accent-btn-color); }
.flip-arrow { color: #565656; font-size: 18px; }
.flip-now { transform: rotateX(180deg); }
.flip-now-2 { transform: rotateX(180deg);  }
.close-blue { display: none;}
.display-filters { display: none; }
.text-icon { display: flex; }
/*.make-options-list-of { display: flex; margin-bottom: 15px;}*/
.options-list-title { width: 395px; height: 44px /*60px*/; border: 1px #BBCAEB solid; }
.options-list-margin { background: #fafafa00; }
    .options-list-margin
    .border-add { border-bottom: 2px solid #C51412; }
.add-entries { width: 15%; position: absolute; right: 10px; top: -8px; color: black; font-size: 13px; }
.add-monthly { padding: 0px 0px; width: 100%; height: fit-content; background: #f5f5f5; border-radius: 0px; /*position: absolute;*/ z-index: 2; margin-top: 0px; display: flex; flex-direction: column;}
.dealers-menu-open-div { display: none; }
.left-mobile-menu-close { display: none; }
.fbo-settings-div { cursor: pointer; text-decoration: none; color: white; }
.fbo-settings-icon { width: 44px; height: 44px; border-radius: 5px; background: #237FFF; color: white; display: flex; justify-content: center; align-items: center; right: 0; top: 20px; }
.fbo-span-text { display: flex; justify-items: center; align-items: center; }
.setting-profile-div { display: flex; margin-right: 0px; align-items: center; }
.fbo-red-circle { width: 54px; height: 54px; background: #C51412; border-radius: 100%; color: white; display: flex; justify-content: center; align-items: center; margin-right: 20px; margin-left: 20px; }
.fbo-header { color: var(--gray, #F1F1F1); font-family: Roboto; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.fbo-sub-header { color: var(--gray, #F1F1F1); font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.fbo-text { display: flex; flex-direction: column; }
.fbo-profile-div { cursor: pointer; display: flex; text-decoration: none; color: white; }
.settings-text { margin-top: 10px; }
.vin-logo-header { text-decoration: none; color: white; cursor: pointer; }
svg { margin-right: 10px; }
.zip-code-div { margin-right: 15px; align-items: center; color: var(--text-color) }
.zip-code-div .left,
.zip-code-div .right,
.zip-code-div .input-wrapper .left,
.zip-code-div .input-wrapper .right {
    display: none !important;
}
.zip-code-div input[type="number"]::-webkit-inner-spin-button,
.zip-code-div input[type="number"]::-webkit-outer-spin-button,
#zip-code[type="number"]::-webkit-inner-spin-button,
#zip-code[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}
#deals-links a { color: black; }
.drop-down-arrow { color: white; align-self: center; }
.settings-menu { color: black; }
#reports-links a { color: black; }
.rotate-arrow { transform: rotate(180deg); }
.deals-header { border-bottom: 1px solid #e1e1e1; padding-bottom: 8px; }
.my-profile { margin-bottom: 15px; }
.add-margin-deals { margin-top: 20px; }
.settings-link { display: flex; text-decoration: none; color: black; margin-top: 0px; margin-bottom: 10px; align-items: center; }
.my-profile span { display: none; }
.add-margin-settings { margin-left: 7px; }
#deals-links > a:hover { background: #f2f2f2; }
#reports-links > a:hover { background: #f2f2f2; }

.grid-item-a { border-left: solid 1px #D2D2D2; border-bottom: solid 1px #D2D2D2; }
.grid-item-b { display: none; }
.grid-item-c {  border-bottom: solid 1px #D2D2D2; }
.grid-item-d { position: relative; }
.grid-item-e { margin: auto; height: 200px; text-align: center; display: none; flex-direction: column; align-items: center; position:relative; width: 100%; /*overflow-x: auto;*/ }
    .grid-item-e::-webkit-scrollbar { width: 4px; }
    .grid-item-e::-webkit-scrollbar-thumb { background-color: #5671ff; border-radius: 5px; }
/*.odd { background: var(--table-odd) !important; }*/

.img-cell { margin: 0px !important; }
.new-grid-container { height: 100%; display: grid; display: grid; grid-template-columns: 20% 80%; grid-template-rows: /*76px */auto auto; grid-template-areas:
        /*"sidebar header header header"*/
        "sidebar2 main main main"
        "sidebar3 main main main"; }
.number-inner { display: flex; justify-content: center; }
.make-grid-smaller { grid-template-columns: 0% 100%; }

.menu-open-button { display: none; }
.close-open-btn { width: 60px; height: 60px; background: grey; color: white; display: flex; justify-content: center; align-items: center; margin-left: 30px; border-radius: 6px; cursor:pointer; }
.close-blue span { font-size: 30px; }
.number-input-label { font-size: 15px; font-weight: 700; margin-left: 4px; color: var(--text-color); text-align: left; display: flex;}
.for-entries { display: none; }
#filter { max-height: 76vh; }
/*.blue-circle-dealer { display: none; }*/
.blue-circle { font-size: 11px; border-radius: 100%; width: 19px; height: 19px; background: var(--accent-btn-color); color: white; justify-content: center; align-items: center; position: absolute; right: 40px; display: none; }
.blue-circle-options { font-size: 11px; border-radius: 100%; width: 19px; height: 19px; background: var(--accent-btn-color); color: white; justify-content: center; align-items: center; position: absolute; right: 40px; display: none; top: 11px; }
.blue-circle-dealer { font-size: 11px; border-radius: 100%; width: 19px; height: 19px; background: var(--accent-btn-color); color: white; justify-content: center; align-items: center; position: absolute; right: 74px; display: none; top:11px; }

.paginate_button, .previous{ background: red;  }
.change-bottom-border { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
.change-bottom-border-btn { border-bottom-right-radius: 0px;  border-bottom-left-radius: 0px}
.footer { position: fixed; bottom: 0px; border-top: 1px var(--accent-btn-color) solid; width: 269px; height: 60px; background: var(--bg-color); justify-content: center; box-shadow: 0px -41px 71px 43px var(--bg-color),0px 10px 15px -3px rgba(0,0,0,0.1); }
.no-shadow { box-shadow: none; }
.border-remove { border-bottom: none; }
.hide-the-div { display: none; }
.dataTables_length { }
.dark-light { padding: 10px 15px; width: fit-content; background: #E9E9E9; color: white; cursor: pointer; width: 75px; height: 40px; border-radius: 20px; display: flex; justify-content: space-around; align-items: center; }
.dark { color: #949494; min-height: 30px; min-width: 30px;  border-radius: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.light { color: #949494; min-height: 30px; min-width: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.mode-selected { background: black; color: white; }
.dark span { font-size: 18px; }
.light span { font-size: 18px; }
.input-wrapper input { background-color: #f9fbff; border: 1px #BBCAEB solid; border-radius: 16px;}
.hide-for-now { display: none; }
#cars_info { color: var(--text-color)}
.paginate_button .previous { display: none; }
#feature-filters-div { width: 850px; height: 38px; display: flex; overflow-x: auto; overflow-y: auto; padding-top: 2px; padding-bottom: 2px; flex-wrap: wrap; position: absolute; top: -24px; }
    #feature-filters-div::-webkit-scrollbar { height: 4px; width: 4px; }
    #feature-filters-div::-webkit-scrollbar-thumb { background-color: var(--accent-btn-color); border-radius: 5px; }
    #feature-filters-div .remove-filter-btn { width: fit-content; margin-bottom: 7px; margin-top: 7px; }
.scroll-btn span { position:absolute; right: 25px; bottom: 55px;  color: var(--scroll-btn-text); background: var(--scroll-btn); font-size: 15px; width: 25px; height: 25px; border-radius: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 100; }
.scroll-btn { display: none; }
.scroll-btn-arrow { transform: rotate(90deg); }
.scroll-btn-arrow-up { transform: rotate(-90deg); }
#vin-msrp .blue-circle { display: none; }
.cd-filters-drop-2 { display: none; margin-right: 15px; margin-bottom: 0px;}
    .cd-filters-drop-2 .col-2-btns-new { margin-bottom: 0px; }
.col-2-btns-new { cursor:pointer; width: 140px; height: 40px; background-color: var(--btn-bg-color); color: var(--text-color); border-radius: 10px; border: none; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; font-weight: 500; /*margin-left: 15px;*/ }
.drop-year-div-cd { position: relative; }
.drop-make-div-cd { position: relative; }
.drop-model-div-cd { position: relative; }
.drop-trim-div-cd { position: relative; }

.drop-year-div-cd .drop-box-year { position: absolute; left: 0; top: 55px; border-radius: 10px; }
.drop-make-div-cd .drop-box-make { position: absolute; left: 0; top: 55px; border-radius: 10px; }
.drop-model-div-cd .drop-box-model { position: absolute; left: 0; top: 55px; border-radius: 10px; }
.drop-trim-div-cd .drop-box-trim { position: absolute; left: 0; top: 55px; border-radius: 10px; min-width: 300px; }

/*.left { display: none; }
.right { display: none; }*/
.dark-light { display: none; }
.pag-arrows { font-size: 14px; color: white; display: flex; justify-content: end; align-self: center; }
.paginate_button { margin-right: 10px !important;}
.dataTables_wrapper .dataTables_paginate { text-align: right; float: right; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { max-width: 30px; height: 30px; border-radius: 6px; background: black; color: white; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #1B1B1B; color: white; border: white 1px solid; height: 30px; width: 30px; border-radius: 6px; border-radius: 6px; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { margin-top: 10px; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #ff000000; border: solid 1px var(--pag-btn-bord); color: var(--text-color) !important; }
    .dataTables_wrapper .dataTables_paginate .paginate_button { color: #25293A !important; }
        .dataTables_wrapper .dataTables_paginate .paginate_button { width: fit-content; height: 30px; min-width:30px; padding: 5px; }
            .dataTables_wrapper .dataTables_paginate .paginate_button:hover { border-radius: 6px; background: #25293a; }
             .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { border-radius: 6px; background: #25293a; }
            .previous { background: #25293A !important; border-radius: 6px !important; display: flex !important; justify-content: end !important; align-items: center !important; }
.next { background: #25293A !important; border-radius: 6px !important; display: flex !important; justify-content: end !important; align-items: center !important; }
#cars_paginate { display: flex; align-items: center; }
.zipcode-flex { display: flex; margin-bottom: 0px; margin-top: 0px;  }
.pin-point { font-size: 22px;}
.zip-code { width: 100%;}
.settings-icon { font-size: 21px; }

.cd-filters-drop { cursor: pointer; display: none; align-items: start; text-align: left; width: 140px; height: 40px; background: var(--cd-bg); border-radius: 10px; color: black; font-size: 15px; margin-right: 15px; padding-left: 20px; }

.fields .custom-deal-hide-div { display: none; }
.custom-deal-hide-div { display: none; }
table.dataTable.no-footer { border-bottom: none;}
/*.add-more-margin { margin-bottom: 25px; }*/
.best-montly-btn:hover span { display:none; }
.best-montly-btn:hover:before { content: "Click to Desk" }
.best-monthly-link { text-decoration: none;}
.dealer-title-info { text-align: left; padding-left: 26px;}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody { border: none; }
    .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody::-webkit-scrollbar { height: 4px; width: 4px; }
    .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 5px; }
thead { background: white; color: black;}
.best-monthly-head { color: var(--accent-btn-color) }
.first-header { border-top-left-radius: 15px; padding-left: 15px !important; }
th:last-child { border-top-right-radius:15px }
.dataTables_scrollBody { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.dataTables_scroll { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.dealer-title-info { text-align: left; padding-left: 15px;}
td.msrp-bold { font-weight: 800; color: #757575 !important; padding-left: 25px !important; }
td.body-td-padding { padding-left: 20px !important; }
.dataTables_scroll { box-shadow: 0px 10px 15px -5px rgba(186, 201, 255, 0.34),0px 10px 15px -5px rgba(186, 201, 255, 0.34),0px 0px 15px -4px rgba(186, 201, 255, 0.34); }
.best-montly-btn { background: var(--accent-btn-color); border-radius: 10px; color: white !important; /* padding: 5px;*/ cursor: pointer; height: 38px; display: flex; align-items: center; width: 90px; justify-content: space-evenly; width: 146px; font-weight: 700; }
/*.number-input-divs { margin-top: 5px;  }*/
/*.badges-col-1 { display: none;}*/
.number-input-divs { }
.number-inner-div { display: flex; flex-direction: column; }
.number-inner
.search-inputs-section { display: none; }
.best-msrp-side { }
/*table.dataTable thead .sorting_asc { background-image: url("../img/arrowUp.png"); }
table.dataTable thead .sorting_desc { background-image: url("../img/arrowDown.png"); }*/
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before { font-family: 'Material Symbols Outlined'; font-size:24px !important; right: 20px !important; content: "arrow_drop_up" !important; }
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after { font-family: 'Material Symbols Outlined'; content: "arrow_drop_down" !important; font-size: 24px !important; right: 20px !important; }

table.dataTable thead th { position: relative; background-image: none !important; }

.dataTables_wrapper .dataTables_paginate .ellipsis { cursor: pointer; color: black; }
.filter-area { display: flex; flex-direction: column;}
.add-msrp { width: 100%; }
.make-side-close { margin-left: 185px; }
.header-color { display: none; }
.column-view-right { display: none; }
.start-page-div { display: flex; }
.direct-desk { background: #ffffff00; border-radius: 20px; width: 100%; /*padding: 10px 0 20px;*/ }
.search-feature { height: fit-content; display: flex; flex-wrap: wrap; /*justify-content: end; */}
    .search-feature .start-btn { padding-bottom: 10px; }
.start-page-col-1 { display: none; flex-wrap: wrap; width: 30%; background: #f4f9ff; border-radius: 20px;  }
.start-page-col-2 { display: flex;  flex-wrap: wrap;  gap: 28px; margin-top: -28px; }
.start-page-col-3 { display: flex; justify-content: center; padding: 20px; flex-wrap: wrap; }
.option-list-text { color: /*#2954ED*/ black; font-size: 16px; font-weight: 600;  user-select: none; }
.sbf-container { width: 100%; display: flex; }
.options-list-exterior {  width: 100%; }
.options-list-interior {  width: 100%; }
.options-list-fuel {  width: 100%; }
.options-list-general {  width: 100%; }
.options-list { flex-wrap: wrap; align-items: center; display: flex; justify-content: space-between;}
.number-input-container { display: flex; justify-content: space-between; }
.go-start-btn { width: 59px; height: 50px; border-radius: 10px; background: #2954ED; display: flex; justify-content: center; align-items: center; align-self: center; display: none; }
.number-results { font-size: 18px; font-weight: 700; color: #3455FF; margin-right: 12px; }
.results-text { font-size: 16px; font-weight: 400; font-family: roboto; color: #237FFF; }
.number-container { display: flex; /*margin-bottom: 10px;*/  align-items: center; justify-content: center; width: 235px; height: 44px; }
#filters-cv-container .number-container { margin-left: 20px; margin-top: 15px; margin-bottom: 15px; } 
.clear-filter-btn { width: 165px; height: 40px; border-radius: 10px; background: #2954ED; color: white; display: flex; justify-content: space-evenly; align-items: center; cursor: pointer; }
.top-container { }
.clear-filters-container { display: flex; justify-content: space-between; width: 100%; padding-right: 20px; margin-top: 0px; } 
.start-page-col-1 .top-container { justify-content: end; }
.search-anything-input { width: 100%; }
.search-database { display: flex; width: 100%; flex-wrap: nowrap;  }
.background-change { background: #f4f9ff; gap: 20px; }
/*.column-view-right { display: none;}*/
.start-btn { /*height: 100%; */ display: flex; align-self: center; margin-left: 15px; margin-top: 15px; margin-bottom: 10px; }
    .start-btn > img { cursor: pointer; width: 100%; max-width: 70px; margin-right: 10px; border-radius: 10px;  }
    .start-btn.disabled > img { opacity: 0.5; }
    .start-btn-side > img {  max-width: 70px; margin-right: 0px; }
    .container-data { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; } 
.container-size { width: 85%;}
.direct-desk-bottom { width: 100%;}
.bottom-column-inputs { display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap; }
.enter-vin-input { width: 90%; height: 50px; border: 1px solid #D9D9D9; border-radius: 10px; }
.msrp-input { width: 90%; height: 50px; border: 1px solid #D9D9D9; border-radius: 10px; }
.invoice-input { width: 90%; height: 50px; border: 1px solid #D9D9D9; border-radius: 10px; }
.selling-price-input { width: 90%; height: 50px; border: 1px solid #D9D9D9; border-radius: 10px; }
.top-div-sd { display: flex; width: 100%; }
.col-2-btns-dd { width: 100%; border: solid 1px #D9D9D9; }
.col-2-btns-db { height: 44px; color: var(--text-color); border: none; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; font-weight: 500; /*margin-left: 15px;*/ border: 1px solid /*#D9D9D9*/ #BBCAEB; background: #f9fbff; }
.input-div-container input { padding-left: 40px; }
.input-div-container { position: relative;  display: flex; justify-content: space-between; align-items: center; background: white; }
    .input-div-container > span.material-symbols-outlined { position: absolute; color: black; left: 10px; top: 12px; }
    .input-div-container button span.material-symbols-outlined { position: static; }
/* Predicted value icons (MSRP / Invoice) - same as start-mini */
.input-div-container .msrp-predicted-icon,
.input-div-container .invoice-predicted-icon {
    position: absolute;
    left: calc(50% + 25px);
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    margin-left: 6px;
}
.direct-desk-bottom .search-database { padding-bottom: 20px; }
.search-database { padding-bottom: 20px; }
.card-shadow {
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.card-shadow-soft {
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
}
.database-border { width: 100%; }
.filter { position: relative; }
.feature-top-input { width: 33%; }
    .feature-top-input .options-list-title { width: 100%; }
.middle-input { width: 33%; /*margin-top: 25px;*/ }
.top-div-sd { display: none;}
.bottom-column-inputs { display: none;}
.dropdown-btn-cd { height: 48px; cursor: pointer; padding-left: 30px; color: black; background: white; border: 1px solid #BBCAEB; }
#msrpTrim { border-radius: 10px; width: 100%; margin-right: 0px !important; }
.drop-down-div .div-direct-desk { position: relative; display: flex; align-items: center; } 
.icon-move { position: absolute; z-index: 200; color: black; top: 15px; left: 10px; }
/*.div-direct-desk-msrp { display: none !important; }*/
.clear-icons { font-size: 18px !important; }
.sbf-div { display: flex; align-items: center; gap: 12px; min-width: 0; }

#feature-filters-box {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding: 2px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-btn-color, #5671FF) transparent;
    width: 200px;
}

#feature-filters-box::-webkit-scrollbar {
    height: 6px;
}

#feature-filters-box::-webkit-scrollbar-track {
    background: transparent;
}

#feature-filters-box::-webkit-scrollbar-thumb {
    background-color: var(--accent-btn-color, #5671FF);
    border-radius: 3px;
}

#feature-filters-box::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-btn-color, #5671FF);
    opacity: 0.8;
}

#feature-filters-box .remove-filter-btn {
    flex-shrink: 0;
}
#dealers-search-new { display: none; align-items: center; position: relative; margin-right: 0px; }
.search-inputs-section { display: none; }
.direct-disk-top { background: #f4f9ff; }
.move-style-here, .move-passengers-here { width: 33%; margin-bottom: 15px; }
    .move-style-here .col-2-btns, .move-passengers-here .col-2-btns { height: 44px /*60px*/; border: 1px #BBCAEB solid; background: #f9fbff; }
    .move-style-here .filter, .move-passengers-here .filter { width: 100%; display:flex;  }
.move-style-here-drive { width: 33%; margin-bottom: 15px; }
    .move-style-here-drive .col-2-btns { height: 44px /*60px*/; border: 1px #BBCAEB solid; background: #f9fbff; }
    .move-style-here-drive .filter { width: 100%; justify-content: end; }
.drop-year-btn { width: 147px; }
.drop-trim-div.filter.trim { min-width: 220px; }
.drop-trim-div .drop-trim-btn.col-2-btns-db { min-width: 200px; }
.bottom-startbtn-div { display: flex; justify-content: center; display: none; }
.browse-arrow { display: none;}
.error-class { border: solid 2px red;}
.arrow-flip { transform: rotate(180deg); }
.direct-desk-flex { position: relative; display: flex; justify-content: center;}
.left-grid-div { min-width: 150px; width: 90%; margin-top: 18px;  }
.direct-arrow { display: none; }
/*.sbf-container { border-bottom: 2px solid #3455ff63; }*/
.middle-input .drop-box { top: 53px; }
.option-list-drop-div .drop-box { height: fit-content;  width: 100%; }
.options-dropdown .list { height: 200px; overflow: auto; }
.badges-col-2 .drop-box { top: 58px; width: 90%; }
.deal-type-container { display: flex; flex-direction: column; gap: 8px; width: 45%; }
.deal-type-label { color: #4a5568; font-size: 14px; font-weight: 500; text-align: center;}
.toggle-div { display: flex; justify-content: center; background: #e4f1fc; border-radius: 20px; padding: 4px; gap: 0; position: relative; }
.toggle-text-div { display: flex; flex: 1; position: relative; }
.toggle-text-div .chk-2 { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; z-index: 2; }
.toggle-text { color: #6b7280; font-size: 14px; white-space: nowrap; display: flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 6px; transition: all 0.2s; cursor: pointer; width: 100%; font-weight: 500; }
.toggle-text-div:has(.chk-2:checked) .toggle-text { background: white; color: #3455ff; box-shadow: 0 2px 4px rgba(52, 85, 255, 0.15); border-radius: 20px; }

.reset-button { height: 38px; width: 97px; border-radius: 20px; display: flex; justify-content: center; font-weight: 700; }
.go-button { height: 35px; min-width: 70px; color: white; background: #3455ff; border-radius: 9999px; display: none; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; font-weight: 500; }
.box-button, .box-button-2 { color: white; background: #3455ff; border-radius: 9999px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; transition: opacity 0.2s; }
.box-button:hover, .box-button-2:hover { opacity: 0.9; }

/* Results in Inventory Button Styles */
.top-container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    gap: 16px;
    min-width: 0;
}

.top-container > #free-text-w {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 1;
}

.results-inventory-buttons { 
    display: flex;
    align-items: center;
    gap: 12px;
    /* Let the flex layout position this block so it doesn't overlap the search input */
    position: relative;
    width: 100%;
    justify-content: end;
}
.top-container .results-inventory-buttons {
    display: none;
}

#header-filter-tabs { 
    margin-left: auto; 
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

#header-filter-tabs::-webkit-scrollbar {
    height: 6px;
}

#header-filter-tabs::-webkit-scrollbar-track {
    background: transparent;
}

#header-filter-tabs::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 3px;
}

#header-filter-tabs::-webkit-scrollbar-thumb:hover {
    background-color: #a0aec0;
}
.results-button { background: transparent; border-radius: 9999px; border: none; padding: 10px 20px; display: flex; align-items: center; gap: 10px; color: #111827; font-weight: 700; white-space: nowrap; box-shadow: none; height: 40px;  white-space: nowrap; /* optional: prevents wrapping */ }
.results-button .status-indicator {
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}
    .results-button .number-results { font-size: 28px; font-weight: 900; color: /*#111827*/ #3455ff; margin-right: 0; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35); }
    .results-button .results-text { font-size: 16px; font-weight: 700; color: /*#374151*/ #3455ff; white-space: nowrap; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); }
.go-button-results {
    background: linear-gradient(to bottom, #3b82f6, #2563eb);
    border-radius: 30px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s;
}
.go-button-results:hover {
    opacity: 0.9;
    text-decoration: none;
    color: white;
}
.go-button-results .go-arrow-icon {
    font-size: 18px;
    color: #d1d5db;
}
.results-inventory-buttons .data-filter-reset {
    height: 50px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
}
.search-dealer-div { width: 335px; }
.get-qoute-btn { 
    background: linear-gradient(to right, #3455ff, #00CED1);
    width: 90%; 
    height: 48px;
    box-shadow: 0 4px 15px rgba(52, 85, 255, 0.4), 0 0 20px rgba(0, 206, 209, 0.3);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}
.get-qoute-btn:hover {
    box-shadow: 0 6px 20px rgba(52, 85, 255, 0.5), 0 0 25px rgba(0, 206, 209, 0.4);
}
.go-search { height: 48px; width: 259px; color: #3455ff; border: 1px solid #3455ff; }
.clear-button { height: 44px; width: 131px; color: #3455ff; margin-right: 40px; display: none; }
.select-dealer-btn { width: 250px; height: 44px; background: #f9fbff; border: 1px solid #BBCAEB; position: relative; }
.select-dealer-btn .blue-circle-dealer { right: 40px; top: 50%; transform: translateY(-50%); }
.user-photo { width: 44px; height: 44px; background: grey; color: white; display: flex; justify-content: center; align-items: center; }
.predict-button { border: none; font-size: 10px; cursor: pointer; background: #237FFF; width: 100%; color: white; position: absolute; right: 7px; width: 40px; height: 48px; margin: auto; display: flex; align-items: center; justify-content: center; width: 60px; height: 33px; border-radius: 12px; }
button, input, select, optgroup, textarea, ::file-selector-button { color: black; }
.sdi-box { display: none; }
.dd-box { display: none; }
.search-dealer-inv { display: none; }
.remove-desktop { display: none; }
.desking-logo-mobile { display: none;}
.mobile-logo-area { display: none; }
.badges-col-2 .data-filter-reset { display: none; }
#options-list .feature-filter-reset { display: none; }
.white-divider { display: none; }
.scale-site { transform: scale(0.9); transform-origin: top; }
.font-size-list { font-size: 16px; }
.move-filter-btn { display: none; }
.hidden-section { display: none !important; }
.direct-desk-mobile-mini { width: 100%; width: 50%; margin: auto; margin-top: 30px; }
.column-header-new { justify-content: end !important;}
@media (max-width: 1200px) { .get-qoute-btn { width: 80%; }
    .toggle-div { gap: 0;}
    .predict-button { width: 40px; }
    #vin-msrp { padding: 0 12px; }
    .badges-col-1 { flex-direction: row; align-items: center; margin-top: 20px; overflow-x: auto; flex-wrap: nowrap; }
    .margin-mobile-go { margin-top: 0px; }
    .badges-col-1 .c { gap: 10px; flex-wrap: nowrap; }
}
@media (max-width: 800px) { /* .top-container { display: none; }*/ .move-toggles-mobile { margin-top: 25px; }
    .desking-logo { display: none; }
    .header-column-mobile { display: none; }
    .mobile-logo-area { display: flex; }
    .mobile-header-style { background: #3455ff; }
    .remove-mobile { display: none}
    .user-photo { margin-right: 0px; }
    .header-section { align-items: center; gap: 10px; height: 68px; border-radius: 10px; margin-right: 10px;   }
    .logout-topnav { margin-left: 10px; margin-right: 10px; cursor: pointer; text-decoration: none; display: flex; align-items: center; }
    .logout-topnav:hover { opacity: 0.8; }
    .tablet-search { background: white; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
    .grid-item-b { width: 100%; }
    .select-dealer-btn { width: 363px; }
    .flex-col-mobile { flex-direction: column; }
    .white-divider { display: flex;}
    .grid-item-d { display: none; background: none; }
    .search-dealer-inv { display: none; }
    .sd-flex { display: flex; width: 100%; margin: auto; margin-top: 20px; }
    .sdi-box { display: flex; margin-top: 20px; width: 440px; margin: auto; margin-top: 20px; }
    .dd-box { display: flex; width: 440px; margin: auto; margin-top: 20px; }
    .move-select-dealer-mobile { justify-content: center; display: flex;  }
    .option-list-text { display: flex; }
    .start-page-div { display: none;  }
    .start-page-col-1 { display: none; }
    .show-start-page { display: flex; }
    #filters { display: none; }
    .move-zip-mobile-2 .zip-code-div:last-child { display: none; }
    #options-list { display: none; margin-top: 20px; }
    .number-inner-div { display: none; }
    .browse-div { position: relative; margin-bottom: 0px;  }
    .feature-filter-reset { display: none; }
    .data-filter-reset { display: none; }
    .budget-filter-reset { display: none; }
    .browse-div .go-button { display: none; }
    .sbf-div .go-button { display: none; }
    .budget-div .go-button { display: none; }
    .big-flex { display: flex !important;  }
    .sbf-div { position: relative; margin-bottom: 0px;  }
    .budget-div { position: relative; margin-bottom: 0px; }
    .search-database { padding-bottom: revert-layer; }
    .direct-arrow { display: flex; color: #25293A; align-items: center; cursor: pointer; position: absolute; right: 20px; /*top: 20px;*/ width: 32px; height: 32px; border-radius: 100%; background: #E9F2FF; justify-content: center; }
    .search-dealer-btn { padding: 7px; cursor: pointer; }
    .badges-col-2 { margin-top: 20px; }
    .start-page-col-1 { width: 100%;}
    .show-now { display: flex !important; }
   
    .settings-dropdown { overflow-y: auto; overflow-x: hidden; border: solid 1px #d6d6d6; top: 85px; max-height: calc(100vh - 95px); right: 0; left: 0; margin: auto; width: 100% !important; position: fixed; z-index: 100001; background: white; border-radius: 10px; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
    .settings-dropdown .settings-menu { width: 100% !important; }
    .settings-dropdown.show-now { display: flex !important; flex-direction: column; }
    .settings-dropdown-close { position: absolute; top: 12px; right: 12px; z-index: 1; background: transparent; border: none; cursor: pointer; padding: 4px; color: #374151; border-radius: 6px; }
    .settings-dropdown-close:hover { background: #f3f4f6; color: #111; }
    .settings-dropdown-close .material-symbols-outlined { font-size: 24px; }
    .desking-logo-mobile { text-decoration: none; color: var(--accent-btn-color); cursor: pointer; display: flex; height: auto; width: 175px; padding: 10px 15px; margin-left: 0px; justify-content: center; }
    .desking-logo-mobile { text-decoration: none; color: var(--accent-btn-color); cursor: pointer; display: flex; height: auto; width: 175px; padding: 10px 15px; margin-left: 0px; justify-content: center; }
  }
@media (max-width: 500px) {
    .data-filter-reset { display: none; }
    .results-button { position: absolute; top: 14px; left: 30%; display: none; }
    .zip-code-div { justify-content: center;}
    .results-inventory-buttons { position: inherit; }
    results-go-zip-mobile { position: relative; }
    #main { overflow: auto; }
    #selected-filters-box { margin-left: 0px; justify-content: center; }
    .left-grid-div { margin-bottom: 15px; width: 100% }
    .icon-filter-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .dropdown-btn-cd { -webkit-appearance: none; height: 44px; width: 100%; text-align: center; display: flex; justify-content: center; padding-left: 0px;}
    select { text-align-last: center; color: black; }
    #vin-msrp .fields input { text-align: center; margin-right: 0px; /*padding-left: 20px;*/}
    .input-div-container input { padding-left:0px;}
    .new-grid-container { grid-template-columns: 100%; /* grid-template-rows: auto auto; */ grid-template-areas:
            "sidebar2 "
            "sidebar3"
             "main"; }
    .grid-item-e { height: 100%; }
    .grid-item-b { overflow: initial; height: 100%; padding-bottom: 40px; width: 100%; }
    .search-database { flex-direction:column;}
    .grid-menu { justify-content: center;}
    .drop-down-div .div-direct-desk { margin-bottom: 10px; width: 100%; justify-content: center; }
    .input-div-container { width: 100%; }
    .filters-Column { flex-direction: column; }
    .filter { width: 100%; margin-bottom: 10px; }
    .number-input-container { flex-direction: column; width: 100%; padding-left: 0px;  padding-top: 0px;}
    .number-inner { flex-direction: column; }
    .number-input-divs { display: flex; flex-direction: column; }
    .sbf-container { flex-direction: column; padding: 20px 0px 23px 0px; padding-top: 0px; }
    .sbf-div { justify-content: start; height: 60px; position: relative; height: 75px; }
    .move-style-here-drive { width: 100%; margin-bottom: 0px; }
    .move-style-here { width: 100%; margin-bottom: 0px; }
    .feature-top-input { width: 100%; margin-bottom: 10px; }
    .middle-input { width: 100%; }
    .col-2-btns-dd { width: 100%; }
    .input-wrapper { width: 100%; }
    .options-list-exterior { max-width: 100%; }
    .col-2-btns-db { width: 100%; }
    #mobile-header { display: none; }
    .input-wrapper input { width: 100%; }
    .database-border { padding: 0px 10px 23px 10px; padding-bottom: 0px; padding: 0px 0px 0px 0px; }
    .start-page-col-1 { padding-top: 0px; padding-bottom: 0px; border-bottom: 0; margin-top: 0px; height:fit-content; border-radius: 15px;  }
    .top-container { margin-top: 0px; width: 100%; position: relative; }
    #free-text { margin-right: 0px; }
    #free-text-w > #free-text { margin-right: 0px; }
    .start-page-col-2 { gap: 15px; }
    .move-drop-box { margin: 0px; margin-top: 10px; }
    .clear-filters-container { padding-right: 0px; }
    .badges-col-1 { margin: 0px; margin-top: 10px; }
    .browse-div { display: flex; justify-content: space-between; background: white; text-align: center; border-radius: 7px; align-items: normal; margin-bottom: 0px; cursor: pointer; height: 60px; position: relative; height: 75px; }
    .direct-desk-flex { display: none; background: #ededed; text-align: center; border-radius: 7px; align-items: normal; margin-bottom: 0px; position: relative; cursor: pointer; height: 60px; position: relative; width: 100%; }
    .browse-arrow { display: flex; color: #25293A; align-items: center; cursor: pointer; position: absolute; right: 10px; top: 20px; }
    .browse-arrow-budget { display: flex; color: #25293A; align-items: center; cursor: pointer; position:absolute; right: 10px; top: 20px; }
    .feature-arrow { display: flex; color: #25293A; align-items: center; cursor: pointer; position: absolute; right: 10px; top: 20px; }
    .option-list-text { width: 100%; /*margin-bottom: 7px;*/ }
    .sbf-div { display: flex; justify-content: space-between; background: white; text-align: center; border-radius: 7px; align-items: normal; cursor: pointer; margin-bottom: 0px; padding-bottom: 0px; }
    .budget-div { display: flex; justify-content: space-between; background: white; height: 75px; text-align: center; border-radius: 7px; align-items: normal; cursor: pointer; position: relative; }
    #options-list { display: none; }
    .number-inner-div { display: none; }
    #filters { display: none; margin-top: 10px; }
    .clear-filters-div { margin-left: 0px }
    .grid-item-b { display: none; }
    .start-page-col-2 { padding-bottom: 10px; }
    .bottom-startbtn-div { justify-content: center; margin-left: 15px; align-self: end; }
    .list-search-div { display: flex !important; border: 1px solid #c8c8c8; border-bottom: 0; border-top: 0; background: white; background: white; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-top: 0px; border: none;} 
    .flip-this-arrow { transform: rotate(180deg); }
    .desking-logo img { width: 75%;}
    .desking-logo { justify-content: center; }
    #vin-msrp .fields input { height: 44px; }
    #vin-msrp .fields > .flex-row { flex-direction: column; }
    #vin-msrp > .fields { display: none; }
    #vin-input::placeholder { color: black; }
    #vin-input:-webkit-autofill::placeholder { color: black; }
    #vinTrimBtn { margin-bottom: 15px; }
    .move-style-here, .move-passengers-here { width: 100%; }
    .direct-arrow { display: flex; color: #25293A; align-items: center; cursor: pointer; position: absolute; right: 20px; top: 20px; width: 32px; height: 32px; border-radius: 100%; background: #E9F2FF; justify-content: center; }
    .drop-style-btn { margin-top: 15px; }
    .remove-filter-btn { height: 20px; }
    .filter-state-name { font-size: 12px; }
    #free-text-w { margin-bottom: 0;}
    .drop-box-dealer { border: none; border-bottom: 0px; }
        #dealers-search-new-btn .dealers-input-button { border-bottom: 0px;}
        #dealers-search-new-btn #dealers-input-new { border-bottom: 0px; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; border-top-right-radius: 10px; border-bottom-left-radius: 0px; }
/*    #dealers-search-new-btn { border: solid 1px black; border-radius: 10px; }*/
    .dealers-input-button { border-top-left-radius: 10px; border-bottom-left-radius: 10px; height: 50px; }
    #dealers-input-new { height: 50px; }
    .drop-box-dealer { padding-bottom: 15px; }
    .clear-filters-container { margin-top: 0px; }
    .bottom-startbtn-div { width: 100%; margin-top: 10px; }
    .input-div-container span { top: 9px; }
    .start-btn > img { margin-bottom: 10px; margin-top: 10px; }
    .drop-box { position: initial; margin-top: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; }
    .move-style-here .filter, .move-passengers-here .filter { flex-direction: column;}
    #vin-msrp { display: flex; flex-direction: column; background: #f4f9ff; }
    .filters-Column { width: 100%; }
    .number-input-container { padding-right: 0px; padding-bottom: 0; }
    .arrow-dealer { display: flex; }
    .add-search { width: 100%; }
    #filters-gv-container { display: none; }
    .grid-item-e { position: absolute; height: 1px; top: 0;}
    .left-grid-div:last-child { display: none; }
    #drop-settings:first-child { display: none;}
    #drop-settings { position: static; }
    .add-hamburger { position:absolute; width: 100%;  display: flex; justify-content: end; top: 0;}
    .settings-dropdown { top: 50px; right: 17px; }
    .header-mobile { display: flex; flex-direction: column; height: fit-content; padding: 10px 7px; }
    .header-column-mobile { flex-direction: column-reverse;}
    .top-container { flex-direction: column; gap: 10px; }
    .remove-mobile { display: none; }
    .login-zip-mobile { display: flex; }

    .grid-item-b { padding: 20px 0px }
    #free-text-w { 
        margin: 0; 
        justify-content: center; 
        width: 100%;
        background: #ffffff;
        border-radius: 9999px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
        #free-text-w > #free-text { 
            width: 100%; 
            background: transparent; 
            border-radius: 9999px;
            padding-left: 48px;
        }
    .search-input-button { 
        background: transparent; 
        border-radius: 0;
        position: absolute;
        left: 0;
    }
    .select-dealer-btn { width: 100%; margin-top: 15px; background: white; }
    .results-go-zip-mobile { height: 68px; background: white; display: flex; margin: 15px 0; border-radius: 10px; align-items: center; justify-content: space-between; padding-left: 6px; padding-right: 6px; margin-bottom: 0px; }
    .results-go-zip-mobile .remove-desktop { display: block; }
    .results-go-zip-mobile .move-go-mobile { display: flex; align-items: center; }
    .results-go-zip-mobile .move-go-mobile .go-button-results { display: flex; padding: 8px 14px; font-size: 14px; }
    .results-go-zip-mobile .move-results-mobile .results-inventory-buttons { display: flex; align-items: center; gap: 0; width: auto; justify-content: flex-start; }
    .results-go-zip-mobile .move-results-mobile .results-inventory-buttons .results-button { padding: 5px 8px; display: flex !important; position: static; flex-direction: column; align-items: flex-start; gap: 0; }
    .results-go-zip-mobile .move-results-mobile .results-inventory-buttons .results-button .status-indicator { display: none; }
    .results-go-zip-mobile .move-results-mobile .results-inventory-buttons .results-button .number-results { font-size: 16px; color: #3455FF; font-weight: 700; margin-right: 0; }
    .results-go-zip-mobile .move-results-mobile .results-inventory-buttons .results-button .results-text { font-size: 12px; white-space: nowrap; }
    .results-go-zip-mobile .move-results-mobile .results-inventory-buttons > .flex { display: none; }
    .number-container { background: white; width: 107px; flex-direction: column; align-items: flex-start; }
    .zip-code-div:last-child { display: none; }
    .inventoray-text { display: block; }

    .results-text { font-size: 12px; }
    .number-results { font-size: 16px; }
    .button-header { display: none; }
    .hide-name-mobile { display: none; }
    .direct-desk-mobile { width: 100%; }
    .header-column-mobile { display: none;}
    #main { overflow: hidden; }
    .badges-col-1 { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; flex-direction: row;}
        .badges-col-1::-webkit-scrollbar { height: 2px; }
    .mobile-header-style { background: #3455ff;  }
    .desking-logo { display: none; }
    .desking-logo-mobile { text-decoration: none; color: var(--accent-btn-color); cursor: pointer; display: flex; height: auto; width: 175px; padding: 10px 15px; margin-left: 0px; justify-content: center; }
    .mobile-logo-area { display: flex; }
    .user-photo { width: 32px; height: 32px; }
    .browse-div .go-button { display: none; }
    .sbf-div .go-button { display: none; }
    .budget-div .go-button { display: none; }
    .drop-down-div { display: block; }
    .grid-menu { background: none; }
    .sbf-container { background: white; padding-bottom: 0px; }
    .number-input-container { background: white; }
    .flex-col-mobile { flex-direction: column; margin: 0 10px; }
    .add-hamburger { display: none; }
    .search-database { background: none; }
    .option-list-text { display: flex; padding-left: 20px;  align-items: center; }
    .start-page-col-1 { display: none; }
    .start-page-col-1.direct-desk-mobile-mini { display: flex; }
    .search-database { background: white;}
    .start-page-div { display: none;}
    .show-start-page { display: flex;}
    .search-dealer-btn { padding: 0 5px; cursor: pointer; }
    .search-dealer-inv { display: none; }
    .grid-item-d { display: none; background: none; }
    .sd-flex { display: flex; width: 100%; margin: auto; margin-bottom: 15px; }
    .sdi-box { display: flex; margin-top: 20px; width: 100%; margin: auto; margin-top: 20px; }
    .dd-box { display: flex; width: 100%; margin: auto; margin-top: 20px; }
    #filters { padding: 0 15px; /*display: flex; justify-content: center;*/ }
    #options-list { padding: 0 15px; }
    .data-filter-desktop { display: none; }
    .margin-for-mobile { margin-bottom: 25px; }
    .search-dealer-div { width: 95vw;}
    .badges-col-2 .data-filter-reset { display: flex; }
    #options-list .feature-filter-reset { display: flex; }
    .budget-div { margin-bottom: 0px; }
    .move-search-dealer { display: none; }
    .i > label { gap: 12px; }
    .arrow-dealer { display: none; }
    .move-filter-btn { display: flex; justify-content: center; margin-top: 15px; }
    .move-select-dealer-mobile { position: relative; }
    .blue-circle-dealer { right: 15px; top: 15px; }
    .clear-button { margin-right: 0px;}
    .data-filter-mobile { display: flex; margin: 0 auto; margin-bottom: 10px; width: 149px; justify-content: space-around; }
    .settings-dropdown { top: 0px; height: 100vh; border-radius: 0; }
}

/* Mobile Clear Filters Row - hidden on desktop */
.mobile-clear-filters-row {
    display: none;
}

/* ============================================================
   HeaderBar Mobile Overrides (neutralize legacy mobile header styles)
   When using the new HeaderBar partial, these rules ensure the
   headerbar.css mobile styles take precedence.
   ============================================================ */
@media (max-width: 500px) {
    /* Override legacy mobile header styles when using HeaderBar */
    body.use-headerbar .mobile-logo-area { display: none !important; }
    body.use-headerbar .header-column-mobile { display: none !important; }
    body.use-headerbar .header-mobile {
        flex-direction: row !important;
        background: #ffffff !important;
    }
    body.use-headerbar .mobile-header-style { background: #ffffff !important; }
    body.use-headerbar .desking-logo { display: flex !important; }
    body.use-headerbar .desking-logo-mobile { display: none !important; }
    
    /* Hide the header's Clear Filters button - we use the mobile row one instead */
    body.use-headerbar header .filters-clear {
        display: none !important;
    }
    
    /* Hide the old move-filter-btn container on mobile */
    body.use-headerbar .move-filter-btn {
        display: none !important;
    }
    
    /* Show and style the mobile Clear Filters row (positioned after search bar) */
    body.use-headerbar .mobile-clear-filters-row {
        display: flex !important;
        justify-content: center;
        margin: 16px auto;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }
    
    body.use-headerbar .mobile-clear-filters-row .filters-clear {
        display: flex !important;
        width: 50vw;
    }
}

/* Selling Price Input Container */
.selling-price-container {
    border: none !important;
    border-radius: 12px;
    padding: 0 !important;
    overflow: hidden;
    background: white !important;
    box-shadow: none !important;
}

.selling-price-container .selling-price-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Dollar Icon Wrapper */
.selling-price-container .dollar-icon-wrapper {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-left: 14px;
    padding-right: 10px;
}

.selling-price-container .dollar-icon {
    font-size: 16px;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: static !important;
    top: auto !important;
    left: auto !important;
    background: white;
    font-weight: 400;
}

/* Selling Price Input Field */
.selling-price-container .selling-price-input-field {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 12px !important;
    padding-left: 0px !important;
    height: 100%;
    background: transparent;
    color: #1f2937;
    font-size: 16px;
    min-width: 0;
}

.selling-price-container .selling-price-input-field::placeholder {
    color: #9ca3af;
}

#selling-price { 
    border: none !important; 
}

/* Cost Calculator Button - Takes up ~1/3 width */
.selling-price-container .cost-calculator-button { flex-shrink: 0; height: 100%; width: 20%; max-width: 120px; border: none; border-left: none; border-radius: 0 12px 12px 0; background: linear-gradient(90deg, #2563ff 0%, #00c2ff 100%); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all 0.2s ease; margin-left: 0; position: static !important; top: auto !important; right: auto !important; transform: none !important; }

    .selling-price-container .cost-calculator-button:hover { background: linear-gradient(90deg, #2563ff 0%, #00c2ff 100%); opacity: 0.9; }

.selling-price-container .cost-calculator-button:active {
    transform: scale(0.98);
}

.selling-price-container .cost-calculator-button .material-symbols-outlined {
    color: white;
    font-size: 22px;
    font-weight: 300;
    position: static !important;
}

/* Cost Calculator Modal */
.cost-calculator-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.cost-calculator-modal.active {
    display: flex;
}

.cost-calculator-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.cost-calculator-content {
    position: relative;
    z-index: 10001;
    /* Slightly smaller overall modal */
    max-width: 620px;
    width: 88%;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cost Helper Styles */
.cost-helper {
    /* Compact inner panel */
    max-width: 600px;
    margin: 6px auto;
    padding: 16px 18px 20px;
    border-radius: 12px;
    background: #f6f9ff;
    box-shadow: 0 8px 22px rgba(15, 35, 95, 0.10);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif;
    color: #1f2933;
    overflow: visible;
}

.helper-title-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.helper-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #1e3a8a;
}

.cost-calculator-close-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: color 0.2s ease;
    border-radius: 4px;
}

.cost-calculator-close-btn:hover {
    color: #1f2937;
    background: rgba(0, 0, 0, 0.05);
}

.cost-calculator-close-btn .material-symbols-outlined {
    font-size: 24px;
}

.section-caption {
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 6px;
}

.center-text {
    text-align: center;
}

.caption-above-adjust {
    margin-top: 10px;
    margin-bottom: 12px;
}

/* Shared pill styling */
.pill {
    display: inline-flex;
    align-items: center;
    border-radius: 14px;
    /* Compact pill padding */
    padding: 6px 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 35, 95, 0.12);
    overflow: visible;
}

/* Base selection pills (MSRP / Invoice) */
.base-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: visible;
    /* Keep pills on a single row */
    flex-wrap: nowrap;
}

.pill-base {
    /* Narrower pills */
    min-width: 260px;
    width: auto;
}

.base-option {
    position: relative;
    cursor: pointer;
    /* Slightly smaller text */
    font-size: 18px;
    color: #4a5368;
}

.base-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.base-option span {
    width: 100%;
    text-align: center;
}

.base-option.is-active,
.base-option:hover {
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.30);
   /* border: 1px solid #4082f6;*/
    color: #1e3a8a;
}

/* Base input option styling */
.base-input-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    max-width: 100%;
}

.base-input-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

.base-input-label .base-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    width: 0;
    height: 0;
}

.base-radio-custom {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: white;
}

.base-radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3455ff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.base-input-label .base-radio:checked ~ .base-radio-custom {
    border-color: #3455ff;
}

.base-input-label .base-radio:checked ~ .base-radio-custom .base-radio-dot {
    opacity: 1;
}

.base-input-label .base-label-text {
    font-size: 14px;
    font-weight: 500;
}

.base-input-value {
    flex: 1;
    border: 1px solid #e5e7eb;
    background: white;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: #1e3a8a;
    outline: none;
    cursor: text;
    /* Let the input shrink naturally so text isn't visually clipped */
    min-width: 0;
    width: 140px;
    max-width: 180px;
    height: 40px;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: 4px;
    pointer-events: auto;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

.base-input-value:focus {
    outline: 2px solid #4082f6;
    outline-offset: -2px;
    border-color: #4082f6;
    background: white;
}

.base-input-value:disabled,
.base-input-value[readonly] {
    background: #f3f4f6;
    cursor: not-allowed;
}

.base-input-value.number-input {
    font-family: inherit;
}

.invoice-base-option {
    padding-right: 4px;
    /* Needed so Predict button can be positioned in the top-right corner */
    position: relative;
}

.calc-predict-button {
    /* Float on top-right of the Invoice input, inside the pill */
    position: absolute;
    background: linear-gradient(90deg, #2563ff 0%, #00c2ff 100%);
    color: white;
    border: none;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 10px;
    flex-shrink: 0;
    line-height: 1;
}

.calc-predict-button:hover {
    opacity: 0.9;
}

.calc-predict-button:active {
    transform: scale(0.98);
}

.calc-predict-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* OR wrappers */
.or-wrapper {
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.or-text {
    font-size: 22px;
    font-weight: 600;
    color: #6b7280;
    opacity: 0.8;
}

/* Adjustment row (%, $) */
.adjustment-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 16px;
    /* Keep % and $ cards on a single row */
    flex-wrap: nowrap;
}

.adjustment-col {
    display: flex;
    justify-content: center;
}

.pill-input {
    width: auto;
    max-width: 220px;
    gap: 4px;
    display: flex;
    align-items: center;
    min-width: 0;
}

.calc-sign-toggle-btn {
    background: #f0f9ff;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-right: 8px;
}

.calc-sign-toggle-btn:hover {
    background-color: #e0f2fe;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.calc-sign-toggle-btn:active {
    transform: scale(0.95);
}

.calc-sign-indicator {
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
    line-height: 1;
    user-select: none;
}

.calc-sign-toggle-btn.negative {
    background-color: #fef2f2;
    border-color: #fca5a5;
}

.calc-sign-toggle-btn.negative .calc-sign-indicator {
    color: #ef4444;
}

.calc-sign-toggle-btn.positive {
    background-color: #f0fdf4;
    border-color: #86efac;
}

.calc-sign-toggle-btn.positive .calc-sign-indicator {
    color: #10b981;
}

.symbol {
    font-size: 24px;
    font-weight: 700;
    color: #1e3a8a;
}

.pill-input input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px;
    color: #1f2933;
    width: auto;
    min-width: 60px;
    flex: 1;
}

.percent-input {
    min-width: 50px;
    max-width: 120px;
}

.amount-input {
    min-width: 70px;
    max-width: 150px;
}

/* Bottom row: result + GO CTA */
.bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

.result-pill {
    min-width: 220px;
    gap: 6px;
    background: radial-gradient(circle at top left, #4f8bff, #2254d0);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    padding: 10px 18px;
}

.result-prefix {
    font-size: 24px;
}

.result-value {
    font-size: 26px;
    font-weight: 600;
}

/* GO CTA */
.go-btn {
    padding: 10px 32px;
    border-radius: 12px;
    border: none;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #16a34a;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
}

.go-btn:hover {
    background: #15803d;
    box-shadow: 0 5px 12px rgba(16, 185, 129, 0.45);
    transform: translateY(-1px);
}

.go-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.30);
}

.deal-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: end;
}
.min-dealtype { width: 100%; display: flex; align-items: center; justify-content: space-around; }
.deal-select label { font-size: 13px; font-weight: 600; color: #374151; /* Dark gray */ margin-bottom: 8px; display: flex; align-items: center; gap: 4px; display: none; }

.deal-select-input {
    min-width: 150px;
    width: 100%;
    height: 45px;
    border-radius: 9999px; /* Very rounded, pill-like */
    border: 1px solid #bae6fd; /* Light blue border */
    background-color: #ffffff !important; /* White background */
    padding: 0 16px;
    padding-right: 40px; /* Space for dropdown arrow */
    font-size: 14px;
    color: #6b7280;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
    margin-bottom: 12px;
}

.deal-select-input:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Cost Adjustment Helper – mobile stacking */
@media (max-width: 600px) {
    .base-toggle {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 6px;
    }
    .adjustment-row {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 6px;
    }
    .pill-base {
        min-width: unset;
        width: 100%;
    }
    .pill-input {
        max-width: 100%;
    }
    .or-wrapper {
        min-width: unset;
    }
    .bottom-row {
        flex-direction: column;
        gap: 10px;
    }
    .result-pill {
        min-width: unset;
        width: 100%;
        justify-content: center;
    }
    .go-btn {
        width: 100%;
    }
}