/*
 * The sections that work together (Forms v2 FM19 / FM20, xFormConnected.js): Travelling (who travels and each
 * traveller's details), OSHC quotes and the cost estimate. Part of the public form design system (xFormUI.css): flat,
 * border-radius 0, theme colours through the --xf-* tokens, 16 px fields, 48 px touch targets.
 */
.xtr [hidden], .xoshc [hidden], .xcost [hidden] { display: none !important; }
/* The section links (xStudyGoal.css .xsg-link) take the theme colour here too. */
.xtr, .xoshc, .xcost { --xsg-accent: var(--xf-accent, var(--color1, #0b5cad)); }

/* ---------- Travelling: one block per traveller ---------- */
.xtr .xtr-guide { margin-top: 8px; }
.xtr .xtr-people { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; }
/* Rows inside the section keep to its width (Bootstrap's negative row margins pushed phones 11 px wider). */
.xtr .row, .xoshc .row { margin-inline: 0; }
.xtr .row > [class*="col"], .xoshc .row > [class*="col"] { padding-inline: 0; }
@media (min-width: 768px) {
    .xtr .row > [class*="col-md-"]:not(.col-md-12), .xoshc .row > [class*="col-md-"]:not(.col-md-12) { padding-inline-end: 16px; }
}
.xtr .xtr-block {
    border: 1px solid var(--xf-line, #d0d4d9); border-inline-start: 4px solid var(--xf-accent, var(--color1, #0b5cad));
    padding: 4px 16px 16px; background: var(--xf-bg, #fff);
}
.xtr .xtr-person__title { font-size: 17px; font-weight: 700; margin: 12px 0 0; color: var(--xf-text, #1d2125); }
.xtr .xtr-block label.form-label { margin-top: 14px !important; }
@media (max-width: 575.98px) { .xtr .xtr-block { padding: 2px 12px 12px; } }

/* ---------- OSHC: the providers' prices as choice rows ---------- */
.xoshc .xoshc-intro, .xoshc .xoshc-note { font-size: 15px; color: var(--xf-muted, #5f6670); margin: 12px 0 0; }
.xoshc .xoshc-list { display: grid; gap: 8px; margin-top: 12px; }
.xoshc .xoshc-option {
    display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 14px; margin: 0; cursor: pointer;
    border: 1px solid var(--xf-field, #8a9099); background: var(--xf-bg, #fff); color: var(--xf-text, #1d2125); border-radius: 0;
}
.xoshc .xoshc-option:hover { background: var(--xf-tint, #f1f5fb); }
.xoshc .xoshc-option.is-picked { border: 2px solid var(--xf-accent, var(--color1, #0b5cad)); padding: 7px 13px; background: var(--xf-tint, #f1f5fb); }
.xoshc .xoshc-option input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--xf-accent, var(--color1, #0b5cad)); }
.xoshc .xoshc-option:focus-within { outline: 2px solid var(--xf-accent, var(--color1, #0b5cad)); outline-offset: 1px; }
.xoshc .xoshc-logo { width: 88px; height: 32px; object-fit: contain; background: #fff; flex: 0 0 auto; }
.xoshc .xoshc-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.xoshc .xoshc-price { margin-inline-start: auto; font-weight: 700; font-size: 16px; white-space: nowrap; }
.xoshc .xoshc-best { font-size: 13px; font-weight: 700; padding: 2px 8px; background: var(--xf-accent, var(--color1, #0b5cad)); color: var(--xf-on-accent, var(--color1_contrast, #fff)); white-space: nowrap; }
.xoshc .xoshc-attach { margin-top: 12px; }
/* The policy details: the four answers start on one line (a date box and a text box had different tops). */
.xf2 .xoshc .xoshc-yes > [class*="col-md"] { justify-content: flex-start !important; }
/* The visa section's attach link uses the section link style; its accent comes from the form. */
.xf2 .xvisa-attach { --xsg-accent: var(--xf-accent, var(--color1, #0b5cad)); }
@media (max-width: 575.98px) {
    .xoshc .xoshc-option { flex-wrap: wrap; gap: 8px 12px; }
    .xoshc .xoshc-best { order: 5; }
}

/* ---------- The cost estimate (FM20): beside the form on wide screens, folded above the Back / Next bar on phones ---- */
.xcost {
    --xc-accent: var(--xf-accent, var(--color1, #0b5cad));
    --xc-text: var(--xf-text, var(--bs-body-color, #1d2125));
    --xc-bg: var(--xf-bg, var(--bs-body-bg, #fff));
    --xc-line: var(--xf-line, color-mix(in srgb, var(--xc-text) 16%, var(--xc-bg)));
    --xc-muted: var(--xf-muted, color-mix(in srgb, var(--xc-text) 66%, var(--xc-bg)));
    --xc-soft: var(--xf-soft, color-mix(in srgb, var(--xc-text) 4%, var(--xc-bg)));
    color: var(--xc-text); font-size: 15px; line-height: 1.45;
}
/* padding 0: as a .row child it took the 12 px gutter, so the form sat 12 px right of the header above (FM25). */
.xcost-layout { display: flex; align-items: flex-start; gap: 24px; max-width: 1280px; margin-inline: auto; padding-inline: 0 !important; }
.xcost-layout > .xf2 { flex: 1 1 auto; min-width: 0; margin-inline: 0; }
.xcost--side { flex: 0 0 280px; position: sticky; top: 16px; margin-top: 24px; max-height: calc(100vh - 32px); overflow: auto; }
.xcost--inline { margin: 16px var(--xf-pad, 16px) 0; }
/* On the form's canvas (FM25) the folded estimate lines up with the section cards above it. */
.xf-canvas .xcost--inline { margin: var(--xf-section-gap, 24px) 0 0; }
.xcost__box { border: 1px solid var(--xc-line); border-top: 3px solid var(--xc-accent); background: var(--xc-bg); border-radius: 0; }
.xcost__summary {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
    padding: 12px 16px; cursor: pointer; list-style: none; min-height: 48px;
}
.xcost__summary::-webkit-details-marker { display: none; }
.xcost__summary::after { content: "\f078"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; font-size: 12px; color: var(--xc-muted); }
.xcost__box[open] > .xcost__summary::after { content: "\f077"; }
.xcost__title { font-size: 17px; font-weight: 700; }
.xcost__peek { font-weight: 600; color: var(--xc-muted); }
.xcost__box[open] .xcost__peek { display: none; }
.xcost--side .xcost__summary { cursor: default; pointer-events: none; }
.xcost--side .xcost__summary::after { display: none; }
.xcost__body { padding: 0 16px 16px; }
.xcost__basis { display: block; margin: 0 0 8px; font-weight: 600; }
.xcost__basis span { display: block; margin-bottom: 4px; }
.xcost__basis .form-select { min-height: 44px; font-size: 16px; border-radius: 0; }
.xcost .xcost__h { font-size: 14px !important; line-height: 1.4 !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .03em; color: var(--xc-muted) !important; margin: 14px 0 4px !important; }
.xcost__rows { margin: 0; }
.xcost__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--xc-line); }
.xcost__row dt { font-weight: 400; display: flex; flex-direction: column; }
.xcost__row dt small { font-size: 13px; color: var(--xc-muted); }
.xcost__row dd { margin: 0; font-weight: 600; white-space: nowrap; text-align: end; }
.xcost__none { color: var(--xc-muted); }
.xcost__total { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; padding: 8px 10px; background: var(--xc-soft); border-inline-start: 3px solid var(--xc-accent); }
.xcost__total b { white-space: nowrap; }
.xcost__src { font-size: 13px; color: var(--xc-muted); margin: 12px 0 0; }
.xcost [hidden] { display: none !important; }