<style>
/* ===============================
   HOVER SPLIT (Bricks)
   =============================== */

/* Wrapper */
.hover-split{
  display:flex;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.14);
  transform: translateZ(0);
}

/* Panels */
.hover-split .split-panel{
  flex: 1 1 50%;
  position:relative;
  cursor:pointer;
  background-size: cover;
  background-position: center;

  transition:
    flex 2600ms cubic-bezier(.16,1,.3,1),
    transform 2600ms cubic-bezier(.16,1,.3,1),
    filter 1400ms cubic-bezier(.2,.8,.2,1);

  will-change: flex, transform, filter;
  filter: saturate(0.95) contrast(1.04);
}

/* Compress non-hovered */
@media (hover:hover) and (pointer:fine){
  .hover-split:hover .split-panel{
    flex: 1 1 30%;
    filter: saturate(0.9) brightness(0.95);
  }

  .hover-split .split-panel:hover{
    flex: 1 1 70%;
    transform: scale(1.01);
    filter: saturate(1.05) brightness(1);
  }
}

/* Premium gradient overlay */
.hover-split .split-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(255,255,255,0), transparent 25%),
    linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.50) 65%, rgba(0,0,0,0.25));
  opacity: 1;
  transition: opacity 1200ms cubic-bezier(.2,.8,.2,1);
}

@media (hover:hover) and (pointer:fine){
  .hover-split .split-panel:hover::before{ opacity: 0.7; }
}

/* Border highlight */
.hover-split .split-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border: 1px solid rgba(255,255,255,0.10);
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .hover-split .split-panel:hover::after{ opacity: 1; }
}

/* Content positioning (keep your internal content classes if you have them) */
.hover-split .panel-content{
  position:absolute;
  left: 44px;
  right: 44px;
  bottom: 44px;
  z-index:2;
  color:#fff;

  opacity: 0.92;
  transform: translateY(6px);
  transition:
    transform 1200ms cubic-bezier(.2,.8,.2,1),
    opacity 1200ms cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover) and (pointer:fine){
  .hover-split .split-panel:hover .panel-content{
    opacity: 1;
    transform: translateY(0);
  }
}

/* "Only show content on hovered panel" behavior */
.hover-split .viaclinics-content{
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1200ms cubic-bezier(.2,.8,.2,1),
    transform 1200ms cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover) and (pointer:fine){
  .hover-split:hover .viaclinics-content{
    opacity: 0;
    transform: translateY(12px);
  }
  .hover-split .split-panel:hover .viaclinics-content{
    opacity: 1;
    transform: translateY(0);
  }
}

.viaclinics-content{ max-width: 500px; }

