/* ============================================================
   Climate Farmers — Find a Farm widget styles
   Extracted from the approved mockup (find-a-farm-widget.html).
   CSS variables are scoped to #ffwidget rather than :root, so they
   never leak onto the surrounding WordPress theme.
   ============================================================ */

#ffwidget{
  --green:#204832;--lime:#e3ef89;--lime-pale:#f9fce7;--lime-mid:#d4e46a;
  --white:#fff;--off:#fafaf7;--border:#e8edcc;--muted:#4d7060;--stone:#6b7a6e;
  --danger:#b94040;--warn:#c47c2a;--r:8px;--sh:0 1px 10px rgba(32,72,50,.08);
  --online:#c47c2a;--online-pale:#fdf1e0;

  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--white);box-shadow:var(--sh);
  font-family:'Inter',sans-serif;color:var(--green);font-size:14px;
}
#ffwidget *{box-sizing:border-box}

/* ── Filter bar ──
   Two rows: the primary row (search + the two dropdowns that filter what
   you see) sits on top; locate/radius/buy-type sit in a secondary row
   below, since they're about *where*/*how* rather than *what*. ── */
.ff-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.9rem 1.1rem .6rem}
.ff-filters-secondary{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:0 1.1rem .9rem;background:var(--white);border-bottom:1px solid var(--border)}
.ff-search-wrap{position:relative;flex:1 1 220px;min-width:200px}
.ff-search-wrap input{width:100%;padding:.62rem .9rem .62rem 2.1rem;border:1.5px solid var(--border);border-radius:24px;font-size:.83rem;font-family:inherit;background:var(--off);color:var(--green);outline:none;transition:border-color .15s}
.ff-search-wrap input:focus{border-color:var(--green);background:var(--white)}
.ff-search-wrap .ico{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:.85rem;color:var(--stone)}
.ff-locate-btn{flex:0 0 auto;display:flex;align-items:center;gap:.35rem;padding:.6rem .85rem;border:1.5px solid var(--border);border-radius:24px;font-size:.8rem;font-weight:600;background:var(--off);color:var(--green);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.ff-locate-btn:hover{border-color:var(--lime-mid);background:var(--lime-pale)}
.ff-locate-btn.active{background:var(--green);color:var(--white);border-color:var(--green)}
.ff-radius{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;background:var(--off);border:1.5px solid var(--border);border-radius:24px;padding:.4rem .9rem .4rem .8rem}
.ff-radius label{font-size:.72rem;font-weight:600;color:var(--stone);white-space:nowrap}
.ff-radius input[type=range]{width:100px;accent-color:var(--green)}
.ff-radius .val{font-size:.78rem;font-weight:600;color:var(--green);min-width:50px}
.ff-select{padding:.6rem .85rem;border:1.5px solid var(--border);border-radius:24px;font-size:.82rem;font-family:inherit;background:var(--off);color:var(--green);cursor:pointer;outline:none}
.ff-chip-group{display:flex;gap:.35rem}
.ff-chip{padding:.55rem .95rem;border:1.5px solid var(--border);border-radius:24px;font-size:.8rem;font-weight:500;background:var(--off);color:var(--stone);cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.ff-chip:hover{border-color:var(--lime-mid)}
.ff-chip.active{background:var(--green);color:var(--white);border-color:var(--green)}
.ff-produce-wrap{position:relative}
.ff-produce-btn{padding:.6rem .85rem;border:1.5px solid var(--border);border-radius:24px;font-size:.82rem;font-family:inherit;background:var(--off);color:var(--green);cursor:pointer;display:flex;align-items:center;gap:.4rem}
.ff-produce-btn .count{background:var(--lime);color:var(--green);border-radius:10px;font-size:.68rem;font-weight:700;padding:.05rem .4rem}
.ff-produce-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 30px rgba(32,72,50,.15);padding:.75rem;z-index:500;width:280px;max-width:min(280px, calc(100vw - 2rem));max-height:320px;overflow-y:auto}
.ff-produce-panel.open{display:block}
/* Added by JS (positionProducePanel) when the panel would otherwise
   overflow past the widget's right edge — flips it to hang from the
   right side of its button instead of the left. */
.ff-produce-panel.align-right{left:auto;right:0}
.ff-produce-panel label{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:400;padding:.3rem .2rem;cursor:pointer;border-radius:5px}
.ff-produce-panel label:hover{background:var(--lime-pale)}
.ff-produce-panel input{accent-color:var(--green)}
.ff-clear-btn{margin-left:auto;font-size:.76rem;color:var(--stone);text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;padding:.4rem}
.ff-geo-msg{font-size:.72rem;color:var(--stone);padding:0 1.1rem;margin-top:-.3rem}

/* ── Result count / active radius strip ── */
.ff-status{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.1rem;background:var(--lime-pale);border-bottom:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.ff-status strong{color:var(--green)}
.ff-legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:var(--stone)}
.ff-legend span{display:inline-flex;align-items:center;gap:.35rem}
.ff-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.ff-dot-general{outline:1.5px dashed var(--white);outline-offset:1px}

/* ── Split layout: list + map ── */
.ff-body{display:flex;height:620px}
.ff-list{width:410px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border);background:var(--white)}
.ff-map-pane{flex:1;position:relative}
#ff-map{height:100%;width:100%}

