/*
 * Notice bars (design-shop 5.5 / I.1): full-width, white text, icon at the
 * left. Error + info = #D0AE82 with a circled "!", success = #27A323 with a
 * check mark. PHP helper: lvt_notice( $type, $html ).
 *
 * <div class="lvt-notice lvt-notice--error" role="alert">...</div>
 * A <ul class="lvt-notice ..."><li>...</li></ul> list works too.
 */

.lvt-notice {
	position: relative;
	display: block;
	margin: 0 0 20px;
	padding: 18px 30px 18px 65px;
	border: 0;
	border-radius: 0;
	background: var(--lvt-c-warning);
	color: #FFFFFF;
	font-family: var(--lvt-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	list-style: none;
}

.lvt-notice::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 24px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: #FFFFFF;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M9.1 5h1.8v6.3H9.1zM9.1 13.1h1.8v1.8H9.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M9.1 5h1.8v6.3H9.1zM9.1 13.1h1.8v1.8H9.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lvt-notice--success {
	background: var(--lvt-c-success);
}

.lvt-notice--success::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 10.5 4 4 9-9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 10.5 4 4 9-9'/%3E%3C/svg%3E");
}

.lvt-notice li {
	margin: 0;
	padding: 0;
}

.lvt-notice li + li {
	margin-top: 6px;
}

.lvt-notice a {
	color: #FFFFFF;
	text-decoration: underline;
	transition: opacity .25s ease;
}

.lvt-notice a:hover {
	color: #FFFFFF;
	opacity: .8;
}

.lvt-notice strong,
.lvt-notice b {
	font-weight: 700;
}

@media (max-width: 767px) {
	.lvt-notice {
		font-size: 14px;
		line-height: 20px;
	}
}