/*
 * The public web form - the page a member of the public actually fills in.
 *
 * WHO THIS IS FOR, because it drives every choice below. This page is not part of the Loandisk admin
 * and is never seen inside it: it is embedded in an iframe on the TENANT'S OWN WEBSITE, next to their
 * branding, in front of somebody who has never heard of us. So it is deliberately NOT styled to match
 * the admin - a visitor filling in a loan enquiry on a lender's site should see a clean, ordinary,
 * trustworthy form, not somebody else's product. Neutral greys with a dark, near-black primary button
 * sit comfortably beside almost any site's colours; a strong brand colour of ours would fight them.
 *
 * Loaded on top of Bootstrap 4 and Form.io's own stylesheet, so it only changes what needs changing.
 * Everything is scoped under #formio or to Form.io's own classes.
 *
 * ONE ACCENT, used sparingly: the teal only ever marks progress and keyboard focus. Everything else
 * is greyscale, which is what lets it sit on someone else's page without clashing.
 *
 * Colours are kept above the rules they are used in so the palette can be seen at a glance - and so
 * a future per-tenant brand colour has one obvious place to be injected.
 */

:root {
    --ld-ink:          #1f2a27;   /* body text and the primary button */
    --ld-ink-soft:     #4a5854;   /* labels */
    --ld-muted:        #6b7a75;   /* hints, help text */
    --ld-rule:         #d5dedb;   /* borders */
    --ld-rule-strong:  #aab8b3;   /* hovered borders */
    --ld-field-bg:     #ffffff;
    --ld-accent:       #0e6b59;   /* progress + focus ONLY */
    --ld-accent-soft:  #e2f0ec;
    --ld-error:        #8f3529;
    --ld-error-soft:   #f8e8e5;
    --ld-error-rule:   #d9a79f;
}

/* ---------------------------------------------------------------------------------------------
   Measure and rhythm.

   The form had no maximum width at all, so inside a wide embed it stretched the full width of the
   page - a single-line answer box a thousand pixels across, with its label stranded at the far left.
   Long lines are genuinely harder to read and a wide box invites people to expect a long answer.
   --------------------------------------------------------------------------------------------- */

#formio {
    max-width: 40rem;
    margin: 0 auto;
    color: var(--ld-ink);
}

#formio .formio-component {
    margin-bottom: 1.15rem;
}

/* ---------------------------------------------------------------------------------------------
   Labels and help text
   --------------------------------------------------------------------------------------------- */

#formio label.col-form-label,
#formio .col-form-label {
    color: var(--ld-ink-soft);
    font-weight: 600;
    font-size: .95rem;
    padding-bottom: .3rem;
    line-height: 1.35;
}

/* Form.io marks a required question with an asterisk. Made deliberate rather than incidental, and
   given a title so it is not a mystery symbol to anyone who has not met the convention. */
#formio .field-required:after,
#formio label.field-required:after {
    color: var(--ld-error);
    font-weight: 700;
}

#formio .form-text,
#formio .text-muted {
    color: var(--ld-muted) !important;
    font-size: .85rem;
}

/* ---------------------------------------------------------------------------------------------
   Answer boxes.

   Taller than Bootstrap 4's default. 36px is a small target on a phone, where most of these forms
   are filled in; 44px is the size a fingertip reliably hits.
   --------------------------------------------------------------------------------------------- */

#formio .form-control,
#formio .choices__inner,
#formio select.form-control {
    min-height: 44px;
    padding: .55rem .75rem;
    font-size: 1rem;
    color: var(--ld-ink);
    background-color: var(--ld-field-bg);
    border: 1px solid var(--ld-rule);
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

#formio textarea.form-control {
    min-height: 96px;
}

#formio .form-control:hover {
    border-color: var(--ld-rule-strong);
}

/* A VISIBLE focus ring. Bootstrap 4's default is a soft blue glow that is easy to lose; somebody
   navigating by keyboard has to be able to see where they are without hunting for it. */
