/* Share sheet + "shared with you" recipient banners.
   Loaded on /search and /value (and their /s/<id> recipient landings).
   Reuses the base .modal-backdrop/.modal-card chrome + CSS variables from
   content_base.css, so it inherits light/dark theming automatically. */

/* ── Share sheet ─────────────────────────────────────────────── */
.share-modal-card {
 max-width: 460px;
 text-align: center;
}
.share-modal-icon {
 width: 48px; height: 48px; margin: 2px auto 12px;
 display: flex; align-items: center; justify-content: center;
 border-radius: 999px;
 background: var(--accent-light, rgba(11,77,62,0.10));
 color: var(--accent, #0B4D3E);
}
.share-modal-icon svg { width: 22px; height: 22px; }
.share-modal-title {
 font-size: 20px; font-weight: 700; margin: 0 0 4px;
 color: var(--text);
}
.share-modal-sub {
 font-size: 14px; color: var(--muted); margin: 0 0 16px; line-height: 1.5;
}

.share-modal-preview {
 text-align: left;
 background: var(--surface, var(--sunken));
 border: 1px solid var(--hairline, rgba(15,30,26,0.08));
 border-radius: var(--radius-md, 12px);
 padding: 12px 14px;
 margin-bottom: 16px;
}
.share-modal-preview:empty { display: none; }
.share-preview-line { display: flex; align-items: center; gap: 10px; }
.share-preview-thumb {
 width: 46px; height: 46px; flex: 0 0 auto;
 border-radius: 8px; object-fit: cover; background: var(--sunken);
}
.share-preview-body { min-width: 0; }
.share-preview-title {
 font-size: 14px; font-weight: 650; color: var(--text);
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-preview-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.share-preview-badge {
 display: inline-block; font-size: 11.5px; font-weight: 700;
 padding: 1px 7px; border-radius: 999px; margin-left: 6px;
 background: var(--good-light, #D9E4DD); color: var(--good, #0B4D3E);
 vertical-align: middle;
}

.share-url-row { display: flex; gap: 8px; margin-bottom: 14px; }
.share-url-input {
 flex: 1 1 auto; min-width: 0;
 font-size: 13px; padding: 10px 12px;
 border: 1px solid var(--hairline, rgba(15,30,26,0.14));
 border-radius: var(--radius-sm, 8px);
 background: var(--card); color: var(--muted);
 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.share-url-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text); }
.share-copy-btn {
 flex: 0 0 auto;
 padding: 10px 16px; font-size: 14px; font-weight: 650;
 border: none; border-radius: var(--radius-sm, 8px);
 background: var(--accent, #0B4D3E); color: #FAF7F0; cursor: pointer;
 transition: background 0.15s ease;
}
.share-copy-btn:hover { filter: brightness(1.08); }
.share-copy-btn.is-copied { background: var(--good, #0B7A5B); }

.share-channels { display: flex; gap: 8px; }
.share-channel {
 flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px;
 padding: 10px 8px; font-size: 13.5px; font-weight: 600;
 border-radius: var(--radius-sm, 8px);
 border: 1px solid var(--hairline, rgba(15,30,26,0.12));
 background: var(--card); color: var(--text);
 text-decoration: none; cursor: pointer;
 transition: background 0.15s ease, border-color 0.15s ease;
}
.share-channel:hover { background: var(--sunken); }
.share-channel svg { width: 17px; height: 17px; flex: 0 0 auto; }
.share-channel--wa { color: #1EB258; }
.share-channel--wa:hover { border-color: #1EB258; background: rgba(30,178,88,0.08); }

.share-modal-foot { font-size: 12px; color: var(--muted); margin: 14px 0 0; }

@media (max-width: 420px) {
 .share-channel span { font-size: 12.5px; }
}

/* Inspector Share action (mirrors the icon-only Remove button; revealed +
   wired by search/render.js). */
.listing-detail-action.share {
 background: transparent; color: var(--muted); border-color: transparent;
 padding: 11px 12px; flex: 0 0 auto;
}
.listing-detail-action.share:hover { background: var(--accent-light, rgba(11,77,62,0.10)); color: var(--accent, #0B4D3E); }
.listing-detail-action-row .share { flex: 0 0 auto; padding: 11px 14px; }

/* ── Recipient: "shared with you" ribbon (search inspector) ──── */
.ld-shared-ribbon {
 display: flex; align-items: center; gap: 12px;
 padding: 10px 14px; margin-bottom: 14px;
 border-radius: var(--radius-md, 12px);
 background: var(--accent-light, rgba(11,77,62,0.08));
 border: 1px solid var(--accent, rgba(11,77,62,0.20));
}
.ld-shared-ribbon .ld-shared-icon {
 flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px;
 display: flex; align-items: center; justify-content: center;
 background: var(--accent, #0B4D3E); color: #FAF7F0;
}
.ld-shared-ribbon .ld-shared-icon svg { width: 16px; height: 16px; }
.ld-shared-text { flex: 1 1 auto; min-width: 0; }
.ld-shared-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ld-shared-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ld-shared-cta {
 flex: 0 0 auto; white-space: nowrap;
 font-size: 13px; font-weight: 650; cursor: pointer;
 padding: 7px 12px; border-radius: var(--radius-sm, 8px);
 border: none; background: var(--accent, #0B4D3E); color: #FAF7F0;
 text-decoration: none;
}
.ld-shared-cta:hover { filter: brightness(1.08); }
/* Two-column inspector (≥768px): the card's floating × close button
   (38px at top:14/right:14) overlays this column's top-right corner —
   inset the ribbon so its CTA clears it, and align the left edge with
   the header text below. On the stacked mobile sheet the ribbon sits
   below the photo band, clear of the ×, so it stays full-bleed there.
   flex-wrap + the text minimum let the CTA drop onto its own row in
   the narrow tablet column (768–1023px) instead of crushing the text
   to one word per line. */
@media (min-width: 768px) {
 .ld-shared-ribbon { margin: 14px 62px 14px 34px; flex-wrap: wrap; }
 .ld-shared-ribbon .ld-shared-text { min-width: 140px; }
}

/* ── Recipient: "shared with you" banner (valuation report) ──── */
.val-shared-banner {
 display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
 padding: 14px 18px; margin: 0 auto 18px;
 max-width: var(--val-max, 960px);
 border-radius: var(--radius-lg, 16px);
 background: linear-gradient(135deg, var(--accent-light, rgba(11,77,62,0.10)), var(--surface, transparent));
 border: 1px solid var(--accent, rgba(11,77,62,0.20));
}
.val-shared-banner .vsb-icon {
 flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
 display: flex; align-items: center; justify-content: center;
 background: var(--accent, #0B4D3E); color: #FAF7F0;
}
.val-shared-banner .vsb-icon svg { width: 18px; height: 18px; }
.vsb-text { flex: 1 1 240px; min-width: 0; }
.vsb-title { font-size: 15px; font-weight: 700; color: var(--text); }
.vsb-sub { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.vsb-cta {
 flex: 0 0 auto; white-space: nowrap;
 font-size: 14px; font-weight: 650; cursor: pointer;
 padding: 9px 16px; border-radius: var(--radius-sm, 8px);
 border: none; background: var(--accent, #0B4D3E); color: #FAF7F0;
 text-decoration: none;
}
.vsb-cta:hover { filter: brightness(1.08); }