/* =========================================================================
   150 Peel - form submission modal
   Companion to peel-form-modal.js. Kept in its own file so it can be
   swapped without touching peel-forms.css.
   ========================================================================= */

.peel-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: 'Abel', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.peel-modal[hidden] {
	display: none;
}

.peel-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 25, 30, .62);
	animation: peel-fade .18s ease-out;
}

.peel-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	max-width: 480px;
	width: 100%;
	padding: 38px 34px 30px;
	text-align: center;
	animation: peel-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}

.peel-modal__icon {
	width: 66px;
	height: 66px;
	margin: 0 auto 20px;
}

.peel-modal__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.peel-modal--success .peel-modal__icon { color: #0a7d3c; }
.peel-modal--error .peel-modal__icon { color: #b32d2e; }

.peel-modal__title {
	font-size: 27px;
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 12px;
	color: #10191e;
}

.peel-modal__body {
	font-size: 17px;
	line-height: 1.55;
	color: #46555e;
	margin: 0 0 28px;
}

.peel-modal__btn {
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: #008cba;
	border: none;
	border-radius: 8px;
	padding: 14px 46px;
	min-width: 180px;
	cursor: pointer;
	transition: background .15s ease;
}

.peel-modal__btn:hover { background: #00708f; }

.peel-modal__btn:focus-visible {
	outline: 3px solid #7fd0e8;
	outline-offset: 2px;
}

.peel-modal--error .peel-modal__btn { background: #b32d2e; }
.peel-modal--error .peel-modal__btn:hover { background: #8f2425; }

/* Stop the page scrolling behind the dialog */
body.peel-modal-open {
	overflow: hidden;
}

@keyframes peel-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes peel-pop {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
	.peel-modal__dialog { padding: 30px 22px 24px; border-radius: 12px; }
	.peel-modal__title { font-size: 23px; }
	.peel-modal__body { font-size: 16px; }
	.peel-modal__icon { width: 56px; height: 56px; margin-bottom: 16px; }
	.peel-modal__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.peel-modal__backdrop,
	.peel-modal__dialog {
		animation: none;
	}
	.peel-modal__btn { transition: none; }
}