/* Calculator pages in the CMP 3.0 Analysis page style (21.10.26).
   Applied by adding class="cmp3-calc" to <body> and linking this file. It restyles the existing markup
   only: every id, input and calculation (including the Calculation Details sections) is unchanged.
   Each column that holds a section heading becomes a light card, as on the Analysis page. */

body.cmp3-calc { font-family: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body.cmp3-calc section.custom-gradient-bg { color: #24261f; font-size: 16px !important; }
body.cmp3-calc section.custom-gradient-bg > .container { max-width: 1320px; }

/* Headings that sit on the page background (outside a card): white page titles */
body.cmp3-calc section.custom-gradient-bg h3 { color: #ffffff !important; font-weight: 700 !important; font-size: 26px; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- cards */
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) {
  position: relative; isolation: isolate;
  padding: 26px calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 24px) 24px !important;
  margin-bottom: 20px;
  align-self: stretch;
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3))::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(var(--bs-gutter-x, 1.5rem) * 0.5); right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  background: #f7f6f1; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* The card's own row: cards line up at the top and keep a gap between rows */
body.cmp3-calc section.custom-gradient-bg .row:has(> [class*="col-"] h3):not(:has(> .tc-sticky)) { align-items: stretch !important; row-gap: 0; }
/* A column that stays in view while the details scroll (Inheritance Tax) keeps doing so */
body.cmp3-calc section.custom-gradient-bg .tc-sticky { position: sticky !important; }
@media (max-width: 991.98px) { body.cmp3-calc section.custom-gradient-bg .tc-sticky { position: relative !important; top: auto !important; } }

/* Text inside a card */
body.cmp3-calc .cmp3-c, body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) { color: #24261f; }
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) h3 {
  color: #24261f !important; font-size: 22px !important; font-weight: 700 !important; padding-left: 0 !important; padding-top: 0 !important;
  margin-top: 0 !important; margin-bottom: 12px !important;
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) h3:not(:first-child) {
  margin-top: 26px !important; padding-top: 22px !important; border-top: 1px solid #e3e4dc;
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) :is(p, li, small, .form-text) {
  color: #55584c; font-size: 15px; line-height: 1.55;
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) :is(label, strong, b, .form-label, .form-check-label, .result-label) {
  color: #24261f !important; font-size: 15px;
}
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) :is(.text-white, .text-light) { color: #24261f !important; }
body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) a:not(.btn) { color: #2E6B33 !important; font-weight: 600; }

/* Inputs, as in the Analysis page's inputs */
body.cmp3-calc section.custom-gradient-bg .form-control,
body.cmp3-calc section.custom-gradient-bg .form-select {
  font-size: 16px !important; color: #24261f !important; font-weight: 500; background: #ffffff !important;
  border: 1px solid #d6d8cc !important; border-radius: 8px; min-height: 40px; box-shadow: none;
}
body.cmp3-calc section.custom-gradient-bg output.form-control,
body.cmp3-calc section.custom-gradient-bg .result-output {
  color: #2f5f8f !important; font-weight: 700 !important; display: flex; align-items: center; justify-content: flex-end;
}
body.cmp3-calc section.custom-gradient-bg .result-output {
  background: #ffffff; border: 1px solid #d6d8cc; border-radius: 8px; min-height: 40px; padding: 4px 12px; min-width: 96px;
}
body.cmp3-calc section.custom-gradient-bg .input-group-text { background: #eceee6 !important; border: 1px solid #d6d8cc !important; color: #55584c !important; }
body.cmp3-calc section.custom-gradient-bg .form-check-input:checked { background-color: #2E6B33 !important; border-color: #2E6B33 !important; }
body.cmp3-calc section.custom-gradient-bg .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(46, 107, 51, 0.25); border-color: #2E6B33; }
body.cmp3-calc section.custom-gradient-bg .form-range { accent-color: #2E6B33; }
body.cmp3-calc section.custom-gradient-bg .form-range::-webkit-slider-thumb { background: #2E6B33; }
body.cmp3-calc section.custom-gradient-bg .form-range::-moz-range-thumb { background: #2E6B33; }
body.cmp3-calc section.custom-gradient-bg .form-range::-webkit-slider-runnable-track { background: #e3e4dc; }
body.cmp3-calc section.custom-gradient-bg .form-range::-moz-range-track { background: #e3e4dc; }
body.cmp3-calc section.custom-gradient-bg .custom-circle-button {
  flex: none !important; width: 22px !important; height: 22px !important; min-width: 22px; transform: none !important; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; background: #ffffff !important;
  border: 1px solid #b9bcae !important; color: #24261f !important;
}
body.cmp3-calc section.custom-gradient-bg .custom-circle-button:hover { background: #f1f3ec !important; }
body.cmp3-calc section.custom-gradient-bg .custom-circle-button i { font-size: 13px; line-height: 1; }
body.cmp3-calc section.custom-gradient-bg :is(.bi-info-circle-fill, .bi-info-circle) { color: #9a9d90 !important; }
body.cmp3-calc section.custom-gradient-bg .btn-primary { background: #2E6B33 !important; border-color: #2E6B33 !important; border-radius: 10px; font-weight: 600; }

/* Highlighted results keep white text on their colour (NHS Option A / B, totals) */
body.cmp3-calc #nhsCalcResults .result-row.nhs-calc-total .result-output,
body.cmp3-calc #nhsCalcResults .result-row .result-output.nhs-calc-higher { color: #ffffff !important; background: #2E6B33 !important; border-color: #2E6B33 !important; }
body.cmp3-calc #nhsCalcResults .result-row .result-output.nhs-calc-lower { color: #ffffff !important; background: #a24a32 !important; border-color: #a24a32 !important; }
body.cmp3-calc #nhsCalcResults .nhs-calc-col-head, body.cmp3-calc #nhsCalcResults .nhs-calc-col-head strong { color: #3f5a43 !important; }
body.cmp3-calc .nhs-calc-group { color: #3f5a43 !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 0.12em; text-transform: uppercase; }
body.cmp3-calc .nhs-calc-info { color: #9a9d90 !important; }

/* Calculation Details: a white box with the working in a clear monospace font */
body.cmp3-calc section.custom-gradient-bg .bg-light.container:has(pre) { background: transparent !important; padding: 0 !important; }
body.cmp3-calc section.custom-gradient-bg div:has(> pre)[style*="rgba(255"] { background: transparent !important; padding: 0 !important; }
body.cmp3-calc section.custom-gradient-bg pre {
  background: #ffffff; border: 1px solid #e3e4dc; border-radius: 10px; padding: 14px 16px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12.5px !important;
  line-height: 1.55; color: #24261f !important; max-height: none;
}

/* Tables */
body.cmp3-calc section.custom-gradient-bg table { background: #ffffff; border-radius: 10px; overflow: hidden; font-size: 13px; }
body.cmp3-calc section.custom-gradient-bg table th { background: #eef0e8; color: #3f5a43; font-weight: 700; }

/* Charts sit on white, like the Analysis page's chart card */
body.cmp3-calc section.custom-gradient-bg canvas { background: #ffffff; border-radius: 10px; }

@media (max-width: 767.98px) {
  body.cmp3-calc section.custom-gradient-bg [class*="col-"]:has(h3):not(:has([class*="col-"] h3)) {
    padding: 22px calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 16px) 20px !important;
  }
}