/* Cars4Cash Quote Wizard - the site's "ticket" visual language: a white card with a
   punched tear-line, a rotated gold stamp, and the brand green CTA.

   Deliberately SELF-CONTAINED. The plugin owns its palette and ships its own copies
   of the three brand faces, so it renders identically dropped into any WordPress with
   no theme present. Nothing here reads a theme variable. Trade-off: if the brand
   palette or typefaces change in the theme, mirror the change in the token block
   below and in assets/fonts/. */

@font-face { font-family: "C4CQ Display"; src: url(../fonts/bricolage-var.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "C4CQ Text";    src: url(../fonts/figtree-var.woff2)   format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "C4CQ Mono";    src: url(../fonts/plexmono-600.woff2)  format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

.c4cq {
  --q-green: #4e8b3a;
  --q-green-deep: #35682a;
  --q-gold: #f0a81f;
  --q-ink: #1c1c1c;
  --q-charcoal: #3a3a3a;
  --q-paper: #ffffff;
  --q-line: #e8e4dd;
  --q-field: #d9d2c6;
  --q-muted: #8a8377;
  --q-radius: 12px;
  --q-shadow: 0 4px 24px rgba(28, 28, 28, 0.10);
  --q-pad: 28px;

  font-size: 16px;
  line-height: 1.5;
  color: var(--q-ink);
  background: var(--q-paper);
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius);
  box-shadow: var(--q-shadow);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.c4cq *, .c4cq *::before, .c4cq *::after { box-sizing: border-box; }

/* Fonts forced per element so a host theme's input/label rules cannot override them. */
.c4cq, .c4cq p, .c4cq label, .c4cq legend, .c4cq input,
.c4cq select, .c4cq button, .c4cq a, .c4cq div {
  font-family: "C4CQ Text", system-ui, -apple-system, sans-serif;
}
.c4cq .c4cq-h, .c4cq .c4cq-price { font-family: "C4CQ Display", system-ui, sans-serif; }
.c4cq .c4cq-offer-eyebrow { font-family: "C4CQ Mono", ui-monospace, monospace; }
.c4cq a { color: var(--q-green-deep); }

/* The stamp - same promise, same angle as the homepage hero card. */
.c4cq::before {
  content: "FREE TOW INCLUDED";
  position: absolute; top: -14px; right: 18px;
  background: var(--q-gold); color: var(--q-ink);
  font-family: "C4CQ Mono", ui-monospace, monospace;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  padding: 6px 12px; border-radius: 6px; transform: rotate(2deg);
  box-shadow: 0 2px 8px rgba(28, 28, 28, 0.18);
}

.c4cq-form, .c4cq-offer, .c4cq-message { padding: 30px var(--q-pad) 28px; }

/* Sized down from the hero card's 1.35rem-at-800: this heading carries a long two-line
   sentence rather than three words, so it needs less weight per line to stay readable. */
.c4cq-h {
  font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.28rem); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--q-ink); margin: 0 0 8px; text-align: left;
}

/* The sub-line doubles as the ticket tear: full-bleed dashed rule with punched holes. */
.c4cq-sub {
  color: var(--q-charcoal); font-size: 0.95rem; position: relative;
  margin: 0 calc(var(--q-pad) * -1) 22px; padding: 0 var(--q-pad) 20px;
  border-bottom: 2px dashed var(--q-field);
}
.c4cq-sub::before, .c4cq-sub::after {
  content: ""; position: absolute; bottom: -9px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--q-paper); border: 1px solid var(--q-line);
}
.c4cq-sub::before { left: -9px; }
.c4cq-sub::after { right: -9px; }

.c4cq-error {
  background: #fdf3f2; border: 1px solid #e3b4ad; color: #8a2f22;
  padding: 12px 16px; border-radius: 8px; margin: 0 0 18px;
  font-weight: 500; font-size: 0.95rem;
}

.c4cq-field { display: block; margin-bottom: 16px; }
.c4cq-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--q-charcoal); margin-bottom: 6px; }
.c4cq-field label span { color: var(--q-green-deep); }

/* Every text-like input, rather than an allow-list of types. The old list was
   input[type=text] and input[type=tel], so adding an email or date field silently
   produced an unstyled, half-width box. Radios are styled by .c4cq-yn input. */
