.tc-amenity-clone {
  --amenity-gold: #d9b356;
  --amenity-brown: #90663a;
  --amenity-cream: #f4ede2;
  position: relative;
  margin-top: clamp(22px, 3vw, 42px);
  overflow: hidden;
  background: #0b2823;
  border: 1px solid rgba(234, 206, 132, 0.55);
  box-shadow: 0 24px 60px rgba(5, 18, 16, 0.18);
}

.tc-amenity-clone__map {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.tc-amenity-clone__picture,
.tc-amenity-clone__picture img {
  display: block;
  width: 100%;
}

.tc-amenity-clone__picture img {
  height: auto;
  aspect-ratio: 15 / 7;
  object-fit: cover;
}

.tc-amenity-clone__hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.tc-amenity-clone__point {
  position: absolute;
  width: 30px;
  height: 30px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: #986b37;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font: 700 11px/1 "SVN Avant Garde Gothic", Arial, sans-serif;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.tc-amenity-clone__point:hover,
.tc-amenity-clone__point:focus-visible,
.tc-amenity-clone__point.is-active {
  outline: none;
  background: var(--amenity-gold);
  color: #2c1d0c;
  transform: translate(-50%, -50%) scale(1.22);
  box-shadow: 0 0 0 6px rgba(217, 179, 86, 0.25), 0 4px 18px rgba(0, 0, 0, 0.38);
}

.tc-amenity-clone__legend {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px 26px;
  margin-top: -1px;
  padding: 30px clamp(26px, 5vw, 82px) 34px;
  border-radius: 30px 30px 0 0;
  background: var(--amenity-cream);
  color: #76502f;
  box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.08);
}

.tc-amenity-clone__item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tc-amenity-clone__item i {
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--amenity-brown);
  color: #fff;
  font: 700 10px/1 "SVN Avant Garde Gothic", Arial, sans-serif;
  font-style: normal;
  transition: transform 0.2s ease, background 0.2s ease;
}

.tc-amenity-clone__item span {
  font: 400 11px/1.3 "SVN Avant Garde Gothic", Arial, sans-serif;
  letter-spacing: 0.035em;
}

.tc-amenity-clone__item:hover i,
.tc-amenity-clone__item:focus-visible i,
.tc-amenity-clone__item.is-active i {
  background: var(--amenity-gold);
  color: #2c1d0c;
  transform: scale(1.12);
}

.tc-amenity-clone__item:focus-visible {
  outline: 1px solid var(--amenity-brown);
  outline-offset: 5px;
}

.tc-amenity-clone__point--1 { top: 56.5%; left: 81.5%; }
.tc-amenity-clone__point--2a { top: 66%; left: 80%; }
.tc-amenity-clone__point--2b { top: 66%; left: 72%; }
.tc-amenity-clone__point--2c { top: 76%; left: 75%; }
.tc-amenity-clone__point--2d { top: 51%; left: 34%; }
.tc-amenity-clone__point--3a { top: 50%; left: 80%; }
.tc-amenity-clone__point--3b { top: 65%; left: 65%; }
.tc-amenity-clone__point--3c { top: 57%; left: 48%; }
.tc-amenity-clone__point--3d { top: 75%; left: 30%; }
.tc-amenity-clone__point--3e { top: 62%; left: 22%; }
.tc-amenity-clone__point--3f { top: 18%; left: 81%; }
.tc-amenity-clone__point--3g { top: 35%; left: 83%; }
.tc-amenity-clone__point--4 { top: 32%; left: 57%; }
.tc-amenity-clone__point--5 { top: 22%; left: 69%; }
.tc-amenity-clone__point--6a { top: 22%; left: 58%; }
.tc-amenity-clone__point--6b { top: 73%; left: 53%; }
.tc-amenity-clone__point--7 { top: 67%; left: 16%; }
.tc-amenity-clone__point--8 { top: 28%; left: 53%; }
.tc-amenity-clone__point--9 { top: 58%; left: 54%; }
.tc-amenity-clone__point--10 { top: 52%; left: 57%; }
.tc-amenity-clone__point--11 { top: 42%; left: 61%; }
.tc-amenity-clone__point--12a { top: 55%; left: 30%; }
.tc-amenity-clone__point--12b { top: 65%; left: 45%; }
.tc-amenity-clone__point--13a { top: 53%; left: 70%; }
.tc-amenity-clone__point--13b { top: 58%; left: 61%; }
.tc-amenity-clone__point--13c { top: 65%; left: 60%; }
.tc-amenity-clone__point--13d { top: 64%; left: 55%; }
.tc-amenity-clone__point--13e { top: 76%; left: 22%; }
.tc-amenity-clone__point--13f { top: 32%; left: 50%; }
.tc-amenity-clone__point--13g { top: 19%; left: 76%; }

@media (max-width: 700px) {
  .tc-amenity-clone {
    margin-top: 20px;
    margin-inline: -18px;
    border-inline: 0;
  }

  .tc-amenity-clone__picture img {
    aspect-ratio: 10 / 7;
  }

  .tc-amenity-clone__point {
    width: 20px;
    height: 20px;
    font-size: 7px;
  }

  .tc-amenity-clone__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    padding: 20px 15px 23px;
    border-radius: 18px 18px 0 0;
  }

  .tc-amenity-clone__item { gap: 7px; }
  .tc-amenity-clone__item i { flex-basis: 22px; width: 22px; height: 22px; font-size: 8px; }
  .tc-amenity-clone__item span { font-size: 9px; letter-spacing: 0.01em; }

  .tc-amenity-clone__point--1 { top: 56.5%; left: 71.5%; }
  .tc-amenity-clone__point--2a { top: 66%; left: 70%; }
  .tc-amenity-clone__point--2b { top: 66%; left: 64%; }
  .tc-amenity-clone__point--2c { top: 76%; left: 66%; }
  .tc-amenity-clone__point--3a { top: 50%; left: 70%; }
  .tc-amenity-clone__point--3b { top: 65%; left: 60%; }
  .tc-amenity-clone__point--3d { top: 75%; left: 37%; }
  .tc-amenity-clone__point--3e { top: 63%; left: 31%; }
  .tc-amenity-clone__point--3f { top: 18%; left: 71%; }
  .tc-amenity-clone__point--3g { top: 35%; left: 72%; }
  .tc-amenity-clone__point--5 { top: 22%; left: 69%; }
  .tc-amenity-clone__point--7 { top: 67%; left: 27%; }
  .tc-amenity-clone__point--9 { top: 58%; left: 53%; }
  .tc-amenity-clone__point--10 { top: 53%; left: 55%; }
  .tc-amenity-clone__point--11 { top: 42%; left: 58%; }
  .tc-amenity-clone__point--12a { top: 55%; left: 36%; }
  .tc-amenity-clone__point--12b { top: 65%; left: 46%; }
  .tc-amenity-clone__point--13a { top: 53%; left: 63%; }
  .tc-amenity-clone__point--13b { top: 57%; left: 57%; }
  .tc-amenity-clone__point--13c { top: 63%; left: 57%; }
  .tc-amenity-clone__point--13d { top: 63%; left: 54%; }
  .tc-amenity-clone__point--13e { top: 75%; left: 32%; }
  .tc-amenity-clone__point--13f { top: 32%; left: 51%; }
  .tc-amenity-clone__point--13g { top: 19%; left: 66%; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-amenity-clone__point,
  .tc-amenity-clone__item i { transition: none; }
}