#filter-lightbox .lightbox-content #keywords-section .searchoption-keyword-filters .keyword-filter-tag .keyword-remove {
  border-radius: 5px;
  border: none;
  cursor: pointer;
  text-transform: initial;
  margin-top: 0px;
  padding-top: 8px;
  flex: 0 0 auto;
  text-shadow: none;
  position: relative;
}


#filter-lightbox .lightbox-content #keywords-section .searchoption-keyword-filters .keyword-filter-tag .keyword-remove {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px 6px 10px;
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: none;
}

#filter-lightbox .lightbox-content #keywords-section .searchoption-keyword-filters .keyword-filter-tag {
  float: left;
  padding-right: 3px;
}


#filter-lightbox .lightbox-content #keywords-section .searchoption-keyword-filters .keyword-filter-tag .keyword-remove:hover {
  background-color: #34495e;
}

#filter-lightbox .lightbox-content #keywords-section .searchoption-keyword-filters .keyword-filter-tag .keyword-remove .filter-close {
	margin-left:5px;
}


#filter-lightbox .lightbox-content #keywords-section .searchoption-keyword-filters .keyword-filter-tag .keyword-remove .filter-close:hover {
  color: #FF0707;
}


#filter-lightbox .lightbox-container.open .lightbox-content #keywords-section.filter-group .filter-group-content.open {
	padding-bottom: 0;
  padding-top: 0;
}

#filter-lightbox .lightbox-container.open .lightbox-content #keywords-section.filter-group .filter-group-toggle {
	padding-bottom: 0;
}


#filter-lightbox .lightbox-container.open .lightbox-content #keywords-section.filter-group .filter-group-content.open .lb-option-row .lb-option {
	
}

#filter-lightbox .lightbox-container.open .lightbox-content #keywords-section.filter-group .filter-group-content.open .lb-option-row .lb-option.valopt label.sort-option input {
	font-size: 1em;
}




.main-content #search-wrapper .result-container #results .results-grid-wrapper .vehicle-grant {
	font-size: 0.8em;
  margin-left: 10px;
  margin-top: 10px;
}



#results-section .result-item .item-detail .item-detail-content .item-detail-top .highlight-text.campaign-vehicle {
	background-color: #A03C28 !important;
	color: #FFFFFF !important;
	/*white-space: initial !important;*/
	padding-top: 5px;
  padding-left: 8px !important;
  padding-bottom: 3px;
  padding-right: 5px !important;
  width: 100%;
  text-align: center;
  margin-bottom: 0 !important;
  font-size: 0.65em !important;
}

#results-section .result-item .item-detail .item-detail-content .item-detail-top .campterm {
	font-size: 0.5em;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  text-align: center;
}

#results-section .result-item .item-detail .highlight-text {
	padding-top: 5px;
  padding-left: 8px !important;
  padding-bottom: 3px;
  padding-right: 5px !important;
  width: 100%;
  margin-bottom: 0 !important;
  text-align: center;
  text-transform: uppercase;
}


.image-preview {
    touch-action: pan-y !important;
}
.prev-arrow, .next-arrow, .image-overlay-button {
    pointer-events: auto !important;
}


#filter-lightbox.lightbox .lightbox-container.open .lightbox-header button.close-button {top: -10px !important;}


#results-section .result-item .item-detail .item-detail-content .item-detail-bottom.new .vehicle-details .vehicle-row.retail {
	margin-bottom: 0px;
}

#results-section .result-item .item-detail .item-detail-content .item-detail-bottom.new .vehicle-details .vehicle-row .vehicle-cell p.totalprice {
	padding-left: 0px;
}


#results-section .result-item .item-detail .item-detail-content .item-detail-bottom.new .vehicle-details .vehicle-row.retail .vehicle-cell p.retailprice {
	margin-top: -35px !important;
}

#results-section .result-item .item-detail .item-detail-content .item-detail-bottom.new .vehicle-details .vehicle-row.retail {
	margin-bottom: -9px;
}

#results-section .result-item .item-detail .item-detail-content .item-detail-bottom.new .vehicle-details .vehicle-row.retail .vehicle-cell p.retailprice .priceblue.strike-center {
	font-size: 20px;
}


/* Hide deposit attributes since Autotrder and Codewaevers finance does not match */

#filter-lightbox #finance-section .filter-group-content #finance-deposit-term {
	display:none !important;
}



#search-wrapper .result-container #results .results-grid-wrapper section#results-section .result-item,
#search-wrapper .result-container #results .results-grid-wrapper section#results-section .result-item .item-detail,
#search-wrapper .result-container #results .results-grid-wrapper section#results-section .result-item .item-detail .item-detail-content {
	overflow: visible;
}

#search-wrapper .result-container #results #results-section .result-item .item-detail .attention-grabber a button.in-stock::after {
/*margin-bottom: -20px !important;*/
overflow: visible;
}

#search-wrapper .result-container #results .results-grid-wrapper section#results-section .result-item::after {
	width: 83px;
  height: 14px;
  line-height: 1.155em;
  background: rgba(17, 17, 17, 0.45);
  border-top-left-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 0;
}
#search-wrapper .result-container #results .results-grid-wrapper section#results-section .vehicle-cell.reserve button.reserve-button::after {
	z-index: 9999;
}

/* Hide for new only */
.image-preview.new .carousel-dots,
.image-preview.new .prev-arrow,
.image-preview.new .next-arrow {
	display:none !important;
}

.result-container #results .results-grid-wrapper #results-section .vehicle-details .vehicle-row .vehicle-cell .branches {
  font-size: 0.95em;
  margin-bottom: 2px;
}

.result-container #results .results-grid-wrapper #results-section .vehicle-details .vehicle-row .vehicle-cell .vehicle-cell.heart button.save-overlay.saved {
	margin-right: -10px !important;
}


.result-container #results .results-grid-wrapper #results-section .vehicle-details .vehicle-cell .totalprice {
	margin-top: -4px;
}

.main-content #search-wrapper #results #results-section .image-preview .prev-arrow,
.main-content #search-wrapper #results #results-section .image-preview .next-arrow {
	scale: 60% 50%;
}

#search-wrapper .result-container #results #results-section .result-item .image-preview.new .blurred-background {
	opacity: 0;
}

#search-wrapper .result-container #results #results-section .result-item .image-preview.new .carousel-dots .carousel-dot {
	background: rgba(0, 0, 0, 0.5);
}

#search-wrapper .result-container #results #results-section .result-item .image-preview.new .carousel-dots .carousel-dot.active {
	background: rgb(202, 118, 118);
}

#search-wrapper .result-container #results #results-section .result-item .item-detail .item-detail-content .attention-grabber {
  font-size: 16px;
  margin-top: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

#search-wrapper .result-container #results #results-section .result-item .item-detail .item-detail-content .attention-grabber button {
  font-size: 13px;
  padding: 5px 8px 3px 8px;
  border-radius: 5px;
  color: white;
  background-color: #3498db;
  border: none;
  cursor: initial;
	text-transform: initial;
  text-shadow: none;
  margin-top: 5px;
}

#search-wrapper .result-container #results #results-section .result-item .item-detail .attention-grabber a button.in-stock {
	cursor: pointer;
}




#carssearch .filter-section .filter-controls .filter-buttons button.filter-button.perm {
	background-color: #000000;
  color: #FFFFFF;
  box-shadow: none;
}
#carssearch .filter-section .filter-controls .filter-buttons button.filter-button.perm:hover {
  background-color: #34495e;
}

.main-content #search-wrapper #carssearch.disable-select .filter-section .totalresults-section .my-account-notification {
	margin-top: 10px;
  width: 100%;
  text-align: right;
  margin-right: 10px;
}

#carssearch .filter-section .totalresults-section button.save-search .save-text {
	text-transform: initial;
  text-shadow: none;
}


.lightbox-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black, matches .lightbox-backdrop */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1100; /* Above lightbox content (1000) but below potential modals */
    color: #fff; /* White text to contrast with background */
    pointer-events: auto; /* Blocks interactions */
    border-radius: 10px; /* Matches .lightbox-container */
}

