/* Scope inside Google Maps too */
.gm-style .pin,
.gm-style .pin__bubble,
.pin,
.pin__bubble {
  /* never stretch */
  width: fit-content !important;      /* fallback to max-content if needed */
  max-width: none !important;
  min-width: 0 !important;

  /* don't participate in flex growth if any parent is flex/grid */
  flex: 0 0 auto !important;
  align-self: flex-start !important;   /* avoid stretch in flex contexts */
  box-sizing: border-box;
}

/* Bubble visual (tokens; adjust as you like) */
.pin {
  --pin-bg: #ffffff;
  --pin-border: #ffffff;
  --pin-border-w: 2px;
  --pin-radius: 6px;
  --pin-pad: 6px;
  --pin-tail: 10px;
  --pin-font: 600 16px "Montserrat", system-ui, sans-serif;
  --pin-text: #00A9A4;
  --pin-img-max: 200px; /* set to e.g. 260px to cap */
  text-align:center;
}

/* Our wrapper should size to contents only */
.pin {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  transform: translateZ(0) translateY(calc(-1 * var(--pin-tail)));
}

.pin--shadow .pin__bubble { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

.pin__bubble {
  display: inline-block;
  background: var(--pin-bg);
  border: var(--pin-border-w) solid var(--pin-border);
  border-radius: var(--pin-radius);
  padding: var(--pin-pad);
  line-height: 0;
  box-sizing: border-box;
}

/* Beat global rules like img { width:100% } from frameworks */
.gm-style .pin__img,
.pin__img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: var(--pin-img-max, none) !important;
  object-fit: contain;
  flex: 0 0 auto !important;
}

/* Optional text under image */
.pin__text {
  display: inline-block;
  line-height: 1.2;
  margin-top: 6px;
  font: var(--pin-font);
  color: var(--pin-text);
  white-space: nowrap;
}

/* Tail (border behind + fill) */
.pin__tail { position: absolute; left: 50%; transform: translateX(-50%); width:0; height:0; }

.pin__tail--border {
  bottom: calc(-1 * var(--pin-tail) - (var(--pin-border-w) - 1px));
  border-left: calc(var(--pin-tail) + var(--pin-border-w)) solid transparent;
  border-right: calc(var(--pin-tail) + var(--pin-border-w)) solid transparent;
  border-top: calc(var(--pin-tail) + var(--pin-border-w)) solid var(--pin-border);
  z-index: -1;
}

.pin__tail--fill {
  bottom: calc(-1 * var(--pin-tail) + 1px);
  border-left: var(--pin-tail) solid transparent;
  border-right: var(--pin-tail) solid transparent;
  border-top: var(--pin-tail) solid var(--pin-bg);
}