/* ─── RSVP Section ──────────────────────────────────────────── */
.rsvp {
  padding: var(--space-12) var(--space-3);
}

.rsvp .section-heading h2 {
  color: var(--champagne);
}

.rsvp .divider {
  background: var(--champagne-dark);
}

.rsvp__text {
  font-size: var(--text-lg);
  color: var(--champagne);
  opacity: 0.85;
  margin-bottom: var(--space-3);
  line-height: 1.8;
}

.rsvp__deadline {
  font-size: var(--text-sm);
  color: var(--champagne-dark);
  margin-bottom: var(--space-6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ─── Step system ───────────────────────────────────────────── */
.rsvp-step {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo);
  pointer-events: none;
}

.rsvp-step[hidden] {
  display: none;
}

.rsvp-step--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ─── Shared button ─────────────────────────────────────────── */
.rsvp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.rsvp__btn--primary {
  background: var(--champagne);
  color: var(--black);
  border-color: var(--champagne);
}

.rsvp__btn--primary:hover,
.rsvp__btn--primary:active {
  background: var(--champagne-dark);
  border-color: var(--champagne-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(247, 231, 206, 0.3);
}

.rsvp__btn--secondary {
  background: transparent;
  color: var(--champagne);
  border-color: rgba(247, 231, 206, 0.4);
}

.rsvp__btn--secondary:hover,
.rsvp__btn--secondary:active {
  background: rgba(247, 231, 206, 0.08);
  border-color: var(--champagne);
  transform: translateY(-2px);
}

.rsvp__btn--ghost {
  background: transparent;
  color: rgba(247, 231, 206, 0.5);
  border-color: transparent;
  font-size: 0.68rem;
}

.rsvp__btn--ghost:hover,
.rsvp__btn--ghost:active {
  color: var(--champagne);
}

.rsvp__btn--full {
  width: 100%;
}

/* ─── Field base ────────────────────────────────────────────── */
.rsvp__field {
  margin-bottom: var(--space-2);
}

.rsvp__input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(247, 231, 206, 0.2);
  border-radius: 2px;
  color: var(--champagne);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.rsvp__input::placeholder {
  color: rgba(247, 231, 206, 0.3);
}

.rsvp__input:focus {
  outline: none;
  border-color: var(--champagne-dark);
  background: rgba(255, 255, 255, 0.09);
}

.rsvp__input--error {
  border-color: #e07070 !important;
  animation: inputShake 0.35s var(--ease-out-quart);
}

@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}

/* ─── Phone prefix wrap ─────────────────────────────────────── */
.rsvp-phone-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(247, 231, 206, 0.2);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  transition: border-color var(--transition-fast);
}

.rsvp-phone-wrap:focus-within {
  border-color: var(--champagne-dark);
}

