/* ============================================================
   Shared RSVP widget — used by /risala and the /events modal.
   Couple/group friendly (men + women in one order), with a
   live "spots left" per group. Scoped .usef-rsvp-* classes.
   Navy/red USEF theme via the global CSS variables.
   ============================================================ */
.usef-rsvp-form { display:flex; flex-direction:column; gap:1.25rem; }

/* Optional "log in to track your RSVP" nudge */
.usef-rsvp-nudge {
  display:flex; align-items:center; gap:.85rem;
  background:linear-gradient(135deg,#eef2fb,#e5ecf9);
  border:1px solid var(--border); border-radius:12px; padding:.8rem 1rem;
}
.usef-rsvp-nudge-ic { font-size:1.4rem; line-height:1; }
.usef-rsvp-nudge-txt { flex:1; font-size:.85rem; color:var(--text-mid); line-height:1.45; }
.usef-rsvp-nudge-txt strong { color:var(--green-dark); }
.usef-rsvp-nudge-btn {
  flex:none; background:var(--green-dark); color:#fff; padding:.5rem .95rem;
  border-radius:8px; font-weight:700; font-size:.85rem; text-decoration:none; white-space:nowrap;
}
.usef-rsvp-nudge-btn:hover { background:#152747; }

/* Attendee steppers */
.usef-rsvp-heading { font-weight:700; color:var(--green-dark); font-size:.98rem; margin-bottom:.6rem; }
.usef-rsvp-heading em { font-style:normal; font-weight:500; color:var(--text-mid); font-size:.85rem; }
.usef-rsvp-steppers { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.usef-rsvp-stepper {
  border:1.5px solid var(--border); border-radius:14px; padding:1rem 1.1rem; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.usef-rsvp-stepper:hover { border-color:var(--green-dark); box-shadow:0 3px 12px rgba(29,52,97,.08); }
.usef-rsvp-stepper.is-full { opacity:.6; }
.usef-rsvp-stepper-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.usef-rsvp-stepper-label { font-weight:700; color:var(--green-dark); font-size:1.05rem; }
.usef-rsvp-left {
  font-size:.72rem; font-weight:800; letter-spacing:.02em; color:#047857; background:#ecfdf5;
  border-radius:20px; padding:.2rem .6rem;
}
.usef-rsvp-left.is-full { color:#b91c1c; background:#fef2f2; }
.usef-rsvp-stepper-ctrl { display:flex; align-items:center; justify-content:space-between; }
.usef-rsvp-step {
  width:42px; height:42px; border-radius:50%; border:none; background:var(--green-dark); color:#fff;
  font-size:1.5rem; line-height:1; cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center; transition:transform .1s, background .15s;
}
.usef-rsvp-step:hover:not(:disabled) { transform:scale(1.08); }
.usef-rsvp-step:disabled { background:#cdd6f0; cursor:not-allowed; }
.usef-rsvp-val { font-size:1.6rem; font-weight:800; color:var(--green-dark); min-width:2ch; text-align:center; }
.usef-rsvp-total { text-align:center; font-size:.9rem; color:var(--text-mid); min-height:1.2em; }
.usef-rsvp-total strong { color:var(--green-dark); }

/* Text fields */
.usef-rsvp-fields { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.usef-rsvp-fields .usef-rsvp-field:first-child { grid-column:1 / -1; }
.usef-rsvp-field { display:flex; flex-direction:column; }
.usef-rsvp-field label { font-size:.8rem; font-weight:700; color:var(--green-dark); margin-bottom:.35rem; }
.usef-rsvp-field label span { color:var(--green-mid); }
.usef-rsvp-field label em { font-style:normal; font-weight:500; color:var(--text-mid); }
.usef-rsvp-field input {
  padding:.72rem .85rem; border:1px solid var(--border); border-radius:9px; font-size:1rem;
  font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
.usef-rsvp-field input:focus { outline:none; border-color:var(--green-dark); box-shadow:0 0 0 3px rgba(29,52,97,.13); }

/* Submit + status */
.usef-rsvp-submit {
  width:100%; padding:.95rem; border:none; border-radius:10px; color:#fff;
  background:linear-gradient(135deg,var(--green-dark),#2a4576);
  font-size:1.05rem; font-weight:700; cursor:pointer; font-family:inherit;
  transition:transform .1s, box-shadow .2s; box-shadow:0 4px 14px rgba(29,52,97,.25);
}
.usef-rsvp-submit:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 18px rgba(29,52,97,.32); }
.usef-rsvp-submit:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.usef-rsvp-status { font-weight:600; font-size:.9rem; }
.usef-rsvp-status.is-error { color:#b91c1c; }

/* Success state */
.usef-rsvp-success { text-align:center; padding:1.75rem .5rem 1rem; animation:usefRsvpPop .3s ease; }
.usef-rsvp-success-ic {
  width:62px; height:62px; border-radius:50%; background:#059669; color:#fff; font-size:2rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
}
.usef-rsvp-success h4 { color:var(--green-dark); font-size:1.45rem; margin:0 0 .5rem; }
.usef-rsvp-success p { color:var(--text-mid); margin:.3rem 0; line-height:1.5; }
.usef-rsvp-success-sub { font-size:.86rem; }
@keyframes usefRsvpPop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }

/* Named roster (gender-split events) */
.usef-rsvp-person { border:1.5px solid var(--border); border-radius:14px; padding:1rem 1.1rem; position:relative; }
.usef-rsvp-person + .usef-rsvp-person { margin-top:.75rem; }
.usef-rsvp-person-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.65rem; }
.usef-rsvp-person-tag { font-size:.72rem; font-weight:800; letter-spacing:.03em; color:var(--green-dark); background:var(--bg-light); border-radius:20px; padding:.2rem .7rem; }
.usef-rsvp-remove { border:none; background:transparent; color:var(--text-mid); font-size:1.5rem; line-height:1; cursor:pointer; padding:0 .2rem; }
.usef-rsvp-remove:hover { color:var(--green-mid); }
.usef-rsvp-person-grid { display:grid; grid-template-columns:1fr auto; gap:.6rem; }
.usef-rsvp-person-grid input { padding:.6rem .75rem; border:1px solid var(--border); border-radius:8px; font-size:.95rem; font-family:inherit; }
.usef-rsvp-person-grid input:focus { outline:none; border-color:var(--green-dark); box-shadow:0 0 0 3px rgba(29,52,97,.12); }
.usef-rsvp-person-grid input[data-f="email"], .usef-rsvp-person-grid input[data-f="phone"] { grid-column:1 / -1; }
.usef-rsvp-gt { display:flex; gap:.35rem; flex-wrap:wrap; min-width:0; }
.usef-rsvp-gt button { padding:.55rem .85rem; border:1.5px solid var(--border); background:#fff; color:var(--green-dark); border-radius:8px; font-weight:700; font-size:.9rem; cursor:pointer; font-family:inherit; }
.usef-rsvp-gt button.is-on { background:var(--green-dark); color:#fff; border-color:var(--green-dark); }

.usef-rsvp-add { width:100%; margin-top:.75rem; padding:.7rem; border:1.5px dashed var(--border); background:transparent; color:var(--green-dark); border-radius:10px; font-weight:700; font-size:.92rem; cursor:pointer; font-family:inherit; }
.usef-rsvp-add:hover { border-color:var(--green-dark); background:var(--bg-light); }
.usef-rsvp-add i { font-style:normal; }

/* Under the form: one encouraging line, or a specific seat warning when the group
   will not fit. It used to be a running "0 of 25 · 25 left" tally, which announced
   an empty room to every visitor. */
.usef-rsvp-counter { display:flex; align-items:center; justify-content:center; gap:.6rem; font-size:.9rem; color:var(--green-dark); font-weight:600; flex-wrap:wrap; text-align:center; line-height:1.45; min-height:1.3rem; }
.usef-rsvp-counter .over { color:var(--gold); }
.usef-rsvp-counter-sep { color:var(--border); }

.usef-rsvp-chips-label { font-size:.8rem; color:var(--text-mid); margin-bottom:.4rem; }
.usef-rsvp-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.usef-rsvp-chip { border:1px solid var(--green-dark); background:var(--bg-light); color:var(--green-dark); border-radius:20px; padding:.4rem .8rem; font-size:.85rem; font-weight:700; cursor:pointer; font-family:inherit; }
.usef-rsvp-chip span { font-weight:500; opacity:.7; font-size:.78rem; }
.usef-rsvp-chip:hover { background:var(--green-dark); color:#fff; }
.usef-rsvp-chip:hover span { color:#fff; opacity:.85; }

.usef-rsvp-save { margin-top:1.25rem; padding:1.1rem 1.2rem; border:1px solid var(--border); background:var(--bg-light); border-radius:12px; font-size:.9rem; color:var(--text-mid); line-height:1.5; text-align:center; }
.usef-rsvp-save strong { color:var(--green-dark); }
.usef-rsvp-save-btns { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:.9rem; }
.usef-rsvp-save-skip { border:none; background:transparent; color:var(--text-mid); text-decoration:underline; cursor:pointer; font-size:.88rem; font-family:inherit; }

@media (max-width:520px) {
  .usef-rsvp-steppers { grid-template-columns:1fr; }
  .usef-rsvp-fields { grid-template-columns:1fr; }
  .usef-rsvp-nudge { flex-wrap:wrap; }
  /* ⛔ `minmax(0,1fr)`, NOT `1fr`. `1fr` is shorthand for `minmax(auto, 1fr)`,
     and that `auto` floors the column at its content's max-content width — here
     the 198px of the Man and Woman buttons side by side, inside a 163px box. So
     this rule stacked the row correctly and the row STILL ran 17px off the edge
     of a 320px phone, which is why an element screenshot looked perfect and only
     the box's own scrollWidth showed it. */
  .usef-rsvp-person-grid { grid-template-columns:minmax(0,1fr); }
  .usef-rsvp-gt button { flex:1 1 auto; min-width:0; }
}