/* Site alert (Settings > Site Alert, inc/site-alert.php). Look and colours follow the alert on monashivf.com.
   It sits bottom-left because the cookie banner and cookie button use the bottom-right corner. */
.sufw-alert-center { position: fixed; left: 18px; bottom: 18px; z-index: 9990; display: flex; flex-direction: column; width: 25rem; max-width: calc(100vw - 36px); font-family: var(--global--font-secondary); animation: sufw-alert-in .45s ease-out .5s both; transition: bottom .4s ease; }
.sufw-alert-center[hidden] { display: none; }
/* While a form with reCAPTCHA is on screen its badge shows in this corner (inc/recaptcha-badge.php): sit above it. */
html.sufw-form-in-view .sufw-alert-center { bottom: 86px; }

.sufw-alert-center__close { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border: 0; border-radius: 2px; background: var(--global--color-white); box-shadow: 0 4px 18px rgba(0, 0, 0, .1); color: var(--global--color-green); font: 600 .875rem/1 var(--global--font-secondary); text-transform: none; letter-spacing: normal; cursor: pointer; }
.sufw-alert-center__close:hover,
.sufw-alert-center__close:focus { background: var(--global--color-teal); color: var(--global--color-green); }
.sufw-alert-center__close-icon { width: 11px; height: 11px; }

.sufw-alert { position: relative; display: block; margin-top: 8px; padding: 24px 64px 24px 24px; border-radius: 2px; background: var(--global--color-white); box-shadow: 0 4px 18px rgba(0, 0, 0, .1); color: var(--global--color-green); text-decoration: none; }
a.sufw-alert:hover,
a.sufw-alert:focus { color: var(--global--color-green); text-decoration: none; }
.sufw-alert__title { display: block; font-size: 1.25rem; line-height: 24px; font-weight: 600; }
.sufw-alert__text { display: block; margin-top: 6px; font-size: 1rem; line-height: 20px; font-weight: 400; }
.sufw-alert__arrow { position: absolute; right: 24px; top: 30px; width: 14px; height: 14px; color: var(--global--color-green); transition: transform .2s ease-out; }
a.sufw-alert:hover .sufw-alert__arrow,
a.sufw-alert:focus .sufw-alert__arrow { transform: translateX(5px); }
.sufw-alert-center__close:focus-visible,
a.sufw-alert:focus-visible { outline: 3px solid var(--global--color-yellow); outline-offset: 2px; }

.sufw-alert-center.is-reopened { animation-delay: 0s; }

/* Shown in place of the alert after it is closed; opens it again. */
.sufw-alert-reopen { position: fixed; left: 18px; bottom: 18px; z-index: 9990; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 36px); margin: 0; padding: 10px 16px; border: 0; border-radius: 2px; background: var(--global--color-white); box-shadow: 0 4px 18px rgba(0, 0, 0, .1); color: var(--global--color-green); font: 600 .875rem/1.2 var(--global--font-secondary); text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer; animation: sufw-alert-in .3s ease-out both; transition: bottom .4s ease; }
.sufw-alert-reopen[hidden] { display: none; }
.sufw-alert-reopen:hover,
.sufw-alert-reopen:focus { background: var(--global--color-teal); color: var(--global--color-green); }
.sufw-alert-reopen:focus-visible { outline: 3px solid var(--global--color-yellow); outline-offset: 2px; }
.sufw-alert-reopen__icon { flex: none; width: 16px; height: 16px; }
html.sufw-form-in-view .sufw-alert-reopen { bottom: 86px; }

@keyframes sufw-alert-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Small screens: the cookie banner fills the bottom of the screen, so wait until it is answered. */
@media (max-width: 900px) {
	html.show--consent .sufw-alert-center,
	html.show--consent .sufw-alert-reopen { display: none; }
}
@media (max-width: 480px) {
	.sufw-alert-center, .sufw-alert-reopen { left: 12px; bottom: 12px; max-width: calc(100vw - 84px); }
	html.sufw-form-in-view .sufw-alert-center, html.sufw-form-in-view .sufw-alert-reopen { bottom: 82px; }
	.sufw-alert { padding: 18px 50px 18px 20px; }
	.sufw-alert__title { font-size: 1.125rem; }
	.sufw-alert__arrow { right: 20px; top: 23px; }
}
@media (prefers-reduced-motion: reduce) {
	.sufw-alert-center, .sufw-alert-reopen { animation: none; }
	.sufw-alert__arrow { transition: none; }
}