.advads-support-wrap .advads-card {
	@apply text-sm;

	a:not(footer a, .button) {
		@apply text-gray-900 underline-offset-3 focus:shadow-none;
	}
}

a.advads-view-all-link {
	@apply no-underline text-blue-500! flex items-center gap-2 focus:shadow-none;
	@apply hover:underline hover:underline-offset-4;

	svg {
		@apply stroke-blue-500 size-4;
	}
}

.advads-file-uploader {
	.dropzone {
		@apply relative flex flex-col items-center justify-center w-full h-44 border border-dashed border-gray-500 rounded-lg cursor-pointer;

		&:hover,
		&.dragover {
			@apply border-blue-500 bg-blue-50;
		}

		&.limit-reached {
			@apply opacity-50 pointer-events-none border-gray-500;
		}

		input[type="file"] {
			@apply absolute inset-0 opacity-0 cursor-pointer w-full h-full;
		}
	}

	.upload-hints {
		@apply text-xs mt-0 mb-4 px-6 space-x-2 text-center;
	}

	.file-count-badge {
		@apply inline-block text-xs font-semibold text-blue-500 bg-blue-50 rounded-full px-2.5 py-1 my-4;

		&.at-limit {
			@apply text-orange-500 bg-orange-100;
		}
	}

	.error-box {
		@apply bg-red-50 border border-red-200 rounded-lg p-4 mb-4;

		p {
			@apply text-xs font-semibold text-red-500 m-0;
		}

		ul {
			@apply list-disc list-inside;
		}

		li {
			@apply text-xs text-red-500;
		}
	}

	.selected-files-container {
		@apply flex flex-col gap-4;
	}

	.file-item {
		@apply flex items-center gap-4 bg-gray-100 rounded-lg py-2.5 px-4 border border-gray-200;
	}

	.file-image {
		@apply size-14 rounded-md overflow-hidden flex items-center justify-center shrink-0 bg-gray-200 text-gray-400 text-lg;

		img {
			@apply w-full h-full object-cover;
		}
	}

	.file-detail {
		@apply flex-1 min-w-0;

		h6 {
			@apply text-xs font-semibold text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis m-0;
		}

		p {
			@apply text-xs text-gray-500 mt-0.5 mb-1;
		}
	}

	.file-actions {
		@apply flex gap-2 flex-wrap;
	}

	.file-action-btn {
		@apply text-xs px-3 py-1.5 rounded-md border border-gray-300 bg-white text-gray-500 cursor-pointer no-underline transition-all duration-150 inline-block;

		&:hover {
			@apply bg-red-500 text-white border-red-500;
		}
	}
}