.c4cq input:not([type=radio]):not([type=checkbox]):not([type=hidden]),
.c4cq select, .c4cq textarea {
  width: 100%; padding: 12px; border: 1.5px solid var(--q-field); border-radius: 8px;
  font-family: inherit; font-size: 1rem; background: var(--q-paper); color: var(--q-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.c4cq input::placeholder, .c4cq textarea::placeholder { color: var(--q-muted); }
.c4cq textarea { resize: vertical; min-height: 76px; }
.c4cq input:focus, .c4cq select:focus, .c4cq textarea:focus {
  border-color: var(--q-green); outline: none; box-shadow: 0 0 0 3px rgba(78, 139, 58, 0.18);
}
.c4cq-zip input { font-variant-numeric: tabular-nums; }
.c4cq select {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233a3a3a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Year | Make / Model | ZIP - mirrors the homepage ticket's 2x2 block. */
.c4cq-vehicle { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.c4cq-yn { border: 0; padding: 0; margin: 2px 0 18px; }
.c4cq-yn legend { font-size: 0.95rem; font-weight: 600; color: var(--q-ink); padding: 0; margin-bottom: 10px; }
.c4cq-yn label {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 22px 0 0;
  font-size: 0.95rem; color: var(--q-charcoal); cursor: pointer;
}
.c4cq-yn input {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--q-field); background: var(--q-paper); flex: none; cursor: pointer;
  position: relative; transition: border-color 0.15s ease;
}
.c4cq-yn input:checked { border-color: var(--q-green); }
.c4cq-yn input:checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--q-green); }
.c4cq-yn input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(78, 139, 58, 0.18); }

.c4cq-actions { margin-top: 24px; }
.c4cq-submit {
  display: block; width: 100%; background: var(--q-green); color: #fff; border: none;
  cursor: pointer; font-family: inherit; font-weight: 600; font-size: 1.1rem;
  padding: 15px 20px; border-radius: 10px; transition: background 0.15s ease;
}
.c4cq-submit:hover { background: var(--q-green-deep); }
.c4cq-submit:focus-visible { outline: 3px solid var(--q-gold); outline-offset: 2px; }

/* Offer state */
.c4cq-offer { text-align: center; }
.c4cq-offer-eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 600;
  color: var(--q-green-deep); margin: 0 0 10px;
}
.c4cq-price {
  font-weight: 800; font-size: clamp(2.8rem, 9vw, 4rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--q-green-deep); font-variant-numeric: tabular-nums;
}
.c4cq-offer-meta { color: var(--q-charcoal); margin: 12px 0 24px; }
.c4cq-accept { display: grid; gap: 10px; text-align: left; max-width: 460px; margin: 0 auto; }
.c4cq-accept label { font-size: 0.8rem; font-weight: 600; color: var(--q-charcoal); }
.c4cq-fine { font-size: 0.8rem; color: var(--q-muted); margin-top: 18px; }

/* Message states */
.c4cq-message { text-align: center; }
.c4cq-message p { color: var(--q-charcoal); max-width: 46ch; margin: 8px auto 0; }
/* The form-state heading is left-aligned because it sits above left-aligned labels.
   The offer and message states are centred blocks, so their heading follows suit -
   otherwise the title reads left while its own body text is centred under it. */
.c4cq-message .c4cq-h, .c4cq-offer .c4cq-h { text-align: center; }

/* Same entrance as the homepage card, so the two read as one family. */
@keyframes c4cqRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.c4cq { animation: c4cqRise 0.5s 0.1s ease-out both; }