.lightbox-loading-overlay .loading-spinner {
    border: 4px solid #f3f3f3; /* Light gray border */
    border-top: 4px solid #000; /* Black top border, matches button styles */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

.lightbox-loading-overlay p {
    font-size: 0.9em; /* Matches .lb-option font-size */
    color: #fff;
    margin: 0;
}

/* Disable interactions when loading */
.lightbox-container.loading .lightbox-content,
.lightbox-container.loading .lightbox-footer,
.lightbox-container.loading .lb-signin {
    pointer-events: none; /* Prevent interactions */
    opacity: 0.5; /* Visually indicate disabled state */
}

/* Keep header accessible (optional) */
.lightbox-container.loading .lightbox-header {
    pointer-events: auto; /* Allow closing the lightbox */
    opacity: 1; /* Keep header fully visible */
}

/* Animation for spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


#filter-lightbox #fueltype-section .lb-option-row,
#filter-lightbox #bodytype-section .lb-option-row,
#filter-lightbox #gearbox-section .lb-option-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#filter-lightbox .lb-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    font-size: 0.9em;
    color: #000;
    flex: 1;
    height: 40px; /* Maintain height for alignment */
}


#filter-lightbox #branch-section .lb-option-row,
#filter-lightbox #fueltype-section .lb-option-row,
#filter-lightbox #bodytype-section .lb-option.valopt,
#filter-lightbox #gearbox-section .lb-option.valopt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px; /* Space between count and checkbox */
}

#filter-lightbox #branch-section .facet-count,
#filter-lightbox #fueltype-section .facet-count,
#filter-lightbox #bodytype-section .facet-count,
#filter-lightbox #gearbox-section .facet-count {
    font-size: 1em;
    margin-right:5px;
    color: #666; /* Slightly lighter for distinction, adjust as needed */
    white-space: nowrap;
}



#filter-lightbox #sort-section .lb-option-row:hover .sort-option input[type="radio"] {
    box-shadow: 0px 0px 0px 1px inset;
    border-color: #333; /* Retains the darker border */
}

#filter-lightbox #branch-section .lb-option-row:hover .sort-option input[type="checkbox"],
#filter-lightbox #fueltype-section .lb-option-row:hover .sort-option input[type="checkbox"],
#filter-lightbox #bodytype-section .lb-option-row:hover .sort-option input[type="checkbox"],
#filter-lightbox #gearbox-section .lb-option-row:hover .sort-option input[type="checkbox"] {
    box-shadow: 0px 0px 0px 1px inset;
    border-color: #333; /* Retains the darker border */
}

#filter-lightbox .sort-option select:hover {
	box-shadow: 0px 0px 0px 1px inset;
}


/* Custom checkbox styling */
#filter-lightbox .sort-option input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 25px !important;
    height: 25px !important;
    border: 1px solid #000; /* Changed from #ccc to #000 */
    background-color: #fff;
    cursor: pointer;
    position: relative;
    margin-right: 8px !important;
    vertical-align: middle;
}

/* Style when checked - black highlight */
#filter-lightbox .sort-option input[type="checkbox"]:checked {
    border-color: #000;
    background-color: #000;
}

/* Add a checkmark */
#filter-lightbox .sort-option input[type="checkbox"]:checked::after {
    content: '\f00c'; /* Font Awesome Unicode for fa-check */
		font-family: 'Font Awesome 5 Free'; /* Adjust to your FA version */
		font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
}

/* Hover effect for better UX */
#filter-lightbox .sort-option input[type="checkbox"]:hover:not(:checked) {
    border-color: #333; /* Darker shade of black (e.g., dark gray) instead of #666 */
}

#filter-lightbox .lb-option-row {
    padding: 8px 0; /* Adjust row padding */
}


#filter-lightbox .keyword-button {
	text-shadow: none;
  color: white;
  width: 100%;
  cursor: default;
  margin-top: 0;
}

#filter-lightbox #keyword-but {
  background-color: #000;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
  border-radius: 5px;
  text-transform: initial;
}

#filter-lightbox #keyword-but:hover {
  background-color: #34495e !important;
}

#filter-lightbox #branch-section,
#filter-lightbox #fueltype-section,
#filter-lightbox #bodytype-section,
#filter-lightbox #gearbox-section {
    border-bottom: 1px solid rgb(222, 226, 230);
}

#filter-lightbox #fueltype-section .lb-option-row,
#filter-lightbox #bodytype-section .lb-option-row,
#filter-lightbox #gearbox-section .lb-option-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#filter-lightbox #fueltype-section .sort-option input[type="checkbox"],
#filter-lightbox #bodytype-section .sort-option input[type="checkbox"],
#filter-lightbox #gearbox-section .sort-option input[type="checkbox"] {
    margin-right: 5px;
}


/* Container for the term buttons */
#filter-lightbox #finance-section .finance-terms-row {
    display: flex;
    justify-content: center;
    gap: 10px; /* Consistent spacing between buttons, matching your existing gap */
    flex-wrap: nowrap; /* Keep buttons in a single row */
    padding: 5px 0; /* Match padding from .lb-option-row */
    padding-bottom: 15px;
}

/* Style each term option (label wrapping the radio input) */
#filter-lightbox #finance-section .term-option {
    display: inline-block; /* Inline-block to allow flex container to control layout */
}

/* Hide the default radio input */
#filter-lightbox #finance-section .term-option input[type="radio"] {
    display: none; /* Hide the radio input */
}

/* Style the visible button */
#filter-lightbox #finance-section .term-option .term-button {
    display: flex;
    align-items: center;
    justify-content: center;
		width: 99px;
 		height: 55px;
    background-color: #fff; /* White background */
    border: 1px solid #dee2e6; /* Black border, matching your .filter-button style */
    border-radius: 5px; /* Match your existing border-radius */
    font-size: 0.9em; /* Match .lb-option font-size */
    color: #757575; /* Match .lb-option color */
    cursor: pointer; /* Indicate clickability */
    transition: border-color 0.3s ease; /* Smooth transition for border color change */
}

/* Highlight the selected term button with a yellow border */
#filter-lightbox #finance-section .term-option input[type="radio"]:checked + .term-button {
    border-color: #000000; /* Yellow border for selected state, matching the image */
    border-width: 2px; /* Slightly thicker border for emphasis */
    font-weight: bold;
    color: #000;
}

/* Hover effect for term buttons */
#filter-lightbox #finance-section .term-option .term-button:hover {
    background-color: #f5f5f5; /* Light gray on hover, matching .lb-option-row hover */
}





#filter-lightbox .lb-option { padding-left: 5px; }

#filter-lightbox .lb-option.valopt {  padding-right: 5px; }

#filter-lightbox #mileage-section .year-selects,
#filter-lightbox #year-section .year-selects,
#filter-lightbox #price-section .price-selects,
#filter-lightbox #finance-section .price-selects {
    display: flex;
    justify-content: space-between; /* Selects side by side */
    gap: 10px; /* Space between min-price and max-price selects */
}


#filter-lightbox #mileage-section .lb-option-row,
#filter-lightbox #year-section .lb-option-row,
#filter-lightbox #price-section .lb-option-row,
#filter-lightbox #finance-section .lb-option-row {
    display: block; /* Remove flex to allow wrapping into new containers */
    flex: none; /* Override flex: 1 */
    min-width: unset; /* Remove min-width constraint */
}

#filter-lightbox #mileage-section .lb-option,
#filter-lightbox #year-section .lb-option,
#filter-lightbox #price-section .lb-option,
#filter-lightbox #finance-section .lb-option  {
    display: block; /* Simple block for labels */
    font-size: 0.9em;
    color: #000;
    white-space: nowrap;
    height: auto; /* Remove fixed height */
    flex: none; /* Override flex: 1 */
}

#filter-lightbox #mileage-section .lb-option.valopt,
#filter-lightbox #year-section .lb-option.valopt,
#filter-lightbox #price-section .lb-option.valopt,
#filter-lightbox #finance-section .lb-option.valopt {
    display: block; /* Block for select wrappers */
    width: 100%; /* Full width within .price-selects */
    justify-content: unset; /* Override flex-end */
}

