[data-tooltip] {
  position: relative;
  display: inline-block;
  line-height: 1;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  color: #333;
  padding: 0.9rem 1rem 1rem;
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
  min-width: 14em;
  max-width: 24em;
  font-weight: 400;
  border-radius: 0.6em;
  box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
  z-index: 100;
  opacity: 0;
  /* Animujemy tylko opacity — pozycjonowanie powinno być natychmiastowe (bez "najazdu").
     Domyślnie dodajemy krótkie opóźnienie ukrycia, żeby zapobiec migotaniu przy szybkim przejeździe kursora. */
  transition: opacity 0.1s ease;
  /* hide delay can be customized via --tooltip-hide-delay */
  transition-delay: var(--tooltip-hide-delay, 120ms);
  overflow: visible;
  /* Make tooltip non-interactive so its area doesn't extend the hover region of the trigger.
     This prevents accidental shows when the mouse passes where the tooltip would appear. */
  pointer-events: none;
  text-align: center;
}

.tooltip::before {
  content: "";
  position: absolute;
  border-width: 5px 7px 0 7px;
  border-style: solid;
  /* outer triangle: border + shadow */
  border-color: var(--tooltip-border, #ddd) transparent transparent transparent;
  box-shadow: 4px 5px 5px rgba(0,0,0,0.12);
  z-index: 0;
}

/* Wewnętrzny trójkąt, dopasowany kolorem do tła dymka — usuwa widoczny "szew" */
.tooltip::after {
  content: "";
  position: absolute;
  /* zamiast trójkąta używamy małego kwadratu obróconego o 45deg, który przykryje obramowanie i cień */
  --arrow-cover-size: 12px;
  width: var(--arrow-cover-size);
  height: var(--arrow-cover-size);
  background: var(--tooltip-bg, #fff);
  transform: rotate(45deg);
  z-index: 101; /* ponad ::before i nad krawędzią dymka */
  pointer-events: none;
}

/* Pozycje strzałki */
.tooltip.top::before {
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
}
.tooltip.top::after {
  bottom: calc(-1 * var(--arrow-cover-size) / 2);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.tooltip.bottom::before {
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}
.tooltip.bottom::after {
  top: calc(-1 * var(--arrow-cover-size) / 2);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* Jeśli JS ustawiło dokładną pozycję strzałki, użyj zmiennej i usuń centrowanie */
.tooltip.has-arrow-left.top::before {
  left: var(--arrow-left);
  transform: translateX(0);
}
.tooltip.has-arrow-left.bottom::before {
  left: var(--arrow-left);
  transform: translateX(0) rotate(180deg);
}
.tooltip.has-arrow-left.top::after {
  left: var(--arrow-left);
  bottom: calc(-1 * var(--arrow-cover-size) / 2);
  transform: translateX(-50%) rotate(45deg);
}
.tooltip.has-arrow-left.bottom::after {
  left: var(--arrow-left);
  top: calc(-1 * var(--arrow-cover-size) / 2);
  transform: translateX(-50%) rotate(45deg);
}

/* Ustawienie punktu transformacji dla płynniejszego zachowania (bez przesunięć transform) */
.tooltip.top {
  transform-origin: center bottom;
}
.tooltip.bottom {
  transform-origin: center top;
}
.tooltip.left,
.tooltip.right {
  transform-origin: center center;
}

.tooltip.left::before {
  right: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}
.tooltip.left::after {
  right: calc(-1 * var(--arrow-cover-size) / 2);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.tooltip.right::before {
  left: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}
.tooltip.right::after {
  left: calc(-1 * var(--arrow-cover-size) / 2);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

/* Dla lewych/prawych dymków jeśli JS ustawi top strzałki */
.tooltip.left.has-arrow-top::before {
  top: var(--arrow-top);
  transform: translateY(0) rotate(-90deg);
}
.tooltip.right.has-arrow-top::before {
  top: var(--arrow-top);
  transform: translateY(0) rotate(90deg);
}
.tooltip.left.has-arrow-top::after {
  top: var(--arrow-top);
  right: calc(-1 * var(--arrow-cover-size) / 2);
  transform: translateY(-50%) rotate(45deg);
}
.tooltip.right.has-arrow-top::after {
  top: var(--arrow-top);
  left: calc(-1 * var(--arrow-cover-size) / 2);
  transform: translateY(-50%) rotate(45deg);
}

/* Kombinacje dla narożników */
.tooltip.left.top::before {
  right: -7px;
  bottom: -5px;
  transform: rotate(-90deg);
}

.tooltip.left.bottom::before {
  right: -7px;
  top: -5px;
  transform: rotate(-90deg);
}

.tooltip.right.top::before {
  left: -7px;
  bottom: -5px;
  transform: rotate(90deg);
}

.tooltip.right.bottom::before {
  left: -7px;
  top: -5px;
  transform: rotate(90deg);
}

.tooltip.top.left::before {
  bottom: -5px;
  right: -7px;
  transform: none;
}

.tooltip.top.right::before {
  bottom: -5px;
  left: -7px;
  transform: none;
}

.tooltip.bottom.left::before {
  top: -5px;
  right: -7px;
  transform: rotate(180deg);
}

.tooltip.bottom.right::before {
  top: -5px;
  left: -7px;
  transform: rotate(180deg);
}

/* Animacja */
/* show: przy zwykłym hover dajemy krótkie opóźnienie (zapobiega przypadkowym hoverom) */
[data-tooltip]:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  transition-delay: var(--tooltip-show-delay, 2000ms);
}

/* focus (klawiatura) oraz programowe otwarcie powinny być natychmiastowe */
[data-tooltip]:focus .tooltip,
[data-tooltip].tooltip-open .tooltip {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s !important;
}

/* Tooltip is non-interactive by CSS to avoid extending hover area. */