/* ============================================================
   TEMP-USED-GUNS-NOTICE — TEMPORARY, delete this whole file when
   the client's POS switch is done (checklist in CONDITIONAL-LOGIC.md).

   USED GUNS NOTICE PAGE (page-used-guns-notice.php)
   Single-screen centered notice — heading, store address box,
   two buttons. Shared components (sec, wrap, eyebrow, sec-title,
   btn-primary, btn-outline, ffl-contact-line) come from main.css.
   ============================================================ */

.used-notice-page { min-height: 60vh; }
.used-notice-wrap { max-width: 1100px; }
/* The notice itself stays a narrow centered column; only the list is wide. */
.used-notice-head, .used-notice-box, .used-notice-cta, .used-notice-foot { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ── HEAD ────────────────────────────────────────────────── */
.used-notice-head { text-align: center; margin-bottom: 36px; }
.used-notice-sub { max-width: 620px; margin: 14px auto 0; font-size: 16px; line-height: 1.75; color: var(--mid); }

/* ── STORE ADDRESS BOX ───────────────────────────────────── */
.used-notice-box { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 4px; padding: 20px 24px; margin-bottom: 36px; }
.used-notice-box-title { font-family: var(--head); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.used-notice-box p { font-size: 14px; color: var(--mist); line-height: 1.75; margin: 0 0 8px; }
.used-notice-box p:last-child { margin-bottom: 0; }
.used-notice-box a { color: var(--gold); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.used-notice-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 56px; }
.used-notice-foot { text-align: center; }

/* ── IN-STORE LIST ───────────────────────────────────────────
   Search bar, count and table are the MA roster's (.roster-* in
   ma-law.css, filtered by ma-law.js). Only the differences live
   here: the last column is a price, not a green status tick, and
   the empty state starts hidden (the JS toggles it inline). */
.used-notice-list { margin-bottom: 36px; }
.used-notice-list-title { font-family: var(--head); font-size: 20px; font-weight: 700; color: var(--white); text-align: center; margin: 0 0 10px; }
.used-notice-list-sub { max-width: 620px; margin: 0 auto 24px; text-align: center; font-size: 14px; line-height: 1.75; color: var(--mid); }
.used-notice-list-sub a, .used-notice-list .no-results a { color: var(--gold); }
.used-notice-list .roster-table td { white-space: nowrap; }
.used-notice-list .roster-table td:nth-child(2) { white-space: normal; min-width: 160px; }
.used-notice-list .roster-table th:last-child,
.used-notice-list .roster-table td:last-child { text-align: right; }
.used-notice-list .roster-table td:last-child { color: var(--gold-lt); }
.used-notice-list .no-results { display: none; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .used-notice-head { margin-bottom: 28px; }
  .used-notice-cta a { flex: 1 1 100%; text-align: center; padding-left: 24px; padding-right: 24px; }
  /* The pinned first column must not eat the whole phone screen. */
  .used-notice-list .roster-table td:first-child { white-space: normal; min-width: 110px; max-width: 130px; }
  .used-notice-list .roster-table td:nth-child(2) { min-width: 130px; }
}