/* Genre identity on calendar flyers and full Hot Event pages. */
.bo-calendar-genre-wrap {
  position: relative;
  display: block;
}

.bo-calendar-genre-badge {
  position: absolute;
  top: .35rem;
  right: .35rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: .2rem .42rem;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: .45rem;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .34);
  color: #fff;
  font-size: .67rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .045em;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.bo-calendar-genre-badge--dj {
  background: rgba(28, 79, 163, .94);
}

.bo-calendar-genre-badge--live {
  background: rgba(139, 63, 163, .94);
}

.bo-calendar-genre-badge--mixed {
  background: rgba(83, 67, 128, .95);
  font-size: .58rem;
}

.bo-event-genres {
  margin: .75rem 0 1rem;
  padding: .55rem .75rem;
  border-left: 4px solid #1C4FA3;
  border-radius: .35rem;
  background: rgba(28, 79, 163, .06);
  line-height: 1.45;
}

.bo-event-genres__label {
  font-weight: 800;
}

.bo-event-genres__items {
  font-weight: 600;
}

@media (max-width: 700px) {
  .bo-calendar-genre-badge {
    top: .28rem;
    right: .28rem;
    padding: .18rem .36rem;
    font-size: .62rem;
  }
}

/*
 * Keep the older curator/promoted markers aligned with the genre badge so the
 * two flyer corners read as one deliberate overlay system. These are small
 * overrides of legacy theme/module positioning only; icon sizes are unchanged.
 */
.flyer-wrapper .curator-badge-link,
.flyer-wrapper .bo-promoted-badge {
  top: .35rem !important;
  left: .35rem !important;
}

@media (max-width: 700px) {
  .flyer-wrapper .curator-badge-link,
  .flyer-wrapper .bo-promoted-badge {
    top: .28rem !important;
    left: .28rem !important;
  }
}

/*
 * Mobile/filmstrip navigation must always win the tap target stacking battle.
 * Legacy curator badges sit at z-index: 10, while the filmstrip arrows were
 * only z-index: 5. Keep the controls above every event overlay in the strip.
 */
@media (max-width: 767.99px) {
  .view-content-field-start-date-on-calendar .filmstrip-wrapper {
    position: relative;
    isolation: isolate;
  }

  .view-content-field-start-date-on-calendar .filmstrip-nav {
    position: relative;
    z-index: 1000 !important;
    pointer-events: auto !important;
  }
}