/* تكبير أيقونات التواصل */
.footer-social-icons a {
    font-size: 36px !important;
    margin: 0 15px;
    color: #00bfff !important;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* تأثير عند المرور بالماوس */
.footer-social-icons a:hover {
    transform: scale(1.4);
    color: #ff6600 !important;
    animation: none;
}

/* وضع الأيقونات بالمنتصف أسفل الصفحة */
.footer-social-icons {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row;
    gap: 20px;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.95);
    padding: 12px 24px;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* حركة النبض */
@keyframes pulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.4); }
    60% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

/* حركة الوميض */
@keyframes glow {
    0% { text-shadow: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 15px #00bfff; }
    100% { text-shadow: 0 0 15px #ff6600, 0 0 25px #ff6600, 0 0 35px #ff6600; }
}

/* تشغيل التأثيرات فقط عند القرب من أسفل الصفحة */
body.scrolled-bottom .footer-social-icons a {
    animation: pulse 1s infinite, glow 1.5s infinite alternate;
}<!-- Countdown Banner For Salla - Raed Theme -->
<section class="raed-offer-banner">
  <div class="offer-wrapper">

    <div class="offer-text">
      🔥 خصومات قوية لفترة محدودة
    </div>

    <div class="countdown-box">
      <div class="time">
        <span id="days">00</span>
        <small>يوم</small>
      </div>

      <div class="time">
        <span id="hours">00</span>
        <small>ساعة</small>
      </div>

      <div class="time">
        <span id="minutes">00</span>
        <small>دقيقة</small>
      </div>

      <div class="time">
        <span id="seconds">00</span>
        <small>ثانية</small>
      </div>
    </div>

    <a href="/collections/offers" class="offer-btn">
      تسوق العروض
    </a>

  </div>
</section>

<style>
.raed-offer-banner{
  width:100%;
  margin:25px 0;
  border-radius:20px;
  overflow:hidden;
  background:
    linear-gradient(135deg,#00bfa5,#009688);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  position:relative;
}

.raed-offer-banner::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left,
    rgba(255,255,255,.15),
    transparent 40%);
}

.offer-wrapper{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:28px;
  flex-wrap:wrap;
}

.offer-text{
  color:#fff;
  font-size:28px;
  font-weight:800;
  line-height:1.5;
}

.countdown-box{
  display:flex;
  gap:12px;
}

.time{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  width:82px;
  height:82px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:.3s ease;
}

.time:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.22);
}

.time span{
  font-size:28px;
  font-weight:800;
  line-height:1;
}

.time small{
  margin-top:6px;
  font-size:13px;
  opacity:.9;
}

.offer-btn{
  background:#fff;
  color:#009688;
  padding:14px 26px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  transition:.3s ease;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.offer-btn:hover{
  transform:translateY(-2px);
  background:#f7f7f7;
}

/* Mobile */
@media(max-width:768px){

  .offer-wrapper{
    justify-content:center;
    text-align:center;
    padding:22px 16px;
  }

  .offer-text{
    width:100%;
    font-size:22px;
  }

  .countdown-box{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }

  .time{
    width:70px;
    height:70px;
  }

  .time span{
    font-size:22px;
  }

  .offer-btn{
    width:100%;
  }
}
</style>

<script>
const countdownDate = new Date("Dec 31, 2025 23:59:59").getTime();

const timer = setInterval(function () {

  const now = new Date().getTime();
  const distance = countdownDate - now;

  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("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;

  if (distance < 0) {

    clearInterval(timer);

    document.querySelector(".countdown-box").innerHTML =
      "<div style='font-size:26px;font-weight:800;color:white'>انتهى العرض 🔥</div>";
  }

}, 1000);
</script>