/**
 * WLB Upload Zone — shared widget styles.
 *
 * Consumed by wlb-listings and wlb-faults via the 'wlb-upload-zone' stylesheet handle.
 * Registered (not enqueued) by wlb-media.php; enqueued by each consumer as a dependency.
 *
 * @package wlb-media
 */

/* ---- Drop zone container ---- */

.wlb-upload-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 16px;
	border: 2px dashed var(--wlb-color-border, #aaa);
	cursor: pointer;
	text-align: center;
}

.wlb-upload-zone--dragover {
	border-color: var(--wlb-color-primary, #2e7d32);
	background-color: var(--wlb-color-primary-tint, #e8f5e9);
}

/* ---- Preview grid ---- */

.wlb-upload-zone__previews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 16px;
}

@media (max-width: 640px) {
	.wlb-upload-zone__previews {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- Individual preview thumbnail ---- */

.wlb-upload-preview {
	position: relative;
	width: 100%;
	height: 180px;
	overflow: hidden;
	border-radius: 6px;
	background-color: var(--wlb-surface-muted, #f4f4f4);
}

.wlb-upload-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Remove button ---- */

.wlb-upload-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background-color: var(--wlb-overlay-bg, rgba(0, 0, 0, 0.55));
	color: white;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.wlb-upload-remove:hover,
.wlb-upload-remove:focus {
	background-color: var(--wlb-overlay-bg-hover, rgba(0, 0, 0, 0.75));
	outline: 2px solid white;
	outline-offset: 2px;
}