/* ============================================================================
   KoraFlix — Moderação: pop-ups de aviso e banimento  ·  moderation.css
   ============================================================================ */

.kfmod-backdrop {
  position: fixed; inset: 0; z-index: 6000;
  background: rgba(5, 8, 13, 0.8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
  padding: 22px;
}
.kfmod-backdrop.is-open { display: flex; }

.kfmod-box {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #172130, #0e1621);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  padding: 30px 26px 26px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(230,57,70,.06);
  animation: kfmodIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes kfmodIn { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }

.kfmod-ico {
  width: 62px; height: 62px; border-radius: 18px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff;
}
.kfmod-ico--warn { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 12px 30px rgba(245,158,11,.4); }
.kfmod-ico--ban  { background: linear-gradient(135deg, #E63946, #b1222e); box-shadow: 0 12px 30px rgba(230,57,70,.42); }

.kfmod-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 12px;
}
.kfmod-tag--leve  { background: rgba(48,217,138,.14); color: #30d98a; }
.kfmod-tag--media { background: rgba(245,158,11,.16); color: #f5b942; }
.kfmod-tag--grave { background: rgba(230,57,70,.16); color: #ff6b76; }

.kfmod-box h3 {
  margin: 0 0 10px;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 19px; font-weight: 800; color: #fff;
}
.kfmod-msg {
  margin: 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-secondary, #c7cfdb);
}
.kfmod-reason {
  margin: 12px 0 0;
  font-size: 12px; color: var(--text-muted, #8b95a6);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 9px 12px;
}

.kfmod-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.kfmod-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px;
  border: none; border-radius: 999px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 13.5px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.kfmod-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.kfmod-btn--warn { width: 100%; margin-top: 22px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.kfmod-btn--ban  { background: linear-gradient(180deg, #E63946, #c42d3a); color: #fff; }
.kfmod-btn--ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.16);
  color: var(--text-secondary, #c7cfdb);
}
.kfmod-btn--ghost:hover { border-color: rgba(255,255,255,.3); color: #fff; transform: none; filter: none; }

@media (max-width: 480px) {
  .kfmod-box { padding: 26px 20px 22px; }
}