.upcoming-events {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(var(--events-bottom, 100px) + env(safe-area-inset-bottom));
  z-index: 9000;
  width: 390px;
  max-width: calc(100vw - 36px);
  font-family: 'League Spartan', Arial, sans-serif;
  color: #233b4e;
  font-size: 16px;
  line-height: 1.4;
}
.upcoming-events [hidden],
.upcoming-events[hidden] {
  display: none !important;
}
.upcoming-events * {
  box-sizing: border-box;
}
.upcoming-events button {
  font: inherit;
  cursor: pointer;
}
.upcoming-events__launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-left: auto;
  min-height: 48px;
  padding: 12px 18px;
  background: #004175;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 25px;
  box-shadow: 0 3px 18px #12344d30;
  font-weight: 600;
}
.upcoming-events__panel {
  background: #fff;
  border: 1px solid #d6e1e9;
  border-radius: 14px;
  box-shadow: 0 8px 36px #12344d35;
  overflow: hidden;
  max-height: min(680px, var(--events-available, 70vh));
  display: flex;
  flex-direction: column;
  animation: events-enter 300ms ease-out;
}
.upcoming-events__header {
  display: flex;
  gap: 8px;
  padding: 20px 14px 16px 20px;
  background: #f2f6fa;
  border-top: 4px solid #eb8b2c;
  flex-shrink: 0;
}
.upcoming-events h2 {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
  color: #004175;
  margin: 0 0 8px;
  font-weight: 600;
  text-align: left;
}
.upcoming-events__header p {
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
  color: #425b6e;
}
.upcoming-events__close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #004175;
}
.upcoming-events__cards {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: 0 18px;
  scroll-padding: 12px;
}
.upcoming-events__card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0;
}
.upcoming-events__card + .upcoming-events__card {
  border-top: 1px solid #dce5eb;
}
.upcoming-events__card > img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
}
.upcoming-events h3 {
  font-size: 19px;
  line-height: 1.15;
  color: #004175;
  margin: 0 0 8px;
  letter-spacing: 0;
  font-weight: 600;
}
.upcoming-events__card p {
  font-size: 14px;
  line-height: 1.4;
  margin: 8px 0;
  color: #334f63;
}
.upcoming-events__card .upcoming-events__date {
  font-weight: 500;
  color: #004175;
}
.upcoming-events__card .upcoming-events__venue {
  font-size: 12px;
  color: #506573;
}
.upcoming-events__badge {
  display: inline-block;
  font-size: 12px;
  color: #674116;
  background: #fff1df;
  border-radius: 4px;
  padding: 2px 7px;
}
.upcoming-events__card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #004175;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.upcoming-events svg {
  flex-shrink: 0;
}
.upcoming-events :focus-visible {
  outline: 3px solid #004175;
  outline-offset: 3px;
}
.upcoming-events__launcher:focus-visible {
  outline-color: #eb8b2c;
}
.upcoming-events__close:hover {
  background: #e3edf5;
}
.upcoming-events__card a:hover {
  color: #215f91;
}
@keyframes events-enter {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .upcoming-events {
    right: max(12px, env(safe-area-inset-right));
    max-width: calc(100vw - 24px);
    width: 390px;
  }
  .upcoming-events__panel {
    max-height: min(55dvh, var(--events-available, 55vh));
  }
  .upcoming-events__header {
    padding: 12px 10px 12px 16px;
  }
  .upcoming-events h2 {
    font-size: 20px;
  }
  .upcoming-events__card {
    grid-template-columns: 60px minmax(0, 1fr);
    padding: 14px 0;
  }
  .upcoming-events__card > img {
    width: 60px;
    height: 60px;
  }
  .upcoming-events__card .upcoming-events__venue {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .upcoming-events__panel {
    animation: none;
  }
}

.upcoming-events h2,
.upcoming-events h3,
.upcoming-events p,
.upcoming-events a,
.upcoming-events button {
  letter-spacing: normal;
  text-transform: none;
}
.upcoming-events__close {
  padding: 0;
  min-width: 44px;
  max-width: 44px;
  margin: 0;
}
.upcoming-events__launcher {
  min-width: 0;
}
.upcoming-events__header h2 {
  font-size: 21px;
}