/* Announcement bar — SRS Part11 §Announcement bar (Table 63-74), Figma 16320-26493 (PC) / 16520-18074 (mobile).
   Style palette lives on the ITEM, not the root: announcement.style is a per-content-item field, so a
   carousel can mix light and dark rows. */

.uiw-announcement-bar {
  display: block;
  width: 100%;
  position: relative;
}
.uiw-announcement-bar.is-dismissed { display: none; }

.uiw-announcement-bar-item {
  display: none;
  align-items: center;
  gap: 20px;
  padding: 12px 96px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Unbeatable','Arial','Helvetica Neue','Helvetica',sans-serif;
}
.uiw-announcement-bar-item.is-active { display: flex; }

.uiw-announcement-bar-item--dark  { background-color: #32394d; }
.uiw-announcement-bar-item--light { background-color: #fee1bc; }

/* ---- main (icon + text + CTA) ---- */
.uiw-announcement-bar-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.uiw-announcement-bar-icon {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.uiw-announcement-bar-icon img,
.uiw-announcement-bar-icon svg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---- content text ---- */
.uiw-announcement-bar-text {
  font-family: 'Unbeatable','Arial','Helvetica Neue','Helvetica',sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  min-width: 0;
}
/* Table 67: PC renders on ONE LINE; overflow scrolls as a marquee (class added by widget.js). */
.uiw-announcement-bar-text--desktop {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}
.uiw-announcement-bar-text--mobile { display: none; }

.uiw-announcement-bar-textinner { display: inline-block; will-change: transform; }
.uiw-announcement-bar-text--desktop.is-marquee .uiw-announcement-bar-textinner {
  animation: uiw-announcement-bar-marquee var(--uiw-ab-marquee-duration, 18s) linear infinite;
}
@keyframes uiw-announcement-bar-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--uiw-ab-marquee-distance, 100%))); }
}
@media (prefers-reduced-motion: reduce) {
  .uiw-announcement-bar-text--desktop.is-marquee .uiw-announcement-bar-textinner { animation: none; }
}

.uiw-announcement-bar-item--dark  .uiw-announcement-bar-text { color: #f2f2f2; }
.uiw-announcement-bar-item--light .uiw-announcement-bar-text { color: #000000; }
.uiw-announcement-bar-item--dark  .uiw-announcement-bar-text strong,
.uiw-announcement-bar-item--dark  .uiw-announcement-bar-text b { color: #ffffff; }
.uiw-announcement-bar-item--light .uiw-announcement-bar-text strong,
.uiw-announcement-bar-item--light .uiw-announcement-bar-text b { color: #000000; }
.uiw-announcement-bar-text a {
  color: #ff7300;
  font-weight: 700;
  text-decoration: underline;
}
.uiw-announcement-bar-text p { margin: 0; }

/* ---- CTA buttons ---- */
.uiw-announcement-bar-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.uiw-announcement-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  padding: 7px 16px;
  font-family: 'Unbeatable','Arial','Helvetica Neue','Helvetica',sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.uiw-announcement-bar-btn--primary   { background-color: #ff7300; color: #ffffff; }
.uiw-announcement-bar-btn--secondary { background-color: #ffffff; color: #ff7300; border-color: #ff8f33; }

/* ---- pagination (Table 70) ---- */
.uiw-announcement-bar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.uiw-announcement-bar-nav-arrow {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.uiw-announcement-bar-nav-arrow svg { display: block; width: 100%; height: 100%; }
.uiw-announcement-bar-nav-count {
  font-family: 'Unbeatable','Arial','Helvetica Neue','Helvetica',sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  width: 30px;
  text-align: right;
}
.uiw-announcement-bar-item--dark  .uiw-announcement-bar-nav-count,
.uiw-announcement-bar-item--dark  .uiw-announcement-bar-nav-arrow { color: #ffffff; }
.uiw-announcement-bar-item--light .uiw-announcement-bar-nav-count,
.uiw-announcement-bar-item--light .uiw-announcement-bar-nav-arrow { color: #000000; }

/* AB#132628 — at the first announcement the previous arrow, and at the last one the next arrow,
   must read as spent instead of keeping the same colour as the live one. Declared after the two
   style rules above so it wins for both 'light' and 'dark' without repeating either selector. */
.uiw-announcement-bar-nav-arrow.is-edge { color: #8c8c8c; }

/* ---- dismiss (Table 69) ---- */
.uiw-announcement-bar-close {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.uiw-announcement-bar-close svg { display: block; width: 100%; height: 100%; }
.uiw-announcement-bar-item--dark  .uiw-announcement-bar-close { color: #ffffff; }
.uiw-announcement-bar-item--light .uiw-announcement-bar-close { color: #000000; }

/* ---- mobile (Table 65: nav top-left, X top-right, icon + content on row 2) ---- */
@media (max-width: 767px) {
  .uiw-announcement-bar-item {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
  }
  .uiw-announcement-bar-nav   { order: 1; }
  .uiw-announcement-bar-close { order: 2; margin-left: auto; width: 20px; height: 20px; }
  .uiw-announcement-bar-main  { order: 3; width: 100%; align-items: flex-start; }

  .uiw-announcement-bar-icon { width: 27px; height: 30px; }

  /* Table 67 mobile: mobilecontent, wraps, no marquee */
  .uiw-announcement-bar-text--desktop { display: none; }
  .uiw-announcement-bar-text--mobile  { display: block; flex: 1 1 auto; white-space: normal; }
  .uiw-announcement-bar-text {
    font-size: 13px;
    line-height: 16px;
  }
  .uiw-announcement-bar-item--dark  .uiw-announcement-bar-text { color: #ffffff; }
  .uiw-announcement-bar-text strong,
  .uiw-announcement-bar-text b { font-size: 14px; line-height: 18px; }
  .uiw-announcement-bar-text a { font-weight: 600; text-decoration: none; }

  /* Table 68: the button[] CTA is not rendered on mobile — the link lives in mobilecontent */
  .uiw-announcement-bar-buttons { display: none; }
}