/**
 * Generic promo popup styling for Simple Popup Blocks.
 *
 * To run a promo popup on any page: create a custom block whose body is
 * <div class="promoCard">...</div>, place the block on the target pages
 * (any region; the popup JS re-parents it), and register it at
 * /admin/structure/simple_popup_blocks. Variant classes below provide
 * themed backgrounds; add new variants here as campaigns need them.
 */

.spb-popup-main-wrapper {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  padding: 0;
  overflow: hidden;
}

/* Offset from the viewport edges (module default is flush) */
.spb_bottom_right {
  bottom: 24px !important;
  right: 24px !important;
}

.spb_bottom_left {
  bottom: 24px !important;
  left: 24px !important;
}

@media (max-width: 600px) {
  .spb_bottom_right,
  .spb_bottom_left {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }
}

.promoCard {
  background-color: #0b2240;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: center;
  padding: 24px 20px 20px;
  font-size: 15px;
}

.promoCard h3 {
  color: #fff;
  font-size: 20px;
  margin: 0 0 8px;
}

.promoCard p {
  margin: 0 0 10px;
  /* explicit: the sitewide paragraph color rule beats inheritance */
  color: #fff;
}

/* Background variants */
.promoCard--football {
  background-image: url(../images/promo-football-bg.png);
}