/* EL-682: the page has to reserve room for the banner from the first paint, not only once
 * bottom-banner.js has measured it - until then the banner sat on top of the last 75px of the
 * page. This stylesheet is registered only when shouldDisplay() passes (see
 * hookActionFrontControllerSetMedia), so it is already scoped to the pages that actually render
 * the banner: no body class and no additional hook are needed for that.
 *
 * The literal values are the no-JS floor, measured on the preprod campaign: 53px at 1440px and
 * 75px at 390px, where the CTA wraps onto a second line.
 *
 * --evobb-height is DECLARED here rather than only passed as a var() fallback, so that it already
 * has a usable value before any script runs. bottom-banner.js then overrides it with the measured
 * height as an inline style on <body> - inline wins over this rule - and sets it to 0 when the
 * banner is dismissed or auto-hidden. evo_popinsticky offsets itself with the same variable, so
 * declaring it means the pop-in stacks correctly from the first paint instead of waiting for the
 * JS; on a heavy category page that wait was long enough for the two bars to overlap visibly.
 * Where the banner does not render this stylesheet is not registered at all, the variable stays
 * undefined, and the pop-in falls back to its own 0px - which is what we want. */
body {
  --evobb-height: 56px;
  padding-bottom: var(--evobb-height);
}

@media (max-width: 768px) {
  body {
    --evobb-height: 80px;
  }
}

.evo-bottombanner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--evobb-bg, #AC8868);
  color: var(--evobb-fg, #ffffff);
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.evo-bottombanner__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  padding: 0.6rem 2.5rem;
  max-width: 100%;
}

.evo-bottombanner__text-wrap {
  overflow: hidden;
  text-align: center;
}

.evo-bottombanner__text {
  display: inline;
}

/* Defend against RTE-injected wrappers (<p>, <span style="color:…">) overriding the banner color */
.evo-bottombanner__text,
.evo-bottombanner__text * {
  color: inherit;
}

.evo-bottombanner__text p {
  display: inline;
  margin: 0;
}

.evo-bottombanner__text strong,
.evo-bottombanner__text b {
  font-weight: 700;
}

.evo-bottombanner__text a {
  color: inherit;
  text-decoration: underline;
}

.evo-bottombanner__countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.evo-bottombanner__cta {
  display: inline-block;
  margin-left: 0.75rem;
  background: var(--evobb-cta-bg, #AC8868);
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  vertical-align: middle;
  transition: filter 0.15s ease;
}

.evo-bottombanner__cta:hover,
.evo-bottombanner__cta:focus {
  filter: brightness(1.08);
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* EL-682: the theme scopes its anchor colour on the page-type body id - emp_custom_css5.css
 * carries `#cms a { color: #000 }`, specificity (1,0,1), which beats any single class (0,1,0)
 * whatever the load order (and it loads later anyway, priority 1000 against 200). On every CMS
 * page that forced the CTA label and any link in the banner text to black; combined with
 * EVOBB_CTA_BG set to #000000 the label became black on black, i.e. an empty black box.
 *
 * Re-stating the colours through the id the banner already carries gives (1,1,0) - same number
 * of ids as the theme rule, one class more - so the module wins without !important and the
 * declaration stays cleanly overridable. */
#evo-bottombanner .evo-bottombanner__text,
#evo-bottombanner .evo-bottombanner__text *,
#evo-bottombanner .evo-bottombanner__text a,
#evo-bottombanner .evo-bottombanner__countdown,
#evo-bottombanner .evo-bottombanner__cta,
#evo-bottombanner .evo-bottombanner__cta:hover,
#evo-bottombanner .evo-bottombanner__cta:focus,
#evo-bottombanner .evo-bottombanner__close {
  color: var(--evobb-fg, #ffffff);
}

/* Defensive reset for any leftover inline <button> pasted in the BO RTE
 * (proper CTA should use the EVOBB_CTA_LABEL/URL fields instead) */
.evo-bottombanner__text button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.evo-bottombanner__close {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  opacity: 0.85;
}

.evo-bottombanner__close:hover,
.evo-bottombanner__close:focus {
  opacity: 1;
  outline: none;
}

@media (max-width: 768px) {
  .evo-bottombanner__inner {
    padding: 0.5rem 2.25rem;
    font-size: 0.85rem;
  }

  .evo-bottombanner--marquee-mobile .evo-bottombanner__text-wrap {
    overflow: hidden;
    white-space: nowrap;
  }

  .evo-bottombanner--marquee-mobile .evo-bottombanner__text {
    display: inline-block;
  }

  .evo-bottombanner.is-marquee .evo-bottombanner__text {
    padding-left: 100%;
    animation: evo-bottombanner-scroll var(--evobb-marquee-speed, 20s) linear infinite;
    will-change: transform;
  }

  @keyframes evo-bottombanner-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
  }

  .evo-bottombanner.is-marquee:hover .evo-bottombanner__text,
  .evo-bottombanner.is-marquee:focus-within .evo-bottombanner__text {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .evo-bottombanner.is-marquee .evo-bottombanner__text {
    animation: none;
    padding-left: 0;
  }
}

.evo-bottombanner[hidden] {
  display: none !important;
}