/* KeyTrellis fit check page styles.
   Loaded after css/site.css. Colours, fonts, buttons (.btn, .btn-outline) and form
   fields (.field, .form-row, .check, .form-status) come from site.css.
   Everything here starts with "fc-" (fit check) so it never clashes with site.css. */

/* ---------- Page and cards ---------- */
.fc-page {
  min-height: 100vh;
  padding: clamp(32px, 6vw, 72px) 0 76px;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
}

.fc-shell {
  width: min(100% - 32px, 920px);
  margin-inline: auto;
}

.fc-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 18px 50px -42px rgb(50 19 31 / 48%);
}

.fc-eyebrow {
  margin: 0;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.fc-big-title {
  margin: 14px 0 0;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 1.03;
}

/* ---------- Start screen ---------- */
.fc-start {
  max-width: 770px;
  margin-inline: auto;
  padding: clamp(28px, 7vw, 64px);
}

.fc-start-intro {
  max-width: 600px;
  margin: 20px 0 0;
  color: #4d3a43;
  font-size: 1.05rem;
  line-height: 1.65;
}

.fc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.fc-fact {
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--background);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.fc-start-button {
  width: 100%;
}

.fc-privacy {
  max-width: 560px;
  margin: 18px 0 0;
  color: #594650;
  font-size: 0.83rem;
  line-height: 1.55;
}

/* ---------- Question screens ---------- */
.fc-survey {
  max-width: 790px;
  margin-inline: auto;
}

.fc-survey-top {
  display: grid;
  gap: 12px;
  margin: 0 3px 20px;
}

.fc-survey-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
}

.fc-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #eadce1;
}

.fc-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 180ms ease;
}

.fc-question {
  padding: clamp(22px, 5vw, 44px);
}

.fc-question-title {
  margin: 8px 0 0;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.fc-question-hint,
.fc-selection-hint {
  margin: 10px 0 0;
  color: #594650;
  font-size: 0.88rem;
  line-height: 1.55;
}

.fc-selection-hint {
  color: var(--primary);
  font-weight: 700;
}

/* The big answer buttons */
.fc-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.fc-choice {
  display: grid;
  min-height: 64px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid #ddcbd2;
  border-radius: 14px;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  font: 600 0.91rem / 1.4 var(--font-body);
  text-align: left;
  transition:
    border-color 130ms ease,
    background-color 130ms ease,
    box-shadow 130ms ease;
}

.fc-choice:hover {
  border-color: #9a6379;
}

.fc-choice.is-selected {
  border: 2px solid var(--primary);
  background: var(--secondary);
  padding: 12px 14px;
}

/* The small square (choose all) or round (choose one) marker inside each answer */
.fc-control {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1.5px solid #846978;
  background: var(--card);
  color: var(--card);
}

.fc-control-square {
  border-radius: 5px;
}

.fc-control-round {
  border-radius: 50%;
}

.fc-choice.is-selected .fc-control {
  border-color: var(--primary);
  background: var(--primary);
}

.fc-control-square svg {
  width: 14px;
  height: 14px;
}

.fc-control-round span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card);
}

/* Follow-up boxes (questions 8, 12 and 20) */
.fc-follow-up {
  min-width: 0;
  margin: 26px 0 0;
  padding: 20px;
  border: 1px solid #e7cbd5;
  border-radius: 16px;
  background: #fbf2f5;
}

.fc-follow-up + .fc-follow-up {
  margin-top: 13px;
}

