/*
 * Public form design system (Forms v2 FM4) - one stylesheet for every public form: its own page, a CMS page,
 * a course / institution page and the Enquire Now modal. Everything sits under .xf2 (the form container,
 * forms_form.view.php) or .xf-head (the compact header, xFormUI::header), so CP screens that also use xFORM
 * are not touched.
 *
 * Rules (CLAUDE.md, the forms plan §3): flat - border-radius 0, no decorative shadows, gradients or hover
 * lifts; states shown by colour and borders; mobile first (built for 390 px, inputs 16 px so iOS does not
 * zoom, touch targets at least 48 px); theme colours through --color1 / --color1_contrast and the Bootstrap
 * body tokens, so the nine themes and dark mode work. Forms are English LTR islands inside pages that may
 * be RTL; logical properties keep them right if a translated piece flips.
 */

.xf2, .xf-head {
    --xf-accent: var(--color1, #0b5cad);
    --xf-on-accent: var(--color1_contrast, #fff);
    --xf-text: var(--bs-body-color, #1d2125);
    --xf-bg: var(--bs-body-bg, #fff);
    --xf-muted: color-mix(in srgb, var(--xf-text) 66%, var(--xf-bg));
    --xf-line: color-mix(in srgb, var(--xf-text) 16%, var(--xf-bg));
    --xf-field: color-mix(in srgb, var(--xf-text) 42%, var(--xf-bg));
    --xf-tint: color-mix(in srgb, var(--xf-accent) 7%, var(--xf-bg));
    --xf-soft: color-mix(in srgb, var(--xf-text) 4%, var(--xf-bg));
    --xf-err: #b3261e;
    --xf-err-tint: color-mix(in srgb, #b3261e 7%, var(--xf-bg));
    --xf-ok: #1b7a36;
    --xf-warn: #8a5a00;
    --xf-gap: 20px;
    --xf-pad: 16px;
    --xf-max: 980px;
}
[data-bs-theme="dark"] .xf2, [data-bs-theme="dark"] .xf-head,
.dark-mode .xf2, .dark-mode .xf-head {
    --xf-err: #ff8a80;
    --xf-err-tint: color-mix(in srgb, #ff8a80 12%, var(--xf-bg));
    --xf-ok: #7bd88f;
    --xf-warn: #ffcc66;
}
@media (min-width: 768px) {
    .xf2, .xf-head { --xf-gap: 24px; --xf-pad: 24px; }
}

/* ---------- Compact header ---------- */
.xf-head {
    max-width: var(--xf-max);
    margin: 8px auto 0;
    padding: 4px var(--xf-pad) 8px;
    color: var(--xf-text);
    text-align: start;
}
.xf-head__org { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.xf-head__logo { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; background: #fff; border: 1px solid var(--xf-line); padding: 4px; }
.xf-head__orgtext { min-width: 0; }
.xf-head__name { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--xf-text); text-decoration: none; }
.xf-head__name:hover, .xf-head__name:focus-visible { color: var(--xf-accent); text-decoration: underline; }
.xf-head__meta { font-size: 14px; color: var(--xf-muted); }
.xf-head__purpose { margin-bottom: 6px; }
.xf-tag {
    display: inline-block; padding: 2px 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; background: var(--xf-accent); color: var(--xf-on-accent);
}
.xf-head h1.xf-head__title {
    font-size: 23px; line-height: 1.25; font-weight: 700; margin: 0 0 8px; text-align: start; color: var(--xf-text);
}
.xf-head__title p { font-size: 15px; font-weight: 400; margin: 6px 0 0; }
.xf-head__course { font-size: 16px; margin: 0 0 6px; }
.xf-head__courselabel { font-weight: 700; }
.xf-head__facts { margin: 0; font-size: 15px; color: var(--xf-muted); }
.xf-head__facts span + span::before { content: "·"; margin: 0 8px; }
@media (min-width: 768px) {
    .xf-head h1.xf-head__title { font-size: 32px; }
    .xf-head { margin-top: 16px; }
}

/* ---------- Form container ---------- */
.xf2 {
    max-width: var(--xf-max);
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.5;
    color: var(--xf-text);
    padding-inline: 0 !important;
}
.xf2 .page-content { font-size: 16px; }
.xf2 > .px-2 { padding-inline: var(--xf-pad) !important; }
.xf2 .xf-notes { font-size: 14px; color: var(--xf-muted); margin: 6px 0 0; }
.xf2 .xf-notes p, .xf2 .xf-notes div { display: inline; margin: 0; font-size: inherit !important; }
.xf2 .xf-notes * { font-size: inherit !important; }
.xf2 .xf-required-note { font-size: 14px; color: var(--xf-muted); margin: 8px var(--xf-pad) 0; }
.xf2 .xf-required-note b { color: var(--xf-err); }

/* The institution's course box (translated, page direction) folds away under the header. */
.xf2 details.xf-course { margin: 12px 0 0; border: 1px solid var(--xf-line); background: var(--xf-bg); }
.xf2 details.xf-course > summary { padding: 12px 16px; cursor: pointer; font-weight: 600; min-height: 48px; display: flex; align-items: center; }
.xf2 details.xf-course[open] > summary { border-bottom: 1px solid var(--xf-line); }
.xf2 details.xf-course > div { padding: 8px; }

/* ---------- Have these ready ---------- */
.xf2 .xf-ready {
    margin: 16px var(--xf-pad) 0; padding: 14px 16px; border: 1px solid var(--xf-line);
    border-inline-start: 4px solid var(--xf-accent); background: var(--xf-soft);
}
.xf2 .xf-ready__title { font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 4px; min-height: 28px; }
.xf2 .xf-ready__title::-webkit-details-marker { display: none; }
.xf2 .xf-ready__title::after { content: "▾"; font-size: 16px; margin-inline-start: auto; color: var(--xf-muted); }
.xf2 .xf-ready[open] > .xf-ready__title { margin-bottom: 6px; }
.xf2 .xf-ready[open] > .xf-ready__title::after { content: "▴"; }
.xf2 .xf-ready__count { font-weight: 400; color: var(--xf-muted); font-size: 14px; }
.xf2 .xf-ready__title .fa { color: var(--xf-accent); margin-inline-end: 6px; }
.xf2 .xf-ready__list { margin: 0; padding-inline-start: 20px; columns: 1; }
.xf2 .xf-ready__list li { margin: 2px 0; break-inside: avoid; }
.xf2 .xf-ready__if, .xf2 .xf-ready__more { color: var(--xf-muted); font-size: 14px; }
.xf2 .xf-ready__note { margin: 8px 0 0; font-size: 14px; color: var(--xf-muted); }
@media (min-width: 768px) { .xf2 .xf-ready__list { columns: 2; column-gap: 32px; } }

/* ---------- Progress ---------- */
.xf2 .xf-progress { margin: 16px var(--xf-pad) 0; }
.xf2 .xf-progress__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 15px; }
.xf2 .xf-progress__step { font-weight: 700; }
.xf2 .xf-progress__title { color: var(--xf-text); }
.xf2 .xf-progress__time { color: var(--xf-muted); margin-inline-start: auto; }
.xf2 .xf-progress__bar { height: 6px; background: var(--xf-line); margin-top: 8px; overflow: hidden; }
.xf2 .xf-progress__bar > span { display: block; height: 100%; width: 0; background: var(--xf-accent); transition: width .2s linear; }
.xf2 .xf-stepper { display: none; }
@media (min-width: 992px) {
    .xf2 .xf-stepper { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
    .xf2 .xf-stepper button {
        border: 1px solid var(--xf-line); background: var(--xf-bg); color: var(--xf-muted); font-size: 13px;
        padding: 4px 10px; border-radius: 0; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .xf2 .xf-stepper button[aria-current="step"] { border-color: var(--xf-accent); color: var(--xf-text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--xf-accent); }
    .xf2 .xf-stepper button.xf-done { color: var(--xf-text); }
    .xf2 .xf-stepper button.xf-done::before { content: "\2713\00a0"; color: var(--xf-ok); }
    .xf2 .xf-stepper button.xf-has-err { border-color: var(--xf-err); color: var(--xf-err); }
    .xf2 .xf-stepper button:disabled { cursor: default; opacity: .6; }
}

/* ---------- Steps ---------- */
.xf2.xf-steps .xstep_form { display: none !important; }
.xf2.xf-steps .xstep_form.xf-current { display: block !important; }
.xf2.xf-steps .xstep_form_body_btn { display: none !important; }
.xf2.xf-steps .xf-current > .card:first-child,
.xf2.xf-steps .xf-current > .xfl-section:first-child > .card:first-child { margin-top: 16px !important; }

/* ---------- Section cards ---------- */
.xf2 .card {
    border: 1px solid var(--xf-line) !important; border-top: 3px solid var(--xf-accent) !important;
    border-radius: 0 !important; background: var(--xf-bg) !important; box-shadow: none !important;
    margin: var(--xf-gap) var(--xf-pad) 0 !important;
}
.xf2 .card .card { margin-inline: 0 !important; border-top-width: 1px !important; }
/* Sections the builder glued to the one before or after ("sticky" top / bottom) stay joined. */
.xf2 .card[style*="border-top-width: 0"] { border-top-width: 0 !important; margin-top: 0 !important; }
.xf2 .card[style*="border-bottom-width: 0"] { border-bottom-width: 0 !important; }
.xf2 .card-header {
    background: var(--xf-bg) !important; border-bottom: 1px solid var(--xf-line) !important; border-radius: 0 !important;
    padding: 12px var(--xf-pad) !important; opacity: 1 !important;
}
.xf2 .card > .collapse, .xf2 .card > .collapsing { background: transparent !important; }
.xf2 .xTogglerBarSection {
    font-size: 19px !important; font-weight: 700 !important; line-height: 1.3; opacity: 1 !important;
    color: var(--xf-text) !important; margin: 0; align-items: center; min-height: 36px;
}
.xf2 .xTogglerBarSection > .col { display: flex; align-items: center; gap: 12px; padding: 0; }
.xf2 .xTogglerBarSection i[id^="icon_"] {
    /* Icon inside a coloured tile: strong theme colour and its contrast (CLAUDE.md theming rule). */
    flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--xf-accent); color: var(--xf-on-accent); font-size: 16px; margin: 0 !important;
}
.xf2 .xTogglerBarSection i[id^="close_open"] { margin-inline-start: auto !important; color: var(--xf-muted); font-size: 14px; transition: none; }
.xf2 .card-body { padding: 4px var(--xf-pad) var(--xf-gap) !important; }
.xf2 .card-body > .row { margin-inline: 0; }
.xf2 .card-body .row > [class*="col"] { padding-inline: 0; }
@media (min-width: 768px) {
    .xf2 .card-body .row { column-gap: 0; }
    .xf2 .card-body .row > [class*="col-md-"]:not(.col-md-12):not(.col-md-auto) { padding-inline-end: 16px; }
}
.xf2 .header-section-form, .xf2 .footer-section-form {
    font-size: 15px !important; margin: 12px 0 0 !important; width: auto; color: var(--xf-text);
}
.xf2 .header-section-form { padding: 10px 0 0; }
.xf2 .footer-section-form { padding: 12px 0 0; border-top: 1px solid var(--xf-line); color: var(--xf-muted); }

/* ---------- Questions ---------- */
.xf2 label.font14px, .xf2 .card-body label.form-label {
    display: block !important; font-size: 16px !important; font-weight: 600; line-height: 1.4;
    color: var(--xf-text); opacity: 1 !important; margin: var(--xf-gap) 0 6px !important; padding: 0 !important;
}
.xf2 label .text-danger, .xf2 .xf-req { color: var(--xf-err) !important; font-size: 16px !important; }
.xf2 .xf-help {
    font-size: 14px !important; font-style: normal !important; line-height: 1.45 !important; opacity: 1 !important;
    color: var(--xf-muted); margin: -2px 0 8px !important;
}
.xf2 [data-xf-name] { margin-bottom: 0 !important; }
.xf2 [data-xf-name] > .col-md { padding: 0; }
.xf2 .mobile_cp_element { margin-inline: 0; }

/* Text inputs, selects, the searchable select (awz-select), textareas */
.xf2 .form-control, .xf2 .form-select, .xf2 select.form-control,
.xf2 .input-group-sm > .form-control, .xf2 .input-group-sm > .form-select,
.xf2 .awz-select__control:not(.custom_date_select_elem) {
    min-height: 48px !important; font-size: 16px !important; line-height: 1.4 !important;
    padding: 10px 12px !important; border: 1px solid var(--xf-field) !important; border-radius: 0 !important;
    background-color: var(--xf-bg) !important; color: var(--xf-text) !important; box-shadow: none !important;
}
.xf2 .form-select, .xf2 select.form-control { padding-inline-end: 36px !important; }
.xf2 textarea.form-control { min-height: 120px !important; }
.xf2 .form-control::placeholder { color: var(--xf-muted); opacity: .8; }
.xf2 .form-control:focus, .xf2 .form-select:focus, .xf2 .awz-select.is-open .awz-select__control,
.xf2 .awz-select__control:focus-within {
    border-color: var(--xf-accent) !important; outline: 2px solid var(--xf-accent) !important; outline-offset: 0;
}
.xf2 .form-control[readonly], .xf2 .form-control:disabled { background: var(--xf-soft) !important; }
.xf2 .awz-select__dropdown { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--xf-field) !important; }
.xf2 .awz-select__option { min-height: 44px; display: flex; align-items: center; font-size: 16px; }
.xf2 .awz-select__search { font-size: 16px !important; min-height: 44px; border-radius: 0 !important; }
.xf2 .url-icon, .xf2 .date-picker-icon { z-index: 1 !important; }

/* Phone with its country code in front */
.xf2 .xf-phone { display: flex; gap: 0; width: 100%; }
.xf2 .xf-phone .xf-dial { flex: 0 0 116px; max-width: 116px; border-inline-end: 0 !important; padding-inline: 8px 28px !important; background-position: right 8px center; }
.xf2 .xf-phone .form-control { flex: 1 1 auto; min-width: 0; }

/* Day / Month / Year pickers stay three lists in one box (the gov.uk pattern for dates people remember). */
.xf2 .form-select-sm.border:has(.custom_date_select_elem), .xf2 .form-select-sm.border:has(select[id*="_day_"]) {
    min-height: 48px; border: 1px solid var(--xf-field) !important; border-radius: 0 !important; background: var(--xf-bg) !important;
    padding: 0 40px 0 4px !important; display: flex; align-items: center;
}
.xf2 [style*="max-width: 320px"]:has(.custom_date_select_elem) { max-width: 360px !important; }
.xf2 .form-select-sm.border > .row { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; width: 100%; justify-content: flex-start; }
.xf2 .form-select-sm.border > .row > div { max-width: none !important; flex: 0 0 auto; padding: 0 !important; width: auto; font-size: 16px !important; }
.xf2 .form-select-sm.border:has(.custom_date_select_elem) { width: 100%; }
.xf2 .form-select-sm.border > .row > div:nth-child(1) { flex: 0 0 64px; }
.xf2 .form-select-sm.border > .row > div:nth-child(2) { flex: 1 1 auto; min-width: 96px; }
.xf2 .form-select-sm.border > .row > div:nth-child(3) { flex: 0 0 80px; }
.xf2 .form-select-sm.border > .row > div.col-1 { flex: 0 0 24px; display: flex; align-items: center; }
.xf2 select.custom_date_select_elem { width: 100%; appearance: auto; color: var(--xf-text) !important; }
.xf2 .form-select-sm.border > .row > div:nth-child(1) .awz-select__placeholder:empty::before { content: "Day"; color: var(--xf-muted); }
.xf2 .form-select-sm.border > .row > div:nth-child(3) .awz-select__placeholder:empty::before { content: "Year"; color: var(--xf-muted); }
.xf2 .custom_date_select_elem { min-height: 44px; font-size: 16px !important; padding: 8px 6px !important; background: transparent !important; border: 0 !important; display: flex; align-items: center; }
.xf2 .custom_date_select_elem:focus, .xf2 .custom_date_select_elem:focus-within { outline: 2px solid var(--xf-accent) !important; }
.xf2 .form-select-sm.border .date-picker-icon, .xf2 .form-select-sm.border .fa-calendar, .xf2 .form-select-sm.border .fa-calendar-days { font-size: 18px; }

/* Choice cards: radio and tick buttons drawn by xFORM as .btn-check + label.btn */
.xf2 .btn-check + label.btn {
    position: relative; display: flex !important; align-items: center; gap: 12px; width: 100%;
    min-height: 48px; padding: 11px 14px !important; margin: 0; text-align: start; white-space: normal;
    font-size: 16px !important; font-weight: 400; line-height: 1.35; color: var(--xf-text) !important;
    background: var(--xf-bg) !important; border: 1px solid var(--xf-field) !important; border-radius: 0 !important;
    box-shadow: none !important; transition: none;
}
.xf2 .btn-check + label.btn::before {
    content: ""; flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid var(--xf-field); border-radius: 50%;
    background: var(--xf-bg);
}
.xf2 input[type="checkbox"].btn-check + label.btn::before { border-radius: 0; }
.xf2 .btn-check + label.btn:hover { border-color: var(--xf-accent) !important; }
.xf2 .btn-check:checked + label.btn {
    border-color: var(--xf-accent) !important; background: var(--xf-tint) !important; box-shadow: inset 0 0 0 1px var(--xf-accent) !important;
    font-weight: 600;
}
.xf2 .btn-check:checked + label.btn::before { border-color: var(--xf-accent); background: var(--xf-accent); box-shadow: inset 0 0 0 3px var(--xf-bg); }
.xf2 input[type="checkbox"].btn-check:checked + label.btn::before {
    box-shadow: none; background: var(--xf-accent) center / 14px 14px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
}
.xf2 .btn-check:focus-visible + label.btn { outline: 2px solid var(--xf-accent) !important; outline-offset: 2px; }
.xf2 .btn-check:disabled + label.btn { opacity: .55; }
.xf2 .btn-check + label.btn.xf-err-choice { border-color: var(--xf-err) !important; }
/* The option rows: a gap instead of Bootstrap gutters; cards side by side from tablet width when short. */
.xf2 [data-xf-type="radio"] .row.mt-1, .xf2 [data-xf-type="check"] .row.mt-1 { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0 !important; }
.xf2 [data-xf-type="radio"] .row.mt-1 > [class*="col"], .xf2 [data-xf-type="check"] .row.mt-1 > [class*="col"] { padding: 0 !important; margin: 0 !important; width: 100%; flex: 0 0 100%; }
/* Short answers (Mr / Ms, Yes / No) sit two to a row on phones. */
.xf2 .row.mt-1.xf-short { display: grid !important; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) {
    .xf2 .row.mt-1.xf-short { display: flex !important; }
    .xf2 [data-xf-type="radio"] .row.mt-1 > .col-md-auto, .xf2 [data-xf-type="check"] .row.mt-1 > .col-md-auto { width: auto; flex: 0 0 auto; min-width: 120px; }
}

/* Radio / tick lists drawn as a plain input + label pair: the same choice cards. */
.xf2 [data-xf-type] .row.mt-1 > div:has(> .form-check-input) { position: relative; }
.xf2 [data-xf-type] .row.mt-1 > div > .form-check-input {
    position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); margin: 0 !important; z-index: 1;
}
.xf2 [data-xf-type] .row.mt-1 > div > .form-check-input + .form-check-label {
    display: flex; align-items: center; min-height: 48px; width: 100%; padding: 11px 14px 11px 48px; cursor: pointer;
    border: 1px solid var(--xf-field); background: var(--xf-bg); font-size: 16px;
}
.xf2 [data-xf-type] .row.mt-1 > div > .form-check-input + .form-check-label:hover { border-color: var(--xf-accent); }
.xf2 [data-xf-type] .row.mt-1 > div > .form-check-input:checked + .form-check-label {
    border-color: var(--xf-accent); background: var(--xf-tint); box-shadow: inset 0 0 0 1px var(--xf-accent); font-weight: 600;
}
.xf2 [data-xf-type] .row.mt-1 > div > .form-check-input:focus-visible + .form-check-label { outline: 2px solid var(--xf-accent); outline-offset: 2px; }
.xf2 [data-xf-type] .row.mt-1:has(> div > .form-check-input) { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0 !important; }
.xf2 [data-xf-type] .row.mt-1 > div:has(> .form-check-input) { padding: 0 !important; width: 100%; flex: 0 0 100%; }
@media (min-width: 768px) {
    .xf2 [data-xf-type] .row.mt-1 > div.col-md-auto:has(> .form-check-input) { width: auto; flex: 0 0 auto; min-width: 140px; }
}

/* Plain tick boxes (form-check) */
.xf2 .form-check { min-height: 44px; display: flex; align-items: flex-start; gap: 10px; padding-inline-start: 0; margin: 6px 0; }
.xf2 .form-check-input {
    float: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0 !important; border: 2px solid var(--xf-field);
    border-radius: 0 !important; box-shadow: none !important;
}
.xf2 .form-check-input[type="radio"] { border-radius: 50% !important; }
.xf2 .form-check-input:checked { background-color: var(--xf-accent); border-color: var(--xf-accent); }
.xf2 .form-check-input:focus-visible { outline: 2px solid var(--xf-accent); outline-offset: 2px; }
.xf2 .form-check-label { font-size: 16px; line-height: 1.4; }

/* File drop boxes (core uploader) */
.xf2 .dropzone {
    border: 2px dashed var(--xf-field) !important; border-radius: 0 !important; background: var(--xf-bg) !important;
    font-size: 16px !important; font-weight: 600 !important; padding: 20px 16px !important; min-height: 96px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; letter-spacing: 0 !important;
}
.xf2 .dropzone:hover, .xf2 .dropzone.dragover { border-color: var(--xf-accent) !important; background: var(--xf-tint) !important; }
.xf2 .dropzone-compact { border-radius: 0 !important; }
.xf2 .file-item, .xf2 .file-item-compact { border-radius: 0 !important; background: var(--xf-soft) !important; border: 1px solid var(--xf-line); padding: 8px 10px !important; font-size: 15px !important; }

/* Signature pads (FM7) keep their own block; only the frame follows the system. */
.xf2 [id$="_Container"][id^="signaturecanvas_"] { border-radius: 0 !important; }

/* ---------- Errors (FM5) ---------- */
.xf2 .xf-field-err { border-inline-start: 4px solid var(--xf-err); padding-inline-start: 12px !important; }
.xf2 .xf-field-err > label.font14px { color: var(--xf-text); }
.xf2 .xf-err-msg {
    display: flex; gap: 6px; align-items: flex-start; color: var(--xf-err); font-weight: 600; font-size: 15px;
    line-height: 1.4; margin: 6px 0 2px;
}
.xf2 .xf-err-msg::before { content: "\f06a"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; }
.xf2 .xf-hint-msg { color: var(--xf-warn); font-size: 15px; margin: 6px 0 2px; }
.xf2 .xf-hint-msg button { background: none; border: 0; padding: 0; color: var(--xf-accent); text-decoration: underline; font: inherit; cursor: pointer; }
.xf2 .xf-count { font-size: 13px; color: var(--xf-muted); text-align: end; margin-top: 4px; }
.xf2 .xf-count.xf-over { color: var(--xf-err); font-weight: 600; }
.xf2 .not_valid, .xf2 .xf-invalid {
    border-color: var(--xf-err) !important; outline: 1px solid var(--xf-err) !important; background-color: var(--xf-bg) !important;
    box-shadow: none !important;
}
.xf2 .required_msg { display: none !important; }
.xf2 .xf-summary {
    margin: 16px var(--xf-pad) 0; padding: 14px 16px; border: 2px solid var(--xf-err); background: var(--xf-bg);
    color: var(--xf-text);
}
.xf2 .xf-summary:focus { outline: 2px solid var(--xf-err); outline-offset: 2px; }
.xf2 .xf-summary__title { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.xf2 .xf-summary ul { margin: 0; padding-inline-start: 20px; }
.xf2 .xf-summary li { margin: 4px 0; }
.xf2 .xf-summary a { color: var(--xf-err); font-weight: 600; text-decoration: underline; }
.xf2 .xf-summary p { margin: 6px 0 0; font-size: 15px; }
.xform_invalid_summary { display: none !important; }

/* ---------- Actions: Back / Next / Send, sticky at the bottom on phones ---------- */
.xf2 .xf-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: var(--xf-gap) var(--xf-pad) 0;
    padding: 12px 0; background: var(--xf-bg);
}
.xf2 .xf-actions .xf-btn, .xf2 .xf-actions button[id^="submit_btn"] {
    min-height: 52px; padding: 12px 24px !important; font-size: 17px !important; font-weight: 700; border-radius: 0 !important;
    margin: 0 !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
}
.xf2 .xf-btn-primary, .xf2 .xf-actions button[id^="submit_btn"] {
    background: var(--xf-accent) !important; color: var(--xf-on-accent) !important; border: 2px solid var(--xf-accent) !important;
}
.xf2 .xf-btn-primary:hover, .xf2 .xf-actions button[id^="submit_btn"]:hover { filter: brightness(1.08); }
.xf2 .xf-btn-primary:focus-visible, .xf2 .xf-btn-back:focus-visible, .xf2 .xf-actions button[id^="submit_btn"]:focus-visible {
    outline: 3px solid var(--xf-text) !important; outline-offset: 2px;
}
.xf2 .xf-btn-back { background: var(--xf-bg); color: var(--xf-text); border: 2px solid var(--xf-field) !important; }
.xf2 .xf-btn-back:hover { border-color: var(--xf-accent) !important; }
.xf2 .xf-actions [disabled] { opacity: .65; cursor: progress; }
.xf2 .xf-actions__count { font-size: 14px; color: var(--xf-muted); }
.xf2 .xf-actions .xf-btn-next, .xf2 .xf-actions button[id^="submit_btn"] { margin-inline-start: auto !important; }
.xf2 .xf-after-actions { margin: 4px var(--xf-pad) 0; }
.xf2 .xf-after-actions .xfd-tools { justify-content: flex-start; }
@media (max-width: 767.98px) {
    .xf2 .xf-actions {
        position: sticky; bottom: 0; z-index: 40; margin-inline: 0; padding: 10px var(--xf-pad) calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--xf-line); flex-wrap: nowrap;
    }
    .xf2 .xf-actions .xf-btn-next, .xf2 .xf-actions button[id^="submit_btn"] { flex: 1 1 auto; }
    .xf2 .xf-actions .xf-btn-back { flex: 0 0 auto; padding-inline: 16px !important; }
    .xf2 .xf-actions .xf-btn-back .xf-btn-text { display: none; }
    .xf2 .xf-actions__count { display: none; }
    /* The site assistant's round button moves above the bar instead of covering Next / Send. */
    body:has(.xf2 .xf-actions) #xa-launcher { bottom: 92px !important; }
    /* Inside the Enquire Now modal the modal body scrolls: the bar sticks to its bottom. */
    .modal .xf2 .xf-actions { bottom: -16px; }
}
.xf2 .xf-sending { display: inline-block; width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: xf-spin .8s linear infinite; }
@keyframes xf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .xf2 .xf-sending { animation-duration: 2s; } .xf2 .xf-progress__bar > span { transition: none; } }

/* Old helpers the new layer replaces */
.xf2 .error-badge { border-radius: 0 !important; }
.xf2 .blink_me { animation: none; }

/* ---------- Success page: what happens next (FM5) ---------- */
.xf2.xf-success { max-width: var(--xf-max); margin: 0 auto; padding-inline: var(--xf-pad) !important; font-size: 17px; }
.xf2 .xf-next { margin: 24px 0 0; padding: 16px 20px; border: 1px solid var(--xf-line); border-inline-start: 4px solid var(--xf-ok); }
.xf2 .xf-next__title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.xf2 .xf-next__list { margin: 0; padding-inline-start: 20px; }
.xf2 .xf-next__list li { margin: 8px 0; line-height: 1.5; }
.xf2 .xf-next a { color: var(--xf-accent); text-decoration: underline; font-weight: 600; }

/* ---------- Print: the whole form open, like the PDF ---------- */
@media print {
    .xf2 { max-width: none; }
    .xf2.xf-steps .xstep_form, .xf2 .xstep_form { display: block !important; }
    .xf2 .collapse { display: block !important; height: auto !important; }
    .xf2 .xf-actions, .xf2 .xf-after-actions, .xf2 .xf-progress, .xf2 .xf-summary, .xf2 .xfd-note,
    .xf2 .dropzone, .xf2 .url-icon, .xf2 .xTogglerBarSection i[id^="close_open"] { display: none !important; }
    .xf2 .card { break-inside: avoid-page; margin: 12px 0 0 !important; border-top: 2px solid #000 !important; }
    .xf2 .xTogglerBarSection i[id^="icon_"] { background: none; color: #000; border: 1px solid #000; }
    .xf2 .form-control, .xf2 .form-select { border: 0 !important; border-bottom: 1px solid #000 !important; min-height: 0 !important; padding: 2px 0 !important; }
    .xf2 .btn-check + label.btn { min-height: 0; padding: 2px 6px !important; border: 0 !important; }
    .xf2 .btn-check:not(:checked) + label.btn { display: none !important; }
    .xf-head__logo { border: 0; }
}