/* Add custom CSS styles below */ 
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800&display=swap');
:root{
  --banner-h: 52px;      
  --speed: 22s;            
  --ink: #FFFFFF;          
  --brown-1:#2B1E14;      
  --brown-2:#6B4D2E;      
  --gold:#F59E0B;          
}
@media (max-width: 782px){
  :root{ --banner-h: 46px; --speed: 18s; }
}
html{ scroll-padding-top: var(--banner-h); }
body{ padding-top: var(--banner-h) !important; }
body::before{
  content:"";
  position: fixed; top:0; left:0; right:0;
  height: var(--banner-h);
  z-index: 2147483647;
  pointer-events: none;
  background: linear-gradient(90deg, var(--brown-1), var(--brown-2), var(--brown-1));
  box-shadow: 0 4px 12px rgba(0,0,0,.2), inset 0 -2px 0 var(--gold);
  overflow:hidden;
}
body::after{
  content: "🌴📦 لأهل مدينة جدة فقط 🍯🚚شحن مجاني لجميع الطلبات 📦🌴🌴 ";
  position: fixed; top:0; right:0;
  height: var(--banner-h);
  display: inline-block; white-space: nowrap;
  z-index: 2147483647; pointer-events: none;
  direction: rtl; unicode-bidi: plaintext;
  font-family: 'Cairo', sans-serif;
  color: var(--ink);
  font-weight: 800;                  
  font-size: clamp(13px, 2.8vw, 18px);
  line-height: var(--banner-h);
  text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 0 12px rgba(245,158,11,.35);
  padding-inline: 64px;
  transform: translateX(0);
  animation: banner-marquee var(--speed) linear infinite;
  will-change: transform;
}
@keyframes banner-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
body.admin-bar{ padding-top: calc(var(--banner-h) + 32px) !important; }
body.admin-bar::before, body.admin-bar::after{ top:32px; }
@media (max-width: 782px){
  body.admin-bar{ padding-top: calc(var(--banner-h) + 46px) !important; }
  body.admin-bar::before, body.admin-bar::after{ top:46px; }
}