<label class="radikalwp-form-dropzone" data-dropzone><input type="file" hidden><span class="radikalwp-form-dropzone-icon">⬆️<//span><strong class="radikalwp-form-dropzone-title">فایل را اینجا رها کنید<//strong><span class="radikalwp-form-dropzone-hint">یا کلیک کنید تا انتخاب شود — حداکثر ۵ مگابایت<//span><//label>

.radikalwp-form-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 380px;
  padding: 34px 24px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.radikalwp-form-dropzone:hover { border-color: #94a3b8; }
.radikalwp-form-dropzone.is-over {
  border-color: #6366f1;
  background: #eef2ff;
  transform: scale(1.015);
}
.radikalwp-form-dropzone-icon { font-size: 30px; margin-bottom: 4px; }
.radikalwp-form-dropzone-title { font-size: 14px; color: #334155; }
.radikalwp-form-dropzone-hint { font-size: 11.5px; color: #94a3b8; }
.radikalwp-form-dropzone[data-file] .radikalwp-form-dropzone-title { color: #4f46e5; }

// هایلایت هنگام درگ + نمایش نام فایل انتخابی
document.querySelectorAll('[data-dropzone]').forEach(function (zone) {
  var input = zone.querySelector('input[type=file]');
  var title = zone.querySelector('.radikalwp-form-dropzone-title');
  zone.addEventListener('dragover', function (e) { e.preventDefault(); zone.classList.add('is-over'); });
  zone.addEventListener('dragleave', function () { zone.classList.remove('is-over'); });
  zone.addEventListener('drop', function (e) {
    e.preventDefault();
    zone.classList.remove('is-over');
    if (e.dataTransfer.files.length) { input.files = e.dataTransfer.files; show(e.dataTransfer.files[0]); }
  });
  input.addEventListener('change', function () { if (input.files.length) show(input.files[0]); });
  function show(file) {
    zone.dataset.file = '1';
    title.textContent = 'انتخاب شد: ' + file.name;
  }
});