.rmff-dropzone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	padding: 16px;
	border: 2px dashed #c9ced6;
	border-radius: 8px;
	background: #fafbfc;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.rmff-dropzone:hover,
.rmff-dropzone.is-dragover {
	border-color: #2b6cb0;
	background: #f0f6ff;
}

.rmff-dropzone .rmff-file {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.rmff-cta {
	color: #5a6573;
	font-size: 14px;
	pointer-events: none;
}

.rmff-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.rmff-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 96px;
	padding: 6px;
	border: 1px solid #e2e6ec;
	border-radius: 6px;
	background: #fff;
}

.rmff-item.is-uploading {
	opacity: .6;
}

.rmff-item img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.rmff-name {
	margin-top: 4px;
	max-width: 84px;
	font-size: 11px;
	line-height: 1.2;
	color: #5a6573;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rmff-remove {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #e53e3e;
	color: #fff;
	font-size: 16px;
	line-height: 22px;
	cursor: pointer;
}

.rmff-remove:hover {
	background: #c53030;
}

.rmff-error {
	margin-top: 8px;
	color: #c53030;
	font-size: 13px;
}