/* ==========================================================================
   VC Image Map — Styles
   Structure: Stage → Image + Pins → Tooltip | Overlay → Modal → Body
   ========================================================================== */

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --vim-pin-color: #2563eb; /* default pin colour — override per pin with inline var */
  --vim-pin-size: 0.5rem;
  --vim-pin-pulse-color: rgba(37, 99, 235, 0.35);
  --vim-pin-hover-scale: 1.25;
  --vim-tooltip-bg: #1e293b;
  --vim-tooltip-text: #f8fafc;
  --vim-tooltip-radius: 0.375rem;
  --vim-overlay-bg: rgba(0, 0, 0, 0.55);
  --vim-modal-bg: #fff;
  --vim-modal-radius: 10px;
  --vim-modal-max-width: 396px;
  --vim-modal-padding: 30px;
  --vim-modal-header-padding-y: 12px;
  --vim-modal-header-padding-x: 40px;
  --vim-close-size: 2em;
  --vim-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --vim-z-pins: 10;
  --vim-z-overlay: 10000;

  --pin-color: red !important;
}

/* ── Stage (the positioned container over the image) ─────────────────────── */
.vc-image-map {
  container-type: inline-size;
}

.vc-image-map__stage {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0; /* removes gap under img */
  overflow: visible; /* let tooltips breathe */
}

.vc-image-map__image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none; /* clicks go to pins, not the image */
  user-select: none;
  border-radius: inherit;
}

/* ── Pin ──────────────────────────────────────────────────────────────────── */
.vc-image-map__pin {
  position: absolute;
  /* centred on the coordinate point */
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: var(--vim-z-pins);
  /* group for tooltip positioning */
  display: flex;
  align-items: center;
  justify-content: center;
}

.vc-image-map__pin:focus-visible {
  /*outline: 2px solid var(--pin-color, var(--vim-pin-color));*/
  outline: 2px solid var(--vim-pin-color);
  outline-offset: 4px;
  border-radius: 50%;
}

/* ── Pin dot ──────────────────────────────────────────────────────────────── */
.vc-image-map__pin-dot {
  display: block;
  border-radius: 50%;
  transition: transform var(--vim-transition);

  width: 19px;
  height: 19px;
  background: url('data:image/svg+xml,<svg width="13" height="19" viewBox="0 0 13 19" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_503_452)"><path d="M6.49554 19.0003L1.38324 10.566C0.674935 9.40431 0.120821 8.1226 0.0148162 6.74969C-0.129735 4.84873 0.699027 3.00537 2.07227 1.72847C3.35877 0.537966 5.05003 -0.0716853 6.78946 0.00512114C10.3647 0.168335 13.1449 3.19739 12.9907 6.76409C12.7932 7.95459 12.4511 9.14029 11.8102 10.2012L6.49554 18.9955V19.0003ZM9.48776 6.48087C9.48776 4.81033 8.12897 3.45661 6.45218 3.45661C4.77538 3.45661 3.4166 4.81033 3.4166 6.48087C3.4166 8.15141 4.77538 9.50512 6.45218 9.50512C8.12897 9.50512 9.48776 8.15141 9.48776 6.48087Z" fill="%23FF000E"/><path d="M6.4564 9.61999C8.19677 9.61999 9.60762 8.21441 9.60762 6.48053C9.60762 4.74665 8.19677 3.34106 6.4564 3.34106C4.71603 3.34106 3.30518 4.74665 3.30518 6.48053C3.30518 8.21441 4.71603 9.61999 6.4564 9.61999Z" fill="%23BF2C2B"/></g><defs><clipPath id="clip0_503_452"><rect width="13" height="19" fill="white"/></clipPath></defs></svg>') no-repeat 50% 0;
}

