/* ==========================================================================
   Get a Quote popup (template-parts/tech-ae-quote-modal) — the form inside is
   Contact Form 7 "Get a Quote form" (.get-a-quote-form, styled in theme.css).
   Phones: bottom sheet that slides up. From 640px: centred box that zooms in.
   ========================================================================== */
.tech-ae-quote-modal {
	--tech-ae-modal-pad: 18px; /* Same as the form's side padding. */
	width: 100%;
	max-width: none;
	max-height: 92dvh;
	margin: auto 0 0;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: var(--tech-ae-dark);
}
.tech-ae-quote-modal:focus,
.tech-ae-quote-modal:focus-visible { outline: none; }
.tech-ae-quote-modal::backdrop { background: rgba(34, 34, 34, .6); backdrop-filter: blur(3px); }

.tech-ae-quote-modal__box {
	position: relative;
	max-height: 92dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--tech-ae-radius-lg) var(--tech-ae-radius-lg) 0 0;
	background: var(--tech-ae-white);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
}

/* Form: no card of its own inside the popup */
.tech-ae-quote-modal .get-a-quote-form { padding-top: 22px; border: 0; border-radius: 0; }
.tech-ae-quote-modal .get-a-quote-form__actions { display: flex; align-items: center; gap: 12px; }
.tech-ae-quote-modal .wpcf7-spinner { flex-shrink: 0; margin: 0; } /* Beside the button, not on its own line. */

/* Sent / error message: inside the box, under the button */
.tech-ae-quote-modal .wpcf7 form .wpcf7-response-output { margin: -12px var(--tech-ae-modal-pad) var(--tech-ae-modal-pad); }

/* Header bar: product name · close button (stays visible while the form scrolls) */
.tech-ae-quote-modal__bar {
	position: sticky;
	z-index: 2;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding: 10px 12px 10px var(--tech-ae-modal-pad);
	border-bottom: 1px solid var(--tech-ae-border);
	background: #f1f5fa; /* Solid, so the form doesn't show through when scrolling. */
}
.tech-ae-quote-modal__product {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: var(--tech-ae-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}
.tech-ae-quote-modal__product[hidden] { display: block; visibility: hidden; } /* Keeps the button on the right. */

.tech-ae-quote-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tech-ae-white);
	box-shadow: 0 0 0 1px var(--tech-ae-border);
	color: var(--tech-ae-dark);
	cursor: pointer;
	transition: background var(--tech-ae-ease), color var(--tech-ae-ease), transform var(--tech-ae-ease);
}
.tech-ae-quote-modal__close:hover { background: var(--tech-ae-primary); color: var(--tech-ae-white); transform: rotate(90deg); }
.tech-ae-quote-modal__close .tech-ae-icon { display: block; }

@media (min-width: 640px) {
	.tech-ae-quote-modal { --tech-ae-modal-pad: 32px; width: min(680px, calc(100% - 48px)); max-height: calc(100dvh - 48px); margin: auto; }
	.tech-ae-quote-modal__box { max-height: calc(100dvh - 48px); border-radius: var(--tech-ae-radius-lg); }
	.tech-ae-quote-modal .get-a-quote-form { padding-top: 30px; }
	.tech-ae-quote-modal__bar { padding-right: 14px; }
}
@media (min-width: 992px) {
	.tech-ae-quote-modal { --tech-ae-modal-pad: 40px; }
}

/* Open / close animation (closing: the script adds .is-closing, waits 250ms, then closes). */
.tech-ae-quote-modal[open] { animation: tech-ae-sheet-in .35s cubic-bezier(.2, .8, .3, 1); }
.tech-ae-quote-modal.is-closing { animation: tech-ae-sheet-out .25s ease forwards; }
.tech-ae-quote-modal[open]::backdrop { animation: tech-ae-fade-in .35s ease; }
.tech-ae-quote-modal.is-closing::backdrop { animation: tech-ae-fade-out .25s ease forwards; }
@media (min-width: 640px) {
	.tech-ae-quote-modal[open] { animation-name: tech-ae-modal-in; }
	.tech-ae-quote-modal.is-closing { animation-name: tech-ae-modal-out; }
}
/* Reduced motion: a plain fade instead of movement. */
@media (prefers-reduced-motion: reduce) {
	.tech-ae-quote-modal[open] { animation-name: tech-ae-fade-in; }
	.tech-ae-quote-modal.is-closing { animation-name: tech-ae-fade-out; }
}

@keyframes tech-ae-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tech-ae-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes tech-ae-modal-in {
	from { opacity: 0; transform: translateY(40px) scale(.94); }
	to { opacity: 1; transform: none; }
}
@keyframes tech-ae-modal-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(30px) scale(.95); }
}
@keyframes tech-ae-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tech-ae-fade-out { from { opacity: 1; } to { opacity: 0; } }