.fc-follow-up-title {
  margin: 0;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.fc-follow-up-hint {
  margin: 5px 0 0;
  color: #594650;
  font-size: 0.81rem;
  line-height: 1.5;
}

.fc-compact-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.fc-choice.fc-choice-compact {
  display: flex;
  min-height: 44px;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 11px;
  font: 600 0.82rem / 1.35 var(--font-body);
}

.fc-choice.fc-choice-compact.is-selected {
  padding: 8px 10px;
}

.fc-choice-compact .fc-control {
  flex: 0 0 auto;
}

/* Month buttons (question 20) */
.fc-months {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.fc-month {
  min-width: 54px;
  min-height: 40px;
  border: 1px solid #ddcbd2;
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  font: 700 0.82rem var(--font-display);
}

.fc-month.is-selected {
  border-color: var(--primary);
  background: var(--secondary);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

/* Text boxes under questions 3, 4 and 9 (the rest of the look comes from .field) */
.fc-text-field {
  margin-top: 22px;
}

.fc-choice:focus-visible,
.fc-month:focus-visible,
.fc-text-button:focus-visible,
.fc-delivery-choice:focus-within {
  outline: 3px solid #a74668;
  outline-offset: 3px;
}

/* Back / Next */
.fc-survey-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

.fc-survey-actions .btn {
  min-width: 130px;
  padding: 0 24px;
}

/* Keep disabled buttons looking disabled when hovered */
#fit-check-app .btn[disabled]:hover {
  background: var(--primary);
  border-color: var(--primary);
}

/* ---------- Results screen ---------- */
.fc-results {
  display: grid;
  gap: 15px;
}

.fc-result-card {
  padding: clamp(22px, 4vw, 34px);
}

.fc-result-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
}

.fc-fit-pill {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #b68b9d;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--primary);
  font-size: 0.77rem;
  font-weight: 800;
}

.fc-result-title {
  font-size: clamp(2.2rem, 5.8vw, 3.5rem);
}

.fc-weeks {
  color: var(--primary);
  text-align: right;
}

.fc-weeks-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 5.4rem);
  font-weight: 600;
  letter-spacing: -0.08em;
  line-height: 0.9;
}

.fc-weeks-label {
  display: block;
  margin-top: 8px;
  font-size: 0.83rem;
  font-weight: 700;
}

.fc-fit-line {
  max-width: 690px;
  margin: 22px 0 0;
  color: #45333c;
  font-size: 0.98rem;
  line-height: 1.6;
}

.fc-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
}

