/*
 * Quote modal.
 *
 * The modal is new markup, so it carries its own styling rather than leaning on rules
 * meant for the page. Everything below is built from the design's own tokens - Barlow
 * type, the blue/navy palette and the 24-40px rounding used elsewhere - so the panel
 * reads as part of the site. Nothing here touches the page behind it.
 *
 * The modal is hidden until opened, so these rules never affect a page at rest.
 */

.sampley-modal .modal-dialog {
	max-width: 720px;
	padding: 16px;
}

.sampley-modal .modal-content {
	border: 0;
	border-radius: 32px;
	background-color: var(--clr-bg-white);
	box-shadow: 0 30px 80px rgba(0, 51, 103, 0.25);
	overflow: hidden;
}

.sampley-modal .modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 36px 40px 8px;
	border-bottom: 0;
}

.sampley-modal .modal-heading {
	flex: 1 1 auto;
}

.sampley-modal .section-subtitle {
	margin-bottom: 8px;
}

.sampley-modal .modal-title {
	margin: 0;
	font-family: var(--font-secondary);
	font-size: 38px;
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--clr-heading);
	text-transform: uppercase;
}

.sampley-modal .modal-title i {
	font-style: italic;
	font-weight: var(--fw-regular);
	color: var(--clr-primary);
	text-transform: none;
}

/* Close button - round, quiet until hovered. */
.sampley-modal .modal-close {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin-top: 4px;
	padding: 0;
	border: 1px solid rgba(11, 114, 208, 0.2);
	border-radius: 50%;
	background-color: transparent;
	font-size: 14px;
	line-height: 1;
	color: var(--clr-heading);
	transition: all 0.3s ease-in-out;
}

.sampley-modal .modal-close:hover,
.sampley-modal .modal-close:focus-visible {
	border-color: var(--clr-primary);
	background-color: var(--clr-primary);
	color: var(--clr-white);
	outline: none;
}

.sampley-modal .modal-body {
	padding: 16px 40px 40px;
}

/* The form inside the modal is the same Contact Form 7 form the contact page uses. */
.sampley-modal .contact-form {
	width: 100%;
}

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

@media screen and (max-width: 767px) {
	.sampley-modal .modal-dialog {
		padding: 8px;
	}

	.sampley-modal .modal-content {
		border-radius: 24px;
	}

	.sampley-modal .modal-header {
		padding: 28px 24px 4px;
	}

	.sampley-modal .modal-title {
		font-size: 28px;
	}

	.sampley-modal .modal-body {
		padding: 12px 24px 28px;
	}
}