/*
 * Public form sections (Forms v2 FM21): the rules for the section types themselves and the shared widgets they use
 * (core uploader, date lists, "Add More" repeats, the signature pad, the old custom tick lists), loaded right after
 * xFormUI.css (component xFormUI::assets). Everything sits under .xf2, so CP screens that also use xFORM are not
 * touched. Found by the UI scan (dev/tests/forms/ui_scan.js); the record is CLAUDE_forms_plan.md §5.22.
 * Same rules as xFormUI.css: flat (radius 0), theme tokens only, 16 px fields on phones, 44 px tap targets.
 */

/* ---------- Theme ---------- */
/* In the site's dark theme --color1 turns light while --color1_contrast stays white, so a filled button or the
   chosen Title segment read white on near-white. The accent's own text uses the page background instead. */
[data-bs-theme="dark"] .xf2, [data-bs-theme="dark"] .xf-head,
.dark-mode .xf2, .dark-mode .xf-head { --xf-on-accent: var(--bs-body-bg, #212529); }

/* Icons the core fields colour with a fixed blue (calendar, e-mail, address pin): the theme accent. */
.xf2 i[style*="5c94c6"], .xf2 i[style*="92, 148, 198"] { color: var(--xf-accent) !important; }

/* ---------- Tap targets (44 px on phones) ---------- */
/* The section heading folds the section: the whole bar is the button. */
.xf2 .xTogglerBarSection { min-height: 44px; }
/* "Add More" / "Add another …" of a repeating section, and its "Remove". */
.xf2 button[id*="_add_new_"], .xf2 .xf-repeat-remove, .xf2 [id^="remove_section_"], .xf2 .remove_section {
    min-height: 44px; padding: 8px 16px !important; font-size: 16px !important; border-radius: 0 !important;
    display: inline-flex; align-items: center; gap: 6px;
}
/* "Save and continue later" / "Start again" of the draft module: text links with a full-height tap area. */
.xf2 .xfd-link, .xf2 + .xfd-note .xfd-link, .xfd-note .xfd-link { min-height: 44px; display: inline-flex; align-items: center; }
/* Old "+ Attach … scan (optional)" links of the static sections: a real link line, readable on both themes. */
.xf2 .xf-attach-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; padding: 0; border: 0;
    background: none; color: var(--xf-accent); font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* ---------- Core uploader (xFORM::files) ---------- */
.xf2 .dropzone label, .xf2 .dropzone p { color: var(--xf-text) !important; letter-spacing: 0 !important; }
.xf2 .dropzone label { font-size: 16px; font-weight: 600; text-align: center; }
.xf2 .dropzone p { font-weight: 400; font-size: 15px; }
/* "Optional" sat 20 px above the box, over the question before it. */
.xf2 .dropzone span.position-absolute.text-secondary {
    position: static !important; color: var(--xf-muted) !important; font-size: 14px !important; font-weight: 400;
}
.xf2 .dropzone div[style*="darkgray"] { color: var(--xf-muted) !important; font-size: 14px !important; font-weight: 400; margin: 2px 0 0 !important; text-align: center; }
.xf2 .dropzone .text-danger { color: var(--xf-err) !important; }

/* ---------- Day / Month / Year ---------- */
/* Day and Year are the framework's searchable lists, Month a plain list: all three get the same small caret. */
.xf2 select.custom_date_select_elem {
    appearance: none; -webkit-appearance: none; padding-inline-end: 18px !important;
    background: transparent no-repeat right 2px center / 10px 6px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0h10L5 6z'/%3E%3C/svg%3E") !important;
}
.xf2 .custom_date_select_elem.bg-light, .xf2 .form-select-sm.border .bg-light { background-color: transparent !important; }
/* The money question's currency list (custom sections): 16 px and the field's own colours. */
.xf2 select[id$="_currency_select"] { font-size: 16px !important; color: var(--xf-text) !important; background-color: transparent !important; min-height: 44px; }
.xf2 .form-select-sm.border.bg-light, .xf2 .form-select-sm.border:has(select[id$="_currency_select"]) { background: var(--xf-bg) !important; }

/* ---------- Old custom tick / radio lists (input + label in a col-md-12, no choice-card markup) ---------- */
.xf2 [id^="body_custom_"] > div.col-md-12:has(> input.form-check-input + label) {
    position: relative; display: flex; align-items: center; min-height: 48px; margin: 8px 0 0; padding: 0 !important;
    border: 1px solid var(--xf-field); background: var(--xf-bg); font-size: 0;
}
.xf2 [id^="body_custom_"] > div.col-md-12:has(> input.form-check-input + label) > input.form-check-input {
    position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); margin: 0 !important;
}
.xf2 [id^="body_custom_"] > div.col-md-12 > input.form-check-input + label {
    display: flex !important; align-items: center; width: 100%; min-height: 46px; margin: 0 !important;
    padding: 10px 14px 10px 48px !important; font-size: 16px !important; font-weight: 400; opacity: 1 !important; cursor: pointer;
    color: var(--xf-text);
}
.xf2 [id^="body_custom_"] > div.col-md-12:has(> input.form-check-input:checked) {
    border-color: var(--xf-accent); background: var(--xf-tint); box-shadow: inset 0 0 0 1px var(--xf-accent);
}
.xf2 [id^="body_custom_"] > div.col-md-12:has(> input.form-check-input:focus-visible) { outline: 2px solid var(--xf-accent); outline-offset: 2px; }

/* ---------- Signature pad (core xSignatureDraw) ---------- */
/* The pad stays white in both themes (ink on paper); its hint and notes are readable. */
.xf2 .xsp-hint { color: #5f6b76; }
.xf2 .xsp-foot { font-size: 14px; }
.xf2 .xsp-note, .xf2 .xsp-date { color: var(--xf-muted); font-size: 14px; }
.xf2 .xsp-clear { min-height: 44px; }

/* ---------- Section help, notes and hints written into the static sections ---------- */
.xf2 .xf-note { font-size: 14px; line-height: 1.45; color: var(--xf-muted); margin: 6px 0 0; }
.xf2 .xf-subhead { font-size: 16px; font-weight: 700; color: var(--xf-text); margin: var(--xf-gap) 0 0; padding-top: 12px; border-top: 1px solid var(--xf-line); }
.xf2 .xf-subhead:first-child { border-top: 0; padding-top: 0; }
/* A panel that opens under a choice (a test's scores, a job's details): flat, set in by a line, not a grey box. */
.xf2 .xf-panel { margin: 12px 0 0; padding: 0 0 4px 16px; border-inline-start: 3px solid var(--xf-line); }

/* ---------- Phone action bar ---------- */
/* Fixed to the bottom of the screen while the form begins low on the page (xFormUI.js pinActions). */
@media (max-width: 767.98px) {
    .xf2 .xf-actions.xf-actions--pinned { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 40; }
}

/* The Day / Month / Year box is exactly as tall as a field (it was 50 px and sat 4 px higher than the field beside
   it because of its wrapper's bottom margin), so a date and a text box on one row share both edges. */
.xf2 .form-select-sm.border:has(.custom_date_select_elem), .xf2 .form-select-sm.border:has(select[id*="_day"]) { height: 48px; min-height: 48px; box-sizing: border-box; }
.xf2 div.mb-1:has(> .form-select-sm.border) { margin-bottom: 0 !important; }

/* English: the test list is one choice (one test, "No test yet" or "English is my first language"), so its cards
   carry round markers like any single-choice question, though each test keeps its own posted tick. */
.xf2 .xf-english input[type="checkbox"].btn-check + label.btn::before { border-radius: 50%; }
.xf2 .xf-english input[type="checkbox"].btn-check:checked + label.btn::before { background: var(--xf-accent); box-shadow: inset 0 0 0 3px var(--xf-bg); }

/* A single tick box drawn as input + label (a declaration's "I agree", "The applicant is under 18", the old lists of
   the static sections): the label is the tap area, 44 px high, beside the box. */
.xf2 div:has(> input.form-check-input + label) { display: flex; align-items: center; gap: 0; }
.xf2 input[type="checkbox"].form-check-input + label, .xf2 input[type="radio"].form-check-input + label {
    display: inline-flex !important; align-items: center; min-height: 44px; margin: 0 !important; padding: 4px 0 4px 10px !important;
    font-size: 16px !important; font-weight: 400; opacity: 1 !important; color: var(--xf-text); cursor: pointer;
}

/* The signature's "The applicant is under 18" tick (xFormSignature): the whole line is the tap area. */
.xf2 label.xfs-minor, .xf2 label.xfb-minor:not([hidden]) { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.xf2 label.xfs-minor input[type="checkbox"], .xf2 label.xfb-minor input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
/* The money question's amount box: a full-height field. */
.xf2 input[id$="_currency_input"] { min-height: 44px; font-size: 16px !important; }

/* What sat beside the old Send button and now closes the last step (an application's agent authorisation): body
   text in the theme's colour (it inherited a near-white grey, 1.3 : 1), read from the start of the line. */
.xf2 .xf-last-extra, .xf2 .xf-last-extra label, .xf2 .xf-last-extra .text-center { color: var(--xf-text) !important; text-align: start !important; opacity: 1 !important; }
/* A library block's note under a field when it has nothing to say (it pushed the field 4 px off its row). */
.xf2 .xfb-note:empty { display: none; }

/* Dark theme: the public page's content wrapper (bg-light) stays white, so what sits outside the cards (the compact
   header, the authorisation line under the last step) was light text on white. The form's page takes the body colour. */
[data-bs-theme="dark"] .content-container.bg-light:has(.xf2), [data-bs-theme="dark"] .bg-light:has(> .xf2) { background-color: var(--bs-body-bg) !important; }

/* The visa section's "Attach your visa (optional)": styled by xStudyGoal.css only where a form also has the course
   picker, so on other forms (186) it fell back to a 30 px browser button. The same link style as .xf-attach-link. */
.xf2 .xvisa-attach {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
    color: var(--xf-accent); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Rich text written in the builder (form introductions, section headers and notes) often carries fixed colours: red
   warnings (#ff0000, #e74c3c, #c0392b) at 2.8 - 4 : 1 and yellow highlights (#f1c40f) that stay bright in the dark theme.
   The emphasis stays; the colours follow the theme (error red, a soft highlight). */
:is(.xf2, .xf-head) [style*="255, 0, 0"], :is(.xf2, .xf-head) [style*="231, 76, 60"], :is(.xf2, .xf-head) [style*="192, 57, 43"],
:is(.xf2, .xf-head) [style*="#ff0000" i], :is(.xf2, .xf-head) [style*="#e74c3c" i], :is(.xf2, .xf-head) [style*="#c0392b" i],
:is(.xf2, .xf-head) [style*="color: red"], :is(.xf2, .xf-head) [style*="color:red"], :is(.xf2, .xf-head) [style*="255,0,0"],
:is(.xf2, .xf-head) [style*="231,76,60"], :is(.xf2, .xf-head) [style*="192,57,43"] { color: var(--xf-err) !important; }
:is(.xf2, .xf-head) [style*="241, 196, 15"], :is(.xf2, .xf-head) [style*="241,196,15"], :is(.xf2, .xf-head) [style*="#f1c40f" i] {
    background-color: color-mix(in srgb, #f1c40f 30%, var(--xf-bg)) !important; color: var(--xf-text) !important;
}