/* ============================================================================
   tradeallyapplication.css
   Trade Ally Application wizard.

   Intentionally inherits the portal's existing look & feel: no new fonts and
   no new brand colors are introduced. Everything below is structural (step
   indicator, section panels, spacing). Accent colors are taken from the
   classes already used site-wide (.btn-success / .section-header palette).
   ========================================================================== */

/* ── Step indicator ──────────────────────────────────────────────────────── */

.ta2-steps {
    display: flex;
    list-style: none;
    margin: 0 0 1.5rem 0;
    padding: 0;
    counter-reset: ta2step;
    width: 100%;
    max-width: 100%;
}

    .ta2-steps li {
        flex: 1 1 0;
        min-width: 0; /* prevents overflow → left cutoff on mobile */
        position: relative;
        text-align: center;
        padding: 0 .25rem 1rem;
        counter-increment: ta2step;
        color: #6c757d; /* bootstrap text-muted */
        font-size: .875rem;
        overflow-wrap: break-word;
    }

        .ta2-steps li::before {
            content: counter(ta2step);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            line-height: 1;
            margin: 0 auto .35rem;
            border-radius: 50%;
            border: 2px solid #ced4da; /* bootstrap input border */
            background: #fff;
            font-weight: 700;
        }

        /* connector line */
        .ta2-steps li::after {
            content: "";
            position: absolute;
            top: 1rem;
            left: calc(50% + 1.15rem);
            width: calc(100% - 2.3rem);
            height: 2px;
            background: #ced4da;
        }

        .ta2-steps li:last-child::after {
            display: none;
        }

        .ta2-steps li.is-done,
        .ta2-steps li.is-current {
            color: inherit;
        }

            .ta2-steps li.is-done::before,
            .ta2-steps li.is-current::before {
                border-color: #28a745; /* matches .btn-success used site-wide */
                color: #28a745;
            }

            .ta2-steps li.is-done::before {
                background: #28a745;
                color: #fff;
                content: "\2713"; /* check mark */
            }

            .ta2-steps li.is-done::after {
                background: #28a745;
            }

        .ta2-steps li.is-current {
            font-weight: 700;
        }

/* Mobile: smaller circles, only the current step's label shown, so the
   indicator always fits the viewport without being cut off. */
@media (max-width: 575.98px) {
    .ta2-steps li {
        font-size: .75rem;
        padding: 0 .1rem .5rem;
    }

        .ta2-steps li::before {
            width: 1.5rem;
            height: 1.5rem;
            font-size: .75rem;
        }

        .ta2-steps li::after {
            top: .75rem;
            left: calc(50% + .9rem);
            width: calc(100% - 1.8rem);
        }

        .ta2-steps li .ta2-step-label {
            display: none;
        }
}

/* ── Header logo banner (Application 2 pages only) ───────────────────────────
   The shared layout leaves the navbar brand left-aligned; on small screens
   center it. This stylesheet only loads on TradeAllyApplication pages, so
   the original flow is unaffected. */
@media (max-width: 767.98px) {
    .navbar {
        justify-content: center;
    }

        .navbar .navbar-brand {
            margin-left: auto;
            margin-right: auto;
        }
}

/* ── Section panels ──────────────────────────────────────────────────────── */

.ta2-section {
    border: 1px solid rgba(0, 0, 0, .125); /* bootstrap card border */
    border-radius: .25rem;
    padding: 1.25rem 1.25rem .5rem;
    margin-bottom: 1.5rem;
    background: #fff;
}

    .ta2-section > .ta2-section-title {
        margin: -1.25rem -1.25rem 1rem;
        padding: .75rem 1.25rem;
        border-bottom: 1px solid rgba(0, 0, 0, .125);
        background: rgba(0, 0, 0, .03); /* bootstrap card-header tint */
    }

        .ta2-section > .ta2-section-title h4 {
            margin: 0;
        }

/* ── Option groups (bootstrap-multiselect dropdowns) ─────────────────────── */

