/**
 * Frontend styles for the Noorifa 3D product viewer.
 *
 * Hidden by default: only revealed (via the .is-loading class, added by
 * viewer.js as soon as it commits to attempting a 3D load, or the .is-ready
 * class once the model has actually finished loading) so that no-JS
 * visitors, unsupported browsers, and load failures all silently keep
 * seeing WooCommerce's normal product gallery instead.
 */

.noorifa-viewer {
	display: none;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	background: #f6f6f6;
	margin-bottom: 1.5em;
	overflow: hidden;
}

.noorifa-viewer.is-loading,
.noorifa-viewer.is-ready {
	display: block;
}

.noorifa-viewer-spinner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 3px solid rgba( 0, 0, 0, 0.1 );
	border-top-color: rgba( 0, 0, 0, 0.4 );
	border-radius: 50%;
	animation: noorifa-spin 0.8s linear infinite;
}

.noorifa-viewer.is-loading .noorifa-viewer-spinner {
	display: block;
}

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

/*
 * Once the viewer has been moved inside WooCommerce's own gallery element
 * (see relocateIntoGallery() in viewer.js), hide the gallery's original
 * content instead of the gallery itself, so the viewer inherits whatever
 * column width/layout the theme already applies to the gallery — including
 * block-theme (FSE) product templates that render the gallery as its own
 * Gutenberg block rather than a classic-template sibling.
 */
.woocommerce-product-gallery.noorifa-gallery-replaced > *:not(.noorifa-viewer) {
	display: none;
}

.noorifa-viewer-canvas {
	width: 100%;
	height: 100%;
}

.noorifa-viewer-canvas canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
}

.noorifa-viewer.is-loading .noorifa-viewer-canvas canvas {
	visibility: hidden;
}

.noorifa-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0.5em 0;
}

.noorifa-swatch {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 2px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	box-sizing: border-box;
}

.noorifa-swatch:hover {
	border-color: #999;
}

.noorifa-swatch.is-active {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.noorifa-swatch-empty {
	background-image: repeating-linear-gradient( 45deg, #eee, #eee 4px, #fff 4px, #fff 8px );
}