/* ============================================================================
   Загрузка файлов кусками — общий вид для формы заявки и карточки заказа.

   Разметку рисует общий `assets/js/upload.js`, поэтому и правила лежат одним
   файлом: две страницы, один загрузчик, один набор классов. Раньше эти правила
   жили только в `photo-order.css` — в кабинете тот файл не подключён, и блок
   приезжал бы без рамок и полосы загрузки.

   Токены свои: у формы заказа палитра `--pf-*`, у кабинета `--pc-*`, а значения
   в них одни и те же. Зависеть от того, какой из двух файлов подключён рядом,
   этот блок не должен.
   ========================================================================== */

:root {
    --pfu-accent: #1D4ED8;
    --pfu-muted: #64748B;
    --pfu-line: #E2E8F0;
    --pfu-soft: #F8FAFC;
    --pfu-err-ink: #991B1B;
}

.pf-drop {
    border: 2px dashed var(--pfu-line); border-radius: 12px; padding: 20px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--pfu-soft); transition: border-color .15s ease, background .15s ease;
}
.pf-drop.is-over { border-color: var(--pfu-accent); background: #EFF6FF; }
.pf-drop__hint { color: var(--pfu-muted); font-size: 14px; }

.pf-files { display: grid; gap: 8px; margin-top: 12px; }
.pf-file { border: 1px solid var(--pfu-line); border-radius: 10px; padding: 10px 12px; }
.pf-file.is-ok { border-color: #86EFAC; }
.pf-file.is-error { border-color: #FCA5A5; background: #FEF2F2; }
.pf-file__head { display: flex; align-items: center; gap: 10px; }
.pf-file__name { flex: 1 1 auto; font-size: 15px; word-break: break-all; }
.pf-file__size { color: var(--pfu-muted); font-size: 13px; white-space: nowrap; }
.pf-file__del {
    border: 0; background: transparent; color: var(--pfu-muted); font-size: 20px;
    line-height: 1; cursor: pointer; padding: 0 4px;
}
.pf-file__del:hover { color: #DC2626; }
.pf-file__bar { height: 4px; background: var(--pfu-line); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.pf-file__bar i { display: block; height: 100%; width: 0; background: var(--pfu-accent); transition: width .2s ease; }
.pf-file.is-ok .pf-file__bar i { background: #16A34A; }
.pf-file__note { color: var(--pfu-muted); font-size: 13px; margin-top: 6px; }
.pf-file.is-error .pf-file__note { color: var(--pfu-err-ink); }