/* BGW Car Seat Finder — matches the house tool style.
   Cream page, white table card, dark ink, single green as a FILL only.
   Never white text on the green (2.30:1) — the green is a fill, ink goes on top. */

.fd { margin: 28px 0 0; }

/* ── filters ─────────────────────────────────────────────────────────── */
.fd-filters { border: 1px solid var(--bgw-hair, #e6e0d6); border-radius: 14px; background: #fff; padding: 18px 20px 6px; }
.fd-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.fd-flabel {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgb(43,42,40); opacity: .62; min-width: 132px; font-weight: 600;
}
.fd-chip {
  font: inherit; font-size: .86rem; line-height: 1;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bgw-hair, #ddd6ca);
  background: #fff; color: rgb(43,42,40);
  transition: background .12s, border-color .12s;
}
.fd-chip em { font-style: normal; opacity: .55; font-size: .78rem; margin-left: 4px; }
.fd-chip:hover { border-color: rgb(43,42,40); background: rgb(248,245,239); }
.fd-chip.is-on {
  background: rgb(43,42,40); border-color: rgb(43,42,40);
  color: rgb(247,242,234); font-weight: 600;
}
.fd-chip.is-on em { opacity: .7; }
.fd-chip:focus-visible { outline: 2px solid rgb(43,42,40); outline-offset: 2px; }

/* ── count line ──────────────────────────────────────────────────────── */
.fd-count { margin: 18px 0 12px; font-size: .95rem; color: rgba(43,42,40,.72); }
.fd-count strong { color: rgb(43,42,40); font-size: 1.05rem; }
.fd-reset {
  font: inherit; font-size: .82rem; margin-left: 10px; cursor: pointer;
  background: none; border: 0; padding: 0;
  color: rgb(43,42,40); text-decoration: underline; text-underline-offset: 3px;
}
.fd-reset:hover { opacity: .7; }

/* ── table ───────────────────────────────────────────────────────────── */
.fd-wrap { border: 1px solid var(--bgw-hair, #e6e0d6); border-radius: 14px; background: #fff; overflow-x: auto; }
.fd-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.fd-table thead th {
  text-align: left; padding: 13px 16px; white-space: nowrap;
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: rgb(43,42,40); opacity: .6; font-weight: 600;
  border-bottom: 1px solid var(--bgw-hair, #e6e0d6);
}
.fd-table td { padding: 13px 16px; border-bottom: 1px solid rgba(43,42,40,.07); vertical-align: middle; color: rgb(43,42,40); }
.fd-table tbody tr:last-child td { border-bottom: 0; }
.fd-table tbody tr:hover td { background: rgb(249,246,241); }
.fd-name { font-weight: 600; }
.fd-band { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.fd-best { color: rgba(43,42,40,.76); }
.fd-pill {
  display: inline-block; font-size: .74rem; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  background: rgb(240,236,229); color: rgb(43,42,40); white-space: nowrap;
}

/* ── actions ─────────────────────────────────────────────────────────── */
.fd-act { white-space: nowrap; }
.fd-table td { padding-top: 11px; padding-bottom: 11px; }
/* stale dark .fd-buy rules removed — superseded by the green button block below.
   left in place they beat it on specificity and painted the hover white-on-white. */
/* The theme paints a:link with its own green, which measures 2.30:1 on white —
   the documented fill-only colour. Forcing ink here; the background is a white
   table cell so ink is the readable choice. */
.fd .fd-more, .fd a.fd-more, a.fd-more {
  display: inline-block; margin-top: 8px; font-size: .8rem;
  color: rgb(43,42,40) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
.fd-more:hover { opacity: .7; }
.fd-empty { padding: 26px 16px; text-align: center; color: rgba(43,42,40,.7); }

/* ── print payoff ────────────────────────────────────────────────────── */
.fd-foot { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fd-print {
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1;
  padding: 12px 18px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgb(43,42,40); background: rgb(43,42,40); color: rgb(247,242,234);
}
.fd-print:hover { background: rgb(28,27,26); }
/* 62% opacity measured 4.23:1 — just under the 4.5 floor. Solid ink at 78%. */
.fd-note { font-size: .84rem; color: rgba(43,42,40,.78); }

@media (max-width: 720px) {
  .fd-flabel { min-width: 100%; }
  .fd-table { font-size: .88rem; }
  .fd-table thead th:nth-child(4), .fd-table td:nth-child(4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK TOOL CARDS  —  only the CARD is dark, the page stays cream.

   SPECIFICITY: `.bgw-pseo .table-card.fd-wrap` = 0,3,0 beats the shared
   `.bgw-pseo .table-card` = 0,2,0 whatever order the sheets load in. Earlier attempt:
   the shared bgw-pseo.css carries `.bgw-pseo .table-card` (0,2,0). My first
   attempt used `.fd-wrap` (0,1,0) and lost — the card stayed white with light
   text on it, 135 elements at 1.11:1. The fit calculator wins by writing the
   SAME selector and loading later. Matching it exactly here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* filter card — not a .table-card, so this one is ours to set */
.fd-filters {
  background: rgb(43, 42, 40);
  border-color: rgba(255, 255, 255, .12);
  color: #F7F2EA;
}
.bgw-pseo .fd-filters { background: rgb(43, 42, 40); }
.bgw-pseo .fd-filters .fd-flabel { color: #F7F2EA; opacity: .68; }

/* chips sit ON the dark card — light objects on a dark ground */
.bgw-pseo .fd-chip, .fd .fd-chip {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  color: #F7F2EA !important;
}
.bgw-pseo .fd-chip:hover { background: rgba(255, 255, 255, .18) !important; }
.bgw-pseo .fd-chip.is-on {
  background: #F7F2EA !important;
  border-color: #F7F2EA !important;
  color: rgb(43, 42, 40) !important;
}

/* the count line is on cream */
.fd-count { color: rgba(43, 42, 40, .78); }

/* ── the table card: same selector as bgw-fit.css, so it wins by order ──── */
.bgw-pseo .table-card.fd-wrap {
  background: rgb(43, 42, 40);
  border-color: rgba(255, 255, 255, .12);
  color: #F7F2EA;
}
.bgw-pseo .table-card.fd-wrap table { color: #F7F2EA; }
.bgw-pseo .table-card.fd-wrap thead th {
  background: rgba(255, 255, 255, .07);
  color: #F7F2EA;
  border-bottom-color: rgba(255, 255, 255, .10);
  opacity: 1;
}
.bgw-pseo .table-card.fd-wrap tbody td {
  color: #F7F2EA;
  border-top-color: rgba(255, 255, 255, .08);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.bgw-pseo .table-card.fd-wrap tbody tr:last-child td { border-bottom: 0; }
.bgw-pseo .table-card.fd-wrap strong { color: #F7F2EA; }
.bgw-pseo .table-card.fd-wrap .fd-name { color: #F7F2EA; font-weight: 600; }
.bgw-pseo .table-card.fd-wrap .fd-band { color: #F7F2EA; }
.bgw-pseo .table-card.fd-wrap .fd-best { color: rgba(247, 242, 234, .84); }
.bgw-pseo .table-card.fd-wrap .fd-pill {
  background: rgba(255, 255, 255, .13);
  color: #F7F2EA;
}
.bgw-pseo .table-card.fd-wrap .fd-empty { color: rgba(247, 242, 234, .82); }

/* THE HOVER FIX — universal, no section ids.
   The shared sheet paints tr:hover cream (bgw-pseo.css:88). Kill the row
   background, then paint the cells dark. Written exactly as the fit
   calculator does it. */
.bgw-pseo .table-card.fd-wrap tbody tr:hover { background: transparent !important; }
.bgw-pseo .table-card.fd-wrap tbody tr:hover td { background: rgb(56, 54, 51) !important; }

/* links on the dark card */
.bgw-pseo .table-card.fd-wrap a.fd-more, .fd .fd-more, a.fd-more { color: #F7F2EA !important; }
/* HOUSE BUY BUTTON — greens chosen by measurement, not by eye:
     rgb(74,106,89)  white text 6.01:1  PASS  (the site link green)
     rgb(58,85,71)   white text 8.17:1  PASS  (hover)
   The brand mint --sage rgb(143,179,159) is 2.30:1 with white — it fails, which is
   why the other tools' buttons carry a failing ratio. Not copied here.

   HOUSE BUY BUTTON — copied from bgw-fit.css so this matches the other tools
   instead of approximating them. Green fill (var(--sage)), white text, darker
   green on hover. var(--sage) rather than a hex so it tracks the theme's green;
   the sizechart sheet records that the LIGHT brand mint rgb(143,179,159) with
   white text measures 2.30:1, so --sage is deliberately the darker one. */
.bgw-pseo .table-card.fd-wrap .fd-buy,
.fd .fd-buy {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 7px 13px;
  border-radius: 3px;
  background: rgb(74, 106, 89);
  color: #fff !important;
  text-decoration: none;
  border: 1px solid rgb(74, 106, 89);
  transition: background .15s ease, transform .15s ease;
}
.bgw-pseo .table-card.fd-wrap .fd-buy:hover,
.bgw-pseo .table-card.fd-wrap .fd-buy:focus-visible,
.fd .fd-buy:hover {
  background: rgb(58, 85, 71);
  border-color: rgb(58, 85, 71);
  color: #fff !important;
  outline: none;
}


/* the note sits on cream below the card */
.fd-note { color: rgba(43, 42, 40, .78); }