/* "Text us" chat widget — a floating launcher bottom-right that opens a small
   panel (name, mobile phone, message) on every page. Markup is injected by
   customise.py (add_text_widget) so the real <form> is in the static HTML,
   which is what lets Netlify detect it; behaviour is text-us.js.

   Styled from the site's own tokens: APEX BLUE #0072ce, black #0c0c0c, white
   form card, Montserrat, 8-20px radii. White type on APEX BLUE is 4.89:1.
   z-index 9000 sits under the mobile menu (9997) so the menu always covers it. */

.apex-textus {
	--tu-blue: #0072ce;
	--tu-black: #0c0c0c;
	--tu-ink: #0f172a;
	--tu-silver: #a0a0a0;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9000;
	font-family: var(--apex-display, "Montserrat", system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}
.apex-textus *,
.apex-textus *::before,
.apex-textus *::after { box-sizing: border-box; }
.apex-textus [hidden] { display: none !important; }

/* ---- launcher ---------------------------------------------------------- */
.apex-textus .apex-textus-launch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	padding: 14px 22px;
	border: 0;
	border-radius: 14px;
	background: var(--tu-blue);
	color: #fff;
	font: 700 15px/1 var(--apex-display, "Montserrat", system-ui, sans-serif);
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 10px 28px -8px rgba(0, 114, 206, .65), 0 2px 6px rgba(0, 0, 0, .35);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.apex-textus .apex-textus-launch:hover,
.apex-textus .apex-textus-launch:focus-visible {
	background: #0a84e6;
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 14px 32px -8px rgba(0, 114, 206, .8), 0 2px 6px rgba(0, 0, 0, .35);
}
.apex-textus .apex-textus-launch:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.apex-textus .apex-textus-launch svg { width: 20px; height: 20px; flex: none; }
.apex-textus .apex-textus-x { display: none; }

/* a soft attention ring while closed */
.apex-textus:not(.is-open) .apex-textus-launch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(0, 114, 206, .55);
	animation: apex-textus-pulse 2.8s ease-out 1.2s infinite;
	pointer-events: none;
}
.apex-textus .apex-textus-launch { position: relative; }
@keyframes apex-textus-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0, 114, 206, .55); }
	70%  { box-shadow: 0 0 0 16px rgba(0, 114, 206, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 114, 206, 0); }
}

/* open: the launcher becomes a round close button */
.apex-textus.is-open .apex-textus-launch {
	width: 56px;
	height: 56px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
}
.apex-textus.is-open .apex-textus-chat,
.apex-textus.is-open .apex-textus-label { display: none; }
.apex-textus.is-open .apex-textus-x { display: block; }

