/* =============================================================
   Vote verification popup
   -------------------------------------------------------------
   Shared modal that opens whenever any "Vote" button is clicked
   (leaderboard rows + spotlight "Vote on website"). White card
   over a dimmed backdrop — matches the provided mockup.
   Built + controlled by vote-popup.js.
   ============================================================= */

.vpop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(6, 6, 12, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.vpop-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}

.vpop-backdrop[hidden] {
  display: none;
}

.vpop-card {
  position: relative;
  width: min(600px, 100%);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 18px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  font-family: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
}

.vpop-backdrop.is-open .vpop-card {
  transform: none;
}

/* Close (X) button */
.vpop-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #6b6b73;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.vpop-close:hover {
  background: #f0f0f2;
  color: #1a1a1a;
}

.vpop-close svg {
  width: 18px;
  height: 18px;
}

/* Top row: captcha (left) + reside checkbox (right) */
.vpop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.vpop-cell {
  display: flex;
  align-items: center;
  min-height: 78px;
  border: 1px solid #dcdce2;
  border-radius: 10px;
  background: #fbfbfc;
}

.vpop-cell--captcha {
  flex: 0 0 auto;
  padding: 0.35rem;
  border: none;
  background: transparent;
  min-height: 0;
}

/* Cloudflare Turnstile renders its own bordered widget, so the cell
   wrapper stays borderless to avoid a double frame. */
.vpop-cell--reside {
  flex: 1 1 200px;
  padding: 0.75rem 1rem;
}

.vpop-reside {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
}

.vpop-reside input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: #111111;
  cursor: pointer;
}

/* Fallback placeholder shown until Turnstile mounts */
.vpop-captcha-loading {
  display: inline-flex;
  align-items: center;
  min-width: 260px;
  min-height: 65px;
  padding: 0 1rem;
  border: 1px solid #dcdce2;
  border-radius: 8px;
  color: #8a8a92;
  font-size: 0.85rem;
}

.vpop-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.55rem;
}

.vpop-email {
  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;
}

.vpop-email::placeholder {
  color: #9a9aa2;
}

.vpop-email:focus {
  border-color: #7b5ba1;
  background: #ffffff;
}

/* "Why do we ask for your email?" toggle + revealed copy */
.vpop-why {
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  color: #5a5a63;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.vpop-why:hover {
  color: #111111;
  text-decoration: underline;
}

.vpop-why svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.vpop-why__body {
  margin-top: 0.55rem;
  color: #5a5a63;
  font-size: 0.88rem;
  line-height: 1.55;
}

.vpop-why__body[hidden] {
  display: none;
}

.vpop-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.vpop-send {
  padding: 0.85rem 2.6rem;
  border: none;
  border-radius: 10px;
  background: #5a5a63;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.vpop-send:not(:disabled):hover {
  background: #3f3f47;
}

.vpop-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vpop-msg {
  margin-top: 0.85rem;
  min-height: 1.2em;
  text-align: center;
  font-size: 0.9rem;
}

.vpop-msg.is-error {
  color: #c0392b;
}

.vpop-msg.is-info {
  color: #2d7a3a;
}

/* --- Returning-link confirmation card --- */
.vpop-card--confirm {
  width: min(460px, 100%);
  text-align: center;
}

.vpop-confirm-title {
  margin: 0 0 0.75rem;
  padding-right: 1.5rem;
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
  font-weight: 800;
  color: #1a1a1a;
}

.vpop-confirm-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #45454d;
}

.vpop-confirm-body strong {
  color: #1a1a1a;
}

.vpop-card--confirm .vpop-send {
  background: #9d71f6;
}

.vpop-card--confirm .vpop-send:not(:disabled):hover {
  background: #8657ec;
}

/* --- Post-confirmation success state (thank-you + Instagram follow-up) --- */
.vpop-confirm-success[hidden] {
  display: none;
}

/* Once voted, collapse the confirm CTA + status line so the success panel
   sits directly under the thank-you copy (no leftover gap). */
.vpop-card--confirm.is-voted .vpop-actions,
.vpop-card--confirm.is-voted .vpop-msg {
  display: none;
}

/* Request popup: "already voted today" Instagram nudge, shown under the
   status message. Reuses the .vpop-confirm-cols / .vpop-hashtag / .vpop-ig-btn
   styles from the confirm card. */
.vpop-igfollow {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid #e6e6ea;
  text-align: center;
}

.vpop-igfollow[hidden] {
  display: none;
}

.vpop-igfollow-copy {
  margin: 0;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  font-weight: 800;
  line-height: 1.4;
  color: #1a1a1a;
}

.vpop-confirm-ig {
  margin: 1.6rem 0 0;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 800;
  line-height: 1.4;
  color: #1a1a1a;
}

.vpop-confirm-cols {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem 1.25rem;
}

.vpop-confirm-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  /* Equal-width columns so the hashtag pill and "Go to post" button always
     match, no matter how short the hashtag is. Capped so each button lands at
     roughly the "Email me my vote link" CTA width. */
  flex: 1 1 160px;
  min-width: 0;
  max-width: 230px;
}

/* Both buttons fill their (equal-width) column. Kept slimmer than the primary
   CTA (.vpop-send) so they don't visually overpower it. */
.vpop-confirm-col .vpop-hashtag,
.vpop-confirm-col .vpop-ig-btn {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  /* Pin line-height on both: the <a> "Go to post" would otherwise inherit the
     body's 1.6 while the <button> hashtag uses the UA's ~1.2, making the two
     buttons different heights. An explicit value keeps them identical. */
  line-height: 1.4;
}

.vpop-confirm-col[hidden] {
  display: none;
}

.vpop-confirm-col-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b6b73;
}

/* Hashtag pill (copy on click) — mirrors the leaderboard hashtag button */
.vpop-hashtag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0.8rem 1.6rem;
  border: 1.5px solid #d0d0d6;
  border-radius: 12px;
  background: #ffffff;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.vpop-hashtag__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vpop-hashtag:hover {
  border-color: #b4b4bd;
  background: #fbfbfc;
}

.vpop-hashtag:active {
  transform: scale(0.97);
}

.vpop-hashtag.is-copied {
  background: #9d71f6;
  border-color: #9d71f6;
  color: #ffffff;
}

/* Tooltip bubble driven by data-tip */
.vpop-hashtag::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: #111015;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.vpop-hashtag::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: #111015;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.vpop-hashtag:hover::after,
.vpop-hashtag:focus-visible::after,
.vpop-hashtag.is-copied::after,
.vpop-hashtag:hover::before,
.vpop-hashtag:focus-visible::before,
.vpop-hashtag.is-copied::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* "Go to post" — solid black button */
.vpop-ig-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  border: 1.5px solid #111111;
  border-radius: 12px;
  background: #111111;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.vpop-ig-btn:hover {
  background: #2b2b2b;
}

.vpop-ig-btn:active {
  transform: scale(0.97);
}

@media (max-width: 520px) {
  .vpop-row {
    flex-direction: column;
  }

  .vpop-cell--captcha,
  .vpop-cell--reside {
    flex: 1 1 auto;
    width: 100%;
  }
}