/* Settings → Zyff Widgets. */

.zyff-widgets-admin .zyff-card {
	max-width: 760px;
	margin: 16px 0;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}

.zyff-widgets-admin .zyff-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.zyff-widgets-admin .zyff-account p {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.zyff-widgets-admin .zyff-inline-form {
	display: inline-block;
	margin: 0;
}

.zyff-widgets-admin .zyff-muted {
	color: #50575e;
}

.zyff-widgets-admin .zyff-tag {
	display: inline-block;
	margin: 4px 4px 0 0;
	padding: 0 6px;
	border-radius: 2px;
	background: #f0f0f1;
	font-size: 12px;
	line-height: 20px;
}

.zyff-widgets-admin .zyff-shortcode {
	display: flex;
	gap: 6px;
	max-width: 420px;
}

.zyff-widgets-admin .zyff-shortcode input {
	flex: 1;
	min-width: 0;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
}

.zyff-widgets-admin .zyff-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Stack the table into cards on narrow screens, like core's list tables. */
@media screen and (max-width: 782px) {
	.zyff-widgets-admin .zyff-table thead {
		display: none;
	}

	.zyff-widgets-admin .zyff-table tr,
	.zyff-widgets-admin .zyff-table td {
		display: block;
		width: auto;
	}

	.zyff-widgets-admin .zyff-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		margin-bottom: 4px;
	}

	.zyff-widgets-admin .zyff-shortcode {
		max-width: none;
	}
}