/* InviteNoma — анкета гостя (RSVP) */

.rsvp { display: grid; gap: var(--sp-6); }
.rsvp__card {
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  position: relative;
  overflow: hidden;
}
.rsvp__card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

/* Без явной ширины колонки грид считает её по содержимому — а маска
   телефона "+998 __ ____ __ __" не переносится и раздувала колонку
   шире самой карточки. minmax(0, 1fr) — колонка ровно по контейнеру,
   что бы внутри ни лежало. */
.form-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-field--wide { grid-column: 1 / -1; }
}

.form-field { display: grid; gap: var(--sp-2); }
.form-field label {
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-mute);
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: var(--sp-4);
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--c-gold);
  background: var(--c-paper);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-gold) 16%, transparent);
}
.form-field textarea { min-height: 128px; resize: vertical; }
.form-field__error {
  font-size: var(--fs-micro); color: #B0453F; min-height: 1em;
}
.form-field.is-invalid input,
.form-field.is-invalid textarea { border-color: #B0453F; }

/* приду / не приду */
.attend {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3);
}
.attend input { position: absolute; opacity: 0; pointer-events: none; }
.attend label {
  display: grid; gap: var(--sp-2); justify-items: center; text-align: center;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-transform: none; letter-spacing: 0;
  font-size: var(--fs-body); color: var(--c-ink);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--e-out);
}
.attend label svg { width: 26px; height: 26px; color: var(--c-ink-mute); transition: color var(--t-fast); }
.attend label:hover { transform: translateY(-2px); }
.attend input:checked + label {
  border-color: var(--c-gold);
  background: color-mix(in srgb, var(--c-gold) 10%, transparent);
}
.attend input:checked + label svg { color: var(--c-gold-deep); }
.attend input:focus-visible + label { outline: 2px solid var(--c-gold-deep); outline-offset: 3px; }

/* счётчик гостей */
.stepper {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 4px;
  background: var(--c-cream);
  width: fit-content;
}
.stepper button {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-ink-soft);
  transition: background var(--t-fast), color var(--t-fast);
}
.stepper button:hover { background: var(--c-champagne); color: var(--c-ink); }
.stepper output {
  min-width: 44px; text-align: center;
  font-family: var(--f-display); font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

/* honeypot против ботов */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.rsvp__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-6);
}
.rsvp__deadline { font-size: var(--fs-small); color: var(--c-ink-mute); }

/* состояние отправки */
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* успех */
.rsvp__done {
  display: none;
  text-align: center;
  padding: clamp(2rem, 6vw, 3.5rem) var(--sp-5);
  gap: var(--sp-4);
  justify-items: center;
}
.rsvp.is-done .rsvp__form { display: none; }
.rsvp.is-done .rsvp__done { display: grid; animation: fadeUp .8s var(--e-out) both; }
.rsvp__done-mark {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-gold) 16%, transparent);
  color: var(--c-gold-deep);
}
.rsvp__done-mark svg { width: 34px; height: 34px; }
.rsvp__done-mark svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: strokeDone .7s var(--e-out) .25s forwards; }
@keyframes strokeDone { to { stroke-dashoffset: 0; } }
.rsvp__done-title { font-family: var(--f-display); font-size: var(--fs-h2); }
.rsvp__done-text { color: var(--c-ink-soft); max-width: 46ch; }

.form-note {
  font-size: var(--fs-micro); color: var(--c-ink-mute);
  display: flex; align-items: center; gap: var(--sp-2);
}