/* carCompare.html specific car card fixes */
/* This file fixes the car year background extension issue for Car Compare page */
/* Fix main sticky car card year background extension - prevent it from covering the title */
#stickyCompareCard .car-card-compare .car-year {
color: #fd5631 !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
margin-bottom: 0 !important;
flex-shrink: 0 !important; /* Prevent the year from shrinking */
background-color: rgba(253, 86, 49, 0.1) !important;
padding: 0.15rem 0.4rem !important;
border-radius: 4px !important;
margin-right: 0.35rem !important; /* Consistent spacing */
display: inline-block !important; /* Prevent full width */
width: auto !important; /* Prevent full width */
max-width: fit-content !important; /* Ensure it doesn't expand */
white-space: nowrap !important; /* Prevent text wrapping */
overflow: hidden !important; /* Hide overflow */
text-overflow: ellipsis !important; /* Add ellipsis if needed */
}
/* Fix the main sticky car card container for year and title to prevent background extension */
#stickyCompareCard .car-card-compare .d-flex.align-items-center {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important; /* Prevent wrapping */
gap: 0.25rem !important; /* Consistent spacing */
width: 100% !important;
overflow: hidden !important; /* Prevent overflow */
}
/* Ensure main sticky car card title doesn't get covered */
#stickyCompareCard .car-card-compare .card-title {
color: #fff !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
margin-bottom: 0 !important;
line-height: 1.4 !important;
flex: 1 !important; /* Take remaining space */
min-width: 0 !important; /* Allow shrinking */
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Ensure main sticky car card body has proper layout */
#stickyCompareCard .car-card-compare .card-body {
background-color: #282534 !important;
padding: 0.75rem !important;
text-align: left !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
}
/* Fix main sticky car card specs positioning and font size - uniform font for entire row */
#stickyCompareCard .car-card-compare .car-specs {
color: #fff !important;
font-size: 0.7rem !important; /* Match other pages */
font-weight: 300 !important;
margin-bottom: 0 !important;
display: flex !important;
flex-wrap: nowrap !important; /* Prevent wrapping to keep location and county on same line */
gap: 0.3rem !important; /* Reduced gap */
align-items: center !important;
line-height: 1.2 !important; /* Tighter line height */
}
/* Ensure all elements in main sticky car card specs row have uniform font size */
#stickyCompareCard .car-card-compare .car-specs span {
font-size: 0.7rem !important; /* Uniform font size for all elements */
color: #fff !important;
white-space: nowrap !important; /* Prevent wrapping */
display: inline !important; /* Keep inline to stay on same line */
font-weight: 300 !important; /* Consistent font weight */
}
/* Fix main sticky car card feature icons in specs - uniform sizing with text */
#stickyCompareCard .car-card-compare .car-specs .feature-icon {
color: #fd5631 !important;
font-size: 0.8rem !important; /* Slightly larger than text for better visibility */
margin-right: 0.1rem !important;
flex-shrink: 0 !important; /* Prevent icons from shrinking */
}
/* Fix main sticky car card price container positioning */
#stickyCompareCard .car-card-compare .car-price-container {
display: flex !important;
align-items: center !important;
gap: 0.15rem !important;
background-color: rgba(255, 255, 255, 0.05) !important;
border-radius: 6px !important;
padding: 0.1rem 0.25rem !important;
position: relative !important;
width: fit-content !important; /* Prevent full width */
margin-left: 0 !important; /* Ensure left alignment */
}
/* Add main sticky car card price tag styling */
#stickyCompareCard .car-card-compare .car-price-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: #fd5631;
border-radius: 2px 0 0 2px;
}
/* Special styling for wallet icon in main sticky car card price container */
#stickyCompareCard .car-card-compare .car-price-container .feature-icon {
margin-left: 0.3rem !important; /* Add some space after the red border */
color: #fd5631 !important;
font-size: 0.95rem !important;
}
/* Fix car year background extension - prevent it from covering the title */
#sellers-comparison-content .car-card-compare .car-year,
#price-comparison-content .car-card-compare .car-year {
color: #fd5631 !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
margin-bottom: 0 !important;
flex-shrink: 0 !important; /* Prevent the year from shrinking */
background-color: rgba(253, 86, 49, 0.1) !important;
padding: 0.15rem 0.4rem !important;
border-radius: 4px !important;
margin-right: 0.35rem !important; /* Consistent spacing */
display: inline-block !important; /* Prevent full width */
width: auto !important; /* Prevent full width */
max-width: fit-content !important; /* Ensure it doesn't expand */
white-space: nowrap !important; /* Prevent text wrapping */
overflow: hidden !important; /* Hide overflow */
text-overflow: ellipsis !important; /* Add ellipsis if needed */
}
/* Fix the container for year and title to prevent background extension */
#sellers-comparison-content .car-card-compare .d-flex.align-items-center,
#price-comparison-content .car-card-compare .d-flex.align-items-center {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important; /* Prevent wrapping */
gap: 0.25rem !important; /* Consistent spacing */
width: 100% !important;
overflow: hidden !important; /* Prevent overflow */
}
/* Ensure card title doesn't get covered */
#sellers-comparison-content .car-card-compare .card-title,
#price-comparison-content .car-card-compare .card-title {
color: #fff !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
margin-bottom: 0 !important;
line-height: 1.4 !important;
flex: 1 !important; /* Take remaining space */
min-width: 0 !important; /* Allow shrinking */
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Ensure proper card body layout */
#sellers-comparison-content .car-card-compare .card-body,
#price-comparison-content .car-card-compare .card-body {
background-color: #282534 !important;
padding: 0.75rem !important;
text-align: left !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
}
/* Fix price container positioning */
#sellers-comparison-content .car-card-compare .car-price-container,
#price-comparison-content .car-card-compare .car-price-container {
display: flex !important;
align-items: center !important;
gap: 0.15rem !important;
background-color: rgba(255, 255, 255, 0.05) !important;
border-radius: 6px !important;
padding: 0.1rem 0.25rem !important;
position: relative !important;
width: fit-content !important; /* Prevent full width */
margin-left: 0 !important; /* Ensure left alignment */
}
/* Add price tag styling */
#sellers-comparison-content .car-card-compare .car-price-container::before,
#price-comparison-content .car-card-compare .car-price-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: #fd5631;
border-radius: 2px 0 0 2px;
}
/* Special styling for wallet icon in price container */
#sellers-comparison-content .car-card-compare .car-price-container .feature-icon,
#price-comparison-content .car-card-compare .car-price-container .feature-icon {
margin-left: 0.3rem !important; /* Add some space after the red border */
color: #fd5631 !important;
font-size: 0.95rem !important;
}
/* Fix car specs positioning and font size - uniform font for entire row */
#sellers-comparison-content .car-card-compare .car-specs,
#price-comparison-content .car-card-compare .car-specs {
color: #fff !important;
font-size: 0.7rem !important; /* Reduced to match sellersProf.html */
font-weight: 300 !important;
margin-bottom: 0 !important;
display: flex !important;
flex-wrap: nowrap !important; /* Prevent wrapping to keep location and county on same line */
gap: 0.3rem !important; /* Reduced gap */
align-items: center !important;
line-height: 1.2 !important; /* Tighter line height */
}
/* Ensure all elements in car-specs row have uniform font size */
#sellers-comparison-content .car-card-compare .car-specs span,
#price-comparison-content .car-card-compare .car-specs span {
font-size: 0.7rem !important; /* Uniform font size for all elements */
color: #fff !important;
white-space: nowrap !important; /* Prevent wrapping */
display: inline !important; /* Keep inline to stay on same line */
font-weight: 300 !important; /* Consistent font weight */
}
/* Fix feature icons in specs - uniform sizing with text */
#sellers-comparison-content .car-card-compare .car-specs .feature-icon,
#price-comparison-content .car-card-compare .car-specs .feature-icon {
color: #fd5631 !important;
font-size: 0.8rem !important; /* Slightly larger than text for better visibility */
margin-right: 0.1rem !important;
flex-shrink: 0 !important; /* Prevent icons from shrinking */
}
/* Responsive fixes for larger screens */
@media (min-width: 1200px) {
#sellers-comparison-content .car-card-compare .car-year,
#price-comparison-content .car-card-compare .car-year {
font-size: 0.85rem !important;
}
#sellers-comparison-content .car-card-compare .card-title,
#price-comparison-content .car-card-compare .card-title {
font-size: 1rem !important;
}
#sellers-comparison-content .car-card-compare .car-specs,
#price-comparison-content .car-card-compare .car-specs {
font-size: 0.75rem !important; /* Slightly larger on large screens but still uniform */
}
/* Ensure all elements in large screen car-specs row have uniform font size */
#sellers-comparison-content .car-card-compare .car-specs span,
#price-comparison-content .car-card-compare .car-specs span {
font-size: 0.75rem !important; /* Uniform font size for all elements on large screens */
}
/* Large screen feature icons in specs - proportional sizing */
#sellers-comparison-content .car-card-compare .car-specs .feature-icon,
#price-comparison-content .car-card-compare .car-specs .feature-icon {
font-size: 0.85rem !important; /* Slightly larger than text for visibility */
}
}
/* Mobile responsive fixes */
@media (max-width: 576px) {
/* Mobile fixes for main sticky car card year background extension */
#stickyCompareCard .car-card-compare .car-year {
font-size: 0.75rem !important; /* Smaller on mobile */
padding: 0.1rem 0.3rem !important; /* Reduced padding */
margin-right: 0.25rem !important; /* Reduced margin */
border-radius: 3px !important; /* Smaller border radius */
}
/* Mobile fixes for main sticky car card title */
#stickyCompareCard .car-card-compare .card-title {
font-size: 0.85rem !important; /* Smaller on mobile */
line-height: 1.3 !important; /* Tighter line height */
}
/* Mobile fixes for main sticky car card container */
#stickyCompareCard .car-card-compare .d-flex.align-items-center {
gap: 0.15rem !important; /* Smaller gap on mobile */
}
/* Mobile car specs adjustments for main sticky car card - uniform font for entire row */
#stickyCompareCard .car-card-compare .car-specs {
font-size: 0.65rem !important; /* Even smaller on mobile */
gap: 0.2rem !important; /* Smaller gap */
}
/* Ensure all elements in mobile main sticky car card specs row have uniform font size */
#stickyCompareCard .car-card-compare .car-specs span {
font-size: 0.65rem !important; /* Uniform mobile font size for all elements */
font-weight: 300 !important; /* Consistent font weight */
}
/* Mobile main sticky car card specs - perfect horizontal alignment */
#stickyCompareCard .car-card-compare .car-specs {
display: flex !important; /* Ensure flex layout */
align-items: baseline !important; /* Align to baseline for perfect horizontal line */
flex-wrap: nowrap !important; /* Prevent wrapping */
}
/* Ensure all span elements in mobile main sticky car card specs row have perfect horizontal alignment */
#stickyCompareCard .car-card-compare .car-specs span {
display: inline-flex !important; /* Use inline-flex for perfect baseline alignment */
align-items: baseline !important; /* Align to baseline for straight line */
gap: 0.05rem !important; /* Minimal gap between icon and text */
white-space: nowrap !important; /* Prevent wrapping */
line-height: 1 !important; /* Consistent line height */
vertical-align: baseline !important; /* Ensure baseline alignment */
}
/* Mobile feature icons in main sticky car card specs - perfect horizontal alignment */
#stickyCompareCard .car-card-compare .car-specs .feature-icon {
font-size: 0.75rem !important; /* Slightly larger than mobile text for visibility */
display: inline-flex !important; /* Use inline-flex for better alignment */
align-items: center !important; /* Center the icon itself */
justify-content: center !important; /* Center the icon content */
vertical-align: baseline !important; /* Align with text baseline */
line-height: 1 !important; /* Match text line height */
margin-right: 0.05rem !important; /* Minimal margin */
margin-bottom: 0 !important; /* Ensure no bottom margin */
margin-top: 0 !important; /* Ensure no top margin */
padding: 0 !important; /* Remove any padding */
flex-shrink: 0 !important; /* Don't shrink */
height: auto !important; /* Auto height for natural alignment */
}
/* Ensure inner span elements (values) in main sticky card align perfectly with icons */
#stickyCompareCard .car-card-compare .car-specs span span {
display: inline-flex !important; /* Use inline-flex for better alignment */
align-items: center !important; /* Center the text vertically */
vertical-align: baseline !important; /* Align with icon baseline */
line-height: 1 !important; /* Consistent line height */
margin: 0 !important; /* Remove any margins */
padding: 0 !important; /* Remove any padding */
height: auto !important; /* Auto height for natural alignment */
font-size: 0.65rem !important; /* Match mobile font size */
}
/* Mobile main sticky car card features container - perfect horizontal alignment */
#stickyCompareCard .car-card-compare .features {
padding: 0.3rem 0.2rem !important; /* More compact on mobile */
}
/* Mobile main sticky car card features row layout */
#stickyCompareCard .car-card-compare .features .row {
margin: 0 !important; /* Remove default Bootstrap margins */
gap: 0 !important; /* Remove gap between columns */
justify-content: space-between !important; /* Distribute evenly */
align-items: center !important;
width: 100% !important;
}
/* Mobile main sticky car card feature columns */
#stickyCompareCard .car-card-compare .features .col-auto {
flex: 1 !important; /* Take equal space */
max-width: none !important; /* Remove max-width constraint */
padding: 0 !important; /* Remove padding */
margin: 0 !important; /* Remove margin */
display: flex !important;
justify-content: center !important; /* Center content */
}
/* Mobile main sticky car card feature boxes - perfect horizontal alignment */
#stickyCompareCard .car-card-compare .feature-box {
display: inline-flex !important; /* Use inline-flex for perfect baseline alignment */
flex-direction: row !important; /* Force horizontal layout */
align-items: baseline !important; /* Align to baseline for perfect horizontal line */
gap: 0.05rem !important; /* Minimal gap between icon and text */
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.65rem !important; /* Smaller on mobile */
padding: 0.05rem 0.1rem !important; /* Minimal padding */
width: 100% !important; /* Take full available width */
white-space: nowrap !important; /* Prevent text wrapping */
overflow: hidden !important;
text-overflow: ellipsis !important;
justify-content: center !important; /* Center content */
max-width: 100% !important; /* Ensure it doesn't exceed container */
min-width: 0 !important; /* Allow shrinking */
line-height: 1 !important; /* Consistent line height */
vertical-align: baseline !important; /* Ensure baseline alignment */
}
/* Mobile main sticky car card feature icons - perfect horizontal alignment */
#stickyCompareCard .car-card-compare .feature-box .feature-icon {
color: #fd5631 !important;
font-size: 0.75rem !important; /* Smaller icons on mobile */
margin-right: 0.05rem !important; /* Minimal margin */
margin-bottom: 0 !important; /* Ensure no bottom margin */
margin-top: 0 !important; /* Ensure no top margin */
padding: 0 !important; /* Remove any padding */
flex-shrink: 0 !important; /* Don't shrink */
display: inline-flex !important; /* Ensure inline display */
align-items: center !important; /* Center the icon itself */
justify-content: center !important; /* Center the icon content */
vertical-align: baseline !important; /* Align with text baseline */
line-height: 1 !important; /* Match text line height */
height: auto !important; /* Auto height for natural alignment */
}
/* Mobile main sticky car card feature text - perfect horizontal alignment */
#stickyCompareCard .car-card-compare .feature-box .feature-text {
font-size: 0.65rem !important; /* Match feature-box font size */
white-space: nowrap !important; /* Prevent text wrapping like "57" and "K" */
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 !important; /* Take remaining space */
min-width: 0 !important; /* Allow shrinking */
display: inline-flex !important; /* Ensure inline display */
align-items: center !important; /* Center the text vertically */
vertical-align: baseline !important; /* Align with icon baseline */
line-height: 1 !important; /* Tight line height to prevent wrapping */
margin: 0 !important; /* Remove any margins */
padding: 0 !important; /* Remove any padding */
height: auto !important; /* Auto height for natural alignment */
}
/* Mobile main sticky car card vertical lines */
#stickyCompareCard .car-card-compare .vertical-line {
width: 1px !important;
height: 14px !important; /* Shorter on mobile */
background-color: rgba(255, 255, 255, 0.2) !important;
margin: 0 0.05rem !important; /* Minimal margin */
flex-shrink: 0 !important; /* Don't shrink */
}
/* Restore original padding for the main car card */
#stickyCompareCard .car-card-compare .card-body {
padding: 0.75rem !important; /* Restore original padding */
gap: 0.5rem !important; /* Restore original gap */
}
#stickyCompareCard .car-card-compare .car-price-container {
padding: 0.1rem 0.25rem !important; /* Restore original padding */
gap: 0.15rem !important; /* Restore original gap */
}
#stickyCompareCard .car-card-compare .car-price {
padding: 0.1rem 0.3rem !important; /* Restore original padding */
}
#stickyCompareCard .car-card-compare .car-year {
padding: 0.15rem 0.4rem !important; /* Restore original padding */
margin-right: 0.35rem !important; /* Restore original margin */
}
/* Comparison cards specific mobile styles */
#sellers-comparison-content .car-card-compare .card-body,
#price-comparison-content .car-card-compare .card-body {
padding: 0.02rem 0.05rem !important; /* Reduced by ~90% */
gap: 0.05rem !important; /* Reduced gap */
}
#sellers-comparison-content .car-card-compare .car-year,
#price-comparison-content .car-card-compare .car-year {
font-size: 0.5rem !important; /* Reduced by ~40% */
padding: 0.02rem 0.08rem !important; /* Reduced by ~80% */
margin-right: 0.07rem !important; /* Reduced by ~80% */
border-radius: 3px !important; /* Reduced by 25% from 4px */
}
#sellers-comparison-content .car-card-compare .card-title,
#price-comparison-content .car-card-compare .card-title {
font-size: 0.6rem !important; /* Reduced by ~40% */
line-height: 1.1 !important; /* Tighter line height */
}
/* Price section in comparison cards */
#sellers-comparison-content .car-card-compare .car-price-container,
#price-comparison-content .car-card-compare .car-price-container {
padding: 0.02rem 0.05rem !important; /* Reduced by ~90% */
gap: 0.1rem !important; /* Increased for better readability */
margin-bottom: 0.15rem !important; /* Add space after price */
border-radius: 4.5px !important; /* Reduced by 25% from 6px */
}
/* Reduce border radius for price tag */
#sellers-comparison-content .car-card-compare .car-price-container::before,
#price-comparison-content .car-card-compare .car-price-container::before {
border-radius: 1.5px 0 0 1.5px !important; /* Reduced by 25% from 2px */
}
#sellers-comparison-content .car-card-compare .feature-icon,
#price-comparison-content .car-card-compare .feature-icon {
margin-right: 0.05rem !important; /* Increased for better spacing */
}
#sellers-comparison-content .car-card-compare .vertical-line,
#price-comparison-content .car-card-compare .vertical-line {
margin: 0 0.0375rem !important; /* Reduced by 25% from 0.05rem */
}
/* Mobile car specs adjustments - uniform font for entire row with perfect horizontal alignment */
#sellers-comparison-content .car-card-compare .car-specs,
#price-comparison-content .car-card-compare .car-specs {
font-size: 0.65rem !important; /* Even smaller on mobile */
gap: 0.2rem !important; /* Smaller gap */
display: flex !important; /* Ensure flex layout */
align-items: baseline !important; /* Align to baseline for perfect horizontal line */
flex-wrap: nowrap !important; /* Prevent wrapping */
}
/* Ensure all span elements in mobile car-specs row have perfect horizontal alignment */
#sellers-comparison-content .car-card-compare .car-specs span,
#price-comparison-content .car-card-compare .car-specs span {
font-size: 0.65rem !important; /* Uniform mobile font size for all elements */
font-weight: 300 !important; /* Consistent font weight */
display: inline-flex !important; /* Use inline-flex for perfect baseline alignment */
align-items: baseline !important; /* Align to baseline for straight line */
gap: 0.05rem !important; /* Minimal gap between icon and text */
white-space: nowrap !important; /* Prevent wrapping */
line-height: 1 !important; /* Consistent line height */
vertical-align: baseline !important; /* Ensure baseline alignment */
}
/* Mobile feature icons in specs - perfect horizontal alignment with values */
#sellers-comparison-content .car-card-compare .car-specs .feature-icon,
#price-comparison-content .car-card-compare .car-specs .feature-icon {
font-size: 0.6rem !important; /* Much smaller to prevent icons appearing above values */
display: inline-flex !important; /* Use inline-flex for better alignment */
align-items: center !important; /* Center the icon itself */
justify-content: center !important; /* Center the icon content */
vertical-align: baseline !important; /* Align with text baseline */
line-height: 1 !important; /* Match text line height */
margin-right: 0.05rem !important; /* Minimal margin */
margin-bottom: 0 !important; /* Ensure no bottom margin */
margin-top: 0 !important; /* Ensure no top margin */
padding: 0 !important; /* Remove any padding */
flex-shrink: 0 !important; /* Don't shrink */
height: auto !important; /* Auto height for natural alignment */
}
/* Ensure inner span elements (values) align perfectly with icons */
#sellers-comparison-content .car-card-compare .car-specs span span,
#price-comparison-content .car-card-compare .car-specs span span {
display: inline-flex !important; /* Use inline-flex for better alignment */
align-items: center !important; /* Center the text vertically */
vertical-align: baseline !important; /* Align with icon baseline */
line-height: 1 !important; /* Consistent line height */
margin: 0 !important; /* Remove any margins */
padding: 0 !important; /* Remove any padding */
height: auto !important; /* Auto height for natural alignment */
font-size: 0.65rem !important; /* Match parent font size */
}
/* Hide only the home icon on mobile for comparison cards, keep the engine size value */
#sellers-comparison-content .car-card-compare .car-specs span:nth-child(2) .fas.fa-home,
#price-comparison-content .car-card-compare .car-specs span:nth-child(2) .fas.fa-home {
display: none !important; /* Hide only the home icon, not the entire span */
}
/* Remove left margin from engine size span since we removed the icon */
#sellers-comparison-content .car-card-compare .car-specs span:nth-child(2),
#price-comparison-content .car-card-compare .car-specs span:nth-child(2) {
margin-left: 0.15rem !important; /* Reduced margin since no icon */
}
/* Adjust spacing for location span */
#sellers-comparison-content .car-card-compare .car-specs span:nth-child(3),
#price-comparison-content .car-card-compare .car-specs span:nth-child(3) {
margin-left: 0.15rem !important; /* Consistent spacing */
}
/* Mobile features container fixes */
#sellers-comparison-content .car-card-compare .features,
#price-comparison-content .car-card-compare .features {
padding: 0.3rem 0.2rem !important; /* More compact on mobile */
}
/* Mobile features row layout to reduce gaps */
#sellers-comparison-content .car-card-compare .features .row,
#price-comparison-content .car-card-compare .features .row {
margin: 0 !important; /* Remove default Bootstrap margins */
gap: 0 !important; /* Remove gap between columns */
justify-content: space-between !important; /* Distribute evenly */
align-items: center !important;
width: 100% !important;
}
/* Mobile feature columns to take equal space */
#sellers-comparison-content .car-card-compare .features .col-auto,
#price-comparison-content .car-card-compare .features .col-auto {
flex: 1 !important; /* Take equal space */
max-width: none !important; /* Remove max-width constraint */
padding: 0 !important; /* Remove padding */
margin: 0 !important; /* Remove margin */
display: flex !important;
justify-content: center !important; /* Center content */
}
/* Mobile feature boxes to fit perfectly horizontally with baseline alignment */
#sellers-comparison-content .car-card-compare .feature-box,
#price-comparison-content .car-card-compare .feature-box {
display: inline-flex !important; /* Use inline-flex for perfect baseline alignment */
flex-direction: row !important; /* Force horizontal layout */
align-items: baseline !important; /* Align to baseline for perfect horizontal line */
gap: 0.05rem !important; /* Minimal gap between icon and text */
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.65rem !important; /* Smaller on mobile */
padding: 0.05rem 0.1rem !important; /* Minimal padding */
width: 100% !important; /* Take full available width */
white-space: nowrap !important; /* Prevent text wrapping */
overflow: hidden !important;
text-overflow: ellipsis !important;
justify-content: center !important; /* Center content */
max-width: 100% !important; /* Ensure it doesn't exceed container */
min-width: 0 !important; /* Allow shrinking */
line-height: 1 !important; /* Consistent line height */
vertical-align: baseline !important; /* Ensure baseline alignment */
}
/* Mobile feature icons - ensure perfect horizontal alignment */
#sellers-comparison-content .car-card-compare .feature-box .feature-icon,
#price-comparison-content .car-card-compare .feature-box .feature-icon {
color: #fd5631 !important;
font-size: 0.75rem !important; /* Smaller icons on mobile */
margin-right: 0.05rem !important; /* Minimal margin */
margin-bottom: 0 !important; /* Ensure no bottom margin */
margin-top: 0 !important; /* Ensure no top margin */
padding: 0 !important; /* Remove any padding */
flex-shrink: 0 !important; /* Don't shrink */
display: inline-flex !important; /* Use inline-flex for better alignment */
align-items: center !important; /* Center the icon itself */
justify-content: center !important; /* Center the icon content */
vertical-align: baseline !important; /* Align with text baseline */
line-height: 1 !important; /* Match text line height */
height: auto !important; /* Auto height */
}
/* Mobile feature text - ensure perfect horizontal alignment */
#sellers-comparison-content .car-card-compare .feature-box .feature-text,
#price-comparison-content .car-card-compare .feature-box .feature-text {
font-size: 0.65rem !important; /* Match feature-box font size */
white-space: nowrap !important; /* Prevent text wrapping like "57" and "K" */
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 !important; /* Take remaining space */
min-width: 0 !important; /* Allow shrinking */
display: inline-flex !important; /* Use inline-flex for better alignment */
align-items: center !important; /* Center the text vertically */
vertical-align: baseline !important; /* Align with icon baseline */
line-height: 1 !important; /* Tight line height to prevent wrapping */
margin: 0 !important; /* Remove any margins */
padding: 0 !important; /* Remove any padding */
height: auto !important; /* Auto height */
}
/* Mobile vertical lines to be minimal */
#sellers-comparison-content .car-card-compare .vertical-line,
#price-comparison-content .car-card-compare .vertical-line {
width: 1px !important;
height: 14px !important; /* Shorter on mobile */
background-color: rgba(255, 255, 255, 0.2) !important;
margin: 0 0.05rem !important; /* Minimal margin */
flex-shrink: 0 !important; /* Don't shrink */
}
/* Fix excessive height issue specifically for sellers comparison cards on mobile */
#sellers-comparison-content .car-card-compare {
height: auto !important; /* Auto height instead of fixed height */
min-height: auto !important; /* Remove minimum height constraints */
max-height: none !important; /* Remove maximum height constraints */
display: flex !important;
flex-direction: column !important;
}
/* ULTIMATE FIX: Override the root cause - carCompare.css line 278 flex: 1 */
#sellers-comparison-content .car-card-compare .card-body {
flex: 0 0 auto !important; /* COMPLETELY override carCompare.css flex: 1 that causes expansion */
height: fit-content !important; /* Size to content only */
min-height: fit-content !important; /* Size to content only */
max-height: fit-content !important; /* Size to content only */
padding: 0.075rem !important; /* MATCH carCompare.css line 2048 - same as price comparison */
gap: 0.2rem !important; /* MATCH carCompare.css line 2051 - same as price comparison */
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* Align content to top */
align-items: stretch !important; /* Stretch items to fill width */
background-color: #282534 !important; /* Ensure background color is maintained */
text-align: left !important; /* Ensure text alignment is maintained */
overflow: visible !important; /* Allow normal overflow */
box-sizing: border-box !important; /* Include padding in height calculation */
position: relative !important; /* Ensure normal positioning */
}
/* FORCE SELLERS COMPARISON CARD CONTAINER TO MATCH PRICE COMPARISON */
#sellers-comparison-content .car-card-compare {
border-radius: 11.25px !important; /* MATCH carCompare.css line 2043 - same as price comparison */
align-items: stretch !important; /* Stretch to fill container */
justify-content: flex-start !important; /* Align content to top */
height: fit-content !important; /* Size to content only */
min-height: fit-content !important; /* Size to content only */
max-height: fit-content !important; /* Size to content only */
flex: 0 0 auto !important; /* Remove any flex growth behavior */
display: flex !important; /* Ensure flex display */
flex-direction: column !important; /* Column layout */
overflow: visible !important; /* Allow normal overflow */
box-sizing: border-box !important; /* Include borders in height */
position: relative !important; /* Ensure normal positioning */
}
/* Fix sellers comparison card container to prevent height issues */
#sellers-comparison-content .car-card-compare .card-img-wrapper {
flex-shrink: 0 !important; /* Don't shrink image wrapper */
}
/* AGGRESSIVE GAP ELIMINATION FOR SELLERS COMPARISON CARDS */
/* Force all child elements to have no bottom margins */
#sellers-comparison-content .car-card-compare .card-body > * {
margin-bottom: 0 !important; /* Remove all bottom margins */
padding-bottom: 0 !important; /* Remove all bottom padding */
}
/* Force features to be the last element with no spacing */
#sellers-comparison-content .car-card-compare .features {
margin-bottom: 0 !important; /* Remove bottom margin */
padding-bottom: 0 !important; /* Remove bottom padding */
margin-top: 0.2rem !important; /* Only top margin to match gap */
flex-shrink: 0 !important; /* Don't shrink */
height: auto !important; /* Auto height */
min-height: auto !important; /* No minimum height */
max-height: auto !important; /* No maximum height */
}
/* Force card body to end exactly where content ends */
#sellers-comparison-content .car-card-compare .card-body::after {
content: none !important; /* Remove any pseudo-elements */
}
/* Remove any inherited spacing from parent containers */
#sellers-comparison-content .car-card-compare .card-body > *:last-child {
margin-bottom: 0 !important; /* Force last element to have no bottom margin */
padding-bottom: 0 !important; /* Force last element to have no bottom padding */
}
/* Title and year section - MATCH carCompare.css lines 2055-2059 */
#sellers-comparison-content .car-card-compare .d-flex.align-items-center {
gap: 0.15rem !important; /* MATCH price comparison */
margin-bottom: 0.15rem !important; /* MATCH price comparison */
}
/* Car specs section - MATCH carCompare.css lines 2062-2066 */
#sellers-comparison-content .car-card-compare .car-specs {
gap: 0.1125rem !important; /* MATCH price comparison - reduced by 25% from 0.15rem */
margin-bottom: 0.15rem !important; /* MATCH price comparison */
}
/* Price section - MATCH carCompare.css lines 2069-2075 */
#sellers-comparison-content .car-card-compare .car-price-container {
padding: 0.02rem 0.05rem !important; /* MATCH price comparison - reduced by ~90% */
gap: 0.1rem !important; /* MATCH price comparison */
margin-bottom: 0.15rem !important; /* MATCH price comparison */
border-radius: 4.5px !important; /* MATCH price comparison - reduced by 25% from 6px */
}
/* Car year badge - MATCH carCompare.css lines 2078-2081 */
#sellers-comparison-content .car-card-compare .car-year {
border-radius: 3px !important; /* MATCH price comparison - reduced by 25% from 4px */
}
/* Features section - MATCH carCompare.css lines 2098-2103 */
#sellers-comparison-content .car-card-compare .features .row.g-0 {
justify-content: space-around !important; /* MATCH price comparison */
gap: 0.075rem !important; /* MATCH price comparison - reduced by 25% from 0.1rem */
padding: 0.025rem 0 !important; /* MATCH price comparison - reduced by ~90% */
}
/* Feature boxes - MATCH carCompare.css lines 2105-2109 */
#sellers-comparison-content .car-card-compare .feature-box {
padding: 0.025rem !important; /* MATCH price comparison - reduced by ~90% */
border-radius: 3px !important; /* MATCH price comparison */
}
/* Price tag border radius - MATCH carCompare.css lines 2112-2115 */
#sellers-comparison-content .car-card-compare .car-price-container::before {
border-radius: 1.5px 0 0 1.5px !important; /* MATCH price comparison - reduced by 25% from 2px */
}
/* Feature icons - MATCH carCompare.css lines 2117-2120 */
#sellers-comparison-content .car-card-compare .feature-icon {
margin-right: 0.05rem !important; /* MATCH price comparison */
}
/* Vertical lines - MATCH carCompare.css lines 2122-2125 */
#sellers-comparison-content .car-card-compare .vertical-line {
margin: 0 0.0375rem !important; /* MATCH price comparison - reduced by 25% from 0.05rem */
}
/* Ensure price comparison cards maintain consistent styling */
#price-comparison-content .car-card-compare {
align-items: stretch !important; /* Stretch to fill container */
justify-content: flex-start !important; /* Align content to top */
}
}
/* Fix features section */
#sellers-comparison-content .car-card-compare .features,
#price-comparison-content .car-card-compare .features {
padding: 0.15rem !important;
border-radius: 8px !important;
margin-top: 0.3rem !important;
background-color: rgba(255, 255, 255, 0.03) !important;
}
/* Fix feature boxes */
#sellers-comparison-content .car-card-compare .feature-box,
#price-comparison-content .car-card-compare .feature-box {
display: flex !important;
align-items: center !important;
gap: 0.05rem !important;
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.8rem !important;
padding: 0.05rem 0.5rem !important;
width: fit-content !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 80px !important; /* Limit width for better layout */
}
/* Fix vertical lines */
#sellers-comparison-content .car-card-compare .vertical-line,
#price-comparison-content .car-card-compare .vertical-line {
width: 1px !important;
height: 20px !important;
background-color: rgba(255, 255, 255, 0.2) !important;
margin: 0 0.25rem !important;
flex-shrink: 0 !important; /* Prevent the line from shrinking */
}
/* Responsive fixes for feature boxes on larger screens */
@media (min-width: 992px) {
#sellers-comparison-content .car-card-compare .feature-box,
#price-comparison-content .car-card-compare .feature-box {
max-width: 90px !important; /* Reduced for 4 cards per row */
}
}
@media (min-width: 1200px) {
#sellers-comparison-content .car-card-compare .feature-box,
#price-comparison-content .car-card-compare .feature-box {
max-width: 120px !important; /* More space on extra large screens */
}
}