/* tp-listings.css (W4 page 2, 10/24/2026): Search Company Pages (cps/listings.aspx) in the new bar, both looks.
   1. The directory grid and its cards, moved out of the page's style block (same class names: the Load more web method
      appends cards with them). 2. The shared CompanyPageFilters control, shown here in SingleBox mode, dressed as the page's
      toolbar from this file only: the control's own title is hidden (the page header carries it), the box and Search
      button take the toolbar sizes and the brand green, the example chips become pills. The control's markup and script
      are untouched, so the other pages that use it keep their look. */

/* 1. grid and cards */
.tp-cl .listing-grid-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; margin: 0; }
.tp-cl .listing-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 16px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; box-sizing: border-box; position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.tp-cl .listing-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, .06); }
.tp-cl .listing-card.verified-card { border-color: var(--tp-green, #10b981); box-shadow: inset 0 3px 0 var(--tp-green, #10b981), 0 1px 3px rgba(0, 0, 0, .04); }
.tp-cl .listing-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.tp-cl .listing-card-title { font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.3; margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-family: inherit; text-transform: none; letter-spacing: 0; }
.tp-cl .badge-container { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; flex: 0 0 auto; max-width: 130px; }
.tp-cl .verified-badge, .tp-cl .small-biz-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.tp-cl .verified-badge { background: var(--tp-green-soft, #ecfdf5); color: var(--tp-green-ink, #047857); border: 1px solid #a7f3d0; }
.tp-cl .expired-badge { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }   /* handoff 31 (10/28/2026): SAM registration expired, page paused */
.tp-cl .small-biz-badge { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.tp-cl .listing-card-location { font-size: 13px; color: #64748b; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.tp-cl .listing-card-location strong { font-weight: 600; color: #475569; }
.tp-cl .listing-card-location + .listing-card-location { margin-bottom: 12px; }
.tp-cl .listing-card-label { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; font-weight: 700; }
.tp-cl .naics-badge { display: inline-block; background: #f1f5f9; color: #334155; font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 4px; margin-right: 4px; }
.tp-cl .naics-text { font-size: 13px; color: #334155; line-height: 1.35; }
.tp-cl .mb-3 { margin-bottom: 12px; }
.tp-cl .cert-container { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tp-cl .cert-badge { display: inline-block; background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.3; }
.tp-cl .border-top.pt-3.mt-auto { border-top: 1px solid #f1f5f9; padding-top: 12px; margin-top: auto; }
.tp-cl .btn-select-teal, .tp-cl a.btn-select-teal, .tp-cl a.btn-select-teal:visited { display: block; width: 100%; text-align: center; background: var(--tp-green, #10b981); color: #fff; border: 1px solid var(--tp-green, #10b981); border-radius: 6px; padding: 8px 14px; font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.tp-cl a.btn-select-teal:hover, .tp-cl a.btn-select-teal:focus { background: var(--tp-green-dark, #059669); border-color: var(--tp-green-dark, #059669); color: #fff; text-decoration: none; }
.tp-cl span.btn-select-teal { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; cursor: default; opacity: 1 !important; }
.tp-cl .tp-cl-prompt { color: #64748b; }
.tp-cl .tp-cl-prompt-l { font-weight: 700; color: #0f172a; }
.tp-cl .tp-cl-prompt-t { font-style: italic; }
.tp-cl .tp-cl-more .tp-btn.disabled, .tp-cl .tp-cl-more .tp-btn[disabled] { opacity: .45; pointer-events: none; }

/* 2. the filters control as the toolbar */
.tp-cl .filter-card-container { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.tp-cl .single-box-title { display: none; }
.tp-cl .single-box-wrap { max-width: 760px; }
.tp-cl .single-box-input { height: 42px; padding: 8px 100px 8px 14px; font-size: 15px; border: 1px solid #e2e8f0; border-radius: 8px; }
.tp-cl .single-box-input:focus { border-color: var(--tp-green, #10b981); box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); }
.tp-cl .single-box-go, .tp-cl .single-box-go:hover, .tp-cl .single-box-go:focus { top: 4px; right: 4px; height: 34px; padding: 0 16px; border-radius: 6px; background: var(--tp-green, #10b981); color: #fff; font-size: 13.5px; }
.tp-cl .single-box-go:hover, .tp-cl .single-box-go:focus { background: var(--tp-green-dark, #059669); }
.tp-cl .single-box-hint { font-size: 13px; color: #64748b; margin-top: 8px; }
.tp-cl .single-box-ai-link { font-size: 13px; color: #64748b; margin-top: 6px; }
.tp-cl .single-box-ai-link a { color: #2d80d2; font-weight: 600; }
.tp-cl .single-box-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: #64748b; }
.tp-cl .single-box-chips a.ai-example-chip, .tp-cl .single-box-chips a.ai-example-chip:visited { display: inline-flex; align-items: center; padding: 4px 11px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334155; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.tp-cl .single-box-chips a.ai-example-chip:hover { border-color: #2d80d2; color: #2d80d2; }
.tp-cl .single-box-msg { font-size: 13.5px; margin-top: 8px; }
.tp-cl .single-box-clear { font-weight: 600; }
.tp-cl .ai-collapse-header { margin: 10px 0 0; }
.tp-cl .ai-collapse-btn { border-color: #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.tp-cl .ai-search-body .btn-ai-search, .tp-cl .ai-search-body .btn-ai-search:hover { background: var(--tp-green, #10b981); border-color: var(--tp-green, #10b981); color: #fff; }
.tp-cl .ai-search-body textarea.form-control { border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: none; }

@media (max-width: 1500px) { .tp-cl .listing-grid-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .tp-cl .listing-grid-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .tp-cl .listing-grid-wrapper { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tp-cl .listing-card { min-height: 0; padding: 14px; }
    .tp-cl .single-box-wrap { max-width: none; }
    .tp-cl .tp-cl-more .tp-pg-text { flex: 1 1 100%; }
}