.ta2-group {
    margin-bottom: 1.5rem;
}

    /* Group headings render as h4 like the section titles, but with eleven of
   them in Programs & Qualifications they read better label-sized. */
    .ta2-group h4.section-header {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: .35rem;
    }

    .ta2-group .ta2-group-select {
        max-width: 30rem;
    }

    /* the plugin replaces the select with a button + dropdown; keep it full width
   of its container and looking like a form control */
    .ta2-group .ta2-multiselect-btn {
        width: 100%;
    }

        .ta2-group .ta2-multiselect-btn > .multiselect {
            width: 100%;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            /* The button uses Bootstrap 5's .form-select, which draws the native-select
   chevron on the right edge — hide the extra .dropdown-toggle caret so only
   one arrow shows, exactly like an html <select>. */
            .ta2-group .ta2-multiselect-btn > .multiselect.dropdown-toggle::after {
                display: none;
            }

    .ta2-group .multiselect-container {
        width: 100%;
        max-height: 300px;
        overflow-y: auto;
    }

    .ta2-group .ta2-other-input {
        max-width: 22rem;
        margin-top: .35rem;
    }

/* ── Repeating blocks (licenses / references) ────────────────────────────── */

.ta2-repeat-item {
    border: 1px solid rgba(0, 0, 0, .125);
    border-left-width: 4px; /* subtle accent, inherits border color */
    border-left-color: #28a745;
    border-radius: .25rem;
    padding: 1rem 1rem .25rem;
    margin-bottom: 1rem;
}

    .ta2-repeat-item .ta2-repeat-title {
        font-weight: 700;
        margin-bottom: .75rem;
        display: flex;
        align-items: center;
    }

    /* Bin icon aligned at the top-left of removable license rows */
    .ta2-repeat-item .ta2-remove-row {
        background: none;
        border: 0;
        padding: 0;
        margin-right: .5rem;
        color: #dc3545; /* bootstrap .text-danger */
        cursor: pointer;
        line-height: 1;
    }

        .ta2-repeat-item .ta2-remove-row:hover {
            color: #a71d2a;
        }

    .ta2-repeat-item.ta2-collapsed {
        display: none;
    }

/* ── Wizard footer navigation ────────────────────────────────────────────── */

.ta2-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

    .ta2-nav .btn {
        min-width: 10rem;
    }

/* Mobile: stack the footer navigation — primary action first, then Save for
   Later, then Back — with full-width buttons so nothing overlaps or gets cut
   off. The step indicator is no longer part of this row; it renders under it. */
@media (max-width: 575.98px) {
    .ta2-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .ta2-nav .btn {
            min-width: 0;
            width: 100%;
            margin-bottom: .5rem;
            text-align: center;
        }
}

/* ── Step indicator ─────────────────────────────────────────────────────────
   "Step 3 of 5" used to sit in the middle cell of .ta2-nav, which forced the
   footer to be three cells wide and left no room for a third button. It now
   sits under the row on every step, so .ta2-nav holds buttons only. */
.ta2-step-indicator {
    margin: .75rem 0 0;
    text-align: center;
    color: #6c757d;
    font-size: .875rem;
}

/* ── Save for Later ─────────────────────────────────────────────────────────
   A peer of Back and the primary action: same .btn .btn-success, so it picks
   up the shared "min-width: 10rem" rule above and needs no styling of its own.
   With three equal buttons, space-between puts it in the centre. */
.ta2-nav.ta2-nav-end {
    /* Pages with a single action (Begin, Saved, ResumeInvalid) — no empty
       spacer spans needed to push the button right. */
    justify-content: flex-end;
}

/* ── Save for Later modal ───────────────────────────────────────────────────
   tradeallyapplication.site.css carries three Bootstrap 4-era modal rules that misrender a
   Bootstrap 5 modal. They are left in place for the legacy #myModal1 markup
   and neutralised here, scoped to this modal only:

     1. ".modal { background: rgba(0,0,0,.7) }" — BS5 renders its own
        .modal-backdrop element, so a background on .modal itself dims the page
        twice and the overlay comes out near-black.
     2. "body.modal-open .modal[style]... { display: flex !important; height:
        100% }" — BS5 sets display:block and centres via .modal-dialog-centered;
        forcing flex fights its layout and the !important means only an equally
        specific rule can undo it.
     3. ".modal-dialog { background-color: #fff }" — paints white behind the
        dialog, so .modal-content's rounded corners show white square corners.
*/
#ta2-prompt-modal {
    background: transparent;
}

