/* ag-upload.css — styles for the optional "Attach files" control (contact page only).
   Colours default to the Wheelbarrows theme greys; override the variables per site if needed. */
.ag-upload {
  --ag-accent: #454545;
  --ag-border: #dfdfdf;
  --ag-text: #4f4f4f;
  --ag-muted: #757575;
  --ag-error: #c62828;
  --ag-error-bg: #fdecea;
  --ag-ok: #2e7d32;
  --ag-bg: #fafafa;
  color: var(--ag-text);
}
.ag-upload [hidden] { display: none !important; }

.ag-upload__drop {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  border: 2px dashed var(--ag-border);
  border-radius: 4px;
  background: var(--ag-bg);
  transition: border-color .15s, background-color .15s;
}
.ag-upload__drop.is-dragover { border-color: var(--ag-accent); background: #f0f0f0; }

/* Visually hidden but still focusable/clickable via its <label> */
.ag-upload__input {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  border: 0;
}
.ag-upload__browse.button {
  margin: 0;
  cursor: pointer;
}
.ag-upload__input:focus + .ag-upload__browse,
.ag-upload__input:focus-visible + .ag-upload__browse { outline: 2px solid var(--ag-accent); outline-offset: 2px; }
.ag-upload__droptext { font-size: .9375rem; }

.ag-upload__hint,
.ag-upload__privacy { margin: .5rem 0 0; font-size: .8125rem; color: var(--ag-muted); }
.ag-upload__privacy a { color: inherit; text-decoration: underline; }

.ag-upload__banner {
  margin: .75rem 0 0;
  padding: .625rem .75rem;
  border-left: 4px solid var(--ag-error);
  background: var(--ag-error-bg);
  font-size: .875rem;
}

.ag-upload__list { list-style: none; margin: .75rem 0 0; padding: 0; }
.ag-upload__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "info actions" "progress progress" "status status";
  gap: .25rem .75rem;
  padding: .625rem .75rem;
  margin-bottom: .5rem;
  border: 1px solid var(--ag-border);
  border-radius: 4px;
  background: #fff;
}
.ag-upload__info { grid-area: info; min-width: 0; display: flex; gap: .5rem; align-items: baseline; }
.ag-upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ag-upload__size { flex: none; font-size: .8125rem; color: var(--ag-muted); }
.ag-upload__actions { grid-area: actions; display: flex; gap: .5rem; }
.ag-upload__actions button {
  padding: .25rem .5rem;
  border: 1px solid var(--ag-border);
  border-radius: 4px;
  background: #fff;
  color: var(--ag-text);
  font: inherit;
  font-size: .8125rem;
  line-height: 1.4;
  cursor: pointer;
}
.ag-upload__actions button:hover { border-color: var(--ag-accent); }
.ag-upload__progress {
  grid-area: progress;
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 3px;
  background: #eee;
  overflow: hidden;
}
.ag-upload__progress::-webkit-progress-bar { background: #eee; border-radius: 3px; }
.ag-upload__progress::-webkit-progress-value { background: var(--ag-accent); border-radius: 3px; }
.ag-upload__progress::-moz-progress-bar { background: var(--ag-accent); border-radius: 3px; }
.ag-upload__status { grid-area: status; font-size: .8125rem; color: var(--ag-muted); }

.ag-upload__item.is-done .ag-upload__status { color: var(--ag-ok); }
.ag-upload__item.is-done .ag-upload__progress::-webkit-progress-value { background: var(--ag-ok); }
.ag-upload__item.is-done .ag-upload__progress::-moz-progress-bar { background: var(--ag-ok); }
.ag-upload__item.is-error { border-color: var(--ag-error); }
.ag-upload__item.is-error .ag-upload__status { color: var(--ag-error); }
.ag-upload__item.is-error .ag-upload__progress { display: none; }

.ag-upload__turnstile:empty { display: none; }
.ag-upload__turnstile { margin-top: .5rem; }

@media (max-width: 480px) {
  .ag-upload__droptext { display: none; }   /* no drag-and-drop on phones */
  .ag-upload__browse.button { width: 100%; text-align: center; }
  .ag-upload__item { grid-template-areas: "info info" "progress progress" "status actions"; }
}
.ag-upload__banner a { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }