/**
 * Fotomania (feature): first-party GLOBAL stylesheet for the Studio customizer page.
 *
 * The drag ghost is a body-appended DOM node living outside every component's
 * shadow root (drag-to-canvas.ts), so component-scoped shadow CSS cannot reach it:
 * this file is the only place that can style it. Nothing else belongs in this
 * file's blocks below; keep each rule scoped strictly under its own class.
 *
 * The sibling overlay, fm-image-source-upload.tsx's .fm-drag-slot-highlight, is
 * styled ENTIRELY inline at creation time and deliberately has no rule here: an
 * inline style always wins, so a rule would be inert and would only drift.
 * Its inline z-index (99998) must stay strictly below the ghost's 99999 - the
 * highlight marks the target, the ghost is what the pointer carries.
 * studio/tests/unit/drag-overlay-stacking.test.mjs pins both halves of that.
 */

.fm-drag-placeholder{position:fixed;z-index:99999;width:72px;height:72px;pointer-events:none;border-radius:var(--fm-radius-lg, 8px);overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.35);opacity:.92}
.fm-drag-placeholder img{width:100%;height:100%;object-fit:cover;display:block}
.fm-drag-placeholder span{display:inline-block;padding:4px 8px;background:#fff;border-radius:var(--fm-radius-lg, 8px);font-size:12px}
.fm-drag-placeholder.is-busy{opacity:.6}