#filter-lightbox #mileage-section .lb-option.valopt select,
#filter-lightbox #year-section .lb-option.valopt select,
#filter-lightbox #price-section .lb-option.valopt select {
    width: 100%; /* Full width of parent */
    max-width: none; /* Remove cap for flexibility */
}

/* Contract Hire (BCH/PCH) offer cards - button layout mirrors the manufacturer offers page (.mo-card-actions / manufacturerPickupBox-*) */
.result-item.ch-offer .item-detail-bottom.ch-actions {
    display: flex;
    gap: 8px;
    padding: 0 0 10px 0;
}
.result-item.ch-offer .ch-actions button {
    flex: 1;
    text-align: center;
    padding: 7px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    line-height: 1;
    text-transform: none !important;
    text-shadow: none;
    white-space: nowrap;
    box-sizing: border-box;
    max-width: 160px;
    border: 2px solid #111;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.result-item.ch-offer .ch-actions .ch-enquire {
    background: #fff;
    color: #111;
}
.result-item.ch-offer .ch-actions .ch-moreinfo {
    background: #111;
    color: #fff;
}
.result-item.ch-offer .ch-actions .ch-enquire:hover { background: #f0f0f0; }
.result-item.ch-offer .ch-actions .ch-moreinfo:hover { background: #333; }

/* Contract Hire pricing - mirrors .mo-finance-amount / .mo-finance-on layout */
.result-item.ch-offer .monthlypayment.top.new {
    color: #3498db;
    font-size: 1em;
    line-height: 1.35;
    text-align: left;
    margin: 4px 0 3px;
}
.result-item.ch-offer .monthlypayment.top.new .monthlyblue {
    font-size: 1em;
    color: #3498db;
}
.result-item.ch-offer .monthlypayment.bottom.new {
    color: #555;
    font-size: 0.85em;
    line-height: 1.1em;
    margin: 0 0 10px;
}
#results-section .result-item.ch-offer .item-detail .item-detail-content .item-detail-top p.monthlypayment.bottom.new {
    margin-top: 0px;
}
/* my-account.css pulls p.monthlypayment.top.new up with margin-top:-10px !important
   (tuned for the PCP card, where the price line sits alone). On the Motability / BCH /
   PCH cards that line is longer and wraps to two lines on narrow viewports, so the
   negative margin collides it with the fuel row above. Re-assert positive spacing for
   these cards only - matched on .ch-offer so the PCP card keeps its own treatment. */
#results-section .result-item.ch-offer .item-detail .item-detail-content .item-detail-top p.monthlypayment.top.new {
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    line-height: 1.4;
}

/* Finance Type selector - single full-width control above the monthly range (PCP/BCH/PCH) */
#filter-lightbox #finance-section .finance-type-row {
    display: block;
}
#filter-lightbox #finance-section .finance-type-row .lb-option.valopt {
    width: 100%;
}
#filter-lightbox #finance-section .finance-type-row .lb-option.valopt select {
    width: 100%;
    max-width: none;
}

#filter-lightbox #mileage-section .filter-group-content .lb-option-row:nth-child(1),
#filter-lightbox #year-section .filter-group-content .lb-option-row:nth-child(1),
#filter-lightbox #price-section .filter-group-content .lb-option-row:nth-child(1),
#filter-lightbox #finance-section .filter-group-content .lb-option-row:nth-child(1) {
    display: flex;
    justify-content: space-between; /* "From" and "To" side by side */
    gap: 10px;
}

#filter-lightbox #mileage-section .filter-group-content .lb-option-row:nth-child(2),
#filter-lightbox #year-section .filter-group-content .lb-option-row:nth-child(2),
#filter-lightbox #price-section .filter-group-content .lb-option-row:nth-child(2),
#filter-lightbox #finance-section .filter-group-content .lb-option-row:nth-child(2)  {
    display: flex;
    justify-content: space-between; /* Min-price and max-price side by side */
    gap: 10px;
}

#filter-lightbox #mileage-section .filter-group-content .lb-option-row:nth-child(2) .lb-option:not(.valopt),
#filter-lightbox #year-section .filter-group-content .lb-option-row:nth-child(2) .lb-option:not(.valopt),
#filter-lightbox #price-section .filter-group-content .lb-option-row:nth-child(2) .lb-option:not(.valopt),
#filter-lightbox #finance-section .filter-group-content .lb-option-row:nth-child(2) .lb-option:not(.valopt) {
    display: none; /* Hide "To" label in second row */
}

#filter-lightbox #mileage-section .filter-group-content .lb-option-row:nth-child(1) .lb-option:not(.valopt),
#filter-lightbox #year-section .filter-group-content .lb-option-row:nth-child(1) .lb-option:not(.valopt),
#filter-lightbox #price-section .filter-group-content .lb-option-row:nth-child(1) .lb-option:not(.valopt),
#filter-lightbox #finance-section .filter-group-content .lb-option-row:nth-child(1) .lb-option:not(.valopt) {
    flex: 1; /* Equal width for "From" */
    font-size: 0.9em;
    color: #000;
    display: flex;
    align-items: center;
}


#filter-lightbox #mileage-section .filter-group-content .lb-option-row:nth-child(1) .lb-option.valopt,
#filter-lightbox #year-section .filter-group-content .lb-option-row:nth-child(1) .lb-option.valopt,
#filter-lightbox #price-section .filter-group-content .lb-option-row:nth-child(1) .lb-option.valopt,
#filter-lightbox #finance-section .filter-group-content .lb-option-row:nth-child(1) .lb-option.valopt {
    order: 2; /* Move min-price select to second row */
    flex: 1; /* Equal width */
    min-width: 0;
}


#filter-lightbox #mileage-section .filter-group-content .lb-option-row:nth-child(2) .lb-option.valopt,
#filter-lightbox #year-section .filter-group-content .lb-option-row:nth-child(2) .lb-option.valopt,
#filter-lightbox #price-section .filter-group-content .lb-option-row:nth-child(2) .lb-option.valopt,
#filter-lightbox #finance-section .filter-group-content .lb-option-row:nth-child(2) .lb-option.valopt {
    flex: 1; /* Equal width */
    min-width: 0;
}





#filter-lightbox #mileage-section .filter-group-content,
#filter-lightbox #year-section .filter-group-content,
#filter-lightbox #price-section .filter-group-content,
#filter-lightbox #finance-section .filter-group-content {
    display: flex;
    flex-direction: column; /* Stack label row and select row vertically */
    gap: 10px; /* Consistent spacing between rows */
}


#filter-lightbox #mileage-section .mileage-labels-row,
#filter-lightbox #year-section .year-labels-row,
#filter-lightbox #price-section .price-labels-row,
#filter-lightbox #finance-section .finance-labels-row {
    display: flex;
    justify-content: space-between; /* "From" on left, "To" on right */
    gap: 10px;
}


#filter-lightbox #mileage-section .mileage-selects-row,
#filter-lightbox #year-section .year-selects-row,
#filter-lightbox #price-section .price-selects-row,
#filter-lightbox #finance-section .finance-selects-row  {
    display: flex;
    justify-content: space-between; /* Min-price on left, max-price on right */
    gap: 10px;
}

#filter-lightbox #mileage-section .mileage-labels-row .lb-option,
#filter-lightbox #year-section .year-labels-row .lb-option,
#filter-lightbox #price-section .price-labels-row .lb-option,
#filter-lightbox #finance-section .finance-labels-row .lb-option {
    flex: 1; /* Equal width for "From" and "To" */
    font-size: 0.9em;
    color: #000;
    display: flex;
    align-items: center; /* Vertically center labels */
}

#filter-lightbox #mileage-section .mileage-selects-row .lb-option.valopt,
#filter-lightbox #year-section .year-selects-row .lb-option.valopt,
#filter-lightbox #price-section .price-selects-row .lb-option.valopt,
#filter-lightbox #finance-section .finance-selects-row .lb-option.valopt  {
    flex: 1; /* Equal width for each select */
    min-width: 0; /* Prevent overflow */
}

#filter-lightbox #mileage-section .mileage-selects-row .lb-option.valopt select,
#filter-lightbox #year-section .year-selects-row .lb-option.valopt select,
#filter-lightbox #price-section .price-selects-row .lb-option.valopt select,
#filter-lightbox #finance-section .finance-selects-row .lb-option.valopt select {
    width: 100%;
    max-width: none; /* Remove cap for flexibility */
}


