/* =========================================================================
   TechVan Price Checker — S.02 "Repairs & pricing"

   Transcribed from the source design's assets/css/styles.css. Everything is
   scoped under .tvpc so the plugin carries its own copy of the few shared
   primitives it needs (.wrap, .sec__head, .eyebrow, .h2, .lede, .btn,
   .cta-row, .arrow-link) without reaching for the theme's, and without
   leaking those names back out to the rest of the page.

   The source's color-mix() values are written out as rgba here, matching how
   the rest of this site's CSS resolves them.
   ========================================================================= */

.tvpc {
  /* Ink side — the workshop at night */
  --ink:        #0a0c0d;
  --ink-2:      #0f1315;
  --panel:      #161b1e;
  --steel:      #8d979b;
  --steel-dim:  #5f686c;

  /* Paper side — the docket */
  --bone:       #efece4;
  --bone-ink:   #14181a;

  /* Signal */
  --flare:      #099dd7;
  --volt:       #d8ff3e;

  --hair:       rgba(239, 236, 228, .14);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Take the host theme's container when it publishes one, so this section
     lines up with the sections above and below it at every breakpoint. The
     fallbacks are the source design's own values, for a site that doesn't. */
  --gutter: var(--global-content-edge-padding, clamp(1.15rem, 4vw, 4.5rem));
  --maxw: var(--global-content-width, 82.5rem);

  /* The source runs clamp(4.5rem, 9vw, 9.5rem) — 152px on a wide screen.
     Set --pad-y on the section to sit in a different vertical rhythm. */
  --pad-y: clamp(4.5rem, 9vw, 9.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

.tvpc *,
.tvpc *::before,
.tvpc *::after { box-sizing: border-box; }

/* ---------------------------- the section ---------------------------- */
.tvpc.sec {
  position: relative;
  padding-block: var(--pad-y);
  border-top: 1px solid var(--hair);
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: clamp(1rem, .3vw + .94rem, 1.075rem);
  line-height: 1.68;
  font-weight: 400;
}

.tvpc .wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tvpc .sec__head { margin-bottom: clamp(2.5rem, 4vw, 4rem); max-width: 46rem; }
.tvpc .sec__head .h2 { max-width: 22ch; }
.tvpc .sec__head .lede { margin-top: 1.1rem; max-width: 44ch; }

.tvpc .eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: clamp(.62rem, .22vw + .58rem, .72rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
}
.tvpc .eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--flare);
  flex-shrink: 0;
}

.tvpc .h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.95rem, 4.1vw, 3.5rem);
  font-stretch: 108%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--bone);
}

.tvpc .lede {
  margin: 0;
  font-size: clamp(1.09rem, .55vw + .95rem, 1.32rem);
  line-height: 1.55;
  font-weight: 400;
  color: rgba(239, 236, 228, .88);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ------------------------------ buttons ------------------------------ */
.tvpc .btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.35rem;
  border-radius: .375rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              transform .22s var(--ease), border-color .22s var(--ease);
}
.tvpc .btn--flare {
  --btn-bg: var(--flare);
  --btn-fg: var(--ink);
  border-color: var(--flare);
}
.tvpc .btn--flare:hover,
.tvpc .btn--flare:focus-visible {
  --btn-bg: var(--volt);
  border-color: var(--volt);
  transform: translateY(-2px);
}
/* After a successful send: volt, a tick, and no hover lift. */
.tvpc .btn.is-sent,
.tvpc .btn.is-sent:hover,
.tvpc .btn.is-sent:focus-visible {
  --btn-bg: var(--volt);
  --btn-fg: var(--ink);
  border-color: var(--volt);
  transform: none;
  cursor: default;
  opacity: 1;
}
.tvpc .pc__tick { width: .95em; height: .95em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tvpc .pc__form.is-sent .pc__input { opacity: .55; }
.tvpc .btn--ghost { border-color: rgba(239, 236, 228, .4); }
.tvpc .btn--ghost:hover,
.tvpc .btn--ghost:focus-visible {
  border-color: currentColor;
  background: rgba(239, 236, 228, .1);
  transform: translateY(-2px);
}

.tvpc .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.tvpc .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--flare);
  padding-bottom: .28rem;
  border-bottom: 1px solid rgba(9, 157, 215, .45);
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.tvpc .arrow-link:hover { border-bottom-color: var(--flare); gap: .85rem; }

/* The section ships carrying .tvpc--no-js and the script takes it off once
   the dropdowns are built, so a checker that never ran shows the phone
   number instead of four dead selects. */
.tvpc .pc__noscript {
  display: none;
  padding: 1.2rem 1.35rem;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: .375rem;
  color: var(--steel);
}
.tvpc .pc__noscript a { color: var(--flare); }
.tvpc--no-js .pc__grid { display: none; }
.tvpc--no-js .pc__noscript { display: block; }

/* --------------------------- the checker ----------------------------- */
.tvpc .pc__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

/* Left: the four dropdowns */
.tvpc .pc__controls { display: grid; gap: 1.1rem; align-content: start; }

.tvpc .pc__field { display: grid; gap: .5rem; }

.tvpc .pc__label {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
}
.tvpc .pc__req { color: var(--flare); margin-left: .25em; }

