/* БАЗОВЫЕ ПЕРЕМЕННЫЕ (переопределяются PHP) */
.tlp-box {
  --tlp-bg: #2eacce;
  --tlp-text: #ffffff;
  --tlp-border: #1a8fb0;
  --tlp-font-size: 13px;
  --tlp-font-family: inherit;
  --tlp-radius: 6px;
  --tlp-max-width: 280px;
  --tlp-delay: 150ms;
  --tlp-icon-color: #2eacce;
  --tlp-icon-size: 16px;
  --tlp-anim-duration: 220ms;
  position: relative;
  display: inline-block;
  font-family: var(--tlp-font-family);
}

/* ============================================================
   ИКОНКА-ТРИГГЕР — усиленные стили, чтобы победить тему
   ============================================================ */
html body .tlp-box .tlp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tlp-icon-size, 16px);
  height: var(--tlp-icon-size, 16px);
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 4px;
  font-size: calc(var(--tlp-icon-size, 16px) - 2px);
  border-radius: 50%;
  outline: none;
  text-decoration: none;
  background: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* цвет иконки — на самом span, на <i> и на :before псевдоэлементе */
html body .tlp-box .tlp-icon,
html body .tlp-box .tlp-icon i.fa,
html body .tlp-box .tlp-icon i:before {
  color: var(--tlp-icon-color, #2eacce) !important;
}

/* hover/focus — без смены цвета, только масштаб */
html body .tlp-box .tlp-icon:hover,
html body .tlp-box .tlp-icon:focus {
  transform: scale(1.15);
  opacity: 0.85;
}

/* Fallback — если FontAwesome не загрузился, показываем "?" */
html body .tlp-box .tlp-icon {
  position: relative;
}
html body .tlp-box .tlp-icon i.fa {
  position: relative;
  z-index: 2;
}
/* Fallback — если FontAwesome не загрузился, показываем "?" */

/* Скрываем реальную FA-иконку, если она пустая */
html body .tlp-box .tlp-icon .tlp-icon-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(var(--tlp-icon-size, 16px) - 6px);
  z-index: 2;
  line-height: 1;
  font-family: inherit;
}

/* Показываем fallback, если у <i> ширина меньше 4px (значит, глифа нет) */
html body .tlp-box .tlp-icon i.fa:empty ~ .tlp-icon-fallback,
html body .tlp-box .tlp-icon i.fa:not([class*="fa-"]) ~ .tlp-icon-fallback {
  display: flex;
}

.tlp-box .tlp-icon:hover,
.tlp-box .tlp-icon:focus {
  color: var(--tlp-border);
  transform: scale(1.12);
}

/* ВСПЛЫВАЮЩЕЕ ОКНО */
.tlp-box .tlp-popup {
  position: absolute;
  z-index: 9999;
  min-width: 160px;
  max-width: var(--tlp-max-width);
  width: max-content;
  padding: 10px 12px;
  background: var(--tlp-bg);
  color: var(--tlp-text);
  font-size: var(--tlp-font-size);
  line-height: 1.5;
  border: 1px solid var(--tlp-border);
  border-radius: var(--tlp-radius);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(0, 0);
  transition: opacity var(--tlp-anim-duration) ease,
              transform var(--tlp-anim-duration) ease,
              visibility 0s linear var(--tlp-anim-duration);
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.tlp-box .tlp-popup-title {
  display: block;
  font-weight: 700;
  margin: 0 0 4px 0;
  font-size: calc(var(--tlp-font-size) + 1px);
}

.tlp-box .tlp-popup-content {
  display: block;
}

.tlp-box .tlp-popup-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  pointer-events: none;
}

/* --- ПОЗИЦИЯ: TOP (по умолчанию) --- */
.tlp-position-top .tlp-popup {
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 6px);
}
.tlp-position-top .tlp-popup-arrow {
  left: 50%;
  bottom: -14px;
  margin-left: -7px;
  border-top-color: var(--tlp-border);
}

/* --- ПОЗИЦИЯ: BOTTOM --- */
.tlp-position-bottom .tlp-popup {
  left: 50%;
  top: calc(100% + 10px);
  transform: translate(-50%, -6px);
}
.tlp-position-bottom .tlp-popup-arrow {
  left: 50%;
  top: -14px;
  margin-left: -7px;
  border-bottom-color: var(--tlp-border);
}

/* --- ПОЗИЦИЯ: LEFT --- */
.tlp-position-left .tlp-popup {
  right: calc(100% + 10px);
  top: 50%;
  transform: translate(6px, -50%);
}
.tlp-position-left .tlp-popup-arrow {
  right: -14px;
  top: 50%;
  margin-top: -7px;
  border-left-color: var(--tlp-border);
}

/* --- ПОЗИЦИЯ: RIGHT --- */
.tlp-position-right .tlp-popup {
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(-6px, -50%);
}
.tlp-position-right .tlp-popup-arrow {
  left: -14px;
  top: 50%;
  margin-top: -7px;
  border-right-color: var(--tlp-border);
}

