/* =========================================================
   Segítő kézi ujj / help pointer
   ========================================================= */

#helpPointer {
  position: fixed;
  z-index: 99990;
  display: none;
  align-items: center;
  gap: 8px;
  max-width: min(340px, calc(100vw - 18px));
  pointer-events: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .22));
  --help-tap-x: 7px;
  --help-tap-y: 0;
  --help-hand-offset-x: 0px;
}

#helpPointer.is-visible {
  display: flex;
}

#helpPointer .help-hand {
  position: relative;
  left: var(--help-hand-offset-x, 0px);
  flex: 0 0 auto;
  font-size: 34px;
  line-height: 1;
  transform-origin: 50% 80%;
  animation: helpPointerTap 1.05s ease-in-out infinite;
  user-select: none;
}

#helpPointer .help-bubble {
  position: relative;
  max-width: 290px;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255, 250, 236, .98);
  border: 1px solid rgba(92, 63, 36, .22);
  color: var(--sotetbarna, #3c2415);
  font-family: var(--betutipus-szoveg1, Arial, sans-serif);
  font-size: 14px;
  line-height: 1.35;
}

#helpPointer .help-title {
  display: block;
  margin: 0 0 5px;
  font-weight: 700;
  font-size: 15px;
}

#helpPointer .help-text {
  display: block;
}

#helpPointer .help-note {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  opacity: .76;
}

#helpPointer .help-disable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--barna, #6f4a2d);
  color: #fff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

#helpPointer .help-disable:hover {
  filter: brightness(1.08);
}

#helpPointer[data-side="right"] {
  flex-direction: row;
  --help-tap-x: -7px;
  --help-tap-y: 0;
}

#helpPointer[data-side="left"] {
  flex-direction: row-reverse;
  --help-tap-x: 7px;
  --help-tap-y: 0;
}

#helpPointer[data-side="top"] {
  flex-direction: column-reverse;
  --help-tap-x: 0;
  --help-tap-y: 7px;
}

#helpPointer[data-side="bottom"] {
  flex-direction: column;
  --help-tap-x: 0;
  --help-tap-y: -7px;
}

@keyframes helpPointerTap {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--help-tap-x), var(--help-tap-y)) scale(1.06); }
}

@media (max-width: 640px) {
  #helpPointer {
    max-width: calc(100vw - 14px);
    gap: 6px;
  }

  #helpPointer .help-hand {
    font-size: 30px;
  }

  #helpPointer .help-bubble {
    max-width: calc(100vw - 70px);
    padding: 10px 11px;
    font-size: 13px;
  }

  #helpPointer .help-title {
    font-size: 14px;
  }
}

/* Súgó visszakapcsolása - csak kikapcsolt help pointer esetén kerül a footerbe */
footer.footer .help-restore-button {
  position: absolute;
  right: 10px;
  bottom: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 250, 238, .36);
  border-radius: 999px;
  background: rgba(90, 68, 48, .86);
  color: var(--button_color, #fff);
  font-family: var(--betutipus-szoveg1, Arial, sans-serif);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}

footer.footer .help-restore-button:hover {
  filter: brightness(1.08);
}

@media (max-width: 640px) {
  footer.footer .help-restore-button {
    right: 7px;
    bottom: 7px;
    min-height: 30px;
    padding: 0 9px;
    font-size: 12px;
  }
}