/* Calculator page — Forminator questionnaire styled to the original monochrome
   tokens (Montserrat, black/white, minimal). Form design is set to "none" so
   Forminator ships no competing CSS; these rules own the look. */

.sc-calc{ max-width:860px; margin:0 auto; padding:56px 24px 88px; }
/* The questionnaire also runs inside a normal page section (bottom of /sell-a-business/
   and /buy-a-business/). There `.sc-calc` is only needed as the styling hook — the
   section already supplies its own width and padding, so drop the page-wrapper geometry
   or the two stack and the form ends up double-padded and too narrow. */
.sc-calc--inline{ max-width:none; margin:0; padding:0; }
.sc-calc .sc-lead{ color:var(--sc-grey); font-size:15px; line-height:1.6; margin:0 0 8px; max-width:60ch; }

/* ---- Sell | Buy toggle ---- */
.sc-calc-toggle{ display:flex; gap:0; margin:28px 0 36px; border:1.5px solid #000; width:max-content; max-width:100%; }
.sc-calc-tab{
  font-family:'Montserrat',sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  background:#fff; color:#000; border:0; padding:14px 26px; min-height:48px; cursor:pointer; transition:background .15s,color .15s;
}
.sc-calc-tab + .sc-calc-tab{ border-left:1.5px solid #000; }
.sc-calc-tab.is-active{ background:#000; color:#fff; }
.sc-calc-tab:not(.is-active):hover{ color:var(--sc-gold); }
.sc-calc-panel{ display:none; }
.sc-calc-panel.is-active{ display:block; }

/* ---- Forminator field reset ---- */
.sc-calc .forminator-ui.forminator-custom-form,
.sc-calc .forminator-ui *{ font-family:'Montserrat',sans-serif !important; }
.sc-calc .forminator-row{ margin-bottom:22px; }
.sc-calc .forminator-field{ display:block; }
.sc-calc .forminator-label{
  display:block; color:#111; font-weight:700 !important; font-size:12px !important; line-height:1.7; margin:0 0 10px;
}
.sc-calc .forminator-label .forminator-required{ color:var(--sc-gold); }

/* text / email / tel / textarea */
.sc-calc .forminator-input,
.sc-calc input.forminator-input-with-icon,
.sc-calc .forminator-textarea,
.sc-calc select.forminator-select,
.sc-calc .sc-calc .forminator-input--phone{
  width:100%; min-height:48px; padding:12px 14px;
  border:1.5px solid var(--sc-line); border-radius:2px; background:#fff;
  color:#111; font-size:16px !important; line-height:1.4; box-shadow:none; -webkit-appearance:none;
}
.sc-calc textarea.forminator-textarea{ min-height:120px; resize:vertical; }
.sc-calc .forminator-input:focus,
.sc-calc .forminator-textarea:focus,
.sc-calc select.forminator-select:focus{ border-color:#000; outline:none; box-shadow:none; }

/* radio / checkbox — boxed option rows, ≥44px targets */
.sc-calc .forminator-checkbox,
.sc-calc .forminator-radio{
  display:flex; align-items:flex-start; gap:12px; min-height:44px;
  padding:11px 14px; margin:0 0 10px; border:1.5px solid var(--sc-line); border-radius:2px;
  cursor:pointer; font-weight:400 !important; font-size:14px !important; color:#111; transition:border-color .15s;
}
.sc-calc .forminator-checkbox:hover,
.sc-calc .forminator-radio:hover{ border-color:#999; }
/* Forminator hides the native input (renders it 1x1px) and paints its own <span> box.
   WHY THE TWO QUESTIONNAIRES LOOKED DIFFERENT: Forminator generates a per-form
   stylesheet — `style-409.css` exists for the Buy form but there is no `style-407.css`
   for Sell — and it uses ID-level selectors
   (`.forminator-ui#forminator-module-409.forminator-design--default …`) that outrank
   anything class-based here. So Buy got Forminator's own sizing/colours while Sell fell
   through to these rules. The stored form SETTINGS are identical; the difference is
   purely which generated stylesheet exists.
   Hence the !important flags below: they are what makes both forms land on one design,
   whichever per-form stylesheet Forminator decides to emit. */
.sc-calc .forminator-checkbox-box,
.sc-calc .forminator-radio-bullet{
  flex-shrink:0; margin-top:1px;
  width:20px !important; height:20px !important;
  background-color:#fff !important;
  border:1.5px solid var(--sc-black) !important;
  box-shadow:none !important;
}
.sc-calc .forminator-checkbox-box{ border-radius:0 !important; }
.sc-calc .forminator-radio-bullet{ border-radius:50% !important; position:relative; }

/* SELECTED state. Forminator marks a chosen option by adding `forminator-is_checked` to
   the LABEL from its JS — it does not rely on the CSS :checked selector — so both the
   class and :checked are matched here. Miss the class and the base rules above pin the
   mark to its unchecked colours, leaving a selection that looks unselected. */
.sc-calc .forminator-checkbox input:checked + .forminator-checkbox-box,
.sc-calc .forminator-checkbox.forminator-is_checked .forminator-checkbox-box{
  background-color:var(--sc-black) !important; border-color:var(--sc-black) !important;
}
.sc-calc .forminator-checkbox-box::before{ color:#fff !important; }

/* Radio keeps the ring and reveals Forminator's own dot, recoloured to the palette. */
.sc-calc .forminator-radio-bullet::before{ background-color:var(--sc-black) !important; }
.sc-calc .forminator-radio input:checked + .forminator-radio-bullet::before,
.sc-calc .forminator-radio.forminator-is_checked .forminator-radio-bullet::before{
  opacity:1 !important;
}

.sc-calc .forminator-checkbox input,
.sc-calc .forminator-radio input{ accent-color:#000; }
.sc-calc .forminator-checkbox-label,
.sc-calc .forminator-radio-label{ line-height:1.4; }

/* upload */
.sc-calc .forminator-button-upload,
.sc-calc .forminator-field .forminator-button-upload{
  min-height:48px; border:1.5px dashed var(--sc-line); border-radius:2px; background:var(--sc-tint);
  color:#111; font-weight:600;
}

/* ---- Pagination indicator (steps timeline) ----
   Override Forminator's default teal accent → monochrome + gold per tokens.
   Progress fill and the active step are "highlights", so they carry the gold. */
.sc-calc .forminator-pagination-steps{ margin:0 0 34px; }
.sc-calc .forminator-pagination-steps .forminator-step-label{
  font-family:'Montserrat',sans-serif; color:var(--sc-grey) !important;
  font-size:12px !important; font-weight:500 !important; letter-spacing:.01em;
}
.sc-calc .forminator-pagination-steps .forminator-step-dot{
  background:#fff !important; border:2px solid var(--sc-line) !important;
}
.sc-calc .forminator-pagination-steps .forminator-break{ background:var(--sc-line) !important; }
/* completed-progress fill segment (Forminator paints this teal by default) */
.sc-calc .forminator-pagination-steps .forminator-break::before{ background:var(--sc-gold) !important; }
/* active step */
/* Needs !important on the weight too — the base step-label rule above now carries one,
   and without a matching flag the active step loses its emphasis. */
.sc-calc .forminator-pagination-steps .forminator-current .forminator-step-label{ color:#000 !important; font-weight:700 !important; }
.sc-calc .forminator-pagination-steps .forminator-current .forminator-step-dot{
  background:var(--sc-gold) !important; border-color:var(--sc-gold) !important;
}

/* ---- Buttons (Back / Next / Submit) ---- */
.sc-calc .forminator-pagination-footer{
  display:flex; gap:12px; margin-top:34px; padding-top:24px; border-top:1px solid var(--sc-line);
}
.sc-calc .forminator-button{
  font-family:'Montserrat',sans-serif !important; font-size:14px !important; font-weight:600 !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
  min-height:48px !important; padding:13px 28px !important; border-radius:2px !important; cursor:pointer; border:1.5px solid #000;
  background:#000; color:#fff; transition:background .15s,color .15s,border-color .15s;
}
.sc-calc .forminator-button:hover{ background:var(--sc-gold); border-color:var(--sc-gold); color:#fff; }
.sc-calc .forminator-button-back{ background:transparent; color:#000; margin-right:auto; }
.sc-calc .forminator-button-back:hover{ background:#000; color:#fff; border-color:#000; }
.sc-calc .forminator-button-submit{ background:#000; color:#fff; }

/* errors */
.sc-calc .forminator-error-message{ color:#b3261e; font-size:12px; margin-top:6px; }
.sc-calc .forminator-has_error .forminator-input,
.sc-calc .forminator-has_error .forminator-textarea{ border-color:#b3261e; }

/* ---- Mobile ---- */
@media (max-width:600px){
  .sc-calc{ padding:36px 18px 64px; }
  .sc-calc-toggle{ width:100%; }
  .sc-calc-tab{ flex:1; padding:14px 10px; }
  .sc-calc .forminator-pagination-footer{ flex-wrap:wrap; }
  .sc-calc .forminator-button{ width:100%; }
  .sc-calc .forminator-button-back{ margin-right:0; order:2; }
}