/*
Theme Name: DealerPro.io
Theme URI: https://dealerpro.io/
Machine Name: dealerpro
Author: DealerPro.io
Author URI: https://dealerpro.io/
Description: Front-end theme for DealerPro.io, powered by Aduvio.
Version: 1.1
*/

/*
	DealerPro theme - base typography

	Titles default to Montserrat and body copy to Roboto. These are only the theme
	defaults: the fonts picked in Aduvio > Front-end settings > Typography are printed
	after this file (php/includes/css-from-settings.php) and override everything here.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
	font-family: "Roboto", sans-serif;
}

/* All titles - the headings plus the title elements that are not headings */
h1,
h2,
h3,
h4,
h5,
h6,
.home-hero-title,
.home-hero-subtitle,
.site-footer-title,
.blog-post-title,
.blog-post-sub-title,
.result-title,
.form-section-title,
.panel-title,
.modal-title {
	font-family: "Montserrat", sans-serif;
}


/* Fluid form control text so long French placeholders don't overflow on narrow phones */

.form-control,
input,
select,
textarea {
	font-size: clamp(12px, calc(8px + 1.25vw), 14px) !important;
}


/*
	Theme default for the main colour. The colour picked in Aduvio > Front-end settings
	> Main theme color is printed after this file (php/includes/css-from-settings.php) with
	!important, so this only applies when no colour is set there.
*/

.primary-bg {
	background-color: #2196f3;
}


#loi-25-overlay {
    position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 9999; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}


/*Dark Google map
The maps.google.com embed accepts no styles parameter, so the dark theme is produced by
inverting the tiles and rotating the hue back to true colours. Set on the map container by
the page that owns it (Home Page and Contact Page > Map Style in the website settings)*/

.map-dark {
    background: #1b1f24;
}

.map-dark iframe {
    filter: invert(92%) hue-rotate(180deg) brightness(0.92) contrast(1.05) saturate(0.75);
    -webkit-filter: invert(92%) hue-rotate(180deg) brightness(0.92) contrast(1.05) saturate(0.75);
}

/* ============================================================================
   Merged in from css/vehicle-carousel.css and css/review-carousel.css.

   They were two extra render-blocking requests for 1.6KB and 5KB - the home page
   asked for both and the vehicle page for one, and PSI was charging about 190ms
   apiece just to go and get them. Once compression is on, the round trip costs
   more than the bytes do.

   This file is the theme stylesheet every page already loads, so folding them in
   here costs the pages that do not use a carousel about 1.5KB gzipped and saves
   the two that do a request each. Keep new theme css here rather than adding
   another file.
   ============================================================================ */

/* ---------- Vehicle carousel ---------- */

/* Vehicle carousel - shared by the home page (featured / latest additions) and the vehicle
   details page ("You may also like"), driven by themes/dealerpro/js/vehicle-carousel.js */
.vehicle-carousel {
	position: relative;
	padding: 0 50px;
}

.vehicle-carousel-viewport {
	overflow: hidden;
}

.vehicle-carousel-track {
	display: flex;
	transition: transform 0.4s ease;
}

.vehicle-carousel-card {
	flex: 0 0 25%;
	max-width: 25%;
	box-sizing: border-box;
	padding: 0 10px;
	display: flex;
}

.vehicle-carousel-card a {
	display: flex;
	width: 100%;
}

@media (max-width: 991px) {
	.vehicle-carousel-card { flex-basis: 33.3333%; max-width: 33.3333%; }
}

@media (max-width: 767px) {
	.vehicle-carousel-card { flex-basis: 50%; max-width: 50%; }
}

@media (max-width: 480px) {
	.vehicle-carousel-card { flex-basis: 100%; max-width: 100%; }
}

.vehicle-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	cursor: pointer;
}

.vehicle-carousel-arrow:hover {
	background: #f5f5f5;
}

.vehicle-carousel-prev {
	left: 0;
}

.vehicle-carousel-next {
	right: 0;
}

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

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

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

.vehicle-carousel-card .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. */
.vehicle-carousel-card .result-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

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

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

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

.vehicle-carousel-card a {
	color: inherit;
	text-decoration: none;
}

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

/* Fewer cards than the viewport holds - vehicle-carousel.js flags the carousel as static so the
   short row centers itself instead of hugging the left edge, and the dead arrows come off */
.vehicle-carousel.vehicle-carousel-static .vehicle-carousel-track {
	justify-content: center;
}

.vehicle-carousel.vehicle-carousel-static .vehicle-carousel-arrow {
	display: none;
}

/* One card in the row - it takes the whole width rather than sitting at a quarter of it in the
   middle of an empty strip. :only-child rather than a flag from the JS so it holds for every row
   built out of these classes at every breakpoint, the review rows included, and over the phone
   peek width below - with nothing beside it there is nothing left to peek at */
.vehicle-carousel .vehicle-carousel-track .vehicle-carousel-card:only-child {
	flex-basis: 100%;
	max-width: 100%;
}


