/**
 * 3D Model Viewer - Frontend Styles
 *
 * Buttons inherit the active theme's `.button` / `.button.alt` styling
 * (color, border, radius, font). Plugin only handles layout: flex
 * alignment for the icon, spacing between the two buttons, and
 * full-width stacking on mobile.
 */

/* ── Buttons ─────────────────────────────────────── */
.bss3dv-buttons {
	display: flex;
	gap: 10px;
	margin: 15px 0;
	flex-wrap: wrap;
}

.bss3dv-buttons .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.bss3dv-buttons svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* ── Shared Modal Overlay ────────────────────────── */
.bss3dv-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bss3dv-modal-overlay.bss3dv-active {
	opacity: 1;
}

/* ── Shared Close Button (same as quote modal) ───── */
.bss3dv-modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	min-height: 32px;
	min-width: 32px;
	font-size: 24px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.15s;
	z-index: 1;
	padding: 0;
	margin: 0;
}

.bss3dv-modal-close:hover {
	background: #f0f0f0;
	color: #333;
}

/* ── 3D Viewer Modal ─────────────────────────────── */
.bss3dv-modal {
	background: #fff;
	border-radius: 8px;
	width: 100%;
	max-width: 900px;
	height: 80vh;
	max-height: 90vh;
	position: relative;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: bss3dvSlideIn 0.25s ease-out;
}

