/* ==========================================================================
   Live session invite (Zoom, Sun Nov 1, 1pm ET). A slide-in card, bottom right.
   Shown by live.js only until the session ends, then it removes itself.
   ========================================================================== */
.live-card {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: #171523;
  color: #F3EFE7;
  box-shadow: 0 24px 60px -20px rgba(23, 21, 35, .7), 0 0 0 1px rgba(185, 173, 255, .18);
  font-family: var(--sans, system-ui, sans-serif);
  transform: translateY(24px);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.live-card[hidden] { display: none; }
.live-card.is-in { transform: none; opacity: 1; }
body.has-deal .live-card { bottom: 96px; }

.live-x {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px;
  background: transparent; color: rgba(243, 239, 231, .55);
  font-size: 20px; line-height: 30px; cursor: pointer;
}
.live-x:hover { background: rgba(243, 239, 231, .08); color: #F3EFE7; }

.live-tag {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #B9ADFF;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #B9ADFF; flex: none; }
.live-card.is-live .live-tag { color: #FF8A8A; }
.live-card.is-live .live-dot { background: #FF5A5A; animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, .6); } 50% { box-shadow: 0 0 0 6px rgba(255, 90, 90, 0); } }

.live-h {
  margin: 0 0 6px; padding-right: 22px;
  font-family: var(--display, Georgia, serif);
  font-size: 1.35rem; font-weight: 500; line-height: 1.2; color: #fff;
}
.live-p { margin: 0 0 12px; font-size: .93rem; line-height: 1.5; color: rgba(243, 239, 231, .78); }
.live-when {
  margin: 0 0 14px; padding: 9px 12px;
  border-radius: 10px;
  background: rgba(243, 239, 231, .06);
  border: 1px solid rgba(243, 239, 231, .1);
  font-size: .9rem; line-height: 1.4;
}
.live-when b { display: block; color: #fff; }
.live-when span { color: rgba(243, 239, 231, .6); font-size: .84rem; }
.live-when span:empty { display: none; }

.live-go {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px 16px;
  border-radius: 10px;
  background: var(--amethyst, #6A55E8); color: #fff;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: background .15s ease;
}
.live-go:hover { background: var(--amethyst-deep, #5B48D6); }
.live-cal {
  display: block; margin: 10px 0 0;
  text-align: center; font-size: .84rem;
  color: rgba(243, 239, 231, .6); text-decoration: underline; text-underline-offset: 3px;
}
.live-cal:hover { color: #F3EFE7; }
.live-card.is-live .live-cal { display: none; }

/* Halloween skin: orange accents while it runs */
html.hw .live-card { box-shadow: 0 24px 60px -20px rgba(23, 21, 35, .7), 0 0 0 1px rgba(255, 122, 26, .4); }
html.hw .live-card:not(.is-live) .live-tag { color: #FF9A4A; }
html.hw .live-card:not(.is-live) .live-dot { background: #FF9A4A; }

@media (max-width: 640px) {
  /* Slimmer on phones: no paragraph, button and calendar link side by side. */
  .live-card { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 13px 14px 14px; border-radius: 14px;
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
  body.has-deal .live-card { bottom: 116px; }
  .live-x { top: 6px; right: 6px; }
  .live-tag, .live-h, .live-when, .live-p { grid-column: 1 / -1; }
  .live-tag { margin-bottom: 4px; }
  .live-h { font-size: 1.12rem; margin-bottom: 8px; }
  .live-p { display: none; }
  .live-card.is-live .live-p { display: block; font-size: .88rem; margin-bottom: 10px; }
  .live-when { margin-bottom: 10px; padding: 7px 10px; font-size: .86rem; }
  .live-when span { font-size: .8rem; }
  .live-go { padding: 10px 14px; font-size: .95rem; }
  .live-cal { margin: 0; font-size: .82rem; }
  .live-card.is-live .live-go { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .live-card { transition: none; }
  .live-card.is-live .live-dot { animation: none; }
}