/***** Hour – Wiggle CTA (CSS-only) *****
 * يعمل فقط داخل صفحة المنتج (#product-id)
 * يستهدف أزرار: .checkout_btn و .form_checkout_btn
 * دورة الحركة: 15s (5s اهتزاز + 10s هدوء)
 ****************************************/

/* أساسياً: فعّل الحركة على زرار الشراء داخل صفحة المنتج */
#product-id .checkout_btn,
#product-id .form_checkout_btn,
[data-product-id] .checkout_btn,
[data-product-id] .form_checkout_btn{
  /* شكل الحركة */
  animation: hourWiggleCycle 15s ease-in-out infinite;
  will-change: transform;
  transform-origin: center;
  /* تأكيد محاذاة النص في النص */
  text-align: center;
}

/* تقليل الإزعاج: الوقف المؤقت عند تفاعل المستخدم */
#product-id .checkout_btn:hover,
#product-id .checkout_btn:focus,
#product-id .form_checkout_btn:hover,
#product-id .form_checkout_btn:focus,
[data-product-id] .checkout_btn:hover,
[data-product-id] .checkout_btn:focus,
[data-product-id] .form_checkout_btn:hover,
[data-product-id] .form_checkout_btn:focus{
  animation-play-state: paused;
  transform: none;
}

/* احترام تفضيل تقليل الحركة بالنظام */
@media (prefers-reduced-motion: reduce){
  #product-id .checkout_btn,
  #product-id .form_checkout_btn,
  [data-product-id] .checkout_btn,
  [data-product-id] .form_checkout_btn{
    animation: none !important;
  }
}

/* المفتاح: 0–33.333% = 5 ثواني اهتزاز، ثم هدوء حتى نهاية الـ 15 ثانية */
@keyframes hourWiggleCycle{
  /* بداية الاهتزاز (خفيف وسموث) */
  0%   { transform: translateX(0) }
  2%   { transform: translateX(-1.2px) }
  4%   { transform: translateX( 1.2px) }
  6%   { transform: translateX(-1.1px) }
  8%   { transform: translateX( 1.1px) }
  10%  { transform: translateX(-1.0px) }
  12%  { transform: translateX( 1.0px) }
  14%  { transform: translateX(-0.9px) }
  16%  { transform: translateX( 0.9px) }
  18%  { transform: translateX(-0.8px) }
  20%  { transform: translateX( 0.8px) }
  22%  { transform: translateX(-0.7px) }
  24%  { transform: translateX( 0.7px) }
  26%  { transform: translateX(-0.6px) }
  28%  { transform: translateX( 0.6px) }
  30%  { transform: translateX(-0.5px) }
  33.333% { transform: translateX(0) }
  /* الهدوء 10 ثواني */
  100% { transform: translateX(0) }
}

/* (اختياري – تحسين ذكي لو المتصفح بيدعم :has و :in-view)
   يوقف الاهتزاز لما السعر ظاهر ويشغّله لما السعر خارج الفيو */
@supports selector(#product-id:has(#sale-price)) and selector(#product-id:has(#sale-price:in-view)){
  /* بشكل افتراضي: شغّل الحركة */
  #product-id .checkout_btn,
  #product-id .form_checkout_btn{
    animation: hourWiggleCycle 15s ease-in-out infinite;
  }
  /* لو السعر ظاهر داخل الفيو: أوقف الحركة */
  #product-id:has(#sale-price:in-view) .checkout_btn,
  #product-id:has(#sale-price:in-view) .form_checkout_btn{
    animation: none !important;
    transform: none !important;
  }
}