.vc-image-map__pin:hover .vc-image-map__pin-dot,
.vc-image-map__pin:focus-visible .vc-image-map__pin-dot {
  transform: scale(var(--vim-pin-hover-scale));
  background: url('data:image/svg+xml,<svg width="13" height="19" viewBox="0 0 13 19" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_503_452)"><path d="M6.49554 19.0003L1.38324 10.566C0.674935 9.40431 0.120821 8.1226 0.0148162 6.74969C-0.129735 4.84873 0.699027 3.00537 2.07227 1.72847C3.35877 0.537966 5.05003 -0.0716853 6.78946 0.00512114C10.3647 0.168335 13.1449 3.19739 12.9907 6.76409C12.7932 7.95459 12.4511 9.14029 11.8102 10.2012L6.49554 18.9955V19.0003ZM9.48776 6.48087C9.48776 4.81033 8.12897 3.45661 6.45218 3.45661C4.77538 3.45661 3.4166 4.81033 3.4166 6.48087C3.4166 8.15141 4.77538 9.50512 6.45218 9.50512C8.12897 9.50512 9.48776 8.15141 9.48776 6.48087Z" fill="%2300EE94"/><path d="M6.4564 9.61999C8.19677 9.61999 9.60762 8.21441 9.60762 6.48053C9.60762 4.74665 8.19677 3.34106 6.4564 3.34106C4.71603 3.34106 3.30518 4.74665 3.30518 6.48053C3.30518 8.21441 4.71603 9.61999 6.4564 9.61999Z" fill="%230B7B50"/></g><defs><clipPath id="clip0_503_452"><rect width="13" height="19" fill="white"/></clipPath></defs></svg>') no-repeat 50% 0;
}

/* ── Tooltip ──────────────────────────────────────────────────────────────── */
.vc-image-map__pin-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--vim-tooltip-bg);
  color: var(--vim-tooltip-text);
  font-size: 0.8125rem; /* 13 px */
  line-height: 1.4;
  font-weight: 500;
  padding: 0.3em 0.65em;
  border-radius: var(--vim-tooltip-radius);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--vim-transition),
  transform var(--vim-transition);
  /* small arrow */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.vc-image-map__pin-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--vim-tooltip-bg);
}

.vc-image-map__pin:hover .vc-image-map__pin-tooltip,
.vc-image-map__pin:focus-visible .vc-image-map__pin-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */
.vc-image-map__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--vim-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--vim-overlay-bg);
  /* entry animation driven by JS toggling .is-open */
  opacity: 0;
  transition: opacity var(--vim-transition);
}

.vc-image-map__overlay[hidden] {
  display: none;
}

.vc-image-map__overlay.is-open {
  opacity: 1;
}

/* ── Modal panel ──────────────────────────────────────────────────────────── */
.vc-image-map__modal {
  border-radius: var(--vim-modal-radius);
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: var(--vim-modal-max-width);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2),
  0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--vim-transition),
  opacity var(--vim-transition);
  opacity: 0;
}

.vc-image-map__overlay.is-open .vc-image-map__modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.vc-image-map__close {
  position: absolute;
  right: 7px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: white;
  font-size: var(--vim-close-size);
  font-weight: 300;
  align-self: flex-start;
}

/* ── Modal header (cloned accordion content lands here) ─────────────────────── */
.vc-image-map__modal-header {
  padding: var(--vim-modal-header-padding-y) var(--vim-modal-header-padding-x);

  background: #0081FF;
  min-height: 53px;

  color: white;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.25px;

  display: flex;
  justify-content: center;
  align-items: center;
}
/* ── Modal body (cloned accordion content lands here) ─────────────────────── */
.vc-image-map__modal-body {
  background: var(--vim-modal-bg);
  padding: var(--vim-modal-padding);
}

/* Strip WPBakery toggle chrome that shouldn't show in the modal */
.vc-image-map__modal-body .vc_toggle_title,
.vc-image-map__modal-body .vc_toggle_icon {
  display: none;
}

.vc-image-map__modal-body .vc_toggle_content {
  display: block !important; /* vc_toggle hides this by default */
  padding: 0 !important;
  border: none !important;
}
.vc-image-map__modal-body > .wpb_column {
  float: none;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vc-image-map__pin-dot {
    animation: none;
  }
  .vc-image-map__overlay,
  .vc-image-map__modal,
  .vc-image-map__pin-dot,
  .vc-image-map__pin-tooltip {
    transition: none;
  }
}