/* Pay It Forward Marketplace — v1 (scoped to .vp .mp-market / .mp-list)
   Builds on css/vp-system.css tokens. Brand green #2f7d4d, card border #dfe8e1. */

/* ---- Filters bar ---- */
.vp .mp-filters { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
	background:#f7faf8; border:1px solid #e5eae6; border-radius:10px; padding:16px 18px; }
.vp .mp-filter { display:flex; flex-direction:column; gap:6px; min-width:150px; }
.vp .mp-filter--grow { flex:1 1 240px; }
.vp .mp-filter--btn { justify-content:flex-end; }
.vp .mp-filter label { font-size:13px; font-weight:600; color:#355842; }
.vp .mp-filters .form-control { min-height:44px; border:1.5px solid #dfe8e1; border-radius:8px;
	background:#fff; padding:10px 12px; font-size:15px; }
.vp .mp-filters .form-control:focus { border-color:#2f7d4d; box-shadow:0 0 0 3px rgba(45,106,79,.15); outline:none; }
.vp .mp-signal { margin-top:14px; }

/* ---- Board grid + cards ---- */
.vp .mp-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:6px; }
.vp .mp-card { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.vp .mp-card-photo { position:relative; aspect-ratio:4/3; background:#eef6f0; overflow:hidden; }
.vp .mp-card-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.vp .mp-card-noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:44px; }
.vp .mp-badge { position:absolute; top:10px; left:10px; }
.vp .mp-badge--donate { background:#d8f3dc; color:#1c3a2a; border-color:#95d5b2; }
.vp .mp-badge--loan { background:#eaf2fb; color:#0b3d69; border-color:#bcd7f0; }
.vp .mp-card-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.vp .mp-card-title { font-size:17px; margin:0; color:#1c3a2a; }
.vp .mp-card-cat { font-size:14px; color:#5f6b63; margin:0; }
.vp .mp-chip-op { align-self:flex-start; }
.vp .mp-card-meta { display:flex; flex-direction:column; gap:2px; font-size:14px; margin:2px 0 0; }
.vp .mp-card-by { font-size:13px; }
.vp .mp-card-caption { font-size:14px; color:#48534c; margin:0; }
.vp .mp-card-actions { margin-top:auto; padding-top:6px; }
.vp .mp-coord-note { font-size:13px; color:#7a7a70; font-style:italic; }

/* ---- Pager ---- */
.vp .mp-pager { display:flex; justify-content:center; gap:12px; margin-top:26px; }

/* ---- Empty states ---- */
.vp .mp-empty { text-align:center; background:#f7faf8; border:1px dashed #cfe2d3; border-radius:12px; padding:40px 24px; }
.vp .mp-empty .vp-emoji { font-size:40px; }
.vp .mp-empty h3 { margin:8px 0 6px; color:#1c3a2a; }

/* ---- Cards: accent variants ---- */
.vp .mp-card--amber { background:#fff8f0; border-color:#e8d3bf; }
.vp .mp-check { list-style:none; padding:0; margin:6px 0 0; }
.vp .mp-check li { position:relative; padding-left:26px; margin-bottom:8px; font-size:15px; color:#2f2f2f; }
.vp .mp-check li::before { content:"✓"; position:absolute; left:0; color:#2f7d4d; font-weight:700; }

/* ---- Wizard ---- */
.vp .mp-wizard { background:#fff; border:1px solid #dfe8e1; border-radius:14px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.vp .mp-progress { height:6px; background:#eef6f0; border-radius:999px; overflow:hidden; }
.vp .mp-progress-bar { height:100%; width:16%; background:#2f7d4d; transition:width .25s ease; }
.vp .mp-step-count { margin:10px 0 18px; color:#5f6b63; }
.vp .mp-fs { border:none; padding:0; margin:0; }
.vp .mp-fs legend { font-size:20px; font-weight:700; color:#1c3a2a; margin-bottom:14px; padding:0; }
.vp .mp-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vp .mp-form-msg { margin-top:12px; color:#d32f2f; font-size:14px; min-height:18px; }
.vp .mp-inline-error { color:#d32f2f; font-size:14px; margin-top:8px; }
.vp .mp-req { color:#d32f2f; }
.vp .mp-opt { font-size:13px; font-weight:400; }
.vp .mp-hr { border:none; border-top:1px solid #e5eae6; margin:18px 0; }

/* wizard form fields */
.vp .mp-wizard .form-group { margin-bottom:16px; }
.vp .mp-wizard label { font-size:14px; font-weight:600; color:#1a1a18; display:block; margin-bottom:6px; }
.vp .mp-wizard .form-control { width:100%; background:#f5f5f0; border:2px solid #dfe8e1; border-radius:8px;
	padding:12px 14px; min-height:48px; font-size:15px; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.vp .mp-wizard .form-control:focus { background:#fff; border-color:#2f7d4d; box-shadow:0 0 0 3px rgba(45,106,79,.18); outline:none; }
.vp .mp-wizard textarea.form-control { min-height:auto; }
.vp .mp-invalid { border-color:#d32f2f !important; box-shadow:0 0 0 3px rgba(211,47,47,.12) !important; }

/* choice cards */
.vp .mp-choices { display:flex; flex-direction:column; gap:12px; }
.vp .mp-choice { display:flex; gap:12px; align-items:flex-start; border:1.5px solid #dfe8e1; border-radius:10px;
	padding:14px 16px; cursor:pointer; transition:border-color .15s, background .15s; }
.vp .mp-choice:hover { border-color:#95d5b2; background:#f7faf8; }
.vp .mp-choice input { margin-top:3px; }
.vp .mp-choice-body { display:flex; flex-direction:column; gap:2px; }
.vp .mp-choice-body span.vp-muted { font-size:14px; }

/* attestation */
.vp .mp-attest { display:flex; gap:10px; align-items:flex-start; background:#f7faf8; border:1px solid #d8e7dc;
	border-radius:10px; padding:14px 16px; font-size:15px; line-height:1.5; cursor:pointer; }
.vp .mp-attest input { margin-top:3px; }
.vp .mp-attest--slim { background:none; border:none; padding:6px 0; }

/* inline radios / help chips */
.vp .mp-inline { display:flex; flex-wrap:wrap; gap:16px; }
.vp .mp-radio { font-weight:500; }
.vp .mp-help-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vp .mp-chip-check { display:flex; gap:8px; align-items:center; border:1px solid #d8e7dc; border-radius:999px;
	padding:8px 14px; font-size:14px; font-weight:500; cursor:pointer; }
.vp .mp-chip-check:hover { background:#f0faf3; }

/* photos */
.vp .mp-thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.vp .mp-thumb { width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid #dfe8e1; }

/* review */
.vp .mp-review h4 { margin:0 0 8px; color:#1c3a2a; }
.vp .mp-review-dl { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0 0 8px; }
.vp .mp-review-dl dt { font-weight:600; color:#5f6b63; font-size:14px; }
.vp .mp-review-dl dd { margin:0; font-size:14px; color:#1a1a18; }

/* nav */
.vp .mp-nav { display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.vp .mp-nav .vp-btn:only-child { margin-left:auto; }

/* success */
.vp .mp-success { text-align:center; padding:20px 10px; }
.vp .mp-success .vp-emoji { font-size:44px; }

/* modal */
.vp + .mp-modal, .mp-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.mp-modal[hidden] { display:none; }
.mp-modal-backdrop { position:absolute; inset:0; background:rgba(15,36,24,.55); }
.mp-modal-card { position:relative; background:#fff; border-radius:14px; padding:26px; max-width:460px; width:100%;
	box-shadow:0 8px 32px rgba(0,0,0,.18); }
.mp-modal-card h3 { margin:0 0 8px; color:#1c3a2a; }
.mp-modal-close { position:absolute; top:10px; right:14px; background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color:#7a7a70; }
.mp-modal .mp-label { display:block; font-size:14px; font-weight:600; margin:10px 0 6px; }
.mp-modal .form-control { width:100%; border:2px solid #dfe8e1; border-radius:8px; padding:12px 14px; font-size:15px; font-family:inherit; }
.mp-modal .form-control:focus { border-color:#2f7d4d; box-shadow:0 0 0 3px rgba(45,106,79,.18); outline:none; }
.mp-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.mp-modal-msg { margin-top:12px; font-size:14px; color:#2f7d4d; min-height:18px; }

/* ---- Responsive ---- */
@media (max-width:900px) {
	.vp .mp-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
	.vp .mp-help-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
	.vp .mp-grid { grid-template-columns:1fr; }
	.vp .mp-two { grid-template-columns:1fr; }
	.vp .mp-filter { min-width:0; flex:1 1 100%; }
	.vp .mp-wizard { padding:18px; }
	.vp .mp-nav { flex-direction:column-reverse; }
	.vp .mp-nav .vp-btn { width:100%; }
}

/* ---- Value-prop row ---- */
.vp .mp-values .vp-card { text-align:left; }
.vp .mp-value h3 { font-size:16px; margin:6px 0 4px; color:#1c3a2a; }
.vp .mp-value p { font-size:14px; color:#5f6b63; margin:0; }

/* ---- Category count rail ---- */
.vp .mp-catrail { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.vp .mp-cattag { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
	background:#fff; border:1px solid #d8e7dc; color:#355842; font-size:14px; font-weight:600; text-decoration:none; transition:background .15s, border-color .15s; }
.vp .mp-cattag:hover { background:#f0faf3; border-color:#95d5b2; }
.vp .mp-cattag.is-active { background:#2f7d4d; border-color:#2f7d4d; color:#fff; }
.vp .mp-catnum { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
	border-radius:999px; background:#eef6f0; color:#2f7d4d; font-size:12px; font-weight:700; }
.vp .mp-cattag.is-active .mp-catnum { background:rgba(255,255,255,.22); color:#fff; }

/* ---- Mission band + real stats ---- */
.vp .mp-mission { background:#1c3a2a; color:#e8f3ec; border-radius:14px; padding:34px 30px; text-align:center; }
.vp .mp-mission h2 { color:#fff; margin:0 0 8px; }
.vp .mp-mission p { color:#b7e4c7; max-width:640px; margin:0 auto; }
.vp .mp-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:34px; margin-top:22px; }
.vp .mp-stat { display:flex; flex-direction:column; gap:2px; }
.vp .mp-stat-num { font-size:34px; font-weight:700; color:#95d5b2; line-height:1; }
.vp .mp-stat-lbl { font-size:13px; color:#b7e4c7; }
@media (max-width:600px) { .vp .mp-stats { gap:22px; } .vp .mp-stat-num { font-size:28px; } }

/* ---- Garage/shed rotating word (hero): crossfade + width-ease so punctuation hugs
       the word and the rest of the line glides. NO overflow clipping — it cropped the
       "g" descender and last letter; the swap happens while opacity is 0, so any
       momentary overflow during the ease is invisible anyway. ---- */
.vp .mp-rot { display:inline-block; white-space:nowrap;
	transition:opacity .35s ease, width .35s ease; }

/* ---- Loan panel + borrow modal ---- */
.vp .mp-loan-h { margin:0 0 4px; color:#1c3a2a; font-size:17px; }
.mp-modal .mp-borrow-acks { max-height:240px; overflow-y:auto; border:1px solid #e5eae6; border-radius:8px; padding:6px 10px; margin-top:6px; }
.mp-modal .mp-borrow-ack { font-size:13.5px; line-height:1.45; }
.mp-modal .mp-borrow-ack input { flex-shrink:0; }

/* ---- Marketplace gallery strip (intake page cross-sell) ---- */
.vp .mp-galstrip { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:14px; }
.vp .mp-galcard { display:block; background:#fff; border:1px solid #dfe8e1; border-radius:10px; overflow:hidden;
	text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:box-shadow .2s, transform .2s; }
.vp .mp-galcard:hover { box-shadow:0 6px 18px rgba(47,125,77,.13); transform:translateY(-2px); }
.vp .mp-galphoto { display:block; aspect-ratio:4/3; background:#eef6f0; }
.vp .mp-galphoto img { width:100%; height:100%; object-fit:cover; display:block; }
.vp .mp-galbody { display:block; padding:10px 14px 12px; }
.vp .mp-galname { display:block; font-weight:700; font-size:14.5px; color:#1c3a2a;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vp .mp-galmeta { display:block; font-size:13px; color:#5f6b63; margin-top:2px; }
@media (max-width:600px) { .vp .mp-galstrip { grid-template-columns:1fr; } }

/* reduced motion */
@media (prefers-reduced-motion:reduce) {
	.vp .mp-progress-bar, .vp .mp-card, .vp .mp-rot, .vp .mp-galcard { transition:none; }
}