<?php
// Render once
if (defined('WIDGET_BTN_RENDERED')) { return; }
define('WIDGET_BTN_RENDERED', true);

// Change this link if you want a different target
$widget_href = 'https://wa.link/r66apr';
?>
<style>
  :root{
    --wb-z: 2147483000;
    --wb-left: 16px;
    --wb-bottom: 16px;
    --wb-radius: 999px;
    --wb-border: 2px;
    --wb-pad-y: 12px;
    --wb-pad-x: 16px;
  }

  /* Base position: phone bottom */
  #widget-pill{
    position: fixed;
    left: var(--wb-left);
    bottom: calc(env(safe-area-inset-bottom,0px) + var(--wb-bottom));
    z-index: var(--wb-z);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: var(--wb-pad-y) var(--wb-pad-x);
    border-radius: var(--wb-radius);
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    /* Animated gradient border */
    border: var(--wb-border) solid transparent;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(120deg,
        #0a5ed7, #0f78ff, #22c55e, #f59e0b, #f43f5e, #8b5cf6, #0ea5e9, #0a5ed7
      ) border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 300% 300%;
    animation: wbShift 6s linear infinite;

    box-shadow: 0 10px 24px rgba(15,120,255,.25);
    max-width: min(92vw, 480px);
    box-sizing: border-box;
  }

  /* Desktop: left center */
  @media (min-width: 901px){
  #widget-pill{
    top: auto;                          /* no vertical centering */
    bottom: var(--wb-bottom);           /* stick to bottom */
    transform: none;                    /* reset transform */
  }
  #widget-pill:hover{ transform: translateY(-1px); }
}


  /* Content */
  #widget-pill .wb-icon{
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0a5ed7, #0f78ff);
    box-shadow: 0 4px 10px rgba(15,120,255,.25);
    font-size: 16px; line-height: 1;
  }
  #widget-pill .wb-text{
    display: grid; line-height: 1.15;
    color: #111827; /* near-black for contrast on white fill */
    font-family: inherit;
  }
  #widget-pill .wb-text b{
    font-weight: 800; font-size: 15px;
  }
  #widget-pill .wb-text span{
    font-weight: 600; font-size: 12px; opacity: .80;
  }

  @keyframes wbShift {
    0%   { background-position: 0% 0%,   0% 0%; }
    100% { background-position: 0% 0%, 300% 0%; }
  }
</style>

<a id="widget-pill" href="<?= e($widget_href) ?>" rel="nofollow noopener" aria-label="Book free consultation">
  <span class="wb-icon">✉️</span>
  <span class="wb-text">
    <b>Book free consultation</b>
    <span>Chat with an expert</span>
  </span>
</a>
