/* hide the real input off-screen */
.custom-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* style your label like a button */
.custom-upload-btn {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #444;
  color: white;
  font-family: inherit;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  user-select: none;
  transition: background-color 0.2s ease, filter 0.2s ease;
}

/* default hover/focus for non-light buttons */
.custom-upload-btn:not(.light):hover {
  background-color: #666;
}
.custom-upload-btn:not(.light):focus {
  outline: 2px solid #08f;
  outline-offset: 2px;
}

/* “light” variant background */
.custom-upload-btn.light {
  background-color: #34a3dc;
  color: #fff;
}

/* hover/focus for “light” variant */
.custom-upload-btn.light:hover {
  filter: brightness(1.1);
}
.custom-upload-btn.light:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* container holds button + list side by side */
.file-upload-wrapper {
  display: inline-flex;       /* lay out children in a row */
  align-items: center;        /* vertical-center them */
  gap: 0.75em;                /* space between button and list */
  margin-bottom: 1em;         /* if you want a bit of breathing room below */
}

/* style the list of file names */
.file-list {
  font-size: 0.9rem;
  color: #333;
  font-style: italic;
  white-space: pre-wrap;
}

.friend-file-upload {
  margin-top: 1.5em;      /* space above */
  text-align: left;       /* left-align the list under the button */
}

#attachments-list-friends {
    color: #fff;
    display: block;
}