/* Vehicle Listings page specific styles extracted from the template */
.header-container-padding { padding-right: 90px; padding-left: 90px; }
@media (max-width: 768px) { .header-container-padding { padding-right: 15px; padding-left: 15px; } }
/* Top Filter Bar Styles */
.top-filter-bar { background: #fff; padding: 25px 30px; margin-bottom: 30px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.filter-controls-wrapper { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.filter-group { flex: 1; min-width: 200px; }
.filter-group-label { font-size: 13px; font-weight: 600; color: #333; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; display: block; }
.model-search-wrapper { position: relative; }
.model-search-input { width: 100%; padding: 12px 45px 12px 15px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 14px; color: #555; transition: all 0.3s ease; }
.model-search-input:focus { outline: none; border-color: #dc2d13; box-shadow: 0 0 0 3px rgba(220, 45, 19, 0.1); }
.model-search-input::placeholder { color: #999; }
.search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #999; font-size: 16px; pointer-events: none; }
.sort-dropdown-wrapper { position: relative; }
.sort-dropdown { width: 100%; padding: 12px 35px 12px 15px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 14px; color: #555; background: #fff; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: all 0.3s ease; }
.sort-dropdown:focus { outline: none; border-color: #dc2d13; box-shadow: 0 0 0 3px rgba(220, 45, 19, 0.1); }
.dropdown-arrow { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #999; font-size: 12px; pointer-events: none; }
.view-toggle-group { display: none; }
.view-toggle-btn { display: none; }
.filter-action-btn { background: #dc2d13; color: #fff; border: none; padding: 13px 40px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; }
.filter-action-btn:hover { background: #b82410; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(220, 45, 19, 0.3); }
@media (max-width: 992px) { .filter-controls-wrapper { flex-direction: column; } .filter-group { width: 100%; } }
.filter-dropdown { background: #fff; border: 1px solid #e0e0e0; margin-bottom: 15px; transition: all 0.3s ease; }
.filter-dropdown:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.filter-header { padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; border-bottom: 1px solid #e0e0e0; transition: background 0.3s ease; }
.filter-header:hover { background: #f9f9f9; }
.filter-header h4 { margin: 0; font-size: 14px; font-weight: 500; text-transform: capitalize; color: #333; }
.filter-arrow { font-size: 12px; color: #666; transition: transform 0.3s ease; }
.filter-dropdown.active .filter-arrow { transform: rotate(180deg); }
.filter-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #fff; }
.filter-dropdown.active .filter-content { max-height: 400px; overflow-y: auto; }
.filter-options { padding: 10px 20px 20px; }
.filter-option { padding: 8px 0; display: flex; align-items: center; cursor: pointer; transition: color 0.2s ease; }
.filter-option:hover { color: #fe5656; }
.filter-option input[type="checkbox"], .filter-option input[type="radio"] { margin-right: 10px; cursor: pointer; }
.filter-option label { cursor: pointer; margin: 0; font-size: 13px; color: #555; flex: 1; }
.filter-option:hover label { color: #fe5656; }
.filter-count { color: #999; font-size: 12px; }
.sidebar-enhanced { background: #f8f8f8; padding: 20px; border-radius: 5px; }
.filter-section-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.btn-apply-filters { background: #dc2d13 !important; border-color: #dc2d13 !important; }
.btn-apply-filters:hover { background: #b82410 !important; border-color: #b82410 !important; }
.btn-reset-filters { background: transparent !important; border: 2px solid #cccccc !important; color: #666666 !important; }
.btn-reset-filters:hover { background: #f5f5f5 !important; border-color: #999999 !important; color: #333333 !important; }
.btn-reset-filters .btn-skew-r__inner { color: #666666 !important; }
.btn-reset-filters:hover .btn-skew-r__inner { color: #333333 !important; }
@media (min-width: 769px) { #sidebarFilters .btn { display: flex; justify-content: center; } .wrap__btn-skew-r .btn-skew-r { width: 260px !important; max-width: 100%; box-sizing: border-box; } }
@media (min-width: 769px) { .wrap__btn-skew-r.full-width { width: 100%; display: block; } .wrap__btn-skew-r.full-width .btn-skew-r { width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; } .wrap__btn-skew-r.full-width .btn-skew-r__inner { display: inline-block; width: auto; } }
.filter-content::-webkit-scrollbar { width: 6px; }
.filter-content::-webkit-scrollbar-track { background: #f1f1f1; }
.filter-content::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }
.filter-content::-webkit-scrollbar-thumb:hover { background: #555; }
.price-filter-wrapper { padding: 20px; background: #fff; border: 1px solid #e0e0e0; margin-bottom: 15px; }
.price-filter-wrapper h4 { margin: 0 0 15px 0; font-size: 14px; font-weight: 500; text-transform: capitalize; color: #333; }
.grid-icon { display: inline-block; width: 16px; height: 16px; }
.grid-icon::before { content: '▦'; font-size: 16px; }
.list-icon::before { content: '☰'; font-size: 16px; }
@media (max-width: 768px) { ul.pagination { margin: 8px 0 6px !important; padding: 0; display: flex; gap: 6px; justify-content: center; } ul.pagination li { margin: 0 !important; padding: 0 !important; display: inline-block; } main.main-content { margin-bottom: 8px; } article.card { margin-bottom: 14px; } .btn-apply-filters, .btn-reset-filters { display: block !important; width: 100% !important; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; } .btn-reset-filters { margin-bottom: 8px !important; } }
@media (max-width: 768px) { .view-filter { display: none !important; } }
@media (max-width: 768px) { .card__img { width: 100% !important; height: auto !important; overflow: hidden; margin-bottom: 15px; } .card__img img { width: 100% !important; height: auto !important; max-width: 100%; object-fit: cover; display: block; } article.card { display: block !important; margin-bottom: 20px; padding: 15px; } .card__img, .card__inner { float: none !important; width: 100% !important; } .card__inner { padding: 15px 0 0 0 !important; } article.card::after { content: ""; display: table; clear: both; } }
.btn-filter-primary, .btn-filter-secondary { width: 100%; padding: 14px 20px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border: none; cursor: pointer; transition: all 0.3s ease; margin-bottom: 12px; display: block; }
.btn-filter-primary { background: #dc2d13; color: #fff; border: 2px solid #dc2d13; }
.btn-filter-primary:hover { background: #b82410; border-color: #b82410; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(220, 45, 19, 0.3); }
.btn-filter-secondary { background: #fff; color: #666; border: 2px solid #ddd; }
.btn-filter-secondary:hover { background: #f5f5f5; border-color: #999; color: #333; transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

/* Make card show clickable cursor for links */
.card-clickable { cursor: pointer; }
.card-clickable .card__inner a { text-decoration: none; }

/* Remove underline and reset link styles for clickable car-card wrapper */
a.car-image-link,
a.car-title-link,
a.car-image-link:visited,
a.car-title-link:visited,
a.car-image-link:hover,
a.car-title-link:hover,
a.car-image-link:active,
a.car-title-link:active {
	text-decoration: none !important;
	color: inherit;
	display: block;
}

/* Ensure nested text inside link doesn't get underlined by any other rules */
a.car-image-link *,
a.car-title-link * {
	text-decoration: none !important;
}

/* Keep focus visible for keyboard users while preventing default underline */
a.car-image-link:focus,
a.car-title-link:focus{
	outline: 2px dashed rgba(0,0,0,0.12);
	outline-offset: 3px;
}

/* Clickable behavior for image/title links */
.car-image-link, .car-title-link { cursor: pointer; }
.car-image-link img { display: block; }