@keyframes bss3dvSlideIn {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Header bar inside 3D modal */
.bss3dv-modal model-viewer {
	width: 100%;
	height: 100%;
	/* Anti-download friction: no selection / drag-save of the model canvas. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* ── QR Code Modal ───────────────────────────────── */
.bss3dv-qr-modal {
	background: #fff;
	border-radius: 8px;
	width: 100%;
	max-width: 420px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: bss3dvSlideIn 0.25s ease-out;
}

/* QR Modal Header */
.bss3dv-qr-header {
	padding: 25px 30px 15px;
	border-bottom: 1px solid #eee;
}

.bss3dv-qr-modal h3 {
	margin: 0;
	font-size: 22px;
	color: #1d2327;
}

/* QR Modal Body */
.bss3dv-qr-body {
	padding: 20px 30px 25px;
	text-align: center;
}

.bss3dv-qr-body > p {
	margin: 0 0 20px;
	color: #555;
	font-size: 0.95em;
	line-height: 1.5;
}

.bss3dv-qr-container {
	display: flex;
	justify-content: center;
	padding: 20px;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 6px;
	margin-bottom: 20px;
}

.bss3dv-qr-container canvas,
.bss3dv-qr-container img {
	max-width: 200px;
	height: auto;
}

/* ── Copy Link Section ───────────────────────────── */
.bss3dv-copy-link {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 10px 12px;
	background: #f5f5f5;
	border-radius: 6px;
}

.bss3dv-ar-link-input {
	flex: 1;
	padding: 0;
	border: none;
	font-size: 13px;
	color: #888;
	background: transparent;
	min-width: 0;
	outline: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 0 !important;
	height: auto;
}

.bss3dv-copy-btn {
	margin: 0 !important;
	padding: 6px 14px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	border-radius: 4px !important;
	white-space: nowrap;
	cursor: pointer;
	background: transparent !important;
	color: var(--bss3dv-accent, var(--primary-color, #5c4a3a)) !important;
	border: 1.5px solid var(--bss3dv-accent, var(--primary-color, #5c4a3a)) !important;
	transition: all 0.15s;
	line-height: 1.4 !important;
	min-height: auto !important;
}

.bss3dv-copy-btn:hover {
	background: var(--bss3dv-accent, var(--primary-color, #5c4a3a)) !important;
	color: #fff !important;
}

.bss3dv-copy-btn.bss3dv-copied {
	background: #627D47 !important;
	color: #fff !important;
	border-color: #627D47 !important;
}

.bss3dv-qr-note {
	font-size: 11px !important;
	color: #bbb !important;
	margin: 0 !important;
}

/* ── Hotspots on frontend model-viewer ────────────── */
.bss3dv-frontend-hs {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--bss3dv-accent, var(--primary-color, #5c4a3a));
	cursor: pointer;
	position: relative;
	box-shadow: 0 1px 6px rgba(0,0,0,.3);
	transition: transform 0.2s;
	padding: 0;
}

.bss3dv-frontend-hs:hover {
	transform: scale(1.3);
}

.bss3dv-frontend-hs-label {
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.8);
	color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
}

.bss3dv-frontend-hs:hover .bss3dv-frontend-hs-label {
	opacity: 1;
}

/* ── Dimensions bar in modal ─────────────────────── */
.bss3dv-modal-dims {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: none;
}

.bss3dv-dims-bar {
	display: flex;
	gap: 16px;
	background: rgba(0,0,0,.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 8px 20px;
	border-radius: 20px;
}

.bss3dv-dims-bar span {
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* ── Camera view preset buttons in modal ─────────── */
.bss3dv-modal-views {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	max-width: 70%;
}

.bss3dv-view-btn-preset {
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 600;
	border: 1.5px solid rgba(255,255,255,.8);
	background: rgba(0,0,0,.5);
	color: #fff;
	border-radius: 16px;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: all 0.15s;
}

.bss3dv-view-btn-preset:hover,
.bss3dv-view-btn-preset.active {
	background: var(--bss3dv-accent, var(--primary-color, #5c4a3a));
	border-color: var(--bss3dv-accent, var(--primary-color, #5c4a3a));
}

/* ── Responsive ──────────────────────────────────── */
/* Button stacking / full-width on mobile is admin-configurable via the
   "Button Styling > Responsive" settings (emitted as inline @media CSS).
   Only modal-related responsive rules remain hardcoded below. */
@media (max-width: 768px) {
	.bss3dv-modal {
		max-width: 100%;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
	}

	.bss3dv-qr-modal {
		max-width: 100%;
		border-radius: 0;
	}

	.bss3dv-qr-header {
		padding: 20px 15px 12px;
	}

	.bss3dv-qr-body {
		padding: 15px;
	}
}

/* ── Dimension Hotspots & Lines ─────────────────── */
/* Dots are invisible anchor points for SVG lines — must exist in DOM for queryHotspot */
.bss3dv-fe-dim-dot {
	display: block;
	width: 0;
	height: 0;
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	pointer-events: none;
	--min-hotspot-opacity: 0;
}

.bss3dv-fe-dim-label {
	border-radius: 4px;
	border: none;
	box-sizing: border-box;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	color: rgba(0, 0, 0, 0.8);
	display: block;
	font-family: Futura, Helvetica Neue, sans-serif;
	font-size: 1em;
	font-weight: 700;
	max-width: 128px;
	overflow-wrap: break-word;
	padding: 0.5em 1em;
	position: absolute;
	width: max-content;
	height: max-content;
	transform: translate3d(-50%, -50%, 0);
	pointer-events: none;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
	--min-hotspot-opacity: 0;
}

@media only screen and (max-width: 800px) {
	.bss3dv-fe-dim-label {
		font-size: 3vw;
	}
}

.bss3dv-fe-dim-svg {
	pointer-events: none;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.bss3dv-fe-dim-line {
	stroke: #16a5e6;
	stroke-width: 2;
	stroke-dasharray: 2;
}

.bss3dv-fe-dim-hide {
	display: none;
}

/* ── Material Variant Selector ──────────────────── */
.bss3dv-modal-vars {
	position: absolute;
	bottom: 16px;
	left: 16px;
	z-index: 10;
}

.bss3dv-variant-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.bss3dv-variant-bar label {
	font-weight: 600;
	color: #333;
	white-space: nowrap;
}

.bss3dv-variant-bar select {
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid #ccc;
	font-size: 14px;
	background: #fff;
	cursor: pointer;
}

/* ── Inline viewer (shortcode / block / gallery slide) ───── */
.bss3dv-inline {
	position: relative;
	display: block;
	max-width: 100%;
}

.bss3dv-inline model-viewer {
	width: 100%;
	display: block;
	background: #e8e8e8;
	/* Anti-download friction: no selection / drag-save. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.bss3dv-inline .bss3dv-views {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	max-width: 70%;
}

.bss3dv-inline .bss3dv-dims {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: none;
}

.bss3dv-inline .bss3dv-variants {
	position: absolute;
	bottom: 16px;
	left: 16px;
	z-index: 10;
}

/* Gallery slide: fill the WooCommerce gallery image area. */
.bss3dv-gallery-slide {
	position: relative;
}

.bss3dv-gallery-slide .bss3dv-inline,
.bss3dv-gallery-slide .bss3dv-inline model-viewer {
	height: 100%;
	min-height: 380px;
}

/* Shown only when the model-viewer ES module could not be loaded at all
   (a JS optimisation plugin combined or mangled it and the runtime
   re-injection in bss3dv-frontend.js also failed). */
.bss3dv-load-error {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 20;
	max-width: 90%;
	margin: 0;
	padding: 10px 16px;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 14px;
	text-align: center;
}
/* ── Before the <model-viewer> custom element upgrades ────────────
   Until the ES module runs, <model-viewer> is an unknown inline element and
   its slotted children render as ordinary HTML — the AR button in particular
   flashes up as raw text and an icon over the gallery image. Hide them until
   the element is defined; model-viewer then decides what each slot shows. */
model-viewer:not(:defined) > * {
	display: none;
}

/* ── AR button slotted into the viewer ─────────────────────────────
   Only styled on the standalone AR page until now, so on product pages it
   appeared as an unstyled browser button wherever AR is supported (mobile).
   Matches the plugin's accent so it sits on the model, not on top of it. */
.bss3dv-ar-button {
	position: absolute;
	bottom: 16px;
	padding: 10px 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	border: none;
	border-radius: 6px;
	background: var(--bss3dv-accent, var(--primary-color, #5c4a3a));
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.bss3dv-ar-button svg {
	flex: none;
}

.bss3dv-ar-button {
	left: 50%;
	transform: translateX(-50%);
}