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

/*
	DealerShark.io 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;
}

/*
	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/review-carousel.css (css/vehicle-carousel.css has since moved to the dealership pack).

   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 ---------- */

/* Moved to the dealership pack (css/vehicle/vehicle-carousel.css): the pack draws the cards, the arrows and the "You may also like" row and runs under any
   theme. The pages that use it (index.php here, vehicle.php in the pack) load it after this file. Only the review rows below stay in the theme. */

/* ---------- 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;
	}
}

/* Vehicle card ribbon: moved to the dealership pack (css/vehicle/vehicle-ribbon.css), which draws the ribbon and runs under any theme.
   Nothing of it is left here; add a colour or size override for this theme below the pack's rules, with a selector at least as specific. */