/**
 * Comparator Styles
 *
 * Styles for vehicle comparison feature.
 *
 * @package joacamp
 */

/* ==========================================================================
   Products Comparator
   ========================================================================== */

.products-comparator {
	position: relative;
}

/* --------------------------------------------------------------------------
   Boxes Products
   -------------------------------------------------------------------------- */

.products-comparator__boxes {
	display: flex;
	background-color: var(--joa-color-white);
}

.products-comparator__box {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-basis: 25%;
	height: 350px;
	box-shadow: inset 0 0 0 1px var(--joa-color-white);
}

.products-comparator__box--heading {
	font-size: var(--joa-fs-h5);
	line-height: var(--joa-lh-h5);
	font-weight: 700;
	text-align: center;
	color: var(--joa-color-dark-green);
	padding: calc(0.5 * var(--joa-content-margin));
}

.products-comparator__box--product {
	color: var(--joa-color-white);
	background-color: var(--joa-color-dark-green);
}

.products-comparator__box-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Box: Empty
   -------------------------------------------------------------------------- */

.products-comparator__box-inner--empty {
	position: relative;
	cursor: pointer;
	border: none;
	background: transparent;
}

.products-comparator__box-inner--empty .products-comparator__box-add-icon {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 35px;
	height: 35px;
	transition: all 0.3s;
	transform: rotate(0);
}

