/* ────────────────────────────────────────────── */
/* FORCE all spinner-field labels to 16px regular */
.form-item-cars-garage   > label.control-label,
.form-item-inquiry-email > label.control-label,
.form-item-inquiry-phone > label.control-label {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size:    16px               !important;
  font-weight:  400                !important;
  margin-top:   0.5em              !important;
  margin-bottom:0.25em             !important;
}

/* only on the Access-Road spinner: put “ m” between the input and the + button */
.field-access-road-length
  .number-spinner-container
  .num-spinner-btn.plus::before {
  content: " m";                      /* the space + the “m” */
  margin-right: 0.25em;               /* gap between “m” and + */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  line-height: 1;
  color: #000;
  pointer-events: none;               /* so clicking “m” still hits the + button */
}


/* Pull up the buttons a bit */
.webform-submission-form .form-actions {
  margin-top: 1em !important;
}

/* Remove any stray bottom margin on the buttons */
.webform-submission-form .form-actions > * {
  margin-top: 0 !important;
}

/* Inquiry email & phone fields */
.form-item-inquiry-email  > label.control-label,
.form-item-inquiry-phone  > label.control-label {
  display: block;
  margin-bottom: 0.5em;
  font-size: 16px;
  font-weight: normal;
}

/* ─── NUMBER SPINNER ─── */
.number-spinner-container {
  display: inline-flex !important;   /* force it visible when JS wraps */
  align-items: center;
  gap: 0.5em;
  margin-top: 0.5em;
  box-sizing: border-box;
}

.number-spinner-container .num-spinner-btn,
.number-spinner-container input[type="number"] {
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  box-sizing: border-box;
  height: 45px;              /* fixed height for everything */
  line-height: normal;
}

.number-spinner-container .num-spinner-btn {
  width: 45px;               /* make your ± buttons wide */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.number-spinner-container input[type="number"] {
  width: 80px;               /* fixed width for the number field */
  padding: 0 0.5em;
  text-align: center;
  -moz-appearance: textfield;  /* kill native arrows */
  appearance: none;
}
.number-spinner-container input::-webkit-inner-spin-button,
.number-spinner-container input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 1) Full-height Ajax wrapper, centered */
.webform-ajax-form-wrapper {
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2) Hide wizard step titles */
.webform-section-title {
  display: none;
}

/* 3) Form grid + vertical gaps */
.webform-submission-form {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 3;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

/* 4) Field wrappers & inputs */
.webform-submission-form .form-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.webform-submission-form .form-field > label {
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  flex: 0 0 auto;
  text-align: left;
}
.webform-submission-form .form-field input,
.webform-submission-form .form-field select,
.webform-submission-form .form-field textarea {
  flex: 1;
  border: 1px solid #000;
  border-radius: 0;
  padding: 0.5em;
  font-size: 16px;
  margin-left: 1em;
  height: 32px;
  background: #fff;
  box-sizing: border-box;
}

/* 5) Option boxes (radio/checkbox) */
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox {
  display: inline-flex;
  align-items: center;
  border: 1px solid #000;
  border-radius: 0;
  padding: 0.5em 1em;
  margin: 0;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}
.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label {
  font-size: 16px;
  font-weight: normal;
  margin: 0;
}
.webform-submission-form input.form-radio,
.webform-submission-form input.form-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  box-sizing: border-box;
}
.webform-submission-form input.form-radio {
  border-radius: 50%;
}
.webform-submission-form input:checked.form-radio,
.webform-submission-form input:checked.form-checkbox {
  background: #000;
}

