.panorama-viewer {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #26221d;
  color: #fff;
}

.panorama-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  border: 0;
  background: #26221d;
  color: #fff;
  cursor: pointer;
}

.panorama-poster::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgb(0 0 0 / 58%));
  content: "";
}

.panorama-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}

.panorama-poster:hover img {
  transform: scale(1.025);
}

.panorama-start {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 999px;
  background: rgb(38 34 29 / 78%);
  padding: 0.55rem 0.85rem 0.55rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
  backdrop-filter: blur(8px);
}

.panorama-start > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: #ad7b2d;
  font-size: 0.66rem;
}

.panorama-canvas {
  position: absolute;
  inset: 0;
}

.room-card .panorama-hint {
  position: absolute;
  z-index: 3;
  top: 0.65rem;
  right: 0.65rem;
  margin: 0;
  border-radius: 999px;
  background: rgb(38 34 29 / 72%);
  padding: 0.4rem 0.65rem;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.panorama-scenes {
  position: absolute;
  z-index: 4;
  right: 0.55rem;
  bottom: 0.55rem;
  left: 0.55rem;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  pointer-events: none;
}

.panorama-scenes button {
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 999px;
  background: rgb(38 34 29 / 78%);
  padding: 0.42rem 0.65rem;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

.panorama-scenes button.is-active {
  border-color: #d9b16c;
  background: #ad7b2d;
}

.panorama-viewer .pnlm-container {
  background-color: #26221d;
  font-family: inherit;
}

.panorama-viewer .pnlm-controls-container {
  top: 0.35rem;
  left: 0.35rem;
}

.panorama-viewer .pnlm-controls {
  border-color: rgb(255 255 255 / 35%);
  background-color: rgb(38 34 29 / 78%);
  filter: invert(1);
}

.panorama-viewer .pnlm-panorama-info {
  display: none !important;
}