/* Preserve existing styles for other sections */
#filter-lightbox .filter-group:not(#mileage-section) .filter-group-content,
#filter-lightbox .filter-group:not(#year-section) .filter-group-content,
#filter-lightbox .filter-group:not(#price-section) .filter-group-content,
#filter-lightbox .filter-group:not(#finance-section) .filter-group-content {
    display: block; /* Reset to default for other sections */
}

#filter-lightbox .filter-group:not(#mileage-section) .lb-option-row,
#filter-lightbox .filter-group:not(#year-section) .lb-option-row,
#filter-lightbox .filter-group:not(#price-section) .lb-option-row,
#filter-lightbox .filter-group:not(#finance-section) .lb-option-row {
    display: flex; /* Maintain original behavior */
    justify-content: space-between;
    align-items: center;
}


/* Adjust the .lb-option-row within #price-section to sit side by side */
#filter-lightbox #mileage-section .lb-option-row,
#filter-lightbox #year-section .lb-option-row,
#filter-lightbox #price-section .lb-option-row,
#filter-lightbox #finance-section .lb-option-row {
		display: block; /* Remove flex behavior from individual rows */
    flex: none; /* Reset flex properties */
    justify-content: initial;
    align-items: initial;
}

/* Ensure the select elements within #price-section .valopt adjust properly */
#filter-lightbox #mileage-section .lb-option.valopt select,
#filter-lightbox #year-section .lb-option.valopt select,
#filter-lightbox #price-section .lb-option.valopt select,
#filter-lightbox #finance-section .lb-option.valopt select {
    width: 100%; /* Full width within its container */
    max-width: none; /* Remove any cap for flexibility */
}


#filter-lightbox #make-model-section .sort-option {margin-top: 3px; margin-bottom: 0px;}

/* Style <select> elements in the lightbox to match other inputs */
#filter-lightbox select {
    width: 100%;
    padding: 8px;
    border: 1px solid #000; /* Black border */
    border-radius: 5px;
    font-size: 0.9em;
    color: #333;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

#filter-lightbox select:hover,
#filter-lightbox select:focus {
    border-color: #34495e;
    outline: none;
}

/* Ensure .lb-option-row with selects aligns with design */
#filter-lightbox .lb-option-row select {
    flex: 1; /* Take available space in the row */
    max-width: 200px; /* Cap width for readability */
}

/* Adjust .filter-group-content height for dynamic content */
#filter-lightbox .filter-group-content.open {
    max-height: 600px; /* Increase slightly to accommodate Make/Model options */
}





.page-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}

.filter-clear-button {
	  margin-left:40px;
    display: flex;
    align-items: center; /* Vertically centers the button */
    flex: 0 0 auto; /* Prevent stretching */
}

#filter-clear-button {
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
    border-radius: 5px;
    padding: 5px 10px;
    border: 1px solid #000000; /* Border to distinguish it */
    cursor: pointer;
    text-transform: initial;
    margin-top: 0px;
    padding-top: 8px;
    text-shadow: none;
}

/* Hover effect for Clear all button */
#filter-clear-button:hover {
    background-color: #e0e0e0; /* Light gray on hover */
}


/* Style for the close icon within filter buttons */
.filter-button {
    position: relative; /* Ensure the button can contain the absolute-positioned close icon */
    padding-right: 25px; /* Make room for the 'X' - unchanged for inactive state */
}

/* Specific adjustments for active state to increase gap */
.filter-button.active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 35px 6px 10px; /* Increase right padding to 35px from 25px for more gap */
    background-color: #000000; /* From your existing active state */
    color: #FFFFFF;
    box-shadow: none; /* From your existing active state */
}

/* Position and style the close icon with more spacing */
.filter-button.active .filter-close {
    position: absolute;
    right: 10px; /* Move 'X' further from the right edge (was 5px) */
    top: 53%; /* Adjusted from 55% to center properly with padding */
    transform: translateY(-50%);
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.filter-button.active .filter-close:hover {
   color: #FF0707;
}

.page {
    position: relative;
    min-height: 100vh;
}

.page-header.is-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
}

.content-wrapper {
    position: relative;
    width: 100%;
    overflow-y: auto;
    min-height: calc(100vh - var(--header-height, 100px));
}

#search-wrapper .filter-section {
    position: fixed !important;
    top: var(--header-height, 100px) !important;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1820px;
    width: 100%;
    background-color: white;
    z-index: 10;
    padding: 10px;
    display: flex;
    flex-direction: column; /* Stack main sections vertically */
    gap: 10px;
    box-sizing: border-box;
    overflow-x: auto; /* Adds horizontal scroll if needed */
}

.activescroll {
  margin-left: 40px;
}

.filter-section .filter-controls {
    display: flex;
    align-items: center;
    gap: 5px; /* Existing gap between elements */
    width: 100%;
    position: relative; /* Allow positioning of arrow buttons */
    overflow: hidden; /* Hide overflow of the container */
    justify-content: space-between; /* Push filter-buttons to left, clear/sort to right */
}

/* Style the .filter-buttons to take available space on the left */
.filter-buttons {
    display: flex;
    gap: 5px;
    align-items: center; /* Vertically centers buttons */
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Ensure buttons stay in a single row */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
    padding-right: 5px;
    flex: 1; /* Allow it to grow and take available space */
}

/* Wrapper for the right-aligned buttons */
.filter-controls .right-buttons {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between Clear all and Filter and sort */
    flex: 0 0 auto; /* Prevent stretching */
}

/* Hide scrollbar in Webkit browsers (Chrome, Safari) */
.filter-buttons::-webkit-scrollbar {
    display: none;
}

#results-section {
    max-width: 1820px;
    margin: 0 auto;
    padding-top: calc(var(--header-height) + var(--filter-height) - 160px); /* Adjusted for filter-section height */
}

.filter-section {
    position: sticky;
    top: var(--header-height, 100px); /* Fallback if JS fails */
    background-color: white;
    z-index: 10; /* Increased to avoid overlap with other content, below lightbox (1000) */
    padding: 10px;
    display: flex;
    flex-direction: column; /* Consistent with #search-wrapper .filter-section */
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.filter-button {
    background-color: #FFF;
    color: #000;
    border-radius: 5px;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    text-transform: initial;
    margin-top: 0px;
    padding-top: 8px;
    text-shadow: none;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 1px inset;
    flex: 0 0 auto; /* Prevent shrinking */
}

/* Style the .filter-sort-button div */
.filter-sort-button {
    display: flex;
    align-items: center; /* Vertically centers the button */
    flex: 0 0 auto; /* Prevent stretching */
    margin-left: 0; /* Remove the auto margin since we're using a wrapper */
}

/* Ensure Filter and sort button styling remains consistent */
#filter-sort-button {
    background-color: black;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    text-transform: initial;
    margin-top: 0px;
    padding-top: 8px;
}

/* Style for the arrow buttons */
.filter-scroll-arrow {
    position: absolute;
    top: -5%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 0px 10px;
    cursor: pointer;
    font-size: 18px;
    z-index: 20;
    border-radius: 50%;
		width: 30px !important;
  	height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
		margin-right: 368px;
  	background-color: #000;
}

.filter-scroll-arrow:hover {
   background-color: #34495e !important;
}

.filter-scroll-arrow:focus,
.filter-scroll-arrow:active {
background-color: #000 !important;
}


.filter-scroll-arrow.left {
    left: 0;
}

.filter-scroll-arrow.right {
    right: 0;
}

/* Hide arrows by default, show them when needed */
.filter-scroll-arrow {
    display: none;
}

/* Show arrows when .filter-buttons overflows */
.filter-controls.overflow .filter-scroll-arrow {
    display: flex;
}

/* New styles for totalresults-section */
.totalresults-section {
    display: flex;
    justify-content: space-between; /* Far left and far right */
    align-items: center;
    width: 100%; /* Full width to span the row */
    margin-top: 5px; /* Space below buttons */
    border-top: 1px solid #ddd;
}

.results-count {
    font-size: 0.95em;
    color: #000;
    text-align: left;
    flex: 0 0 auto;
    padding-left: 4px;
}

