/* Modal Windows
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal {
	width: 100vw;
	height: 100vh;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 2rem;
	overflow: hidden;
}

	.modal > .modal-close {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		background-color: rgba(0,0,0,.25);
		cursor: default;
	}

	.modal-frame {
		width: 600px;
		max-width: 100%;
		max-height: 100%;
		position: relative;
		z-index: 2;
		padding: 2rem 2rem;
		background-color: #fff;
		box-shadow: 0 8px 32px rgba(0,0,0,.15);
		overflow: auto;
	}

	.modal-frame.bg-gold {
		background-color: var(--color-primary);
		color: #fff;
	}

		.modal-frame header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1rem .5rem 1rem 1rem;
			background-color: #1c1c1c;
			color: #fff;
			overflow: hidden;
		}

		.modal-frame > h2 {
			margin: 0 0 2rem;
			font-family: 'mixta-sharp', serif;
			font-weight: bold;
			text-transform: capitalize;
		}

		.modal-frame .modal-close {
			width: 2rem;
			height: 2rem;
			position: absolute;
			top: 0.5rem;
			right: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 3rem;
			text-decoration: none;
		}

		.modal-frame .content {
			padding: 2rem 1rem;
			overflow-y: auto;
		}


/* Open Modal
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal:target,
.modal.js-is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}

	.modal:target > .modal-close,
	.modal.js-is-open > .modal-close {
		animation: .3s ease modalFade;
	}

	.modal:target .modal-frame,
	.modal.js-is-open .modal-frame {
		animation: .7s ease modalSlideIn;
	}


/* Animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes modalFade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes modalSlideIn {
	from {
		top: -100px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal .custom-form {
	gap: 1rem;
	font-size: 16px;
}

.modal .custom-form label,
body .modal .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
	font-family: 'mixta-sharp', serif;
	font-weight: bold;
	color: #fff;
}

.modal .custom-form .wpcf7-text,
body .modal .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .modal .gform_wrapper .gform_body .gform_fields .gfield input[type=email] {
	padding: 0.5em;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 0;
}

.modal .custom-form .wpcf7-submit,
body .modal .gform_wrapper .gform_footer input[type=submit] {
	width: 100% !important;
	min-width: auto !important;
	padding: 1em 0.75em !important;
	background-color: var(--color-tertiary) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #fff !important;
	text-transform: uppercase !important;
	font-family: 'mixta-sharp', serif !important;
	font-weight: bold !important;
	letter-spacing: 0.125em !important;
	cursor: pointer !important;
}

.modal .custom-form input[type="checkbox"],
body .modal .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_consent input[type=checkbox] {
	width: auto;
	height: auto;
	display: inline-block;
	appearance: auto;
	margin-right: 0.5em;
	opacity: 1;
}

.modal .custom-form input[type="checkbox"]:focus,
body .modal .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_consent input[type=checkbox]:focus {
	outline: auto;
}

.modal .custom-form .wpcf7-acceptance .wpcf7-list-item-label,
body .modal .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_consent .gform-field-label {
	display: inline;
	color: #fff;
}

.modal .custom-form .wpcf7-list-item-label::before,
body .modal .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_consent .gform-field-label::before {
	display: none;
}

.modal .bg-gold .custom-form .wpcf7-not-valid-tip {
	color: rgb(130, 0, 0);
}

.modal .wpcf7 form .wpcf7-response-output {
	margin-top: 0;
}

.modal .bg-gold .wpcf7 form.sent .wpcf7-response-output,
.modal .gform_confirmation_message {
	background-color: rgb(185, 210, 111, 0.24) !important;
	border-color: rgb(180, 213, 85) !important;
	color: #fff !important;
}


/* Floorplan
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal-floorplan .modal-frame {
	width: 800px;
	padding: 0;
}

	.modal-floorplan .modal-frame .modal-close {
		border: 1px solid currentColor;
		border-radius: 50%;
		color: rgb(88, 88, 91);
		font-size: 200%;
	}

	.modal-floorplan .modal-frame .contact-info {
		display: grid;
		grid-template-columns: minmax(100px, 20%) 1fr 80px;
		align-items: center;
		gap: 1.5rem;
		padding: 1.5rem;
		border-top: 2px solid rgb(88, 88, 91);
		font-size: 0.7rem;
		font-weight: bold;
	}

		.modal-floorplan .modal-frame .contact-info .text {
			line-height: 1.3;
		}

		.modal-floorplan .modal-frame .contact-info .text > *:first-child {
			padding: 0;
			margin: 0;
		}

@media (max-width: 37.5em) {

	.modal-floorplan .modal-frame .contact-info {
		grid-template-columns: minmax(100px, 20%) 1fr;
	}

	.modal-floorplan .logo-verve {
		display: none;
	}

}

@media (max-width: 30em) {

	.modal-floorplan .modal-frame .contact-info {
		display: block;
	}

	.modal-floorplan .logo-sopc {
		display: none;
	}

}