/* Shared WooCommerce toast notifications. */

.bp-toast-region,
.bp-toast-region * {
	box-sizing: border-box;
}

.bp-toast-region {
	position: fixed;
	top: var(--bp-toast-top, 88px);
	right: 30px;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(390px, calc(100vw - 32px));
	pointer-events: none;
}

body.admin-bar .bp-toast-region {
	top: var(--bp-toast-top, 120px);
}

.bp-toast {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 10px 12px;
	width: 100%;
	padding: 14px 15px;
	border: 1px solid #ded8d4;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(36, 35, 40, .18), 0 2px 6px rgba(36, 35, 40, .08);
	color: #2f2926;
	font-family: "PP Pier Sans", Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.42;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: auto;
}

.bp-toast--success {
	border-left: 3px solid #5f9f52;
	padding-left: 13px;
}

.bp-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.bp-toast.is-leaving {
	opacity: 0;
	transform: translateY(-8px);
}

.bp-toast--error {
	border-color: #e6c7c4;
}

.bp-toast__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 50%;
	background: #e9f5e6;
	color: #3b7d32;
}

.bp-toast--info .bp-toast__icon {
	background: #f3f1ea;
	color: #4b3831;
}

.bp-toast--error .bp-toast__icon {
	background: #faeae8;
	color: #a33b34;
}

.bp-toast__icon svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.bp-toast__body {
	min-width: 0;
}

.bp-toast__message {
	min-width: 0;
	overflow-wrap: anywhere;
}

.bp-toast__message > .woocommerce-message,
.bp-toast__message > .woocommerce-info,
.bp-toast__message > .woocommerce-error {
	position: static !important;
	display: block !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	list-style: none !important;
}

.bp-toast__message > .woocommerce-message::before,
.bp-toast__message > .woocommerce-info::before,
.bp-toast__message > .woocommerce-error::before {
	display: none !important;
}

.bp-toast__message > .woocommerce-error > li + li {
	margin-top: 6px;
}

.bp-toast__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 10px;
}

.bp-toast__action {
	padding: 0;
	border: 0;
	background: transparent;
	color: #4b3831;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bp-toast__action:hover,
.bp-toast__action:focus-visible {
	color: #2f211c;
}

.bp-toast__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -5px -6px -5px auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #786e69;
	font-size: 23px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}

.bp-toast__close:hover,
.bp-toast__close:focus-visible {
	background: #f7f3f1;
	color: #2f2926;
}

.bp-toast__close:focus-visible,
.bp-toast__action:focus-visible {
	outline: 2px solid #4b3831;
	outline-offset: 2px;
}

/*
 * Server-rendered fallback: WooCommerce notices are printed directly in the
 * fixed region, so they can never paint as a wide inline content banner. JS
 * adopts the same nodes into the full interactive toast immediately after.
 */
.bp-toast-region > .woocommerce-notices-wrapper {
	display: contents;
}

.woocommerce-notices-wrapper > .woocommerce-message,
.woocommerce-notices-wrapper > .woocommerce-info,
.woocommerce-notices-wrapper > .woocommerce-error {
	position: fixed !important;
	top: 88px !important;
	right: 30px !important;
	left: auto !important;
	z-index: 1100 !important;
	display: block !important;
	width: min(390px, calc(100vw - 32px)) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 14px 15px 14px 50px !important;
	border: 1px solid #ded8d4 !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 10px 28px rgba(36, 35, 40, .18), 0 2px 6px rgba(36, 35, 40, .08) !important;
	color: #2f2926 !important;
	font-family: "PP Pier Sans", Arial, Helvetica, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.42 !important;
	list-style: none !important;
	pointer-events: auto;
}

.admin-bar .woocommerce-notices-wrapper > .woocommerce-message,
.admin-bar .woocommerce-notices-wrapper > .woocommerce-info,
.admin-bar .woocommerce-notices-wrapper > .woocommerce-error {
	top: 120px !important;
}

.woocommerce-notices-wrapper > .woocommerce-message {
	border-left: 3px solid #5f9f52 !important;
}

.woocommerce-notices-wrapper > .woocommerce-message::before,
.woocommerce-notices-wrapper > .woocommerce-info::before,
.woocommerce-notices-wrapper > .woocommerce-error::before {
	top: 14px !important;
	left: 17px !important;
}

.woocommerce-notices-wrapper > .woocommerce-message > .button,
.woocommerce-notices-wrapper > .woocommerce-info > .button,
.woocommerce-notices-wrapper > .woocommerce-error > .button {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #4b3831 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

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

@media (max-width: 782px) {
	.bp-toast-region,
	body.admin-bar .bp-toast-region {
		top: var(--bp-toast-top, 76px);
		right: 14px;
		left: 14px;
		width: auto;
	}

	.bp-toast {
		padding: 14px;
		font-size: 14px;
	}

	.bp-toast--success {
		padding-left: 12px;
	}

	.woocommerce-notices-wrapper > .woocommerce-message,
	.woocommerce-notices-wrapper > .woocommerce-info,
	.woocommerce-notices-wrapper > .woocommerce-error,
	.admin-bar .woocommerce-notices-wrapper > .woocommerce-message,
	.admin-bar .woocommerce-notices-wrapper > .woocommerce-info,
	.admin-bar .woocommerce-notices-wrapper > .woocommerce-error {
		top: 76px !important;
		right: 14px !important;
		left: 14px !important;
		width: auto !important;
		padding: 14px 14px 14px 48px !important;
		font-size: 14px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bp-toast {
		transition: none;
	}
}