/* Mobile: stacked */
@media (max-width: 768px){
  .hover-split{ flex-direction:column; }
  .hover-split .split-panel{ min-height: 220px; }
  .hover-split .panel-content{ left:22px; right:22px; bottom:22px; }

  /* Open/close behavior on mobile via classes */
  .hover-split.has-active .split-panel{
    max-height: 180px;
    min-height: 120px;
    filter: saturate(0.92) brightness(0.92);
  }
  .hover-split.has-active .split-panel.is-active{
    min-height: 560px;
    filter: saturate(1.05) brightness(0.90) contrast(1.05);
  }

  .hover-split.has-active .viaclinics-content{
    opacity: 0;
    transform: translateY(10px);
  }
  .hover-split.has-active .split-panel.is-active .viaclinics-content{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   SPLIT BADGE (logo) injected to body
   =============================== */

.split-badge{
  position: fixed;
  left: 50%;
  top: 20vh;
  transform: translate(-50%, -50%);
  z-index: 999999;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.split-badge img{
  display:block;
  width: 96px;
  height: auto;
}

/* Premium pulse */
.split-badge.logo-pulse{
  animation: logoPulse 2.8s cubic-bezier(.4,0,.2,1) infinite;
  transform-origin: center;
  will-change: transform, opacity, filter;
}
@keyframes logoPulse{
  0%   { transform: translate(-50%,-50%) scale(1);    opacity: 0.95; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%  { transform: translate(-50%,-50%) scale(1.04); opacity: 1;    filter: drop-shadow(0 0 10px rgba(255,255,255,0.18)); }
  100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.95; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* Mobile: hide the badge (prevents jitter) */
@media (max-width: 768px){
  .split-badge{ display:none; }
}

/* ===============================
   Mobile "tap dot" (no pseudo conflicts)
   =============================== */
@media (max-width: 768px){
  .hs-tapdot{
    position:absolute;
    top: 22px;
    right: 42px;
    z-index: 50;

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

    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.55);
    pointer-events:none;

    animation: hsTapDot 1.6s ease-in-out infinite;
  }

  @keyframes hsTapDot{
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0.00); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.00); }
  }

  .hover-split.has-active .split-panel.is-active .hs-tapdot{
    opacity: 0;
    animation: none;
  }

  @media (prefers-reduced-motion: reduce){
    .hs-tapdot{ animation:none !important; }
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
  /* ===============================
     CONFIG
  =============================== */
  const BADGE_SRC =
    "https://viawellbeing.com/wp-content/uploads/2026/01/4c30fe28-ae56-438d-abe1-8705a22d84b3-1.webp";

  const MOBILE_MAX = 768;
  const isMobile  = () => window.innerWidth <= MOBILE_MAX;
  const isDesktop = () => window.innerWidth >  MOBILE_MAX;

  const wraps = Array.from(document.querySelectorAll(".hover-split"));
  if (!wraps.length) return;

  /* ===============================
     RESET BUTTON (desktop only)
  =============================== */
  let resetBtn = document.querySelector(".split-reset-btn");
  if (!resetBtn) {
    resetBtn = document.createElement("button");
    resetBtn.type = "button";
    resetBtn.className = "split-reset-btn";
    resetBtn.textContent = "Начален изглед";
    document.body.appendChild(resetBtn);
  }

  let activeWrap = null; // which split the button currently controls

  const showReset = () => {
    if (isDesktop()) resetBtn.classList.add("is-visible");
  };
  const hideReset = () => resetBtn.classList.remove("is-visible");

  /* ===============================
     INIT EACH SPLIT
  =============================== */
  wraps.forEach((wrap) => {
    const panels = Array.from(wrap.querySelectorAll(".split-panel")).slice(0, 2);
    if (panels.length < 2) return;

    // Ensure badge can be positioned inside wrap on mobile
    if (!wrap.style.position) wrap.style.position = "relative";

    /* ===============================
       CREATE / FIND BADGE (ONE PER WRAP)
    =============================== */
    let badge = wrap.querySelector(":scope > .split-badge");
    if (!badge) {
      badge = document.createElement("div");
      badge.className = "split-badge";
      badge.setAttribute("aria-hidden", "true");
      badge.innerHTML = `
        
          <img src="${BADGE_SRC}" alt="">
        </span>
      `;
      wrap.appendChild(badge);
    } else {
      // If badge exists, keep image in sync
      const img = badge.querySelector("img");
      if (img) img.src = BADGE_SRC;
    }

    /* ===============================
       BADGE POSITIONING
    =============================== */
    function placeBadge() {
      // If badge is hidden by CSS (e.g. mobile), no work needed
      if (!badge || !badge.isConnected) return;

      const r0 = panels[0].getBoundingClientRect();
      const r1 = panels[1].getBoundingClientRect();
      const wrapRect = wrap.getBoundingClientRect();

      let x, y;

      if (isMobile()) {
        // center between stacked panels (horizontal seam)
        x = (r0.left + r0.right) / 2;
        y = (r0.bottom + r1.top) / 2;

        // badge is inside wrap -> use absolute coords
        badge.style.position = "absolute";
        badge.style.left = (x - wrapRect.left) + "px";
        badge.style.top  = (y - wrapRect.top)  + "px";
      } else {
        // desktop: center of the vertical seam, y=20vh
        const b0 = parseFloat(getComputedStyle(panels[0]).borderRightWidth) || 0;
        const b1 = parseFloat(getComputedStyle(panels[1]).borderLeftWidth)  || 0;

        x = ((r0.right - b0) + (r1.left + b1)) / 2;
        y = window.innerHeight * 0.20;

        // badge follows viewport on desktop
        badge.style.position = "fixed";
        badge.style.left = x + "px";
        badge.style.top  = y + "px";
      }
    }

    /* ===============================
       RESET (shared)
    =============================== */
    function resetToBeginning() {
      wrap.classList.remove("has-active");
      panels.forEach(p => p.classList.remove("is-active"));
      placeBadge();

      // Stop hover tracking loop if any
      if (raf) {
        cancelAnimationFrame(raf);
        raf = 0;
      }
    }

    /* ===============================
       DESKTOP – smooth tracking
    =============================== */
    let raf = 0;

    function startTracking() {
      if (!isDesktop()) return;
      if (raf) return;

      const tick = () => {
        const hovering = wrap.matches(":hover");
        placeBadge();

        if (hovering) raf = requestAnimationFrame(tick);
        else {
          cancelAnimationFrame(raf);
          raf = 0;
        }
      };

      raf = requestAnimationFrame(tick);
    }

    wrap.addEventListener("mouseenter", () => {
      activeWrap = wrap;
      showReset();
      startTracking();
    });

    wrap.addEventListener("mousemove", startTracking);

    wrap.addEventListener("mouseleave", () => {
      // Keep button visible only if user moves to it quickly? (simple: hide)
      activeWrap = null;
      hideReset();
      // Let the raf loop stop naturally next tick (it checks :hover)
    });

    /* ===============================
       MOBILE – tap expand / second tap navigate
    =============================== */
    const activate = (panel) => {
      wrap.classList.add("has-active");
      panels.forEach(p => p.classList.remove("is-active"));
      panel.classList.add("is-active");
      placeBadge();
    };

    panels.forEach(panel => {
      // add tap dot if not already present
      if (!panel.querySelector(":scope > .hs-tapdot")) {
        const dot = document.createElement("span");
        dot.className = "hs-tapdot";
        dot.setAttribute("aria-hidden", "true");
        panel.appendChild(dot);
      }

      panel.addEventListener("click", (e) => {
        if (!isMobile()) return;

        const link = panel.dataset.link;
        const active = panel.classList.contains("is-active");

        // first tap opens
        if (!active) {
          e.preventDefault();
          activate(panel);
          return;
        }

        // second tap navigates
        if (link) window.location.href = link;
      }, { passive: false });
    });

    // mobile: tap outside resets
    document.addEventListener("click", (e) => {
      if (!isMobile()) return;
      if (!wrap.contains(e.target)) resetToBeginning();
    });

    /* ===============================
       BADGE CLICK → reset (both)
    =============================== */
    badge.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();
      resetToBeginning();
    });

    /* ===============================
       KEEP ALIGNED
    =============================== */
    placeBadge();

    window.addEventListener("resize", placeBadge);
    window.addEventListener("scroll", placeBadge, { passive: true });

    if ("ResizeObserver" in window) {
      const ro = new ResizeObserver(placeBadge);
      ro.observe(wrap);
      panels.forEach(p => ro.observe(p));
    }

    // Expose for reset button
    wrap.__splitReset = resetToBeginning;
  });

  /* ===============================
     RESET BUTTON CLICK
  =============================== */
  resetBtn.addEventListener("click", (e) => {
    e.preventDefault();
    e.stopPropagation();

    // If we know which wrap was hovered last, reset that
    if (activeWrap && typeof activeWrap.__splitReset === "function") {
      activeWrap.__splitReset();
      return;
    }

    // Fallback: reset the first one
    const first = wraps[0];
    if (first && typeof first.__splitReset === "function") first.__splitReset();
  });

  // Keep button from disappearing when moving from wrap to button
  resetBtn.addEventListener("mouseenter", showReset);
  resetBtn.addEventListener("mouseleave", hideReset);
});
</script>

