/* CPSA Assessment Form — Ethisphere design system reskin (Direction A: guided rail) */

#cpsa-assessment-form,
#cpsa-assessment-form input,
#cpsa-assessment-form select,
#cpsa-assessment-form button {
  font-family: var(--font, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  box-sizing: border-box;
}

:root {
  --cpsa-accent: #0F7F6D;
  --cpsa-accent-tint: rgba(15, 127, 109, 0.07);
}

/* ── Loading overlay ── */
#cpsa-form-loading {
  text-align: center;
  padding: 3rem 1.5rem;
  color: #475569;
}
#cpsa-form-loading .cpsa-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #e2e8f0;
  border-top-color: var(--cpsa-accent);
  border-radius: 50%;
  animation: cpsa-spin 0.9s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes cpsa-spin { to { transform: rotate(360deg); } }

/* ── Error ── */
#cpsa-form-error {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

/* ── Steps ── */
/* Step changes scroll to the step's own heading rather than the document top,
   which would put the long instructions card back on screen every time. The
   offset clears the sticky .site-header (79px here, 69px on mobile) plus a gap. */
.cpsa-step { display: none; scroll-margin-top: 103px; }
.cpsa-step--active { display: block; }

/* ── Dimension header ── */
.cpsa-dimhead { margin-bottom: 8px; }
.cpsa-dimnum {
  font: 700 12px/1 var(--font, sans-serif); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cpsa-accent); display: block; margin-bottom: 14px;
}
.cpsa-dimname { font: 700 30px/1.16 var(--font, sans-serif); letter-spacing: -0.02em; color: #062038; margin: 0 0 16px; }
.cpsa-dimblurb { font: 400 16px/1.62 var(--font, sans-serif); color: #44586c; margin: 0 0 16px; max-width: 760px; }
.cpsa-dimblurb p { margin: 0 0 12px; }
.cpsa-dimblurb p:last-child { margin-bottom: 0; }
.cpsa-dimblurb a { color: var(--cpsa-accent); text-decoration: underline; }

.cpsa-parts { margin-top: 6px; margin-bottom: 24px; padding: 18px 22px; background: #F8F3EC; border-radius: 14px; }
.cpsa-parts ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cpsa-parts li { font: 400 14px/1.45 var(--font, sans-serif); color: #44586c; }

/* ── Question blocks ── */
.cpsa-qblock { border: none; padding: 26px 0; margin: 0; border-top: 1px solid rgba(6, 32, 56, 0.10); }
.cpsa-qblock:first-of-type { border-top: 0; padding-top: 6px; }
.cpsa-qhead { display: block; margin-bottom: 6px; padding: 0; }
.cpsa-qcode {
  display: block; font: 700 11px/1 var(--font, sans-serif); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cpsa-accent); margin-bottom: 8px;
}
.cpsa-qtext { font: 700 19px/1.35 var(--font, sans-serif); color: #062038; margin: 0; letter-spacing: -0.01em; }
.cpsa-qhelp { font: 600 13px/1 var(--font, sans-serif); color: #5b7088; margin: 8px 0 16px; display: flex; align-items: center; }
.cpsa-qhelp i { margin-right: 7px; color: var(--cpsa-accent); }
.cpsa-required-star { color: #b91c1c; }

/* ── Answer choice cards ── */
.cpsa-choices { display: flex; flex-direction: column; gap: 10px; }

.cpsa-choice {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; text-align: left;
  background: #fff;
  border: 1.5px solid rgba(6, 32, 56, 0.16);
  border-radius: 12px;
  padding: 15px 18px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.cpsa-choice:hover { border-color: rgba(6, 32, 56, 0.42); background: #fcfcfb; }
.cpsa-choice:has(.cpsa-choice__input:focus-visible) { outline: none; box-shadow: 0 0 0 3px rgba(0, 255, 160, 0.45); }
.cpsa-choice:has(.cpsa-choice__input:checked) {
  border-color: var(--cpsa-accent);
  background: var(--cpsa-accent-tint);
  box-shadow: inset 0 0 0 1px var(--cpsa-accent);
}

.cpsa-choice__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.cpsa-choice__ind {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(6, 32, 56, 0.32);
  background: #fff;
  transition: border-color .14s ease, background .14s ease;
}
.cpsa-choice__ind.is-check { border-radius: 6px; }
.cpsa-choice__ind.is-radio { border-radius: 999px; }
.cpsa-choice:has(.cpsa-choice__input:checked) .cpsa-choice__ind {
  border-color: var(--cpsa-accent);
  background: var(--cpsa-accent);
}
.cpsa-choice__ind.is-check::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform .14s ease;
  margin-top: -2px;
}
.cpsa-choice:has(.cpsa-choice__input:checked) .cpsa-choice__ind.is-check::after { transform: rotate(-45deg) scale(1); }
.cpsa-choice__ind.is-radio::after {
  content: ""; width: 9px; height: 9px; border-radius: 999px; background: #fff;
  transform: scale(0); transition: transform .14s ease;
}
.cpsa-choice:has(.cpsa-choice__input:checked) .cpsa-choice__ind.is-radio::after { transform: scale(1); }

.cpsa-choice__label {
  font: 400 15.5px/1.5 var(--font, sans-serif);
  color: #1f3147;
  padding-top: 1px;
}
.cpsa-choice:has(.cpsa-choice__input:checked) .cpsa-choice__label { color: #062038; font-weight: 500; }

/* ── Left rail navigator (dimension nav) ── */
.cpsa-rail { position: sticky; top: 24px; align-self: start; }
.cpsa-rail__head { font: 700 11px/1 var(--font, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: #7393B0; margin-bottom: 18px; }
.cpsa-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cpsa-rail__item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 10px; transition: background .14s ease; }
.cpsa-rail__item.is-active { background: var(--cpsa-accent-tint); }
.cpsa-rail__mark {
  flex: none; width: 24px; height: 24px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font, sans-serif);
}
.cpsa-rail__item.is-todo .cpsa-rail__mark { background: #EDEDED; color: #7393B0; }
.cpsa-rail__item.is-active .cpsa-rail__mark { background: var(--cpsa-accent); color: #fff; }
.cpsa-rail__item.is-done .cpsa-rail__mark { background: var(--cpsa-accent); color: #fff; font-size: 0; }
.cpsa-rail__item.is-done .cpsa-rail__mark::before { content: "\2713"; font: 700 12px/1 var(--font, sans-serif); }
.cpsa-rail__name { font: 600 13.5px/1.35 var(--font, sans-serif); color: #44586c; padding-top: 4px; }
.cpsa-rail__item.is-active .cpsa-rail__name { color: #062038; }
.cpsa-rail__item.is-todo .cpsa-rail__name { color: #8597a8; font-weight: 500; }

/* ── Questionnaire grid layout ── */
.cpsa-q__grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; padding-bottom: 24px; }
.cpsa-q__main { min-width: 0; }

/* ── Contact step fields ── */
.cpsa-contact-fields {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-top: 6px;
}

.cpsa-field label {
  display: block;
  font: 600 14px/1.4 var(--font, sans-serif);
  color: #062038;
  margin-bottom: 0.35rem;
}

.cpsa-field--required label::after {
  content: '*';
  color: #b91c1c;
  margin-left: 0.2rem;
}

.cpsa-field-hint {
  font-size: 0.8rem;
  color: #5b7088;
  margin: 0 0 0.4rem;
  line-height: 1.5;
}

.cpsa-field input,
.cpsa-field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid rgba(6, 32, 56, 0.16);
  border-radius: 10px;
  font-size: 0.9375rem;
  color: #062038;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: auto;
}

.cpsa-field input:focus,
.cpsa-field select:focus {
  outline: none;
  border-color: var(--cpsa-accent);
  box-shadow: 0 0 0 3px rgba(15, 127, 109, 0.15);
}

/* ── Consent ── */
.cpsa-form-consent {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(6, 32, 56, 0.10);
}

.cpsa-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.875rem;
  color: #44586c;
  line-height: 1.55;
  cursor: pointer;
}

.cpsa-consent-label input[type="checkbox"] {
  margin-top: 0.18em;
  flex-shrink: 0;
  accent-color: var(--cpsa-accent);
  width: 16px;
  height: 16px;
}

.cpsa-consent-label a {
  color: var(--cpsa-accent);
  text-decoration: underline;
}

/* ── Footer: progress + navigation ── */
.cpsa-nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(6, 32, 56, 0.10);
  margin: 2rem -1px -1px;
}
.cpsa-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 16px 4px;
}
.cpsa-nav__progress { display: flex; align-items: center; gap: 14px; flex: 1; max-width: 420px; }
.cpsa-nav__bar { flex: 1; height: 7px; background: #EAEAEA; border-radius: 999px; overflow: hidden; }
.cpsa-nav__bar span { display: block; height: 100%; background: var(--cpsa-accent); border-radius: 999px; transition: width .35s cubic-bezier(.2,.65,.3,1); }
.cpsa-nav__pct { font: 600 12.5px/1 var(--font, sans-serif); color: #5b7088; white-space: nowrap; }
.cpsa-nav__btns { display: flex; gap: 12px; }

/* ── Inline error inside the sticky rail (mobile only — see @media below) ── */
.cpsa-nav__error { display: none; }

/* ── Navigation buttons ── */
.cpsa-btn {
  display: inline-flex;
  align-items: center;
  font: 700 14px/1 var(--font, sans-serif);
  padding: 13px 24px;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  letter-spacing: 0.01em;
}
.cpsa-btn:active { transform: translateY(1px); }

.cpsa-btn--secondary {
  background: var(--cpsa-accent);
  color: #F8F3EC;
}
.cpsa-btn--secondary:hover { background: #0d6e5e; }
.cpsa-btn--secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.cpsa-btn--ghost {
  background: transparent;
  color: #062038;
  box-shadow: inset 0 0 0 1.5px rgba(6, 32, 56, 0.45);
}
.cpsa-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #062038; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .cpsa-q__grid { grid-template-columns: 1fr; gap: 0; }
  .cpsa-rail { display: none; }
  .cpsa-step { scroll-margin-top: 85px; }

  /* Steps run long on a phone, so the banner above the form scrolls out of reach.
     The sticky rail carries the message instead — and only one copy is ever shown.
     !important beats the inline display:block that showError() sets. */
  #cpsa-form-error { display: none !important; }

  /* :not([hidden]) — a bare `display: flex` here would outrank the hidden
     attribute's UA rule and the error would never hide. */
  .cpsa-nav__error:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px 10px 12px;
    background: #fee2e2;
    border-bottom: 1px solid #fca5a5;
    color: #b91c1c;
  }
  .cpsa-nav__error-icon {
    flex: none;
    width: 18px; height: 18px;
    border-radius: 999px;
    background: #b91c1c;
    color: #fee2e2;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 12px/1 var(--font, sans-serif);
  }
  .cpsa-nav__error-msg {
    flex: 1;
    min-width: 0;
    font: 600 13px/1.4 var(--font, sans-serif);
  }
  .cpsa-nav__error-jump {
    flex: none;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    color: #b91c1c;
    font: 700 12.5px/1 var(--font, sans-serif);
    text-decoration: underline;
    cursor: pointer;
  }
}

@media (max-width: 600px) {
  .cpsa-btn { padding: 0.65rem 1.15rem; font-size: 0.85rem; }
  .cpsa-dimname { font-size: 24px; }
  .cpsa-qtext { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .cpsa-choice, .cpsa-choice__ind, .cpsa-choice__ind::after, .cpsa-nav__bar span, .cpsa-btn { transition: none !important; }
}