/*
 * Product Configurator — minimale, zelfstandige styling.
 *
 * Op de "Product configurator"-template wordt de reguliere themabundle NIET
 * geladen (zie inc/es-product-configurator.php), dus dit bestand staat op
 * zichzelf: geen Bootstrap, geen Font Awesome, geen thema-SCSS.
 */

:root {
	--pc-brand: #f8b132;
	--pc-text: #404040;
	--pc-bar-bg: #395159;
	--pc-bar-h: 60px;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #fff;
	color: var(--pc-text);
	font-family: "Myriad Pro", "Helvetica Neue", Arial, sans-serif;
	overflow-x: hidden;
}

/* Reserveer ruimte voor de vaste top-balk zodat de configurator eronder valt. */
body.product-configurator-template {
	padding-top: var(--pc-bar-h);
	box-sizing: border-box;
}

/*
 * Vaste top-navigatiebalk over de volle breedte.
 * De configurator (#iConfigure) valt eronder; de balk dekt dus niets af.
 */
.pc-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	height: var(--pc-bar-h);
	padding: 0 16px;
	box-sizing: border-box;
	background: var(--pc-bar-bg);
}

/* De configurator vult de viewport ONDER de balk. */
#iConfigure {
	height: calc(100dvh - var(--pc-bar-h));
	overflow: hidden;
}

/*
 * Laad-overlay: de nieuwe inject-build toont zelf geen spinner, dus tonen we er
 * één terwijl het 3D-model laadt. Wordt verborgen zodra de configurator klaar is
 * (zie template-script). Ligt onder de balk (z-index < 2000) zodat de terugknop
 * bruikbaar blijft tijdens het laden.
 */
.pc-loader {
	position: fixed;
	top: var(--pc-bar-h);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1500;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: opacity 0.3s ease;
}

.pc-loader.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.pc-loader__spinner {
	width: 44px;
	height: 44px;
	border: 4px solid rgba(57, 81, 89, 0.15);
	border-top-color: var(--pc-brand);
	border-radius: 50%;
	animation: pc-spin 0.8s linear infinite;
}

@keyframes pc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Klikbaar beeldmerk links in de balk (terug-actie, zie template-script). */
.pc-topbar__logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	margin-right: 14px;
}

.pc-topbar__logo img {
	height: 36px;
	width: auto;
	display: block;
}

/*
 * Configurator-titel, gecentreerd in de balk (absoluut t.o.v. de vaste balk,
 * zodat de centrering onafhankelijk is van de breedte van het logo/de knop).
 */
.pc-topbar__title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: #fff;
	font: 600 16px/1.2 "Myriad Pro", "Helvetica Neue", Arial, sans-serif;
	white-space: nowrap;
	pointer-events: none;
}

/* Witte terugknop, in de top-balk. */
.pc-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--pc-text);
	font: 600 15px/1 "Myriad Pro", "Helvetica Neue", Arial, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease, box-shadow 0.15s ease;
}

.pc-back:hover,
.pc-back:focus {
	color: var(--pc-brand);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	outline: none;
}

.pc-back__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* Close-knop (×): alleen op mobiel zichtbaar (zie media query). */
.pc-close {
	display: none;
}

/*
 * Mobiel: de "Terug naar website"-knop verbergen en in plaats daarvan een
 * close-knop (×) rechtsboven tonen die terug gaat (zie template-script).
 * Logo + gecentreerde titel blijven; de titel krijgt max-width + ellipsis
 * zodat 'ie logo noch close-knop kan overlappen.
 */
@media (max-width: 640px) {
	.pc-back {
		display: none;
	}

	.pc-topbar__title {
		max-width: calc(100vw - 140px);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pc-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		margin-left: auto;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #fff;
		text-decoration: none;
		cursor: pointer;
	}

	.pc-close svg {
		width: 22px;
		height: 22px;
	}
}