.save-search {
    font-size: 0.95em;
    color: #666;
    flex: 0 0 auto; /* Prevent stretching */
    display: flex; /* Use flexbox to align children */
    align-items: center; /* Vertically center the text and icon */
    gap: 5px; /* Add spacing between the icon and text */
}

.save-search-icon img {
    width: 20px; /* Adjust size to match text height */
    height: 20px;
    margin-bottom: -4px;
}

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    background-color: transparent;
    display: none;
    z-index: 1000;
}

.lightbox-container .lightbox-header {
    display: flex;
    flex-shrink: 0;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid rgb(222, 226, 230);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 20px;
    color: rgb(36, 45, 61);
}

.lightbox-container .lightbox-footer {
  display: flex;
  flex-shrink: 0;
  -moz-box-align: center;
  align-items: center;
  -moz-box-pack: justify;
  border-top: 1px solid rgb(222, 226, 230);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px; 
}


.lightbox-container .lightbox-header h1 {
    margin: 0px;
    font-variation-settings: "wght" 400;
    font-size: calc(17.29px + 0.22vw);
}

.atds-icon-svg {
    filter: saturate(0%) brightness(0%) contrast(100%);
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.lightbox-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate(0, 100%);
    width: 80%;
    max-width: 600px;
    background-color: white;
    border-radius: 10px;
    /*padding: 10px;*/
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.lightbox-container.open {
    transform: translate(-50%, -50%);
    opacity: 1;
}

#filter-lightbox .close-button {
    background-color: #FFF;
    color: #000;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
    /*width: 24px;
    height: 24px;*/
    line-height: 24px;
    visibility: visible;
}

#filter-lightbox .close-button:hover {
    color: #34495e;
}

.clear-all {
    color: black;
    text-decoration: none;
    margin-right: 10px;
}

#filter-lightbox .search-button {
  background-color: black;
  border: none;
  cursor: pointer;
  text-transform: initial;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  font-size: 14px;
  border-radius: 5px;
}

#filter-lightbox .search-button:disabled {
    background-color: #ba162b !important; /* Override any hover effects */
    cursor: not-allowed;
    opacity: 0.7; /* Optional: visual cue for disabled state */
}

#filter-lightbox .lightbox-footer #clear-lightbox-search.action-buttons {
	cursor: pointer;
	text-decoration: underline;
	font-size: 0.9em;
  margin-top: 5px;
}


#filter-lightbox .action-buttons.search {
	/*justify-content: flex-end;*/
}

#search-wrapper .filter-section .filter-button {
    background-color: #FFF;
    color: #000;
    text-shadow: none;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 1px inset;
}

#search-wrapper .filter-section .filter-button:hover {
    background-color: #e0e0e0;
}

#search-wrapper .filter-section .filter-button.active {
    background-color: #000000; /* Match the active state from your existing CSS */
    color: #FFFFFF;
    box-shadow: none; /* Remove the inset shadow for a cleaner active look */
}

#search-wrapper .filter-section .filter-button.active:hover {
	background-color: #34495e;
}

.filter-section #filter-sort-button:hover,
#filter-lightbox .search-button:hover {
   background-color: #34495e !important;
}

#filter-lightbox .close-button:hover {
    color: #34495e;
}

#filter-lightbox .lightbox-content {
	max-height: 500px;
  overflow-y: auto;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
	display: flex;
	flex-direction: column; /* Stack children vertically */
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  -moz-box-align: center;
  align-items: stretch; /* Ensure full width for children */
  -moz-box-pack: justify;
}

#filter-lightbox .lb-option-row {
		display: flex;
    justify-content: space-between; /* Default for sort-section */
    gap: 10px; /* Default gap */
    cursor: pointer;
    padding: 5px 0;
    transition: background-color 0.2s ease;
}

#filter-lightbox .lb-option-row:hover,
#filter-lightbox .mileage-selects-row:hover,
#filter-lightbox .year-selects-row:hover,
#filter-lightbox .price-selects-row:hover {
   /* background-color: #f5f5f5; */
}


/* Override .lb-option-row for make-model-section to stack vertically */
#filter-lightbox #make-model-section .lb-option-row {
		display: block; /* Simple text block for make/model labels */
    height: auto; /* Remove fixed height since it’s stacked */
}





/* Default state: show filter-value when filter-group-toggle is closed */
#filter-lightbox .filter-value {
    display: block;
    font-size: 0.85em;
    /*color: #666;*/
    color:#c40d0d;
    margin-top: -5px;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Hide filter-value when its specific filter-group-toggle is expanded */
#filter-lightbox .filter-group .filter-group-toggle[aria-expanded="true"] + .filter-value {
    display: none !important;
}

/* Optional: Hide empty filter-values regardless of toggle state */
#filter-lightbox .filter-value:empty {
    display: none;
}

#filter-lightbox .lb-option {
		display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    font-size: 0.9em;
    color: #000;
    flex: 1;
    height: 40px; /* Maintain height for sort-section alignment */
}

#filter-lightbox .lb-option.valopt {
	justify-content: flex-end; /* Align radio buttons to the right in sort-section */
}


/* Adjust .valopt in make-model-section for select elements */
#filter-lightbox #make-model-section .lb-option.valopt {
    display: block; /* Block for vertical stacking */
    width: 100%; /* Full width for select */
}

/* Ensure select inside make-model-section .valopt takes full width */
#filter-lightbox #make-model-section .lb-option.valopt select {
    width: 100%; /* Full width */
    max-width: none; /* Remove any cap */
}

#filter-lightbox .action-buttons {
   /* display: flex;
    justify-content: end;*/
}

#filter-lightbox .filter-group-toggle {
    background: none;
    border: none;
    font-size: 1em;
    font-weight: bold;
    color: rgb(36, 45, 61);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between text/icon and arrows */
    gap: 10px;
    padding: 10px 0;
    width: 100%;
    text-align: left;
    margin-top: 0;
    text-transform: initial;
    text-shadow: none;
}

#filter-lightbox .toggle-arrows {
    margin-left: auto; /* Pushes arrows to the right */
}

#filter-lightbox .toggle-arrow {
    font-size: 0.9em; /* Slightly smaller than text */
    transition: opacity 0.3s ease; /* Smooth fade transition */
}

#filter-lightbox .toggle-arrow.up {
    display: none; /* Hidden by default when collapsed */
}

#filter-lightbox .toggle-arrow.down {
    display: inline; /* Shown by default when collapsed */
}

/* When expanded, show up arrow and hide down arrow */
#filter-lightbox .filter-group-toggle[aria-expanded="true"] .toggle-arrow.up {
    display: inline;
}

#filter-lightbox .filter-group-toggle[aria-expanded="true"] .toggle-arrow.down {
    display: none;
}







.image-overlay-button,
.image-overlay-button:focus {
	position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  padding: 4px 6px;
  padding-bottom: 4px;
  border-radius: 3px;
  font-size: 0.75em;
  z-index: 20;
  border: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding-bottom: 3px;
  text-shadow: none;
  text-transform: revert;
  background: rgba(17, 17, 17, 0.81);
}

.image-overlay-button:hover,
.image-overlay-button:active {
    background: rgba(17, 17, 17, 0.81);
    color: white;
    border: 0;
}

.image-preview:hover .image-overlay-button,
.image-container:hover .image-overlay-button,
.image-container img:hover ~ .image-overlay-button {
    opacity: 1;
}

.next-arrow {
    right: 10px;
    z-index: 15;
}

/* Ensure parent containers don't interfere */
.result-container, #results {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Center the grid wrapper with updated max-width */
.results-grid-wrapper {
    width: 100%; /* Full viewport width */
    margin: 0 auto;
    padding: 20px;
}


    #results-section:has(.align-left-partial) {
        justify-content: start !important; /* Left-align grid on mobile if needed */
    }


