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

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

/* Car Archive */

	.car-archive-grid > *, .car-archive-grid .car-content-container {
		margin-bottom: 1em;
	} .car-archive-grid .car-content-container {
		transition: all .3s;
	} .car-archive-grid .car-content-container:hover {
		box-shadow: rgba(0,0,0,.15) 0 1px 0,rgba(0,0,0,.15) 0 4px 16px,rgba(0,0,0,.15) 0 20px 40px;
	}

	.car-archive-grid > * > a.overlay-link {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 1;
	}

	.car-archive-grid figure figcaption {
		display: none;
	} .car-archive-grid figure img {
		max-width: 100%;
		border-radius: 1rem;
	}

/* Car Lightbox */

	body.lightbox-open {
		overflow: hidden;
	}

	.car-grid > .car-images.car-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);
	}

	.car-grid > .car-images .lightbox-trigger, .car-grid > .car-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;
	} .car-grid > .car-images > .single-car-slider .slide:hover .lightbox-trigger, .car-grid > .car-images > .close-button:hover {
		opacity: .75;
	} .car-grid > .car-images.car-lightbox .lightbox-trigger, .car-grid > .car-images:not(.car-lightbox) > .close-button {
		display: none;
	}

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

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

/* Car Grid */

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

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

	.car-grid > .car-images > .single-car-slider-thumbnails .slick-prev {
		left: 0;
	} .car-grid > .car-images > .single-car-slider-thumbnails .slick-next {
		right: 0;
	} .car-grid > .car-images > .single-car-slider-thumbnails .slick-prev, .car-grid > .car-images > .single-car-slider-thumbnails .slick-next {
		width: 30px;
		height: 30px;
	} .car-grid > .car-images > .single-car-slider-thumbnails .slick-prev:before, .car-grid > .car-images > .single-car-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;
	}

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

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

/* Content Container */

	.car-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;
	} .car-content-container > *:first-child {
		margin-top: 0;
		padding-top: 0;
	} .car-content-container > *:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
	}

/* Skeleton */

	#skeleton-container {
		display: none;
	}

	.skeleton figure:empty, .skeleton h2:empty, .skeleton h3:empty, .skeleton p:empty {
		width: 100%;
		height: 50px;
		margin-bottom: 1rem;

		position: relative;
		animation-duration: 5s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: skeletonScreenAnimation;
		animation-timing-function: linear;
		background-color: #f6f7f8;
		background: linear-gradient(to right, #eee 8%, #ccc 18%, #eee 33%);
		background-size: 100vw 50px;
	} .skeleton figure:empty {
		height: 250px;
	} .skeleton p:empty {
		height: 25px;
	}

	@keyframes skeletonScreenAnimation {
		0% {
			background-position: -100vw 0
		} 100% {
			background-position: 100vw 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) {

	/* Car Archive */

	/* .car-archive-grid {
		display: grid;
		grid-template-columns: repeat(2, 49.5%);
		column-gap: 1%;
		row-gap: 1rem;
	} */

	.car-archive-grid .car-content-container {
		padding: 2rem;
		display: flex;
		align-items: center;
	} .car-archive-grid figure {
		flex: 0 0 40%;
		margin: 0 1.5em 0 0;
	}

	/* Car Grid */

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

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

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

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

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

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

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

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

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

		white-space: normal;
	}
}