/* ===========================================================================
   events/rsvp-modal.css - the RSVP modal (native <dialog>) chrome.
   The form-field system inside it lives in rsvp-form.css.
   =========================================================================== */

.rsvp-modal {
  width: min(560px, 94vw);
  max-height: 90vh;
  margin: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.rsvp-modal:not([open]) { display: none; }
.rsvp-modal::backdrop {
  background: rgba(5, 5, 7, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Entrance animation - a transient class (added on open, removed on its own
   animationend) so it never replays when other modal classes change. */
.rsvp-modal.is-opening { animation: rsvp-modal-in 0.4s var(--ease-out); }
@keyframes rsvp-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* Backdrop click nudges the modal (a soft pulse) and flashes the close
   button, rather than dismissing - the visitor must use the X or Esc. */
.rsvp-modal.is-nudge { animation: rsvp-modal-nudge 0.4s var(--ease); }
.rsvp-modal.is-nudge .rsvp-modal__close { animation: rsvp-close-flash 0.4s var(--ease); }
@keyframes rsvp-modal-nudge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.02); }
  70%  { transform: scale(0.996); }
  100% { transform: scale(1); }
}
@keyframes rsvp-close-flash {
  0%, 100% { border-color: var(--line); color: var(--text-dim); }
  40%      { border-color: var(--brand); color: var(--brand); }
}

/* --- Head --------------------------------------------------------------- */
.rsvp-modal__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--line);
}
.rsvp-modal__event {
  margin-top: 0.3rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.rsvp-modal__close {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.rsvp-modal__close:hover { color: var(--text); border-color: var(--line-strong); }

/* --- Body (scrolls) ----------------------------------------------------- */
.rsvp-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.6rem;
}

/* --- "Before you RSVP" block -------------------------------------------- */
.rsvp-waiver {
  margin-top: 1.5rem;
  padding: 1.2rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.rsvp-waiver__head { margin-bottom: 0.85rem; }
.rsvp-waiver__text {
  max-height: 9rem;
  overflow-y: auto;
  margin-bottom: 0.9rem;
  padding-right: 0.6rem;
}
.rsvp-waiver__text p {
  font-family: var(--font-secondary);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.rsvp-waiver__text p + p { margin-top: 0.6rem; }
.rsvp-waiver__note {
  font-family: var(--font-secondary);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-faint);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 480px) {
  .rsvp-modal { max-height: 94vh; }
  .rsvp-modal__head,
  .rsvp-modal__body { padding-inline: 1.2rem; }
}