.rankup-hs {
  --rhs-side-columns: minmax(0, 1fr) minmax(0, var(--rhs-card-width, 30%));
  --rhs-columns: var(--rhs-desktop-columns, var(--rhs-side-columns));
  --rhs-default-card-align: var(--rhs-desktop-card-align, start);
  --rhs-default-text-align: var(--rhs-desktop-text-align, start);
  display: grid;
  grid-template-columns: var(--rhs-layout-columns, var(--rhs-columns));
  gap: var(--rhs-gap, 24px);
  align-items: start;
  direction: rtl;
}

.rankup-hs--map-only { grid-template-columns: minmax(0, 1fr); }
.rankup-hs__map { position: relative; }

.rankup-hs img { display: block; }
.rankup-hs .rankup-hs__map-image { width: 100%; height: auto; }

.rankup-hs .rankup-hs__pin {
  --rhs-pin-x: calc((1 - 2 * var(--rhs-x-flip, 0)) * var(--rhs-x, var(--rhs-x-default, 50%)) + 100% * var(--rhs-x-flip, 0));
  --rhs-pin-y: calc((1 - 2 * var(--rhs-y-flip, 0)) * var(--rhs-y, var(--rhs-y-default, 50%)) + 100% * var(--rhs-y-flip, 0));
  position: absolute;
  top: clamp(min(22px, 50%), var(--rhs-pin-y), max(50%, calc(100% - 22px)));
  left: clamp(min(22px, 50%), var(--rhs-pin-x), max(50%, calc(100% - 22px)));
  display: grid;
  place-items: center;
  width: var(--rhs-marker-size, 8.52px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  translate: -50% -50%;
  cursor: pointer;
  touch-action: manipulation;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.rankup-hs .rankup-hs__pin:has(> .rankup-hs__marker--image) { width: var(--rhs-pin-width, 9%); }
.rankup-hs .rankup-hs__pin:has(> .rankup-hs__marker--icon) {
  width: var(--rhs-marker-size, 24px);
  container-type: inline-size;
}

.rankup-hs__pin::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  translate: -50% -50%;
  content: "";
}

.rankup-hs .rankup-hs__pin:hover,
.rankup-hs .rankup-hs__pin:focus { background: transparent; box-shadow: none; }
.rankup-hs__pin[aria-pressed="true"] { z-index: 1; }
.rankup-hs .rankup-hs__pin:focus-visible { z-index: 2; }
.rankup-hs :is(.rankup-hs__pin, .rankup-hs__card, .rankup-hs__button):focus-visible {
  outline: 2px solid var(--rhs-pin-color, #a25705);
  outline-offset: 3px;
}

.rankup-hs__marker {
  --rhs-marker-color: var(--rhs-pin-color, #fbb960);
  --rhs-marker-ink: var(--rhs-pin-ink, #242424);
  position: relative;
  display: grid;
  width: 100%;
  place-items: center;
  color: var(--rhs-marker-color);
}

.rankup-hs__pin[aria-pressed="true"] .rankup-hs__marker {
  --rhs-marker-color: var(--rhs-pin-color-active, var(--rhs-pin-color, #fbb960));
  --rhs-marker-ink: var(--rhs-pin-ink-active, var(--rhs-pin-ink, #242424));
}

.rankup-hs__pin:is(:hover, :focus-visible) .rankup-hs__marker {
  color: var(--rhs-pin-color-hover, var(--rhs-marker-color));
}

.rankup-hs .rankup-hs__pin-image { width: 100%; height: auto; }
.rankup-hs__dot {
  box-sizing: border-box;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}
.rankup-hs__dot::after {
  position: absolute;
  inset: -3.165px;
  border: 1px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.rankup-hs__marker--icon { aspect-ratio: 1; font-size: 100cqi; }
.rankup-hs__marker--icon svg { width: 1em; height: 1em; fill: currentColor; }
.rankup-hs__marker--circle { border-radius: 50%; }
.rankup-hs__marker--framed,
.rankup-hs__marker--stacked { font-size: 55cqi; }
.rankup-hs__marker--framed { border: 2px solid currentColor; }
.rankup-hs__marker--stacked {
  background: var(--rhs-pin-color, #fbb960);
  color: var(--rhs-marker-ink);
}
.rankup-hs__pin[aria-pressed="true"] .rankup-hs__marker--stacked {
  background: var(--rhs-pin-color-active, var(--rhs-pin-color, #fbb960));
}
.rankup-hs__pin:is(:hover, :focus-visible) .rankup-hs__marker--stacked {
  background: var(--rhs-pin-color-hover, var(--rhs-marker-color));
  color: var(--rhs-pin-ink-hover, var(--rhs-marker-ink));
}

.rankup-hs__cards { display: grid; align-self: var(--rhs-card-align, var(--rhs-default-card-align)); }
.rankup-hs__card {
  position: relative;
  isolation: isolate;
  grid-area: 1 / 1;
  align-self: var(--rhs-card-align, var(--rhs-default-card-align));
  min-width: 0;
  overflow-wrap: anywhere;
  z-index: 1;
}
.rankup-hs__card[hidden] {
  display: block !important;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.rankup-hs__card:has(.rankup-hs__decoration) { margin-bottom: 18px; }
.rankup-hs__decoration {
  position: absolute;
  z-index: -1;
  bottom: -18px;
  left: 50%;
  width: var(--rhs-decoration-width, 40%);
  translate: -50%;
  pointer-events: none;
}
.rankup-hs__decoration--default {
  height: 20px;
  background: var(--rhs-card-bg, #454f52);
  clip-path: polygon(0 0, 100% 0, 92% 22%, 82% 24%, 75% 52%, 62% 72%, 50% 100%, 38% 72%, 25% 52%, 18% 24%, 8% 22%);
}
.rankup-hs__card:has(:is(.rankup-hs__decoration--image, .rankup-hs__decoration--icon)) { margin-bottom: 0; }
.rankup-hs__decoration:is(.rankup-hs__decoration--image, .rankup-hs__decoration--icon) {
  position: relative;
  inset: auto;
  display: grid;
  place-items: center;
  margin-inline: auto;
  translate: none;
  color: var(--rhs-card-bg, #454f52);
}
.rankup-hs .rankup-hs__decoration-image { width: 100%; height: auto; }
.rankup-hs__decoration--icon {
  width: var(--rhs-decoration-width, 28px);
  container-type: inline-size;
}
.rankup-hs__decoration--icon > :is(i, svg) { font-size: 100cqi; }
.rankup-hs__decoration--icon svg { width: 1em; height: 1em; fill: currentColor; }

.rankup-hs__panel {
  box-sizing: border-box;
  min-height: var(--rhs-card-min-height, 0px);
  border-radius: var(--rhs-radius, 24px);
  background: var(--rhs-card-bg, #454f52);
  overflow: hidden;
}

.rankup-hs .rankup-hs__photo {
  box-sizing: border-box;
  width: 100%;
  height: var(--rhs-photo-height, clamp(110px, 12vw, 158px));
  object-fit: cover;
  object-position: var(--rhs-photo-position, center);
  opacity: var(--rhs-photo-opacity, 1);
}

.rankup-hs__body {
  position: relative;
  padding: var(--rhs-pad-top, var(--rhs-padding, 18px)) var(--rhs-pad-right, var(--rhs-padding, 18px))
    var(--rhs-pad-bottom, var(--rhs-padding, 18px)) var(--rhs-pad-left, var(--rhs-padding, 18px));
  text-align: var(--rhs-text-align, var(--rhs-default-text-align));
}
.rankup-hs__body--flag { padding-top: calc(var(--rhs-pad-top, var(--rhs-padding, 18px)) + var(--rhs-flag-size, 46px) / 2); }
.rankup-hs__flag {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  inset-inline-start: var(--rhs-pad-right, var(--rhs-padding, 18px));
  width: var(--rhs-flag-size, 46px);
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--rhs-flag-bg, transparent);
}

.rankup-hs__body:first-child .rankup-hs__flag { top: var(--rhs-pad-top, var(--rhs-padding, 18px)); translate: none; }
.rankup-hs__body:first-child.rankup-hs__body--flag {
  padding-top: calc(var(--rhs-pad-top, var(--rhs-padding, 18px)) * 2 + var(--rhs-flag-size, 46px));
}

.rankup-hs .rankup-hs__flag-image { width: 100%; height: 100%; object-fit: cover; }
.rankup-hs .rankup-hs__title { margin: 0 0 6px; color: var(--rhs-title-color, #fff); }
.rankup-hs .rankup-hs__copy { margin: 0 0 8px; color: var(--rhs-copy-color, #fff); }
.rankup-hs .rankup-hs__subtitle { color: var(--rhs-subtitle-color, var(--rhs-copy-color, #fff)); }
.rankup-hs .rankup-hs__description { color: var(--rhs-description-color, var(--rhs-copy-color, #fff)); }
.rankup-hs .rankup-hs__description { white-space: pre-line; }

.rankup-hs__card:is(:hover, :focus-within) :is(.rankup-hs__panel, .rankup-hs__decoration--default) {
  background: var(--rhs-card-bg-hover, var(--rhs-card-bg, #454f52));
}
.rankup-hs .rankup-hs__card:is(:hover, :focus-within) .rankup-hs__photo {
  opacity: var(--rhs-photo-opacity-hover, var(--rhs-photo-opacity, 1));
}
.rankup-hs__card:is(:hover, :focus-within) .rankup-hs__flag {
  background: var(--rhs-flag-bg-hover, var(--rhs-flag-bg, transparent));
}
.rankup-hs .rankup-hs__card:is(:hover, :focus-within) .rankup-hs__title {
  color: var(--rhs-title-color-hover, var(--rhs-title-color, #fff));
}
.rankup-hs .rankup-hs__card:is(:hover, :focus-within) .rankup-hs__copy {
  color: var(--rhs-copy-color-hover, var(--rhs-copy-color, #fff));
}
.rankup-hs .rankup-hs__card:is(:hover, :focus-within) .rankup-hs__subtitle {
  color: var(--rhs-subtitle-color-hover, var(--rhs-copy-color-hover, var(--rhs-subtitle-color, var(--rhs-copy-color, #fff))));
}
.rankup-hs .rankup-hs__card:is(:hover, :focus-within) .rankup-hs__description {
  color: var(--rhs-description-color-hover, var(--rhs-copy-color-hover, var(--rhs-description-color, var(--rhs-copy-color, #fff))));
}

.rankup-hs .rankup-hs__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--rhs-btn-bg-normal, #fbb960);
  color: var(--rhs-button-color, #242424);
  text-decoration: none;
}

.rankup-hs .rankup-hs__button:is(:hover, :focus-visible) {
  background: var(--rhs-btn-bg-hover, #fff);
  color: var(--rhs-btn-hover-color, #242424);
}

@media (prefers-reduced-motion: no-preference) {
  .rankup-hs--pulse .rankup-hs__marker::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 13px);
    aspect-ratio: 1;
    translate: -50% -50%;
    border: 1px solid currentColor;
    border-radius: 50%;
    pointer-events: none;
    animation: rhs-pulse 1.8s ease-out infinite;
    content: "";
  }
  .rankup-hs[data-rhs-animation="fade-down"] { --rhs-enter-offset: -12px; }
  .rankup-hs[data-rhs-animation="fade-up"] { --rhs-enter-offset: 12px; }
  .rankup-hs--pulse .rankup-hs__dot::before { width: calc(100% + 6.33px); }
  .rankup-hs[data-rhs-ready]:not([data-rhs-editor], [data-rhs-animation="none"]) .rankup-hs__card {
    transition: opacity var(--rhs-animation-duration, 240ms) ease-out,
      transform var(--rhs-animation-duration, 240ms) ease-out, visibility 0s;
  }
  .rankup-hs[data-rhs-ready]:not([data-rhs-editor], [data-rhs-animation="none"]) .rankup-hs__card[hidden] {
    transform: translateY(var(--rhs-enter-offset, 0px));
    transition-delay: 0s, 0s, var(--rhs-animation-duration, 240ms);
  }
}

@keyframes rhs-pulse {
  0% { opacity: .75; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2); }
}