/* Floor Plan 3D Visualizer -- see includes/floorplan-3d.php and
   assets/floorplan-3d-detect.js / assets/floorplan-3d-viewer.js. Only
   enqueued on the visualizer page itself (see samtastic_public_assets()'s
   $needs_fp3d check), same conditional-load pattern as MapLibre/Leaflet. */

.fp3d { max-width: 980px; margin: 0 auto; }
.fp3d__intro { margin: 0 0 18px; color: var(--sam-ink-soft); font-size: .95rem; line-height: 1.6; }

.fp3d__dropzone {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	border: 2px dashed var(--sam-line, #d8d2c4); border-radius: 12px; padding: 48px 20px;
	cursor: pointer; text-align: center; background: #fbfaf7; transition: border-color .2s, background .2s;
}
.fp3d__dropzone.is-dragover { border-color: #a9812f; background: #f6f0e2; }
.fp3d__dropzone-text { font-weight: 600; color: var(--sam-ink, #1a1712); }
.fp3d__dropzone-hint { font-size: .82rem; color: var(--sam-ink-soft, #6b6357); }
.fp3d__file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fp3d__status { margin-top: 10px; font-size: .88rem; }
.fp3d__status.is-error { color: #b3261e; }

.fp3d__stage-label { font-weight: 700; font-size: 1.05rem; margin: 0 0 4px; color: var(--sam-ink, #1a1712); }
.fp3d__stage-help { margin: 0 0 14px; font-size: .88rem; color: var(--sam-ink-soft, #6b6357); }

.fp3d__canvas-wrap { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--sam-line, #d8d2c4); border-radius: 8px; overflow: auto; background: #fff; }
.fp3d__canvas-wrap canvas { display: block; max-width: none; }
.fp3d__overlay-canvas { position: absolute; top: 0; left: 0; touch-action: none; cursor: crosshair; }

.fp3d__toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.fp3d__scale-input-label { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--sam-ink, #1a1712); }
.fp3d__scale-input { width: 90px; padding: 8px 10px; border: 1px solid var(--sam-line, #d8d2c4); border-radius: 6px; font: inherit; }

.fp3d__viewer-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.fp3d__viewer-canvas-wrap { position: relative; }
.fp3d__viewer-canvas { width: 100%; height: 480px; background: #eef1f4; border-radius: 8px; overflow: hidden; }
.fp3d__viewer-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.fp3d__viewer-controls-hint { margin-top: 8px; font-size: .78rem; color: var(--sam-ink-soft, #6b6357); text-align: center; }
.fp3d__viewer-error { padding: 40px 20px; text-align: center; color: #b3261e; }

.fp3d__processing { padding: 60px 20px; text-align: center; font-size: .95rem; color: var(--sam-ink-soft, #6b6357); }

.fp3d__gallery {
	display: grid; grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); gap: 10px;
	margin: 0 0 20px;
}
.fp3d__gallery-loading { grid-column: 1 / -1; font-size: .85rem; color: var(--sam-ink-soft, #6b6357); }
.fp3d__gallery-shot { margin: 0; border: 1px solid var(--sam-line, #d8d2c4); border-radius: 8px; overflow: hidden; background: #fff; }
.fp3d__gallery-shot img { display: block; width: 100%; height: auto; }
.fp3d__gallery-shot figcaption { padding: 6px 8px; font-size: .76rem; color: var(--sam-ink-soft, #6b6357); text-align: center; }

.fp3d__fix-link { margin-top: 16px; }

.fp3d__disclaimer { margin-top: 22px; font-size: .78rem; color: var(--sam-ink-soft, #6b6357); }

@media ( max-width: 760px ) {
	.fp3d__viewer-canvas { height: 360px; }
	.fp3d__gallery { grid-template-columns: repeat( auto-fill, minmax( 120px, 1fr ) ); }
}