/* ПОКАЗ */
.tlp-box.is-open .tlp-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--tlp-anim-duration) ease,
              transform var(--tlp-anim-duration) ease,
              visibility 0s linear 0s;
}
.tlp-position-top.is-open .tlp-popup { transform: translate(-50%, 0); }
.tlp-position-bottom.is-open .tlp-popup { transform: translate(-50%, 0); }
.tlp-position-left.is-open .tlp-popup { transform: translate(0, -50%); }
.tlp-position-right.is-open .tlp-popup { transform: translate(0, -50%); }

/* АНИМАЦИЯ: SLIDE */
.tlp-anim-slide.tlp-position-top .tlp-popup { transform: translate(-50%, 14px); }
.tlp-anim-slide.tlp-position-top.is-open .tlp-popup { transform: translate(-50%, 0); }
.tlp-anim-slide.tlp-position-bottom .tlp-popup { transform: translate(-50%, -14px); }
.tlp-anim-slide.tlp-position-bottom.is-open .tlp-popup { transform: translate(-50%, 0); }
.tlp-anim-slide.tlp-position-left .tlp-popup { transform: translate(14px, -50%); }
.tlp-anim-slide.tlp-position-left.is-open .tlp-popup { transform: translate(0, -50%); }
.tlp-anim-slide.tlp-position-right .tlp-popup { transform: translate(-14px, -50%); }
.tlp-anim-slide.tlp-position-right.is-open .tlp-popup { transform: translate(0, -50%); }

/* АНИМАЦИЯ: ZOOM */
.tlp-anim-zoom .tlp-popup {
  transform: translate(-50%, 0) scale(0.85);
}
.tlp-anim-zoom.tlp-position-top.is-open .tlp-popup,
.tlp-anim-zoom.tlp-position-bottom.is-open .tlp-popup {
  transform: translate(-50%, 0) scale(1);
}
.tlp-anim-zoom.tlp-position-left .tlp-popup,
.tlp-anim-zoom.tlp-position-right .tlp-popup {
  transform: translate(0, -50%) scale(0.85);
}
.tlp-anim-zoom.tlp-position-left.is-open .tlp-popup,
.tlp-anim-zoom.tlp-position-right.is-open .tlp-popup {
  transform: translate(0, -50%) scale(1);
}

/* БЕЗ АНИМАЦИИ */
.tlp-anim-none .tlp-popup {
  transition: none;
}

/* INLINE-ОБЁРТКА */
.tlp-wrap {
  position: relative;
  display: inline-block;
}
.tlp-wrap > .tlp-wrap-content {
  display: block;
}

/* ТЁМНАЯ ТЕМА */
.tlp-theme-dark .tlp-popup {
  --tlp-bg: #23272e;
  --tlp-text: #f1f1f1;
  --tlp-border: #3a4048;
}

/* АДАПТИВ */
@media (max-width: 767px) {

  /* ===== РЕЖИМ "ПРИЛИПАНИЕ К ЭКРАНУ" ===== */
  html body .tlp-box[data-tlp-mobile-mode="fixed"] .tlp-popup,
  html body .tlp-box .tlp-popup.tlp-mobile-fixed {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    width: var(--tlp-mobile-width, 100vw) !important;
    max-width: calc(100vw - var(--tlp-mobile-offset, 12px) * 2) !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
    border-radius: 10px;
    font-size: 13px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 999999;
    text-align: left;
    bottom: auto !important;
    top: auto !important;
  }

  /* позиция TOP — сверху экрана */
  html body .tlp-box[data-tlp-mobile-position="top"] .tlp-popup,
  html body .tlp-box .tlp-popup.tlp-mobile-top {
    top: var(--tlp-mobile-offset, 12px) !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* позиция BOTTOM — снизу экрана */
  html body .tlp-box[data-tlp-mobile-position="bottom"] .tlp-popup,
  html body .tlp-box .tlp-popup.tlp-mobile-bottom {
    bottom: var(--tlp-mobile-offset, 12px) !important;
    top: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* позиция CENTER — по центру экрана */
  html body .tlp-box[data-tlp-mobile-position="center"] .tlp-popup,
  html body .tlp-box .tlp-popup.tlp-mobile-center {
    top: 50% !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-50%) !important;
  }

  /* РЕЖИМ ICON — рядом с иконкой (через JS) */
  html body .tlp-box[data-tlp-mobile-mode="icon"] .tlp-popup {
    /* JS управляет координатами */
    position: fixed !important;
  }

  /* Стрелка на мобильных не нужна */
  html body .tlp-box .tlp-popup-arrow {
    display: none !important;
  }

  /* Анимация появления — только opacity */
  html body .tlp-box .tlp-popup {
    transition: opacity 200ms ease, visibility 0s linear 200ms !important;
  }
  html body .tlp-box.is-open .tlp-popup {
    transition: opacity 200ms ease, visibility 0s linear 0s !important;
  }

  /* Иконка на мобильных — крупнее, удобнее для пальца */
  html body .tlp-box .tlp-icon {
    min-width: 26px;
    min-height: 26px;
    padding: 4px;
  }
}

/* УМЕНЬШЕННАЯ АНИМАЦИЯ */
@media (prefers-reduced-motion: reduce) {
  .tlp-box .tlp-popup {
    transition: none !important;
  }
}