/* Forms v2 FM36 (Ashkan's review of 2026-11-15: "the buttons are ugly, the select boxes do not fit"): one calm button
   system for the Back / Next / Send bar, plain lists that never run under their chevron, and the agent chooser of an
   application as a card on the form's edge. Loaded after xFormUI.css and xFormSections.css (xFormUI::assets), only on
   pages that hold a public form; every rule sits under .xf2, the public form container. Flat, border-radius 0. */

/* ---------- Buttons: primary (Next / Send), secondary (Back); one height, one line ---------- */
.xf2 .xf-actions .xf-btn, .xf2 .xf-actions button[id^="submit_btn"] {
    min-height: 48px; height: auto; padding: 10px 22px !important; font-size: 16px !important; font-weight: 600; line-height: 1.25;
    border-width: 2px !important; border-style: solid !important; white-space: nowrap; letter-spacing: 0; text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.xf2 .xf-actions .xf-btn .fa { font-size: 14px; line-height: 1; }
/* The main action keeps one width from step to step, so Next and Send stand in the same place. */
.xf2 .xf-actions .xf-btn-next, .xf2 .xf-actions button[id^="submit_btn"] { min-width: 168px; }
.xf2 .xf-btn-primary:hover, .xf2 .xf-actions button[id^="submit_btn"]:hover:not([disabled]) {
    filter: none; background: color-mix(in srgb, var(--xf-accent) 86%, #000) !important; border-color: color-mix(in srgb, var(--xf-accent) 86%, #000) !important;
}
.xf2 .xf-actions .xf-btn-back {
    background: var(--xf-bg) !important; color: var(--xf-text) !important; border-color: color-mix(in srgb, var(--xf-text) 28%, var(--xf-bg)) !important;
}
.xf2 .xf-actions .xf-btn-back:hover { border-color: var(--xf-accent) !important; color: var(--xf-accent) !important; background: var(--xf-tint) !important; }
.xf2 .xf-actions .xf-btn:focus-visible, .xf2 .xf-actions button[id^="submit_btn"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--xf-accent) 45%, var(--xf-bg)) !important; outline-offset: 2px;
}
.xf2 .xf-actions .xf-btn:active, .xf2 .xf-actions button[id^="submit_btn"]:active { transform: none; }
/* Tertiary: "Save and continue later" is a quiet text link, the same accent as every link of the form. */
.xf2 .xf-actions__tools .xfd-link { color: var(--xf-accent); text-underline-offset: 3px; }
.xf2 .xf-actions__tools .xfd-link:hover { text-decoration-thickness: 2px; }
/* Where you are, in the middle of the bar: muted, so the two buttons lead. */
.xf2 .xf-actions__count { font-size: 14px; color: var(--xf-muted); }
.xf2 .xf-actions__count b { color: var(--xf-text); font-weight: 600; }
@media (max-width: 767.98px) {
    /* Phones: Back is a square icon button of the same height; Next / Send takes the rest of the bar. */
    .xf2 .xf-actions .xf-btn-back { flex: 0 0 52px; width: 52px; padding: 0 !important; }
    .xf2 .xf-actions .xf-btn-next, .xf2 .xf-actions button[id^="submit_btn"] { min-width: 0; }
    .xf2 .xf-actions { gap: 10px; }
}

/* ---------- Plain lists (selects) ---------- */
/* The chevron is the list's background image at its end: the text stops 40 px before it. xFormUI.css gave every field
   inside an xFORM input group (most lists) 12 px of padding at both ends with a stronger selector than its own list
   rule, so a long choice ran under the chevron ("MY COURSE FINDER (GLOBAL COUNS..."). Date parts and the phone code
   list keep their own compact padding. */
.xf2 .input-group-sm > select:is(.form-select, .form-control):not(.custom_date_select_elem):not(.xf-dial),
.xf2 select:is(.form-select, .form-control):not(.custom_date_select_elem):not(.xf-dial) {
    padding-inline-end: 40px !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%;
}
/* A list inside a right-to-left block (a translated page part) keeps its chevron at its own end. */
.xf2 [dir="rtl"] select:is(.form-select, .form-control):not(.custom_date_select_elem) { background-position: left 12px center !important; }
/* The searchable list (core awz-select): its value ends with an ellipsis before the chevron, never under it. */
.xf2 .awz-select__control:not(.custom_date_select_elem) { padding-inline-end: 40px !important; }
.xf2 .awz-select__value, .xf2 .awz-select__placeholder { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- The closing block of an application: the agent chooser ---------- */
/* A card like the sections above it (same edge, border and gap), its question at reading size and its list half the
   card wide on a wide screen, the full width on a phone. */
.xf2 .xf-canvas .xf-last-extra { margin: 0 0 var(--xf-section-gap); }
.xf2 .xf-canvas .xf-last-extra > .margin-top10, .xf2 .xf-last-extra .text-center { text-align: start !important; }
.xf2 .card.xf-agent { margin: 0 !important; }
.xf2:not(:has(.xf-canvas)) .card.xf-agent { margin: var(--xf-gap) var(--xf-pad) 0 !important; }
.xf2 .card.xf-agent > .card-body { padding: var(--xf-card-pad) !important; }
.xf2 .xf-agent .row { margin: 0; }
.xf2 .xf-agent .row > [class*="col"] { padding-inline: 0; }
.xf2 .xf-agent label.font14px { display: block !important; margin: 0 0 8px !important; padding: 0 !important; font-size: 16px !important; font-weight: 600; opacity: 1 !important; }
.xf2 .xf-agent .mobile_cp_element { margin: 0 !important; }
.xf2 .xf-agent .mobile_cp_element > [class*="col"] { padding: 0 !important; }
.xf2 .xf-agent select { width: 100% !important; }
/* One agent: the authorisation tick and its sentence on one line, the sentence wrapping beside the tick. */
.xf2 .xf-agent > .card-body:has(> input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 12px; }
.xf2 .xf-agent > .card-body > input[type="checkbox"] { flex: 0 0 auto; margin: 3px 0 0 !important; }
.xf2 .xf-agent > .card-body > label { flex: 1 1 0; min-width: 0; margin: 0 !important; padding: 0 !important; font-size: 16px !important; line-height: 1.5; opacity: 1 !important; }