/* ---- panel ------------------------------------------------------------- */
.apex-textus .apex-textus-panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	width: 372px;
	max-height: calc(100vh - 112px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 20px;
	background: var(--tu-black);
	color: #fff;
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 114, 206, .25);
	transform-origin: bottom right;
	animation: apex-textus-in .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes apex-textus-in {
	from { opacity: 0; transform: translateY(14px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

.apex-textus .apex-textus-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 20px;
	background: var(--tu-blue);
	font: 700 15px/1.3 var(--apex-display, "Montserrat", system-ui, sans-serif);
	color: #fff;
}
.apex-textus .apex-textus-head svg { width: 22px; height: 22px; flex: none; opacity: .92; }

.apex-textus .apex-textus-body {
	overflow-y: auto;
	padding: 18px 18px 16px;
	scrollbar-width: thin;
}
.apex-textus .apex-textus-bubble {
	margin: 0 0 14px;
	padding: 14px 18px;
	border-radius: 18px 18px 18px 4px;
	background: #1c1c1c;
	color: #e6e6e6;
	font: 500 14.5px/1.5 var(--apex-display, "Montserrat", system-ui, sans-serif);
}

.apex-textus .apex-textus-form { margin: 0; padding: 0; background: none; }
.apex-textus .apex-textus-card {
	padding: 6px 18px 18px;
	border-radius: 20px;
	background: #fff;
	color: var(--tu-ink);
}
.apex-textus .apex-textus-field { position: relative; padding-top: 18px; }
.apex-textus .apex-textus-field label {
	display: block;
	margin: 0 0 2px;
	font: 600 11.5px/1.2 var(--apex-display, "Montserrat", system-ui, sans-serif);
	color: #64748b;
	transition: color .15s;
}
.apex-textus .apex-textus-field.is-focus label { color: var(--tu-blue); }
.apex-textus .apex-textus-field.is-bad label { color: #be123c; }
.apex-textus .apex-textus-field input,
.apex-textus .apex-textus-field textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 0 10px;
	border: 0;
	border-bottom: 1.5px solid #dbe3ee;
	border-radius: 0;
	background: transparent;
	color: var(--tu-ink);
	font: 500 15px/1.4 var(--apex-display, "Montserrat", system-ui, sans-serif);
	box-shadow: none;
	outline: none;
	resize: none;
	transition: border-color .15s;
}
.apex-textus .apex-textus-field textarea { min-height: 64px; }
.apex-textus .apex-textus-field input::placeholder,
.apex-textus .apex-textus-field textarea::placeholder { color: #94a3b8; font-weight: 400; }
.apex-textus .apex-textus-field input:focus,
.apex-textus .apex-textus-field textarea:focus { border-bottom-color: var(--tu-blue); }
.apex-textus .apex-textus-field.is-bad input { border-bottom-color: #be123c; }
.apex-textus .apex-textus-err {
	min-height: 0;
	margin: 4px 0 0;
	font: 500 11.5px/1.3 var(--apex-display, "Montserrat", system-ui, sans-serif);
	color: #be123c;
}
.apex-textus .apex-textus-err:empty { display: none; }
.apex-textus .apex-textus-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.apex-textus .apex-textus-legal {
	margin: 16px 4px 16px;
	font: 400 11.5px/1.55 var(--apex-display, "Montserrat", system-ui, sans-serif);
	color: var(--tu-silver);
}
.apex-textus .apex-textus-legal a { color: #cbd5e1; text-decoration: underline; }
.apex-textus .apex-textus-legal a:hover { color: #fff; }

.apex-textus .apex-textus-send {
	display: block;
	width: 100%;
	max-width: 190px;
	margin: 0 auto;
	padding: 13px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--tu-blue);
	color: #fff;
	font: 700 14.5px/1 var(--apex-display, "Montserrat", system-ui, sans-serif);
	letter-spacing: .02em;
	cursor: pointer;
	transition: background-color .2s, opacity .2s, transform .2s;
}
.apex-textus .apex-textus-send:hover:not(:disabled) { background: #0a84e6; transform: translateY(-1px); }
.apex-textus .apex-textus-send:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.apex-textus .apex-textus-send:disabled { opacity: .45; cursor: not-allowed; }
.apex-textus .apex-textus-fail {
	margin: 12px 0 0;
	text-align: center;
	font: 500 12.5px/1.4 var(--apex-display, "Montserrat", system-ui, sans-serif);
	color: #fca5a5;
}
.apex-textus .apex-textus-fail:empty { display: none; }

.apex-textus .apex-textus-foot {
	padding: 0 18px 16px;
	text-align: center;
	font: 500 11.5px/1 var(--apex-display, "Montserrat", system-ui, sans-serif);
	color: #6b7280;
}

/* thank-you state */
.apex-textus .apex-textus-done { padding: 34px 26px 38px; text-align: center; }
.apex-textus .apex-textus-done .apex-textus-check {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(0, 114, 206, .18);
	color: #4da3ff;
}
.apex-textus .apex-textus-done svg { width: 28px; height: 28px; }
.apex-textus .apex-textus-done h3 { margin: 0 0 8px; font: 700 20px/1.25 var(--apex-display, "Montserrat", system-ui, sans-serif); color: #fff; }
.apex-textus .apex-textus-done p { margin: 0; font: 400 14px/1.55 var(--apex-display, "Montserrat", system-ui, sans-serif); color: #c4c4c4; }

/* phones: a sheet pinned above the launcher, edge to edge with a margin */
@media (max-width: 767px) {
	.apex-textus { right: 14px; bottom: 14px; }
	.apex-textus .apex-textus-launch { padding: 13px 18px; font-size: 14px; }
	.apex-textus .apex-textus-panel {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 82px;
		width: auto;
		max-height: calc(100vh - 100px);
		max-height: calc(100dvh - 100px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.apex-textus .apex-textus-panel { animation: none; }
	.apex-textus:not(.is-open) .apex-textus-launch::after { animation: none; }
	.apex-textus .apex-textus-launch,
	.apex-textus .apex-textus-send { transition: none; }
}
@media print { .apex-textus { display: none !important; } }
