
.ems-upload-field{display:grid;gap:8px}
.ems-upload-box{border:1px dashed var(--border,#d1d5db);border-radius:12px;padding:16px;background:var(--surface,#fff);transition:.2s}
.ems-upload-box:hover{border-color:var(--accent,#2563eb)}
.ems-upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ems-upload-input{display:none}
.ems-upload-btn{cursor:pointer}
.ems-upload-status{font-size:13px;color:var(--text-secondary,#6b7280)}
.ems-upload-preview{display:flex;align-items:center;gap:12px;margin-top:8px}
.ems-upload-preview img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--border,#d1d5db)}
.ems-upload-remove{border:0;background:transparent;color:var(--red,#dc2626);cursor:pointer}
.ems-upload-progress{height:5px;border-radius:999px;background:var(--border,#e5e7eb);overflow:hidden;margin-top:8px}
.ems-upload-progress>span{display:block;height:100%;width:0;background:var(--accent,#2563eb);transition:width .15s}

.ems-upload-field:focus,
.ems-upload-box:focus,
.ems-upload-field:focus-within .ems-upload-box {
  outline: 1px solid rgba(255,255,255,.16);
  outline-offset: 2px;
}

.ems-upload-paste-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary, #999);
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.ems-upload-paste-hint strong { color: var(--text, #fff); font-weight: 600; }


.ems-upload-box{position:relative;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}
.ems-upload-box.ems-upload-dragover{border-color:var(--text,#fff);background:rgba(255,255,255,.055);box-shadow:0 0 0 3px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.2);transform:translateY(-1px)}
.ems-upload-box.ems-upload-dragover::after{content:"Перетягніть фото сюди";position:absolute;inset:8px;border:1px dashed rgba(255,255,255,.3);border-radius:9px;display:grid;place-items:center;background:rgba(0,0,0,.22);color:var(--text,#fff);font-size:13px;font-weight:700;pointer-events:none}
.ems-upload-box.ems-upload-dragover .ems-upload-preview,.ems-upload-box.ems-upload-dragover .ems-upload-row,.ems-upload-box.ems-upload-dragover .ems-upload-paste-hint,.ems-upload-box.ems-upload-dragover .ems-upload-progress,.ems-upload-box.ems-upload-dragover .form-hint{opacity:.35}

.ems-upload-image-error{display:flex;align-items:center;justify-content:center;min-height:72px;padding:12px;color:#777;font-size:13px;}

.ems-upload-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin-top:12px;align-items:start}
.ems-upload-item{display:grid;gap:7px;min-width:0;padding:8px;border:1px solid var(--border,#d1d5db);border-radius:12px;background:rgba(255,255,255,.025)}
.ems-upload-image-link{display:block;text-decoration:none;color:inherit}
.ems-upload-image-link img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;border:1px solid var(--border,#d1d5db);background:#111}
.ems-upload-item-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.ems-upload-item-number{font-size:11px;color:var(--text-secondary,#999);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ems-upload-remove{display:inline-flex;align-items:center;justify-content:center;min-width:74px;height:32px;font-size:12px;font-weight:700;padding:0 10px;border-radius:8px;background:#252525;color:#ffffff;border:1px solid #5f5f5f;box-shadow:0 1px 0 rgba(255,255,255,.04) inset;cursor:pointer;opacity:1;visibility:visible;position:relative;z-index:2}
.ems-upload-remove:hover{background:#333333;border-color:#8a8a8a;color:#ffffff}
.ems-upload-remove:focus-visible{outline:2px solid #ffffff;outline-offset:2px}
.ems-upload-remove:disabled{opacity:.55;cursor:not-allowed}