/* 6) Custom number spinner styling */
.number-spinner-container {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.number-spinner-container input[type="number"] {
  flex: 0 0 80px;
  height: 32px;
  border: 1px solid #000;
  border-radius: 0;
  padding: 0 0.5em;
  font-size: 16px;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
  /* remove native arrows */
  -moz-appearance: textfield;
  appearance: none;
}
.number-spinner-container input::-webkit-inner-spin-button,
.number-spinner-container input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.number-spinner-container .num-spinner-btn {
  flex: 0 0 32px;
  height: 32px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  box-sizing: border-box;
}

/* 7) Prev/Next wizard buttons */
.btn-prev,
.btn-next {
  border: 1px solid #000;
  border-radius: 0;
  padding: 0.75em 1.5em;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  box-sizing: border-box;
  text-transform: none;
  background: #fff;
  color: #000;
}
.btn-next {
  background: #000;
  color: #fff;
}

/* 8) Submit (“Send inquiry”) button */
.webform-submission-form .form-actions-container .button {
  width: 231px;
  height: 48px;
  border: 1px solid #000;
  border-radius: 0;
  background: #000;
  color: #fff;
  padding: 0.75em 1.5em;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  box-sizing: border-box;
}

/* 9) Remove all required “*” markers */
.webform-submission-form .form-required::after,
.webform-submission-form .js-form-required::after {
  content: none;
}

/* 10) Final-page email & phone inputs */
.form-item-inquiry-email input,
.form-item-inquiry-phone input {
  width: 100%;
  border: 1px solid #000;
  border-radius: 0;
  padding: 0.5em;
  font-size: 16px;
  font-weight: normal;
  background: #fff;
  box-sizing: border-box;
}

/* 11) Remove privacy-policy stroke */
.form-item-inquiry-consent {
  border: none;
  padding: 0;
}

/* 12) Final Price label/value */
.form-item-final-price {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-item-final-price > label {
  font-size: 1.17em;
  font-weight: normal;
  margin-bottom: 0.5em;
}
.form-item-final-price {
  font-size: 1.5em;
}

/* 13) Narrow the result screen container */
#edit-result .webform-section-wrapper {
  max-width: 400px;
  margin: 0 auto;
}

/* ─── 1) Prev/Next wizard buttons ─── */
.webform-submission-form .webform-button--previous,
.webform-submission-form .webform-button--next {
  display: block;
  width: 231px;
  height: 48px;
  margin: 1em auto 0;
  border: 1px solid #000;
  border-radius: 0;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  text-align: center;
  text-transform: none;
}
.webform-submission-form .webform-button--next {
  background: #000;
  color: #fff;
}

/* ─── 2) Submit (“Send inquiry”) button ─── */
.webform-submission-form .webform-button--submit {
  display: block;
  width: 231px;
  height: 48px;
  margin: 1em auto 0;
  border: 1px solid #000;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  text-transform: none;
}

/* ─── 3) Fixed-width spinner input ─── */
.number-spinner-container input[type="number"] {
  width: 80px;       /* lock every spinner to 80px wide */
  min-width: none;
}


/*** 1) Prev & Next side-by-side, narrower Prev, no hover changes ***/
.webform-submission-form .form-actions {
  display: flex;
  justify-content: center;
  gap: 1em;
}
.webform-submission-form .webform-button--previous,
.webform-submission-form .webform-button--next {
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  padding: 0.5em 1em;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  text-transform: none;
}
.webform-submission-form .webform-button--previous {
  width: auto;     /* much narrower than 231px */
}
.webform-submission-form .webform-button--next {
  background: #000;
  color: #fff;
}
/* remove hover “flash” */
.webform-submission-form .webform-button--previous:hover {
  background: #fff;
}
.webform-submission-form .webform-button--next:hover {
  background: #000;
}

/*** 2) Submit button styled same as Next ***/
.webform-submission-form .webform-button--submit {
  border: 1px solid #000;
  border-radius: 0;
  background: #000;
  color: #fff;
  padding: 0.5em 1em;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  text-transform: none;
  margin-left: 1em;
}
.webform-submission-form .webform-button--submit:hover {
  background: #000;
}

/*** 3) Narrow the final “Result” container ***/
#edit-result .webform-section-wrapper {
  max-width: 300px;
  margin: 0 auto;
}


/*** 5) “Send inquiry” heading as H5 ***/
.form-item-inquiry-headline h2 {
  font-size: 1.25rem;  /* roughly an H5 */
  font-weight: normal;
  margin: 0 0 0.75em;
}

/*** 6) Labels above inputs on last screen ***/
.form-item-inquiry-email,
.form-item-inquiry-phone {
  display: block;
  margin-bottom: 1em;
}
.form-item-inquiry-email label,
.form-item-inquiry-phone label {
  display: block;
  margin-bottom: 0.5em;
  font-size: 16px;
  font-weight: normal;
}
.form-item-inquiry-email input,
.form-item-inquiry-phone input {
  width: 100%;
  height: 32px;
  border: 1px solid #000;
  border-radius: 0;
  padding: 0.5em;
  font-size: 16px;
  box-sizing: border-box;
}

/*** 7) Remove stroke on consent checkbox wrapper ***/
.form-item-inquiry-consent {
  border: none;
  padding: 0;
}


/* ─── 1) Make every wrapper full-width and stack vertically ─── */
.webform-submission-form > * {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

/* ─── 2) Ensure all “form-field” and spinner groups fill the column ─── */
.webform-submission-form .form-field,
.webform-submission-form .number-spinner-container,
.webform-submission-form .custom-spinner-group {
  width: 100%;
}

/* ─── 3) Turn each radio/checkbox group into full-width flex rows ─── */
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.75em 1em;
}

/* ─── 4) Buttons row: full-width or side-by-side ─── */
/* If you still want Next/Prev side-by-side, leave as is. */
/* Otherwise, force them each full width: */
/*
.webform-submission-form .form-actions button {
  width: 100%;
  margin: 0.5em 0;
}
*/

/* A) Make the form 25% narrower */
.webform-submission-form {
  /* Originally max-width: 600px; 75% of that is 450px */
  max-width: 450px;
  margin: 0 auto;
}

