/* =============================================================
   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, hide everything from the pre-vote state — the confirm CTA, the
   status line, and the "Confirm your vote" title/body — so the success panel
   (its own thank-you headline + follow-up steps) stands entirely on its own.
   The vote is already recorded server-side, so there's no confirmation left. */
.vpop-card--confirm.is-voted .vpop-actions,
.vpop-card--confirm.is-voted .vpop-msg,
.vpop-card--confirm.is-voted .vpop-confirm-title,
.vpop-card--confirm.is-voted .vpop-confirm-body {
  display: none;
}

/* Give the confirm card a touch more room for the two follow-up cards. */
.vpop-card--confirm.is-voted {
  width: min(500px, 100%);
}

/* Success panel layout: thank-you hero, then the follow-up step cards. */
.vpop-steps {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.vpop-success-head {
  text-align: center;
  padding: 0.25rem 0 0.35rem;
}

.vpop-success-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.25rem, 3.6vw, 1.55rem);
  font-weight: 800;
  line-height: 1.25;
  color: #1a1a1a;
}

.vpop-success-sub {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #6b6b73;
}

/* Each follow-up ("support on Instagram", "refer a friend") is a soft card so
   the two next-steps read as distinct, tappable actions. */
.vpop-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.2rem 1rem;
  border: 1px solid #e9e9ee;
  border-radius: 14px;
  background: #fbfbfc;
  text-align: center;
}

/* Small accent pill for the step number. */
.vpop-step-num {
  display: inline-block;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  background: #efe8fd;
  color: #7b4fe0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.vpop-step-title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1a1a;
}

/* Tighten the hashtag / go-to-post columns when nested inside a step card. */
.vpop-step .vpop-confirm-cols {
  margin-top: 0.15rem;
  width: 100%;
}

.vpop-step-action {
  margin-top: 0.15rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.vpop-refer-btn {
  min-width: min(240px, 100%);
}

/* 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;
    /* Stacked layout puts the Turnstile captcha full-width at the top of the
       card, right under the absolutely-positioned close (X) button. Push the
       row down so the X clears the captcha's top-right corner. */
    margin-top: 2rem;
  }

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

  /* Center the captcha within its full-width cell so it isn't crowded against
     the close button on the right edge. */
  .vpop-cell--captcha {
    justify-content: center;
  }
}