@media (max-width: 560px) {
  .c4cq { --q-pad: 18px; }
  .c4cq-form, .c4cq-offer, .c4cq-message { padding: 26px var(--q-pad) 22px; }
  .c4cq-vehicle { grid-template-columns: 1fr; }
  .c4cq::before { right: 12px; font-size: 0.62rem; padding: 5px 10px; }
  .c4cq-yn label { margin-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .c4cq { animation: none; }
  .c4cq input, .c4cq select, .c4cq textarea, .c4cq-submit, .c4cq-yn input { transition: none; }
}

/* --- 0.6.0: the conditional follow-ups, the promo hint and the time picker --------
   The follow-ups sit in a container the JS toggles; a noscript rule in the markup
   un-hides it when there is no JavaScript. The left rule and inset make it read as a
   dependent group rather than three more unrelated questions. */
.c4cq-ifnot {
  margin: 0 0 4px; padding: 4px 0 0 14px;
  border-left: 2px solid var(--q-field);
}
.c4cq-ifnot .c4cq-yn:last-of-type { margin-bottom: 14px; }

/* "(optional)" / "(needed to book a pickup)" - a hint, so it must not inherit the
   green accent that .c4cq-field label span carries for required markers. */
.c4cq-field label .c4cq-opt {
  color: var(--q-charcoal); font-weight: 500; opacity: 0.62;
}

/* Hour : minutes am/pm on one row rather than three full-width selects stacked. */
.c4cq-timepick { display: flex; gap: 8px; align-items: center; }
.c4cq-timepick select { flex: 1 1 auto; min-width: 0; }

/* --- 0.9.0: the offer screen's secondary actions ---------------------------------
   Print and "discuss with an agent" sit below the primary booking button as quiet
   text actions, so they never compete with it. The original renders them as two more
   buttons; making them look like buttons here would give the offer screen three equal
   calls to action and bury the one that books a tow. */
.c4cq-secondary {
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center;
  margin: 14px 0 0;
}
.c4cq-secondary form { margin: 0; }
.c4cq-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--q-charcoal);
  text-decoration: underline; text-underline-offset: 3px;
}
.c4cq-link:hover { color: var(--q-green-deep); }
.c4cq-link:focus-visible { outline: 2px solid var(--q-green); outline-offset: 3px; border-radius: 2px; }
.c4cq-link[disabled] { opacity: 0.5; cursor: default; text-decoration: none; }
.c4cq-again { display: inline-block; margin-top: 8px; }

/* Printing the quote: drop everything that is not the offer itself. */
@media print {
  .c4cq-secondary, .c4cq-accept, .c4cq-fine, .c4cq-form { display: none !important; }
  .c4cq, .c4cq-offer { box-shadow: none !important; border: 0 !important; }
}

/* ---------------------------------------------------------------------------
   Host-theme defence.

   This widget is dropped into themes nobody here controls, and a host rule with
   more specificity silently repaints it. Found on padnos.com 2026-09-01, where
   the landers put the wizard inside a dark section styled by:

     section.bg-dgrey h1, section.bg-dgrey h2, section.bg-dgrey h3,
     section.bg-dgrey { color: #fff }

   Our own colours are declared - .c4cq-h already says color: var(--q-ink) - but
   a single class loses to that selector, so the heading and sub-line rendered
   white on our white card and were simply invisible. The same theme uppercases
   every button, which turned "Get My Cash!" into "GET MY CASH!" without us
   asking. Neither showed up on cars4cash.com, because its theme happens not to
   style those things.

   So the handful of properties that decide whether the widget is legible are
   pinned here. !important is deliberate and confined to this block: it marks the
   boundary of an embedded component, not a specificity fight inside our own
   stylesheet. Anything cosmetic that a host may reasonably want to influence is
   left alone.
   --------------------------------------------------------------------------- */

/* Text must never inherit a colour meant for a dark background. */
.c4cq { color: var(--q-ink) !important; }
.c4cq .c4cq-h { color: var(--q-ink) !important; }
.c4cq .c4cq-sub { color: var(--q-charcoal) !important; }
.c4cq .c4cq-fine,
.c4cq .c4cq-offer-meta { color: var(--q-muted) !important; }
.c4cq a { color: var(--q-green-deep) !important; }

/* Fields: a dark theme setting input backgrounds would hide what people type. */
.c4cq input:not([type="radio"]):not([type="checkbox"]),
.c4cq select,
.c4cq textarea { background: var(--q-paper) !important; color: var(--q-ink) !important; }

/* Our button wording is chosen, not shouted, and its box is ours.

   padnos.com's theme sets `a.btn, button, input[type=button] … { height: 50px;
   line-height: 50px }` for its own fixed-height buttons. Inherited, that put a
   50px line box inside our 20px content area and pushed the label onto the
   bottom edge: 29px of space above the text, 0 below. Releasing the height and
   restoring our own line-height brings it back to 56px with the label centred,
   identical to cars4cash.com. Flex centring is belt and braces, so a host that
   forces a height again still gets centred text rather than a label on the
   floor. */
.c4cq button,
.c4cq .c4cq-submit,
.c4cq .c4cq-secondary {
  text-transform: none !important;
  letter-spacing: normal !important;
  height: auto !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.c4cq .c4cq-submit { background: var(--q-green) !important; color: #fff !important; }
.c4cq .c4cq-submit:hover,
.c4cq .c4cq-submit:focus { background: var(--q-green-deep) !important; }

/* The one place uppercase IS ours. */
.c4cq .c4cq-offer-eyebrow {
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--q-green-deep) !important;
}