/* Dynamic — seasonal campaign banners (shared by index.html and admin.html) */
.promo{position:relative;overflow:hidden;isolation:isolate;color:#fff;font-family:var(--font-d,inherit)}
.promo a{color:inherit}
.promo-img{display:block}
.promo-img img{width:100%;height:auto;display:block}
.promo-tpl{min-height:clamp(170px,19vw,260px);display:flex;align-items:center}
.promo-in{position:relative;z-index:3;width:100%;display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;padding:26px clamp(16px,4.5vw,88px)}
.promo-tag{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.04em;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.promo-title{font-size:clamp(30px,4.6vw,64px);font-weight:900;line-height:1.05;margin:0}
.promo-sub{font-size:clamp(15px,1.4vw,19px);margin:10px 0 0;opacity:.9;max-width:40em}
.promo-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.promo-cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;font-size:16px;padding:14px 26px;border-radius:999px;transition:transform .15s}
.promo-cta:hover{transform:translateY(-1px)}
.promo-cd{display:flex;gap:8px;direction:ltr}
.promo-cd div{min-width:62px;text-align:center;border-radius:12px;padding:8px 6px}
.promo-cd b{display:block;font-size:26px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.promo-cd small{display:block;font-size:11.5px;opacity:.8}
.promo-cdl{font-size:13px;opacity:.85;margin-bottom:-6px}
.promo .deco{position:absolute;inset:0;z-index:1;pointer-events:none}

/* 1) Black Friday — Neon */
.t-bf-neon{background:#050505}
.t-bf-neon .deco{background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,197,49,.07) 46px 92px);animation:pr-slide 3s linear infinite}
.t-bf-neon .deco::after{content:"%";position:absolute;inset-inline-end:6%;top:50%;transform:translateY(-50%);font-size:clamp(120px,16vw,240px);font-weight:900;color:transparent;-webkit-text-stroke:2px rgba(255,197,49,.35);animation:pr-pulse 1.8s ease-in-out infinite}
.t-bf-neon .promo-title{color:#FFE27A;text-shadow:0 0 8px #FFC531,0 0 24px rgba(255,197,49,.6);animation:pr-flicker 4s infinite}
.t-bf-neon .promo-tag{background:#FFC531;color:#050505}
.t-bf-neon .promo-cta{background:#FFC531;color:#050505}
.t-bf-neon .promo-cd div{background:rgba(255,197,49,.12);border:1px solid rgba(255,197,49,.4)}

/* 2) Black Friday — Conveyor of parcels */
.t-bf-conveyor{background:linear-gradient(180deg,#141414,#0a0a0a)}
.t-bf-conveyor .deco::before{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(90deg,#2a2a2a 0 22px,#3a3a3a 22px 44px);animation:pr-belt 1s linear infinite}
.t-bf-conveyor .deco::after{content:"";position:absolute;bottom:16px;left:-1400px;width:4200px;height:54px;
  background:repeating-linear-gradient(90deg,#C98A3D 0 32px,#FFC531 32px 38px,#C98A3D 38px 70px,transparent 70px 140px);
  border-radius:4px;animation:pr-boxes 7s linear infinite}
.t-bf-conveyor .promo-in{padding-bottom:86px}
.t-bf-conveyor .promo-title span{color:#FFC531}
.t-bf-conveyor .promo-tag{background:#fff;color:#0a0a0a}
.t-bf-conveyor .promo-cta{background:#fff;color:#0a0a0a}
.t-bf-conveyor .promo-cd div{background:#1f1f1f}

/* 3) Black Friday — Gold countdown */
.t-bf-gold{background:#0b0b0b}
.t-bf-gold .deco{background:linear-gradient(110deg,transparent 30%,rgba(255,215,120,.16) 45%,transparent 60%) 0 0/250% 100%;animation:pr-sheen 3.5s ease-in-out infinite}
.t-bf-gold .promo-title{background:linear-gradient(90deg,#F7D774,#C9962B,#F7D774);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:pr-gold 4s linear infinite}
.t-bf-gold .promo-tag{background:transparent;border:1px solid #C9962B;color:#F7D774}
.t-bf-gold .promo-cta{background:linear-gradient(90deg,#F7D774,#C9962B);color:#0b0b0b}
.t-bf-gold .promo-cd div{background:#151515;border:1px solid #3b2f12}
.t-bf-gold .promo-cd b{color:#F7D774}

/* 4) White Friday */
.t-white{background:#fff;color:#13125D;border-bottom:1px solid #D6DDEE}
.t-white .deco{background:linear-gradient(110deg,transparent 35%,rgba(47,86,245,.09) 50%,transparent 65%) 0 0/250% 100%;animation:pr-sheen 4s ease-in-out infinite}
.t-white .promo-tag{background:#13125D;color:#fff}
.t-white .promo-cta{background:#2F56F5;color:#fff}
.t-white .promo-cd div{background:#EAF0FF}

/* 5) Ramadan — lanterns */
.t-ramadan{background:radial-gradient(120% 140% at 80% 0%,#2a2a8a 0%,#13125D 55%,#0b0a3a 100%)}
.t-ramadan .deco{background:
   radial-gradient(2px 2px at 12% 30%,#fff,transparent),radial-gradient(2px 2px at 28% 70%,#fff,transparent),
   radial-gradient(1.5px 1.5px at 44% 20%,#fff,transparent),radial-gradient(2px 2px at 63% 60%,#fff,transparent),
   radial-gradient(1.5px 1.5px at 86% 80%,#fff,transparent);animation:pr-twinkle 3s ease-in-out infinite}
.t-ramadan .lan{position:absolute;top:0;width:34px;height:120px;z-index:2;transform-origin:50% 0;animation:pr-swing 3.2s ease-in-out infinite}
.t-ramadan .lan::before{content:"";position:absolute;left:16px;top:0;width:2px;height:56px;background:#FFC531}
.t-ramadan .lan::after{content:"";position:absolute;left:3px;top:56px;width:28px;height:44px;border-radius:8px 8px 14px 14px;background:linear-gradient(#FFE27A,#FFC531);box-shadow:0 0 22px rgba(255,197,49,.7)}
.t-ramadan .lan.l1{inset-inline-end:8%}.t-ramadan .lan.l2{inset-inline-end:16%;height:90px;animation-delay:-1s}.t-ramadan .lan.l3{inset-inline-end:24%;height:140px;animation-delay:-2s}
.t-ramadan .moon{position:absolute;inset-inline-end:34%;top:18px;width:46px;height:46px;border-radius:50%;box-shadow:12px -6px 0 0 #FFE27A;z-index:2}
.t-ramadan .promo-tag{background:#FFC531;color:#13125D}
.t-ramadan .promo-cta{background:#FFC531;color:#13125D}
.t-ramadan .promo-cd div{background:rgba(255,255,255,.08)}

/* 6) Eid — confetti */
.t-eid{background:linear-gradient(120deg,#2F56F5,#13125D)}
.t-eid .deco{background:
   radial-gradient(circle,#FFC531 3px,transparent 4px) 0 0/90px 90px,
   radial-gradient(circle,#fff 2.5px,transparent 3.5px) 40px 30px/110px 110px,
   radial-gradient(circle,#7CE0B6 3px,transparent 4px) 20px 60px/130px 130px;animation:pr-fall 6s linear infinite}
.t-eid .promo-tag{background:#fff;color:#13125D}
.t-eid .promo-cta{background:#FFC531;color:#13125D}
.t-eid .promo-cd div{background:rgba(255,255,255,.14)}

/* 7) Any season — brand road */
.t-road{background:#13125D}
.t-road .deco::after{content:"";position:absolute;left:0;right:0;bottom:18px;height:5px;background:repeating-linear-gradient(to left,#FFC531 0 46px,transparent 46px 92px);animation:pr-drive 2s linear infinite}
.t-road .promo-in{padding-bottom:48px}
.t-road .promo-tag{background:#FFC531;color:#13125D}
.t-road .promo-cta{background:#2F56F5;color:#fff}
.t-road .promo-cd div{background:rgba(255,255,255,.1)}

.promo-close{position:absolute;top:10px;inset-inline-end:10px;z-index:4;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.25);color:inherit;cursor:pointer;font-size:18px;line-height:1}
.t-white .promo-close{background:rgba(19,18,93,.08)}

@keyframes pr-slide{to{background-position:184px 0}}
@keyframes pr-pulse{50%{transform:translateY(-50%) scale(1.08);opacity:.7}}
@keyframes pr-flicker{0%,19%,23%,60%,64%,100%{opacity:1}21%,62%{opacity:.55}}
@keyframes pr-belt{to{background-position:44px 0}}
@keyframes pr-boxes{to{transform:translateX(1400px)}}
@keyframes pr-sheen{0%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes pr-gold{to{background-position:200% 0}}
@keyframes pr-twinkle{50%{opacity:.4}}
@keyframes pr-swing{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
@keyframes pr-fall{to{background-position:0 360px,40px 470px,20px 580px}}
@keyframes pr-drive{to{transform:translateX(92px)}}
[dir="ltr"] .t-bf-conveyor .deco::after{animation-direction:reverse}

@media (max-width:620px){
  .promo-in{flex-direction:column;align-items:flex-start}
  .promo-cd div{min-width:54px}
  .t-ramadan .lan.l3,.t-ramadan .moon{display:none}
}
@media (prefers-reduced-motion:reduce){
  .promo .deco,.promo .deco::before,.promo .deco::after,.promo .lan,.promo .promo-title{animation:none !important}
}