/*
 * BFO theme — /quiz shell (v0.19.0)
 * Card hero (47) on navy with stripes; the quiz sits on the paper card.
 * Fluent Forms is dressed in BFO type, colours and 16px buttons, scoped to .bfo-quiz-slot.
 */

/* ---------- Page ---------- */
.bfo-sec.bfo-quizhero{ min-height:0; }
.bfo-quizhero .bfo-quizhero__card{ max-width:760px; margin:0 auto; }
.bfo-quizhero .bfo-quiz-slot{ margin-top:28px; padding-top:26px; border-top:1px solid var(--bfo-line); }
.bfo-quizhero .bfo-quiz-fallback{ margin-top:24px; }
.bfo-quizhero h1 mark{ white-space:nowrap; }
/* With a quiz in place, the booking button steps back to a quiet secondary button. */
.bfo-quizhero__card:has(.bfo-quiz-slot form) .bfo-quiz-fallback{ margin-top:26px; padding-top:22px; border-top:1px solid var(--bfo-line); }
.bfo-quizhero__card:has(.bfo-quiz-slot form) .bfo-quiz-fallback .wp-block-button__link{
  background:transparent !important; color:var(--bfo-navy) !important; border:2px solid var(--bfo-navy) !important; }
@media (min-width:768px){
  .bfo-sec.bfo-quizhero{ min-height:560px; padding:var(--bfo-sec-y) 0; }
  .bfo-quizhero .bfo-quizhero__card{ padding:40px 48px 42px; }
}

/* ---------- Fluent Forms (any form type dropped in the slot) ---------- */
.bfo-quiz-slot .fluentform{ font-family:var(--bfo-body); color:var(--bfo-slate); }
.bfo-quiz-slot .fluentform .ff-el-group{ margin-bottom:22px; }
.bfo-quiz-slot .fluentform .ff-el-input--label label,
.bfo-quiz-slot .fluentform .ff-el-section-title{
  font:700 18px/1.3 var(--bfo-display); letter-spacing:-.01em; color:var(--bfo-navy); margin-bottom:6px; }
