/* Multi-step booking flow — GOV.UK "one thing per page" pattern.
   Sits on top of gov.css, which supplies the chrome and the accessibility
   modes. Deliberately plain: this is a form someone fills in once, under
   stress in the case of a burial, so clarity beats decoration. */

.bf-wrap { max-width: 600px; margin: 0 auto; }

/* ── Progress ──────────────────────────────────────────────────────── */

.bf-caption {
    font-size: calc(15px * var(--gov-font-scale));
    color: var(--gov-muted);
    margin: 0 0 6px;
}

.bf-heading {
    font-size: calc(26px * var(--gov-font-scale));
    line-height: 1.25;
    margin: 0 0 22px;
}

.bf-steps {
    display: flex; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none;
}
.bf-steps li {
    flex: 1; height: 6px; border-radius: 3px; background: #d5dae1;
}
.bf-steps li.done    { background: var(--gov-blue); }
.bf-steps li.current { background: var(--gov-blue); opacity: .55; }

/* ── Fields ────────────────────────────────────────────────────────── */

.bf-group { margin-bottom: 26px; }

/* GOV.UK marks an errored field with a thick red bar down its left edge, so
   it is findable by shape and not only by colour (WCAG 1.4.1). */
.bf-group--error {
    border-left: 5px solid var(--gov-red);
    padding-left: 14px;
    margin-left: -19px;
}

.bf-label {
    display: block;
    font-size: calc(17px * var(--gov-font-scale));
    font-weight: 700;
    margin-bottom: 4px;
}
.bf-optional { font-weight: 400; color: var(--gov-muted); }

.bf-hint {
    font-size: calc(15px * var(--gov-font-scale));
    color: var(--gov-muted);
    margin: 0 0 8px;
}

.bf-error {
    font-size: calc(15px * var(--gov-font-scale));
    font-weight: 700;
    color: var(--gov-red);
    margin: 0 0 8px;
}
.bf-error-prefix { text-decoration: underline; }

.bf-input {
    width: 100%;
    padding: 10px 12px;
    /* 16px minimum stops iOS zooming the page when the field is focused. */
    font-size: calc(16px * var(--gov-font-scale));
    font-family: inherit;
    color: var(--gov-ink);
    background: #fff;
    border: 2px solid #0b0c0c;
    border-radius: 0;          /* GOV.UK inputs are square-cornered */
}
.bf-input:focus {
    outline: 3px solid #ffdd00;   /* GOV.UK focus yellow */
    outline-offset: 0;
    box-shadow: inset 0 0 0 2px #0b0c0c;
}
.bf-group--error .bf-input { border-color: var(--gov-red); }

textarea.bf-input { resize: vertical; }

/* ── Error summary ─────────────────────────────────────────────────── */

.bf-summary {
    border: 5px solid var(--gov-red);
    padding: 18px 20px;
    margin-bottom: 28px;
}
.bf-summary:focus { outline: 3px solid #ffdd00; }
.bf-summary-title { font-size: calc(20px * var(--gov-font-scale)); margin: 0 0 10px; }
.bf-summary-list  { margin: 0; padding-left: 20px; }
.bf-summary-list a { color: var(--gov-red); font-weight: 700; }

/* ── Buttons ───────────────────────────────────────────────────────── */

.bf-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }

.bf-btn {
    padding: 12px 22px;
    font-size: calc(17px * var(--gov-font-scale));
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: #00703c;               /* GOV.UK green for the primary action */
    border: 2px solid transparent;
    border-bottom: 3px solid #002d18;  /* the button's "shadow" edge */
    border-radius: 0;
    cursor: pointer;
}
.bf-btn:hover { background: #005a30; }
.bf-btn:focus { outline: 3px solid #ffdd00; outline-offset: 0; }

.bf-back {
    font-size: calc(16px * var(--gov-font-scale));
    color: var(--gov-blue);
}

/* ── Check your answers ────────────────────────────────────────────── */

.bf-check-section {
    font-size: calc(19px * var(--gov-font-scale));
    margin: 28px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gov-line);
}

.bf-answers { margin: 0 0 8px; }

.bf-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr auto;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--gov-line);
    font-size: calc(16px * var(--gov-font-scale));
}
.bf-row dt { color: var(--gov-muted); margin: 0; }
.bf-row dd { margin: 0; font-weight: 600; word-break: break-word; }
.bf-row .bf-change { text-align: right; white-space: nowrap; }
.bf-row .bf-change a { color: var(--gov-blue); font-weight: 600; }

