.promo-bar .promo-bar-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 70px;
  padding: 0 10px;
  background: linear-gradient(67deg, #ff5a12 0%, #ff5a12 39.95%, #f02323 100%);
}

/* Invisible, inert copy of the bar left in normal flow purely to reserve its height —
   promo-bar-bar-live (below) is taken out of flow via position: fixed, so without this the
   page content would jump up underneath it. */
.promo-bar .promo-bar-bar-spacer {
  visibility: hidden;
  pointer-events: none;
}

/* The real, visible bar. Fixed (not sticky) below the sitewide header: EDS wraps this block
   in its own section <div> sized to just the bar's own content, so there is no taller parent
   for a plain `position: sticky` bar to stick within — same reason header.css pins its own
   bar with `position: fixed` rather than sticky. `top` matches the header's own current
   reserved margin-bottom (styles/styles.css / blocks/header/header.css) so this bar sits
   flush under it with no gap — keep the two in sync if that value changes. z-index stays
   below the header's (999/1000) so the header still renders on top of this bar. */
.promo-bar .promo-bar-bar-live {
  position: fixed;
  top: 51px;
  left: 0;
  width: 100%;
  z-index: 500;
}

/* The sitewide header reserves its own margin-bottom (blocks/header/header.css) sized for
   itself alone; when a promo-bar is also on the page, that margin needs to grow to match
   this bar's fixed `top` offset above, or the bar would overlap the page content beneath
   it. Scoped to pages that actually have a promo-bar, via :has(), instead of editing
   header.css directly. */
body:has(.promo-bar) header {
  margin-bottom: 51px !important;
}

.promo-bar .promo-bar-text {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
}

.promo-bar .promo-bar-cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 73px;
  height: 30px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #000;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

@media (width >= 600px) {
  .promo-bar .promo-bar-bar {
    padding: 0 135px;
  }

  .promo-bar .promo-bar-bar-live {
    top: 85px;
  }

  body:has(.promo-bar) header {
    margin-bottom: 85px !important;
  }

  .promo-bar .promo-bar-text {
    font-size: 15px;
  }

  .promo-bar .promo-bar-cta {
    width: 142px;
    height: 45px;
    font-size: 14px;
  }
}

/* product-order variant — heading + price (hidden on mobile) + bordered phone CTA box,
   in place of the default text + solid CTA button. */
.promo-bar.product-order .promo-bar-bar {
  height: 65px;
  padding: 10px 20px;
}

.promo-bar.product-order .promo-bar-heading {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.promo-bar.product-order .promo-bar-order-cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
}

.promo-bar.product-order .promo-bar-price {
  display: none;
}

.promo-bar.product-order .promo-bar-phone-cta {
  display: flex;
  align-items: center;
  width: 150px;
  height: auto;
  padding: 10px;
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  filter: drop-shadow(0 4px 12px rgb(56 56 56 / 20%));
  color: #eaeaea;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12px;
  text-decoration: none;
  text-transform: uppercase;
}

.promo-bar.product-order .promo-bar-phone-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

@media (width >= 600px) {
  .promo-bar.product-order .promo-bar-bar {
    height: 70px;
    padding: 10px 60px;
  }

  .promo-bar.product-order .promo-bar-heading {
    font-size: 15px;
  }

  .promo-bar.product-order .promo-bar-order-cta {
    gap: 30px;
  }

  .promo-bar.product-order .promo-bar-price {
    display: block;
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .promo-bar.product-order .promo-bar-phone-cta {
    width: 184px;
    height: 49px;
    font-size: 11px;
  }

  .promo-bar.product-order .promo-bar-phone-icon {
    margin-right: 15px;
  }
}

@media (width >= 1200px) {
  .promo-bar.product-order .promo-bar-bar {
    padding: 10px 112px;
  }
}

/* language-popup variant — CTA opens a language-selection popup instead of linking out.
   Pixel-matched to the classic `stbdonglepopup` component's own clientlib CSS (fetched
   from the live STB Dongle product page) rather than this repo's other popup blocks —
   values below (500px card, 146x35px pills, #f04c23, 75pt/pill radii, etc.) are literal,
   not approximated. Classic has no dark backdrop behind the popup and doesn't lock page
   scroll while it's open, so this variant doesn't add either (unlike `multi-tv`'s popup). */

/* Classic's `buy-now-btn` is white with orange text (padding-sized, not the fixed-box
   black/white button the default/product-order variants use) — matches literally, including
   its own separate mobile/desktop padding+font-size step and hover effect. */
.promo-bar.language-popup .promo-bar-cta {
  width: auto;
  height: auto;
  min-width: 120px;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 12px;
  color: #ff5a12;
  background: #fff;
  border: none;
}

.promo-bar.language-popup .promo-bar-bar-live .promo-bar-cta:hover {
  background: #f8f8f8;
  transform: scale(1.05);
}

@media (width >= 629px) {
  .promo-bar.language-popup .promo-bar-cta {
    padding: 14px 40px;
    font-size: 14px;
  }
}

.promo-bar .promo-bar-popup {
  display: none;
  position: fixed;

  /* A fixed vh offset from the top (not a 50%/translate centering trick) so the popup
     always sits a bit below the very top of the viewport and can never go negative/
     off-screen above it, regardless of actual viewport height. */
  top: 16vh;
  left: 50%;
  width: 500px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
  z-index: 999;
}

.promo-bar .promo-bar-popup.show {
  display: block;
}

.promo-bar .promo-bar-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: rgb(0 0 0 / 40%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

.promo-bar .promo-bar-popup-close::before,
.promo-bar .promo-bar-popup-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #fff;
  transform-origin: center;
}

.promo-bar .promo-bar-popup-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.promo-bar .promo-bar-popup-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.promo-bar .promo-bar-popup-banner {
  position: relative;
  overflow: hidden;
  background: #ffded7;
}

.promo-bar .promo-bar-popup-image {
  display: block;
  width: 100%;
}

.promo-bar .promo-bar-popup-body {
  padding: 20px;
}

.promo-bar .promo-bar-popup-heading {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-align: center;
}

.promo-bar .promo-bar-popup-message {
  margin: 0 0 12px;
  font-size: 13px;
  color: #f04c23;
  text-align: center;
}

.promo-bar .promo-bar-language-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 20px;
}

.promo-bar .promo-bar-language {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 146px;
  height: 35px;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 75pt;
  cursor: pointer;
}

.promo-bar .promo-bar-language input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.promo-bar .promo-bar-language span {
  font-size: 11px;
  font-weight: 400;
  color: #f04c23;
  text-align: center;
  letter-spacing: 0.28px;
}

.promo-bar .promo-bar-language input:checked + span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #444;
  border-radius: 75pt;
}

.promo-bar .promo-bar-popup-continue {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #f04c23;
  border: none;
  border-radius: 8px;
  filter: drop-shadow(0 4px 12px rgb(56 56 56 / 20%));
  cursor: pointer;
}

.promo-bar .promo-bar-popup-continue:disabled {
  background: #ccc;
  cursor: not-allowed;
}