.bfo-quiz-slot .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after{ color:var(--bfo-burnt, #B86F00); }
.bfo-quiz-slot .fluentform .ff-el-help-message{ color:var(--bfo-muted); font-size:14px; font-style:normal; }

/* Text inputs */
.bfo-quiz-slot .fluentform .ff-el-form-control{
  font:400 16px/1.4 var(--bfo-body); color:var(--bfo-navy); background:#fff;
  border:1px solid var(--bfo-line); border-radius:12px; padding:12px 14px; min-height:48px; box-shadow:none;
  width:100%; max-width:100%; box-sizing:border-box; }
.bfo-quiz-slot .fluentform .ff-el-form-control:focus{ border-color:var(--bfo-navy); box-shadow:0 0 0 3px rgba(242,160,31,.45); outline:none; }

/* Radio / checkbox answers as tappable rows */
.bfo-quiz-slot .fluentform .ff-el-form-check{ margin:0 0 10px; }
.bfo-quiz-slot .fluentform .ff-el-form-check-label{
  display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; cursor:pointer;
  padding:13px 16px; min-height:50px; background:#fff; border:1px solid var(--bfo-line); border-radius:14px;
  font:500 15px/1.4 var(--bfo-body); color:var(--bfo-navy); transition:border-color .15s, background-color .15s; }
.bfo-quiz-slot .fluentform .ff-el-form-check-label:hover{ border-color:var(--bfo-navy); }
.bfo-quiz-slot .fluentform .ff-el-form-check-input{ flex:none; width:20px; height:20px; margin:0; accent-color:var(--bfo-navy); }
.bfo-quiz-slot .fluentform .ff-el-form-check-label:has(input:checked){ border-color:var(--bfo-navy); background:var(--bfo-mist); box-shadow:inset 4px 0 0 var(--bfo-amber); }
.bfo-quiz-slot .fluentform .ff-el-form-check-label:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(242,160,31,.45); }

/* Multi-step header + progress bar */
.bfo-quiz-slot .fluentform .ff-step-header{ margin-bottom:24px; }
.bfo-quiz-slot .fluentform .ff-el-progress-status{ font:700 11px/1.2 var(--bfo-label); letter-spacing:.16em; text-transform:uppercase; color:var(--bfo-muted); margin-bottom:10px; }
.bfo-quiz-slot .fluentform .ff-el-progress{ height:8px; border-radius:99px; background:var(--bfo-mist); overflow:hidden; }
.bfo-quiz-slot .fluentform .ff-el-progress-bar{ height:100%; background:var(--bfo-amber); border-radius:99px; }
.bfo-quiz-slot .fluentform .ff-el-progress-bar span{ display:none; }

/* Buttons: amber + navy text, 16px radius */
.bfo-quiz-slot .fluentform .ff-btn,
.bfo-quiz-slot .fluentform .ff-btn-submit,
.bfo-quiz-slot .fluentform .ff-btn-next{
  font:700 16px/1 var(--bfo-display) !important; border-radius:var(--bfo-btn-radius) !important;
  padding:15px 26px !important; min-height:50px; background:var(--bfo-amber) !important; color:var(--bfo-navy) !important;
  border:2px solid var(--bfo-amber) !important; box-shadow:none !important; cursor:pointer; }
.bfo-quiz-slot .fluentform .ff-btn-prev{
  font:700 16px/1 var(--bfo-display) !important; border-radius:var(--bfo-btn-radius) !important; padding:15px 22px !important;
  background:transparent !important; color:var(--bfo-navy) !important; border:2px solid var(--bfo-line) !important; }
.bfo-quiz-slot .fluentform .ff-btn:hover{ filter:brightness(.96); }
.bfo-quiz-slot .fluentform .ff-btn:focus-visible{ outline:3px solid var(--bfo-navy); outline-offset:2px; }
.bfo-quiz-slot .fluentform .step-nav{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
@media (max-width:767px){
  .bfo-quiz-slot .fluentform .step-nav .ff-btn-next, .bfo-quiz-slot .fluentform .ff-btn-submit{ flex:1 1 auto; width:100%; }
  .bfo-quiz-slot .fluentform .step-nav .ff-btn-next{ width:auto; }
}

/* Messages */
.bfo-quiz-slot .fluentform .error, .bfo-quiz-slot .fluentform .text-danger{ color:#A2341C; font-size:14px; margin-top:6px; }
.bfo-quiz-slot .ff-message-success{ border:0; border-left:4px solid var(--bfo-amber); border-radius:0 14px 14px 0; background:var(--bfo-mist); color:var(--bfo-navy); padding:18px 20px; box-shadow:none; }

/* ---------- On-screen result (v0.23.0, inc/quiz-engine.php) ---------- */
/* The result replaces the form; the success box becomes a plain result panel. */
.bfo-quiz-slot .ff-message-success:has(.bfo-quiz-result){ background:transparent; border:0; border-radius:0; padding:0; }
.bfo-quiz-result{ font:400 16px/1.7 var(--bfo-body); color:var(--bfo-slate); }
.bfo-quiz-result p{ margin:0 0 14px; }
/* The card sits in a dark section; keep result text on paper colours. */
.bfo-quizhero .bfo-quiz-result p{ color:var(--bfo-slate); }
.bfo-quizhero .bfo-quiz-result p:not([class]){ margin:0 0 14px; }
.bfo-quizhero .bfo-quiz-result p strong{ color:var(--bfo-navy); }
.bfo-quiz-result .bfo-quiz-result__eyebrow{ margin:0 0 8px; font:700 11px/1.3 var(--bfo-label); letter-spacing:.16em; text-transform:uppercase; color:var(--bfo-burnt, #B86F00); }
.bfo-quiz-result .bfo-quiz-result__name{ margin:0; font:800 clamp(28px,5vw,38px)/1.08 var(--bfo-display); letter-spacing:-.02em; color:var(--bfo-navy); }
.bfo-quiz-result .bfo-quiz-result__tag{ margin:8px 0 22px; font-size:18px; color:var(--bfo-slate); }
.bfo-quiz-result .bfo-quiz-result__lead{ font-size:17px; color:var(--bfo-navy); }
.bfo-quiz-result .bfo-quiz-result__payoff{ margin:20px 0 24px; padding:16px 18px; background:var(--bfo-mist); border-left:4px solid var(--bfo-amber); border-radius:0 14px 14px 0; color:var(--bfo-navy); }
.bfo-quiz-result .bfo-quiz-result__h3{ margin:28px 0 10px; font:800 20px/1.25 var(--bfo-display); color:var(--bfo-navy); }
.bfo-quiz-result .bfo-quiz-result__phone{ margin:14px 0 18px; padding:14px 18px; background:#fff; border:1px solid var(--bfo-line); border-left:4px solid var(--bfo-amber); border-radius:0 14px 14px 0; font-size:18px; }
.bfo-quiz-result .bfo-quiz-result__phone a{ color:var(--bfo-navy); text-decoration-color:var(--bfo-amber); text-underline-offset:3px; }
.bfo-quiz-result .bfo-quiz-result__signoff{ margin:22px 0 20px; font:700 16px/1.3 var(--bfo-display); color:var(--bfo-navy); }
.bfo-quiz-result .bfo-quiz-result__actions{ display:flex; flex-wrap:wrap; gap:12px; margin:4px 0 20px; }
.bfo-quiz-result .bfo-quiz-result__btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none;
  font:700 16px/1.25 var(--bfo-display); padding:15px 24px; min-height:50px; box-sizing:border-box;
  border-radius:var(--bfo-btn-radius); border:2px solid var(--bfo-navy); }
.bfo-quiz-result .bfo-quiz-result__btn--primary{ background:var(--bfo-navy); color:#fff !important; }
.bfo-quiz-result .bfo-quiz-result__btn--book{ background:var(--bfo-amber); border-color:var(--bfo-amber); color:var(--bfo-navy) !important; }
.bfo-quiz-result .bfo-quiz-result__btn--secondary{ background:transparent; color:var(--bfo-navy) !important; }
.bfo-quiz-result a.bfo-quiz-result__btn{ text-decoration:none !important; }
.bfo-quiz-result .bfo-quiz-result__phone a, .bfo-quiz-result .bfo-quiz-result__note a, .bfo-quiz-slot .fluentform .bfo-quiz-privacy a{ color:var(--bfo-navy) !important; }
.bfo-quiz-result .bfo-quiz-result__btn:hover{ filter:brightness(.95); }
.bfo-quiz-result .bfo-quiz-result__btn:focus-visible{ outline:3px solid var(--bfo-amber); outline-offset:2px; }
.bfo-quiz-result .bfo-quiz-result__inbox{ margin:6px 0 14px; font-weight:600; color:var(--bfo-navy); }
.bfo-quiz-result .bfo-quiz-result__note{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--bfo-line); font-size:14px; line-height:1.6; color:var(--bfo-muted); }
@media (max-width:767px){
  .bfo-quiz-result .bfo-quiz-result__actions{ flex-direction:column; }
  .bfo-quiz-result .bfo-quiz-result__btn{ width:100%; }
}
/* Results carry their own next step (A and B deliberately have no booking button; Safety must not),
   so the page's fallback booking button steps out once a result is showing. */
.bfo-quizhero__card:has(.bfo-quiz-result) .bfo-quiz-fallback{ display:none; }
/* The privacy line under the consent ticks */
.bfo-quiz-slot .fluentform .bfo-quiz-privacy{ margin:-6px 0 4px; font-size:14px; color:var(--bfo-muted); }
.bfo-quiz-slot .fluentform .bfo-quiz-privacy a{ color:var(--bfo-navy); text-underline-offset:3px; }

/* ---------- Result preview on the details step (v0.23.1) ---------- */
.bfo-quiz-slot .fluentform .bfo-quiz-preview{ margin:0 0 6px; }
.bfo-quiz-slot .fluentform .bfo-quiz-preview .bfo-quiz-result__note{ margin-bottom:6px; }
.bfo-quizhero p.bfo-quiz-result__lead-in{ margin:22px 0 4px; padding:16px 18px; background:#fff; border:1px solid var(--bfo-line); border-radius:14px; font-weight:600; color:var(--bfo-navy); }