/* ── RecallRadar Module Styles ───────────────────────────────────────────────
   Restored 2026-08-28 to the module's own original design — "Canopy Radar":
   a warm paper background, near-black forest-green ink text, a deep forest
   green for panels/buttons, a signal-lime accent, and Manrope + DM Mono type
   (Georgia serif for the odd italic emphasis). Source of truth: the ported
   React/Tailwind build this module was completed from (RecallRadar-full-
   project/RecallRadar-full-project/client/src, see client/src/index.css),
   which itself names this palette in its class names (--forest, --lime,
   --mint, --paper) and layout ("radar-stage" scanner visual, EU Safety Gate
   recall cards, risk badges).

   An earlier build pass ("2026-08-27 identity unification") deliberately
   stripped all of this out and made the module fall back to bimbly.eu's
   generic site-wide purple (--brand:#7657ff / --brand2:#9a7dff). That is
   reverted here — RecallRadar gets its own palette back.

   How it's scoped: everything below lives inside `.rr-scope`, the wrapper
   div that templates/header.php opens (right after the shared header) and
   templates/footer.php closes (right before the shared footer) around this
   module's own content — the shared site-header, module-nav and footer all
   render outside `.rr-scope` and keep bimbly.eu's site-wide purple untouched.
   Custom properties only cascade downward, so re-pointing --brand/--text/
   --muted/--surface/etc. inside `.rr-scope` can never leak out. That
   re-pointing is also what makes the many unscoped inline
   `style="color:var(--muted)"` attributes across this module's PHP templates
   (index.php, search.php, recall.php, pricing.php, articles.php, article.php,
   account/*.php) automatically pick up RecallRadar's own palette instead of
   bimbly purple, without any markup changes.

   Note on risk-severity badge *colors*: `.rr-badge`'s fill comes from the
   `--badge-color` inline custom property set by `rr_risk_color()` in
   RecallRadarBimbly/app/bootstrap.php (private backend, off-limits — pure
   PHP business logic, not touched here). Only the badge's shape/type here is
   restored to the source's authentic look (rounded-rect, not a pill).

   Class names for this module's own components are prefixed rr- to avoid
   colliding with other modules.
   ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

.rr-scope {
  /* Module's own palette tokens */
  --rr-ink: #15251e;
  --rr-ink-soft: #50655b;
  --rr-paper: #f8f7f2;
  --rr-cream: #f1efe6;
  --rr-line: #dbe1d8;
  --rr-forest: #163d2b;
  --rr-forest-dark: #0f2e20;
  --rr-mint: #d9f1cf;
  --rr-mint-soft: #eef7ea;
  --rr-lime: #c6e96c;
  --rr-lime-dark: #b3d95a;
  --rr-warn: #b5502f;
  --rr-warn-soft: #f9eee7;
  --rr-yellow: #f1c85e;
  --rr-other: #597266;
  --rr-font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --rr-font-mono: "DM Mono", ui-monospace, monospace;
  --rr-font-serif: Georgia, serif;
  --rr-radius: 16px;
  --rr-radius-sm: 10px;
  --rr-shadow: 0 10px 30px rgba(24, 45, 30, .08);
  --rr-shadow-lg: 0 15px 34px rgba(33, 64, 44, .10);
  --rr-ease: cubic-bezier(.23, 1, .32, 1);

  /* Back-compat: re-point bimbly.eu's shared token *names*, scoped to this
     wrapper only — inline `style="color:var(--muted)"` etc. and shared
     classes reused here (.eyebrow, .section, ad-slot links, breadcrumbs)
     keep working, now resolving to RecallRadar's own palette. */
  --brand: var(--rr-forest);
  --brand2: var(--rr-lime);
  --bg: var(--rr-paper);
  --surface: #fff;
  --surface2: var(--rr-mint);
  --surface-soft: var(--rr-cream);
  --text: var(--rr-ink);
  --muted: var(--rr-ink-soft);
  --line: var(--rr-line);
  --radius: var(--rr-radius);
  --shadow: var(--rr-shadow);

  display: block;
  background: var(--rr-paper);
  color: var(--rr-ink);
  font-family: var(--rr-font-sans);
}
.rr-scope h1, .rr-scope h2, .rr-scope h3 { font-weight: 800; letter-spacing: -.03em; }
.rr-scope a { color: inherit; }

