<div class="soft-countdown">
  <h3>العرض سينتهي بعد:</h3>
  <div id="soft-countdown">
    <div class="time-box">
      <span id="soft-days">00</span>
      <small>يوم</small>
    </div>
    <div class="time-box">
      <span id="soft-hours">00</span>
      <small>ساعة</small>
    </div>
    <div class="time-box">
      <span id="soft-minutes">00</span>
      <small>دقيقة</small>
    </div>
    <div class="time-box">
      <span id="soft-seconds">00</span>
      <small>ثانية</small>
    </div>
  </div>
</div>

<style>
/* تنسيق صندوق العد التنازلي */
.soft-countdown {
  text-align: center;
  background-color: #ffffff; /* خلفية بيضاء متناسقة */
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  margin: 20px 0;
  font-family: 'Arial', sans-serif;
}

.soft-countdown h3 {
  color: #333;
  font-size: 20px;
  margin-bottom: 15px;
}

#soft-countdown {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.time-box {
  background-color: #f5f5f5;
  padding: 15px 12px;
  border-radius: 10px;
  min-width: 70px;
}

.time-box span {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #ff4d4d; /* لون أحمر متناسق */
}

.time-box small {
  display: block;
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

/* متوافق مع الجوال */
@media (max-width: 480px) {
  #soft-countdown {
    gap: 10px;
  }
  .time-box span {
    font-size: 22px;
  }
  .time-box small {
    font-size: 12px;
  }
}
</style>

<script>
  // ضبط تاريخ الانتهاء
  const softCountdownDate = new Date("2026-02-20 23:59:59").getTime();

  const softCountdownFunc = setInterval(function() {
    const now = new Date().getTime();
    const distance = softCountdownDate - now;

    if (distance < 0) {
      clearInterval(softCountdownFunc);
      document.getElementById("soft-countdown").innerHTML = "<span style='color:#ff4d4d;font-weight:bold;'>انتهى العرض!</span>";
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000*60*60));
    const minutes = Math.floor((distance % (1000*60*60)) / (1000*60));
    const seconds = Math.floor((distance % (1000*60)) / 1000);

    document.getElementById("soft-days").innerText = days.toString().padStart(2,'0');
    document.getElementById("soft-hours").innerText = hours.toString().padStart(2,'0');
    document.getElementById("soft-minutes").innerText = minutes.toString().padStart(2,'0');
    document.getElementById("soft-seconds").innerText = seconds.toString().padStart(2,'0');
  }, 1000);
</script>