/* CF7 Multi Upload — frontend styles */

/* ---- Widget (shared border wrapping dropzone + file list) ---- */

.cf7mu-widget {
	border: 1.5px solid #d1d5db;
	border-radius: 8px;
	overflow: hidden;
	background: #ffffff;
}

/* ---- Dropzone ---- */

.cf7mu-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px 24px;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.15s ease;
	/* Reset label defaults */
	font-weight: inherit;
	color: inherit;
}

.cf7mu-dropzone:hover,
.cf7mu-widget.is-drag-over .cf7mu-dropzone {
	background-color: #f9fafb;
}

.cf7mu-dropzone__icon {
	display: block;
	color: #6b7280;
	line-height: 1;
}

.cf7mu-dropzone__label {
	display: block;
	color: #4b5563;
	font-size: 0.9375em;
}

/* Visually hidden native input — kept reachable via <label for="…">.
   Off-screen placement avoids browser quirks that can suppress the file
   picker when clip/overflow tricks are used on a file input. */
.cf7mu-input {
	position: absolute;
	left: -9999px;
	opacity: 0;
}

/* ---- File list ---- */

.cf7mu-file-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cf7mu-file-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-top: 1px solid #e5e7eb;
	font-size: 0.9em;
}

.cf7mu-file-list li.cf7mu-error {
	color: #cc0000;
}

.cf7mu-file-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #111827;
}

.cf7mu-file-size {
	flex: 0 0 auto;
	color: #6b7280;
}

/* Trash icon button */
.cf7mu-remove {
	flex: 0 0 auto;
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	line-height: 1;
	color: #9ca3af;
	transition: color 0.15s;
}

.cf7mu-remove:hover,
.cf7mu-remove:focus {
	color: #cc0000;
}

.cf7mu-remove svg {
	display: block;
}