/* "Attach your program" + "Privacy policy" row of the quote forms. It replaces
   the old consent checkbox.

   Two layouts:
   - row (legacy hero form on desktop): link, hint and privacy link on one
     line; privacy centred under the 175px GET A QUOTE button.
   - stacked (every phone, and forms marked .lead-foot--stack at any width):
     line 1 pairs "Attach your program" with "Privacy policy", the hint sits
     under the label, aligned with its first letter.

   .lead-attach dissolves (display: contents) so the picker's parts and the
   privacy link share one wrapping flex row. That lets the list of picked files
   run the full width of the form and wrap only when the row is full.

   Buttons and links carry explicit sizes and !important resets: the legacy CSS
   gives every button 180x25px and #topform turns hero links into big green
   arrow buttons; the newer pages style their own form buttons too. */

.lead-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

/* Legacy forms set .form-content > div to inline-block on phones. */
.skyform .form-content > .lead-foot {
    display: flex;
    margin-bottom: 0;
}

.lead-attach {
    display: contents;
}

/* The label (not the icon) gives the button its baseline; the clip centres on it. */
.lead-foot .lead-attach-btn {
    order: 1;
    display: inline-flex !important;
    align-items: baseline;
    gap: 6px;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #117C9C !important;
    font-family: inherit;
    font-size: 15px !important;
    font-weight: bold !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    cursor: pointer;
}

.lead-foot .lead-attach-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    align-self: center;
}

.lead-foot .lead-attach-btn:hover span,
.lead-foot .lead-attach-btn:focus-visible span {
    text-decoration: underline;
}

.lead-foot .lead-attach-btn:focus-visible,
.lead-foot .lead-attach-remove:focus-visible {
    outline: 2px solid #117C9C;
    outline-offset: 2px;
}

.lead-foot .lead-attach-hint {
    order: 2;
    color: #999;
    font-size: 11px;
    white-space: nowrap;
}

/* Only as wide as the link itself and pushed in from the right, so it stays
   centred under the 175px GET A QUOTE button: 36px + 104px / 2 = 88px. */
.lead-foot a.lead-privacy {
    order: 3;
    flex: 0 0 104px;
    display: block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 36px 0 auto !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: none !important;
    color: #117C9C !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    text-align: center;
    text-decoration: underline !important;
    text-transform: none !important;
}

.lead-foot a.lead-privacy:hover {
    color: #0d6580 !important;
}

.lead-foot .lead-attach-list {
    order: 4;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.lead-foot .lead-attach-list[hidden] {
    display: none;
}

/* Sized to the 11px hint, so a picked file reads as a note, not a field. */
.lead-foot .lead-attach-list li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin: 0;
    padding: 0 1px 0 7px;
    border: 1px solid #D9E3E5;
    border-radius: 10px;
    background: #F1F6F7;
    color: #333;
    font-size: 11px;
    line-height: 18px;
}

.lead-foot .lead-attach-list li::before {
    content: none;
}

.lead-foot .lead-attach-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-foot .lead-attach-size {
    color: #888;
    white-space: nowrap;
}

.lead-foot .lead-attach-remove {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #6f7678 !important;
    font: 13px/16px Arial, sans-serif !important;
    cursor: pointer;
}

.lead-foot .lead-attach-remove:hover {
    background: #E1E9EB !important;
    color: #222 !important;
}

/* Clear of the file chips above it; two-line messages keep their own leading. */
.lead-foot .lead-attach-error {
    order: 5;
    flex: 1 1 100%;
    display: block;
    margin: 6px 0 0;
    color: #c0392b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

/* ---------- stacked layout ---------- */

.lead-foot--stack {
    justify-content: space-between;
    gap: 2px 10px;
    margin-top: 12px;
}

.lead-foot--stack a.lead-privacy {
    order: 2;
    flex: 0 0 auto;
    margin: 0 !important;
    text-align: right;
}

.lead-foot--stack .lead-attach-hint {
    order: 3;
    flex: 1 1 100%;
    padding-left: 24px;
    white-space: normal;
}

.lead-foot--stack .lead-attach-list {
    margin-top: 4px;
}

/* Wide stacked forms: lead-attachments.js adds .lead-foot--inline when link,
   hint and privacy link fit side by side; the hint then joins line 1. The
   tighter 8px gap (as on the legacy row) lets 475px forms like /request fit. */
.lead-foot--stack.lead-foot--inline {
    column-gap: 8px;
}

.lead-foot--stack.lead-foot--inline .lead-attach-hint {
    order: 2;
    flex: 0 0 auto;
    padding-left: 0;
    white-space: nowrap;
}

.lead-foot--stack.lead-foot--inline a.lead-privacy {
    order: 3;
    margin: 0 0 0 auto !important;
}

@media (max-width: 767px) {
    .lead-foot {
        justify-content: space-between;
        gap: 2px 10px;
    }

    .lead-foot a.lead-privacy {
        order: 2;
        flex: 0 0 auto;
        margin: 0 !important;
        text-align: right;
    }

    .lead-foot .lead-attach-hint {
        order: 3;
        flex: 1 1 100%;
        padding-left: 24px;
        white-space: normal;
    }

    .lead-foot .lead-attach-list {
        margin-top: 4px;
    }

    .lead-foot .lead-attach-name {
        max-width: 170px;
    }
}

/* Forms on a dark panel. */
.lead-foot--dark .lead-attach-btn,
.lead-foot--dark a.lead-privacy {
    color: #9CD65A !important;
}

.lead-foot--dark a.lead-privacy:hover {
    color: #b8e58a !important;
}

.lead-foot--dark .lead-attach-hint {
    color: rgba(255, 255, 255, 0.7);
}

.lead-foot--dark .lead-attach-error {
    color: #ff9b8f;
}