/* Layout A: calculator form + sticky estimate panel.
 * Loaded only on pages using [jpuk_calc_test layout="panel"] inside .jpuk-a.
 * Tokens measured from www.autohub.co (Sep 2026). */
.jpuk-a {
  --jq-red: #d4353f;
  --jq-red-dark: #a82831;
  --jq-ink: #212529;
  --jq-ink-2: #3a3f4b;
  --jq-muted: #636b74; /* 4.5:1 or better on the panel and field backgrounds */
  --jq-line: #e9ecef;
  --jq-surface: #f8f9fa;
  --jq-head: 'Montserrat', Helvetica, Arial, sans-serif;
  --jq-body: 'Doppio One', Helvetica, Arial, sans-serif;
  --jq-ease: cubic-bezier(0.625, 0.05, 0, 1);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: start;
  text-align: left;
}
.jpuk-a__quote { position: sticky; top: 120px; }
@media (max-width: 980px) {
  .jpuk-a { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .jpuk-a__quote { position: static; }
}

/* ---------- form ---------- */
.jpuk-a .gform_wrapper.gravity-theme { margin: 0; }
.jpuk-a .gform_wrapper .gform_description { font-family: var(--jq-body); font-size: 17px; line-height: 1.6; color: rgba(0, 0, 0, .86); margin: 0 0 8px; }
.jpuk-a .gform_wrapper.gravity-theme .gform_fields { row-gap: 18px; }
.jpuk-a .gform_wrapper.gravity-theme .gfield_label,
.jpuk-a .gform_wrapper.gravity-theme .gfield--type-radio legend.gfield_label {
  display: block !important; /* inline-block picks up an 8px strut from the site's 30.6px line-height */
  color: var(--jq-ink) !important;
  font-family: var(--jq-head) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}
.jpuk-a .gform_wrapper.gravity-theme .gfield_required { color: var(--jq-red); }
.jpuk-a .gform_wrapper.gravity-theme .gfield_description { font-size: 13px; color: var(--jq-muted); line-height: 1.45; padding-top: 6px; }
.jpuk-a .gform_wrapper.gravity-theme .ginput_complex label,
.jpuk-a .gform_wrapper.gravity-theme .ginput_complex legend { color: var(--jq-muted) !important; font-size: 12px !important; }

/* text inputs and native selects (site CSS sets 10px padding / 95% font with !important) */
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields input:not(.gfield-choice-input):not([type=hidden]):not([type=button]):not([type=submit]),
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields select {
  min-height: 46px !important;
  padding: 11px 12px !important;
  font-family: var(--jq-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #37352f !important;
  background-color: #fff !important;
  border: 0 !important;
  border-radius: 5px !important;
  box-shadow: 0 0 0 1px rgba(61, 59, 53, .16), 0 2px 5px rgba(61, 59, 53, .08), 0 1px 1px rgba(0, 0, 0, .12) !important;
  transition: box-shadow .2s var(--jq-ease);
}
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 34px !important;
  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 d='M1 1l5 5 5-5' fill='none' stroke='%236C757D' stroke-width='1.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields input:not(.gfield-choice-input):not([type=hidden]):not([type=button]):not([type=submit]):focus,
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields select:focus { outline: none !important; box-shadow: 0 0 0 2px var(--jq-ink) !important; }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields input::placeholder { color: #9aa0a6; opacity: 1; }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields input[type=number]::-webkit-inner-spin-button,
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* value field: currency inside the box, yen equivalent under it */
.jpuk-a .jq-money { position: relative; }
.jpuk-a .jq-money .jq-cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--jq-head); font-weight: 600; font-size: 15px; color: var(--jq-muted); pointer-events: none; z-index: 1; }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields .jq-money.jq-money--on input:not(.gfield-choice-input):not([type=hidden]):not([type=button]):not([type=submit]) { padding-left: 44px !important; } /* JS sets the exact width per currency */
.jpuk-a .jq-hint { font-size: 13px; color: var(--jq-muted); line-height: 1.45; padding-top: 6px; min-height: 0; }
.jpuk-a .jq-hint:empty { display: none; }

/* volume worked out from the model */
.jpuk-a .gform_wrapper.gravity-theme .gform_fields > .jq-auto {
  grid-column: 1 / -1;
  display: flex; gap: 8px; align-items: center;
  background: var(--jq-surface); border-radius: 8px; padding: 10px 12px;
  font-family: var(--jq-body); font-size: 14px; line-height: 1.4; color: var(--jq-ink-2);
}
.jpuk-a .jq-auto svg { width: 18px; height: 18px; flex: none; color: var(--jq-muted); }
.jpuk-a .jq-auto b { font-family: var(--jq-head); font-weight: 700; }
.jpuk-a .jq-auto[hidden] { display: none !important; }

/* manual vehicle size, for vehicles with no dimensions on file */
.jpuk-a .gform_wrapper.gravity-theme .gform_fields > .jq-size {
  grid-column: 1 / -1;
  background: var(--jq-surface); border-radius: 8px; padding: 14px;
}
.jpuk-a .jq-size[hidden], .jpuk-a .jq-size-link[hidden] { display: none !important; }
.jpuk-a .jq-size-msg { margin: 0 0 10px !important; padding: 0 !important; font-family: var(--jq-body); font-size: 14px; line-height: 1.45; color: var(--jq-ink-2); }
.jpuk-a .jq-size-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jpuk-a .jq-size-f { display: block; margin: 0; }
.jpuk-a .jq-size-lab { display: block; font-family: var(--jq-head); font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--jq-ink); margin-bottom: 6px; }
.jpuk-a .jq-size-in { position: relative; display: block; }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields .jq-size-in input:not(.gfield-choice-input) { width: 100% !important; padding-right: 30px !important; }
.jpuk-a .jq-size-in i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-family: var(--jq-head); font-weight: 600; font-size: 14px; color: var(--jq-muted); pointer-events: none; }
.jpuk-a .jq-size-err { margin: 8px 0 0 !important; padding: 0 !important; font-family: var(--jq-head); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--jq-red-dark); }
.jpuk-a .jq-size-err:empty { display: none; }
.jpuk-a .gform_wrapper.gravity-theme .gform_fields > .jq-size-link {
  grid-column: 1 / -1; justify-self: start;
  background: none !important; border: 0 !important; box-shadow: none !important;
  min-height: 44px; margin: -10px 0 -10px !important; padding: 0 !important;
  font-family: var(--jq-head) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important;
  color: var(--jq-ink-2) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.jpuk-a .jq-size-link:hover { color: var(--jq-ink) !important; }
.jpuk-a .jq-size-link:focus-visible { outline: 2px solid var(--jq-ink); outline-offset: 2px; }
.jpuk-a .jq-need { margin: 8px 0 0 !important; padding: 0 0 0 20px !important; list-style: disc; font-size: 15px; line-height: 1.6; color: var(--jq-ink-2); }
.jpuk-a .jq-need li { padding: 0; margin: 0; }

/* chosen.js selects (From / To / Brand / Model / Year) match the other inputs */
.jpuk-a .gform_wrapper.gravity-theme .chosen-container-single .chosen-single {
  height: auto !important; min-height: 46px; line-height: 24px !important; padding: 11px 34px 11px 12px !important;
  background: #fff !important; border: 0 !important; border-radius: 5px !important;
  box-shadow: 0 0 0 1px rgba(61, 59, 53, .16), 0 2px 5px rgba(61, 59, 53, .08), 0 1px 1px rgba(0, 0, 0, .12) !important;
  font-family: var(--jq-body); font-size: 16px; font-weight: 400; color: #37352f;
  display: flex !important; align-items: center;
}
.jpuk-a .gform_wrapper.gravity-theme .chosen-container-single .chosen-single span { line-height: 24px !important; margin: 0 !important; }
.jpuk-a .gform_wrapper.gravity-theme .chosen-container-single .chosen-single div { right: 10px; top: 50% !important; transform: translateY(-50%); height: 20px !important; width: 16px; }
.jpuk-a .gform_wrapper.gravity-theme .chosen-container-single .chosen-single div b { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236C757D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center !important; position: static !important; top: auto !important; width: 100% !important; height: 100% !important; }
.jpuk-a .gform_wrapper.gravity-theme .chosen-container-active.chosen-with-drop .chosen-single { box-shadow: 0 0 0 2px var(--jq-ink) !important; }
/* Gravity Forms 2.7 hides the closed drop with display:none, which takes Chosen's search input
   (its keyboard focus target) out of the tab order. Clip it instead, as Chosen does. */
.jpuk-a .gform_wrapper.gravity-theme .chosen-container:not(.chosen-with-drop) .chosen-drop { display: block; clip: rect(0, 0, 0, 0); clip-path: inset(100% 100%); }
.jpuk-a .gform_wrapper.gravity-theme .chosen-container-active .chosen-single { box-shadow: 0 0 0 2px var(--jq-ink) !important; }
.jpuk-a .gform_wrapper.gravity-theme .chosen-container .chosen-drop { border: 0; border-radius: 0 0 5px 5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 0 0 1px var(--jq-line); }

/* fields revealed by conditional logic fade in (Gravity Forms' slide animation is off) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes jqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .jpuk-a .gform_wrapper.gravity-theme .gfield.jq-in { animation: jqIn .3s var(--jq-ease) both; }
}

/* numbered group headings (section fields) */
.jpuk-a .gform_page_fields { counter-reset: jq; }
.jpuk-a .gform_page + .gform_page .gform_page_fields { counter-reset: jq 3; }
.jpuk-a .gform_wrapper.gravity-theme .gsection {
  border: 0;
  border-top: 1px solid var(--jq-line);
  padding: 24px 0 0;
  margin: 8px 0 0;
}
.jpuk-a .gform_wrapper.gravity-theme .gform_fields > .gsection:first-child { border-top: 0; padding-top: 4px; margin-top: 0; }
.jpuk-a .gform_wrapper.gravity-theme .gsection_title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--jq-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--jq-ink);
  margin: 0;
  padding: 0;
}
.jpuk-a .gsection_title::before {
  counter-increment: jq;
  content: counter(jq);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--jq-ink);
  color: #fff;
  font-size: 13px;
  display: inline-grid;
  place-items: center;
  flex: none;
}

