/* Car Breakdown Risk Predictor */
.cbrp-tool-root {
  --cbrp-bg: #f1f5f9;
  --cbrp-surface: #ffffff;
  --cbrp-surface-2: #f8fafc;
  --cbrp-accent: #ef4444;
  --cbrp-accent-2: #dc2626;
  --cbrp-text: #0f172a;
  --cbrp-muted: #475569;
  --cbrp-radius: 12px;
  --cbrp-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);

  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  background: var(--cbrp-bg);
  color: var(--cbrp-text);
  line-height: 1.6;
  padding: 1.5rem 0 2rem;
  margin: 0 calc(-1 * var(--space-lg, 1.5rem));
  border-radius: var(--cbrp-radius);
  border: 1px solid #e2e8f0;
  isolation: isolate;
}

.cbrp-tool-root .cbrp-wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 480px) { .cbrp-tool-root { padding: 1rem 0 1.5rem; } .cbrp-tool-root .cbrp-wrap { padding: 0 16px; } }

.cbrp-tool-root .cbrp-intro,
.cbrp-tool-root .cbrp-card {
  background: var(--cbrp-surface);
  border-radius: var(--cbrp-radius);
  box-shadow: var(--cbrp-shadow);
}
.cbrp-tool-root .cbrp-intro {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border-left: 4px solid var(--cbrp-accent);
}
.cbrp-tool-root .cbrp-intro h2 { margin: 0 0 0.5rem; font-size: 1.45rem; }
.cbrp-tool-root .cbrp-intro p { margin: 0; color: var(--cbrp-muted); }
.cbrp-tool-root .cbrp-card { padding: 1.5rem; margin-bottom: 1.25rem; }
.cbrp-tool-root .cbrp-card h2 { margin: 0 0 1rem; font-size: 1.15rem; }

.cbrp-tool-root .cbrp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 768px) { .cbrp-tool-root .cbrp-grid { grid-template-columns: 1fr; } }

.cbrp-tool-root .cbrp-field label { display: block; margin-bottom: 0.4rem; font-weight: 600; }
.cbrp-tool-root .cbrp-field input {
  width: 100%; box-sizing: border-box; padding: 0.75rem 0.85rem;
  border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: var(--cbrp-text);
}
.cbrp-tool-root .cbrp-field input:focus { outline: 2px solid var(--cbrp-accent); outline-offset: 2px; }

.cbrp-tool-root .cbrp-symptoms { border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.9rem 1rem; margin-top: 1rem; background: var(--cbrp-surface-2); }
.cbrp-tool-root .cbrp-symptoms legend { font-weight: 700; color: var(--cbrp-text); padding: 0 0.35rem; }
.cbrp-tool-root .cbrp-symptoms label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.35rem 1rem 0.35rem 0; color: var(--cbrp-text); }

.cbrp-tool-root .cbrp-actions { margin-top: 1rem; }
.cbrp-tool-root .cbrp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.5rem; border: none; border-radius: 10px;
  background: var(--cbrp-accent); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.cbrp-tool-root .cbrp-btn:hover { background: var(--cbrp-accent-2); }

.cbrp-tool-root .cbrp-error { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; }

.cbrp-tool-root .cbrp-risk-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; }
.cbrp-tool-root .cbrp-risk-label { color: var(--cbrp-muted); font-weight: 600; }
.cbrp-tool-root .cbrp-risk-value { font-size: 1.35rem; font-weight: 800; color: var(--cbrp-text); }
.cbrp-tool-root .cbrp-risk-meter { width: 100%; height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.cbrp-tool-root .cbrp-risk-meter__fill { height: 100%; width: 0; transition: width 0.25s ease; }
.cbrp-tool-root .cbrp-risk-meter__fill--low { background: #22c55e; }
.cbrp-tool-root .cbrp-risk-meter__fill--moderate { background: #f59e0b; }
.cbrp-tool-root .cbrp-risk-meter__fill--high { background: #ef4444; }

.cbrp-tool-root .cbrp-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.85rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .cbrp-tool-root .cbrp-summary-grid { grid-template-columns: 1fr; } }
.cbrp-tool-root .cbrp-summary-item { padding: 0.8rem 0.9rem; border: 1px solid #e2e8f0; border-radius: 10px; background: var(--cbrp-surface-2); display: flex; flex-direction: column; gap: 0.25rem; }
.cbrp-tool-root .cbrp-summary-item strong { color: var(--cbrp-muted); font-size: 0.88rem; }
.cbrp-tool-root .cbrp-summary-item span { color: var(--cbrp-text); font-weight: 700; font-size: 1.05rem; }

.cbrp-tool-root .cbrp-list { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.cbrp-tool-root .cbrp-list li { margin-bottom: 0.4rem; color: var(--cbrp-text); }

body.page-tool .tool-seo-content.cbrp-seo {
  background: linear-gradient(135deg, #111827 0%, #991b1b 45%, #ef4444 100%) !important;
}