/* ── Account bar ──────────────────────────────────────────────────────────── */

/* ── Hero (index.php) ─────────────────────────────────────────────────────── */
.rr-scope .rr-hero-section {
  background: radial-gradient(circle at 75% 30%, rgba(198, 233, 108, .22), transparent 45%),
              linear-gradient(122deg, #f8f7f2 0%, #f8f7f2 44%, #edf0e6 100%);
  border-bottom: 1px solid var(--rr-line);
  padding: 56px 0 48px;
}
.rr-scope .hero-content { max-width: 680px; }
.rr-scope .rr-hero-section h1 {
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--rr-ink);
}
.rr-scope .hero-copy { color: var(--rr-ink-soft); font-size: 17px; line-height: 1.7; max-width: 560px; margin: 20px 0 0; }

/* ── Search form — pill bar, matches the source's hero-search/search-line ──── */
.rr-search-form {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px; margin: 22px 0 14px;
  background: #fff; border: 1px solid var(--rr-line); border-radius: 15px;
  box-shadow: var(--rr-shadow);
}
.rr-search-input, .rr-select, .rr-input {
  border: 1px solid transparent; border-radius: var(--rr-radius-sm); padding: 12px 14px;
  font-size: .95rem; font-family: inherit; background: var(--rr-cream); color: var(--rr-ink);
  transition: background .15s var(--rr-ease);
}
.rr-search-input { flex: 1 1 220px; }
.rr-search-input:focus, .rr-select:focus, .rr-input:focus { outline: none; background: #fff; border-color: var(--rr-line); }
.rr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--rr-radius-sm); padding: 12px 20px; font-weight: 800; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-size: .9rem; font-family: inherit;
  transition: background .15s var(--rr-ease), color .15s var(--rr-ease), transform .1s var(--rr-ease), opacity .15s var(--rr-ease);
}
.rr-btn-primary { background: var(--rr-forest); color: #fff; }
.rr-btn-primary:hover { background: var(--rr-forest-dark); }
.rr-btn-primary:active { transform: scale(.97); }
.rr-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.rr-btn-ghost { background: transparent; border-color: var(--rr-line); color: var(--rr-ink); }
.rr-btn-ghost:hover { border-color: var(--rr-forest); color: var(--rr-forest); }
.rr-btn-danger { background: var(--rr-warn); color: #fff; }
.rr-btn-danger:hover { opacity: .9; }
.rr-btn-sm { padding: 8px 14px; font-size: .8rem; }
.rr-btn-full { width: 100%; }

/* ── Cards / lists ────────────────────────────────────────────────────────── */
.rr-card {
  background: #fff; border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius); padding: 20px 22px; margin-bottom: 18px;
}
.rr-card-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; color: var(--rr-ink); }

.rr-recall-row {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 8px;
  margin: 0 -8px; border-bottom: 1px solid var(--rr-line); border-radius: 10px;
  transition: background .15s var(--rr-ease);
}
.rr-recall-row:hover { background: var(--rr-mint-soft); }
.rr-recall-row:last-child { border-bottom: none; }
.rr-recall-row-body { flex: 1; min-width: 0; }
.rr-recall-row-title { font-weight: 700; text-decoration: none; color: var(--rr-ink); }
.rr-recall-row-title:hover { color: var(--rr-forest); }
.rr-recall-row-meta { font-size: .8rem; color: var(--rr-ink-soft); margin-top: 4px; }

/* ── Risk badges ──────────────────────────────────────────────────────────── */
/* Fill color comes from --badge-color (set inline by rr_risk_color(), backend
   logic — not touched here). Shape restored to the source's authentic
   rounded-rect chip (border-radius:7px), not a generic pill. */
.rr-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 7px;
  font-size: .68rem; font-weight: 800; letter-spacing: .01em; color: #fff;
  background: var(--badge-color, var(--rr-other)); white-space: nowrap;
}
.rr-badge-status {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; background: var(--rr-mint); color: var(--rr-forest);
}

