/* ZK Reposts — Frontend styles v1.0
   Dark-theme integration with Zettelkasten.
   Class namespace: zkrp-  (no conflict with ZK Reactions: zkr-) */

/* ── Repost button ─────────────────────────────────────────────────── */
.zkrp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-sec, #7c8594);
  transition:
    background  0.15s ease,
    border-color 0.15s ease,
    color        0.15s ease,
    transform    0.15s ease;
  line-height: 1.4;
  user-select: none;
  vertical-align: middle;
}

.zkrp-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  transform: scale(1.07);
}

/* Active / reposted state — green tint */
.zkrp-btn.zkrp-active {
  background: rgba(80, 200, 140, 0.12);
  border-color: rgba(80, 200, 140, 0.35);
  color: #50c88c;
}

.zkrp-btn.zkrp-active:hover {
  background: rgba(80, 200, 140, 0.22);
  border-color: rgba(80, 200, 140, 0.50);
}

/* Icon spin on click */
.zkrp-btn:active .zkrp-icon {
  animation: zkrp-spin 0.35s ease;
}

@keyframes zkrp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Icon & counter ─────────────────────────────────────────────────── */
.zkrp-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}

.zkrp-count {
  font-size: 11px;
  font-weight: 600;
  min-width: 12px;
  color: inherit;
}

/* ── Comment-size variant ───────────────────────────────────────────── */
.zk-cm .zkrp-btn {
  padding: 2px 7px;
  font-size: 12px;
}

.zk-cm .zkrp-icon {
  font-size: 12px;
}

/* ── Guest login tip ────────────────────────────────────────────────── */
.zkrp-login-tip {
  position: fixed;
  z-index: 9999;
  background: #1a1e26;
  border: 1px solid #22272e;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #7c8594;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  pointer-events: auto;
}

.zkrp-login-tip a {
  color: #7eb8f7;
  text-decoration: none;
  font-weight: 500;
}

.zkrp-login-tip a:hover {
  text-decoration: underline;
}