/* CTA boxes shared by the /search vehicle pages and the free-check results.
 *
 * These rules are a copy of the .veh-* CTA subset of the inline style block in
 * functions/search/[make]/[model]/[vrm].js — the vehicle pages still inject
 * that block, and because this file is linked from the shell page they borrow,
 * both sets load there. They must stay IDENTICAL: if you change a rule here,
 * change it in the function too, or the two pages drift apart.
 * Page-hiding rules (.sc-hero, .sc-edu etc.) stay in the function — they are
 * vehicle-page-only and must never apply to /reports/free-car-check.
 */

/* Buy box. Scoped under .veh-buy so nothing here can reach the free-check layout. */
.veh-buy h2{display:block;font-size:1.25rem;line-height:1.35;margin:0 0 1.1rem;
  border:0;padding:0;text-transform:none;letter-spacing:normal;color:inherit}
.veh-buy-tiers{display:grid;gap:.6rem;margin-bottom:1.2rem}
/* Multi-column layouts drop to two, then one, so a long report name never
   forces the card wider than the page. */
.veh-buy-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media(max-width:860px){.veh-buy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.veh-buy-grid{grid-template-columns:1fr}}
/* In a narrow cell the price sits under the name instead of beside it, so a
   two-line report title cannot squeeze it off the edge. */
.veh-buy-grid .veh-buy-tier{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.25rem .8rem;align-items:start}
.veh-buy-grid .veh-buy-tier input{grid-area:1/1;margin-top:.2rem}
.veh-buy-grid .veh-buy-name{grid-area:1/2}
.veh-buy-grid .veh-buy-price{grid-area:2/2;text-align:left}
.veh-buy-tier{display:flex;align-items:center;gap:.9rem;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.95rem 1.15rem;
  background:rgba(255,255,255,.03);transition:border-color .15s,background .15s}
