/*The search page's own top spacing, on the container inside .content rather than on #top-content
  itself - that element's padding is the fixed header's clearance, and the site banner handler in
  php/includes/page-js.php recalculates it whenever a banner is set.

  ?Used to be an inline <style> block printed above search.php's include of config.php - which sent
  ?output before config.php could send its https redirect header, so that redirect fell back to a
  ?javascript hop instead of a 301*/
.search-page {
	padding-top: 25px;
}

/*Page heading - sits above the result count, at the size the rest of the site's page headings use*/
#search-page-heading {
	font-size: 30px;
	margin-top: 0;
	margin-bottom: 8px;
}

.results-row {
	display: flex;
	flex-wrap: wrap;
}

.result_container {
	margin-bottom: 20px;
	display: flex;
}

.result_container a {
	display: flex;
	width: 100%;
}

.result-panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

.result-panel:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.result-panel .panel-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.result-picture {
	width: 100%;
	height: 180px;
	background-color: #f5f5f5;
	overflow: hidden;
}

/* The photo used to be this box's background-image, which is invisible to image search.
   It is a real <img> now; object-fit reproduces exactly what background-size: cover was
   doing, so the tile crops and sizes the way it always did. */
.result-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.result-title {
	margin-top: 0;
	margin-bottom: 5px;
	font-size: 16px;
}

.result-meta {
	color: #777;
	font-size: 13px;
	margin-bottom: 5px;
}

.result-price {
	font-size: 18px;
	font-weight: 600;
	margin-top: auto;
}

#result-filter-container a,
.result_container a {
	color: inherit;
	text-decoration: none;
}

/*Tile / table toggle above the results - outside #resultscontainer, which the ajax refill empties*/
.search-results-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

/*Table view - see VehicleInventory::resultTableHtml().
  ?Every cell holds a link to the vehicle, and the link is what carries the padding, so a click
  ?anywhere on the row lands on the vehicle. Every link has the same min-height - the photo plus its
  ?padding - so they all fill the row and the text sits centred beside the photo.
  ?This used to be height: 1px on the cell and height: 100% on the link. Chrome resolves that against
  ?the finished row, Safari takes 100% of the 1px literally, which left every row 17.5px tall with the
  ?photo spilling out of it. A fixed min-height means the same thing in every browser*/
.results-table-container {
	background-color: #fff;
	margin-bottom: 20px;
}

.results-table {
	margin-bottom: 0;
}

.results-table > thead > tr > th {
	white-space: nowrap;
}

.results-table > tbody > tr > td {
	padding: 0;
	vertical-align: middle;
}

.results-table > tbody > tr > td > a {
	display: flex;
	align-items: center;
	min-height: 116px;
	padding: 8px;
	color: inherit;
	text-decoration: none;
}

.results-table > tbody > tr > td.text-right > a {
	justify-content: flex-end;
}

/*The photo sets the row height - 100px tall inside the cell's 8px padding, so every row is at least
  116px and the picture always sits inside it. 4:3, which is close to what the lot photos are shot
  at, so cover crops next to nothing off them*/
.results-table .results-table-photo {
	width: 150px;
}

.results-table .results-table-photo img {
	display: block;
	width: 134px;
	height: 100px;
	max-width: none;
	object-fit: cover;
	background-color: #f5f5f5;
	border-radius: 3px;
}

.results-table .results-table-model {
	font-weight: 600;
}

.results-table .result-price {
	font-size: 16px;
	margin-top: 0;
	white-space: nowrap;
}

.results-table .result-price .vehicle-price-was {
	font-size: 13px;
}

/* Sticker price shown beside a sale price - reads as the price that was, see VehicleInventory::displayPrice() */
.result-price .vehicle-price-was {
	color: #999;
	font-size: 15px;
	font-weight: 400;
	margin-right: 4px;
}