.fc-text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font: 700 0.84rem var(--font-display);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fc-section-title {
  margin: 0;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.8vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.fc-body-text {
  margin: 18px 0 0;
  color: #594650;
  font-size: 0.83rem;
  line-height: 1.6;
}

/* Only shown when printing */
.fc-print-only {
  display: none;
}

/* Your route: four stages */
.fc-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.fc-stage {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e6d8dd;
  border-radius: 13px;
  background: var(--background);
}

.fc-stage-bar {
  height: 6px;
  margin-bottom: 13px;
  border-radius: 99px;
  background: var(--primary);
}

.fc-stage:nth-child(2) .fc-stage-bar { background: #7c2f50; }
.fc-stage:nth-child(3) .fc-stage-bar { background: #a75170; }
.fc-stage:nth-child(4) .fc-stage-bar { background: #d27e99; }

.fc-stage-name {
  display: block;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

.fc-stage-date {
  display: block;
  margin-top: 5px;
  color: #594650;
  font-size: 0.77rem;
  line-height: 1.4;
}

/* Indicative price */
.fc-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.fc-price {
  min-width: 0;
  padding: 18px;
  border: 1px solid #dfcbd3;
  border-radius: 15px;
  background: var(--card);
}

.fc-price-label {
  display: block;
  color: #594650;
  font-size: 0.77rem;
  font-weight: 700;
}

.fc-price-value {
  display: block;
  margin-top: 7px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.7vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.25;
}

.fc-price-note {
  margin: 13px 0 0;
  color: #594650;
  font-size: 0.81rem;
  line-height: 1.55;
}

/* Lists: goals, worth knowing, have ready */
.fc-list {
  display: grid;
  gap: 10px;
  margin: 17px 0 0;
  padding: 0;
  list-style: none;
}

.fc-list li {
  padding-top: 10px;
  border-top: 1px solid #ebdfe3;
  color: #45333c;
  font-size: 0.9rem;
  line-height: 1.55;
}

.fc-goal-title {
  display: block;
  margin-bottom: 3px;
  color: var(--primary);
  font-weight: 750;
}

.fc-list .fc-addition {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.fc-addition-days {
  flex: 0 0 auto;
  color: var(--primary);
  font-weight: 800;
}

/* ---------- "Get your plan sent to you" form ---------- */
.fc-send {
  padding: clamp(22px, 4vw, 34px);
}

.fc-send-intro {
  margin: 10px 0 0;
  color: #594650;
  font-size: 0.9rem;
  line-height: 1.55;
}

.fc-note {
  margin: 12px 0 0;
  color: #594650;
  font-size: 0.78rem;
  line-height: 1.55;
}

.fc-form-grid {
  display: grid;
  gap: 15px;
  margin-top: 20px;
}

#fit-check-app .field label,
.fc-delivery legend {
  color: var(--primary);
}

.fc-delivery {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fc-delivery legend {
  padding: 0;
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 650;
}

.fc-delivery-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.fc-delivery-choice {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #ddcbd2;
  border-radius: 12px;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
}

.fc-delivery-choice input {
  accent-color: var(--primary);
}

.fc-delivery-choice.is-selected {
  border: 2px solid var(--primary);
  background: var(--secondary);
  color: var(--primary);
}

/* A hidden email or WhatsApp box must stay hidden even though .field sets display */
#fit-check-app .field[hidden] {
  display: none;
}

.fc-consents {
  display: grid;
  gap: 13px;
  margin-top: 18px;
}

.fc-consents .check {
  color: #45333c;
  font-size: 0.82rem;
  line-height: 1.55;
}

.fc-consents a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fc-errors {
  display: grid;
  gap: 5px;
  margin: 18px 0 0;
  padding: 0;
  color: var(--primary);
  font-size: 0.84rem;
  font-weight: 700;
  list-style: none;
}

.fc-errors[hidden] {
  display: none;
}

.fc-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.fc-form-actions .btn {
  min-width: 170px;
}

.fc-form-actions .fc-note {
  margin: 0;
}

.fc-send .form-status {
  margin-top: 12px;
}

.fc-success {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #c9aeb9;
  border-radius: 14px;
  background: var(--secondary);
  color: var(--foreground);
  font-size: 0.91rem;
  line-height: 1.6;
}

.fc-success p + p {
  margin-top: 8px;
}

.fc-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* ---------- "Talk it through with us" ---------- */
.fc-talk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid #e7cbd5;
  border-radius: 24px;
  background: var(--secondary);
}

.fc-talk p {
  max-width: 590px;
  margin: 9px 0 0;
  color: #45333c;
  font-size: 0.91rem;
  line-height: 1.55;
}

.fc-talk-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 9px;
}

.fc-talk-actions .btn {
  padding: 0 18px;
}

.fc-estimate-note {
  margin: 4px 4px 0;
  color: #594650;
  font-size: 0.75rem;
  line-height: 1.55;
}

/* ---------- Smaller screens ---------- */
@media (max-width: 720px) {
  .fc-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fc-talk {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .fc-page {
    padding-top: 26px;
  }

  .fc-facts {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-block: 22px;
  }

  .fc-fact {
    padding: 11px;
  }

  .fc-choices,
  .fc-compact-choices {
    grid-template-columns: 1fr;
  }

  .fc-choice {
    min-height: 58px;
  }

  .fc-result-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .fc-weeks {
    display: flex;
    align-items: baseline;
    gap: 9px;
    text-align: left;
  }

  .fc-weeks-number {
    font-size: 3.2rem;
  }

  .fc-weeks-label {
    margin: 0;
  }

  .fc-prices {
    grid-template-columns: 1fr;
  }

  .fc-survey-actions .btn {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 12px;
  }

  .fc-delivery-choices {
    grid-template-columns: 1fr;
  }

  .fc-delivery-choice {
    justify-content: flex-start;
    padding-inline: 14px;
  }

  .fc-talk-actions {
    width: 100%;
  }

  .fc-talk-actions .btn {
    min-width: 0;
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-progress-fill {
    transition: none;
  }
}

/* ---------- Printing ("Print or save as PDF") ----------
   Prints just the plan: no header, footer, buttons or contact form. */
@media print {
  @page {
    margin: 14mm;
  }

  .skip-link,
  .site-header,
  .site-footer,
  #fit-check-app button,
  #fit-check-app .btn,
  .fc-result-actions,
  .fc-send-area,
  .fc-talk-actions {
    display: none !important;
  }

  body,
  .fc-page {
    background: #fff;
  }

  .fc-page {
    min-height: 0;
    padding: 0;
  }

  .fc-shell {
    width: 100%;
  }

  .fc-results {
    gap: 10px;
  }

  .fc-card,
  .fc-talk {
    box-shadow: none;
    break-inside: avoid;
  }

  .fc-print-only {
    display: block;
  }

  .fc-stages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Keep the brand colours on the stage bars, pill and panels */
  .fc-stage-bar,
  .fc-fit-pill,
  .fc-talk,
  .fc-stage {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}