/* /automobiliai: public car search (modules/automobiliai.php) */
.cars-search {--cs-navy: #3a536d; --cs-blue: #577ba2; --cs-line: #e1e7ef; --cs-soft: #f4f7fb; --cs-muted: #6b7785;
	border: 1px solid var(--cs-line); border-radius: 12px; padding: 22px 24px; font-size: 15px; color: #1f2933; text-align: left}
.main > .content {font-size: 14px}
.cars-search * {box-sizing: border-box}
.cars-search .cars-title {margin: 0; font-size: 24px; font-weight: 500; color: var(--cs-navy); text-align: left}
.cars-search .cars-lead {margin: 6px 0 18px; color: var(--cs-muted); font-size: 15px; line-height: 1.45}

/* filter */
.cars-filter {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr) auto; gap: 12px; align-items: end;
	padding: 16px; margin-bottom: 18px; background: var(--cs-soft); border: 1px solid var(--cs-line); border-radius: 12px}
.cars-field {display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0}
.cars-field > span {font-size: 13px; font-weight: 500; color: var(--cs-navy)}
.cars-field select {width: 100%; height: 42px; padding: 0 10px; font: inherit; font-size: 15px; color: #1f2933; background: #fff;
	border: 1px solid #c9d3df; border-radius: 8px}
.cars-field select:disabled {background: #eef1f5; color: #9aa5b1}
.cars-years > div {display: flex; align-items: center; gap: 6px}
.cars-years i {font-style: normal; color: var(--cs-muted)}
.cars-submit {height: 42px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--cs-blue); color: #fff; font: inherit;
	font-size: 15px; font-weight: 500; cursor: pointer}
.cars-submit:hover {background: var(--cs-navy)}

.cars-count {margin: 0 0 12px; color: var(--cs-muted); font-size: 15px}
.cars-count b {color: var(--cs-navy)}
.cars-empty {padding: 24px 0; font-size: 16px; color: var(--cs-muted)}

/* results */
.cars-search ul.cars-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none}
.cars-grid .car-card {margin: 0; padding: 0; list-style: none}
.car-card > a {display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--cs-line); border-radius: 12px;
	overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s}
.car-card > a:hover {box-shadow: 0 8px 24px rgba(31, 41, 51, .12); transform: translateY(-2px); text-decoration: none}
.car-photo {aspect-ratio: 4 / 3; background: var(--cs-soft); display: flex; align-items: center; justify-content: center; overflow: hidden}
.car-photo img {display: block; width: 100%; height: 100%; object-fit: cover}
.car-photo img.no-img {width: 45%; height: auto; object-fit: contain; opacity: .55}
.car-body {display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px}
.cars-search .car-title {margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--cs-navy)}
.car-cons {display: flex; flex-direction: column; gap: 1px}
.car-cons span {font-size: 12px; color: var(--cs-muted)}
.car-cons strong {font-size: 18px; font-weight: 600; color: #1f2933}
.car-facts {display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--cs-line)}
.car-facts > div {min-width: 0}
.car-facts dt {font-size: 12px; color: var(--cs-muted); margin: 0}
.car-facts dd {margin: 2px 0 0; font-size: 14px; font-weight: 500; white-space: nowrap}

/* pagination (libs/Paginate.php) */
.cars-paging {margin-top: 22px}
.cars-paging ul.paging {display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none}
.cars-paging ul.paging li {margin: 0; padding: 0; list-style: none; float: none}
.cars-paging ul.paging a, .cars-paging ul.paging li.serperator {display: flex; align-items: center; justify-content: center; min-width: 40px;
	height: 40px; padding: 0 12px; border: 1px solid var(--cs-line); border-radius: 8px; background: #fff; color: var(--cs-navy);
	font-size: 15px; text-decoration: none}
.cars-paging ul.paging li.serperator {border: 0; background: none}
.cars-paging ul.paging a:hover {background: var(--cs-soft)}
.cars-paging ul.paging a.active {background: var(--cs-blue); border-color: var(--cs-blue); color: #fff}
/* undo the legacy mobile paging look from main.css */
.cars-paging ul.paging {height: auto; padding: 0}
.cars-paging ul.paging li a, .cars-paging ul.paging li a.paging-active-button, .cars-paging ul.paging a.prev-paging-button,
.cars-paging ul.paging a.next-paging-button {float: none; width: auto; margin: 0; line-height: normal; text-shadow: none; box-shadow: none;
	font: inherit; font-size: 15px; background-image: none}
.cars-paging ul.paging a.prev-paging-button, .cars-paging ul.paging a.next-paging-button {background-color: #fff; color: var(--cs-navy); border: 1px solid var(--cs-line)}
.cars-paging ul.paging li a.paging-active-button {display: flex; background-color: var(--cs-blue); color: #fff; padding: 0 12px}

@media (max-width: 1100px) {
	.cars-filter {grid-template-columns: repeat(2, minmax(0, 1fr))}
	.cars-years {grid-column: span 2}
	.cars-submit {grid-column: 1 / -1}
}

/* phones: horizontal cards, big touch targets */
@media (max-width: 640px) {
	.cars-search {padding: 14px; border-radius: 10px}
	.cars-search .cars-title {font-size: 21px}
	.cars-search .cars-lead {font-size: 14px; margin-bottom: 14px}
	.cars-filter {padding: 12px; gap: 10px}
	.cars-field select, .cars-submit {height: 44px; font-size: 16px}
	.cars-search ul.cars-grid {grid-template-columns: 1fr; gap: 10px}
	.car-card > a {flex-direction: row}
	.car-photo {flex: 0 0 40%; aspect-ratio: auto; min-height: 112px}
	.car-body {flex: 1; min-width: 0; padding: 10px 12px; gap: 6px}
	.cars-search .car-title {font-size: 16px}
	.car-cons strong {font-size: 16px}
	.car-facts {justify-content: flex-start; gap: 4px 14px; padding-top: 6px}
	.car-facts > div:nth-child(3) {display: none}
	.car-facts dd {font-size: 13px}
	/* phones: arrows + the current page and two pages on each side */
	.cars-paging ul.paging {gap: 5px}
	.cars-paging ul.paging li {display: none}
	.cars-paging ul.paging li:has(a.active), .cars-paging ul.paging li:has(a.prev-paging-button), .cars-paging ul.paging li:has(a.next-paging-button),
	.cars-paging ul.paging li:has(+ li a.active), .cars-paging ul.paging li:has(+ li + li a.active),
	.cars-paging ul.paging li:has(a.active) + li, .cars-paging ul.paging li:has(a.active) + li + li {display: block}
	.cars-paging ul.paging li.serperator {display: none !important}
	.cars-paging ul.paging li a, .cars-paging ul.paging li a.paging-active-button, .cars-paging ul.paging li a.prev-paging-button,
	.cars-paging ul.paging li a.next-paging-button {display: flex; height: 44px; min-width: 44px; padding: 0 8px}
	.cars-paging ul.paging li a.prev-paging-button, .cars-paging ul.paging li a.next-paging-button {font-size: 0}
	.cars-paging ul.paging li a.prev:before {content: '\2039'; font-size: 26px; line-height: 1}
	.cars-paging ul.paging li a.next:before {content: '\203A'; font-size: 26px; line-height: 1}
}