/*
 Plugin Name: mobile.de API
 Plugin URI: https://commotion.online/mobile-api/
 Description: Plugin to integrate the mobile.de Ad-Integration via the API and show your vehicles on your website.
 Version: 1.0
 Author: ComMotion
 Author URI: https://commotion.online
 Text Domain: mobile-api
*/

/* Basic */

	.vehicle-single .container {
		width: 90%;
		max-width: 1440px;
		margin: 0 auto;
	} .vehicle-single .container > *, .vehicle-archive-grid {
		margin-bottom: 5em;
	}

/* Vehicle Lightbox */

	body.lightbox-open {
		overflow: hidden;
	}

	.vehicle-grid > .vehicle-images.vehicle-lightbox {
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 999999;

		width: 100%;
		padding: 2rem;
		box-sizing: border-box;
		background-color: rgba(255,255,255,.75);
		-webkit-backdrop-filter: blur(10px);
		-moz-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.vehicle-grid > .vehicle-images .lightbox-trigger, .vehicle-grid > .vehicle-images > .close-button {
		position: absolute;
		top: 2rem; right: 2rem;
		z-index: 1;
		padding: .5em 1em;
		background-color: rgba(0,0,0,.1);
		border: 0 none;
		cursor: pointer;
	} .vehicle-grid > .vehicle-images > .single-vehicle-slider .slide:hover .lightbox-trigger, .vehicle-grid > .vehicle-images > .close-button:hover {
		opacity: .75;
	} .vehicle-grid > .vehicle-images.vehicle-lightbox .lightbox-trigger, .vehicle-grid > .vehicle-images:not(.vehicle-lightbox) > .close-button {
		display: none;
	}

	.vehicle-grid > .vehicle-images:not(.vehicle-lightbox) > .single-vehicle-slider .slide {
		cursor: zoom-in;
	} .vehicle-grid > .vehicle-images.vehicle-lightbox > .single-vehicle-slider img {
		max-height: 80vh;
		margin: 0 auto;
	}

	.vehicle-grid > .vehicle-images.vehicle-lightbox > .single-vehicle-slider-thumbnails img {
		max-height: 80vh;
		margin: 0 auto;
	}

/* Vehicle Grid */

	.vehicle-grid > .vehicle-images > .single-vehicle-slider .slide {
		position: relative;
	} .vehicle-grid > .vehicle-images > .single-vehicle-slider img {
		width: auto;
		max-width: 100%;
		border-radius: 1rem;
	}

	.vehicle-grid > .vehicle-images > .single-vehicle-slider-thumbnails {
		margin-top: .5em;
		padding: 0 40px;
	} .vehicle-grid > .vehicle-images > .single-vehicle-slider-thumbnails .slide {
		margin: 0;
		padding: 0 .25em;
		cursor: pointer;
	} .vehicle-grid > .vehicle-images > .single-vehicle-slider-thumbnails img {
		width: 100%;
		max-width: 100px;
		margin: 0 auto;
		border-radius: .5rem;
	}

	.vehicle-grid > .vehicle-images > .single-vehicle-slider-thumbnails .slick-prev {
		left: 0;
	} .vehicle-grid > .vehicle-images > .single-vehicle-slider-thumbnails .slick-next {
		right: 0;
	} .vehicle-grid > .vehicle-images > .single-vehicle-slider-thumbnails .slick-prev, .vehicle-grid > .vehicle-images > .single-vehicle-slider-thumbnails .slick-next {
		width: 30px;
		height: 30px;
	} .vehicle-grid > .vehicle-images > .single-vehicle-slider-thumbnails .slick-prev:before, .vehicle-grid > .vehicle-images > .single-vehicle-slider-thumbnails .slick-next:before {
		color: #000;
		font-size: 30px;
	}

	.price .amount {
		font-size: 1.5em;
		font-weight: bold;
	} .price .tax-info {
		display: block;
		opacity: .75;
	}

	.vehicle-grid .features ul {
		margin: 0;
		padding: 0;
		list-style: none;
	} .vehicle-grid .features ul li {
		list-style: none;
	} .vehicle-grid .features ul li:before {
		width: 30px;
		height: 30px;
		font-size: 30px;
		margin-right: 10px;
	}

	dl.vehicle-grid-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 0;
	} dl.vehicle-grid-columns dt, dl.vehicle-grid-columns dd {
		margin: 0;
		padding: .25em .5em;
	} dl.vehicle-grid-columns dt:nth-of-type(2n + 1), dl.vehicle-grid-columns dd:nth-of-type(2n + 1) {
		background-color: rgba(0,0,0,.05);
	} dl.vehicle-grid-columns p {
		margin: 0;
		padding: 0 0 .75em;
	} dl.vehicle-grid-columns p:last-child {
		padding: 0;
	} dl.vehicle-grid-columns img {
		max-width: 100%;
		margin-top: 1em;
	}

