/**
 * Telegram floating widget — same Hitm look on every storefront page.
 * Load after design-theme.css. Not used by admin.
 */

.telegram-floating-widget{
  position:fixed;
  right:max(1rem, env(safe-area-inset-right));
  bottom:calc(var(--tg-buybar-h, 1.25rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
  z-index:1200;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  min-height:52px;
  padding:.7rem .95rem .7rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent, #e11d37) 95%, #fff),
      color-mix(in srgb, var(--accent-2, #9f1239) 92%, #000) 55%,
      rgba(18,18,20,.96)
    );
  color:#fff!important;
  text-decoration:none!important;
  font-family:var(--font-sans, Outfit, system-ui, sans-serif);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:
    0 12px 36px rgba(0,0,0,.45),
    0 0 0 1px color-mix(in srgb, var(--accent, #e11d37) 25%, transparent),
    0 0 40px var(--accent-glow, rgba(225,29,55,.22));
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transform:translate3d(0,0,0);
  transition:box-shadow .25s ease, border-color .25s ease, opacity .35s ease, bottom .25s ease;
  animation:tg-hitm-in .55s cubic-bezier(.22,1,.36,1) both;
  will-change:transform;
}

.telegram-floating-widget:hover{
  color:#fff!important;
  text-decoration:none!important;
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 16px 44px rgba(0,0,0,.5),
    0 0 0 1px color-mix(in srgb, var(--accent, #e11d37) 40%, transparent),
    0 0 56px var(--accent-glow, rgba(225,29,55,.35));
}

.telegram-floating-widget .telegram-widget-icon,
.telegram-floating-widget svg{
  width:1.55rem;
  height:1.55rem;
  flex-shrink:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.telegram-floating-widget-text{
  white-space:nowrap;
  padding-right:.15rem;
}

.telegram-floating-widget::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent, #e11d37) 35%, transparent), transparent 55%);
  z-index:-1;
  opacity:.7;
  pointer-events:none;
  animation:tg-hitm-pulse 2.8s ease-in-out infinite;
}

@keyframes tg-hitm-in{
  0%{opacity:0}
  100%{opacity:1}
}
@keyframes tg-hitm-pulse{
  0%,100%{opacity:.45; transform:scale(1)}
  50%{opacity:.85; transform:scale(1.04)}
}

html[lang=en] .telegram-floating-widget,
body.order-modal-open .telegram-floating-widget,
body.ve-active .telegram-floating-widget,
body:has(.page-preloader:not(.is-gone):not(.is-leaving)) .telegram-floating-widget{
  display:none!important;
}

/* On home: sit above sticky buybar. Elsewhere --tg-buybar-h stays ~1.25rem via JS. */
body:has(.hitm-root .buybar) .telegram-floating-widget,
body.has-mobile-sticky-cta .telegram-floating-widget{
  bottom:calc(var(--tg-buybar-h, 4.75rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px){
  .telegram-floating-widget{
    right:max(.75rem, env(safe-area-inset-right));
    bottom:calc(var(--tg-buybar-h, 1rem) + 0.65rem + env(safe-area-inset-bottom, 0px));
    min-height:48px;
    padding:.6rem .8rem .6rem .65rem;
    font-size:.78rem;
  }
  body:has(.hitm-root .buybar) .telegram-floating-widget,
  body.has-mobile-sticky-cta .telegram-floating-widget{
    bottom:calc(var(--tg-buybar-h, 5.25rem) + 0.65rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce){
  .telegram-floating-widget{
    animation:none;
    opacity:1;
  }
  .telegram-floating-widget::before{animation:none}
}