/* Phones: 50px of arrow gutter on each side of a 360px screen left the card itself under 260px
   wide. The arrows come off the gutter and sit over the edge of the row instead.
   The card used to be given 85% here so the next one peeked out beside it - the row is swiped
   (see the swipe handler in vehicle-carousel.js) and the peek is what says so. It was cut: once
   the row is down to one card across, that card is the whole row, and a screen this narrow has
   nothing to spare for half of the next one */
@media (max-width: 767px) {
	.vehicle-carousel {
		padding: 0 8px;
	}

	.vehicle-carousel-arrow {
		width: 36px;
		height: 36px;
		background: rgba(255,255,255,.92);
	}

	.vehicle-carousel-prev {
		left: 2px;
	}

	.vehicle-carousel-next {
		right: 2px;
	}
}

/* ---------- Review carousel ---------- */

/* The two review rows on the home page - the Google one and the dealership's own. The carousel
   itself is the vehicle one - same classes, same themes/dealerpro/js/vehicle-carousel.js, which
   sets up every .vehicle-carousel on the page independently - so this file is only what is inside
   a card, plus the three-across width the rows declare with data-visible-lg. Keep those two in
   step: the script counts how far the track may move, it does not measure it.

   A first-party review card carries three things a Google one cannot - a headline, a verified
   mark and the dealership's public answer - and those are the only rules below that one band uses
   and the other does not. */
.home-reviews {
	background: #f8f8f8;
	padding-top: 60px;
	padding-bottom: 60px;
	max-width: inherit !important;
}

.home-reviews-header {
	text-align: center;
	margin-bottom: 30px;
}

.home-reviews-header h2 {
	font-size: 36px;
	margin-top: 0;
	margin-bottom: 10px;
}

.home-reviews-score {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 4px;
}

.home-reviews-count {
	color: #777;
	font-size: 15px;
	margin-bottom: 18px;
}

/* An empty star is the same icon in the outline weight now (fa-regular fa-star) rather than a
   separate Font Awesome 4 outline class, so one selector covers both the filled and the empty
   ones - they were always this same colour anyway. The half star keeps a selector of its own
   because it is a different glyph. */
.home-reviews-stars .fa-star,
.home-reviews-stars .fa-star-half-alt {
	color: #fbbc04;
}

.review-card-stars .fa-star {
	color: #fbbc04;
}

/* Three across rather than the vehicle row's four - a review is text, and four columns of it on a
   desktop reads as a wall. Mirrored by data-visible-lg="3" on the carousel. */
.review-carousel .vehicle-carousel-card {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}

@media (max-width: 991px) {
	.review-carousel .vehicle-carousel-card { flex-basis: 50%; max-width: 50%; }
}

@media (max-width: 767px) {
	.review-carousel .vehicle-carousel-card { flex-basis: 100%; max-width: 100%; }
}

.review-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	padding: 20px;
	box-sizing: border-box;
}

.review-card-head {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.review-card-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	margin-right: 12px;
	flex: 0 0 44px;
	background: #eee;
	background-size: cover;
	background-position: center center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #777;
	font-weight: 600;
	font-size: 18px;
	overflow: hidden;
}

.review-card-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.review-card-author {
	font-weight: 600;
	line-height: 1.3;
	word-break: break-word;
}

.review-card-when {
	color: #999;
	font-size: 13px;
}

/* Every card the same height whatever the review's length, with the overflow faded off rather than
   cut mid-letter. -webkit-line-clamp is what actually does the clamping in every browser that
   matters; the max-height is the fallback for the ones that ignore it. */
.review-card-text {
	color: #444;
	font-size: 15px;
	line-height: 1.55;
	margin-bottom: 14px;
	overflow: hidden;
	max-height: 124px;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
}

.review-card-stars {
	margin-top: auto;
	font-size: 15px;
	letter-spacing: 1px;
}

.review-card-google {
	margin-top: 10px;
	font-size: 12px;
	color: #999;
}

.review-card-google a {
	color: #999;
	text-decoration: none;
}

.review-card-google a:hover {
	text-decoration: underline;
}

/* Only a first-party review has these - see AduvioReview */

.review-card-title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	margin-bottom: 6px;
	word-break: break-word;
}

/* The verified-customer mark, which sits inline after the name */
.review-card-author .fa-check-circle {
	color: #34a853;
	font-size: 13px;
}

/* The dealership's answer. Clamped like the review above it, so one long reply cannot make its
   card twice the height of every other card in the row */
.review-card-reply {
	margin-top: 12px;
	padding: 10px 12px;
	border-left: 3px solid #e5e5e5;
	background: #fafafa;
	color: #555;
	font-size: 13px;
	line-height: 1.5;
	overflow: hidden;
	max-height: 78px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
}

.review-card-reply-from {
	display: block;
	font-weight: 600;
	color: #333;
	margin-bottom: 3px;
}

/* vehicle-carousel.css makes every anchor inside a card a full-width flex block, which is right for
   a card that is one big link to a vehicle and wrong for the small "Google review" line here */
.review-carousel .vehicle-carousel-card a {
	display: inline;
	width: auto;
}

@media (max-width: 767px) {
	.home-reviews {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.home-reviews-header h2 {
		font-size: 26px;
	}

	.home-reviews-score {
		font-size: 19px;
	}

	.review-card {
		padding: 16px;
	}
}