#formio .form-control:focus,
#formio .choices__inner:focus-within {
    border-color: var(--ld-accent);
    box-shadow: 0 0 0 3px var(--ld-accent-soft);
    outline: none;
}

#formio .form-control::placeholder {
    color: #9aa8a3;
}

/* Tick boxes and radios, which are hit with a finger as often as a mouse. */
#formio .form-check {
    padding: .2rem 0 .2rem 1.6rem;
}

#formio .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .2rem;
}

#formio .form-check-label {
    font-weight: 400;
    color: var(--ld-ink);
}

/* ---------------------------------------------------------------------------------------------
   The step indicator.

   Form.io renders the steps as a Bootstrap pagination widget - a row of blue page-number buttons,
   which reads as "pick a page" rather than "here is how far through you are". Rebuilt as a numbered
   progress trail: each step is numbered, the one you are on is filled in, and a line joins them so
   the whole thing reads as a journey with a visible end.

   The numbers come from a CSS counter rather than from markup, so nothing in the page has to change
   and a form with any number of steps is numbered correctly.
   --------------------------------------------------------------------------------------------- */

#formio .pagination {
    counter-reset: ld-step;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 0;
    align-items: flex-start;
    margin: 0 0 1.6rem;
    padding: 0;
    border: 0;
    background: none;
}

#formio .pagination .page-item {
    counter-increment: ld-step;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    list-style: none;
}

/* The joining line, drawn behind the numbers. Not drawn before the first step. */
#formio .pagination .page-item + .page-item:before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--ld-rule);
    z-index: 0;
}

#formio .pagination .page-item .page-link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: 0 .3rem;
    border: 0;
    background: none;
    color: var(--ld-muted);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    box-shadow: none;
}

/* The numbered disc. */
#formio .pagination .page-item .page-link:before {
    content: counter(ld-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--ld-rule);
    color: var(--ld-muted);
    font-size: .85rem;
    font-weight: 700;
}

#formio .pagination .page-item.active .page-link {
    color: var(--ld-ink);
}

#formio .pagination .page-item.active .page-link:before {
    background: var(--ld-accent);
    border-color: var(--ld-accent);
    color: #ffffff;
}

#formio .pagination .page-item .page-link:focus-visible:before {
    box-shadow: 0 0 0 3px var(--ld-accent-soft);
    outline: none;
}

/* ---------------------------------------------------------------------------------------------
   Buttons.

   Near-black rather than a colour of ours, so the form does not argue with whatever palette the
   site around it uses. Back is quiet; the action that moves you forward is the loud one.
   --------------------------------------------------------------------------------------------- */

#formio .btn {
    min-height: 44px;
    padding: .6rem 1.35rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease;
}

#formio .btn-primary,
#formio .btn-wizard-nav-next,
#formio .btn-wizard-nav-submit,
#formio .btn.btn-outline-primary[name$="submit"] {
    background-color: var(--ld-ink);
    border-color: var(--ld-ink);
    color: #ffffff;
}

#formio .btn-primary:hover,
#formio .btn-wizard-nav-next:hover,
#formio .btn-wizard-nav-submit:hover {
    background-color: #0f1815;
    border-color: #0f1815;
    color: #ffffff;
}

#formio .btn-wizard-nav-previous,
#formio .btn-secondary {
    background-color: #ffffff;
    border: 1px solid var(--ld-rule);
    color: var(--ld-ink-soft);
}

#formio .btn-wizard-nav-previous:hover,
#formio .btn-secondary:hover {
    background-color: #f2f5f4;
    border-color: var(--ld-rule-strong);
    color: var(--ld-ink);
}

#formio .btn:focus-visible {
    box-shadow: 0 0 0 3px var(--ld-accent-soft);
    outline: none;
}

/* The single-page form's Submit button spans the full width; the stepped form's nav row does not,
   and its buttons should sit at opposite ends - back on the left, forward on the right. */
#formio .formio-wizard-nav-container,
#formio ul.list-inline.formio-wizard-nav-container {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.4rem;
    padding: 0;
    list-style: none;
}

