/*
 * Sarem 3D Model Viewer — scoped widget styles.
 *
 * Styles only the wrapper and the <model-viewer> element; the viewer's internals
 * are owned by the (locally bundled) model-viewer web component. Themeable values
 * are exposed as CSS custom properties (internal prefix --smv-*) set by Elementor
 * Style controls. Namespaced under .sarem-model-viewer; no globals, no @import.
 */

.sarem-model-viewer {
	/* Themeable tokens (Elementor Style controls may override these). */
	--smv-height: 480px;
	--smv-bg: #F4F5F7;
	--smv-radius: 8px;
	--smv-progress: #E4701D; /* Sarem amber accent */
	--smv-ctrl-bg: rgba(255, 255, 255, 0.9);
	--smv-ctrl-icon: #14161B;
	--smv-ctrl-accent: #E4701D;

	position: relative; /* anchors the absolutely-positioned control bar */
	width: 100%;
	max-width: 100%;
}

/*
 * The viewer element itself. It needs an explicit width AND height (model-viewer
 * has no intrinsic size). --poster-color matches the background so the poster/idle
 * state blends into the surface instead of flashing a different colour.
 */
.sarem-model-viewer__el {
	display: block;
	width: 100%;
	height: var(--smv-height);
	background-color: var(--smv-bg);
	border-radius: var(--smv-radius);
	overflow: hidden;
	--poster-color: var(--smv-bg);
}

/* Style model-viewer's built-in loading bar to the Sarem accent (no custom JS). */
.sarem-model-viewer__el::part(default-progress-bar) {
	height: 3px;
	background-color: var(--smv-progress);
}

/* ---- control bar (zoom / reset / fullscreen) ---- */
.sarem-model-viewer__controls {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	background: var(--smv-ctrl-bg);
	box-shadow: 0 6px 20px -12px rgba(16, 24, 38, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.sarem-model-viewer__controls--bottom-right {
	right: 16px;
	bottom: 16px;
}

.sarem-model-viewer__controls--bottom-left {
	left: 16px;
	bottom: 16px;
}

.sarem-model-viewer__controls--top-right {
	right: 16px;
	top: 16px;
}

.sarem-model-viewer__controls--top-left {
	left: 16px;
	top: 16px;
}

.sarem-model-viewer__ctrl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--smv-ctrl-icon);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease, color 0.15s ease;
}

.sarem-model-viewer__ctrl:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--smv-ctrl-accent);
}

.sarem-model-viewer__ctrl:focus-visible {
	outline: 2px solid var(--smv-ctrl-accent);
	outline-offset: 2px;
}

.sarem-model-viewer__ctrl svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

.sarem-model-viewer__ctrl .smv-ic {
	display: inline-flex;
	line-height: 0;
}

/* Fullscreen icon swap: show "enter" normally, "exit" while fullscreen. */
.sarem-model-viewer__ctrl .smv-ic-exit {
	display: none;
}

.sarem-model-viewer.is-fullscreen .sarem-model-viewer__ctrl[data-smv-action="fullscreen"] .smv-ic-enter {
	display: none;
}

.sarem-model-viewer.is-fullscreen .sarem-model-viewer__ctrl[data-smv-action="fullscreen"] .smv-ic-exit {
	display: inline-flex;
}

/* Fullscreen: the wrapper fills the screen and the viewer fills the wrapper. */
.sarem-model-viewer:fullscreen {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.sarem-model-viewer:fullscreen .sarem-model-viewer__el {
	height: 100%;
	border-radius: 0;
}

/* Larger touch targets on coarse pointers (phones / tablets). */
@media (pointer: coarse) {
	.sarem-model-viewer__ctrl {
		width: 44px;
		height: 44px;
	}
}

/* Editor-only placeholder shown until a model URL is set. */
.sarem-model-viewer__notice {
	margin: 0;
	padding: 24px;
	color: #6B7280;
	font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.9375rem;
	text-align: center;
	background: #F4F5F7;
	border: 1px dashed #D8DCE2;
	border-radius: 8px;
}