body.modal-open #ta2-prompt-modal[style]:not([style='display: none;']) {
    /* display:block is what BS5 expects; the height:100% from the original
       rule is kept, because .modal-dialog-centered centres against the
       modal's full-viewport box and collapses to the top without it. */
    display: block !important;
    height: 100%;
}

    body.modal-open #ta2-prompt-modal[style]:not([style='display: none;']) .modal-dialog {
        background-color: transparent;
    }

#ta2-prompt-modal .modal-dialog {
    background-color: transparent;
    /* the site stylesheet's "margin: auto" resolves to 0 top and bottom in the modal's
       block box, which lifts the dialog against the top of the viewport.
       These are Bootstrap 5's own values, restored. */
    margin: .5rem auto;
}

@media (min-width: 576px) {
    #ta2-prompt-modal .modal-dialog {
        margin: 1.75rem auto;
    }
}

/* The form wraps .modal-body, so .modal-content's flex column sees the form
   rather than the body. Without this the body will not grow or scroll and a
   long validation message can overflow the dialog. */
#ta2-prompt-modal .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#ta2-prompt-modal .modal-body {
    overflow-y: auto;
}

#ta2-prompt-modal .ta2-sfl-appnumber {
    font-size: .875rem;
    color: #6c757d;
}

/* Keeps the dialog from jumping when a validation message appears and
   disappears between submits. */
#ta2-prompt-modal .ta2-sfl-messages:empty {
    display: none;
}

#ta2-prompt-modal .ta2-sfl-loading {
    color: #6c757d;
}

/* Same convention as the documents step: dim and lock the form while a
   request is in flight. */
#ta2-prompt-modal form.ta2-busy {
    opacity: .6;
    pointer-events: none;
}

/* The Send button sits in an .input-group with the email field. Bootstrap
   rounds only the outer corners of a group, but jquery.validate's
   input-validation-error border would otherwise square off the joint. */
#ta2-prompt-modal .input-group .form-control.input-validation-error {
    border-color: #dc3545;
    z-index: 3;
}

#ta2-prompt-modal .input-group .btn {
    /* Do not inherit the 10rem floor the footer buttons use — inside an input
       group that would push the email field to an unusable width. */
    min-width: 0;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* .ta2-nav stacks and every .btn goes full width; the Save for Later
       button is one of the three and stacks with them. Order after
       column-reverse: primary action, Save for Later, Back. */
    .ta2-step-indicator {
        margin-top: .25rem;
    }

    /* Stack the field above the button rather than squeezing both onto one
       line, where the email input ends up around 40% of a phone screen. */
    #ta2-prompt-modal .input-group {
        flex-direction: column;
        align-items: stretch;
    }

        #ta2-prompt-modal .input-group > .form-control,
        #ta2-prompt-modal .input-group > .btn {
            width: 100%;
            border-radius: .375rem;
        }

        #ta2-prompt-modal .input-group > .btn {
            margin-top: .5rem;
        }
}

/* ── Read-only fields ───────────────────────────────────────────────────────
   Bootstrap 4 greyed .form-control[readonly]; Bootstrap 5 greys only
   :disabled, so a read-only input looks editable and invites a click that
   does nothing. A disabled input would look right but post nothing, so the
   styling is restored here instead. */
.form-control.ta2-readonly {
    background-color: #e9ecef;
    opacity: 1;
    cursor: default;
}

    .form-control.ta2-readonly:focus {
        /* No focus ring: the field is skipped in the tab order and cannot be
           edited, so a ring would suggest otherwise. */
        border-color: #ced4da;
        box-shadow: none;
    }

/* ── Resume verification code ───────────────────────────────────────────────
   Wide, spaced digits so a 6-digit code copied from an email is easy to check
   before submitting. */
.ta2-otp-code {
    letter-spacing: .35em;
    font-size: 1.15rem;
    text-align: center;
}

.ta2-resend {
    padding: 0;
    font-size: .875rem;
}

/* ── Native <select> arrow ─────────────────────────────────────────────────
   Bootstrap 5 sets `appearance:none` on .form-control, which strips the
   browser's ▼ from any <select class="form-control">. Selects should use
   .form-select (which draws its own arrow); this is a safety net for any
   select that still ends up with .form-control. */
select.form-control:not(.ta2-multiselect) {
    background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}