/**
 * Configurator UI tweaks (survives configurator plugin re-uploads).
 * 1) stage-buttons: bottom-right (desktop + mobile)
 * 2) mobile: icon-only stage buttons (icons centred)
 * 3) ar-modal-close: top-right, perfect circle
 */

/* ---- 1) Desktop + mobile: stage buttons bottom-right ---- */
.configurator-viewer-fill .stage-buttons,
.viewer-app .stage-buttons,
.stage-buttons {
	top: auto !important;
	bottom: 14px !important;
	left: auto !important;
	right: 14px !important;
	transform: none !important;
	justify-content: flex-end !important;
}

/* ---- 3) AR modal close: top-right popup style (TNF look) ---- */
.ar-modal-card {
	overflow: visible !important;
}

.ar-modal-close {
	position: absolute !important;
	top: -14px !important;
	right: -14px !important;
	left: auto !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	min-height: 36px !important;
	max-height: 36px !important;
	aspect-ratio: 1 / 1 !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid #111 !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: #111 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	letter-spacing: 0 !important;
	text-indent: 0 !important;
	overflow: hidden !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 36px !important;
	cursor: pointer !important;
	z-index: 3 !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ar-modal-close::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 !important;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ar-modal-close:hover,
.ar-modal-close:focus-visible {
	background: #111 !important;
	color: #fff !important;
	outline: none !important;
}

/* ---- 2) Mobile: icon-only stage buttons, bottom-right ---- */
@media (max-width: 768px) {
	.configurator-viewer-fill .stage-buttons,
	.viewer-app .stage-buttons,
	.stage-buttons {
		top: auto !important;
		bottom: 10px !important;
		right: 10px !important;
		gap: 8px !important;
	}

	.stage-buttons .dim-button,
	.stage-buttons .ar-button {
		position: relative !important;
		font-size: 0 !important;
		line-height: 0 !important;
		letter-spacing: 0 !important;
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		max-width: 44px !important;
		min-height: 44px !important;
		max-height: 44px !important;
		aspect-ratio: 1 / 1 !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 50% !important;
		background: #fff !important;
		border: 1px solid #111 !important;
		color: #111 !important;
		overflow: hidden !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
	}

	/* Absolutely centre icons so leftover button text cannot shift them */
	.stage-buttons .dim-button::before,
	.stage-buttons .ar-button::before {
		content: "" !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		display: block;
		width: 20px;
		height: 20px;
		margin: 0 !important;
		background-color: currentColor;
		flex-shrink: 0;
	}

	/* Ruler / measurements icon */
	.stage-buttons .dim-button::before {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='8' width='18' height='8' rx='1.5' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M7 8v3.2M10 8v4.5M13 8v3.2M16 8v4.5M19 8v3.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='8' width='18' height='8' rx='1.5' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M7 8v3.2M10 8v4.5M13 8v3.2M16 8v4.5M19 8v3.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Cube / AR icon */
	.stage-buttons .ar-button::before {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3.2l7.5 4.3v8.6L12 20.4l-7.5-4.3V7.5L12 3.2z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 12l7.5-4.3M12 12v8.4M12 12L4.5 7.7' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3.2l7.5 4.3v8.6L12 20.4l-7.5-4.3V7.5L12 3.2z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 12l7.5-4.3M12 12v8.4M12 12L4.5 7.7' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.stage-buttons .dim-button.on,
	.stage-buttons .dim-button:hover,
	.stage-buttons .ar-button:hover {
		background: #111 !important;
		border-color: #111 !important;
		color: #fff !important;
	}

	/* Measurement tags shown after pressing "View measurements" */
	.dim-label {
		font-size: 8px !important;
		font-weight: 600 !important;
		line-height: 1.15 !important;
		padding: 0 !important;
		letter-spacing: 0 !important;
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: #1a1d21 !important;
	}

	/* Mobile: keep close inside the card, top-right */
	.ar-modal-close {
		top: 10px !important;
		right: 10px !important;
		left: auto !important;
	}
}