Delivery Countdown

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  <title>Biji · Delivery Countdown</title>
  <!-- Google Font & smooth base -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
  <style>
    /* Biji design – seed-inspired fresh & earthy */
    .biji-box {
      border: 3px solid #3d2b1f;
      background: #fefcf5;
      background-image: radial-gradient(circle at 20% 30%, rgba(255, 215, 140, 0.15) 0%, transparent 30%),
                        radial-gradient(circle at 80% 70%, rgba(160, 210, 130, 0.12) 0%, transparent 35%);
      padding: 28px 22px;
      border-radius: 60px 60px 40px 40px;
      text-align: center;
      max-width: 600px;
      width: 100%;
      margin: 0 auto;
      box-shadow: 0 20px 40px -10px rgba(60, 40, 20, 0.25),
                  inset 0 2px 8px rgba(255, 245, 220, 0.8);
      position: relative;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    /* seed / bean decorative elements */
    .biji-box::before {
      content: "🫘";
      position: absolute;
      top: -14px;
      left: 20px;
      font-size: 34px;
      transform: rotate(-12deg);
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
      opacity: 0.9;
    }

    .biji-box::after {
      content: "🌱";
      position: absolute;
      bottom: -12px;
      right: 20px;
      font-size: 32px;
      transform: rotate(8deg);
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.06));
      opacity: 0.8;
    }

    /* inner seed pattern (subtle) */
    .biji-box .seed-dots {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      border-radius: inherit;
    }

    .biji-box .seed-dots span {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #d9c5a6;
      opacity: 0.18;
      border-radius: 50%;
    }

    .biji-box .seed-dots span:nth-child(1) { top: 15%; left: 8%; }
    .biji-box .seed-dots span:nth-child(2) { bottom: 22%; right: 6%; width: 14px; height: 14px; opacity: 0.12; }
    .biji-box .seed-dots span:nth-child(3) { top: 40%; right: 12%; width: 10px; height: 10px; }
    .biji-box .seed-dots span:nth-child(4) { bottom: 35%; left: 10%; width: 12px; height: 12px; opacity: 0.13; }

    /* title */
    .biji-title {
      color: #2d1f14;
      font-weight: 800;
      font-size: 26px;
      margin: 0 0 8px 0;
      letter-spacing: -0.3px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      position: relative;
      z-index: 2;
    }

    .biji-title span {
      background: #e5d6c0;
      padding: 0 12px;
      border-radius: 40px;
      font-size: 28px;
      line-height: 1.3;
    }

    .biji-title .truck {
      display: inline-block;
      transform: scale(1.1);
    }

    /* countdown highlight */
    .countdown-highlight {
      background: #e6d8c2;
      padding: 12px 20px;
      border-radius: 60px;
      display: inline-block;
      margin: 12px auto 8px;
      font-weight: 700;
      font-size: 28px;
      color: #1f3a2b;
      letter-spacing: 1px;
      box-shadow: inset 0 -2px 0 #b7a387;
      border: 1px solid #cfbca2;
    }

    .countdown-highlight span {
      background: #1f3a2b;
      color: #f7f0e3;
      padding: 4px 14px;
      border-radius: 40px;
      font-size: 30px;
      margin: 0 3px;
      display: inline-block;
      min-width: 70px;
    }

    .delivery-range {
      font-size: 20px;
      font-weight: 700;
      color: #1d4d2b;
      background: #eaf5e3;
      padding: 12px 16px;
      border-radius: 80px;
      display: inline-block;
      margin: 14px 0 8px;
      border: 1px solid #b6cfaa;
      backdrop-filter: blur(2px);
      box-shadow: 0 2px 6px rgba(90, 70, 40, 0.06);
    }

    .delivery-range strong {
      background: #1d4d2b;
      color: white;
      padding: 2px 16px;
      border-radius: 40px;
      font-weight: 600;
      letter-spacing: 0.4px;
      margin: 0 4px;
    }

    .sub-message {
      color: #3d3228;
      font-size: 16px;
      margin: 14px 0 4px;
      font-weight: 400;
      background: rgba(225, 210, 185, 0.3);
      padding: 8px 12px;
      border-radius: 50px;
      display: inline-block;
      backdrop-filter: blur(2px);
      border: 1px dashed #b7a387;
    }

    .sub-message i {
      font-style: normal;
      display: inline-block;
      animation: pulse-bean 1.6s infinite;
    }

    @keyframes pulse-bean {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    /* responsive adjustments */
    @media (max-width: 600px) {
      .biji-box {
        padding: 28px 16px 30px;
        border-radius: 40px 40px 30px 30px;
      }

      .biji-box::before {
        font-size: 28px;
        top: -12px;
        left: 10px;
      }

      .biji-box::after {
        font-size: 26px;
        bottom: -10px;
        right: 10px;
      }

      .biji-title {
        font-size: 20px;
        gap: 4px;
      }

      .biji-title span {
        font-size: 22px;
        padding: 0 10px;
      }

      .countdown-highlight {
        font-size: 22px;
        padding: 8px 12px;
      }

      .countdown-highlight span {
        font-size: 24px;
        min-width: 56px;
        padding: 4px 8px;
      }

      .delivery-range {
        font-size: 17px;
        padding: 10px 14px;
        display: inline-block;
        width: auto;
      }

      .delivery-range strong {
        font-size: 17px;
        padding: 2px 12px;
      }

      .sub-message {
        font-size: 14px;
        padding: 6px 14px;
      }
    }

    @media (max-width: 420px) {
      .biji-box {
        padding: 22px 12px 28px;
      }

      .biji-title {
        font-size: 18px;
      }

      .countdown-highlight {
        font-size: 18px;
        padding: 6px 10px;
      }

      .countdown-highlight span {
        font-size: 20px;
        min-width: 44px;
        padding: 2px 6px;
      }

      .delivery-range {
        font-size: 15px;
        padding: 8px 10px;
      }

      .delivery-range strong {
        font-size: 15px;
        padding: 2px 10px;
      }
    }

    /* extra small screens */
    @media (max-width: 360px) {
      .biji-title .truck {
        display: none;
      }
      .biji-box::before {
        font-size: 22px;
        top: -8px;
        left: 8px;
      }
      .biji-box::after {
        font-size: 20px;
        bottom: -6px;
        right: 8px;
      }
    }
  </style>
</head>
<body>

<div class="biji-box">
  <!-- decorative seed dots -->
  <div class="seed-dots">
    <span></span><span></span><span></span><span></span>
  </div>

  <!-- title -->
  <h2 class="biji-title">
    <span class="truck">🚚</span> 
    <span>Hurry, Your Order Awaits!</span>
  </h2>

  <!-- ========== LIQUID LOGIC (same as original, but fully responsive) ========== -->
  {% assign now = 'now' | date: '%s' %}
  {% assign end_of_day = 'now' | date: '%Y-%m-%d' | append: ' 23:59:59' | date: '%s' %}
  {% assign seconds_left = end_of_day | minus: now %}
  {% assign hours_left = seconds_left | divided_by: 3600 %}
  {% assign minutes_left = seconds_left | modulo: 3600 | divided_by: 60 %}

  {% assign today = 'now' | date: '%s' %}
  {% assign delivery_start = today | plus: 345600 | date: '%d %B' %} <!-- +4 days -->
  {% assign delivery_end = today | plus: 518400 | date: '%d %B' %} <!-- +5 days -->

  <!-- live countdown display -->
  <div class="countdown-highlight">
    <span>{{ hours_left }}h {{ minutes_left }}m</span>
  </div>

  <!-- delivery window -->
  <div class="delivery-range">
    <strong>🚚</strong> {{ delivery_start }} <span style="font-weight:400; margin:0 4px;">→</span> {{ delivery_end }}
  </div>

  <!-- extra biji message -->
  <p class="sub-message">
    <i>🌱</i> Don't miss this fast-delivery window! <i>🌿</i>
  </p>
  <!-- small note (original style kept) -->
  <p style="color:#5f4d39; font-size:13px; margin:16px 0 2px; opacity:0.8; letter-spacing:0.3px; border-top:1px solid #dccfc0; padding-top:14px; max-width:80%; margin-left:auto; margin-right:auto;">
    ⏳ order in the next <strong style="color:#2d1f14;">{{ hours_left }}h {{ minutes_left }}m</strong>
  </p>
</div>

</body>
</html>