/* B) Prev on the left, Next on the right */
.webform-submission-form .form-actions {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.webform-submission-form .webform-button--previous {
  /* automatically sits at left edge */
  margin: 0;
}
.webform-submission-form .webform-button--next {
  /* sits at right edge */
  margin: 0;
}

/* C) Add breathing room on “Calculate Final Price” button */
.webform-button--next {
  padding: 1em 2em;
  /* ensure text is centered */
  text-align: center;
}

/* D) Remove thin line/underline under each fieldset legend */
.webform-submission-form fieldset legend {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.webform-submission-form fieldset .fieldset-legend::after {
  display: none;
}

/* 1) Bigger vertical gaps between every field */
.webform-submission-form {
  /* increase the grid row-gap */
  row-gap: 4em;
}

/* 2) Add margin above the Prev/Next button row */
.webform-submission-form .form-actions {
  margin-top: 2em;
  display: flex;
  justify-content: space-between; /* Prev on left, Next on right */
}

/* 3) Align Next button to the right edge */
.webform-submission-form .webform-button--next {
  margin-left: auto;
  /* 5) make it a bit wider */
  min-width: 200px;
}

/* 4) Larger horizontal gap between the radio/checkbox control and its label */
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 1.5em;
}

/* 6) Make the whole form container 25% narrower (so that final step matches) */
.webform-submission-form {
  /* if you’ve already set max-width:450px, skip this */
  max-width: 450px;
  margin: 0 auto;
}

/* 1) Even bigger vertical gaps between each field */
.webform-submission-form {
  row-gap: 6em;  /* increase from 4em to 6em */
}

/* 2) More breathing room under each fieldset legend */
.webform-submission-form fieldset legend {
  margin-bottom: 1.5em;
}

/* 3) Shift the form container up on screen */
.webform-ajax-form-wrapper {
  align-items: flex-start;  /* pin to top instead of center */
  padding-top: 5vh;         /* add a little top offset */
}


/* ─── Increase gap between each individual field ─── */
.webform-submission-form .form-field,
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox,
.webform-submission-form .number-spinner-container {
  margin-bottom: 1em;   /* adjust to taste */
}

/* ─── Tweak the “Calculate Final Price” (Next) and Prev button spacing ─── */
.webform-submission-form .form-actions {
  margin-top: 3em;      /* more breathing room above the buttons */
}

/* ─── Remove the row-gap override (if still present) ─── */
.webform-submission-form {
  row-gap: 0;
}

/* 1) Ensure the actions row spans full form width */
.webform-submission-form .form-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;  /* Prev to left, Next to right */
}

/* 2) Push only the Next button all the way right */
.webform-submission-form .webform-button--next {
  margin-left: auto;
}

/* 1) Force the actions container to fill the content width and remove its padding */
.webform-submission-form .form-actions {
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: space-between; /* Prev at left, Next at right */
}

/* 2) Make sure Previous has no stray margins */
.webform-submission-form .webform-button--previous {
  margin: 0;
}

/* 3) Push Next all the way to the right edge with zero right‐margin */
.webform-submission-form .webform-button--next {
  margin-left: auto;
  margin-right: 0;
}

/* 4) For steps with only a Next button, this also guarantees it hugs the right side */
.webform-submission-form .form-actions:only-child .webform-button--next {
  margin-left: auto;
}

/* 5) Remove any gap on the right of the button */
.webform-submission-form .form-actions > * {
  flex-shrink: 0;
}

/* 6) (Optional) If you still see padding inside the button container, override it: */
.webform-submission-form .form-actions .webform-button {
  padding-left: 1em;
  padding-right: 1em;
}

/* 1) Remove the horizontal padding on the form itself so buttons and fields share the same edges */
.webform-submission-form {
  padding-left: 0;
  padding-right: 0;
}

/* 2) Ensure the actions row spans full width of the form container */
.webform-submission-form .form-actions {
  width: 100%;
  padding: 0;               /* no inner padding */
  display: flex;
  justify-content: space-between;
}

/* 3) Make sure Next hugs the right edge exactly */
.webform-submission-form .webform-button--next {
  margin: 0;
  margin-left: auto;        /* push to far right */
}

/* 4) In case there’s still stray padding in the wrapper */
.webform-ajax-form-wrapper {
  padding-left: 0;
  padding-right: 0;
}

/* 1) Nix any right-margin on the Next button */
.webform-submission-form .webform-button--next,
.webform-submission-form .btn-next {
  margin-right: 0 !important;
}

/* 2) Ensure the actions container itself has no padding or extra gutter */
.webform-submission-form .form-actions {
  padding: 0;
}

/* 3) Remove any leftover margin on all action buttons */
.webform-submission-form .form-actions > * {
  margin: 0 !important;
}

/* Final-page wrapper: same responsive max-width and inner padding */
section[data-webform-key="result"] .webform-section-wrapper {
  width: 90vw;         /* fill up to 90% of viewport on small/mobile */
  max-width: 450px;    /* same max as your other steps */
  margin: 0 auto;      /* center horizontally */
  padding: 0 1rem;     /* give left/right breathing room */
  box-sizing: border-box;
}

/* Ensure the outer AJAX wrapper doesn’t add extra horizontal padding */
.webform-ajax-form-wrapper {
  padding-left: 0;
  padding-right: 0;
}

