/* Floor Plan Interaction */

.floorplan {
  position: relative;
  max-width: 31.2vw;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .floorplan {
    max-width: 88%;
  }
}

.floorplan__container {
  position: relative;
}

.floorplan__bg {
  width: 100%;
  display: block;
}

/* SVG base colors */
.floorplan__bg .st0 {
  fill: #514b45;
}

/* Room area fills */
.floorplan__area polygon,
.floorplan__area rect {
  fill: #27201e;
  cursor: pointer;
  transition: fill 0.8s ease;
}

@media (hover: hover) {
  .floorplan__area:hover polygon,
  .floorplan__area:hover rect {
    fill: #514b45;
  }
}

.floorplan__area--active polygon,
.floorplan__area--active rect {
  fill: #514b45;
}


.floorplan__area[data-modal] rect {
  fill: transparent;
}

@media (hover: hover) {
  .floorplan__area[data-modal]:hover rect {
    fill: #514b45;
  }
}

/* Number/label text styling */
.floorplan__number,
.floorplan__number path {
  fill: #514b45;
  transition: fill 0.8s ease;
}


.floorplan__number--bright {
  fill: #f0ece8 !important;
}

/* Card hover state triggered by SVG area hover */
.room-card--hover::after {
  opacity: 0;
}

.room-card--hover .room-card__name {
  opacity: 0;
}

/* Floor selector tabs */
.floor-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.floor-tab {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  padding: 0.4em 1.2em;
  border: 1px solid currentColor;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
  color: inherit;
}

.floor-tab--active {
  background-color: currentColor;
}

.floor-tab--active span {
  filter: invert(1);
}

[data-theme="dark"] .floor-tab--active {
  background-color: var(--color-text-dark);
  color: var(--color-bg-dark);
}