/* The campaign bar (templates/website/partials/_campaign_bar.html, atlas-campaign.js): a slim strip over the top of
 * every page while a campaign runs. The header sits under it while the visitor is at the top; scrolling folds the
 * header into its pill and the bar slides away, back at the top it returns. */
:root { --atb-h: 0px; }
html.atb-on { --atb-h: 44px; }
.atb { position: fixed; inset: 0 0 auto 0; z-index: 1001; height: var(--atb-h); overflow: hidden; isolation: isolate;
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(90deg, rgba(var(--xp-c-bg2, 11, 12, 16), 1), rgba(var(--xp-c-bg, 5, 6, 8), 1));
  border-bottom: 1px solid rgba(255, 255, 255, .1); font: 700 13px/1 Tajawal, Inter, system-ui, sans-serif;
  transform: translateY(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.atb[hidden] { display: none !important; }
.atb.atb-away { transform: translateY(-100%); opacity: 0; pointer-events: none; }
/* a light runs along it, and its edge glows in the campaign's badge colour */
.atb::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, .03) 52%, transparent 62%) 0 0 / 260% 100%;
  animation: atb-shine 5s ease-in-out infinite; }
.atb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--atb-badge, 255, 42, 74)), transparent); opacity: .9; }
@keyframes atb-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
html body .atb a.atb-link { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; height: 100%; color: #f4f5f7 !important; text-decoration: none !important; }
html body .atb .atb-badge { flex: 0 0 auto; padding: 5px 9px; border-radius: 7px; background: rgb(var(--atb-badge, 255, 42, 74)); color: #fff !important;
  font: 900 12px/1 Inter, Tajawal, sans-serif; box-shadow: 0 0 18px rgba(var(--atb-badge, 255, 42, 74), .55); animation: atb-pulse 2.4s ease-in-out infinite; }
html body .atb .atb-badge span { color: inherit !important; }
@keyframes atb-pulse { 50% { box-shadow: 0 0 0 5px rgba(var(--atb-badge, 255, 42, 74), 0), 0 0 26px rgba(var(--atb-badge, 255, 42, 74), .8); } }
html body .atb .atb-title { flex: 0 0 auto; font-weight: 900; font-size: 14px; color: #fff !important; }
html body .atb .atb-title span { color: inherit !important; }
/* the offers take turns, sliding up one after another */
.atb-roll { position: relative; flex: 0 1 auto; min-width: 0; height: 18px; overflow: hidden; }
.atb-item { display: block; height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: atb-roll 8s cubic-bezier(.7, 0, .3, 1) infinite; }
html body .atb .atb-item, html body .atb .atb-item span { color: rgba(244, 245, 247, .78) !important; }
html body .atb .atb-item b { color: #fff !important; font-family: Inter, sans-serif; font-weight: 900; }
@keyframes atb-roll { 0%, 42% { transform: translateY(0); } 50%, 92% { transform: translateY(-18px); } 100% { transform: translateY(0); } }
html body .atb .atb-timer { flex: 0 0 auto; font: 800 12px Inter, sans-serif; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; color: rgb(var(--atb-badge, 255, 42, 74)) !important; }
html body .atb .atb-go { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 99px; background: #fff; color: #0b0c10 !important; font-weight: 900; font-size: 12px; transition: transform .2s; }
html body .atb .atb-go span { color: inherit !important; }
html[dir="ltr"] .atb .atb-go i { transform: scaleX(-1); }
.atb .atb-go i { font-style: normal; display: inline-block; transition: translate .2s; }
.atb a.atb-link:hover .atb-go { transform: translateY(-1px); }
.atb a.atb-link:hover .atb-go i { translate: -3px 0; }
html[dir="ltr"] .atb a.atb-link:hover .atb-go i { translate: 3px 0; }
html body .atb .atb-x { flex: 0 0 auto; width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff !important; font-size: 11px; line-height: 26px; }
.atb .atb-x:hover { background: rgba(255, 255, 255, .2); }
.atb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the header sits under the bar while it is there; folded into its pill it rises back to the top */
html.atb-on body #siteHeader.site-header:not(.anv-compact) { top: var(--atb-h) !important; }
html.atb-on body { scroll-padding-top: calc(var(--atb-h) + 80px); }

/* phones: the badge, the name and the button; the rolling offers make way */
@media (max-width: 640px) {
  html.atb-on { --atb-h: 40px; }
  .atb { gap: 8px; font-size: 12px; }
  .atb-roll { display: none; }
  html body .atb .atb-title { font-size: 13px; }
  html body .atb .atb-go { padding: 5px 10px; font-size: 11px; }
}
@media (max-width: 360px) { .atb .atb-timer { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .atb, .atb::before, .atb-badge, .atb-item { animation: none !important; transition: none !important; }
}