/* ==========================================================================
   Monolith Facility Map Viewer — viewer.css
   Full replacement (includes HARD RESET for pin.svg to remove any theme styles)
   ========================================================================== */

.mfmv-root{
  width:100%;

  /* Quick styling knobs (if you’re using them elsewhere) */
  --mfmv-shell-bg:#f6f7f9;
  --mfmv-shell-border-color:rgba(0,0,0,.12);
  --mfmv-shell-border-width:1px;
  --mfmv-shell-padding:0px;

  --mfmv-thumb-w:54px;
  --mfmv-thumb-h:38px;

  /* Pin sizing (optional) */
  --mfmv-pin-size: 50px;
}

/* ---------------- Tabs ---------------- */

.mfmv-tabs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 10px 0;
  padding:0;
}

.mfmv-tab{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  border:1px solid rgba(0,0,0,.15);
  background:#fff;

  padding:8px 10px;

  /* square tabs by default */
  border-radius:0;

  line-height:1;
  text-decoration:none;
  box-shadow:none;

  transition: filter .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mfmv-tab:hover{ filter: brightness(0.98); }

.mfmv-tab.is-active{
  border-color:#0B1A3A;
  box-shadow: 0 0 0 2px rgba(11,26,58,.12);
}

.mfmv-tab-thumb{
  width:var(--mfmv-thumb-w);
  height:var(--mfmv-thumb-h);

  /* square thumbs by default */
  border-radius:0;

  background-size:cover;
  background-position:center;
  border:1px solid rgba(0,0,0,.12);
  flex:0 0 auto;
  display:block;
}

.mfmv-tab-label{
  font-size:13px;
  line-height:1.1;
  white-space:nowrap;
}

/* ---------------- Viewer Shell ---------------- */

.mfmv-viewer{
  width:100%;
  height:520px;

  /* square shell by default */
  border-radius:0;

  overflow:hidden;

  background:var(--mfmv-shell-bg);

  border-style:solid;
  border-color:var(--mfmv-shell-border-color);
  border-width:var(--mfmv-shell-border-width);

  padding:var(--mfmv-shell-padding);
  box-sizing:border-box;
}

.mfmv-stage{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* Map image */
.mfmv-map-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  pointer-events:none;
  z-index:1;

  transition: opacity .2s ease;
  opacity:1;
}

.mfmv-map-image.mfmv-is-fading{
  opacity:0;
}

/* ---------------- Hotspots Layer ---------------- */

/* Layer should never block clicks */
.mfmv-hotspots-layer{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
}

/* Hotspot wrapper (usually a button) */
.mfmv-hotspot{
  position:absolute;
  transform:translate(-50%,-100%);
  cursor:pointer;
  pointer-events:auto;

  /* HARD RESET: eliminate any theme button styling */
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Some themes add pseudo elements to buttons */
.mfmv-hotspot::before,
.mfmv-hotspot::after{
  content: none !important;
  display: none !important;
}

/* The pin image itself */
.mfmv-hotspot img{
  width: var(--mfmv-pin-size) !important;
  height: var(--mfmv-pin-size) !important;
  display: block !important;

  /* HARD RESET: eliminate any theme img styling */
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  border-radius: 0 !important;
  filter: none !important;
}

/* ---------------- Editor canvas ---------------- */
.mfmv-editor-canvas{
  position:absolute;
  inset:0;
  z-index:8;
  cursor:crosshair;
  pointer-events:auto;
}