Delivery

<style>
  .custom-shipping-container {
    display: flex;
    padding: 6px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background-color: #f6f6f6;
    border-radius: 20px;
  }

  .custom-shipping-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .text-block-shipping {
    font-size: 12px;
    color: #000;
  }

  .shipping-date {
    font-weight: bold;
  }

  .free-shipping {
    font-weight: bold;
  }

  .green-circle {
    animation: fade 1s ease-in-out infinite;
  }

  @keyframes fade {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var daysAfterToday = 4;
    var today = new Date();
    var shipDate = new Date(today.setDate(today.getDate() + daysAfterToday));
    var options = {
      weekday: 'short', month: 'long', day: 'numeric'
    };
    var formattedDate = shipDate.toLocaleDateString('en-US', options);
    document.getElementById('shipping-date').textContent = formattedDate;
  });
</script>

<div class="custom-shipping-container">
  <div class="custom-shipping-item"> <svg class="green-circle" xmlns="http://www.w3.org/2000/svg" width="12" height="13"
      viewBox="0 0 12 13" fill="none">
      <circle cx="6" cy="6.5" r="6" fill="#012169" />
    </svg>
    <div class="text-block-shipping">Deliver by <span id="shipping-date" class="shipping-date"></span></div>
  </div>
  <div class="custom-shipping-item"> <img
      src="https://cdn.shopify.com/s/files/1/0568/6971/6026/files/australia.png?v=1734425513" loading="lazy"
      height="20px" width="30px" class="custom-icon">
    <div class="text-block-shipping"><span class="free-shipping">FAST</span> AUS Shipping</div>
  </div>
</div>