/* For very small screens, make sure the form itself never overflows */
@media (max-width: 480px) {
  .webform-submission-form {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* 1) Remove the border around only the “I agree…” checkbox wrapper */
.no-stroke-consent {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 2em;    /* keep the same gap you’ve set between fields */
}

/* 2) Allow the long consent text to wrap instead of overflow */
.no-stroke-consent label {
  white-space: normal;
  line-height: 1.4;
}

/* 3) If you prefer a little indent on the checkbox itself, you can optionally do: */
.no-stroke-consent input[type="checkbox"] {
  margin-right: 0.5em;
}

/*** 1) Kill the border on just the consent checkbox wrapper ***/
.webform-submission-form .form-item-inquiry-consent.form-type-checkbox {
  border: none !important;
  padding: 0 !important;
  margin-bottom: 2em;            /* keep same gap as other fields */
}

/*** 2) Allow the long consent text to wrap on narrow screens ***/
.webform-submission-form .form-item-inquiry-consent.form-type-checkbox label {
  white-space: normal !important;
  word-wrap: break-word;
  line-height: 1.4;
}

/*** 3) Force the consent container to the full form width ***/
.webform-submission-form .form-item-inquiry-consent {
  width: 100%;
  box-sizing: border-box;
}


/* 1) Page header H1: 64px desktop, 40px mobile */
.page-header,
.page-header h1 {
  font-size: 64px;
  margin-bottom: 1em;
}
@media (max-width: 600px) {
  .page-header,
  .page-header h1 {
    font-size: 40px;
  }
}

/* 2) Fieldset legend: 32px desktop, 24px mobile */
.webform-submission-form fieldset legend {
  font-size: 32px;
  margin-bottom: 0.5em;
}
@media (max-width: 600px) {
  .webform-submission-form fieldset legend {
    font-size: 24px;
  }
}

/* 3) Force all field labels, inputs, spinner text/buttons to 16px */
.webform-submission-form .form-field  > label,
.webform-submission-form .form-field input,
.webform-submission-form .form-field select,
.webform-submission-form .form-field textarea,
.webform-submission-form .form-type-radio  label,
.webform-submission-form .form-type-checkbox label,
.number-spinner-container input,
.number-spinner-container .num-spinner-btn {
  font-size: 16px;
  line-height: 1.2;
}

/* 4) Make the custom spinner container match the radio wrapper exactly */
.number-spinner-container {
  display: inline-flex;
  align-items: center;
  border: 1px solid #000;
  border-radius: 0;
  padding: 0.5em 1em;
  background: #fff;
  box-sizing: border-box;
  gap: 0.5em;
}

/* 5) Ensure the spinner’s inner elements also fill that height */
.number-spinner-container input[type="number"],
.number-spinner-container .num-spinner-btn {
  height: auto; /* flex and padding handle it */
}

/* 1) Strip borders/padding off the container so we can style the label instead */
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox {
  border: none;
  padding: 0;
  margin-bottom: 1.5em;    /* keep your field gap */
}

/* 2) Make the <label> fill the entire block and carry the border */
.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75em 1em;      /* same as before */
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
}

/* 3) Ensure the native input stays aligned at the right edge */
.webform-submission-form .form-type-radio label input,
.webform-submission-form .form-type-checkbox label input {
  margin-left: auto;
}

/* 4) On hover, keep the same look (optional) */
.webform-submission-form .form-type-radio label:hover,
.webform-submission-form .form-type-checkbox label:hover {
  background: #fff;
}

/* 1) Give label flex children some breathing room */
.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label {
  display: flex;           /* already flex, reaffirm */
  align-items: center;
  justify-content: space-between;
  gap: 1em;                /* ← adds horizontal space between text and input */
}

/* 2) Prevent the input from pushing into the text */
.webform-submission-form .form-type-radio label input,
.webform-submission-form .form-type-checkbox label input {
  flex: 0 0 auto;          /* don't grow or shrink */
  margin-left: 0;          /* remove auto-margin that was overlapping the text */
}

/* 3) Ensure the text never wraps under the input */
.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label {
  white-space: nowrap;
}

/* 1) Lay out radio/checkbox labels L→R, not spaced-between */
.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* stack items against the left edge */
  /* gap won’t work reliably on text nodes, so we’ll use margin on the input */
}

/* 2) Give the actual <input> a right-margin so text never overlaps */
.webform-submission-form .form-type-radio label input.form-radio,
.webform-submission-form .form-type-checkbox label input.form-checkbox {
  margin: 0 1em 0 0;   /* 1em gap after the circle/square */
  /* ensure the control stays its natural size */
  flex: 0 0 auto;
}

/* 3) Clean up any leftover “space-between” rules */
.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label {
  gap: 0;              /* remove any previous gap setting */
}

/* ─── 1) Force the label itself to be the styled container ─── */
.webform-submission-form .form-type-radio label.control-label.option,
.webform-submission-form .form-type-checkbox label.control-label.option {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0.75em 1em !important;    /* same padding you’ve used elsewhere */
  border: 1px solid #000 !important;  /* re-apply your stroke */
  border-radius: 0 !important;
  background: #fff !important;
  box-sizing: border-box;
}

