/* =============================================================
   "Send a message" popup
   -------------------------------------------------------------
   Opened from the spotlight player's "Send a message" CTA. Reuses
   the .vpop-backdrop / .vpop-card / .vpop-close / .vpop-label /
   .vpop-actions / .vpop-send / .vpop-msg chrome from vote-popup.css
   (already loaded on every page this popup appears on) so it matches
   the vote popup's look. Only the form-field styles live here.
   Built + controlled by message-popup.js.
   ============================================================= */

.mpop-title {
  margin: 0 0 1.25rem;
  padding-right: 1.5rem;
  font-size: clamp(1.15rem, 3.2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.3;
  color: #1a1a1a;
}

.mpop-field {
  margin-bottom: 1.1rem;
}

.mpop-field-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.45rem;
}

.mpop-required {
  color: #c0392b;
  margin-left: 0.15rem;
}

.mpop-input,
.mpop-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #d0d0d6;
  border-radius: 10px;
  background: #f3f3f5;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mpop-input::placeholder,
.mpop-textarea::placeholder {
  color: #9a9aa2;
}

.mpop-input:focus,
.mpop-textarea:focus {
  border-color: #7b5ba1;
  background: #ffffff;
}

.mpop-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.mpop-charcount {
  margin-top: 0.4rem;
  text-align: right;
  font-size: 0.78rem;
  color: #9a9aa2;
}

.mpop-charcount.is-over {
  color: #c0392b;
  font-weight: 700;
}

/* Turnstile widget row — Cloudflare renders its own bordered widget at a
   fixed size, so this wrapper stays unstyled beyond centering it on narrow
   cards. Reuses .vpop-captcha-loading (vote-popup.css) for the fallback
   placeholder shown until the widget mounts. */
.mpop-field--captcha {
  display: flex;
  justify-content: center;
}