/* ── Native Plant Finder Styles v2.0.0 ── */

.npf-wrap {
   font-family: 'Josefin Sans', sans-serif;
  max-width: 940px;
  margin: 0 auto;
  padding: 2rem 1rem;
  color: #F0F5FA;
}

/* ── Header ── */
.npf-title   { font-size:2.5rem; font-weight:700; margin:0 0 0.35rem; color: #F0F5FA !important; }
.npf-subtitle{ font-size: 1rem; color:#F0F5FA; margin:0 0 1.5rem; }

/* ── Search row ── */
.npf-search-row { display:flex; gap:10px; margin-bottom:1rem; flex-wrap:wrap; }
.npf-zip-input {
  height:42px; padding:0 14px; font-size:1rem;
  border:1.5px solid #ccc; border-radius:8px; outline:none;
  width:200px; transition:border-color .15s; background:#fff; color:#111;
}
.npf-zip-input:focus { border-color:#F0F5FA; }
.npf-search-btn {
  height:42px; padding:0 22px; font-size:.95rem; font-weight:500;
  background:#1D9E75; color:#fff; border:none; border-radius:8px;
  cursor:pointer; transition:background .15s;
}
.npf-search-btn:hover { background:#0F6E56; }

/* ── Radius slider ── */
.npf-radius-row   { display:flex; align-items:center; gap:12px; margin-bottom:1.25rem; flex-wrap:wrap; }
.npf-radius-lbl   { font-size:.9rem; color:#F0F5FA; white-space:nowrap; }
.npf-radius-label { font-size:.9rem; font-weight:500; color:#F0F5FA; min-width:48px; }
.npf-radius-slider {
  flex:1; min-width:140px; max-width:260px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  height:4px; background:#ddd; border-radius:2px; outline:none; border:none; box-shadow:none;
}
.npf-radius-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px;
  border-radius:50%; background:#1D9E75; cursor:pointer; border:none; box-shadow:none;
}
.npf-radius-slider::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%; background:#1D9E75; cursor:pointer; border:none;
}
.npf-radius-slider::-webkit-slider-runnable-track { height:4px; background:#ddd; border-radius:2px; }
.npf-radius-slider::-moz-range-track             { height:4px; background:#ddd; border-radius:2px; }

/* ── Filter groups ── */
.npf-filters { display:flex; flex-direction:column; gap:10px; margin-bottom:1.25rem; }
.npf-filter-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.npf-filter-group-label {
  font-size: .85rem; font-weight:800; color:#1D1505;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; min-width:80px;
}
.npf-pills { display:flex; flex-wrap:wrap; gap:6px; }
.npf-pill {
  height:32px; padding:0 14px; font-size:.85rem; border-radius:999px;
  border:1.5px solid #ddd; background:#F0F5FA; color: #1D1505;
  cursor:pointer; transition:all .15s; font-family:inherit; white-space:nowrap;
}
.npf-pill:hover { border-color:#aaa; background:#f5f5f5; }
.npf-pill.active { background:#E1F5EE; border-color:#1D9E75; color:#085041; font-weight:500; }

/* ── Status ── */
.npf-status         { font-size:.9rem; margin-bottom:1rem; min-height:1.4em; }
.npf-status--loading{ color:#B27092; font-style:italic; }
.npf-status--success{ color:#97A838; }
.npf-status--error  { color:#a32d2d; }

/* ── Legend ── */
.npf-legend {
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding:10px 14px; background:#f9f9f7;
  border:1px solid #eee; border-radius:8px;
  font-size:.8rem; color:#555; margin-bottom:1rem;
}
.npf-legend-item { display:flex; align-items:center; gap:6px; }
.npf-legend-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.npf-legend-dot--good { background:#4CAF50; }
.npf-legend-dot--pest { background:#E53935; }
.npf-legend-source    { margin-left:auto; font-size:.72rem; color:#aaa; }

/* ── Card grid ── */
.npf-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}

/* ── Card ── */
.npf-card {
  background:#fff; border:1px solid #e8e8e8; border-radius:12px;
  overflow:hidden; transition:box-shadow .15s; display:flex; flex-direction:column;
}
.npf-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.09); }

/* Ecosystem Anchor — subtle green left border accent */
.npf-card--anchor { border-left:3px solid #1D9E75; }

/* ── Card image ── */
.npf-card-img {
  width:100%; height:140px; background:#f0f5f0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative; flex-shrink:0;
}
.npf-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.npf-card-emoji { font-size:3rem; line-height:1; }

/* Conservation badge — bottom-left overlay */
.npf-conservation-badge { position:absolute; bottom:7px; left:8px; }
.npf-conservation-badge span {
  display:inline-block; font-size:.68rem; font-weight:700;
  padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
}

/* Ecosystem Anchor badge — top-right overlay */
.npf-anchor-badge {
  position:absolute; top:8px; right:8px;
  font-size:.65rem; font-weight:700; padding:3px 8px;
  background:rgba(29,158,117,.92); color:#fff;
  border-radius:999px; letter-spacing:.03em; white-space:nowrap;
}

/* ── Card body ── */
.npf-card-body { padding:12px 14px 14px; display:flex; flex-direction:column; flex:1; }
.npf-common     { display:block; font-size:.95rem; font-weight:600; color:#111; margin-bottom:2px; line-height:1.3; }
.npf-sci        { display:block; font-size:.8rem; color:#777; font-style:italic; margin-bottom:6px; }
.npf-endemic-note{ font-size:.78rem; color:#534AB7; font-weight:500; margin-bottom:6px; }

/* ── Plant type tag row ── */
.npf-plant-type { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }

/* ── Trait tag row (sun/water/bloom/deer) ── */
.npf-trait-row  { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }

/* ── Bug tags ── */
.npf-bugs-label {
  font-size:.7rem; font-weight:700; color:#888;
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px;
}
.npf-bug-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }


/* ── iNaturalist link ── */
.npf-link { font-size:.8rem; color:#1D9E75; text-decoration:none; margin-top:auto; }
.npf-link:hover { text-decoration:underline; }

/* ══════════════════════════════════════════════════════════════════
   TAG CLASSES
══════════════════════════════════════════════════════════════════ */

/* Plant type — neutral */
.pt-tree       { background:#E1EEE0; color:#1A3D1A; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.pt-shrub      { background:#E8F0E8; color:#234A23; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.pt-wildflower { background:#F3EEF8; color:#4B2476; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.pt-grass      { background:#F5F5E4; color:#4A4A10; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.pt-fern       { background:#E4F0E4; color:#1E401E; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.pt-pollinator { background:#FAEEDA; color:#412402; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.pt-butterfly  { background:#EEF3E8; color:#2E4A1E; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }

/* Trait — USDA PLANTS data */
.tt-sun       { background:#FFF9DB; color:#664D00; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.tt-sun-part  { background:#FFF3C4; color:#664D00; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.tt-shade     { background:#E8EDF2; color:#1A2A40; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.tt-drought   { background:#FFF0D6; color:#6B3800; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.tt-wet       { background:#E0F0FF; color:#003A6B; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.tt-medium    { background:#EEF5F0; color:#1A3D22; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.tt-bloom     { background:#FCF0F8; color:#5C1A4A; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.tt-deer      { background:#E8F5E9; color:#1B5E20; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.tt-deer-mod  { background:#FFF8E1; color:#5D4000; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }

/* Bug — beneficial (green spectrum) */
.bug-bee           { background:#C8E6C9; color:#1B5E20; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-butterfly     { background:#DCEDC8; color:#33691E; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-moth          { background:#E8F5E9; color:#2E7D32; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-hoverfly      { background:#D7EDD9; color:#1A5C28; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-predator      { background:#B2DFDB; color:#004D40; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-parasitoid    { background:#C8E6CF; color:#1B5E20; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-ground-beetle { background:#BDDEC0; color:#164A1D; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-beneficial    { background:#D4EDDA; color:#145523; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }

/* Bug — pest (red/amber spectrum) */
.bug-aphid            { background:#FFCDD2; color:#7B1414; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-caterpillar-pest { background:#FFBCBC; color:#6B0D0D; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-scale            { background:#FFCDD2; color:#7B1414; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-whitefly         { background:#FFE0E0; color:#8B2020; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-thrip            { background:#FFCDD2; color:#7B1414; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-leafhopper       { background:#FFD0C0; color:#7A2A10; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-beetle-pest      { background:#FFD7C8; color:#7A2010; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-mite             { background:#FFCAB8; color:#7A1A08; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }
.bug-pest             { background:#FFCDD2; color:#7B1414; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px; }

/* ── Load more ── */
.npf-load-more {
  display:block; margin:1.75rem auto 0;
  height:42px; padding:0 28px; font-size:.95rem; font-weight:500;
  border:1.5px solid #1D9E75; border-radius:8px;
  background:#fff; color:#1D9E75; cursor:pointer;
  transition:all .15s; font-family:inherit;
}
.npf-load-more:hover { background:#E1F5EE; }

/* ── Empty ── */
.npf-empty {
  padding:2rem; text-align:center; color:#777; font-size:.95rem;
  border:1.5px dashed #ddd; border-radius:10px;
}

/* ── Attribution ── */
.npf-attribution { font-size:.8rem; color:#999; margin-top:1.5rem; text-align:right; }
.npf-attribution a { color:#1D9E75; text-decoration:none; }

/* ── Responsive ── */
@media (max-width:600px) {
  .npf-grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
  .npf-filter-group { flex-direction:column; align-items:flex-start; }
  .npf-filter-group-label { min-width:unset; }
  .npf-zip-input,.npf-search-btn { width:100%; }
  .npf-legend-source { display:none; }
}