/*
 * Service page contact popup (layout B: side panel + compact form).
 * Loaded only on service pages. Everything is scoped to .aptly-svc-popup, so
 * the same form on the Contact page keeps its own look.
 */

/* ---- popup shell -------------------------------------------------------- */
.awb-off-canvas-wrap:has(.aptly-svc-popup) .awb-off-canvas {
	border-radius: 16px;
	overflow: hidden;
}
.awb-off-canvas-wrap:has(.aptly-svc-popup) .off-canvas-content {
	padding: 0;
}
.aptly-svc-popup,
.aptly-svc-popup > .fusion-builder-row {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}
.aptly-svc-popup > .fusion-builder-row {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
}

/* ---- side panel ----------------------------------------------------------- */
.aptly-svc-popup .aptly-svc-side {
	width: 300px !important;
	flex: none !important;
	margin: 0 !important;
	background: #1a0f3d;
	color: #ffffff;
}
.aptly-svc-popup .aptly-svc-side > .fusion-column-wrapper {
	padding: 32px 28px !important;
	margin: 0 !important;
}
.aptly-svc-side .aptly-eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #c9b3f5;
}
.aptly-svc-side .aptly-svc-name {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	color: #ffffff;
}
.aptly-svc-side .aptly-svc-from {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #d9d2ee;
}
.aptly-svc-side .aptly-divider {
	height: 1px;
	margin: 24px 0;
	background: rgba(255, 255, 255, 0.14);
}
.aptly-svc-side ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: aptly-step;
}
.aptly-svc-side ol li {
	counter-increment: aptly-step;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.45;
	color: #ece7f8;
}
.aptly-svc-side ol li::before {
	content: counter(aptly-step);
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: #3a2475;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---- main column ------------------------------------------------------- */
.aptly-svc-popup .aptly-svc-main {
	flex: 1 1 auto !important;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
}
.aptly-svc-popup .aptly-svc-main > .fusion-column-wrapper {
	padding: 28px 32px 24px !important;
	margin: 0 !important;
}
.aptly-svc-main .aptly-svc-head h2 {
	margin: 0 48px 4px 0;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: #12142b;
}
.aptly-svc-main .aptly-svc-head p {
	margin: 0 0 18px;
	font-size: 14px;
	color: #4a5068;
}
.aptly-svc-main .aptly-svc-chip {
	display: none;
}

/* ---- compact form ------------------------------------------------------- */
.aptly-svc-popup .fusion-form .fusion-fullwidth {
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
}
.aptly-svc-popup .fusion-form .fusion-builder-row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 14px;
	row-gap: 12px;
	margin: 0 !important;
	max-width: none !important;
}
.aptly-svc-popup .fusion-form .fusion-layout-column {
	width: auto !important;
	margin: 0 !important;
	grid-column: span 1;
}
.aptly-svc-popup .fusion-form .fusion-column-wrapper {
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

/* Field order: first | last, email | service, country | heard, then full rows. */
.aptly-svc-popup .fusion-layout-column:has([name="name_label"])       { order: 1; }
.aptly-svc-popup .fusion-layout-column:has([name="last_name_label"])  { order: 2; }
.aptly-svc-popup .fusion-layout-column:has([name="email_label"])      { order: 3; }
.aptly-svc-popup .fusion-layout-column:has([name="service_category"]) { order: 4; }
.aptly-svc-popup .fusion-layout-column:has([name="country"])          { order: 5; }
.aptly-svc-popup .fusion-layout-column:has([name="heard_about"])      { order: 6; }
.aptly-svc-popup .fusion-layout-column:has([name="title_label"])      { order: 7; grid-column: 1 / -1; }
.aptly-svc-popup .fusion-layout-column:has([name="message_label"])    { order: 8; grid-column: 1 / -1; }
.aptly-svc-popup .fusion-layout-column:has([type="submit"])           { order: 9; grid-column: 1 / -1; }
.aptly-svc-popup .fusion-layout-column:has(.form-submission-notices)  { order: 10; grid-column: 1 / -1; }

/* Labels (the form uses a text block above each field). */
.aptly-svc-popup .fusion-form .fusion-text,
.aptly-svc-popup .fusion-form .fusion-text p {
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	/* Some labels are typed in capitals; show all as sentence case. */
	text-transform: lowercase !important;
	font-family: inherit !important;
	color: #3b4256 !important;
}
.aptly-svc-popup .fusion-form .fusion-text p::first-letter {
	text-transform: uppercase;
}
.aptly-svc-popup .fusion-form .fusion-layout-column:has(.fusion-form-field [required]) > .fusion-column-wrapper > .fusion-text p::after {
	content: " *";
	color: #c0262d;
}
.aptly-svc-popup .fusion-form .fusion-text {
	margin-bottom: 6px !important;
}
.aptly-svc-popup .fusion-form .fusion-form-field {
	margin: 0 !important;
}

/* Inputs. */
.aptly-svc-popup .fusion-form .fusion-form-input {
	height: 40px !important;
	min-height: 0 !important;
	padding: 0 12px !important;
	border: 1px solid #d5d9e2 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: #12142b !important;
	box-shadow: none !important;
}
.aptly-svc-popup .fusion-form textarea.fusion-form-input {
	height: 80px !important;
	padding: 10px 12px !important;
}
.aptly-svc-popup .fusion-form .fusion-form-input::placeholder {
	color: #8a90a2 !important;
}
.aptly-svc-popup .fusion-form .fusion-form-input:focus {
	border-color: #8b3fe0 !important;
	outline: 2px solid rgba(139, 63, 224, 0.25);
	outline-offset: 0;
}
.aptly-svc-popup .fusion-form select[name="service_category"] {
	border-color: #b892ec !important;
	background: #faf6ff !important;
	color: #4b1696 !important;
	font-weight: 600 !important;
}
.aptly-svc-popup .fusion-form .select-arrow {
	height: 40px !important;
	line-height: 40px !important;
}

/* Submit row. */
.aptly-svc-popup .fusion-form-submit-field {
	margin-top: 4px !important;
}
.aptly-svc-popup .fusion-form-submit-field .fusion-button {
	height: 46px !important;
	padding: 0 28px !important;
	border-radius: 10px !important;
	font-size: 15px !important;
}
.aptly-svc-popup .form-submission-notices .fusion-alert {
	margin: 4px 0 0 !important;
}

/* ---- phones and small tablets: full-screen sheet, no side panel ----------- */
@media (max-width: 800px) {
	.awb-off-canvas-wrap:has(.aptly-svc-popup) .awb-off-canvas {
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100% !important;
		max-height: 100% !important;
		border-radius: 0;
	}
	.aptly-svc-popup .aptly-svc-side {
		display: none !important;
	}
	.aptly-svc-popup .aptly-svc-main > .fusion-column-wrapper {
		padding: 20px 20px 24px !important;
	}
	.aptly-svc-main .aptly-svc-chip {
		display: inline-block;
		margin: 0 48px 8px 0;
		padding: 4px 10px;
		border-radius: 999px;
		background: #f1e9fc;
		color: #5a1aa8;
		font-size: 12px;
		font-weight: 700;
	}
	/* One field per row, except first and last name side by side. */
	.aptly-svc-popup .fusion-form .fusion-layout-column {
		grid-column: 1 / -1;
	}
	.aptly-svc-popup .fusion-form .fusion-layout-column:has([name="name_label"]),
	.aptly-svc-popup .fusion-form .fusion-layout-column:has([name="last_name_label"]) {
		grid-column: span 1;
	}
	.aptly-svc-popup .fusion-form .fusion-form-input {
		height: 46px !important;
		font-size: 16px !important; /* stops iOS zooming into fields */
	}
	.aptly-svc-popup .fusion-form .select-arrow {
		height: 46px !important;
		line-height: 46px !important;
	}
}