/* assets/css/reusable/dz-tooltip.css */

.dz-tooltip {
  --dz-tooltip-size: 18px;
  --dz-tooltip-icon: url('/wp-content/plugins/de-zonnegloed-integrations/assets/icons/info-white.svg');
  --dz-tooltip-icon-hover-opacity: 0.85;
  --dz-tooltip-width: 260px;
  --dz-tooltip-bg: var(--dz-beige);
  --dz-tooltip-color: var(--dz-green-dark);
  --dz-tooltip-border: var(--dz-green-dark);
  --dz-tooltip-gap: 12px;
  --dz-tooltip-vertical-align: middle;

  position: relative;
  display: inline-flex;
  width: var(--dz-tooltip-size);
  height: var(--dz-tooltip-size);
  margin-left: 0px;
  vertical-align: var(--dz-tooltip-vertical-align);
  cursor: help;
}

.dz-tooltip::before {
  content: "";
  display: block;
  width: var(--dz-tooltip-size);
  height: var(--dz-tooltip-size);
  flex-shrink: 0;
  background-image: var(--dz-tooltip-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.dz-tooltip:hover::before {
  opacity: var(--dz-tooltip-icon-hover-opacity);
}

.dz-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--dz-tooltip-gap));
  transform: translateX(-50%);
  width: var(--dz-tooltip-width);
  background: var(--dz-tooltip-bg);
  color: var(--dz-tooltip-color);
  border: 1px solid var(--dz-tooltip-border);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: "Poppins", sans-serif;
  font-size: var(--dz-fs-fine-print);
  line-height: 1.3;
  font-weight: 400;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 99999;
}

.dz-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}