/* yes / no questions: label left, segmented control right. A floated legend is an ordinary
 * grid item (not drawn on the fieldset border), so the row can centre it against the toggle. */
.jpuk-a .gform_wrapper.gravity-theme fieldset.gf_list_inline {
  display: grid; /* no !important: Gravity Forms hides conditional fields with an inline display:none */
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: center;
  border-top: 1px solid var(--jq-line);
  padding: 12px 0 0;
}
.jpuk-a .gform_wrapper.gravity-theme fieldset.gf_list_inline > legend.gfield_label { float: left; grid-column: 1; grid-row: 1; display: flex !important; align-items: center; flex-wrap: nowrap; min-height: 44px; margin: 0 !important; padding: 0 !important; width: auto; }
.jpuk-a .gform_wrapper.gravity-theme fieldset.gf_list_inline > .ginput_container { align-self: start; }
.jpuk-a .gform_wrapper.gravity-theme fieldset.gf_list_inline > .ginput_container { grid-column: 2; grid-row: 1; margin: 0; }
.jpuk-a .gform_wrapper.gravity-theme fieldset.gf_list_inline > .gfield_description { grid-column: 1; grid-row: 2; padding-top: 0; margin-top: -8px; }
.jpuk-a .gform_wrapper.gravity-theme fieldset.gf_list_inline > .gfield_validation_message { grid-column: 1 / -1; }
.jpuk-a .gform_wrapper.gravity-theme .gf_list_inline .gfield_radio {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 3px;
  background: var(--jq-surface);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--jq-line);
}
.jpuk-a .gform_wrapper.gravity-theme .gf_list_inline .gchoice { margin: 0 !important; padding: 0 !important; position: relative; } /* GF adds 16px right padding per choice */
.jpuk-a .gform_wrapper.gravity-theme .gf_list_inline .gchoice input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.jpuk-a .gform_wrapper.gravity-theme .gf_list_inline .gchoice label {
  display: block;
  margin: 0 !important;
  max-width: none !important;
  padding: 8px 16px !important;
  min-height: 38px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--jq-head) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--jq-muted) !important;
  transition: background .2s var(--jq-ease), color .2s var(--jq-ease);
}
.jpuk-a .gform_wrapper.gravity-theme .gf_list_inline .gchoice label:hover { color: var(--jq-ink) !important; }
.jpuk-a .gform_wrapper.gravity-theme .gf_list_inline .gchoice input:checked + label { background: #fff; color: var(--jq-ink) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.jpuk-a .gform_wrapper.gravity-theme .gf_list_inline .gchoice input:focus-visible + label { outline: 2px solid var(--jq-ink); outline-offset: 1px; }
@media (max-width: 480px) {
  /* same row as desktop (as in the mockup), with a slimmer toggle */
  .jpuk-a .gform_wrapper.gravity-theme fieldset.gf_list_inline { column-gap: 12px; }
  .jpuk-a .gform_wrapper.gravity-theme .gf_list_inline .gchoice label { padding: 8px 12px !important; }
}

.jpuk-a .jq-lt { display: block; }

/* stacked radio choices (customer type) as option rows */
.jpuk-a .gform_wrapper.gravity-theme .gfield--type-radio:not(.gf_list_inline) .gfield_radio { display: flex; flex-direction: column; gap: 8px; }
.jpuk-a .gform_wrapper.gravity-theme .gfield--type-radio:not(.gf_list_inline) .gchoice {
  display: flex; align-items: center; gap: 10px; margin: 0 !important;
  background: #fff; border-radius: 5px; padding: 0 0 0 14px;
  box-shadow: 0 0 0 1px rgba(61, 59, 53, .16), 0 2px 5px rgba(61, 59, 53, .08);
}
.jpuk-a .gform_wrapper.gravity-theme .gfield--type-radio:not(.gf_list_inline) .gchoice:has(input:checked) { box-shadow: 0 0 0 2px var(--jq-ink); }
.jpuk-a .gform_wrapper.gravity-theme .gfield--type-radio:not(.gf_list_inline) .gchoice label { margin: 0 !important; max-width: none !important; font-size: 15px !important; line-height: 1.4 !important; flex: 1; padding: 12px 14px 12px 0 !important; cursor: pointer; } /* the whole card is the tap target */
.jpuk-a .gform_wrapper.gravity-theme .gfield--type-radio:not(.gf_list_inline) .gchoice input { accent-color: var(--jq-ink); width: 16px; height: 16px; margin: 0; }

/* validation: summary as a quiet tinted note, field errors as a line of text under the field */
.jpuk-a .gform_wrapper.gravity-theme .gform_validation_errors {
  background: #fbedee !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important;
  padding: 12px 16px !important; margin: 0 0 16px !important;
}
.jpuk-a .gform_wrapper.gravity-theme .gform_validation_errors > h2 {
  color: var(--jq-red-dark) !important; font-family: var(--jq-head) !important; font-size: 14px !important; font-weight: 600 !important;
  line-height: 1.4 !important; margin: 0 !important; padding: 0 !important;
}
.jpuk-a .gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon { display: none !important; }
.jpuk-a .gform_wrapper.gravity-theme .gfield_validation_message,
.jpuk-a .gform_wrapper.gravity-theme .validation_message {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 6px 0 0 !important; margin: 0 !important;
  color: var(--jq-red-dark) !important; font-family: var(--jq-head) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important;
}
.jpuk-a .gform_wrapper.gravity-theme fieldset.gf_list_inline > .gfield_validation_message { grid-column: 1 / -1; grid-row: 3; text-align: right; }
.jpuk-a .gform_wrapper.gravity-theme .gfield_error .gf_list_inline .gfield_radio,
.jpuk-a .gform_wrapper.gravity-theme .gfield_error.gf_list_inline .gfield_radio { box-shadow: inset 0 0 0 1px var(--jq-red) !important; }
.jpuk-a .gform_wrapper.gravity-theme .gfield_error .gfield_label { color: var(--jq-ink) !important; }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields .gfield_error input:not(.gfield-choice-input):not([type=hidden]):not([type=button]):not([type=submit]),
.jpuk-a .gform_wrapper.gravity-theme .gform_page_fields .gfield_error select,
.jpuk-a .gform_wrapper.gravity-theme .gfield_error .chosen-container-single .chosen-single { box-shadow: 0 0 0 1px var(--jq-red), 0 2px 5px rgba(61, 59, 53, .08) !important; }
.jpuk-a .gform_wrapper.gravity-theme .gfield_error { background: none !important; border: 0 !important; }
.jpuk-a .gform_wrapper.gravity-theme .gfield_error.gf_list_inline { border-top: 1px solid var(--jq-line) !important; }

/* step 1: the estimate panel carries the button. The footer stays in the layout
 * (Gravity Forms will not advance a page whose button is display:none) but is visually hidden. */
.jpuk-a .gform_wrapper.gravity-theme .gform_page:first-child .gform_page_footer {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.jpuk-a .gform_wrapper.gravity-theme .gform_page_footer { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-top: 1px solid var(--jq-line); margin-top: 24px; padding-top: 24px; }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_footer input.button {
  width: auto !important;
  min-height: 48px;
  padding: 13px 22px !important;
  border-radius: 5px !important;
  font-family: var(--jq-head) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer;
  transition: background .25s var(--jq-ease);
}
.jpuk-a .gform_wrapper.gravity-theme .gform_page_footer input[type=submit] { background: var(--jq-red) !important; color: #fff !important; border: 0 !important; }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_footer input[type=submit]:hover { background: var(--jq-red-dark) !important; }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button { background: #fff !important; color: var(--jq-ink) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--jq-line); }
.jpuk-a .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button:hover { background: var(--jq-surface) !important; }
.jpuk-a .gform_wrapper .jpuk-result { display: none !important; } /* in-form copy; the panel shows the estimate */

/* ---------- estimate panel ---------- */
.jpuk-a .jpuk-test-calc { max-width: none; font-family: var(--jq-body); }
.jpuk-a .jpuk-test-calc .jpuk-result { background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
.jpuk-a .jq { background: var(--jq-surface); border-radius: 12px; padding: 24px; color: var(--jq-ink); font-size: 16px; line-height: 1.5; font-weight: 400; }
.jpuk-a .jq * { font-weight: inherit; }
.jpuk-a .jq-eyebrow { font-family: var(--jq-head); font-weight: 700 !important; font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: .08em; color: var(--jq-muted); }
.jpuk-a .jq-empty, .jpuk-a .jq-msg { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--jq-ink-2); padding: 0; }
.jpuk-a .jq-msg { margin-bottom: 16px; }
.jpuk-a .jq-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4px 12px; margin: 8px 0 4px; }
.jpuk-a .jq-big { font-weight: 700 !important; line-height: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--jq-head); font-weight: 700; font-size: clamp(26px, 8vw, 40px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jpuk-a .jq-jpy { font-size: 13px; color: var(--jq-muted); }
.jpuk-a .jq-name { font-family: var(--jq-head); font-weight: 600 !important; font-size: 14px; color: var(--jq-ink-2); margin: 4px 0 0; }
.jpuk-a .jq-carrier-wrap { margin: 10px 0 16px; }
.jpuk-a .jq-lab { display: block; font-family: var(--jq-head); font-weight: 700 !important; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--jq-muted); margin-bottom: 6px; }
.jpuk-a select.jq-carrier {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236C757D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(61, 59, 53, .16), 0 2px 5px rgba(61, 59, 53, .08);
  padding: 11px 34px 11px 12px;
  min-height: 44px;
  font-family: var(--jq-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--jq-ink);
  cursor: pointer;
}
@media (pointer: coarse) { .jpuk-a select.jq-carrier { font-size: 16px; } } /* under 16px makes iOS Safari zoom in on tap */
.jpuk-a select.jq-carrier:focus { outline: none; box-shadow: 0 0 0 2px var(--jq-ink); }
.jpuk-a .jq-small { font-size: 13px; color: var(--jq-muted); margin-top: 6px; }
.jpuk-a .jq-card { background: #fff; border-radius: 10px; padding: 8px 16px; margin: 16px 0; }
.jpuk-a .jq-carrier-wrap + .jq-card { margin-top: 0; }
.jpuk-a .jq-lines { list-style: none; margin: 0; padding: 0; }
.jpuk-a .jq-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; margin: 0; font-size: 15px; line-height: 1.5; }
.jpuk-a .jq-lines .k { color: var(--jq-ink-2); }
.jpuk-a .jq-lines .v { font-family: var(--jq-head); font-weight: 600 !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jpuk-a .jq-lines li.sub { border-top: 1px solid var(--jq-line); margin-top: 4px; padding-top: 10px; }
.jpuk-a .jq-lines li.sub .k, .jpuk-a .jq-lines li.sub .v { color: var(--jq-ink); font-weight: 700 !important; }
.jpuk-a .jq-lines li.muted .v { color: var(--jq-muted); font-weight: 500 !important; }
.jpuk-a .jq-lines li.note { display: block; padding: 0 0 6px; font-size: 13px; color: var(--jq-muted); }
.jpuk-a .jq-cta, .jq-mbar .jq-cta { line-height: 24px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 13px 22px;
  background: #d4353f !important; color: #fff !important; border: 0 !important; border-radius: 5px !important;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 16px;
  cursor: pointer; transition: background .25s cubic-bezier(0.625, 0.05, 0, 1);
}
.jpuk-a .jq-cta:focus-visible, .jq-mbar .jq-cta:focus-visible { outline: 2px solid var(--jq-ink) !important; outline-offset: 2px; }
.jpuk-a .jq-cta:hover, .jq-mbar .jq-cta:hover { background: #a82831 !important; }
.jpuk-a .jq-disc { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--jq-muted); }
.jpuk-a .jq-disc p { margin: 0 0 6px; padding: 0; }
/* RoRo / container: same segmented control as the yes / no questions.
 * calculator-style.css targets these through :is(.jpuk-test-calc, #dbg-results), which carries
 * ID specificity, hence the !important. */
.jpuk-a .jq .method-toggle-bar {
  display: flex !important; gap: 3px; padding: 3px !important; margin: 0 0 18px !important;
  background: #fff !important; border: 0 !important; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--jq-line);
}
.jpuk-a .jq .method-btn {
  flex: 1 1 0 !important; max-width: none !important; min-width: 0; min-height: 38px;
  display: flex; align-items: center; justify-content: center; gap: 8px !important;
  padding: 8px 10px !important; border: 0 !important; border-radius: 4px; background: transparent !important;
  font-family: var(--jq-head) !important; font-weight: 600 !important; font-size: 14px !important; line-height: 20px; white-space: nowrap;
  color: var(--jq-muted) !important; cursor: pointer; transition: background .2s var(--jq-ease), color .2s var(--jq-ease);
}
.jpuk-a .jq .method-btn::after { display: none !important; }
.jpuk-a .jq .method-btn:hover:not(.active) { color: var(--jq-ink) !important; }
.jpuk-a .jq .method-btn.active { background: var(--jq-surface) !important; color: var(--jq-ink) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.jpuk-a .jq .method-btn svg { width: 18px !important; height: 18px !important; flex: none; }

/* ---------- mobile total bar ---------- */
.jq-mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #1c1c1c; color: #fff;
  transition: transform .3s cubic-bezier(0.625, 0.05, 0, 1);
}
.jq-mbar > div { min-width: 0; }
.jq-mbar-total { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-weight: 700; font-size: clamp(17px, 5.5vw, 22px); font-variant-numeric: tabular-nums; }
.jq-mbar-sub { font-size: 12px; color: rgba(255, 255, 255, .7); }
.jq-mbar .jq-cta { width: auto; min-height: 44px; padding: 10px 16px; font-size: 15px; }
.jq-mbar--p2 { display: none !important; } /* step 2: no button, and it would cover the address fields and submit */
@media (max-width: 980px) { .jq-mbar { display: flex; } }
.jq-mbar--hidden, .jq-mbar--inview { transform: translateY(110%); }