sa

<div class="delivery-countdown-wrapper" style="display: flex; align-items: flex-start; gap: 10px; font-family: inherit; margin: 15px 0;">
  <div class="icon" style="min-width: 20px; color: #555;">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width: 22px; height: 22px;">
      <rect x="1" y="3" width="15" height="13"></rect>
      <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
      <circle cx="5.5" cy="18.5" r="2.5"></circle>
      <circle cx="18.5" cy="18.5" r="2.5"></circle>
    </svg>
  </div>
  <div class="text" style="font-size: 15px; line-height: 1.5; color: #333;">
    Order in the next <span id="cd-hours" style="font-weight: 500;">0</span> hours <span id="cd-minutes" style="font-weight: 500;">00</span> minutes to get it between <span id="delivery-date-1" style="text-decoration: underline; text-underline-offset: 3px;"></span> and <span id="delivery-date-2" style="text-decoration: underline; text-underline-offset: 3px;"></span>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // --- CUSTOMIZATION SETTINGS ---
  const cutoffHour = 14; // Set your daily shipping cutoff time here in 24h format (e.g., 14 = 2:00 PM)
  const minDeliveryDays = 1; // Minimum days it takes to deliver
  const maxDeliveryDays = 3; // Maximum days it takes to deliver
  // ------------------------------

  function updateCountdown() {
    const now = new Date();
    let target = new Date(now);
    target.setHours(cutoffHour, 0, 0, 0);

    // If current time is past the cutoff, reset the timer for tomorrow's cutoff
    if (now > target) {
      target.setDate(target.getDate() + 1);
    }

    const diff = target - now;
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

    document.getElementById("cd-hours").textContent = hours;
    document.getElementById("cd-minutes").textContent = minutes;
  }

  function formatDate(date) {
    const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    
    const dayName = days[date.getDay()];
    const dayOfMonth = date.getDate();
    const monthName = months[date.getMonth()];
    
    // Add ordinal suffix (st, nd, rd, th)
    let suffix = "th";
    if (dayOfMonth % 10 === 1 && dayOfMonth !== 11) suffix = "st";
    else if (dayOfMonth % 10 === 2 && dayOfMonth !== 12) suffix = "nd";
    else if (dayOfMonth % 10 === 3 && dayOfMonth !== 13) suffix = "rd";

    return `${dayName}, ${dayOfMonth}${suffix} ${monthName}`;
  }

  function setDeliveryDates() {
    const now = new Date();
    
    // If the order is placed after the cutoff, add a day to the delivery estimate
    if (now.getHours() >= cutoffHour) {
      now.setDate(now.getDate() + 1);
    }

    const date1 = new Date(now);
    date1.setDate(date1.getDate() + minDeliveryDays);
    
    const date2 = new Date(now);
    date2.setDate(date2.getDate() + maxDeliveryDays);

    document.getElementById("delivery-date-1").textContent = formatDate(date1);
    document.getElementById("delivery-date-2").textContent = formatDate(date2);
  }

  // Initialize the values immediately
  updateCountdown();
  setDeliveryDates();
  
  // Refresh the countdown timer every 60 seconds
  setInterval(updateCountdown, 60000);
});
</script>