/* Wedding RSVP — styles
   All selectors prefixed rsvp- to avoid theme conflicts.    */

#rsvp-app {
  max-width: 620px;
  margin: 0 auto;
  font-family: inherit;
}

/* Step transitions */
#rsvp-step-search,
#rsvp-step-form,
#rsvp-step-confirm {
  animation: rsvpFade 0.3s ease;
}
@keyframes rsvpFade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Search step ─────────────────────────────────────────── */
.rsvp-intro {
  margin: 0 0 1rem;
  color: #555;
  text-align: center;
}
.rsvp-search-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Base input ──────────────────────────────────────────── */
.rsvp-input {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.rsvp-input:focus {
  outline: none;
  border-color: #777;
}

/* ── Buttons ─────────────────────────────────────────────── */
.rsvp-btn {
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.rsvp-btn:disabled { opacity: 0.55; cursor: default; }

.rsvp-btn-primary {
  background: #2c2c2c;
  color: #fff;
  border-color: #2c2c2c;
}
.rsvp-btn-primary:hover:not(:disabled) { background: #444; }

.rsvp-btn-secondary {
  background: transparent;
  color: #555;
  border-color: #ccc;
}
.rsvp-btn-secondary:hover:not(:disabled) { background: #f5f5f5; }

/* ── Banners ─────────────────────────────────────────────── */
.rsvp-error {
  color: #922;
  font-size: 14px;
  margin: 10px 0 0;
  padding: 10px 14px;
  background: #fdf0ef;
  border-left: 3px solid #c44;
  border-radius: 4px;
}
.rsvp-already-banner {
  background: #fef9e7;
  border-left: 3px solid #e0b840;
  color: #7a6100;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 1.25rem;
}

/* ── Party header ────────────────────────────────────────── */
.rsvp-party-header { margin-bottom: 1.25rem; }
.rsvp-party-name   { margin: 0 0 4px; font-size: 1.3rem; }
.rsvp-party-sub    { margin: 0; color: #777; font-size: 14px; }

/* ── Guest cards ─────────────────────────────────────────── */
.rsvp-guest-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 1.5rem;
}
.rsvp-guest-card {
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: opacity 0.2s, border-color 0.15s;
}
.rsvp-guest-card.rsvp-card-declined { opacity: 0.45; }
.rsvp-guest-card.rsvp-card-error    { border-color: #c44; background: #fdf6f6; }

.rsvp-guest-name {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
}

/* ── Attending toggle ────────────────────────────────────── */
.rsvp-attend-row {
  display: flex;
  width: fit-content;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
}
.rsvp-toggle-btn {
  padding: 8px 18px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: #fff;
  color: #555;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.rsvp-toggle-btn + .rsvp-toggle-btn { border-left: 1px solid #ccc; }
.rsvp-toggle-btn:hover               { background: #f5f5f5; }

.rsvp-yes-btn.active { background: #d4edda; color: #155724; font-weight: 500; }
.rsvp-no-btn.active  { background: #f8d7da; color: #721c24; font-weight: 500; }

/* ── Events section ──────────────────────────────────────── */
.rsvp-events-wrap    { margin-bottom: 14px; }
.rsvp-hidden         { display: none; }
.rsvp-events-heading { margin: 0 0 10px; font-size: 14px; color: #444; }

.rsvp-event-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rsvp-event-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rsvp-event-pill:has(input:checked) {
  background: #eef4ff;
  border-color: #9ab4e8;
  color: #1a3a7a;
}
.rsvp-event-pill input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #2c5fcc;
  flex-shrink: 0;
}

/* ── Dietary input ───────────────────────────────────────── */
.rsvp-dietary {
  width: 100%;
  font-size: 14px;
  padding: 8px 12px;
  margin-top: 2px;
}

/* ── Form footer ─────────────────────────────────────────── */
.rsvp-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

/* ── Confirmation ────────────────────────────────────────── */
.rsvp-confirm-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}
.rsvp-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #d4edda;
  color: #155724;
  font-size: 22px;
  margin-bottom: 1rem;
}
.rsvp-confirm-heading { margin: 0 0 0.5rem; font-size: 1.3rem; }
#rsvp-confirm-msg     { color: #555; margin: 0; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .rsvp-search-row     { flex-direction: column; }
  .rsvp-form-footer    { flex-direction: column-reverse; }
  .rsvp-btn            { width: 100%; text-align: center; }
  .rsvp-attend-row     { width: 100%; }
  .rsvp-toggle-btn     { flex: 1; text-align: center; }
  .rsvp-event-pills    { flex-direction: column; }
  .rsvp-event-pill     { width: 100%; box-sizing: border-box; }
}