.tvpc .pc__select { position: relative; display: block; }
.tvpc .pc__select::after {
  content: "";
  position: absolute;
  right: 1.05rem; top: 50%;
  width: .45rem; height: .45rem;
  border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.tvpc .pc__select select,
.tvpc .pc__input {
  width: 100%;
  padding: .85rem 1rem;
  margin: 0;
  background: var(--panel);
  color: var(--bone);
  border: 1px solid var(--hair);
  border-radius: .375rem;
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.4;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.tvpc .pc__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .02em;
}
.tvpc .pc__select select:hover:not(:disabled),
.tvpc .pc__input:hover { border-color: rgba(239, 236, 228, .32); }
.tvpc .pc__select select:focus-visible,
.tvpc .pc__input:focus-visible { border-color: var(--flare); outline-offset: 1px; }

.tvpc .pc__select select:disabled { color: var(--steel-dim); cursor: not-allowed; background: var(--ink-2); }
.tvpc .pc__select:has(select:disabled)::after { opacity: .4; }
.tvpc .pc__select select option { background: var(--panel); color: var(--bone); }

.tvpc .pc__input::placeholder { color: var(--steel-dim); }
.tvpc textarea.pc__input { resize: vertical; min-height: 6rem; }

.tvpc .pc__hint { margin: .4rem 0 0; font-size: .9rem; color: var(--steel); }
.tvpc .pc__hint .arrow-link { font-size: .72rem; }

/* Right: the answer */
.tvpc .pc__result {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: .375rem;
}
.tvpc .pc__result::before {
  content: "";
  display: block;
  height: 3px;
  width: 2.6rem;
  margin-bottom: 1.4rem;
  background: var(--flare);
}

/* Announced, not shown. */
.tvpc .pc__status {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tvpc .pc__panel { display: grid; gap: 1rem; justify-items: start; }
.tvpc .pc__panel[hidden] { display: none; }

.tvpc .pc__k,
.tvpc .pc__idle-k {
  margin: 0;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--volt);
}
.tvpc .pc__idle-k { color: var(--steel); }
.tvpc .pc__idle-p { margin: 0; color: var(--steel); max-width: 42ch; }

.tvpc .pc__price {
  margin: 0;
  font-size: clamp(3rem, 7vw, 4.6rem);
  font-weight: 800;
  font-stretch: 108%;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--bone);
}
/* The figure is bone throughout, currency mark included, so the span the
   script wraps around it needs no colour of its own. */
.tvpc .pc__price span { color: inherit; }

.tvpc .pc__device { margin: 0; font-size: 1.05rem; font-weight: 600; max-width: 30ch; }
.tvpc .pc__note { margin: 0; font-size: .92rem; color: var(--steel); max-width: 44ch; }

/* The part options, when a repair has more than one. The whole row is the
   label, so the hit area is the card rather than the radio alone. */
.tvpc .pc__opts { display: grid; gap: .5rem; width: 100%; margin: 0; }
.tvpc .pc__opts[hidden] { display: none; }

.tvpc .pc__opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .2rem .75rem;
  padding: .7rem .85rem;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  border-radius: .375rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.tvpc .pc__opt:hover { border-color: color-mix(in srgb, var(--bone) 32%, transparent); }
.tvpc .pc__opt.is-picked { border-color: var(--flare); background: color-mix(in srgb, var(--flare) 10%, var(--ink-2)); }
.tvpc .pc__opt:focus-within { outline: 2px solid var(--flare); outline-offset: 2px; }

.tvpc .pc__opt input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--flare);
  cursor: pointer;
}

.tvpc .pc__opt-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--bone);
}
.tvpc .pc__opt-price {
  font-family: var(--mono);
  font-size: .92rem;
  font-weight: 600;
  color: var(--bone);
  white-space: nowrap;
}
.tvpc .pc__opt-note {
  grid-column: 2 / -1;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--steel);
}

.tvpc .pc__opt-flag {
  padding: .12em .5em;
  border-radius: .2em;
  background: color-mix(in srgb, var(--volt) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--volt) 40%, transparent);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--volt);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .tvpc .pc__opt { transition: none; }
}

.tvpc .pc__incl {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
  color: var(--steel);
}
.tvpc .pc__incl li { display: flex; gap: .6rem; align-items: baseline; margin: 0; }
.tvpc .pc__incl li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--flare);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.tvpc .pc__panel .cta-row { margin-top: .35rem; }

/* Quote form — the no-price path, not an error state */
.tvpc .pc__quote-h {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.022em;
  max-width: 20ch;
  color: var(--bone);
}
.tvpc .pc__quote-h:focus-visible { outline: 2px solid var(--volt); outline-offset: 4px; }

.tvpc .pc__form { display: grid; gap: 1rem; width: 100%; margin-top: .5rem; }
.tvpc .pc__form .btn { justify-self: start; }
.tvpc .pc__form-row { display: grid; gap: .45rem; margin: 0; }
.tvpc .pc__form-pair { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.tvpc .pc__aside { margin: 0; font-size: .82rem; color: var(--steel-dim); }
.tvpc .pc__aside--pair { margin-top: -.5rem; }

.tvpc .pc__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tvpc .pc__error {
  margin: 0;
  padding: .7rem .9rem;
  border-radius: .375rem;
  background: rgba(9, 157, 215, .14);
  border: 1px solid rgba(9, 157, 215, .45);
  font-size: .88rem;
  color: var(--bone);
}
.tvpc .pc__error[hidden] { display: none; }

.tvpc .pc__input.is-bad { border-color: var(--flare); }

.tvpc .pc__done {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-radius: .375rem;
  background: rgba(216, 255, 62, .12);
  border: 1px solid rgba(216, 255, 62, .4);
  font-size: .95rem;
}
.tvpc .pc__done[hidden] { display: none; }
.tvpc .pc__done a { text-decoration-color: var(--volt); text-underline-offset: .2em; }

/* ---------------------------- breakpoints ---------------------------- */
@media (min-width: 40rem) {
  .tvpc .pc__form-pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 62rem) {
  .tvpc .pc__grid { grid-template-columns: .9fr 1.1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tvpc .btn,
  .tvpc .arrow-link,
  .tvpc .pc__select select,
  .tvpc .pc__input { transition: none; }
  .tvpc .btn:hover { transform: none; }
}