/* ─── 2) Position the <input> to the left, then gap, then text ─── */
.webform-submission-form .form-type-radio label.control-label.option input.form-radio,
.webform-submission-form .form-type-checkbox label.control-label.option input.form-checkbox {
  position: static !important;
  margin: 0 0.75em 0 0 !important;  /* 0.75em gap to the label text */
  flex: 0 0 auto !important;
}

/* ─── 3) Remove any conflicting container rules ─── */
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox {
  border: none !important;
  padding: 0 !important;
  margin-bottom: 1.5em;               /* keep your vertical gap */
}

/* 1) Remove the spinner container stroke and add space above it */
.number-spinner-container {
  border: none;                 /* no outer box */
  margin-top: 1em;              /* gap from previous field */
  display: inline-flex;
  align-items: stretch;         /* stretch children to full container height */
  box-sizing: border-box;
}

/* 2) Make the ± buttons and the <input> fill the container’s full height */
.number-spinner-container .num-spinner-btn,
.number-spinner-container input[type="number"] {
  height: 100%;                 /* full height of .number-spinner-container */
  line-height: 1;               /* prevent extra internal spacing */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 400;
}

/* 3) Tweak the number input itself */
.number-spinner-container input[type="number"] {
  flex: 0 0 80px;               /* or whatever fixed width you prefer */
  padding: 0 0.5em;
  text-align: center;
  background: #fff;
}

/* 4) Tweak the ± buttons */
.number-spinner-container .num-spinner-btn {
  flex: 0 0 32px;
  width: 45px;
  background: #fff;
  cursor: pointer;
}

/* 5) Ensure the little built-in arrows are gone */
.number-spinner-container input::-webkit-inner-spin-button,
.number-spinner-container input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.number-spinner-container input {
  -moz-appearance: textfield;
  appearance: none;
}

/* ─── Force spinner to match other fields’ height ─── */
.number-spinner-container {
  border: none;             /* already removed */
  margin-top: 1em;          /* breathing room */
  display: inline-flex;
  align-items: center;      /* vertical centering */
  height: 32px;             /* match your input height */
  box-sizing: border-box;
}

.number-spinner-container .num-spinner-btn,
.number-spinner-container input[type="number"] {
  height: 100%;             /* fill the 32px container */
  line-height: normal;      /* prevent odd centering */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 400;
}

/* (you can still keep the fixed widths you like) */
.number-spinner-container input[type="number"] {
  flex: 0 0 80px;
  padding: 0 0.5em;
  text-align: center;
}
.number-spinner-container .num-spinner-btn {
  flex: 0 0 32px;
  width: 32px;
  background: #fff;
  cursor: pointer;
}


/* ─── Force spinner container to 45px tall ─── */
.number-spinner-container {
  height: 55px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  justify-self: start;   /* in a grid, push to the left edge */
  margin-top: 0.5em; /* if you still want that breathing room */
}

