/*
 * Ofixotech Leads — Free Site Survey popup.
 * Brand orange #E04E1F. Animation sequence per spec: overlay (250ms) →
 * container (350ms with slight overshoot @ 150ms delay) → fields stagger
 * 60ms apart starting @ 400ms.
 */

.ofx-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.ofx-modal.is-open { display: flex; }

.ofx-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 31, 31, 31, 0.65 );
	opacity: 0;
	transition: opacity 250ms ease-out;
}

.ofx-modal.is-open .ofx-modal__overlay { opacity: 1; }

.ofx-modal__container {
	position: relative;
	background: #fff;
	max-width: 520px;
	width: 100%;
	max-height: calc( 100vh - 32px );
	overflow-y: auto;
	border-radius: 12px;
	border-top: 4px solid #E04E1F;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.3 );
	padding: 32px;
	opacity: 0;
	transform: translateY( 20px ) scale( 0.96 );
	transition: opacity 350ms cubic-bezier( 0.16, 1, 0.3, 1 ) 150ms,
	            transform 350ms cubic-bezier( 0.16, 1, 0.3, 1 ) 150ms;
}

@media (max-width: 600px) {
	.ofx-modal__container {
		padding: 24px;
		width: 92%;
		max-width: 460px;
	}
}

.ofx-modal.is-open .ofx-modal__container {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
}

.ofx-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: transparent;
	color: #555;
	font-size: 22px;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 150ms ease;
}

.ofx-modal__close:hover { background: #f5f5f5; color: #1f1f1f; }

.ofx-modal__header { margin-bottom: 16px; padding-right: 36px; }
.ofx-modal__header h2 { font-size: 24px; margin: 0; color: #1f1f1f; }
.ofx-modal__header p  { font-size: 14px; color: #555; margin: 6px 0 0; }

.ofx-modal__form { margin: 0; }
.ofx-modal__field {
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.ofx-modal.is-open .ofx-modal__field { opacity: 1; transform: translateY( 0 ); }

/* Stagger 60ms apart, starting at 400ms once container has settled. */
.ofx-modal.is-open .ofx-modal__field:nth-child( 1 )  { transition-delay: 400ms; }
.ofx-modal.is-open .ofx-modal__field:nth-child( 2 )  { transition-delay: 460ms; }
.ofx-modal.is-open .ofx-modal__field:nth-child( 3 )  { transition-delay: 520ms; }
.ofx-modal.is-open .ofx-modal__field:nth-child( 4 )  { transition-delay: 580ms; }
.ofx-modal.is-open .ofx-modal__field:nth-child( 5 )  { transition-delay: 640ms; }
.ofx-modal.is-open .ofx-modal__field:nth-child( 6 )  { transition-delay: 700ms; }
.ofx-modal.is-open .ofx-modal__field:nth-child( 7 )  { transition-delay: 760ms; }
.ofx-modal.is-open .ofx-modal__field:nth-child( 8 )  { transition-delay: 820ms; }
.ofx-modal.is-open .ofx-modal__field:nth-child( 9 )  { transition-delay: 880ms; }
.ofx-modal.is-open .ofx-modal__field:nth-child( 10 ) { transition-delay: 940ms; }

@media (prefers-reduced-motion: reduce) {
	.ofx-modal__overlay,
	.ofx-modal__container,
	.ofx-modal__field {
		transition: opacity 100ms linear !important;
		transform: none !important;
		transition-delay: 0ms !important;
	}
}

/* Pill trigger style — shared with theme; safe to extend without
 * stomping on theme styling. Just need a baseline so unstyled triggers
 * still render as a pill. */
.ofx-site-survey-trigger {
	background: #E04E1F;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 14px 32px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.ofx-site-survey-trigger:hover {
	background: #B83E14;
	transform: translateY( -1px );
	box-shadow: 0 6px 16px rgba( 184, 62, 20, 0.25 );
}