.tippy-box[data-theme~="poi-popup-tippy"] {
  width: 250px !important;
  max-width: 320px !important;
}

.tippy-box {
  border-radius: var(--spacing-xs) !important;
  background-color: var(--popup-bg-color) !important;
  padding: var(--spacing-sm) !important;
}

.tippy-content {
  padding: 0 !important;
}

[data-theme~="poi-popup-tippy"] .tippy-content {
  width: 100% !important;
}

.tippy-box[data-placement^="top"][data-theme^="poi-popup-tippy"]
  > .tippy-arrow:before {
  border-top-color: var(--popup-nav-bg-color) !important;
}
.tippy-box[data-placement^="bottom"][data-theme^="poi-popup-tippy"]
  > .tippy-arrow:before {
  border-bottom-color: var(--popup-nav-bg-color) !important;
}
.tippy-box[data-placement^="left"][data-theme^="poi-popup-tippy"]
  > .tippy-arrow:before {
  border-left-color: var(--popup-nav-bg-color) !important;
}
.tippy-box[data-placement^="right"][data-theme^="poi-popup-tippy"]
  > .tippy-arrow:before {
  border-right-color: var(--popup-nav-bg-color) !important;
}

.popup-poi-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.popup-poi-top {
  margin-bottom: var(--spacing-xs);
  width: 100%;
  height: auto;
  border-radius: var(--spacing-xxs);
  overflow: hidden;
}

.popup-poi-top img {
  height: auto;
  object-fit: cover;
  min-height: 65px;
  display: block;
  width: 100%;
}

.popup-poi-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-poi-title {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  /* margin-bottom: var(--spacing-xs); */
  font-size: max(0.9rem, 13px);
  font-family: var(--font-header-inner);
  font-weight: var(--font-weight-bold);
  color: var(--popup-title-text-color);
  letter-spacing: 0.05rem;
}

.popup-poi-route {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  margin: var(--spacing-xs) 0;
  color: var(--popup-route-text-color);
}

.popup-poi-route img {
  width: max(1.3rem, 18px);
  height: auto;
}

.popup-poi-route div {
  font-size: max(0.8rem, 12px);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
}

.popup-poi-description {
  text-align: center;
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  font-size: max(0.8rem, 13px);
  font-family: var(--font-body);
  color: var(--popup-desc-text-color);
}

@media only screen and (min-width: 412px) and (max-height: 767px) and (orientation: landscape) {
  [data-theme~="poi-popup-tippy"] .tippy-content {
    width: 200px !important;
  }
  .tippy-box[data-theme~="poi-popup-tippy"] {
    width: fit-content !important;
  }
}

@media only screen and (min-width: 992px) {
  .tippy-box {
    max-width: 392px !important;
  }
}

@media (min-width: 1024px) {
  .tippy-box {
    padding: var(--spacing-md) !important;
  }
}