.ah-diagram{position:relative;overflow:hidden;max-width:100%;}
.ah-stage{position:relative;transform-origin:0 0;transition:transform .45s ease;}
.ah-stage img{width:100%;display:block;}

.ah-hotspot{
  position:absolute !important;

  width:2px !important;
  height:25px !important;
  min-width:25px !important;
  min-height:25px !important;

  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;

  border-radius:999px !important;
  box-sizing:border-box !important;

  background:#e10000 !important;
  border:2px solid #fff !important;

  transform:translate(-50%,-50%);
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  color:#fff !important;
  font-weight:700 !important;
  font-size:15px !important;

  cursor:pointer;

  transition:background .25s ease, transform .2s ease;
}

/* Currently selected hotspot */
.ah-hotspot.active{
  background:#0073ff !important;
  transform:translate(-50%,-50%) scale(1.1);
}

.ah-hotspot:focus,
.ah-hotspot:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(225,0,0,.25), 0 4px 12px rgba(0,0,0,.25) !important;
}

@media (max-width:768px){
  .ah-hotspot{
    width:10px !important;
    height:10px !important;
    min-width:10px !important;
    min-height:10px !important;
    font-size:8px !important;
    border-width:1px !important;
  }

  .ah-hotspot.active{
    transform:translate(-50%,-50%) scale(1.05) !important;
  }
}
.ah-stage .ah-hotspot{
  padding:0 !important;
  line-height:1 !important;
}

/* Make the stage size match the image box exactly */
.ah-stage{
  display:inline-block;
  width:100%;
  line-height:0;           /* kills baseline gaps */
}

/* Ensure image defines the height properly */
.ah-stage img{
  height:auto;
  max-width:100%;
}

/* If WP adds <p> wrappers in some editors, neutralise them */
.ah-stage p{
  margin:0 !important;
  padding:0 !important;
}

/* Panel is a global portal element created by JS */
.ah-panel{
  position:fixed;

  top:90px;
  right:20px;

  background:#fff;
  padding:18px;

  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);

  display:none;
  z-index:2147483647;

  max-width:360px;
}

@media (max-width:768px){
  .ah-panel{
    left:12px; right:12px; bottom:12px; top:auto;
    max-width:none;
  }
}

.ah-panel h4{margin:0 0 8px 0;}
.ah-panel p{margin:0;}

.ah-close{
  position:absolute;
  top:8px; right:8px;
  width:36px;height:36px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.ah-noanim{
  transition:none !important;
}

.ah-diagram-title{
  margin:0 0 12px 0;
  font-weight:600;
}

/* Modal backdrop */
.ah-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

.ah-modal.active{
  opacity:1;
  pointer-events:auto;
}

/* Modal container */
.ah-modal-inner{
  width:min(1100px, 92vw);
  max-height:90vh;
  background:#fff;
  border-radius:14px;
  box-shadow:0 40px 100px rgba(0,0,0,.35);
  overflow:auto;              /* allow vertical scroll if needed */
  position:relative;
  padding:32px;
  box-sizing:border-box;
  
}

.ah-modal.active .ah-modal-inner{
  transform:scale(1);
  opacity:1;
}
.ah-panel{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
}

.ah-panel.ah-panel-show{
  opacity:1;
  transform:translateY(0);
}

/* Stop background page scrolling when modal open */
html.ah-modal-open, body.ah-modal-open{
  overflow:hidden;
}

/* Ensure panel sits above modal content */
.ah-panel{
  z-index:2147483647;
}


/* -------------------------------------------------
   When diagram is inside modal, override layout
---------------------------------------------------*/

.ah-modal .ah-diagram{
  max-width:none !important;
  overflow:visible !important;
  width:100%;
}

.ah-modal .ah-stage{
  overflow:visible !important;
}

/* Give modal some internal padding so panel never overlaps hotspot edge */
.ah-modal-inner{
  padding:24px;
  box-sizing:border-box;
}

.ah-modal{
  backdrop-filter:blur(4px);
}

/* FORCE diagram to expand inside modal */
.ah-modal-inner .ah-diagram{
  width:100% !important;
  max-width:none !important;
  margin:0 auto;
}

.ah-modal-inner .ah-stage{
  width:100%;
}

.ah-modal-inner img{
  width:100%;
  height:auto;
}