<div {{ block.shopify_attributes }} class="{{ block.settings.visibility }}"
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;">
<div class="pill-center" style="text-align: center;">
  {% if block.settings.enable_gradient_border %}
    <div class="gradient-wrapper {% if block.settings.enable_gradient_border %}gradient-enabled{% endif %}" data-logo="{{ block.settings.featuredlogo }}">
      <div class="pill-container" data-logo="{{ block.settings.featuredlogo }}">
  {% else %}
    <div class="pill-container" data-logo="{{ block.settings.featuredlogo }}">
  {% endif %}
   {% if block.settings.featuredlogo == 'tiktoklogo' %}
    <img src="https://cdn.shopify.com/s/files/1/0557/0887/6873/files/Social-media_Tiktok.png?v=1750875207" width="17" height="17" alt="TikTok Logo">
  {% else %}
  {% if block.settings.featuredlogo == 'facebooklogo' %}
<img src="https://cdn.shopify.com/s/files/1/0691/6820/1986/files/facebook.png?v=1717529960" alt="Facebook Logo">
   {% endif %}
  {% if block.settings.featuredlogo == 'facebooklogoblue' %}
<img src="https://cdn.shopify.com/s/files/1/0691/6820/1986/files/facebook_logo.png?v=1717464786" alt="Facebook Logo">
   {% endif %}
   {% if block.settings.featuredlogo == 'youtubelogo' %}
<img src="https://cdn.shopify.com/s/files/1/0691/6820/1986/files/Youtube_logo.png?v=1729927093" alt="Youtube Logo">
   {% endif %}
  {% if block.settings.featuredlogo == 'instagramlogo' %}
<img src="https://cdn.shopify.com/s/files/1/0691/6820/1986/files/instagram_logo.png?v=1729927093" alt="Instagram Logo">
   {% endif %}
   {% endif %}
 <span>{{ block.settings.tiktokpilltext }}</span>
  {% if block.settings.enable_gradient_border %}
      </div>
    </div>
  {% else %}
    </div>
  {% endif %}
</div>
</div>

<style>
  .pill-container {
    padding: 6px 12px;
    background: {{block.settings.pillbackground}};
    border-radius: {{block.settings.tiktokpillborderradius}}px;
    display: inline-block;
    position: relative;
    box-shadow: inset 0 0 0 #000000 35%;
    border: 1px solid {{block.settings.pillborder}};
  }

  .pill-container span {
    color: {{block.settings.pilltextcolor}};
  }

  .pill-container img {
    vertical-align: middle;
  }

  /* Gradient wrapper approach */
  .gradient-wrapper {
    display: inline-block;
    padding: 2px;
    border-radius: calc({{block.settings.tiktokpillborderradius}}px + 2px);
    position: relative;
  }

  .gradient-wrapper .pill-container {
    border: none;
    margin: 0;
  }

  /* Gradient backgrounds for wrapper */
  .gradient-wrapper.gradient-enabled[data-logo="tiktoklogo"] {
    background: linear-gradient(45deg, #00f2ea, #ff0050);
  }

  .gradient-wrapper.gradient-enabled[data-logo="facebooklogo"],
  .gradient-wrapper.gradient-enabled[data-logo="facebooklogoblue"] {
    background: #1877F2;
  }

  .gradient-wrapper.gradient-enabled[data-logo="instagramlogo"] {
    background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
  }

  .gradient-wrapper.gradient-enabled[data-logo="youtubelogo"] {
    background: linear-gradient(45deg, #FF0000, #CC0000);
  }

  /* Mobile-specific fixes */
  @media (max-width: 768px) {
    .gradient-wrapper {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
</style>