/**
 * Holland-Konfigurator - Styles.
 *
 * Extrahiert aus dem alten Theme (holland/src/sass/components/_konfigurator.scss
 * und _loader.scss) plus den fade-Transitions aus app.scss.
 *
 * Bewusst NICHT das komplette holland/dist/css/app.css übernommen: dort ist
 * theme.scss mit einkompiliert, also das Layout-CSS des motor-Themes. Das
 * würde Blocksy überschreiben. Die Konfigurator-Styles nutzen keine SCSS-
 * Variablen aus theme.scss, lassen sich also sauber isolieren.
 */

/* --- Vue Transitions ---------------------------------------------------- */

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.4s;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}

/* --- Konfigurator ------------------------------------------------------- */

.holland-konfigurator .is-loading {
	opacity: 0.4;
	pointer-events: none;
}

.holland-konfigurator .category-select {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	max-width: 2500px;
	margin: 0 auto;
	position: relative;
}

.holland-konfigurator .category-select--category {
	flex: 0 0 9rem;
	padding: 1rem 2rem;
	cursor: pointer;
	transition: transform 150ms ease;
}

.holland-konfigurator .category-select--category-image {
	position: relative;
}

.holland-konfigurator .category-select--category-image img {
	width: 100%;
	transition: opacity 150ms ease;
}

.holland-konfigurator .category-select--category-image img.active-image {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.holland-konfigurator .category-select--category-title {
	text-align: center;
}

.holland-konfigurator .category-select--category-title h3 {
	font-size: 1.2rem;
	font-weight: normal;
	color: #808182;
	margin-top: 1rem;
	transition: color 150ms ease;
}

.holland-konfigurator .category-select--category:hover,
.holland-konfigurator .category-select--category.is-active {
	transform: scale(1.025);
}

.holland-konfigurator .category-select--category:hover .category-select--category-image .active-image,
.holland-konfigurator .category-select--category.is-active .category-select--category-image .active-image {
	opacity: 1;
}

.holland-konfigurator .category-select--category:hover .category-select--category-title h3,
.holland-konfigurator .category-select--category.is-active .category-select--category-title h3 {
	color: #ef7d00;
}

.holland-konfigurator .category-select--category:active {
	transition: none;
	transform: scale(1);
}

/* --- Ergebnisliste ------------------------------------------------------ */

.holland-konfigurator .category-result {
	position: relative;
	margin-top: 2rem;
	min-height: 4rem;
}

/*
 * Hinweis: Das alte Theme blendete hier Titel, Preis und Sternebewertung aus
 * (.woocommerce-loop-product__title, .star-rating, span.price) - die
 * motor-Kachel brachte einen eigenen Titel mit. Die Blocksy-Kachel tut das
 * nicht, deshalb bleiben Titel und Preis jetzt sichtbar.
 *
 * Falls du im Konfigurator nur die Bilder zeigen möchtest, reicht:
 *
 *   .holland-konfigurator .category-result .woocommerce-loop-product__title,
 *   .holland-konfigurator .category-result .price { display: none; }
 */

.holland-konfigurator .category-result .category-result--loading {
	position: absolute;
	pointer-events: none;
	top: 1rem;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
	text-align: center;
}

.holland-konfigurator .category-result .special-more {
	display: none;
}

/* --- Loader (lds-ellipsis) ---------------------------------------------- */

.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}

.lds-ellipsis div {
	position: absolute;
	top: 27px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ef7d00;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
	left: 6px;
	animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
	left: 6px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
	left: 26px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
	left: 45px;
	animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
	0%   { transform: scale(0); }
	100% { transform: scale(1); }
}

@keyframes lds-ellipsis3 {
	0%   { transform: scale(1); }
	100% { transform: scale(0); }
}

@keyframes lds-ellipsis2 {
	0%   { transform: translate(0, 0); }
	100% { transform: translate(19px, 0); }
}