<!-- Floating mobile contact button -->
<a
  href="https://www.worldpartsdirect.com/test-contact-us-page"
  class="floating-contact-btn"
  aria-label="Contact Us">
  <span class="floating-contact-btn__icon" aria-hidden="true"></span>
</a>

<style>
  .floating-contact-btn {
    position: fixed;
    right: 1rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem);
    width: 3.625rem;
    height: 3.625rem;
    background: #2596be;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
    z-index: 999999; /* ensures it stays above almost everything */
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  .floating-contact-btn__icon {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .floating-contact-btn:hover {
    background: #1f7fa0;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.3);
  }

  .floating-contact-btn:active {
    transform: translateY(0);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.25);
  }

  /* Optional: only show on mobile */
  @media (min-width: 768px) {
    .floating-contact-btn {
      display: none;
    }
  }
</style>