/*
 * VivaRevize verdict badge styles
 * Phase 7. All properties that could be nuked by app_head_meta.php light-theme
 * `!important` overrides carry their own `!important` (lesson from printguard).
 */

.vr-verdict-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  margin: 8px 0;
  border: 1px solid transparent;
  transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
  line-height: 1.35;
}
.vr-verdict-badge .vr-verdict-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.vr-verdict-badge .vr-verdict-text {
  color: inherit !important;
}

/* States — dark defaults */
.vr-verdict-neutral {
  background: rgba(128, 128, 128, .15) !important;
  border-color: rgba(128, 128, 128, .4) !important;
  color: #94a3b8 !important;
}
.vr-verdict-positive {
  background: rgba(16, 185, 129, .15) !important;
  border-color: rgba(16, 185, 129, .5) !important;
  color: #10b981 !important;
}
.vr-verdict-negative {
  background: rgba(220, 38, 38, .15) !important;
  border-color: rgba(220, 38, 38, .5) !important;
  color: #dc2626 !important;
}
.vr-verdict-conditional {
  background: rgba(245, 158, 11, .15) !important;
  border-color: rgba(245, 158, 11, .5) !important;
  color: #f59e0b !important;
}

/* Light theme — darker, higher-contrast tones */
html[data-vr-theme="light"] .vr-verdict-neutral {
  color: #475569 !important;
  background: rgba(148, 163, 184, .18) !important;
  border-color: rgba(100, 116, 139, .35) !important;
}
html[data-vr-theme="light"] .vr-verdict-positive {
  color: #047857 !important;
  background: rgba(16, 185, 129, .12) !important;
  border-color: rgba(5, 150, 105, .45) !important;
}
html[data-vr-theme="light"] .vr-verdict-negative {
  color: #b91c1c !important;
  background: rgba(220, 38, 38, .1) !important;
  border-color: rgba(185, 28, 28, .45) !important;
}
html[data-vr-theme="light"] .vr-verdict-conditional {
  color: #b45309 !important;
  background: rgba(245, 158, 11, .12) !important;
  border-color: rgba(180, 83, 9, .45) !important;
}

@media (max-width: 640px) {
  .vr-verdict-badge {
    font-size: 13px;
    padding: 7px 10px;
  }
}