/* Spam Checker – extra styles (use together with marketing-modern.css) */

/* Blue theme: hero, buttons and accents */
:root {
  --mk-primary: #2563eb;
  --mk-primary-dark: #1d4ed8;
  --mk-accent: #3b82f6;
}
.mk-hero {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
}
.mk-btn-primary {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}
.mk-btn-primary:hover {
  background: linear-gradient(135deg, #1e40af, #2563eb);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34);
}

.sc-example-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -4px 0 16px;
  font-size: 13px;
  color: #6b7280;
}
.sc-body-input { min-height: 220px; }
#sc-result[hidden], #sc-empty[hidden], #sc-words-block[hidden] { display: none; }

/* Score */
.sc-score-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.sc-ring {
  --sc-pct: 0;
  --sc-col: #10b981;
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: conic-gradient(var(--sc-col) calc(var(--sc-pct) * 1%), #e5e7eb 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sc-ring::before {
  content: '';
  position: absolute;
  inset: 10px;
  background: #fff;
  border-radius: 50%;
}
.sc-ring span {
  position: relative;
  font-size: 34px;
  font-weight: 800;
  color: #111827;
}
.sc-ring.sc-good { --sc-col: #10b981; }
.sc-ring.sc-mid  { --sc-col: #f59e0b; }
.sc-ring.sc-bad  { --sc-col: #ef4444; }

.sc-rating { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.sc-rating.sc-good { color: #047857; }
.sc-rating.sc-mid  { color: #b45309; }
.sc-rating.sc-bad  { color: #b91c1c; }
.sc-note { margin: 0; font-size: 14px; color: #6b7280; }

.sc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.sc-stat {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.sc-stat strong { display: block; font-size: 22px; font-weight: 800; color: #111827; }
.sc-stat span { font-size: 12px; color: #6b7280; }

/* Issues */
.sc-issues { list-style: none; margin: 0 0 20px; padding: 0; }
.sc-issue {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}
.sc-level {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}
.sc-issue-high   { background: #fef2f2; border-color: #fecaca; }
.sc-issue-high .sc-level   { background: #fee2e2; color: #b91c1c; }
.sc-issue-medium { background: #fffbeb; border-color: #fde68a; }
.sc-issue-medium .sc-level { background: #fef3c7; color: #b45309; }
.sc-issue-low .sc-level    { background: #e0f2fe; color: #0369a1; }
.sc-issue-info .sc-level   { background: #ede9fe; color: #6d28d9; }
.sc-issue-ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; font-weight: 600; }

/* Spam word chips and highlights (one colour per category) */
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sc-chip {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.sc-mark { border-radius: 4px; padding: 0 2px; color: inherit; }
.sc-urgency    { background: #fee2e2; color: #991b1b; }
.sc-money      { background: #dcfce7; color: #166534; }
.sc-toogood    { background: #fef3c7; color: #92400e; }
.sc-suspicious { background: #fecaca; color: #7f1d1d; }
.sc-pushy      { background: #dbeafe; color: #1e40af; }

.sc-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sc-legend .sc-chip { font-size: 11px; padding: 2px 8px; }

.sc-preview {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fbfbfe;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #111827;
}
.sc-preview-subject { font-weight: 700; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }

@media (max-width: 575px) {
  .sc-score-row { flex-direction: column; text-align: center; }
  .sc-stats { grid-template-columns: repeat(3, 1fr); }
}

/* SEO content: tables and before/after comparison */
.sc-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 12px; margin: 8px 0 18px; background: #fff; }
.sc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sc-table th, .sc-table td { padding: 10px 12px; border-bottom: 1px solid #eef0f4; text-align: left; vertical-align: top; line-height: 1.55; }
.sc-table tr:last-child td { border-bottom: 0; }
.sc-table thead th { background: #f8fafc; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; white-space: nowrap; }
.sc-table td:first-child { white-space: nowrap; }
.sc-t-good { color: #047857; }
.sc-t-mid  { color: #b45309; }
.sc-t-bad  { color: #b91c1c; }

.sc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 14px; }
.sc-compare-col { border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px 18px; background: #fff; }
.sc-compare-col h3 { font-size: 15px; font-weight: 800; margin: 0 0 8px; }
.sc-compare-col p { font-size: 14px; line-height: 1.65; margin: 0 0 8px; }
.sc-compare-col p:last-child { margin-bottom: 0; }
.sc-compare-bad  { border-color: #fecaca; background: #fef2f2; }
.sc-compare-bad h3 { color: #b91c1c; }
.sc-compare-good { border-color: #a7f3d0; background: #ecfdf5; }
.sc-compare-good h3 { color: #047857; }

@media (max-width: 767px) {
  .sc-compare { grid-template-columns: 1fr; }
  .sc-table td:first-child { white-space: normal; }
}