.bf-empty { color: var(--gov-muted); font-weight: 400; font-style: italic; }

.bf-declaration {
    background: #f3f2f1;
    border-left: 5px solid var(--gov-blue);
    padding: 16px 18px;
    margin: 26px 0;
}
.bf-declaration h3 { font-size: calc(17px * var(--gov-font-scale)); margin: 0 0 8px; }
.bf-declaration p  { margin: 0; font-size: calc(15px * var(--gov-font-scale)); line-height: 1.6; color: #383f45; }

@media (max-width: 560px) {
    .bf-row { grid-template-columns: 1fr; gap: 3px; }
    .bf-row .bf-change { text-align: left; }
    .bf-heading { font-size: calc(21px * var(--gov-font-scale)); }
}

/* Visually hidden but read aloud — so each "Change" link announces WHICH
   answer it changes, rather than every link announcing just "Change". */
.bf-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── "What to bring" ───────────────────────────────────────────────────
   Shown on step 1 of every booking flow, from `services.requirements`.

   Styled as an inset panel rather than a red error box: this is guidance a
   person needs, not a problem they have caused. The left bar carries the
   weight so it reads as official without shouting.

   Font sizes multiply by --gov-font-scale like the rest of this flow, so the
   page's A+ / A- controls enlarge this panel too. That matters here more than
   anywhere else on the page: this is the text an older applicant most needs to
   be able to read. */
.bf-requirements {
    border-left: 8px solid var(--gov-blue);
    background: var(--gov-bg);
    padding: 16px 20px;
    margin: 0 0 26px;
}
.bf-requirements-title {
    font-size: calc(19px * var(--gov-font-scale));
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--gov-ink);
}
.bf-requirements-list {
    margin: 0;
    padding-left: 22px;
    font-size: calc(17px * var(--gov-font-scale));
    line-height: 1.6;
    color: var(--gov-ink);
}
.bf-requirements-list li { margin-bottom: 6px; }
.bf-requirements-note {
    margin: 12px 0 0;
    font-size: calc(15px * var(--gov-font-scale));
    color: var(--gov-muted);
}

/* ── Optional document upload on the confirmation page ─────────────────
   Deliberately quiet. The booking is already complete by the time this is
   shown, so it must not look like an outstanding task — someone who cannot
   upload should feel finished, not blocked. */
.conf-attach-form   { margin: 14px 0 26px; }
.conf-attach-label  { display: block; font-weight: 700;
                      font-size: calc(17px * var(--gov-font-scale)); margin-bottom: 6px; }
.conf-attach-hint   { font-size: calc(15px * var(--gov-font-scale));
                      color: var(--gov-muted); margin: 0 0 10px; }
.conf-attach-note   { font-size: calc(16px * var(--gov-font-scale));
                      color: var(--gov-ink); margin: 0 0 10px; }
.conf-attach-actions{ margin-top: 14px; }
.conf-attach-list   { margin: 0 0 14px; padding-left: 22px;
                      font-size: calc(16px * var(--gov-font-scale)); }
.conf-attach-size   { color: var(--gov-muted); }
.conf-attach-ok     { border-left: 8px solid var(--gov-blue); background: var(--gov-bg);
                      padding: 12px 16px; margin-bottom: 16px;
                      font-size: calc(16px * var(--gov-font-scale)); }
/* The file input is the one control on this page an older person is most
   likely to miss, so it gets a real target rather than the browser default. */
.conf-attach-form input[type="file"] {
    display: block; width: 100%; max-width: 480px;
    padding: 10px; border: 2px solid var(--gov-ink); background: #fff;
    font-size: calc(16px * var(--gov-font-scale));
}
.conf-attach-form input[type="file"]:focus {
    outline: 3px solid var(--gov-yellow); outline-offset: 0;
}