.fo-alerts,
.fo-alerts * {
	box-sizing: border-box;
}

html.fo-alerts-js .fo-alerts {
	display: grid;
	grid-template-rows: 1fr;
	overflow: hidden;
	opacity: 1;
	transform: translateY(0);
	transition:
		grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 320ms ease,
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color var(--transition-normal) ease;
}

html.fo-alerts-js .fo-alerts:not(.is-ready) {
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(-12px);
}

html.fo-alerts-js .fo-alerts:not(.is-ready) .fo-alerts__inner,
html.fo-alerts-js .fo-alerts.is-closing .fo-alerts__inner {
	padding-top: 0;
	padding-bottom: 0;
}

html.fo-alerts-js .fo-alerts.is-closing {
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(-12px);
}

.fo-alerts {
	--fo-alerts-actions-width: 0px;
	position: relative;
	z-index: 10002;
	width: 100%;
	background: var(--color-alert);
	color: var(--color-black);
	font-family: var(--et_global_body_font);
	transition: background-color var(--transition-normal) ease;
}

.fo-alerts[hidden],
.fo-alerts__alert[hidden] {
	display: none !important;
}

.fo-alerts[data-tone="warning"] {
	background: var(--color-alert-red);
}

.fo-alerts__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	gap: var(--space-s);
	align-items: start;
	width: 80%;
	max-width: 1440px;
	min-height: 0;
	overflow: hidden;
	margin: 0 auto;
	padding: calc(var(--space-s) * 1.45) 0;
	transition: padding 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fo-alerts__viewport {
	overflow: hidden;
	min-width: 0;
	touch-action: pan-y;
}

.fo-alerts__track {
	display: flex;
	width: 100%;
	transform: translateX(0);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.fo-alerts.is-swiping .fo-alerts__track {
	transition: none;
}

.fo-alerts__alert {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: var(--space-xs);
	align-items: start;
	flex: 0 0 100%;
	min-width: 0;
	padding-right: 0;
	opacity: 0;
	transition: opacity 220ms ease;
}

.fo-alerts__alert.is-active {
	opacity: 1;
}

.fo-alerts__icon {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 0.05rem;
}

.fo-alerts__icon img {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 0;
	filter: var(--filter-secondary);
}

.fo-alerts__copy {
	min-width: 0;
}

.fo-alerts__heading {
	margin: 0;
	padding: 0;
	color: var(--color-black);
	font-family: var(--et_global_body_font);
	font-size: var(--font-size-0);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
}

.fo-alerts__body,
.fo-alerts__body p,
.fo-alerts__body ul,
.fo-alerts__body ol {
	color: var(--color-text);
	font-family: var(--et_global_body_font);
	font-size: var(--font-size-0);
	line-height: 1.5;
}

.fo-alerts__body p,
.fo-alerts__body ul,
.fo-alerts__body ol {
	margin: 0 0 var(--space-2xs);
	padding-top: 0;
}

.fo-alerts__body p:last-child,
.fo-alerts__body ul:last-child,
.fo-alerts__body ol:last-child {
	margin-bottom: 0;
}

.fo-alerts__body a {
	color: var(--color-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: var(--transition-normal) ease-in-out;
}

.fo-alerts__body a:hover {
	color: var(--color-link-hover);
	border-bottom: 1px solid var(--color-link-hover);
}

.fo-alerts__body a:focus-visible,
.fo-alerts__close:focus-visible,
.fo-alerts__dot:focus-visible {
	outline: var(--outline);
	transition: var(--outline-transition) !important;
	border-radius: var(--outline-border-radius) !important;
}

.fo-alerts__actions {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 1.6rem;
	padding-top: 0;
	transform: translateY(-3px);
}

.fo-alerts__dots {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 24px;
	padding: 5px 8px;
	border-radius: 999px;
	background: var(--color-black-opacity10);
}

.fo-alerts__dots:empty {
	display: none;
}

.fo-alerts__dot {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-black-opacity25);
	cursor: pointer;
	transition: background-color var(--transition-normal) ease, transform var(--transition-normal) ease;
}

.fo-alerts__dot:hover,
.fo-alerts__dot.is-active {
	background: var(--color-black);
}

.fo-alerts__dot.is-active {
	transform: none;
}

.fo-alerts__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--border-radius);
	background: transparent;
	color: var(--color-black);
	cursor: pointer;
	transition: background-color var(--transition-normal) ease;
}

.fo-alerts__close:hover {
	background: var(--color-black-opacity10);
}

.fo-alerts__close svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2.5;
}

.fo-alerts .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.fo-alerts,
	.fo-alerts__track,
	.fo-alerts__alert,
	.fo-alerts__body a,
	.fo-alerts__dot,
	.fo-alerts__close {
		transition: none;
	}
}

@media (max-width: 767px) {
	.fo-alerts__inner {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xs);
		width: 80%;
		padding: var(--space-m) 0;
	}

	.fo-alerts__alert {
		grid-template-columns: 24px minmax(0, 1fr);
		gap: var(--space-xs);
	}

	.fo-alerts__icon {
		display: flex;
	}

	.fo-alerts__actions {
		position: absolute;
		top: calc(var(--space-m) - 3px);
		right: 0;
		z-index: 2;
		align-items: center;
		transform: none;
	}

	.fo-alerts__heading {
		padding-right: calc(var(--fo-alerts-actions-width) + var(--space-xs));
	}

	.fo-alerts__dots {
		gap: 4px;
		padding: 5px 8px;
	}
}

@media (max-width: 400px) {
	.fo-alerts__alert {
		grid-template-columns: minmax(0, 1fr);
	}

	.fo-alerts__icon {
		display: none;
	}
}