/* HillGarden apartment selector - presentation only.
   Status colouring is pure CSS: attribute selector -> --c custom property ->
   fill/stroke. No JS touches colour, so the WP port needs zero style changes. */

.hg-selector {
  /* Hues chosen to contrast with the warm beige/brick + olive-glass render.
     Emerald (not olive) so "available" doesn't blend into the window glass. */
  --status-available: 22, 140, 92;   /* emerald green */
  --status-reserved:  230, 150, 30;  /* warm amber    */
  --status-sold:      44, 52, 60;     /* dark slate    */
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: 'Inter', sans-serif;
}

.hg-selector__stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  line-height: 0;
}

.hg-selector svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* --- Hotspots --------------------------------------------------------- */
.hg-hotspot { outline: none; }

.hg-hotspot polygon {
  --c: var(--status-available);
  fill: rgba(var(--c), 0.5);
  stroke: rgba(var(--c), 1);
  stroke-width: 2.5;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.18s ease, stroke-width 0.18s ease;
}

.hg-hotspot[data-status="pieejams"]  polygon { --c: var(--status-available); }
.hg-hotspot[data-status="rezervets"] polygon { --c: var(--status-reserved); }
.hg-hotspot[data-status="pardots"]   polygon { --c: var(--status-sold); }

/* Sold = not selectable */
.hg-hotspot[data-status="pardots"] polygon { cursor: not-allowed; }

/* Hover / keyboard focus = same emphasised state */
.hg-hotspot:hover polygon,
.hg-hotspot:focus-visible polygon,
.hg-hotspot.is-active polygon {
  fill: rgba(var(--c), 0.74);
  stroke-width: 4;
}
.hg-hotspot:focus-visible polygon {
  stroke: #1E2225;
  stroke-width: 2.5;
}

/* Apartment number label centred in each hotspot */
.hg-hotspot text {
  fill: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(30, 34, 37, 0.55);
  stroke-width: 2.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.hg-hotspot:hover text,
.hg-hotspot:focus-visible text,
.hg-hotspot.is-active text { opacity: 1; }

/* --- Tooltip ---------------------------------------------------------- */
.hg-tooltip {
  position: absolute;
  z-index: 30;
  min-width: 172px;
  max-width: 216px;
  background: #fff;
  border: 1px solid rgba(201, 181, 146, 0.5);
  border-top: 3px solid #8C4232;
  border-radius: 3px;
  box-shadow: 0 12px 30px -8px rgba(30, 34, 37, 0.35);
  padding: 9px 12px;
  font-size: 13px;
  color: #1E2225;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease;
  line-height: 1.3;
}
/* Only the visible card catches the pointer, so its link is clickable and
   the hidden card never blocks hotspots underneath it. */
.hg-tooltip.is-visible { opacity: 1; pointer-events: auto; }
.hg-tooltip::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  bottom: -7px;
  width: 12px; height: 12px;
  background: #fff;
  border-right: 1px solid rgba(201, 181, 146, 0.5);
  border-bottom: 1px solid rgba(201, 181, 146, 0.5);
  transform: translateX(-50%) rotate(45deg);
}
.hg-tooltip.is-flipped { border-top: 1px solid rgba(201, 181, 146, 0.5); border-bottom: 3px solid #8C4232; }
.hg-tooltip.is-flipped::after {
  left: var(--arrow-x, 50%);
  top: -7px; bottom: auto;
  border: 0;
  border-left: 1px solid rgba(201, 181, 146, 0.5);
  border-top: 1px solid rgba(201, 181, 146, 0.5);
}
.hg-tooltip__nr {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: #383E42;
  margin-bottom: 1px;
}
.hg-tooltip__meta { color: rgba(30, 34, 37, 0.6); font-size: 11.5px; margin-bottom: 4px; }
.hg-tooltip__price { font-weight: 600; color: #383E42; margin-bottom: 5px; }
.hg-tooltip__pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
}
.hg-tooltip__pill[data-status="pieejams"]  { background: #E3EADF; color: #2F4A22; }
.hg-tooltip__pill[data-status="rezervets"] { background: #F7EBD5; color: #633806; }
.hg-tooltip__pill[data-status="pardots"]   { background: #E8E7E4; color: #2C2C2A; }
.hg-tooltip__cta { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: #8C4232; text-decoration: none; cursor: pointer; }
a.hg-tooltip__cta:hover { text-decoration: underline; }

/* --- Floor tabs ------------------------------------------------------- */
.hg-floors { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; max-width: 100%; }
@media (max-width: 640px) {
  /* Narrow screens: horizontal scroll strip instead of wrapping/overflow */
  .hg-floors { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .hg-floor-tab { flex: 0 0 auto; }
}
.hg-floor-tab {
  padding: 8px 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #383E42;
  background: #F6F3EC;
  border: 1px solid rgba(201, 181, 146, 0.5);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hg-floor-tab:hover { border-color: #383E42; }
.hg-floor-tab.is-active { background: #383E42; color: #F6F3EC; border-color: #383E42; }

/* --- Legend ----------------------------------------------------------- */
.hg-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; }
.hg-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(30, 34, 37, 0.7); }
.hg-legend__swatch { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid; }
.hg-legend__swatch[data-status="pieejams"]  { background: rgba(22,140,92,0.55);  border-color: rgb(22,140,92); }
.hg-legend__swatch[data-status="rezervets"] { background: rgba(230,150,30,0.55);  border-color: rgb(230,150,30); }
.hg-legend__swatch[data-status="pardots"]   { background: rgba(44,52,60,0.55);    border-color: rgb(44,52,60); }
.hg-legend__count { font-weight: 600; color: #383E42; }

@media (max-width: 640px) {
  .hg-tooltip { min-width: 150px; font-size: 12px; padding: 11px 13px; }
  .hg-tooltip__nr { font-size: 17px; }
  .hg-hotspot text { font-size: 16px; }
}