/* Calculator → buy/hire options.
   Loaded only by calculators.html. Kept out of styles.css so the main
   stylesheet stays the shared shell and this stays with the feature. */

.calc-buy { margin-top: 18px; }

.calc-buy-h {
  margin: 16px 0 8px;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink, #0f1b2d);
}

.calc-buy-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Whole row is the link — a bigger tap target for someone on site with gloves on. */
.calc-buy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 14px;
  min-height: 52px;
  border: 1px solid var(--line, #dfe4ec);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .08s ease;
}
.calc-buy-row:hover,
.calc-buy-row:focus-visible {
  border-color: var(--navy, #0f1b2d);
  outline: none;
}
.calc-buy-row:active { transform: scale(.995); }

.calc-buy-name {
  flex: 1 1 60%;
  font-weight: 600;
  line-height: 1.35;
}

.calc-buy-meta {
  flex: 0 0 auto;
  font-size: .9rem;
  color: var(--muted, #5b6676);
  white-space: nowrap;
}
.calc-buy-meta strong {
  color: var(--ink, #0f1b2d);
  font-size: 1.02rem;
}

/* Affiliate disclosure sits with the links themselves — Awin and the CAP code
   both want it visible where the click happens, not only in the footer. */
.aff-note {
  margin-top: 10px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted, #5b6676);
}

@media (max-width: 420px) {
  .calc-buy-row { flex-direction: column; align-items: flex-start; }
  .calc-buy-meta { white-space: normal; }
}

/* ── identified brick → buy it ─────────────────────────────────────────────
   The identifier names the brick; this is the line under it that lets you
   actually order it. Loaded by identify.html as well as calculators.html. */
.bid-buy { display: block; margin-top: 6px; }

.bid-buy-link {
  display: inline-block;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent, #b4541f);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.bid-buy-link:hover { opacity: .8; }
.bid-buy-link strong { font-weight: 800; }

/* ── lead capture ──────────────────────────────────────────────────────────
   Wording is deliberately "we'll tell you when alerts are live", not "we'll
   email you this" — BrickBuddy has no mail sending, so the second would be a
   promise it cannot keep. */
.lead-capture { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line, #e3e7ee); }
.lead-capture label { display: block; font-weight: 800; font-size: .95rem; margin-bottom: 8px; color: var(--ink, #0f1b2d); }
.lead-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lead-row input {
  flex: 1 1 200px; min-height: 44px; padding: 0 12px;
  border: 2px solid var(--line, #e3e7ee); border-radius: 10px;
  font: inherit; font-size: 1rem; color: var(--ink, #0f1b2d); background: #fff;
}
.lead-row input:focus { outline: none; border-color: var(--navy, #0f1b2d); }
.lead-row input:disabled { opacity: .6; }
.lead-row .btn { min-height: 44px; }