/* Content Container */

	.vehicle-content-container {
		position: relative;
		box-sizing: border-box;
		padding: 1.75rem 2rem 2.25rem;
		border: 1px solid rgba(0,0,0,.25);
		border-radius: 1rem;
		box-shadow: rgba(0,0,0,.1) 0 1px 0,rgba(0,0,0,.1) 0 2px 8px,rgba(0,0,0,.1) 0 10px 20px;
	} .vehicle-content-container > *:first-child {
		margin-top: 0;
		padding-top: 0;
	} .vehicle-content-container > *:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
	}

/* Icons */

	ul.icon-list {
		margin: 1em 0 2em;
		padding: 0;
		list-style: none;

		display: grid;
		grid-template-columns: repeat(2,47.5%);
		column-gap: 2.5%;
		row-gap: 1em;
	}

	ul.icon-list > li {
		position: relative;
	} ul.icon-list > li > small {
		padding-left: 30px;
	} ul.icon-list > li:before {
		position: absolute;
		left: 0;
		top: 0;
	}

	ul.icon-list > li > * {
		display: block;
	}

/* Tooltip */

	.tooltip {
		cursor: pointer;
		z-index: 10;
		position: relative;
		display: inline-block;
		opacity: .75;
		transition: all .3s;
	} .tooltip:hover {
		opacity: 1;
	}

	.tooltip .tooltiptext {
		width: 275px;
		padding: 1em;
		font-size: small;
		font-weight: normal;
		line-height: normal;
		background-color: rgba(255,255,255,.9);
		border-radius: 5px;
		box-shadow: rgba(0,0,0,.1) 0 1px 0,rgba(0,0,0,.1) 0 2px 8px,rgba(0,0,0,.1) 0 10px 20px;

		position: absolute;
		z-index: 1;
		bottom: 125%;
		left: 50%;
		margin-left: -150px;

		opacity: 0;
		visibility: hidden;
		transition: all .3s;

		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		white-space: normal;
	} .tooltip .tooltiptext:after {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: rgba(255,255,255,.9) transparent transparent transparent
	} .tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1
	}

@media only screen and (min-width: 1024px) {

	/* Vehicle Grid */

	.vehicle-grid {
		display: flex;
		margin-bottom: 1em;
	} .vehicle-grid:first-child {
		margin-bottom: 2.5em;
	}

	.vehicle-grid > * {
		width: 49.5%;
	} .vehicle-grid > *:last-child {
		margin-left: auto;
	}

	.vehicle-grid > .vehicle-images {
		width: 66%;
	} .vehicle-grid > .vehicle-summary {
		width: 33%;
	}
}

@media only screen and (max-width: 1024px) {

	.vehicle-grid > * {
		margin-bottom: 1em;
	} .vehicle-grid > .vehicle-images {
		margin-bottom: 2.5em;
	}
}

@media only screen and (max-width: 690px) {

	.vehicle-content-container {
		padding: 1.5rem 1.75rem 2rem;
	}

	ul.icon-list {
		grid-template-columns: 1fr;
	}

	/* dl.vehicle-grid-columns {
		font-size: smaller;
	} */ dl.vehicle-grid-columns dt, dl.vehicle-grid-columns dd {
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;

		white-space: normal;
	}
}
