/*!
 * file-upload.css — оформление расширенной загрузки файлов под тему Duralux (seelinks)
 * Подключается только на страницах с полем type:file (template-3).
 */

/* ---- Поле: единый блок ---- */
[data-field-type="file"] {
  --sl-radius: 8px;
  --sl-border: #e3e6ef;
  --sl-border-hover: #6c5ce7;
  --sl-muted: #7a829a;
  --sl-bg-soft: #f7f8fc;
}

/* FilePond под Duralux */
[data-field-type="file"] .filepond--root {
  margin-bottom: 0.5rem;
  font-family: inherit;
}
[data-field-type="file"] .filepond--panel-root {
  background-color: var(--sl-bg-soft);
  border: 1.5px dashed var(--sl-border);
  border-radius: var(--sl-radius);
  transition: border-color .15s ease, background-color .15s ease;
}
[data-field-type="file"] .filepond--root:hover .filepond--panel-root,
[data-field-type="file"] .filepond--root.filepond--hopper .filepond--panel-root {
  border-color: var(--sl-border-hover);
}
[data-field-type="file"] .filepond--drop-label {
  color: var(--sl-muted);
  min-height: 6rem;
}
[data-field-type="file"] .filepond--drop-label svg {
  opacity: .6;
}
[data-field-type="file"] .filepond--item-panel {
  background-color: #fff;
  border-radius: var(--sl-radius);
}
[data-field-type="file"] .filepond--file {
  border-radius: var(--sl-radius);
}
[data-field-type="file"] .filepond--file-info-main {
  font-weight: 500;
}
[data-field-type="file"] .filepond--file-action-button {
  border-radius: 50%;
}

/* ---- Подсказка (форматы/кол-во/размер) ---- */
[data-field-type="file"] .sl-upload-hint {
  margin: -.1rem 0 .5rem;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--sl-muted);
}
/* Когда подпись перенесена внутрь блока FilePond (в labelIdle) */
[data-field-type="file"] .filepond--drop-label .sl-upload-hint {
  display: block;
  margin: .35em 0 0;
  font-size: .8em;
  font-weight: 400;
  text-decoration: none;
  color: var(--sl-muted);
  white-space: normal;
}

/* ---- URL-строка ---- */
[data-field-type="file"] .sl-url-row {
  margin-top: .25rem;
}
[data-field-type="file"] .sl-url-row .input-group-text {
  background-color: var(--sl-bg-soft);
  border-color: var(--sl-border);
  color: var(--sl-muted);
}
[data-field-type="file"] .sl-url-row .form-control {
  border-color: var(--sl-border);
}
[data-field-type="file"] .sl-url-row .form-control:focus {
  border-color: var(--sl-border-hover);
  box-shadow: 0 0 0 .15rem rgba(108, 92, 231, .15);
}
[data-field-type="file"] .sl-url-add {
  white-space: nowrap;
}

/* ---- Полоса превью ---- */
[data-field-type="file"] .sl-preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
}
[data-field-type="file"] .sl-preview-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  max-width: 340px;
  padding: .5rem .6rem;
  background: #fff;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  box-shadow: 0 1px 2px rgba(20, 24, 40, .04);
}
[data-field-type="file"] .sl-preview-media {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--sl-bg-soft);
  border-radius: calc(var(--sl-radius) - 2px);
}
[data-field-type="file"] .sl-preview-media img,
[data-field-type="file"] .sl-preview-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-field-type="file"] .sl-preview-media audio {
  width: 100%;
}
[data-field-type="file"] .sl-preview-item.sl-preview-audio {
  max-width: 100%;
}
[data-field-type="file"] .sl-preview-item.sl-preview-audio .sl-preview-media {
  width: 100%;
  height: auto;
}
[data-field-type="file"] .sl-file-icon {
  font-size: 1.4rem;
  color: var(--sl-muted);
}
[data-field-type="file"] .sl-preview-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
[data-field-type="file"] .sl-preview-name {
  font-size: .8rem;
  font-weight: 500;
  color: #2b2f3a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-field-type="file"] .sl-preview-size {
  font-size: .7rem;
  color: var(--sl-muted);
}
[data-field-type="file"] .sl-preview-remove {
  flex: 0 0 auto;
  border-radius: 50%;
  line-height: 1;
}
[data-field-type="file"] .sl-preview-media img {
  background: repeating-conic-gradient(#f0f1f6 0% 25%, #fff 0% 50%) 50% / 12px 12px;
}
[data-field-type="file"] .sl-preview-error::after {
  content: "\f127";
  font-family: FontAwesome;
  color: var(--sl-muted);
}

@media (max-width: 575.98px) {
  [data-field-type="file"] .sl-preview-item { max-width: 100%; }
}