/* Make the ± buttons and the input fill that 45px */
.number-spinner-container .num-spinner-btn,
.number-spinner-container input[type="number"] {
  height: 100%;
  box-sizing: border-box;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

/* (Keep your fixed widths for each element) */
.number-spinner-container .num-spinner-btn {
  flex: 0 0 45px;   /* lock the button at 45px */
  width: 45px;
}
.number-spinner-container input[type="number"] {
  flex: 0 0 80px;
}


/* 2) Re-show only the “Access Road” step’s label */
.webform-submission-form .form-item-access-road-radios
  > label.control-label.js-form-required.form-required {
  display: inline-block;
}
.custom-spinner-group .number-spinner-container {
  justify-self: start;
  margin-top: 0 em;
}

/* only show inline spinner when its radio is checked */
.number-spinner-inline {
  display: none;
  margin-top: 0.5em;
  gap: 0.5em;
}
.option-parking-15000 input[type="radio"]:checked ~ .number-spinner-inline,
.option-parking-3000  input[type="radio"]:checked ~ .number-spinner-inline,
.option-parking-45000 input[type="radio"]:checked ~ .number-spinner-inline {
  display: flex;
}

/* spinner layout */
.number-spinner-inline {
  align-items: center;
}
.number-spinner-inline .num-spinner-btn,
.number-spinner-inline input[type="number"] {
  height: 45px;           /* fixed height */
  border: 1px solid #000;
  border-radius: 0;
  font-size: 16px;
  background: #fff;
  box-sizing: border-box;
}
.number-spinner-inline .num-spinner-btn {
  width: 45px;            /* wider buttons */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.number-spinner-inline input[type="number"] {
  width: 80px;            /* fixed width */
  text-align: center;
  -moz-appearance: textfield;
  appearance: none;
}
.number-spinner-inline input::-webkit-inner-spin-button,
.number-spinner-inline input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* hide all spinners by default */
.number-spinner-container {
  display: none;
  margin-top: 0.5em;    /* small gap under the radio */
  gap: 0.5em;
}

/* show spinner when the matching radio is checked */
.option-covered_terrace1-999    input[type="radio"]:checked ~ .number-spinner-container,
.option-number_of_bedrooms_radios-999 input[type="radio"]:checked ~ .number-spinner-container,
.option-living_room_size_radio-999 input[type="radio"]:checked ~ .number-spinner-container,
.option-basement_radios-999   input[type="radio"]:checked ~ .number-spinner-container,
/* parking */
.option-parking-15000 input[type="radio"]:checked ~ .number-spinner-container,
.option-parking-3000  input[type="radio"]:checked ~ .number-spinner-container,
.option-parking-45000 input[type="radio"]:checked ~ .number-spinner-container,
/* road (any non-zero) */
.option-access-road-radios-105 input[type="radio"]:checked ~ .number-spinner-container,
.option-access-road-radios-315 input[type="radio"]:checked ~ .number-spinner-container {
  display: flex;
}

/* your original spinner styling */
.number-spinner-container {
  align-items: center;
}
.number-spinner-container .num-spinner-btn,
.number-spinner-container input[type="number"] {
  height: 45px;             /* fixed height */
  border: 1px solid #000;
  border-radius: 0;
  font-size: 16px;
  background: #fff;
  box-sizing: border-box;
}
.number-spinner-container .num-spinner-btn {
  width: 45px;              /* wider buttons */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.number-spinner-container input[type="number"] {
  width: 80px;              /* fixed width */
  padding: 0 0.5em;
  text-align: center;
  appearance: none;         /* kill native arrows */
}
.number-spinner-container input::-webkit-inner-spin-button,
.number-spinner-container input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Base: hide until JS shows */
.number-spinner-container {
  display: none;
  margin-top: 0.5em;
  gap: 0.5em;
  align-items: center;
}

/* spinner & buttons styling */
.number-spinner-container,
.number-spinner-container .num-spinner-btn,
.number-spinner-container input[type="number"] {
  box-sizing: border-box;
  background: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  border: 1px solid #000;
  border-radius: 0;
}

.number-spinner-container .num-spinner-btn {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.number-spinner-container input[type="number"] {
  width: 80px;
  height: 45px;
  padding: 0 0.5em;
  text-align: center;
  appearance: none;
}
.number-spinner-container input::-webkit-inner-spin-button,
.number-spinner-container input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/*** 1) Always show the spinner’s own <label> ***/
.number-spinner-container + .form-item > label,
.form-item .number-spinner-container ~ label {
  display: block !important;
}

/*** 2) Style all those spinner-labels in IBM Plex Mono, 16px regular ***/
.number-spinner-container + .form-item > label,
.form-item .number-spinner-container ~ label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 400;
  margin: 0;   /* we’ll zero out any bottom margin below */
}

/*** 3) Kill the spinner container stroke ***/
.number-spinner-container {
  border: none !important;
}

/*** 4) Remove any bottom-margin under each spinner ***/
.number-spinner-container {
  margin-bottom: 0 !important;
}

/* Remove left/right padding from the spinner wrapper */
.number-spinner-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Show & style the spinner field labels */
.number-spinner-container > label,
.custom-spinner-group > .form-item > label {
  display: block;                             /* ensure it’s visible */
  font-family: 'IBM Plex Mono', monospace;    /* your mono font */
  font-size: 16px;                            /* 16px regular */
  font-weight: 400;
  margin: 0 0 0.5em;                          /* little space under label */
}

/* 1) Override any earlier label rules – spinner fields & final email/phone */
.webform‐submission‐form 
  .form‐item‐cars‐garage > label.control‐label,
.webform‐submission‐form 
  .form‐item‐inquiry‐email  > label.control‐label,
.webform‐submission‐form 
  .form‐item‐inquiry‐phone  > label.control‐label {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size:    16px               !important;
  font-weight:  400                !important;
  margin-top:   .5em               !important;  /* more breathing room above */
  margin-bottom:.25em              !important;  /* tighten under the label */
}

/* 2) If you have any other custom‐input labels left hidden, re‐show them */
.webform‐submission‐form 
  .number‐spinner‐container + label.control‐label {
  display: block !important;
}

/* 3) Pull the action buttons up closer to the fields */
.webform‐submission‐form .form‐actions {
  margin-top: 1em !important;   /* instead of 2–3em */
}

/* 4) If you ever have a wider override that resets margin, this will catch it */
.webform‐submission‐form .form‐actions > * {
  margin-top: 0 !important;
}

/* ——— FINAL PRICE NUMBER ——— */
.final-price-number {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 32px;
  font-weight: 400;
  text-align: left;
  margin: 0;             /* no extra gap below */
  line-height: 1.2;
}

/* ensure the wrapper doesn’t center it */
.form-item-final-price {
  text-align: left;
}

/* make the wrapper relative so we can absolutely position the suffix */
.form-item-access-road-length {
  position: relative;
}

/* give the input some extra right padding to make room for the “m” */
.form-item-access-road-length input[type="number"] {
  padding-right: 1.5em;    /* adjust as needed */
}

/* absolutely position the suffix character inside the input area */
.form-item-access-road-length .field-suffix {
  position: absolute;
  top: 50%;
  right: calc( /* width of your “+” button */ 45px + 0.5em );
  transform: translateY(-50%);
  pointer-events: none;    /* clicks go through to the input */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: #000;
}

/* hide the built-in label wrapper if you need to */
.form-item-final-price .control-label { display: none; }

/* then pick up the generated number and append € */
.form-item-final-price .js-form-type-item {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 32px;
  font-weight: bold;
}
.form-item-final-price .js-form-type-item::after {
  content: " €";
}

/* 1) Privacy‐policy checkbox text, left-aligned IBM Plex Sans 16px */
.form-item-inquiry-consent label.control-label {
  display: block;
  text-align: left;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  margin: 0 0 1em;   /* add a little breathing room underneath */
}

/* 2) Final-price label in IBM Plex Mono 32px regular */
.form-item-final-price > label.control-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 32px;
  font-weight: normal;
  text-align: left;
  margin: 0 0 0.5em;
}

/* 3) Final-price number (and €) in “h1” style */
.final-price-number {
  font-family: "IBM Plex Mono", monospace;
  font-size: 48px;    /* roughly equivalent to h1 */
  font-weight: bold;
  text-align: left;
  margin: 0 0 2rem;   /* extra gap below the price */
}

/* 4) Make the white “result” container auto-grow rather than fix at 80vh */
.webform-ajax-form-wrapper {
  height: auto !important;
  min-height: 80vh;   /* keeps the old minimum, but allows expansion */
}

/* 5) Ensure the result step wrapper has some comfortable bottom padding */
section[data-webform-key="result"] .webform-section-wrapper {
  padding-bottom: 2rem;
}


/* 1) Make the entire consent label a single block */
.form-item-inquiry-consent label.control-label {
  display: block;
  text-align: left;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 1.5em;
}

/* 2) Any <p> inside that label should behave inline */
.form-item-inquiry-consent label.control-label p {
  display: inline;
  margin: 0;
}

/* 3) Ensure all <a> links are inline (no extra block spacing) */
.form-item-inquiry-consent label.control-label a {
  display: inline;
  /* (optional) add a tiny left/right padding so click area feels roomy */
  padding: 0 0.25em;
}

/* 1) Target the exact consent checkbox label Drupal outputs */
.form-item-inquiry-consent label.control-label.option {
  display: block !important;
  text-align: left !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin-bottom: 1em !important;
}

/* 2) Any paragraph inside must run inline (kill its block behavior) */
.form-item-inquiry-consent label.control-label.option p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Make sure the links themselves don’t break out */
.form-item-inquiry-consent label.control-label.option a {
  display: inline !important;
  margin: 0 !important;
  padding: 0 0.25em !important;
}

/*** Privacy‐consent inline, IBM Plex Sans, 16px ***/
.form-item-inquiry-consent label.control-label.option,
.form-item-inquiry-consent .form-checkbox {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: 0 0 1em; /* space below */
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* kill that <p> wrapper so links sit inline */
.form-item-inquiry-consent label.control-label.option p {
  display: inline !important;
  margin: 0 !important;
}

/* ensure each <a> stays inline and inherits font */
.form-item-inquiry-consent label.control-label.option a {
  display: inline !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 16px !important;
  text-decoration: underline;
  margin: 0 0.25em; /* small gutter around links */
}

/* space out the checkbox itself from the text */
.form-item-inquiry-consent label.control-label.option input[type="checkbox"] {
  margin: 0 0.5em 0 0 !important;
}

/*** 1) Remove the container stroke ***/
.form-item-inquiry-consent.form-type-checkbox {
  border: none !important;
  padding: 0 !important;
  margin-bottom: 1em;  /* keep your gap */
  background: none !important;
}

/*** 2) Make the label inline-flex, keep the checkbox visible ***/
.form-item-inquiry-consent label.control-label {
  display: inline-flex !important;
  align-items: center;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

/*** 3) Ensure the checkbox itself shows and sits to the left ***/
.form-item-inquiry-consent label.control-label input[type="checkbox"] {
  display: inline-block !important;
  margin: 0 0.5em 0 0;
}

/*** 4) Flatten that inner <p> so links sit inline ***/
.form-item-inquiry-consent label.control-label p {
  display: inline !important;
  margin: 0 !important;
}

/*** 5) Keep links inline and same font ***/
.form-item-inquiry-consent label.control-label a {
  display: inline !important;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  text-decoration: underline;
  margin: 0 0.25em;
}

/* 1) Remove any stroke on just the consent field wrapper */
.form-item-inquiry-consent.form-type-checkbox,
.form-item-inquiry-consent.js-form-type-checkbox,
.checkbox.form-item-inquiry-consent {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 1em !important;
}

/* 2) Restore the native checkbox and make sure it’s visible */
.form-item-inquiry-consent input.form-checkbox {
  display: inline-block !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0.5em 0 0 !important;
}

/* 3) Style the label as inline-flex so box + text sit together */
.form-item-inquiry-consent > label.control-label {
  display: inline-flex !important;
  align-items: center !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4) Flatten any inner <p> so your links sit on the same line */
.form-item-inquiry-consent > label.control-label p {
  display: inline !important;
  margin: 0 !important;
}

/* 5) Keep hyperlinks in that label inline and same font */
.form-item-inquiry-consent > label.control-label a {
  display: inline !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 16px !important;
  text-decoration: underline !important;
  margin: 0 0.25em !important;
}

/* only remove the 1px stroke on the consent checkbox wrapper */
.form-field.field-inquiry-consent {
  border: none;
  padding: 0;        /* if you want to remove any inner spacing too */
}

/* make sure its inner checkbox and label still show */
.form-field.field-inquiry-consent .form-checkbox {
  display: inline-block;
  margin-right: 0.5em;
}

/* 1) Remove any stroke on just the consent field wrapper */
.form-item-inquiry-consent.form-type-checkbox,
.form-item-inquiry-consent.js-form-type-checkbox,
.checkbox.form-item-inquiry-consent {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 1em !important;
}

/* 2) Restore the native checkbox and make sure it’s visible */
.form-item-inquiry-consent input.form-checkbox {
  display: inline-block !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0.5em 0 0 !important;
}

/* 3) Style the label as inline-flex so box + text sit together */
.form-item-inquiry-consent > label.control-label {
  display: inline-flex !important;
  align-items: center !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4) Flatten any inner <p> so your links sit on the same line */
.form-item-inquiry-consent > label.control-label p {
  display: inline !important;
  margin: 0 !important;
}

/* 5) Keep hyperlinks in that label inline and same font */
.form-item-inquiry-consent > label.control-label a {
  display: inline !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 16px !important;
  text-decoration: underline !important;
  margin: 0 0.25em !important;
}

/* — Make the phone field wrapper full-width — */
.webform-submission-form .form-item-inquiry-phone {
  width: 100%;
  box-sizing: border-box;
  display: block; /* ensure it isn’t still flexing beside a label */
}

/* — Stretch the <input> itself to fill its container — */
.webform-submission-form .form-item-inquiry-phone input {
  width: 100%;
  box-sizing: border-box;
}

/* ─── Unify all <h3> sub-section titles in the webform ─── */
.webform-submission-form h3 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 32px;
  font-weight: normal;
  margin: 0 0 1em;   /* same bottom-margin as your other titles */
  text-align: left;
}

/* ─── Show & style all custom-number input labels ─── */
.number-spinner-container > label.control-label,
.number-spinner-inline > label.control-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0.5em;
}


@media (max-width: 600px) {
  /* push the whole wizard up on small screens */
  .webform-ajax-form-wrapper {
    align-items: flex-start !important;
    padding-top: 2vh     !important;  /* tweak this value until it’s high enough */
  }
}
/* Keep the Next button text & background unchanged on hover */
.webform-submission-form .webform-button--next:hover,
.webform-submission-form .btn-next:hover {
  background: #000 !important;  /* stay black */
  color: #fff !important;       /* stay white */
}

/* only remove the border on our consent field */
.consent-wrapper {
  border: none !important;
  padding: 0;           /* if you need to kill its inner padding too */
  margin-bottom: 1em;   /* keep the gap under it */
}

/*──────────────────────────────────────────────────*/
/* Only remove the border on our privacy‐policy field */
.wrapper-inquiry-consent {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 1em;    /* keep same gap under it */
}

/* 1) Remove the wrapper’s border */
.webform-submission-form .form-item-inquiry-consent.form-type-checkbox {
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* 2) And strip the 1px stroke that Drupal applies to the <label> */
.webform-submission-form
  label.control-label.option.js-form-required.form-required[for^="edit-inquiry-consent"] {
  border: none !important;
  background: none !important;
  padding: 0 !important;
}



/* ─── HEADLINY NAD CUSTOM NUMBER INPUTMI ─── */

/* parking: počet áut */
.form-item-cars-covered-number   > label.control-label,
.form-item-cars-paved            > label.control-label,
.form-item-cars-garage           > label.control-label,
/* access-road: dĺžka cesty */
.form-item-road-length-m-        > label.control-label {
  display: block !important;               /* zruší global display:none */
  font-family: 'IBM Plex Mono', monospace; /* tvoj titulkový font */
  font-size: 16px;                         /* 16 px regular */
  font-weight: 400;
  margin: 0 0 0.5em;                       /* trocha vzduchu pod titulkou */
}

/* ─── Znovu zobraz „Konečná cena“ (Final Price) ─── */
.form-item-final-price > label.control-label {
  display: block !important;      /* prepíše staré display:none */
  font-family: "IBM Plex Mono", monospace;
  font-size: 32px;
  font-weight: normal;
  text-align: left;
  margin: 0 0 0.5em;
}



.form-item-inquiry-name label,
.form-item-inquiry-name input {
  /* zdedí väčšinu vlastností, ale explitne môžeme pridať … */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
}
.form-item-inquiry-name {
  display: block;
  margin-bottom: 1em;   /* rovnaká medzera ako ostatné polia */
}