@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');

.bsh-wrap{ max-width:100%; }

.bsh-canvas{
  position:relative;
  display:inline-block;
  max-width:100%;
}
.bsh-img{
  display:block;
  max-width:100%;
  height:auto;
}

/* Hotspot box is the EFFECTIVE (cropped) hit area */
.bsh-hs{
  position:absolute;
  box-sizing:border-box;
  border-radius:10px;
  overflow:visible;
  outline:none;
}

/* Cursor difference only */
.bsh-hs.is-clickable{ cursor:pointer; }
.bsh-hs.is-disabled{ cursor:not-allowed; }

/* If no icon exists, show a soft region */
.bsh-hs:not(.has-icon){
  border:2px solid rgba(214,54,56,.55);
  background: rgba(214,54,56,.10);
  overflow:hidden;
}

/* If icon exists: no red box */
.bsh-hs.has-icon{
  border:0;
  background:transparent;
}

/* Icon mapping (cropped part fills the box) */
.bsh-hs__iconWrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:10px;
  pointer-events:none;
  z-index:1;
}
.bsh-hs__icon{
  position:absolute;
  display:block;
  pointer-events:none;
}

/* Title centered in the effective box */
.bsh-hs__label{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  font-family: Raleway, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size: clamp(12px, 0.9vw, 16px);
  color:#fff;
  background: rgba(0,0,0,.55);
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events:none;
  z-index:3;
}

/* Hover overlay */
.bsh-hs__overlay{
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.28);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
  z-index:2;
}

/* Hover highlight applies to BOTH clickable + non-clickable */
.bsh-hs:hover .bsh-hs__overlay,
.bsh-hs:focus-visible .bsh-hs__overlay{
  opacity:1;
}

/* If icon exists, mask overlay to icon */
.bsh-hs.has-icon .bsh-hs__overlay{
  background: rgba(255,255,255,.28);
  -webkit-mask-image: var(--bsh-icon);
  mask-image: var(--bsh-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* Use same mapping as the icon image (vars are numbers) */
  -webkit-mask-size: calc(var(--bsh-img-w) * 1%) calc(var(--bsh-img-h) * 1%);
  mask-size: calc(var(--bsh-img-w) * 1%) calc(var(--bsh-img-h) * 1%);

  -webkit-mask-position: calc(var(--bsh-img-l) * 1%) calc(var(--bsh-img-t) * 1%);
  mask-position: calc(var(--bsh-img-l) * 1%) calc(var(--bsh-img-t) * 1%);
}

/* Tooltip above on hover only for non-clickable */
.bsh-hs.is-disabled[data-hover-disabled]:hover::after{
  content: attr(data-hover-disabled);
  position:absolute;
  left:50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  font-family: Raleway, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size: 13px;
  color:#fff;
  background: rgba(0,0,0,.55);
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events:none;
  z-index:999;
}
.bsh-hs.is-disabled[data-hover-disabled]:hover::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  width:0;
  height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:8px solid rgba(0,0,0,.55);
  pointer-events:none;
  z-index:999;
}

/* Built-in modal */
.bsh-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:999999;
}
.bsh-modal[aria-hidden="false"]{ display:block; }

.bsh-modal__backdrop{
  position:absolute;
  inset:0;
  border:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,.60);
  cursor:pointer;
}

.bsh-modal__dialog{
  position:relative;
  max-width:min(900px, calc(100% - 32px));
  margin:48px auto;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.bsh-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid #eee;
}
.bsh-modal__title{ font-weight:600; }
.bsh-modal__close{
  appearance:none;
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:6px 10px;
}
.bsh-modal__body{ padding:16px; }