.veh-buy-tier:hover{border-color:rgba(255,255,255,.3)}
.veh-buy-tier:has(input:checked){border-color:var(--primary,#ff6b00);
  background:rgba(255,107,0,.08)}
.veh-buy-tier input{accent-color:var(--primary,#ff6b00);width:18px;height:18px;flex:0 0 auto;margin:0}
.veh-buy-name{flex:1;font-weight:700;line-height:1.35}
.veh-buy-price{font-weight:800;color:var(--primary,#ff6b00);white-space:nowrap;font-size:1.05rem}
.veh-buy-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.veh-buy-plate{display:flex;align-items:stretch;border-radius:10px;overflow:hidden;
  font-weight:700;flex:1 1 260px;min-width:0}
.veh-buy-plate .gb{background:#0b3aa8;color:#fff;padding:0 .8rem;font-size:.8rem;
  display:flex;align-items:center;flex:0 0 auto}
.veh-buy-plate input{flex:1;min-width:0;border:0;background:#ffd400;color:#111;
  padding:.85rem 1rem;font-size:1.2rem;font-weight:700;letter-spacing:.1em;
  font-family:ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase}
.veh-buy-plate input::placeholder{color:rgba(0,0,0,.35);letter-spacing:.08em}
.veh-buy-plate input:focus{outline:2px solid var(--primary,#ff6b00);outline-offset:-2px}
.veh-buy-go{background:var(--primary,#ff6b00);color:#fff;border:0;border-radius:10px;
  font-weight:700;font-size:1rem;padding:.9rem 1.6rem;cursor:pointer;flex:0 0 auto}
.veh-buy-go:disabled{opacity:.45;cursor:not-allowed}
.veh-buy-note{margin:.9rem 0 0;font-size:.82rem;color:var(--text-dim,#94a3b8)}
.veh-buy-src{display:block}
.veh-buy-mark{color:var(--primary,#ff6b00);font-weight:700;margin-left:.2em}
.veh-buy-src .veh-buy-mark{margin-left:0;display:inline-block;min-width:1em}
.veh-buy-err{margin:.7rem 0 0;font-size:.88rem;color:#ff8a8a;font-weight:600}

/* Locked paid sections. */
.veh-locked{max-width:1100px;margin:2.5rem auto 0;padding:0 1.25rem}
.veh-locked h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-dim,#94a3b8);font-weight:600;border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:.6rem;margin:0 0 1.1rem}
.veh-locked-grid{display:grid;gap:.9rem;margin-bottom:1.6rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.veh-locked-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.veh-locked-grid{grid-template-columns:1fr}}
/* The closing CTA of this block is centred on the page — a full-width plate box
   beside a 12-cell grid read as a stray form. */
.veh-locked-row{max-width:520px;margin:0 auto;justify-content:center}
#veh-locked .veh-buy-err,#veh-locked .veh-buy-note{text-align:center}
.veh-lock{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1.1rem 1.2rem;
  background:rgba(255,255,255,.04)}
.veh-lock h3{margin:0 0 .7rem;font-size:1rem}
.veh-lock p{margin:0;filter:blur(5px);user-select:none;pointer-events:none;
  color:var(--text-dim,#94a3b8)}
.veh-cta{display:inline-block;margin-top:1.4rem;background:var(--primary,#ff6b00);
  color:#fff;text-decoration:none;font-weight:700;padding:.9rem 1.7rem;border-radius:10px}

/* Share box — the canonical /search/ link for this vehicle, ready to copy.
 *
 * Unlike the rules above this one has NO twin in the function's inline block:
 * both surfaces load this file, so one home is enough and there is nothing to
 * keep in step. Same quiet section heading as .veh-locked, because it is a
 * utility strip between blocks, not another thing being sold. */
.veh-share{max-width:1100px;margin:2.5rem auto 0;padding:0 1.25rem}
.veh-share h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-dim,#94a3b8);font-weight:600;border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:.6rem;margin:0 0 1.1rem}
.veh-share>p{margin:0 0 .9rem;color:var(--text-dim,#94a3b8);font-size:.9rem;line-height:1.6}
/* Share targets, above the copy box. Brand-neutral outline buttons rather than
   WhatsApp green and Facebook blue: the strip sits inside a dark report page,
   and two saturated brand colours side by side read as third-party adverts
   embedded in the record. Icons are inline SVG in the house outline style —
   no icon font, no network fetch, no emoji. */
.veh-share-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .9rem}
.veh-share-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  flex:0 0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;color:var(--text,#e2e8f0);font-weight:600;font-size:.9rem;
  padding:.7rem 1.1rem;cursor:pointer;text-decoration:none;
  font-family:inherit;transition:background .15s,border-color .15s}
.veh-share-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.veh-share-btn:focus-visible{outline:2px solid var(--primary,#ff6b00);outline-offset:2px}
.veh-share-btn svg{width:18px;height:18px;flex:0 0 auto;color:var(--primary,#ff6b00)}
/* One row of three on a phone, each wide enough to hit comfortably (WCAG 2.2
   target size). flex-basis, not width, so a hidden native button reflows the
   other two rather than leaving a gap. */
@media(max-width:560px){.veh-share-btn{flex:1 1 calc(50% - .3rem)}}

.veh-share-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch}
.veh-share-url{flex:1 1 320px;min-width:0;border:1px solid rgba(255,255,255,.14);
  border-radius:10px;background:rgba(255,255,255,.04);color:var(--text-dim,#94a3b8);
  padding:.8rem 1rem;font-size:.9rem;text-overflow:ellipsis;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.veh-share-url:focus{outline:2px solid var(--primary,#ff6b00);outline-offset:-2px;
  color:var(--text,#e2e8f0)}
.veh-share-copy{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  flex:0 0 auto;background:none;border:1px solid var(--primary,#ff6b00);border-radius:10px;
  color:var(--primary,#ff6b00);font-weight:700;font-size:.95rem;padding:.8rem 1.3rem;
  cursor:pointer;transition:background .15s}
.veh-share-copy:hover{background:rgba(255,107,0,.1)}
.veh-share-copy svg{width:18px;height:18px;flex:0 0 auto}
@media(max-width:560px){.veh-share-copy{flex:1 1 100%}}
.veh-share-done{margin:.7rem 0 0;font-size:.85rem;font-weight:600;color:var(--primary,#ff6b00)}
/* The printed copy of the share URL. Hidden here because this sheet is the
   screen one; print.css (media="print") turns it on and hides the input above,
   which cannot wrap and printed the address truncated to an ellipsis. The hide
   MUST live here and not in print.css — that file is loaded media="print", so a
   display:none in it would hide this on paper, which is the only place it is
   wanted. */
.veh-share-url-print{display:none}

/* Closing CTA — a quiet band, not a third product grid. */
.veh-closer{border-top:1px solid rgba(255,255,255,.12);margin:2.5rem 0 1.5rem;
  padding:2rem 0 .5rem;text-align:center}
.veh-closer h2{font-size:1.35rem;margin:0 0 .4rem;border:0;padding:0;
  text-transform:none;letter-spacing:normal;color:inherit}
.veh-closer>p{margin:0 0 1.3rem;color:var(--text-dim,#94a3b8)}
.veh-closer-row{justify-content:center;max-width:520px;margin:0 auto}
.veh-closer-err{text-align:center}