/* Flex container for items */
#results-section {
    width: 100%;
    margin: 0 auto; /* Center the grid container */
    padding-top: calc(var(--header-height) + var(--filter-height) - 160px);
    display: grid; /* Use Grid layout */
    /* auto-FILL, not auto-fit: auto-fit COLLAPSES the empty tracks to 0 and hands their space to
       the filled ones, so a short result set (e.g. a branch-filtered Motability search returning
       3) stretched each track to ~583px and left the 258px cards marooned ~600px apart. auto-fill
       keeps the empty tracks at their minmax width, so a part-filled row lays out exactly like a
       full one. Identical behaviour once the row is full, which is why this only showed up on
       small result sets. */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Dynamic columns, min 250px each */
    gap: 20px; /* Gap between items */
    justify-content: center; /* Center the entire grid */
    align-items: stretch; /* Stretch items vertically */
    box-sizing: border-box;
}

/* Result item styling with consistent height */
.result-item {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #ffffff;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px;
    overflow: hidden;
    border-radius: 16px;
    min-width: 250px;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    /*min-height: 533px;*/
}


.result-item:hover {
    /*background-color: #f5f5f5;*/
    box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 5px 0px;
}


/* Ensure buttons maintain their own cursor style */
.prev-arrow,
.next-arrow,
.reserve-button,
.vehicle-cell.heart .detail-icon img {
    cursor: pointer !important;
}

/* Image section with fixed height */
.image-preview {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    height: 200px;
    overflow: hidden;
    margin-bottom: 10px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.blurred-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    filter: blur(10px);
    z-index: -1;
    opacity: 1;
    pointer-events: none;
}

.image-container {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease-in-out;
    z-index: 10;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

.image-container img:hover {
    cursor: pointer;
}

/* Content section with controlled growth */
.item-detail {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

.item-detail-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    width: 100%;
}

.item-detail-top {
    flex-shrink: 0;
    margin-bottom: 0;
    width: 100%;
}

.item-detail-bottom {
    margin-top: auto;
    padding-top: 0;
    margin-bottom: 20px;
}

/* Specific item-detail children styles */
.result-item h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
    color: #2c3e50;
    font-size: 1.2em;
}

.item-detail small {
    font-size: 75%;
    color: rgb(102, 102, 102);
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.item-detail .highlight-text {
    display: block;
    margin-top: 4px;
    color: #2c3e50;
    font-size: 0.75em;
    background-color: #eee;
    width: fit-content;
    padding-left: 4px;
    font-weight: bold;
    padding-right: 4px;
    margin-bottom: 5px;
}

.item-detail p {
    margin-top: 8px;
    font-size: 0.9em;
    color: #333;
    font-weight: bold;
}

.item-detail .monthlypayment {
    margin-bottom: 0px;
    margin-top: 0px;
    padding-left: 4px;
}

.item-detail .monthlypayment.top {
    margin-top: 10px;
}

.item-detail .monthlypayment.bottom {
    margin-top: -10px;
}

.item-detail .totalprice {
    padding-left: 4px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.monthlyblue {
    color: #3579f6;
    font-size: 1.25em;
}

.pricered {
    font-size: 1.5em;
    color: #e74c3c;
}

/* #108: the single line under the slab price naming which of the three pricing states this
   vehicle is in. Same red as the price so the two read as one unit, but at footnote size -
   it must not compete with the price itself. display:block because it is a span (see
   car-detail.css for why a <p> could not be used on the detail page). */
.pricenote {
    display: block;
    color: #e74c3c;
    font-size: 12px;
    line-height: 1.2;
    margin-top: 10px;
    padding-left: 4px;
    /* mockup shows a clear gap between the price line and the note */
}

/* Vehicle details */
.vehicle-details {
    width: 100%;
    margin-top: 8px;
}

.vehicle-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 10px;
}

.vehicle-row:last-child {
    margin-bottom: 0;
}

.vehicle-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    font-size: 14px;
    color: #333;
    flex: 1;
    margin-left: 10px;
}

.detail-icon {
    font-size: 16px;
    color: #666;
    margin-right: 4px;
}

.detail-icon.calendar i,
.detail-icon.gear i,
.detail-icon.odometer i,
.detail-icon.fuel i,
.detail-icon.location i {
    margin-right: 4px;
}

.vehicle-cell.heart {
    justify-content: flex-end;
    margin-right: 25px;
    line-height: initial;
}

.vehicle-cell.heart .detail-icon img {
    cursor: pointer;
}

.vehicle-cell.trans,
.vehicle-cell.fuel {
    justify-content: flex-end;
    margin-right: 25px;
}

.vehicle-cell.reserve {
    flex: 0 1 auto;
    margin-left: 10px;
    justify-content: flex-start;
}

.reserve-button {
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    padding: 3px 10px;
    padding-top: 3px;
    padding-top: 1px;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 0px;
    padding-top: 5px;
    text-transform: initial;
}

.reserve-button:hover {
    background-color: #34495e;
}

/* Responsive adjustments for vehicle details */
@media only screen and (max-width: 599px) {
    .vehicle-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        margin-bottom: 5px;
    }

    .vehicle-row:last-child {
        margin-bottom: 0;
    }

    .vehicle-cell {
        font-size: 12px;
        justify-content: flex-start;
    }
    
    .vehicle-cell.heart {
        justify-content: flex-start; /* On small screens, align left */
        margin-right: 0;
    }

    .vehicle-cell.reserve {
        margin-left: 0; /* Reset margin for consistency */
        width: 100%; /* Full width on small screens */
    }

    .reserve-button {
        width: 100%; /* Full width on small screens */
    }    

    .detail-icon {
        font-size: 14px;
        margin-right: 2px;
    }
}

/* Carousel controls */
.prev-arrow,
.next-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: transparent;
    color: transparent;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.image-preview:hover .prev-arrow,
.image-preview:hover .next-arrow,
.image-container:hover .prev-arrow,
.image-container:hover .next-arrow,
.image-container img:hover ~ .prev-arrow,
.image-container img:hover ~ .next-arrow {
    background: rgba(0, 0, 0, 1);
    color: white;
    opacity: 0.5;
    width: initial;
}

.prev-arrow:hover,
.next-arrow:hover {
    background: rgba(255, 0, 0, 1) !important;
    color: white;
    opacity: 1;
}

.prev-arrow {
    left: 10px;
}

.next-arrow {
    right: 10px;
}

.carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 15;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.carousel-dot.active {
    background: white;
}

.image-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: white;
    color: black;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
    z-index: 20;
    opacity: 1;
    display: none;
}

/* Loading and no-more indicators */
#loading, #no-more {
    width: 100%;
    text-align: center;
    padding: 20px;
    display: none;
}

.loading {
    color: #666;
}

.no-more {
    color: #999;
}

/* Keyframes */
@keyframes fadeIn {
    to { opacity: 1; }
}

/* Override rs-column classes */
.rs-column {
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0;
}



#filter-lightbox .saved-search-link {
	text-shadow: none;
  color: white;
  width: 100%;
  cursor: default;
  margin-top: 0;
}

#filter-lightbox button {
	background:initial;
}

#filter-lightbox .lb-signin {
	
}

#filter-lightbox .fa-arrow-right-long::before,  #filter-lightbox .fa-long-arrow-right::before {
  content: "\f178";

  margin-left: 5px;

  vertical-align: middle;

}

#filter-lightbox .lb-signin #signin-but {
	background-color: #000;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
  border-radius: 5px;
  text-transform: initial;
}

#filter-lightbox .lb-signin #signin-but:hover {
 background-color: #34495e !important;
}

#filter-lightbox .filter-group {
    width: 100%;
}

#filter-lightbox .filter-group-toggle {
    background: none;
    border: none;
    font-size: 1em;
    font-weight: bold;
    color: rgb(36, 45, 61);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    width: 100%;
    text-align: left;
    margin-top: 0;
    text-transform: initial;
    text-shadow: none;
    padding-right: 10px;
}

#filter-lightbox .toggle-arrows {
    margin-left: auto; /* Pushes arrow to the right */
}

#filter-lightbox .toggle-arrow {
    font-size: 0.9em; /* Slightly smaller than text */
    transition: transform 0.3s ease; /* Smooth rotation transition */
}

/* Rotate the arrow 180 degrees when expanded */
#filter-lightbox .filter-group-toggle[aria-expanded="true"] .toggle-arrow {
    transform: rotate(180deg);
}

