/**
 * Promo banner — dismissible campaign strip above the utility topbar.
 * Colours come from inline custom properties set by the settings page.
 */

.promo-banner {
  position: relative;
  background: var(--promo-bg, #0e5551);
  color: var(--promo-color, #fff);
  font-size: 13px;
  line-height: 1.35;
}

.promo-banner[hidden] { display: none; }

.promo-banner__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  min-height: 40px;
  padding: 8px 44px;
}

.promo-banner__body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  text-align: center;
}

.promo-banner__text { font-weight: 600; }

.promo-banner__cta {
  display: inline-flex;
  align-items: center;
  background: var(--promo-cta-bg, #f0a500);
  color: var(--promo-cta-color, #1c2624);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  white-space: nowrap;
}

.promo-banner__cta:hover,
.promo-banner__cta:focus { filter: brightness(0.94); color: var(--promo-cta-color, #1c2624); }

/* Whole-banner link when no button label is set. */
.promo-banner__overlay {
  position: absolute;
  inset: -8px -44px;
  z-index: 1;
}

/* Close button — left side, per design. */
.promo-banner__close {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}

.promo-banner__close svg { width: 16px; height: 16px; }
.promo-banner__close:hover,
.promo-banner__close:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.14); }

@media (max-width: 700px) {
  .promo-banner { font-size: 12px; }
  .promo-banner__inner { padding: 8px 38px; }
  .promo-banner__overlay { inset: -8px -38px; }
}