/* =========================================================
   LOVElodowe – Show phone number (FINAL, STABLE)
   ========================================================= */

/* ---------- Wrapper ---------- */
.lr-tel-wrap {
  /* STAŁA szerokość – KLUCZ do braku layout shift */
  width: 220px;
  height: 44px;

  position: relative;
  display: inline-block;
  vertical-align: middle;

  /* Design tokens */
  --lr-color: #cf67a5;
  --lr-bg: #ffffff;
  --lr-radius: 14px;

  font-family: 'Poppins', sans-serif !important;
}

/* ---------- Button (before click) ---------- */
.lr-tel-btn {
  all: unset;
  box-sizing: border-box;

  width: 100%;
  height: 100%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--lr-bg);
  border: 2px dashed var(--lr-color);
  border-radius: var(--lr-radius);

  color: var(--lr-color);
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  position: relative;

  /* miejsce na ? */
  padding: 0 38px 0 16px;

  text-align: center;
  white-space: nowrap;
}

/* Tekst przycisku */
.lr-tel-text {
  pointer-events: none;
}

/* ---------- ? icon ---------- */
.lr-tel-help {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 18px;
  height: 18px;
  border-radius: 999px;

  background: var(--lr-color);
  color: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  cursor: help;
  user-select: none;
}

/* ---------- Tooltip ---------- */
.lr-tel-help:hover::after {
  content: attr(data-tip);
  position: absolute;

  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);

  width: 260px;
  padding: 10px 12px;

  background: #111111;
  color: #ffffff;

  border-radius: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;

  white-space: normal;
  z-index: 9999;
}

/* ---------- After click (number revealed) ---------- */
.lr-tel-wrap.revealed .lr-tel-btn {
  display: none;
}

/* Numer telefonu (link tel:) */
.lr-tel-number {
  width: 100%;
  height: 100%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--lr-bg);
  border-radius: var(--lr-radius);

  color: var(--lr-color);
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Accessibility / focus ---------- */
.lr-tel-btn:focus-visible,
.lr-tel-number:focus-visible {
  outline: 2px solid var(--lr-color);
  outline-offset: 2px;
}

/* Mobile link domyślnie ukryty */
.lr-tel-mobile {
  display: none;
  font: inherit;
  color: inherit;
  text-decoration: inherit;
}

/* Na mobile/tablet: pokazuj od razu numer, ukryj przycisk */
@media (max-width: 767px) {
  .lr-tel-wrap {
    display: none !important;
  }

  .lr-tel-mobile {
    display: inline !important;
  }
}