/* Image upload with a picture of the current / chosen file — the project's
   ClearableFileInput template (templates/django/forms/widgets/clearable_file_input.html),
   filled live by static/js/image_preview.js and static/js/cropper-widget.js.
   Loaded by base.html on site pages and by CropperImageWidget's Media in the Django admin,
   so it reads every colour through a token with a plain fallback. */

.file-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0.2rem 0 0.4rem;
}

form .file-picker div { margin-bottom: 0; }

.file-picker__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 2px solid var(--line, #e3cda6);
  border-radius: 12px;
  background: var(--parch-2, #f6ecd6);
}

.file-picker__thumb.is-empty { border-style: dashed; }

.file-picker__thumb.is-empty::before {
  content: "🖼";
  font-size: 28px;
  opacity: 0.45;
}

.file-picker__thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.file-picker__thumb img[hidden] { display: none; }

.file-picker__controls {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}

.file-picker input[type="file"] {
  max-width: 100%;
  font-size: 0.85rem;
}

.file-picker input[type="file"]::file-selector-button {
  margin-right: 0.6rem;
  padding: 0.35rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: var(--wood, #b98b5e);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.file-picker input[type="file"]::file-selector-button:hover {
  background: var(--wood-dark, #8a6440);
}

.file-picker__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.file-picker__clear input { width: auto; margin: 0; }