.split-badge{
  position: fixed;
  z-index: 999999;
  pointer-events: auto;
  cursor: pointer;

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

  background: #fff;
  display: grid;
  place-items: center;

  box-shadow: 0 18px 50px rgba(0,0,0,0.18);

  /* this creates the soft grey ring */
  outline: 10px solid rgba(255,255,255,0.35);

  transform: translate(-50%, -50%);
  will-change: left, top;
}

.split-badge img{
  width: 62%;
  height: 62%;
  object-fit: contain;
}

/* Mobile slightly smaller */
@media (max-width: 768px){
  .split-badge{
    width: 110px;
    height: 110px;
    outline-width: 8px;
  }
}

.hover-split{ position: relative; }

/* =================================
   Reset button — Elementor exact look
================================= */
/* Bottom fixed "View both" handle — premium, calm */
.split-reset-btn{
  position: fixed;
  left: 50%;
  bottom: 0px;                  /* distance from bottom */
  transform: translateX(-50%);

  z-index: 2147483647;

  width: 180px;
  height: 52px;                 /* half-pill feel */
  border-radius: 50px 50px 0px 0px;

  background: white;
  border: none;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);

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

  color: #111;
  font-family: "Philosopher", Georgia, serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;

  cursor: pointer;
  pointer-events: auto;

  opacity: 0;
  transform: translate(-50%, 10px);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

/* Visible state */
.split-reset-btn.is-visible{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Optional subtle top gloss */
.split-reset-btn::before{
  content:"";
  position:absolute;
  inset: 6px 14px auto 14px;
  height: 0px;
  border-radius: 999px;
  background-color: white;
  pointer-events:none;
}

/* mobile hidden */
@media (max-width:768px){
  .split-reset-btn{ display:none !important; }
}