/*
   Rental yield calculator
   Requires: global.css (tokens), who-we-work-with.css, asset-pages.css

   The calculator is the original tool, lifted whole out of the old Elementor
   html widget so the arithmetic stays the one people have been using. What did
   not survive the move is its context: it was written for a dark page, with a
   Tailwind palette, rounded cards and a system font stack.

   This restyles it to match the stamp duty calculator at
   /stamp-duty-calculator/, which is the site's existing convention for exactly
   this kind of interface -- every value below is taken from .cc-calc__* in
   stamp-duty-calculator.css rather than invented here. The first pass at this
   file did invent its own treatment (square 11px thumbs, hairline underlines,
   uppercase micro-labels) and the result was a second calculator that looked
   nothing like the first one.

   Scoped under .cc-asset-embed, which outranks the widget's own single-class
   selectors on specificity alone -- no !important, and no edits to a 31KB file
   whose behaviour we want left exactly as it is.
*/

.cc-asset-embed {
  margin-top: 8px;
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.cc-asset-embed .calculator-wrapper {
  /* The inherited `color: white` is what made every label invisible against
     the off-white ground. */
  color: var(--cc-ink-2);
  font-family: var(--cc-font-body);
  padding: 0;
  gap: 48px;
  display: grid;
  grid-template-columns: 1fr;
}

.cc-asset-embed .inputs-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 34px 28px;
}

/* ── Labels — .cc-calc__label ─────────────────────────────────────────── */

.cc-asset-embed .slider-field label,
.cc-asset-embed .number-input-wrapper + label,
.cc-asset-embed .toggle-wrapper > label:first-child {
  display: block;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  text-transform: none;
  color: var(--cc-ink-2);
  margin-bottom: 8px;
}

.cc-asset-embed .value-display {
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  font-variant-numeric: tabular-nums;
}

/* ── Number and select fields — .cc-calc__input / .cc-calc__select ────── */

.cc-asset-embed .number-input-wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 14px 18px;
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-newsprint);
  border-radius: 0;
  box-shadow: none;
}

.cc-asset-embed .number-input-wrapper .input-prefix {
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.48;
  color: var(--cc-ink-2);
}

.cc-asset-embed .number-input-wrapper input[type="number"] {
  width: 100%;
  background: none;
  border: 0;
  outline: none;
  padding: 0;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  font-variant-numeric: tabular-nums;
}

.cc-asset-embed select {
  width: 100%;
  padding: 14px 44px 14px 18px;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-newsprint);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* ── Sliders — .cc-calc__slider, exactly ──────────────────────────────── */

.cc-asset-embed input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
  margin: 26px 0 0;
}

.cc-asset-embed input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--cc-newsprint);
  border: none;
  border-radius: 4px;
}

.cc-asset-embed input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--cc-newsprint);
  border: none;
  border-radius: 4px;
}

/* The one place the house style does use a circle: a 40px white knob with a
   soft shadow, matching the stamp duty calculator's thumb. */
.cc-asset-embed input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-top: -19px;
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.cc-asset-embed input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

/* ── Min/max under a slider — .cc-calc__slider-labels ─────────────────── */

.cc-asset-embed .range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  font-variant-numeric: tabular-nums;
}

/* ── Repayment toggle — .cc-calc__toggle ──────────────────────────────── */

.cc-asset-embed .toggle-wrapper {
  display: flex;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.cc-asset-embed .toggle-wrapper label {
  flex: 1;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-newsprint);
  border-radius: 0;
  margin: 0 0 0 -0.5px;      /* collapse the shared edge */
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.cc-asset-embed .toggle-wrapper input[type="radio"]:checked + label {
  background: var(--cc-dark-parchment);
  border-color: var(--cc-dark-parchment);
  color: var(--cc-bg);
}

/* ── Results — .cc-calc__results ──────────────────────────────────────── */

.cc-asset-embed .results-panel {
  background: none;
  border: var(--cc-hairline, 0.5px) solid var(--cc-newsprint);
  border-radius: 0;
  padding: 32px 28px;
  order: 0;                  /* it read first on mobile; inputs come first */
}

.cc-asset-embed .results-panel h2 {
  font-family: var(--cc-font-heading);
  font-size: 25px;
  font-weight: 400;
  line-height: normal;
  color: var(--cc-archive);
  margin: 0 0 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cc-asset-embed .result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-newsprint);
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
}

.cc-asset-embed .result-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.cc-asset-embed .result-row span.value {
  color: var(--cc-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Export — the house CTA ───────────────────────────────────────────── */

.cc-asset-embed .export-btn {
  width: 100%;
  height: 54px;
  margin-top: 28px;
  padding: 0;
  background: var(--cc-bg);
  background-image: none;    /* it shipped a blue gradient */
  border: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--cc-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.cc-asset-embed .export-btn:hover {
  background: var(--cc-dark-parchment);
  background-image: none;
  border-color: var(--cc-dark-parchment);
  color: var(--cc-bg);
  transform: none;
  box-shadow: none;
}

.cc-asset-embed .export-btn:focus-visible {
  outline: 1px solid var(--cc-ink);
  outline-offset: 2px;
}

.cc-asset-embed .export-btn svg {
  width: 14px;
  height: 14px;
}

/* ── Desktop ──────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .cc-asset-embed .calculator-wrapper {
    grid-template-columns: 1fr 360px;
    align-items: start;
    gap: 48px;
  }

  .cc-asset-embed .results-panel {
    position: sticky;
    top: 100px;              /* clears the 79px fixed topbar */
  }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .cc-asset-embed .calculator-wrapper {
    gap: 36px;
  }

  .cc-asset-embed .inputs-panel {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cc-asset-embed .results-panel {
    padding: 26px 20px;
  }
}