#filter-lightbox #sort-section {
	border-bottom: 1px solid rgb(222, 226, 230);
  border-top: 1px solid rgb(222, 226, 230);
}

#filter-lightbox #sort-section {
	border-bottom: 1px solid rgb(222, 226, 230);
  border-top: 1px solid rgb(222, 226, 230);
}

#filter-lightbox  #make-model-section,
#filter-lightbox  #price-section,
#filter-lightbox  #mileage-section,
#filter-lightbox  #year-section,
#filter-lightbox  #finance-section {
	border-bottom: 1px solid rgb(222, 226, 230);
}

#filter-lightbox .filter-group-toggle .toggle-icon {
    font-size: 0.8em;
   /* transition: transform 0.3s ease;*/
}

#filter-lightbox .filter-group-toggle[aria-expanded="true"] .toggle-icon {
   /* transform: rotate(180deg);*/
}

#filter-lightbox .filter-group-content {
    padding: 10px 0;
    display: block; /* Change from 'none' to 'block' for animation control */
    max-height: 0; /* Start collapsed */
    opacity: 0; /* Start invisible */
    overflow: hidden; /* Prevent content overflow during animation */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Animate height and opacity */
}


#filter-lightbox .filter-group-content.open {
		max-height: 600px; /* Still accommodates make-model-section */
    opacity: 1; /* Fully visible */
}

#filter-lightbox .sort-option {
    display: block;
    margin: 10px 0;
    font-size: 1em;
    color: #333;
}



/* Custom radio button styling for Sort section */
#filter-lightbox .sort-option input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 25px !important;
    height: 25px !important;
    border: 1px solid #000; /* Changed from #ccc to #000 */
    background-color: #fff;
    cursor: pointer;
    position: relative;
    margin-right: 5px; /* Integrated from your rule */
    vertical-align: middle;
    border-radius: 50%;
}

/* Style when checked - black highlight */
#filter-lightbox .sort-option input[type="radio"]:checked {
    border-color: #000;
    background-color: #000;
}

/* Add a checkmark using Font Awesome */
#filter-lightbox .sort-option input[type="radio"]:checked::after {
    content: '\f00c'; /* Font Awesome Unicode for fa-check */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 15px;
}

/* Hover effect for better UX */
#filter-lightbox .sort-option input[type="radio"]:hover:not(:checked) {
    border-color: #333; /* Darker shade of black (e.g., dark gray) instead of #666 */
}


/* New CSS for partial row alignment */
.align-left-partial {
    margin-right: auto !important; /* Push items to the left */
    margin-left: 0 !important;    /* Remove left margin to align with column */
}

/* Ensure the container doesn't override our alignment */
#results-section:has(.align-left-partial) {
    justify-content: flex-start !important; /* Override center alignment when partial row exists */
}




/* Responsive breakpoints */

@media screen and (max-width: 1099px) and (min-width: 901px) {
 #results-section { padding-top: calc(var(--header-height) + var(--filter-height) - 150px) !important; }
}

@media screen and (min-width: 1400px) {
    .result-item {
        flex: 0 1 calc(20% - 16px); /* 5 items */
        max-width: calc(20% - 16px);
        /* min-width: 0;
        max-width: none; */
        min-width: 258px !important;
    		max-width: 258px !important;
    }
    #results-section {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 1162px) and (min-width: 1100px) {
    .results-grid-wrapper { 
        max-width: 950px !important;
    }
    
    .result-item {
        flex: 0 1 290px !important;
        max-width: 290px !important;
        min-width: 290px !important;
        margin: 0;
    }
}




@media only screen and (min-width: 810px) and (max-width: 1080px) and (orientation: portrait) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results .results-grid-wrapper {
        max-width: 800px !important;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        max-width: 800px !important;
        grid-template-columns: repeat(3, 255px);
        gap: 5px;
        justify-content: center;
        margin: 0 auto;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 255px !important;
        max-width: 255px !important;
    }
}

@media only screen and (min-width: 820px) and (max-width: 1180px) and (orientation: portrait) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results .results-grid-wrapper {
        max-width: 800px !important;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        max-width: 800px !important;
        grid-template-columns: repeat(3, 258px);
        gap: 5px;
        justify-content: center;
        margin: 0 auto;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 258px !important;
        max-width: 258px !important;
    }
}

@media only screen and (min-width: 834px) and (max-width: 1194px) and (orientation: portrait) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results .results-grid-wrapper {
        max-width: 800px !important;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        max-width: 800px !important;
        grid-template-columns: repeat(3, 262px);
        gap: 5px;
        justify-content: center;
        margin: 0 auto;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 262px !important;
        max-width: 262px !important;
    }
}

@media only screen and (min-width: 900px) and (max-width: 1440px) and (orientation: portrait) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results .results-grid-wrapper {
        max-width: 900px !important;
    }
}

@media only screen and (min-width: 800px) and (max-width: 1280px) and (orientation: portrait) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 373px !important;
        max-width: 373px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(2, 373px);
        max-width: 766px; /* 2 * 373px + 1 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results .results-grid-wrapper {
        max-width: 1000px !important;
        margin: 0 auto;
        padding: 20px;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        max-width: 1000px !important;
        grid-template-columns: repeat(3, 313px);
        gap: 20px;
        justify-content: center;
        margin: 0 auto;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 313px !important;
        max-width: 313px !important;
    }
     .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section { padding-top: calc(var(--header-height) + var(--filter-height) - 150px) !important; }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results .results-grid-wrapper {
        max-width: 1315px !important;
        padding-left: 0;
        padding-right: 0;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        max-width: 1315px;
        grid-template-columns: repeat(5, 254px);
        gap: 10px;
        justify-content: center;
        margin: 0 auto;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 254px !important;
        max-width: 254px !important;
    }
		#results-section .result-item .item-detail .item-detail-content .item-detail-top .highlight-text.campaign-vehicle {
			font-size: 0.6em !important;
		}
}

@media only screen and (min-width: 800px) and (max-width: 1280px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 298px !important;
        max-width: 298px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(4, 298px);
        max-width: 1212px; /* 4 * 298px + 3 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 834px) and (max-width: 1194px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results .results-grid-wrapper {
        max-width: 1160px !important;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        max-width: 1160px;
        grid-template-columns: repeat(4, 271px);
        gap: 20px;
        justify-content: center;
        margin: 0 auto;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 271px !important;
        max-width: 271px !important;
    }
}

@media only screen and (min-width: 820px) and (max-width: 1180px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 268px !important;
        max-width: 268px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(4, 268px);
        max-width: 1112px; /* 4 * 268px + 3 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 810px) and (max-width: 1080px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 325px !important;
        max-width: 325px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(3, 325px);
        max-width: 995px; /* 3 * 325px + 2 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
     .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section { padding-top: calc(var(--header-height) + var(--filter-height) - 150px) !important; }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 314px !important;
        max-width: 314px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(3, 314px);
        max-width: 962px; /* 3 * 314px + 2 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1037px) and (min-width: 601px) {
    .results-grid-wrapper {
        max-width: 630px !important;
    }
    #results-section {
        grid-template-columns: repeat(2, 280px);
        max-width: 600px; /* 2 * 280px + 1 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
    .result-item {
        min-width: 280px !important;
        max-width: 280px !important;
    }
}

@media only screen and (max-width: 1099px) and (min-width: 800px) {
    #results-section {
        grid-template-columns: repeat(3, 300px);
        max-width: 940px; /* 3 * 300px + 2 * 20px */
        justify-content: center;
        margin: 0 auto;
        padding-top: calc(var(--header-height) + var(--filter-height) - 50px) !important; 
}
    
    .result-item {
        min-width: 300px;
        max-width: 300px;
    }
}

@media only screen and (max-width: 799px) and (min-width: 600px) {
    #results-section {
        grid-template-columns: repeat(2, 300px);
        max-width: 620px; /* 2 * 300px + 1 * 20px */
        justify-content: center;
        margin: 0 auto;
        padding-top: calc(var(--header-height) + var(--filter-height) - 50px) !important; 
    }
    .result-item {
        min-width: 300px;
        max-width: 300px;
    }
}

