div.pop-up.overlay {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;

	background: #000000AA;

	display: flex;
	justify-content: center;
	align-items: center;

	opacity: 0;
	pointer-events: none;

	transition: opacity 250ms ease 125ms;
}

div.pop-up.overlay.enabled {
	opacity: 1;
	pointer-events: unset;
	transition: opacity 250ms ease 0s;
}

div.pop-up section.dialog {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;

	box-shadow: 0 0 var(--spacing) #00000077;

	width: 100%;
	height: 100%;
	max-width: 520px;
	max-height: 600px;
	padding: var(--spacing);

	opacity: 0;
	transform: translate(0, 75vh);
	transition:
		opacity 250ms ease 0ms,
		transform 250ms ease 0ms;
}

div.pop-up.callus section.dialog {
	max-height: 520px;
}

div.pop-up.overlay.enabled section.dialog {
	opacity:1;
	transform: translate(0, 0);
	transition:
		opacity 250ms ease 250ms,
		transform 250ms ease 250ms;
}

div.pop-up section.dialog header,
div.pop-up section.dialog footer {
	flex: 0 0 auto;

	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
}

div.pop-up section.dialog div.body,
div.pop-up section.dialog form {
	flex: 3 1 100%;
}

div.pop-up section.dialog div.body blockquote {
	color: var(--green);
	margin: var(--spacing) 0 var(--spacing-large);
	font-size: 32px;
	text-align: center;
}

div.pop-up section.dialog ul.operating-hours {
	font-size: 18px;
	list-style: none;
	padding: 0;
}

div.pop-up section.dialog ul.operating-hours em {
	display: inline-block;
	color: var(--grey-mild);
	width: calc(50% - var(--spacing-small));
	text-align: right;
	padding-right: var(--spacing-small);
}

div.pop-up section.dialog header button {
	font-size: 1.25rem !important;
	padding:
		calc(1.5 * var(--spacing-small))
		var(--spacing-small)
		var(--spacing-small)
		!important;
	height: calc(var(--spacing-small) * 4);
}

div.pop-up section.dialog header button.exit:hover {
	background: #efbcbc !important;
}

div.pop-up section.dialog footer {
	gap: var(--spacing);
}

div.pop-up section.dialog footer button.ok.exit {
	margin-left: auto;
}

div.pop-up section.dialog footer button {
	font-size: 1.5rem !important;
	transition: opacity 125ms ease 0s;
}

div.pop-up section.dialog footer button.disabled {
	pointer-events: none;
	opacity: 0.25;
}

div.pop-up section.dialog footer button.pay.disabled,
div.pop-up section.dialog footer button.next.removed {
	display: none;
}

div.pop-up section.dialog form.wizard {
	--index: 0;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;

	overflow: hidden;
}

div.pop-up section.dialog form.wizard fieldset {
	--control-width: 1.75em;
	counter-increment: wizard-view;
	flex: 1 0 100%;

	border: none;
	width: 100%;
	margin: 0 0 var(--spacing);
	padding: 0 var(--spacing-small) 0 0;

	overflow-y: scroll;

	transform: translate(
		calc(-1 * var(--index) * 100% + 1px), /* <-- +1px fixes a weird anomoly. I HATE that this works. */
		0
	);
	transition: transform 375ms ease 0s;
}



div.pop-up section.dialog form.wizard label {
	display: block;
}

div.pop-up section.dialog form.wizard input,
div.pop-up section.dialog form.wizard textarea,
div.pop-up section.dialog form.wizard select {
	margin: var(--spacing-small) 0 var(--spacing);
}

div.pop-up section.dialog form.wizard label.checkbox {
	--control-offset: calc(var(--control-width) + var(--spacing-small) * 1.25);
	cursor: pointer;

	position: relative;
	color: var(--grey-mild);
	font-size: 0.925rem;

	height: var(--control-width);
	padding: calc(var(--spacing-small) / 2) 0 0 var(--control-offset);
	margin: var(--spacing-small) 0 var(--spacing);
}

div.pop-up section.dialog form.wizard label.checkbox > input {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	visibility: hidden;
	z-index: 10;
}

div.pop-up section.dialog form.wizard label.checkbox > input:checked ~ span {
	color: var(--interactive);
}

div.pop-up section.dialog form.wizard label.checkbox:hover > span {
	color: var(--green-lite);
}

div.pop-up section.dialog form.wizard label.checkbox > input + span.checkmark {
	position: absolute;
	top: 0;
	left: 0;

	display:block;

	background: var(--off-white);
	border: 2px solid var(--green);
	border-radius: 3px;

	width: var(--control-width);
	
	aspect-ratio: 1;
}

div.pop-up section.dialog form.wizard label.checkbox > input:checked + span.checkmark {
	background: var(--green);
}

div.pop-up section.dialog form.wizard label.checkbox:hover > input + span.checkmark {
	background: var(--green-lite);
}

div.pop-up section.dialog form.wizard label.checkbox > input:checked + span.checkmark::before {
	content: "✔";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	color: white;

	font-size: 1.5em;
	text-align: center;
}


div.pop-up section.dialog form.wizard textarea {
	height: 180px;
}

ol.paginator {
	flex:1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;

	gap: var(--spacing-small);

	list-style: none;
	padding: 0;
	margin: 0;
}

ol.paginator li {
	flex: 0 0 10px;
	background: var(--grey-lite);
	border-radius: 50%;
	height: 10px;
	width: 10px;
	aspect-ratio: 1;
}

ol.paginator li.active {
	background: var(--interactive);
}

fieldset.initial > p {
	font-size: 1.25em;
}

fieldset.initial > p > a {
	color: var(--interactive);
	text-decoration: underline;
}

fieldset.submit > div.loader {
	display: flex;
	flex-flow: row nowrap;
	justify-content: stretch;
	align-items: stretch;

	max-width: 320px;
	margin: 0 auto;
	aspect-ratio: 1;
}

fieldset.submit > div.loader > div.spinner {
	border: 5px solid var(--grey-lite);
	border-left: 5px solid;
	border-radius: 50%;
	animation: spin 2s linear infinite;
}

fieldset.submit > div.loader > div.spinner,
fieldset.submit > div.loader > div.loaded {
	position: relative;
	margin: 20%;
	flex-basis: 100%;
}

fieldset.submit > div.loader > div.loaded {
	display:none;
}

fieldset.submit > div.loader > div.loaded::after {
	content: "✓";
	display: block;

	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	color: var(--green-hilite);
	text-align: center;
	font-size: 10vw;
}

fieldset.submit.done > div.loader > div.spinner {
	display: none;
}

fieldset.submit.done > div.loader > div.loaded {
	display: block;
}

#stripe-error-element {
	color:#B7352C;
	margin: var(--spacing) 0;
}

@keyframes spin {
from {
	transform: rotate(0deg);
}
to {
	transform: rotate(359deg);
}
}