/* Accessible custom file-picker UI — scoped by data-drupal-selector to
   exactly one element (zdjecie_inspiracji on the zapytanie_o_wycene
   webform). Never restyles any other file input.

   The real <input type="file"> stays in the DOM and fully functional
   (keyboard, mobile camera picker) — it is made visually-hidden with
   the standard "clip" technique (not display:none, which would remove
   it from the tab order and break keyboard/screen-reader access), and
   a second <label for="..."> (added by file-upload.js) acts as the
   visible styled button. Clicking a <label for> natively opens the
   file picker with no JS required for that part. */
input[data-drupal-selector="edit-zdjecie-inspiracji-upload"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.flaga-file-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.flaga-file-picker__label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.flaga-file-picker__filename {
  font-size: 0.85rem;
  color: var(--fd-muted);
}

/* Visible focus ring on the styled button when the real (hidden) input
   receives keyboard focus — keeps focus visibly on the control a
   keyboard/screen-reader user actually tabs to. */
input[data-drupal-selector="edit-zdjecie-inspiracji-upload"]:focus-visible
  + .flaga-file-picker
  .flaga-file-picker__label {
  outline: 2px solid var(--fd-gold, #b8935a);
  outline-offset: 2px;
}