.building-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.building-bg-img {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.building-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Headings */
.building-north-heading,
.building-north-west-heading {
  position: absolute;
  top: 7%;
  z-index: 3;
}

.building-north-heading {
  right: 21%;
}
.building-north-west-heading {
  left: 8%;
}

.building-tower-a,
.building-tower-b {
  position: absolute;
  z-index: 3;
}

.building-tower-a {
  bottom: 15%;
  right: 19%;
}
.building-tower-b {
  bottom: 13%;
  left: 48%;
}

/* Legend Styles */
.building-color-boxs {
  position: absolute;
  bottom: 7%;
  left: 5%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px 12px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.building-color-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.building-box {
  width: 14px;
  height: 14px;
}

/* Building Items */
.building-items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.building {
  cursor: pointer;
  position: absolute;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.building:hover {
  /* transform: scale(1.05); */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
  filter: brightness(1.1);
}

.building-letter {
  position: absolute;
  left: 4px;
  top: 2px;
  opacity: 0.8;
}

.building-number {
  margin-top: -2px;
}

.building-space {
  position: absolute;
  bottom: 2px;
  right: 4px;
  opacity: 0.9;
}

.building-space sup {
  font-size: 6px;
}

/* Sizes */
.building.m-90 {
  width: 13.2%;
  height: 8.5%;
}
.building.m-80-d {
  width: 11.9%;
  height: 7%;
}
.building.m-80-a {
  width: 10.6%;
  height: 9.3%;
}
.building.m-85 {
  width: 11.19%;
  height: 9.5%;
}
.building.m-50 {
  width: 6%;
  height: 9.39%;
}

/* North Row Positions */
.building-items-b1 {
  bottom: 18.1%;
  right: 15.2%;
}
.building.m-80-d.building-items-b1::after {
  content: "";
  width: 46%;
  height: 59%;
  background: inherit;
  top: 0%;
  position: absolute;
  left: -46%;
}

.building-items-b2 {
  bottom: 25.2%;
  right: 17.8%;
}
.building-items-b3 {
  bottom: 33.95%;
  right: 17.8%;
}
.building-items-b4 {
  bottom: 48.2%;
  right: 15%;
}
.building-items-b5 {
  bottom: 57.67%;
  right: 15%;
}
.building-items-b6 {
  bottom: 67.15%;
  right: 15%;
}
.building-items-b7 {
  bottom: 76.59%;
  right: 17.41%;
}
.building-items-b8 {
  bottom: 76.59%;
  right: 28.87%;
}
.building-items-b9 {
  bottom: 67.9%;
  right: 28.87%;
}
.building-items-b10 {
  bottom: 59.19%;
  right: 28.87%;
}
.building-items-b11 {
  bottom: 50.5%;
  right: 28.87%;
}

/* South Row Positions */
.building-south-row {
  width: 100%;
  height: 100%;
}

.building-south-row .building {
  transform: rotate(-18deg);
}
.building-items-b12 {
  bottom: 15.9%;
  right: 46.2%;
}
.building.m-80-d.building-items-b12::after {
  content: "";
  width: 48.36%;
  height: 60%;
  background: inherit;
  top: 0;
  position: absolute;
  right: -37%;
}
.building-items-b13 {
  bottom: 23.5%;
  right: 45.5%;
}
.building-items-b14 {
  bottom: 31.8%;
  right: 49.3%;
}
.building-items-b15 {
  bottom: 47.6%;
  right: 56.6%;
}
.building-items-b16 {
  bottom: 55.9%;
  right: 60.4%;
}
.building-items-b17 {
  bottom: 64.2%;
  right: 64.2%;
}
.building-items-b18 {
  bottom: 72.58%;
  right: 68.1%;
}
.building-items-b19 {
  bottom: 72.8%;
  right: 80.1%;
}

/* Custom Tooltip Logic (Optional simplification) */
.building::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  pointer-events: none;
}

.building:hover::before {
  opacity: 1;
  visibility: visible;
}