#formio .formio-wizard-nav-container li {
    list-style: none;
    margin: 0;
}

/* Back sits at the far left, forward at the far right, so the two are not a pair of similar buttons
   side by side that people click by accident.

   Written as "first of several" rather than with :has(), which older Safari and Firefox do not
   understand - and this page is opened in whatever browser a member of the public happens to have.
   It works because Back, when it exists at all, is always the first button in the row: on the first
   page there is only one button, which is therefore also the last, so it is left alone and stays on
   the right where it belongs. */
#formio .formio-wizard-nav-container li:first-child:not(:last-child) {
    margin-right: auto;
}

/* ---------------------------------------------------------------------------------------------
   When something is wrong.

   Pale background with dark text and a bar down the side - never a solid red block, which is hard
   to read and reads as far more alarming than "you missed a box".
   --------------------------------------------------------------------------------------------- */

#formio .formio-errors .form-text.error,
#formio .invalid-feedback,
#formio .error {
    color: var(--ld-error);
    font-size: .85rem;
    font-weight: 600;
}

#formio .form-control.is-invalid,
#formio .formio-error-wrapper .form-control {
    border-color: var(--ld-error-rule);
}

#formio .formio-error-wrapper,
#formio .has-error {
    background-color: var(--ld-error-soft);
    border-left: 3px solid var(--ld-error);
    border-radius: 3px;
    padding: .6rem .75rem;
}

#formio .alert-danger {
    background-color: var(--ld-error-soft) !important;
    color: var(--ld-error) !important;
    border: 1px solid var(--ld-error-rule);
    border-left: 4px solid var(--ld-error);
}

/* ---------------------------------------------------------------------------------------------
   Attaching a file
   --------------------------------------------------------------------------------------------- */

#formio .fileSelector {
    border: 2px dashed var(--ld-rule);
    border-radius: 5px;
    padding: 1.1rem;
    background: #fafcfb;
    color: var(--ld-muted);
}

#formio .fileSelector:hover {
    border-color: var(--ld-accent);
    background: var(--ld-accent-soft);
}

#formio .fileSelector a {
    color: var(--ld-accent);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
   Narrow screens.

   Most of these forms are filled in on a phone. Below 30rem the step labels are dropped and only
   the numbered discs remain: four wrapped words per step turns the indicator into a paragraph.
   --------------------------------------------------------------------------------------------- */

@media (max-width: 30rem) {
    #formio .pagination .page-item .page-link {
        font-size: 0;          /* hides the label text, keeps it for screen readers */
        gap: 0;
    }

    #formio .pagination .page-item .page-link:before {
        font-size: .85rem;     /* the number itself must stay readable */
    }

    #formio .formio-wizard-nav-container {
        flex-wrap: wrap;
    }

    #formio .formio-wizard-nav-container .btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------------------------
   The reCAPTCHA notice, and hiding the badge it replaces.

   The badge is position:fixed to the bottom-right of the window, and this form IS the window - it is
   a page inside a box - so it sat on top of the Next and Submit buttons and made them unclickable.
   Hiding it is allowed by Google's terms as long as the wording is shown instead, which is what the
   notice is. Keep the two together: remove the notice and hiding the badge stops being permitted.
   --------------------------------------------------------------------------------------------- */

.grecaptcha-badge {
    visibility: hidden;
}

.ld-recaptcha-notice {
    max-width: 40rem;
    margin: 1.1rem auto 0;
    color: var(--ld-muted);
    font-size: .75rem;
    line-height: 1.45;
    text-align: center;
}

.ld-recaptcha-notice a {
    color: var(--ld-muted);
    text-decoration: underline;
}

.ld-recaptcha-notice a:hover,
.ld-recaptcha-notice a:focus {
    color: var(--ld-ink);
}

/* Somebody who has asked their system not to animate things should not be animated at. */
@media (prefers-reduced-motion: reduce) {
    #formio .form-control,
    #formio .btn {
        transition: none;
    }
}