/* ==========================================================================
   Sayed AB - v268 - SPECIAL OFFER top bar
   A third bar, completely separate from the Sale bar and the Announcement
   ticker, with its own look: a soft glass pill on a moving gradient, a
   scrolling sentence, a live countdown and an editable button.
   Stacking order on the page:  Announcements  ->  Sale  ->  Special Offer
   ========================================================================== */

.offer-bar{
  position:fixed; left:0; right:0; top:0; z-index:9014;
  overflow:hidden; color:var(--ob-text,#fff);
  font-family:Poppins,system-ui,-apple-system,sans-serif;
  box-shadow:0 8px 24px rgba(8,20,45,.18);
}

/* ---- the moving gradient behind everything ---- */
.offer-bar::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--ob-bg,linear-gradient(var(--ob-angle,100deg),var(--ob-a),var(--ob-b),var(--ob-c),var(--ob-b),var(--ob-a)));
  background-size:280% 100%;
  animation:ob-flow 16s linear infinite;
}
/* a thin light sweep so it never looks flat */
.offer-bar::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.26) 48%,transparent 66%);
  background-size:220% 100%;
  animation:ob-sheen 7s ease-in-out infinite;
}
@keyframes ob-flow{from{background-position:0% 50%} to{background-position:280% 50%}}
@keyframes ob-sheen{0%{background-position:-40% 0}55%,100%{background-position:160% 0}}

/* ---- themes ---- */
.offer-bar{--ob-a:#8a4b06; --ob-b:#d98a12; --ob-c:#f7c64b; --ob-ink:#4a2600}
.offer-bar.ob-royal  {--ob-a:#062a63; --ob-b:#0f4fb3; --ob-c:#4f92ec; --ob-ink:#04204c}
.offer-bar.ob-emerald{--ob-a:#04512f; --ob-b:#0d8a52; --ob-c:#38cf8a; --ob-ink:#033a22}
.offer-bar.ob-rose   {--ob-a:#7a0b33; --ob-b:#c01e56; --ob-c:#f47fa5; --ob-ink:#5c0725}
.offer-bar.ob-pink   {--ob-a:#7d164f; --ob-b:#d83c88; --ob-c:#ff9dcc; --ob-ink:#64103e}
.offer-bar.ob-solid::before{background:var(--ob-solid,#0f4fb3);animation:none}

.offer-bar-inner{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:12px;
  min-height:36px; padding:3px 14px;
  max-width:1280px; margin:0 auto;
}

/* ---- left badge ---- */
.ob-badge{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px;
  background:#fff; color:var(--ob-ink);
  font:800 11.5px/1 Poppins,system-ui,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.offer-bar .ob-text,.offer-bar .ob-clock,.offer-bar .ob-dates{color:var(--ob-text,#fff)}
.ob-badge svg{width:13px; height:13px; display:block; fill:currentColor}

/* ---- the scrolling sentence ---- */
.ob-viewport{
  position:relative; flex:1 1 auto; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
}
.ob-track{display:flex; width:max-content; animation:ob-marquee 26s linear infinite}
.offer-bar:hover .ob-track,
.offer-bar:focus-within .ob-track{animation-play-state:paused}
@keyframes ob-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

.ob-seg{display:flex; align-items:center; gap:14px; padding-right:44px; white-space:nowrap}
.ob-text{font:600 14px/1.4 Poppins,system-ui,sans-serif; letter-spacing:.01em}
.ob-dates{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.34);
  font:600 12px/1 Poppins,system-ui,sans-serif;
}
.ob-dates svg{width:13px; height:13px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ob-dot{opacity:.65}

/* ---- countdown ---- */
.ob-clock{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  padding:5px 8px; border-radius:12px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.26);
}
.ob-unit{display:flex; flex-direction:column; align-items:center; min-width:34px}
.ob-unit b{
  font:800 15px/1 "Poppins",system-ui,sans-serif;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.ob-unit span{margin-top:2px; font:600 8.5px/1 Poppins,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; opacity:.8}
.ob-colon{opacity:.55; font:800 14px/1 Poppins,system-ui,sans-serif; padding-bottom:9px}
.ob-ended{font:700 12.5px/1 Poppins,system-ui,sans-serif; padding:0 6px}

/* ---- button ---- */
.ob-cta{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  min-height:34px; padding:8px 16px; border-radius:999px;
  background:#fff; color:var(--ob-ink); text-decoration:none;
  font:700 13px/1 Poppins,system-ui,sans-serif; white-space:nowrap;
  box-shadow:0 3px 12px rgba(0,0,0,.2);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ob-cta:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.28)}
.ob-cta:focus-visible{outline:3px solid #fff; outline-offset:2px}
.ob-cta svg{width:14px; height:14px; display:block; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

/* ---- close ---- */
.ob-close{
  flex:0 0 auto; width:32px; height:32px; padding:0; cursor:pointer;
  border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff;
  display:grid; place-items:center;
}
.ob-close:hover{background:rgba(255,255,255,.3)}
.ob-close:focus-visible{outline:3px solid #fff; outline-offset:2px}
.ob-close svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round}

/* the compact clock is only for narrow screens */
.ob-clock-min{
  display:none; flex:0 0 auto;
  padding:5px 10px; border-radius:999px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.26);
  font:700 12px/1 Poppins,system-ui,sans-serif;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---- phone ---- */
@media (max-width:760px){
  .offer-bar-inner{gap:9px; padding:3px 10px}
  .ob-badge{padding:6px 9px; font-size:10px; letter-spacing:.06em}
  .ob-badge span{display:none}
  .ob-badge svg{width:15px; height:15px}
  .ob-text{font-size:13px}
  .ob-cta{display:none}
  .ob-clock{display:none}
  .ob-clock-min{display:inline-flex; align-items:center}
}
@media (max-width:420px){
  .offer-bar-inner{gap:7px; padding:3px 8px}
  .ob-clock-min{padding:5px 8px; font-size:11px}
  .ob-close{width:28px; height:28px}
}

@media (prefers-reduced-motion:reduce){
  .offer-bar::before,.offer-bar::after,.ob-track{animation:none !important}
  .ob-track{width:100%}
  .ob-seg{white-space:normal}
  .ob-seg + .ob-seg{display:none}
  .ob-cta{transition:none}
}