.products-comparator__box-inner--empty:hover .products-comparator__box-add-icon,
.products-comparator__box-inner--empty:focus .products-comparator__box-add-icon,
.products-comparator__box-inner--empty:active .products-comparator__box-add-icon {
	transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Box: Preview
   -------------------------------------------------------------------------- */

.products-comparator__vehicle {
	box-shadow: inset 0 0 0 1px var(--joa-color-white);
	background-color: var(--joa-color-blue-turquoise);
}

.products-comparator__vehicle-preview {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.products-comparator__vehicle-preview-image {
	position: absolute;
	z-index: 2;
	width: 100%;
	max-width: 228px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	object-fit: contain;
}

.products-comparator__vehicle-preview-title {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	height: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--joa-fs-h6);
	line-height: var(--joa-lh-h6);
	font-weight: 600;
	margin: 0;
}

.products-comparator__box-close-button {
	position: absolute;
	z-index: 3;
	top: 17px;
	right: 17px;
	cursor: pointer;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	transition: all 0.3s;
	transform: rotate(0);
	border: none;
	background: transparent;
	padding: 0;
}

.products-comparator__box-close-button:hover,
.products-comparator__box-close-button:focus,
.products-comparator__box-close-button:active {
	transform: rotate(90deg);
}

.products-comparator__vehicle-preview .products-comparator__box-close-button-icon {
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */

.products-comparator__loader {
	display: flex;
	align-items: center;
	text-align: center;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 5;
	background-color: rgba(var(--joa-color-floral-white-rgb), 0.85);
}

.products-comparator__loader-image {
	display: block;
	margin: auto;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.products-comparator__features {
	margin-top: var(--joa-content-margin);
	margin-bottom: var(--joa-site-global-margin);
}

.products-comparator__table {
	width: 100%;
	overflow: hidden;
	font-size: var(--joa-fs-15);
	background-color: var(--joa-color-white);
	border-collapse: collapse;
}

.products-comparator__table-data {
	width: 25%;
	padding: 20px;
	position: relative;
}

.products-comparator__table-data--values {
	text-align: center;
}

.products-comparator__table-data--label {
	text-align: left;
	font-size: var(--joa-fs-txt-m);
	line-height: var(--joa-ln-txt-m);
	font-weight: 600;
	color: var(--joa-comparator-table-label-color);
}

.products-comparator__table-data--values {
	font-size: var(--joa-fs-txt-m);
	line-height: var(--joa-ln-txt-m);
	font-weight: 400;
	color: var(--joa-comparator-table-value-color);
}

.products-comparator__table-data--cta {
	font-size: 0.9375em;
	padding: 1em;
	line-height: 1.3em;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	color: var(--joa-block-button-color);
	background-color: var(--joa-block-button-bg-color);
	display: block;
}

.products-comparator__table-data--cta:visited {
	color: var(--joa-block-button-color);
}

.products-comparator__table-data--cta:hover,
.products-comparator__table-data--cta:focus,
.products-comparator__table-data--cta:active {
	color: var(--joa-block-button-color-hover);
	background-color: var(--joa-block-button-bg-color-hover);
}

/* Table borders */
.products-comparator__table-data::after {
	content: "";
	display: block;
	position: absolute;
	width: 1px;
	height: 100%;
	background-color: var(--joa-color-gray-light);
	right: -0.5px;
	top: 0;
}

.products-comparator__table-data::before {
	content: "";
	display: block;
	position: absolute;
	height: 1px;
	width: 100%;
	background-color: var(--joa-color-gray-light);
	right: 0;
	bottom: -0.5px;
}

/* Hide borders on last row/column */
.products-comparator__table-row:last-child > .products-comparator__table-data::before,
.products-comparator__table-row:last-child > .products-comparator__table-data::after {
	display: none;
}

.products-comparator__table-row > .products-comparator__table-data:last-child::after {
	display: none;
}

/* Empty message */
.products-comparator__empty-message {
	font-size: var(--joa-fs-h5);
	line-height: var(--joa-lh-h5);
	font-weight: 700;
	text-align: center;
	color: var(--joa-color-dark-green);
	padding: var(--joa-site-global-margin);
}

/* --------------------------------------------------------------------------
   Popup
   -------------------------------------------------------------------------- */

.products-comparator__popin {
	position: relative;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	background: var(--joa-color-white);
	padding: var(--joa-site-global-margin);
}

.products-comparator__popin-products-list {
	margin-top: var(--joa-content-margin);
	margin-bottom: var(--joa-content-margin);
}

.products-comparator__popin-title {
	font-size: var(--joa-fs-h3);
	line-height: var(--joa-lh-h3);
	font-weight: 700;
	color: var(--joa-color-dark-green);
	margin-bottom: var(--joa-site-global-margin);
}

/* Magnific Popup overrides for comparator */
.products-comparator__popin button.mfp-close {
	font-size: 0;
	opacity: 1;
	color: var(--joa-color-dark-green);
	background: transparent url("../img/comparator-close.svg");
	background-size: 28px 29px;
	background-position: center center;
	background-repeat: no-repeat;
	top: 15px;
	right: 15px;
	transition: all 0.3s;
	transform: rotate(0);
}

.products-comparator__popin button.mfp-close:hover,
.products-comparator__popin button.mfp-close:focus,
.products-comparator__popin button.mfp-close:active {
	transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Banner
   -------------------------------------------------------------------------- */

.products-comparator__banner {
	display: none;
	justify-content: space-between;
	align-items: center;
	padding: calc(1.35 * var(--joa-site-global-margin)) calc(1.62 * var(--joa-site-global-margin));
	background-color: var(--joa-comparator-banner-bg-color);
}

.products-comparator__banner--is-active {
	display: flex;
}

.products-comparator__banner-text {
	color: var(--joa-comparator-banner-text-color);
}

.products-comparator__banner-title {
	font-size: var(--joa-fs-h3);
	line-height: var(--joa-lh-h3);
	font-weight: 700;
	color: var(--joa-color-dark-green);
	margin-bottom: 0.5em;
}

.products-comparator__banner-button {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */

@media print {
	.noprint {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   Responsive - Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.products-comparator__box--heading {
		--joa-fs-h5: var(--joa-fs-19);
	}

	.products-comparator__vehicle-preview-title {
		--joa-fs-h6: var(--joa-fs-16);
	}

	.products-comparator__popin-title {
		--joa-fs-h3: var(--joa-fs-28);
	}

	.products-comparator__banner-title {
		--joa-fs-h3: var(--joa-fs-28);
	}
}