/*
 * Offer bar for HomeASAP promo pages (shared; copied to each site as _shared/promo.css).
 * Filled and shown by _shared/promo.js. Neutral navy by default; a campaign
 * theme (e.g. .promo-bar--fall) restyles it. Pages may set --promo-bar-max to
 * match their content width.
 */
.promo-bar { background: #0f2d7a; color: #fff; line-height: 1.25; }
.promo-bar-inner { max-width: var(--promo-bar-max, 1120px); margin: 0 auto; padding: 8px 12px 8px 20px; display: flex; align-items: center; gap: 14px; }
.promo-bar-text { flex: 1; min-width: 0; margin: 0; font-size: 15px; }
.promo-bar-title { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; margin-right: 8px; white-space: nowrap; }
.promo-bar-offer { font-weight: 700; white-space: nowrap; }
.promo-bar-offer s { opacity: .85; margin-right: 4px; }
.promo-bar-countdown { display: flex; gap: 6px; flex-shrink: 0; }
.promo-bar-countdown:empty { display: none; }
.cd-box { background: #fff; color: #2b4264; border-radius: 6px; padding: 2px 7px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.cd-box b { color: #d46000; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; margin-right: 2px; }
.promo-bar-cta { flex-shrink: 0; background: #fff; color: #0f2d7a; font-weight: 700; font-size: 15px; padding: 7px 16px; border-radius: 6px; white-space: nowrap; text-decoration: none; }
.promo-bar-cta:hover { filter: brightness(1.08); text-decoration: none; }
.promo-bar-close { flex-shrink: 0; width: 40px; height: 40px; background: none; border: 0; color: rgba(255,255,255,.85); font-size: 26px; line-height: 1; cursor: pointer; }
.promo-bar-close:hover { color: #fff; }
.promo-bar-cta:focus-visible, .promo-bar-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Fall sale theme: matches the OptinMonster Fall Kickoff Sale artwork */
.promo-bar--fall {
  background: radial-gradient(ellipse at center, rgba(187, 3, 3, .75) 40%, rgba(187, 3, 3, 0) 94%),
              url('fall-sale-leaves.jpg') center 40% / cover, #c8202a;
  font-family: 'Ubuntu', sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.promo-bar--fall .promo-bar-cta { background: #eb7a00; color: #fff; text-shadow: none; }
.promo-bar--fall .cd-box { text-shadow: none; }

@media (max-width: 767px) {
  .promo-bar-inner { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "text text close" "count cta cta"; gap: 4px 8px; padding: 6px 4px 8px 12px; }
  .promo-bar-text { grid-area: text; font-size: 14px; }
  .promo-bar-title { font-size: 17px; margin-right: 6px; }
  .promo-bar-countdown { grid-area: count; gap: 4px; }
  .cd-box { font-size: 12px; padding: 1px 6px; }
  .cd-box b { font-size: 15px; }
  .promo-bar-cta { grid-area: cta; font-size: 14px; padding: 5px 12px; justify-self: end; margin-right: 8px; }
  .promo-bar-close { grid-area: close; align-self: start; }
}