/*
 * Directory seeds + claim flow (Wave G Phase 1).
 *
 * Loaded on three surfaces: the category pages (for the seed CARD modifier), the seed listing
 * page, and the claim/removal screens. Kept as one file rather than folded into directory.css
 * so everything this wave added to a public page can be read, reviewed or removed as a unit.
 *
 * Base tokens (--brand-primary, --cream, --radius-pill) come from app.css / site.css; every
 * value below falls back so this file also renders correctly on its own.
 *
 * .pill-btn is defined in site.css as WHITE on the dark nav. On these cream pages it has to be
 * the other way round, so the two scopes below re-skin it rather than introducing a second
 * button class that would drift from the platform's one button shape.
 */

/* ── seed cards on a category page ──────────────────────────────────────────────────────── */

.listing-card.seed-card { background: rgba(255,255,255,0.6); border-style: dashed; border-color: rgba(42,42,42,0.14); }
.listing-card.seed-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.07); }
.listing-card.seed-card .listing-img { height: 120px; background: #ececea; }
.listing-card.seed-card .listing-name { color: #4a4a4a; }

.seed-badge {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
  padding: 0.25rem 0.7rem; border-radius: 9999px;
  background: rgba(42,42,42,0.82); color: #fff;
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
}
.seed-badge-lg {
  position: static; display: inline-block;
  font-size: 0.7rem; padding: 0.3rem 0.85rem;
}
/* A seed card with a crawled share photo fills its frame exactly like a merchant card's. */
.listing-card.seed-card .listing-img img { width: 100%; height: 100%; object-fit: cover; }
/* The seed rating pill sits on its OWN line under the category, not beside the name: it carries
   the review count and the required "on Google" attribution, so it is far wider than a merchant's
   bare number and used to push every long business name onto two lines. Same pill styling as
   .listing-rating (directory.css) - inline-flex so it hugs its text instead of filling the row. */
.listing-card.seed-card .listing-rating {
  color: #6b6b6b; white-space: nowrap;
  display: inline-flex; margin-bottom: 0.75rem;
}

/* ── seed listing page ──────────────────────────────────────────────────────────────────── */

.seed-headline { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.seed-sub { color: #6b6b6b; font-size: 0.95rem; }
.seed-rating { color: #6b6b6b; font-size: 0.9rem; font-weight: 600; }

/* Hero photo: the crawled share image, capped so a tall image cannot push the listing
   facts below the fold. Same corner radius as the blocks underneath it. */
.seed-photo {
  max-height: 320px; overflow: hidden;
  border-radius: 1.25rem; margin-bottom: 1.25rem;
  background: #ececea;
}
.seed-photo img { display: block; width: 100%; max-height: 320px; object-fit: cover; }

/* The single owner prompt. Reads at .seed-meta's size and colour on purpose: it is a
   footnote for the one visitor in a hundred who owns the business, not a call to action
   aimed at everyone else. Underlined only on hover so the line stays quiet. */
.seed-owner-line {
  color: #8a8a8a; font-size: 0.78rem; line-height: 1.7;
  text-align: center; margin: 1.5rem 0 0.35rem;
}
.seed-owner-line a { color: #6b6b6b; text-decoration: none; }
.seed-owner-line a:hover { color: var(--brand-primary, #2a2a2a); text-decoration: underline; }

.seed-body { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem 4rem; }
.seed-block {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}
.seed-block h2 {
  font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700;
  color: var(--brand-primary, #2a2a2a); margin: 0 0 0.9rem;
}
.seed-block p { color: #555; line-height: 1.75; margin: 0; }

/* align-items: baseline puts the small uppercase label on the same text baseline as the
   first line of its value; without it the label floats above the value (Brian, Wave G3). */
.seed-facts { display: grid; grid-template-columns: 8rem 1fr; gap: 0.6rem 1rem; margin: 0; align-items: baseline; }
.seed-facts dt { color: #8a8a8a; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.6; }
.seed-facts dd { margin: 0; color: #3a3a3a; font-size: 0.92rem; line-height: 1.6; word-break: break-word; }
.seed-facts dd a { color: #3a3a3a; }

.seed-hours, .seed-services { list-style: none; margin: 0; padding: 0; }
.seed-hours li, .seed-services li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0; border-bottom: 1px solid rgba(42,42,42,0.06);
  font-size: 0.92rem; color: #3a3a3a;
}
.seed-hours li:last-child, .seed-services li:last-child { border-bottom: none; }
.seed-hours-day { font-weight: 600; color: #555; }
.seed-price { font-weight: 700; color: var(--brand-primary, #2a2a2a); }

.seed-meta { color: #8a8a8a; font-size: 0.78rem; line-height: 1.7; text-align: center; }
.seed-attribution { display: block; margin-top: 0.35rem; }
.seed-attribution a { color: #8a8a8a; }

/* Wave G2 removed .seed-lede, .seed-actions, .seed-claim-cta, .seed-remove-link,
   .seed-claim-hint and .seed-note along with the markup that used them. The seed page has no
   button on it any more, so the .pill-btn re-skin that lived here went with them; the claim
   and removal SCREENS keep their own further down this file. */

/* ── claim / removal screens ────────────────────────────────────────────────────────────── */

.claim-wrap { max-width: 34rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.claim-card {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 1.5rem;
  padding: 2rem;
}
.claim-back { display: inline-block; margin-bottom: 1rem; color: #777; font-size: 0.8rem; text-decoration: none; }
.claim-back:hover { color: var(--brand-primary, #2a2a2a); text-decoration: underline; }
.claim-card h1 {
  font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 700;
  color: var(--brand-primary, #2a2a2a); margin: 0 0 0.4rem;
}
.claim-sub { color: #555; font-size: 0.95rem; margin: 0 0 1rem; }
.claim-lede { color: #6b6b6b; font-size: 0.9rem; line-height: 1.7; margin: 0 0 1.5rem; }
.claim-note { color: #8a8a8a; font-size: 0.8rem; line-height: 1.7; margin: 1rem 0 0; }
.claim-optional { font-weight: 400; color: #aaa; }

.claim-ok, .claim-err {
  border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.85rem;
  margin-bottom: 1.25rem; line-height: 1.6;
}
.claim-ok  { background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #166534; }
.claim-err { background: #fef2f2; border: 1.5px solid #fecaca; color: #991b1b; }

.claim-option {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border: 1px solid rgba(42,42,42,0.12); border-radius: 1rem;
  padding: 1rem 1.1rem; margin-bottom: 0.85rem;
}
.claim-option-body { flex: 1 1 14rem; min-width: 0; }
.claim-option-title { font-weight: 700; font-size: 0.92rem; color: var(--brand-primary, #2a2a2a); }
.claim-option-detail { color: #777; font-size: 0.82rem; margin-top: 0.2rem; word-break: break-word; }

.claim-label { display: block; margin: 1rem 0 0.35rem; font-size: 0.8rem; font-weight: 600; color: #555; }
.claim-input {
  width: 100%; box-sizing: border-box;
  padding: 0.7rem 0.9rem; border: 1.5px solid #e2e2de; border-radius: 0.75rem;
  font-family: inherit; font-size: 0.92rem; background: #fff; color: #2a2a2a;
}
.claim-input:focus { outline: none; border-color: var(--brand-primary, #2a2a2a); }
.claim-code { letter-spacing: 0.5em; font-size: 1.3rem; font-weight: 700; text-align: center; }
.claim-select {
  padding: 0.4rem 0.6rem; border: 1.5px solid #e2e2de; border-radius: 0.6rem;
  font-family: inherit; font-size: 0.82rem; background: #fff; color: #2a2a2a; max-width: 100%;
}

.claim-manual { margin-top: 1.75rem; border-top: 1px solid rgba(42,42,42,0.1); padding-top: 1.25rem; }
.claim-manual summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; color: #555; }
.claim-have-code { margin: 1.25rem 0 0; font-size: 0.85rem; color: #6b6b6b; }
.claim-done { text-align: center; }

.claim-card .pill-btn {
  display: inline-block; margin-top: 1.25rem; border: none; cursor: pointer;
  background: var(--brand-primary, #2a2a2a); color: #fff;
  font-family: inherit;
}
.claim-option .pill-btn { margin-top: 0; }
.claim-card .pill-btn:hover { background: #3a3a3a; }

/* ── signup: claim banner + duplicate interstitial ──────────────────────────────────────── */

.claim-banner {
  background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #166534;
  border-radius: 0.75rem; padding: 0.75rem 1rem;
  font-size: 0.85rem; line-height: 1.6; margin-bottom: 1.5rem;
}
.dup-card {
  background: #fffbeb; border: 1.5px solid #fde68a;
  border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.5rem;
}
.dup-card-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05rem; color: #78350f; margin-bottom: 0.4rem; }
.dup-card-lede { color: #7c5b12; font-size: 0.85rem; line-height: 1.65; margin: 0 0 0.9rem; }
.dup-card-biz {
  background: #fff; border: 1px solid #fde68a; border-radius: 0.75rem;
  padding: 0.8rem 1rem; font-size: 0.9rem; color: #3a3a3a; line-height: 1.6;
  margin-bottom: 1rem;
}
.dup-card-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dup-card-actions .btn-next { text-decoration: none; }
.dup-card-no {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  color: #7c5b12; text-decoration: underline;
}

@media (max-width: 768px) {
  .seed-facts { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .seed-facts dd { margin-bottom: 0.6rem; }
  .claim-card { padding: 1.5rem 1.25rem; }
  .claim-option { align-items: stretch; }
  .claim-option .pill-btn { width: 100%; text-align: center; }
}

/* Wave G4d seed lightbox
 *
 * A category page opens an unclaimed seed's own page inside this dialog instead of leaving
 * the grid. Desktop only: the JS in directory.php never shows this on a narrow viewport, and
 * the panel simply never gets an href to open on mobile, but the max-width rule below is
 * defense in depth so nothing can render it there even if that ever changed.
 */
.seed-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.seed-lightbox[hidden] { display: none; }
.seed-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(42,42,42,0.55);
}
.seed-lightbox-dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 46rem; max-height: 90vh;
  overflow-y: auto;
  background: var(--cream, #f8f7f2);
  border-radius: 1.25rem;
}
.seed-lightbox-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 1.25rem;
  background: var(--cream, #f8f7f2);
  border-bottom: 1px solid rgba(42,42,42,0.08);
}
.seed-lightbox-open-link { font-size: 0.82rem; font-weight: 600; color: var(--brand-primary, #2a2a2a); text-decoration: none; }
.seed-lightbox-open-link:hover { text-decoration: underline; }
.seed-lightbox-close {
  border: none; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: #6b6b6b; padding: 0.25rem 0.5rem;
}
.seed-lightbox-close:hover { color: var(--brand-primary, #2a2a2a); }
/* The grid IS the breadcrumb once a listing opens over it, and the hero needs less air in a
   dialog than it gets as a full page. */
.seed-lightbox-dialog .breadcrumb { display: none; }
.seed-lightbox-dialog .dir-hero { padding: 1.5rem 1.5rem 1rem; }

body.seed-lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .seed-lightbox-dialog { animation: seed-lightbox-in 0.18s ease; }
}
@keyframes seed-lightbox-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .seed-lightbox { display: none !important; }
}