/* Focused visual refinement for contact methods and the attachments panel. */
#contact .wrapper > div:first-child .line:first-child > :is(p.red, p.small) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    margin: 0 0 8px !important;
    padding: 5px 12px 5px 5px !important;
    border: 1px solid #e1e3e6;
    border-radius: 10px;
    background: #f8f8f8;
    color: #687078 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

#contact .wrapper > div:first-child .line:first-child > :is(p.red, p.small)::before {
    content: "";
    box-sizing: border-box;
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid #e1e3e6;
    border-radius: 50%;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

#contact .wrapper > div:first-child .line:first-child > p.red::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9141c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

#contact .wrapper > div:first-child .line:first-child > p.small::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9141c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}

#contact .wrapper > div:first-child .line:first-child > :is(p.red, p.small) a {
    color: #20262c !important;
    font-weight: 500;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

#contact .wrapper > div:first-child .line:first-child > :is(p.red, p.small) a:hover,
#contact .wrapper > div:first-child .line:first-child > :is(p.red, p.small) a:focus-visible {
    color: #bd151b !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}


@media (min-width: 768px) {
    #formContact .contact-attachments {
        box-sizing: border-box;
        width: 100% !important;
        margin: 12px 0 !important;
        padding: 14px 18px !important;
        border: 1px solid #d0d0d4 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
}

@media (min-width: 1601px) {
    #formContact .contact-attachments {
        width: calc(100% - 18px) !important;
        margin-right: 18px !important;
    }
}

@media (max-width: 767px) {
    #contact .wrapper > div:first-child .line:first-child > :is(p.red, p.small) {
        width: 100%;
    }

    #formContact .contact-attachments {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    #formContact #attachmentHint {
        margin-top: 8px !important;
    }
}


/* Keep the challenge and submit action together, independent of legacy form positioning. */
#formContact .contact-submit-row {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 16px;
    grid-column: 1 / -1;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 0 !important;
    padding: 0 15px 0 0 !important;
}

#formContact .contact-submit-row > .ht-turnstile {
    flex: 1 1 300px;
    width: auto !important;
    margin: 0 !important;
}

#formContact .contact-submit-row .ht-turnstile-widget,
#formContact .contact-submit-row .ht-turnstile-widget div {
    box-sizing: border-box;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* contact-form.js moves the live result beside the submit action. */
#formContact .contact-submit-row > #formStatus {
    order: -1;
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
}

#formContact .contact-submit-row > button.send {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
    position: static !important;
    inset: auto !important;
    float: none !important;
    transform: none !important;
    width: auto !important;
    max-width: 100%;
    min-height: 48px;
    height: auto !important;
    margin: 8px 0 0 auto !important;
    padding: 10px 18px !important;
}

#formContact .contact-submit-row > button.send img.send {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    width: 22px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 767px) {
    #formContact .contact-submit-row {
        padding: 0 !important;
    }
    #formContact .contact-submit-row > button.send {
        flex: 1 1 100%;
        margin: 0 !important;
    }
}

/* Compact attachment action. The description remains available to assistive technology. */
#formContact .contact-attachments {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    overflow: visible !important;
}

#formContact .contact-attachments .attachment-picker {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    max-width: 100%;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 16px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #216c8c !important;
    color: #fff !important;
    box-shadow: -4px 4px 8px rgba(0,0,0,.12);
    font: 400 18px/24px "Fira Sans", sans-serif !important;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s;
}

#formContact .contact-attachments .attachment-picker:hover,
#formContact .contact-attachments .attachment-picker:focus-within {
    background: #17536e !important;
    box-shadow: -4px 4px 10px rgba(0,0,0,.18);
}

#formContact .contact-attachments .attachment-picker:focus-within {
    outline: 2px solid #216c8c;
    outline-offset: 3px;
}

#formContact .attachment-picker > span[aria-hidden="true"] {
    display: none !important;
}

#formContact .attachment-picker::after {
    content: "";
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l10-10a4 4 0 0 1 5.7 5.7l-10 10a2 2 0 0 1-2.8-2.8l9.2-9.2'/%3E%3C/svg%3E");
    pointer-events: none;
}

#formContact .contact-attachments #attachmentHint {
    box-sizing: border-box;
    position: absolute !important;
    z-index: 40;
    right: 14px;
    bottom: calc(100% - 4px);
    width: 360px !important;
    max-width: calc(100% - 28px);
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0;
    border-radius: 6px;
    background: #263442;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    font: 400 13px/1.5 "Fira Sans", sans-serif !important;
    text-align: left !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

#formContact .attachment-picker:hover ~ #attachmentHint,
#formContact .attachment-picker:focus-within ~ #attachmentHint {
    opacity: 1;
}

#formContact .contact-attachments #attachmentList {
    margin: 8px 0 0 !important;
}

#formContact .contact-attachments #attachmentList:empty {
    display: none;
}

@media (max-width: 767px) {
    #formContact .contact-attachments {
        padding: 0 !important;
    }
    #formContact .contact-attachments .attachment-picker {
        width: 100%;
    }
    #formContact .contact-attachments #attachmentHint {
        right: 0;
        bottom: calc(100% + 8px);
        max-width: 100%;
    }
}

/* Legacy submit-button translation must not move attachment remove controls. */
#formContact #attachmentList button {
    transform: none !important;
    translate: none !important;
    inset: auto !important;
    float: none !important;
}