body {
  direction: rtl;
}

/* Popup variant: shows positioned block above cursor */
.hover-reveal-popup {
  position: relative;
  display: inline-block;
}

.hover-reveal-popup:hover,
.hover-reveal-popup:focus,
.hover-reveal-popup:active {
  color: #E9C9CD;
}

.hover-reveal-popup-target {
  position: absolute;
  bottom: calc(100% + 8px);
  right: calc(50% + 3px);
  transform: translateX(50%);
  background: #1E3B67;
  color: #F9F0E9;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1000;
  display: none;
  opacity: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hover-reveal-popup:hover > .hover-reveal-popup-target,
.hover-reveal-popup:focus > .hover-reveal-popup-target,
.hover-reveal-popup:active > .hover-reveal-popup-target {
  display: block;
  opacity: 1;
}

/* Arrow pointing down from popup */
.hover-reveal-popup-target::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: #1E3B67;
}