/* =====================================================================
   Order Summary ticker - "50% OFF APPLIED"
   ---------------------------------------------------------------------
   Lives inside .summaryCalculator on /order-now, directly under
   .subtitle-text. The navy block is pinned at the left and the reassurance
   items scroll past it. Deliberately carries no discount figure in the
   scrolling half: the saving is already shown by the struck-through price.

   Prefixed .ceso-* so it cannot collide with the sticky homepage bar in
   new-land/sale-banner.php, which uses .cesb-*. The custom properties are
   scoped to .ceso-bar rather than :root so this component stands alone
   even on a page where that banner is absent.

   Horizontal bleed is -24px to match .calculator { padding: 32px 24px }.
   If that padding ever changes, change the margin here to match.
   ===================================================================== */

@keyframes cesoShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes cesoHeadlight {
  0%   { left: -28%; }
  42%  { left: 122%; }
  100% { left: 122%; }
}
@keyframes cesoMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes cesoSpark {
  0%, 100% { transform: scale(.8) rotate(0); opacity: .5; }
  50%      { transform: scale(1.15) rotate(90deg); opacity: 1; }
}
@keyframes cesoPulse {
  0%, 86%   { transform: scale(1); }
  91%       { transform: scale(1.06); }
  96%, 100% { transform: scale(1); }
}

.ceso-bar {
  --cesb-navy: #0F1B4C;
  --cesb-blue: #2243A4;
  --cesb-yellow: #FFE06B;
  --cesb-yellow-dk: #FFB400;

  position: relative;
  /* Own stacking context. Without this the z-index on .ceso-applied competes
     with the page, and it punched through the skeleton overlay that
     .summaryBar.loading::after paints at z-index 2 while a price is being
     fetched - the navy block floated alone over a grey card. Isolating keeps
     the bar's internal layering intact but contained. */
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  height: 48px;
  /* Full-bleed to the card edge. .calculator is padding 32px 24px plus a 1px
     border, so the bleed is 25px per side - 24px alone stopped just inside the
     border and left a visible sliver. Width is stated explicitly so the box
     cannot end up narrower than the two negative margins imply. */
  margin: 14px -27px 18px;
  width: calc(100% + 55px);
  color: var(--cesb-navy);
  font-family: Inter, -apple-system, sans-serif;
  background: linear-gradient(100deg, #FFD94F 0%, #FFE98E 24%, #FFE06B 52%, #FFD94F 78%, #FFE98E 100%);
  background-size: 200% 100%;
  animation: cesoShift 18s linear infinite;
  border-top: 1px solid rgba(255, 180, 0, .45);
  border-bottom: 3px solid var(--cesb-yellow-dk);
}

.ceso-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -28%;
  width: 20%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: cesoHeadlight 5s cubic-bezier(.5, 0, .5, 1) infinite;
}

/* Fixed block: never moves, never scrolls away. */
.ceso-applied {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px 0 14px;
  background: var(--cesb-navy);
  color: var(--cesb-yellow);
  white-space: nowrap;
  box-shadow: 4px 0 14px rgba(15, 27, 76, .3);
  transform-origin: left center;
  animation: cesoPulse 7.2s cubic-bezier(.3, .8, .3, 1) infinite;
}
.ceso-applied .num  { font-size: 18px; font-weight: 900; letter-spacing: -.4px; line-height: 1; }
.ceso-applied .off  { font-size: 11px; font-weight: 900; letter-spacing: 1.2px; }
.ceso-applied .word { font-size: 11px; font-weight: 900; letter-spacing: 1.2px; color: #fff; opacity: .92; }

.ceso-applied::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -9px;
  width: 9px;
  background: var(--cesb-navy);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ceso-view {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.ceso-marquee {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: cesoMarquee 24s linear infinite;
}
.ceso-bar:hover .ceso-marquee { animation-play-state: paused; }

.ceso-track {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

.ceso-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.1px;
}
.ceso-item svg { flex-shrink: 0; color: var(--cesb-blue); }
.ceso-item--lead { color: var(--cesb-blue); font-size: 13.5px; font-weight: 900; }

.ceso-sep {
  flex-shrink: 0;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 27, 76, .4);
}
.ceso-sep svg { animation: cesoSpark 2.4s ease-in-out infinite; }

.ceso-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .ceso-bar,
  .ceso-bar * { animation: none !important; }
}