.file-input { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* visually hide native input but keep it accessible */
.file-input__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* styled label that acts like a button */
.file-input__label { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: #fff; border: 1px solid #666; border-radius: 4px; cursor: pointer; color: #000; font-size: 0.95rem; user-select: none; box-shadow: 0 0 0 0 rgba(0,0,0,0); transition: all .12s ease-in-out; }

    .file-input__label:focus,
    .file-input__label:hover { border-color: #333; box-shadow: 0 0 0 3px rgba(51,51,51,.08); outline: none; }

/* text showing chosen files */
.file-input__file-names { font-size: 0.9rem; color: #333; margin-left: .5rem; max-width: 45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* small screens: wrap neatly */
@media (max-width: 520px) {
    .file-input { flex-direction: column; align-items: stretch; }
    .file-input__file-names { max-width: 100%; white-space: normal; }
}