.ff-card{padding:.95rem 1.1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.ff-card:hover{background:var(--lime-pale)}
.ff-card.selected{background:var(--lime-pale);box-shadow:inset 3px 0 0 var(--green)}
.ff-card-top{display:flex;gap:.7rem}
.ff-thumb{position:relative;width:56px;height:56px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--lime-pale);border:1px solid var(--lime-mid);overflow:hidden}
.ff-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Farm logo badge — distinct from the team/farm photo in .ff-thumb itself;
   shown only when the farm has a logo_url, overlapping the thumb's corner. */
.ff-logo-badge{position:absolute;bottom:-4px;right:-4px;width:22px;height:22px;border-radius:50%;background:var(--white);border:1.5px solid var(--white);box-shadow:0 1px 3px rgba(32,72,50,.35);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ff-logo-badge img{width:100%;height:100%;object-fit:cover;display:block}
.ff-card-info{flex:1;min-width:0}
.ff-card-name{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:600;color:var(--green);margin-bottom:.1rem}
.ff-card-loc{font-size:.75rem;color:var(--stone);margin-bottom:.35rem}
.ff-badges{display:flex;flex-wrap:wrap;gap:.3rem}
.ff-badge{font-size:.65rem;font-weight:600;padding:.12rem .45rem;border-radius:10px;text-transform:uppercase;letter-spacing:.03em}
.badge-physical{background:var(--lime-pale);color:var(--green);border:1px solid var(--lime-mid)}
.badge-online{background:var(--online-pale);color:var(--online);border:1px solid #f0d5b0}
.badge-multi{background:var(--off);color:var(--muted);border:1px solid var(--border)}
.ff-distance{font-size:.72rem;color:var(--muted);font-weight:600;white-space:nowrap;flex-shrink:0;text-align:right}
.ff-card-produce{margin-top:.55rem;font-size:.76rem;color:var(--muted);line-height:1.5}
.ff-card-produce b{color:var(--green)}
.ff-quick-actions{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}
.ff-btn-sm{flex:0 0 auto;padding:.42rem .75rem;font-size:.73rem}

/* Expanded detail inside a card */
.ff-card-detail{display:none;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted);line-height:1.6}
.ff-card.selected .ff-card-detail{display:block}
.ff-loc-item{border:1px solid var(--border);border-radius:6px;padding:.5rem .65rem;margin-bottom:.4rem;background:var(--off)}
.ff-loc-item .ln{font-weight:600;color:var(--green);font-size:.78rem;margin-bottom:.15rem}
.ff-loc-item .lm{font-size:.73rem;color:var(--stone)}
.ff-actions{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.ff-btn{flex:1 1 auto;text-align:center;padding:.45rem .65rem;border-radius:7px;font-size:.74rem;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit;border:none;white-space:nowrap}
.ff-btn-primary{background:var(--green);color:var(--white)}
.ff-btn-secondary{background:var(--white);color:var(--green);border:1.5px solid var(--border)}
.ff-btn-directions{background:var(--lime-pale);color:var(--green);border:1.5px solid var(--lime-mid)}

.ff-empty{padding:2.5rem 1.5rem;text-align:center;color:var(--stone);font-size:.85rem;line-height:1.6}

/* Leaflet popup styling to match brand */
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 6px 24px rgba(32,72,50,.18)}
.leaflet-popup-content{margin:.8rem .9rem;font-family:'Inter',sans-serif;min-width:180px}
.lp-name{font-family:'Playfair Display',serif;font-weight:600;font-size:.92rem;color:var(--green);margin-bottom:.1rem}
.lp-multi{font-size:.68rem;color:var(--stone);margin-bottom:.3rem}
.lp-loc{font-size:.78rem;color:var(--green);font-weight:600;margin-bottom:.1rem}
.lp-hours{font-size:.72rem;color:var(--stone);margin-bottom:.4rem}
.lp-link{display:inline-block;margin-top:.25rem;font-size:.76rem;color:var(--green);font-weight:600;text-decoration:none}
.lp-seeall{display:block;margin-top:.3rem;font-size:.72rem;color:var(--online);font-weight:600;text-decoration:none;cursor:pointer}

/* Pin badge for multi-location farms */
.ff-pin-badge{position:absolute;top:-6px;right:-6px;background:var(--white);color:var(--green);border:1.5px solid var(--green);border-radius:50%;width:16px;height:16px;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.ff-pin-ring{border:3px solid #204832;border-radius:50%;background:rgba(32,72,50,.15);pointer-events:none}

@media(max-width:820px){
  .ff-body{flex-direction:column;height:auto}
  .ff-list{width:100%;flex:0 0 340px;height:340px;border-right:none;border-bottom:1px solid var(--border)}
  /* flex:1 on .ff-map-pane defaults to flex-basis:0% — inside a column
     flex container with height:auto that collapses it to 0px tall.
     Pin it to a fixed flex-basis instead of relying on flex-grow. */
  .ff-map-pane{flex:0 0 360px;height:360px}
  .ff-filters, .ff-filters-secondary{gap:.5rem}
}