/* Pet Records — Puppy Search: PHP-port glue only.
   market.css is kept verbatim from the design. This file holds the few small
   adjustments needed because the server-rendered markup uses semantic form
   controls (labels wrapping hidden inputs, anchor chips) where the React
   prototype used <button>/<div> + state. Visual output is unchanged. */

/* Filter checkboxes/radios are real <label>s wrapping a hidden input. */
.filter-rail .check,
.filter-rail .vlevel { user-select: none; }
.filter-rail .check input,
.filter-rail .vlevel input,
.segmented input { position: absolute; opacity: 0; pointer-events: none; }

/* Segmented control rendered as labels rather than buttons. */
.segmented label {
  flex: 1; padding: 8px 6px; border-radius: 7px; font-size: 13px; color: var(--ink-3);
  font-weight: 500; text-align: center; cursor: pointer; transition: background .12s, color .12s;
}
.segmented label.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,28,24,.08); }

/* Active-filter chips are anchors (each removes itself); the X sits inside. */
a.fchip { text-decoration: none; cursor: pointer; }
.fchip .x-btn {
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent-ink); opacity: .7;
}
.fchip:hover .x-btn { opacity: 1; }

/* The breed "Clear" link inside the filter heading. */
.fgroup h4 a.clear { text-decoration: none; }

/* "Report this listing" link on the puppy detail page. */
.report-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-3);
}
.report-link:hover { color: var(--danger); }
.report-link svg { opacity: .8; }

/* Real lead photo on a puppy card (DB-backed listings). Fills the same
   placeholder area; the diagonal-line texture is for empty placeholders only,
   so it's suppressed when a real photo is present. The label scrim stays for
   legibility. */
.pcard .ph .ph-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.pcard .ph.has-photo::after { display: none; }
.pcard .ph.has-photo .ph-lbl { z-index: 1; }

/* Kennel mini-card avatar can carry a real logo. */
.kmini .km-av.has-logo { background-size: cover; background-position: center; }
.kmini .km-av.has-logo::after { display: none; }

/* Breeder/kennel avatars carrying a real logo (detail + profile). */
.breeder-card .bc-avatar.has-logo,
.kennel-avatar.has-logo { background-size: cover; background-position: center; }
.breeder-card .bc-avatar.has-logo::after,
.kennel-avatar.has-logo::after { display: none; }

/* Puppy detail gallery with real photos. */
.gallery .main .g-main-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.gallery .main:has(.g-main-img)::after { display: none; }
.gthumb.has-img { background-size: cover; background-position: center; }
.gthumb.has-img::after { display: none; }

/* ===========================================================================
   Accounts + messaging (buyer auth, inbox, threads). Added with the Pet Search
   accounts feature. Reuses the sage palette tokens already in site.css.
   =========================================================================== */

/* Auth forms (login / register). */
.ps-form { display: flex; flex-direction: column; gap: 16px; }
.ps-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-1, #1F2A24); }
.ps-field input { padding: 12px 14px; border: 1px solid var(--line, #E5E7E2); border-radius: 12px; font: inherit; font-weight: 400; background: var(--surface, #fff); }
.ps-field input:focus { outline: none; border-color: var(--accent, #4F6E58); box-shadow: 0 0 0 3px var(--accent-soft, #DDE6DC); }
.ps-field small { font-weight: 400; }

/* Inbox list. */
.thread-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.thread-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line, #E5E7E2); border-radius: 14px; text-decoration: none; color: inherit; background: var(--surface, #fff); transition: border-color .15s; }
.thread-item:hover { border-color: var(--accent, #4F6E58); }
.thread-item.unread { border-color: var(--accent, #4F6E58); background: var(--accent-soft, #DDE6DC); }
.thread-item .ti-photo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft, #DDE6DC) center/cover no-repeat; }
.thread-item .ti-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.thread-item .ti-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.thread-item .ti-dog { font-size: 12.5px; }
.thread-item .ti-preview { font-size: 13.5px; color: var(--ink-2, #6B7670); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-item .ti-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #4F6E58); }

/* Thread header. */
.thread-head .th-dog { display: flex; align-items: center; gap: 12px; }
.thread-head .th-photo { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft, #DDE6DC) center/cover no-repeat; display: inline-block; }
.thread-head strong { display: block; font-size: 16px; }

/* Message list + bubbles. */
.msg-list { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 18px; min-height: 200px; }
.msg { max-width: 78%; align-self: flex-start; }
.msg.mine { align-self: flex-end; }
.msg .msg-text { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface, #fff); border: 1px solid var(--line, #E5E7E2); font-size: 14.5px; line-height: 1.5; }
.msg.mine .msg-text { border-radius: 14px 14px 4px 14px; background: var(--accent, #4F6E58); color: #fff; border-color: var(--accent, #4F6E58); }
.msg .msg-meta { font-size: 11px; color: var(--ink-3, #9AA3A0); margin-top: 3px; }
.msg.mine .msg-meta { text-align: right; }
.msg-system { align-self: center; font-size: 12.5px; color: var(--ink-3, #9AA3A0); padding: 4px 0; }

/* Contract / invoice link cards. */
.msg-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, #E5E7E2); border-radius: 14px; background: var(--surface, #fff); }
.msg-card .ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft, #DDE6DC); color: var(--accent, #4F6E58); flex: 0 0 auto; }
.msg-card .mc-body { flex: 1 1 auto; min-width: 0; }
.msg-card .mc-body strong { display: block; font-size: 14px; }
.msg-card .mc-body small { color: var(--ink-3, #9AA3A0); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }

/* Compose box. */
.msg-compose { display: flex; gap: 10px; align-items: flex-end; position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--bg, #F4F6F2) 30%); }
.msg-compose textarea { flex: 1 1 auto; padding: 12px 14px; border: 1px solid var(--line, #E5E7E2); border-radius: 14px; font: inherit; resize: vertical; background: var(--surface, #fff); }
.msg-compose textarea:focus { outline: none; border-color: var(--accent, #4F6E58); box-shadow: 0 0 0 3px var(--accent-soft, #DDE6DC); }