/* Event reminder: the floating card for the next webinar or summit.
   Markup is built by assets/js/event-popup.js; data from includes/event-popup.php.
   Bottom right, above the back-to-top button (70 px at 20 px, 40 px on phones up to 500 px).
   Scoped to #vep so the site's global styles don't reach in. */
#vep {
  --vep-bg: #0C3E51;
  --vep-bg-hover: #0F4A60;
  --vep-ink: #FFFFFF;
  --vep-sub: #D5E4EA;
  --vep-dim: #A9C6D1;
  --vep-accent: #7CC0F0;
  --vep-live: #FF7A82;
  --vep-tile: rgba(255, 255, 255, .09);
  --vep-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  position: fixed;
  right: 20px;
  bottom: calc(102px + env(safe-area-inset-bottom, 0px));
  z-index: 1020;
  width: 256px;
  max-width: calc(100vw - 40px);
  font-family: var(--vep-font);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  color: var(--vep-ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
}
#vep[hidden] { display: none !important; }
#vep.vep-in { opacity: 1; transform: none; }
#vep *, #vep *::before, #vep *::after { box-sizing: border-box; }

#vep .vep-card {
  display: block;
  position: relative;
  padding: 12px 14px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px 16px 5px 16px;
  background: var(--vep-bg);
  color: var(--vep-ink);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(10, 51, 67, .32), 0 2px 6px rgba(10, 51, 67, .18);
  transition: background-color .2s ease, box-shadow .2s ease;
}
#vep .vep-card:hover { background: var(--vep-bg-hover); color: var(--vep-ink); text-decoration: none; }
#vep .vep-card:focus-visible { outline: 3px solid var(--vep-accent); outline-offset: 3px; }

#vep .vep-full, #vep .vep-mini { display: block; }
#vep .vep-mini { display: none; }

#vep .vep-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 26px 6px 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vep-dim);
}
#vep .vep-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vep-accent);
  box-shadow: 0 0 0 3px rgba(124, 192, 240, .22);
}
#vep .vep-title {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 3px;
  font: 700 15px/1.28 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  color: var(--vep-ink);
}
#vep .vep-when { display: block; font-size: 12.5px; color: var(--vep-sub); }

#vep .vep-count { display: flex; gap: 5px; margin: 9px 0; }
#vep .vep-u {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 3px 4px;
  border-radius: 8px;
  background: var(--vep-tile);
}
#vep .vep-u b {
  display: block;
  font: 700 17px/1.1 var(--vep-font);
  font-variant-numeric: tabular-nums;
  color: var(--vep-ink);
}
#vep .vep-u i {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--vep-dim);
}

#vep .vep-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--vep-accent); }
#vep .vep-arrow { transition: transform .2s ease; }
#vep .vep-card:hover .vep-arrow { transform: translateX(3px); }

#vep .vep-x {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vep-dim);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
#vep .vep-x svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#vep .vep-x:hover { background: rgba(255, 255, 255, .12); color: var(--vep-ink); }
#vep .vep-x:focus-visible { outline: 3px solid var(--vep-accent); outline-offset: 1px; }

/* Live: a red dot that pulses, and "Join now" instead of the countdown */
#vep.vep-is-live .vep-dot { background: var(--vep-live); box-shadow: 0 0 0 3px rgba(255, 122, 130, .25); animation: vep-pulse 1.6s ease-in-out infinite; }
#vep.vep-is-live .vep-count { display: none; }
#vep.vep-is-live .vep-cta { margin-top: 9px; }
@keyframes vep-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 122, 130, 0); } }

/* Chip: once the reader scrolls down, and always on phones */
#vep.vep-is-mini { width: 236px; }
#vep.vep-is-mini .vep-card { padding: 6px 34px 7px 12px; border-radius: 12px 12px 4px 12px; }
#vep.vep-is-mini .vep-full { display: none; }
#vep.vep-is-mini .vep-mini { display: block; }
#vep .vep-mini-top { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--vep-ink); }
#vep .vep-mini-t { display: block; overflow: hidden; margin-top: 1px; padding-left: 14px; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--vep-sub); }
#vep.vep-is-mini .vep-x { top: 50%; right: 4px; margin-top: -14px; }

/* Phones and small tablets: always the chip, beside the back-to-top button */
@media (max-width: 767.98px) {
  #vep, #vep.vep-is-mini {
    right: 100px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 236px;
    max-width: calc(100vw - 112px);
  }
}
@media (max-width: 500px) {
  #vep, #vep.vep-is-mini { right: 68px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 80px); }
}
/* fresh.vose.cloud only: keep clear of the front page design switch (bottom left) */
@media (max-width: 767.98px) {
  #vep.vep-lift { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  #vep, #vep .vep-card, #vep .vep-arrow { transition: none; }
  #vep { transform: none; }
  #vep.vep-is-live .vep-dot { animation: none; }
}
@media print { #vep { display: none !important; } }