/*
 * Payback calculator – shared structure.
 * Layout only: every colour, font and text treatment comes from a theme file
 * (theme-branded.css / theme-whitelabel.css) via the custom properties below.
 *
 * Built for iframe embedding: no header/footer, the panel fills the width.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: transparent; /* let the host page show through the rounded corners */
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.2;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Panel ---------- */

.calc {
  width: 100%;
  /* No min-height: the host page sizes the iframe to this panel (see embed.js). */
  padding: clamp(1.5rem, 6.5vw, 3.5rem) clamp(1.25rem, 6vw, 3.5rem) clamp(2rem, 7vw, 4rem);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  color: var(--text);
}

/* Only the active stage is shown. Stage 1 is the default without any JS. */
.calc [data-stage-panel] {
  display: none;
}

.calc[data-stage="1"] [data-stage-panel="1"],
.calc[data-stage="2"] [data-stage-panel="2"],
.calc[data-stage="3"] [data-stage-panel="3"] {
  display: block;
}

/* ---------- Heading ---------- */

.calc__header {
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
}

.calc__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--title-weight);
  font-style: var(--font-style);
  font-size: var(--title-size);
  line-height: var(--title-line-height);
  letter-spacing: var(--title-tracking);
  text-transform: var(--text-transform);
  text-align: var(--title-align);
}

/* ---------- Questions ---------- */

.field {
  margin: 0 0 clamp(1.25rem, 6.8vw, 3rem);
}

.field__label {
  display: block;
  margin-bottom: 0.75rem;
}

.field__step {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-heading);
  font-weight: var(--label-weight);
  font-style: var(--font-style);
  font-size: var(--step-size);
  letter-spacing: var(--label-tracking);
  text-transform: var(--step-transform, var(--text-transform));
  color: var(--label);
}

.field__question {
  display: block;
  font-style: var(--font-style);
  font-weight: var(--question-weight);
  font-size: var(--question-size);
  line-height: 1.05;
  letter-spacing: var(--question-tracking);
  text-transform: var(--text-transform);
}

/* Lead-capture labels (name, company, ...) use the step styling on its own. */
.field__label--plain {
  margin-bottom: 0.4rem;
  font-family: var(--font-heading);
  font-weight: var(--label-weight);
  font-style: var(--font-style);
  font-size: var(--lead-label-size);
  letter-spacing: var(--label-tracking);
  text-transform: var(--text-transform);
  color: var(--label);
}

.field__input {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: 0 0.85rem;
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-text);
  font: inherit;
  font-style: var(--font-style);
  font-weight: var(--input-weight, 400);
  font-size: var(--input-size);
  text-transform: var(--text-transform);
  letter-spacing: var(--question-tracking);
  appearance: none;
  -moz-appearance: textfield;
}

/* Typed values keep their natural case; only the placeholder follows the theme. */
.field__input:not(:placeholder-shown) {
  text-transform: none;
}

.field__input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.field__input::-webkit-outer-spin-button,
.field__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field__input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.field__input:user-invalid {
  outline: 2px solid var(--red-error);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */

.actions {
  margin-top: clamp(1.75rem, 6vw, 3rem);
}

.btn {
  display: block;
  width: 100%;
  padding: var(--btn-padding);
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: var(--btn-text);
  font-family: var(--btn-font);
  font-style: var(--btn-font-style);
  font-weight: var(--btn-weight);
  font-size: var(--btn-size);
  line-height: 1.15;
  letter-spacing: var(--btn-tracking);
  text-transform: var(--btn-transform);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--accent-hover);
}

.btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.btn__sub {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 0.6em;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Results ---------- */

.results__title {
  margin: 0 0 clamp(1.25rem, 4vw, 2rem);
  font-family: var(--font-heading);
  font-weight: var(--results-title-weight);
  font-style: var(--font-style);
  font-size: var(--results-title-size);
  line-height: 0.9;
  letter-spacing: var(--title-tracking);
  text-transform: var(--text-transform);
  text-align: center;
}

.result {
  margin: 0 0 clamp(0.75rem, 2.5vw, 1.25rem);
  text-align: center;
}

.result__label {
  margin: 0;
  font-family: var(--font-heading);
  font-style: var(--font-style);
  font-weight: var(--results-label-weight);
  font-size: var(--results-label-size);
  letter-spacing: var(--question-tracking);
  text-transform: var(--text-transform);
}

.result__value {
  margin: 0;
  font-family: var(--font-heading);
  font-style: var(--font-style);
  font-weight: var(--results-value-weight);
  font-size: var(--results-value-size);
  line-height: 1.05;
  letter-spacing: var(--title-tracking);
  text-transform: var(--text-transform);
  color: var(--accent);
}

.results .actions {
  width: min(100%, 36rem);
  margin-inline: auto;
}

/* ---------- Form feedback ---------- */

.fieldset-reset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-error {
  margin: 1rem 0 0;
  color: var(--red-error);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.8vw, 1.15rem);
  line-height: 1.25;
}

.form-error[hidden] {
  display: none;
}

.field__input[aria-invalid="true"] {
  outline: 2px solid var(--red-error);
  outline-offset: 2px;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The results heading takes focus for screen readers; it isn't interactive, so no ring. */
.results__title:focus {
  outline: none;
}

/* "6 hours 35 mins" is longer than the other values, so it's set a little smaller to stay on one line. */
.result__value--long {
  font-size: calc(var(--results-value-size) * 0.7);
}

/* ---------- Debug panel (shown only when debug is on in the config) ---------- */

.debug-output {
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #fff8c5;
  color: #000;
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  font-style: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.debug-output[hidden] {
  display: none;
}