@media only screen and (max-width: 599px) {
    #results-section {
        grid-template-columns: 1fr;
        max-width: 360px;
        justify-content: center;
        margin: 0 auto;
        padding-top: calc(var(--header-height) + var(--filter-height) - 50px) !important; 
    }
    .result-item {
        min-width: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 1000px) {
    .filter-controls .filter-buttons button.filter-button {
        width: initial;
    }
  
    .main-content button, .main-content input[type="submit"] {
        width: auto;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 901px) {
  .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section { 
  	padding-top: calc(var(--header-height) + var(--filter-height) - 150px) !important;
   }
}


@media only screen and (max-width: 767px) and (orientation: portrait) {
    .filter-buttons.activescroll,
    .filter-buttons,
    .filter-clear-button {
        display: none;
    }

    .vehicle-cell.reserve {
        width: fit-content;
    }
}

@media only screen and (max-width: 926px) and (max-height: 428px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 282px !important;
        max-width: 282px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(3, 282px);
        max-width: 866px; /* 3 * 282px + 2 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
    .page-header .centered-wrapper.ce_rsce_tao_centered_wrapper_start.basketart.first.-background-mousemove.-color-inverted .centered-wrapper-inner {
        display: none;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container .results-grid-wrapper {
        max-width: 832px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 420px !important;
        max-width: 420px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(2, 420px);
        max-width: 860px; /* 2 * 420px + 1 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
         .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section { padding-top: calc(var(--header-height) + var(--filter-height) - 50px) !important; }
}

@media only screen and (max-width: 915px) and (max-height: 412px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 429px !important;
        max-width: 429px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(2, 429px);
        max-width: 878px; /* 2 * 429px + 1 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
      .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section { padding-top: calc(var(--header-height) + var(--filter-height) - 150px) !important; }
}

@media only screen and (max-width: 883px) and (max-height: 412px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 412px !important;
        max-width: 412px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(2, 412px);
        max-width: 844px; /* 2 * 412px + 1 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
 .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section { padding-top: calc(var(--header-height) + var(--filter-height) - 50px) !important; }
}

@media only screen and (max-width: 844px) and (max-height: 390px) and (orientation: landscape) {
    .page-header .centered-wrapper.ce_rsce_tao_centered_wrapper_start.basketart.first.-background-mousemove.-color-inverted .centered-wrapper-inner {
        display: none;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container .results-grid-wrapper {
        max-width: 832px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 395px !important;
        max-width: 395px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(2, 395px);
        max-width: 810px; /* 2 * 395px + 1 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 854px) and (max-height: 384px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 398px !important;
        max-width: 398px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(2, 398px);
        max-width: 816px; /* 2 * 398px + 1 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 812px) and (max-height: 375px) and (orientation: landscape) {
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container .results-grid-wrapper {
        max-width: 772px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 350px !important;
        max-width: 350px !important;
    }
    .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
        grid-template-columns: repeat(2, 350px);
        max-width: 720px; /* 2 * 350px + 1 * 20px */
        justify-content: center;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
    .totalresults-section {
        display: none;
    }
    #results-section {
        padding-top: calc(var(--header-height) + var(--filter-height) - 65px) !important; 
    }
    #filter-lightbox.lightbox .lightbox-container.open .lightbox-content {
        max-height: 130px;
    }
}

@media only screen and (max-width: 812px) and (max-height: 375px) and (orientation: landscape) {
    .totalresults-section {
        display: none;
    }
    #results-section {
        padding-top: calc(var(--header-height) + var(--filter-height) - 65px) !important; 
    }
    #filter-lightbox.lightbox .lightbox-container.open .lightbox-content {
        max-height: 130px;
    }
}


@media only screen and (max-width: 736px) and (max-height: 414px) and (orientation: landscape) {
		.tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
	    grid-template-columns: repeat(2, 290px);
	  }
	 .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 290px !important;
        max-width: 290px !important;
    }
}


@media only screen and (max-width: 667px) and (max-height: 375px) and (orientation: landscape) {
		.tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section {
	    grid-template-columns: repeat(2, 290px);
	  }
	 .tao-fullwidth .page .content-wrapper .main-content #search-wrapper .result-container #results-section .result-item {
        min-width: 290px !important;
        max-width: 290px !important;
    }
}

@supports (-webkit-overflow-scrolling: touch) {
    .main-content #search-wrapper #carssearch .filter-section .filter-controls .filter-buttons button,
    .main-content #search-wrapper #carssearch .filter-section .filter-controls .filter-sort-button button#filter-sort-button,
    .main-content #search-wrapper #carssearch .filter-section .filter-controls .filter-clear-button button#filter-clear-button,
    .main-content #search-wrapper #carssearch .filter-section .filter-controls .nav-account-button {
        padding-bottom: 9px !important;
    }
}

@media only screen and (min-width: 150px) and (max-width: 480px) and (orientation: portrait) {
    .main-content #search-wrapper .result-container #results #results-section .item-detail-bottom.new .vehicle-details .vehicle-row.retail .vehicle-cell p.retailprice {
        margin-top: -21px !important;
    }
    
		#filter-lightbox .lightbox-container.open .lightbox-content #keywords-section.filter-group .filter-group-content.open .lb-option-row {
			flex-direction: column;
			align-items: self-start;
		}
    
}



/* ----------------------------------------------------------------------------
   AT Connect reservation handling — Option (b): show reserved vehicles in the
   lister/detail but hide price/finance/reserve UI. See car-search.js (lister)
   and usedcar-detail/utility.js renderCarData (detail).
   ---------------------------------------------------------------------------- */

/* Lister card — Reserved state. */
#results-section .result-item.is-reserved .item-detail-bottom .reserved-pill {
    display: inline-block;
    padding: 6px 14px;
    margin: 8px 0;
    background-color: #d9534f;
    color: #fff;
    border-radius: 4px;
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

#results-section .result-item.is-reserved .monthlypayment,
#results-section .result-item.is-reserved .retailprice,
#results-section .result-item.is-reserved .totalprice {
    display: none !important;
}


/* ============================================================================
   Contract Hire enquiry lightbox (#89) - the same enquiry component the
   manufacturer offers pages use, shell-styled here because /car-search does
   not load car-detail.css. Mirrors the #reserveLightbox rules from
   reserve-lightbox.css, scoped to #enquiryLightbox.
   ========================================================================= */

#enquiryLightbox.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    transition: opacity 0.3s ease;
}

#enquiryLightbox.lightbox .lightbox-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 700px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    max-height: 80vh;
    overflow-y: auto;
}

#enquiryLightbox.lightbox .lightbox-content .close {
    color: #333;
    position: absolute;
    right: 10px;
    top: 0px;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    font-family: Fabriga regular, Lato, sans-serif;
}

#enquiryLightbox.lightbox .lightbox-content .close:hover,
#enquiryLightbox.lightbox .lightbox-content .close:focus {
    color: #007bff;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-left {
    width: 40%;
    padding: 10px;
    background-color: #f9f9f9;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-left h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 23px;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right {
    width: 60%;
    padding: 10px;
    border-left: 1px solid #ddd;
    background-color: #f9f9f9;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right label {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    display: flex;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right input,
#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right select,
#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right textarea {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right input:focus,
#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right select:focus,
#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right textarea:focus {
    border-color: #007bff;
    outline: none;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right input[type="checkbox"] {
    margin-right: 7px;
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 3px;
    width: 24px;
    height: 24px;
    transform: scale(1.2);
    cursor: pointer;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right #enquiryForm button.proceed-button {
    margin-top: 20px;
    padding: 12px;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    text-transform: none;
    transition: background-color 0.3s ease;
    text-shadow: none;
    width: 100%;
    min-height: 48px;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right #enquiryForm button.proceed-button:hover {
    background-color: #0056b3;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right #enquiryForm button.proceed-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right .errortxt {
    font-size: 14px;
    color: #df4343;
    margin-bottom: 10px;
    font-weight: normal;
}

#enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right .errortxt.hidden {
    display: none;
}

@media (max-width: 768px) {
    #enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container {
        flex-direction: column;
    }

    #enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-left,
    #enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-right {
        flex: 1 1 100%;
        width: 100%;
    }

    #enquiryLightbox.lightbox .lightbox-content.reserve-form .reserve-container .reserve-left {
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
}