/**
 * Store Kit — WooCommerce notices.
 *
 * Scoped with the .sk body class rather than .sk-page because notices
 * are also printed outside the page wrapper, for example on the empty cart
 * screen.
 */

.sk .woocommerce-message,
.sk .woocommerce-error,
.sk .woocommerce-info,
.sk .woocommerce-notice {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sk-space-2) var(--sk-space-4);
	width: 100%;
	margin: 0 0 var(--sk-space-5);
	padding: var(--sk-space-4) var(--sk-space-5) var(--sk-space-4) 52px;
	border: 1px solid var(--sk-border);
	border-left: 3px solid var(--sk-border-strong);
	border-radius: var(--sk-radius-sm);
	background-color: var(--sk-card);
	box-shadow: var(--sk-shadow-sm);
	color: var(--sk-primary);
	font-size: var(--sk-fs-base);
	line-height: 1.5;
	list-style: none;
	animation: sk-notice-in 220ms var(--sk-ease) both;
}

.sk .woocommerce-message::before,
.sk .woocommerce-error::before,
.sk .woocommerce-info::before {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--sk-space-4);
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	color: inherit;
	font-family: inherit;
	font-size: 0;
	transform: translateY(-50%);
	animation: none;
}

/* Success */
.sk .woocommerce-message {
	border-left-color: var(--sk-success);
	background-color: var(--sk-success-bg);
}

.sk .woocommerce-message::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

/* Error */
.sk .woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	border-left-color: var(--sk-danger);
	background-color: var(--sk-danger-bg);
	color: var(--sk-danger);
}

.sk .woocommerce-error::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.5v.01'/%3E%3C/svg%3E");
	top: var(--sk-space-4);
	transform: none;
}

.sk .woocommerce-error li {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk .woocommerce-error li + li {
	margin-top: var(--sk-space-2);
}

.sk .woocommerce-error a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Info */
.sk .woocommerce-info {
	border-left-color: var(--sk-info);
	background-color: var(--sk-info-bg);
}

.sk .woocommerce-info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.5v.01'/%3E%3C/svg%3E");
}

/* Buttons inside notices stay quiet. */
.sk .woocommerce-message .button,
.sk .woocommerce-info .button,
.sk .woocommerce-error .button {
	order: 2;
	min-height: 38px;
	margin-left: auto;
	padding: 0 var(--sk-space-4);
	border: 1px solid currentColor;
	border-radius: var(--sk-radius-btn);
	background: transparent;
	color: inherit;
	font-size: var(--sk-fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

.sk .woocommerce-message .button:hover,
.sk .woocommerce-info .button:hover,
.sk .woocommerce-error .button:hover {
	background: rgba(17, 24, 39, 0.06);
	color: inherit;
	transform: none;
}

.sk .woocommerce-NoticeGroup {
	display: block;
	width: 100%;
	margin-bottom: var(--sk-space-4);
}

.sk .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Coupon and login toggles reuse the info notice, but read as plain text. */
.sk .woocommerce-form-coupon-toggle .woocommerce-info,
.sk .woocommerce-form-login-toggle .woocommerce-info {
	border-color: var(--sk-border);
	border-left-width: 1px;
	background-color: var(--sk-card-alt);
	color: var(--sk-primary-soft);
}

.sk .woocommerce-form-coupon-toggle .woocommerce-info::before,
.sk .woocommerce-form-login-toggle .woocommerce-info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11V5a2 2 0 0 1 2-2h6l10 10-8 8z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E");
}

.sk .woocommerce-form-login-toggle .woocommerce-info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
}

.sk .woocommerce-form-coupon-toggle .showcoupon,
.sk .woocommerce-form-login-toggle .showlogin {
	color: var(--sk-accent);
	font-weight: 600;
	text-decoration: none;
}

.sk .woocommerce-form-coupon-toggle .showcoupon:hover,
.sk .woocommerce-form-login-toggle .showlogin:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@keyframes sk-notice-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}