/* ── Detail page ──────────────────────────────────────────────────────────── */
.rr-detail-grid { display: grid; gap: 14px 32px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 18px 0; padding-top: 18px; border-top: 1px solid var(--rr-line); }
.rr-detail-field dt { font: 500 10px var(--rr-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--rr-ink-soft); margin-bottom: 5px; }
.rr-detail-field dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--rr-ink); }
.rr-disclaimer {
  background: var(--rr-warn-soft); border: 1px solid #ecd9cd;
  border-radius: var(--rr-radius); padding: 16px 18px; font-size: .85rem;
  color: #8b402c; margin: 20px 0;
}

/* ── Checklist ────────────────────────────────────────────────────────────── */
.rr-checklist { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.rr-checklist label { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; color: var(--rr-ink); }
.rr-checklist input[type="checkbox"] { margin-top: 3px; accent-color: var(--rr-forest); }

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.rr-plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 24px 0; }
.rr-plan-card {
  border: 1px solid var(--rr-line); border-radius: var(--rr-radius);
  padding: 26px 24px; background: #fff; transition: border-color .18s var(--rr-ease), box-shadow .18s var(--rr-ease), transform .18s var(--rr-ease);
}
.rr-plan-card:hover { border-color: var(--rr-lime); box-shadow: var(--rr-shadow-lg); transform: translateY(-3px); }
.rr-plan-card h3 { margin: 0 0 8px; color: var(--rr-ink); }
.rr-plan-card ul { padding-left: 18px; margin: 14px 0; color: var(--rr-ink-soft); font-size: .9rem; line-height: 1.7; }

/* ── Alerts / forms ───────────────────────────────────────────────────────── */
.rr-alert { border-radius: var(--rr-radius-sm); padding: 12px 16px; font-size: .88rem; margin: 14px 0; }
.rr-alert-danger  { background: #fdece7; color: #8b402c; border: 1px solid #f2cdbc; }
.rr-alert-success { background: #eaf6e1; color: #2b5a34; border: 1px solid #cdeab9; }
.rr-alert-info    { background: var(--rr-cream); color: var(--rr-ink-soft); border: 1px solid var(--rr-line); }
.rr-form-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.rr-form-field label { font-weight: 700; font-size: .88rem; color: var(--rr-ink); }
.rr-auth-card { max-width: 420px; margin: 0 auto; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.rr-pagination { display: flex; justify-content: space-between; align-items: center; margin: 24px 0; gap: 12px; }

/* ── Pre-footer CTA / trust band ──────────────────────────────────────────── */
.rr-prefooter {
  background: var(--rr-forest);
  color: #f4f9ed; padding: 40px 24px; margin-top: 40px;
}
.rr-prefooter-inner {
  max-width: 1000px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.rr-prefooter h2 { margin: 0 0 6px; font-size: 1.3rem; color: #fff; }
.rr-prefooter p { margin: 0; color: #b7ccba; font-size: .92rem; }
.rr-prefooter .rr-btn-primary { background: var(--rr-lime); color: var(--rr-forest-dark); }
.rr-prefooter .rr-btn-primary:hover { background: #d8f3a0; }
@media (max-width: 480px) {
  .rr-prefooter-inner { flex-direction: column; text-align: center; }
}

/* RTL */
[dir="rtl"] .rr-detail-field dt { text-align: right; }

@media (max-width: 620px) {
  .rr-search-form { flex-direction: column; align-items: stretch; }
  .rr-search-input, .rr-select { width: 100%; }
}