.rsvp-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--champagne-dark);
  background: rgba(247, 231, 206, 0.06);
  border-right: 1px solid rgba(247, 231, 206, 0.15);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.rsvp__input--phone {
  border: none;
  background: transparent;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.rsvp__input--phone:focus {
  background: transparent;
  border-color: transparent;
}

/* ─── Step 1: Lookup ────────────────────────────────────────── */
.rsvp-lookup__card {
  max-width: 340px;
  margin: 0 auto;
}

.rsvp-lookup__hint {
  color: var(--champagne);
  opacity: 0.8;
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  line-height: 1.6;
}

.rsvp-lookup__note {
  font-size: var(--text-xs);
  color: rgba(247, 231, 206, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-3);
  margin-top: -0.5rem;
}

.rsvp-lookup__error {
  color: #e09090;
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rsvp-lookup__error--visible {
  opacity: 1;
}

/* ─── Step 2: Found ─────────────────────────────────────────── */
.rsvp-step--found {
  position: relative;
  overflow: hidden;
  padding: var(--space-3) 0;
}

.rsvp-found__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.rsvp-found__icon {
  font-size: 3rem;
  margin-bottom: var(--space-2);
  animation: iconBounce 0.6s var(--ease-out-expo);
  display: block;
}

@keyframes iconBounce {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.rsvp-found__greeting {
  font-family: var(--font-names);
  font-size: var(--text-2xl);
  color: var(--champagne);
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.rsvp-found__seats {
  font-size: var(--text-base);
  color: var(--champagne-dark);
  opacity: 0.9;
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.rsvp-found__divider {
  width: 40px;
  height: 1px;
  background: rgba(247, 231, 206, 0.2);
  margin: var(--space-3) auto;
}

.rsvp-found__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 280px;
  margin: 0 auto;
}

/* ─── Step 3: Guest form ────────────────────────────────────── */
.rsvp-form__intro {
  color: var(--champagne);
  opacity: 0.8;
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.rsvp-guests {
  max-width: 400px;
  margin: 0 auto var(--space-4);
  text-align: left;
}

.rsvp-guest-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(247, 231, 206, 0.1);
  border-radius: 4px;
  padding: var(--space-2) var(--space-2);
  margin-bottom: var(--space-2);
  transition: border-color var(--transition-fast);
}

.rsvp-guest-row:focus-within {
  border-color: rgba(247, 231, 206, 0.25);
}

.rsvp-guest-row__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-1);
}

.rsvp-guest-row__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(247, 231, 206, 0.12);
  border: 1px solid rgba(247, 231, 206, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--champagne-dark);
  flex-shrink: 0;
}

.rsvp-guest-row__label {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(247, 231, 206, 0.5);
}

.rsvp-guest-row__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rsvp-guest-row .rsvp__field {
  margin-bottom: 0;
}

.rsvp-form__actions {
  max-width: 340px;
  margin: 0 auto;
}

/* ─── Optional note inside RSVP form ───────────────────────── */
.rsvp-note-wrap {
  border-top: 1px solid rgba(247, 231, 206, 0.1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.rsvp-note__header {
  margin-bottom: var(--space-1);
  text-align: left;
}

.rsvp-note__label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(247, 231, 206, 0.5);
}

.rsvp-note__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(247, 231, 206, 0.3);
  font-style: italic;
}

.rsvp-note__textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

/* ─── Step 4: Success ───────────────────────────────────────── */
.rsvp-step--success,
.rsvp-step--declined {
  position: relative;
  padding: var(--space-4) 0;
  overflow: hidden;
}

.rsvp-success__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.rsvp-success__icon {
  margin-bottom: var(--space-3);
  animation: successPop 0.7s var(--ease-out-expo) forwards;
}

@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  65%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.rsvp-step--success h3 {
  font-family: var(--font-names);
  font-size: var(--text-2xl);
  color: var(--champagne);
  margin-bottom: var(--space-2);
}

.rsvp-step--success p,
.rsvp-step--declined p {
  color: var(--champagne-dark);
  opacity: 0.85;
  font-size: var(--text-base);
  line-height: 1.7;
}

.rsvp-step--declined h3 {
  font-family: var(--font-names);
  font-size: var(--text-2xl);
  color: var(--champagne);
  margin-bottom: var(--space-2);
}

.rsvp-success__note {
  font-size: var(--text-xs);
  color: rgba(247, 231, 206, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: var(--space-2);
}

/* ─── Confetti keyframe ─────────────────────────────────────── */
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(280px) rotate(720deg); opacity: 0; }
}

/* ─── Footer ────────────────────────────────────────────────── */
.footer {
  padding: var(--space-6) var(--space-3);
}

.footer__names {
  font-size: var(--text-2xl);
  color: var(--champagne);
  margin-bottom: var(--space-1);
}

.footer__names .font-script {
  font-size: 1.2em;
  margin: 0 var(--space-1);
}

.footer__date {
  font-size: var(--text-sm);
  color: var(--champagne-dark);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-3);
}

.footer__heart {
  margin-bottom: var(--space-2);
}

.footer__made {
  color: var(--champagne-dark);
}