/**
 * Quick CTA — front-end styles.
 *
 * Sizing, spacing and colours come from custom properties printed inline by
 * PHP (--qcta-size, --qcta-gap, --qcta-x, --qcta-y, --qcta-radius, --qcta-bg).
 * --qcta-bar-h is measured at runtime by the script so the floating stack and
 * the page content never sit underneath the fixed form bar.
 */

.qcta {
	--qcta-size: 52px;
	--qcta-gap: 12px;
	--qcta-x: 20px;
	--qcta-y: 24px;
	--qcta-radius: 50%;

	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qcta-gap);
	z-index: 99990;
	pointer-events: none;
}

.qcta * {
	box-sizing: border-box;
}

/* Horizontal anchor. */
.qcta--right {
	right: var(--qcta-x);
	align-items: flex-end;
}

.qcta--left {
	left: var(--qcta-x);
	align-items: flex-start;
}

/* Vertical anchor — lifted above the fixed form bar when one is present. */
.qcta--bottom {
	bottom: calc(var(--qcta-y) + var(--qcta-bar-h, 0px));
}

.qcta--middle {
	top: 50%;
	transform: translateY(-50%);
}

.qcta__list {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: var(--qcta-gap);
	pointer-events: none;
}

.qcta--stack-reverse .qcta__list {
	flex-direction: column-reverse;
}

/* ---------------------------------------------------------------- Buttons */

.qcta__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--qcta-size);
	height: var(--qcta-size);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--qcta-radius);
	background: var(--qcta-bg, #0068ff);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.qcta__item:hover,
.qcta__item:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.3);
	color: #fff;
	text-decoration: none;
}

.qcta__item:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

.qcta__item:active {
	transform: scale(0.96);
}

.qcta__glyph {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.qcta__icon {
	display: block;
	width: calc(var(--qcta-size) * 0.46);
	height: calc(var(--qcta-size) * 0.46);
	fill: currentColor;
}

/* Brand artwork that already carries its own colours ------------------- */

/* "tile" — an app-icon style logo becomes the entire button surface. The
   rounding is applied to the wrapper, not the button, so the pulse rings and
   the tooltip (both siblings) are not clipped away. */
.qcta__item--tile .qcta__glyph {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}

/* Slightly inset so the artwork's own edge blends into the matching button
   colour instead of being cropped to a sliver by the round mask. */
.qcta__item--tile .qcta__icon {
	width: 88%;
	height: 88%;
}

/* "plate" — a full-colour glyph inset on a light surface, kept clear of the
   rounded edge. */
.qcta__item--plate .qcta__icon {
	width: 60%;
	height: 60%;
}

/* ------------------------------------------------------ Tooltip / labels */

.qcta__label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) scale(0.9);
	white-space: nowrap;
	padding: 6px 12px;
	border-radius: 8px;
	background: #111827;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	font-family: inherit;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

.qcta__label::after {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -5px;
	border: 5px solid transparent;
}

.qcta--right .qcta__label {
	right: calc(100% + 12px);
	transform-origin: right center;
}

.qcta--right .qcta__label::after {
	left: 100%;
	border-left-color: #111827;
}

.qcta--left .qcta__label {
	left: calc(100% + 12px);
	transform-origin: left center;
}

.qcta--left .qcta__label::after {
	right: 100%;
	border-right-color: #111827;
}

.qcta--has-tooltip .qcta__item:hover .qcta__label,
.qcta--has-tooltip .qcta__item:focus-visible .qcta__label {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) scale(1);
}

/* -------------------------------------------------- Call "ringing" effect */

.qcta__ring {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	border: 2px solid var(--qcta-ring, #ef4444);
	background: var(--qcta-ring, #ef4444);
	opacity: 0.45;
	animation: qcta-ring 1.8s cubic-bezier(0.19, 1, 0.22, 1) infinite;
	pointer-events: none;
}

.qcta__ring--delay {
	animation-delay: 0.6s;
}

.qcta__item--ringing .qcta__glyph {
	animation: qcta-shake 1.8s ease-in-out infinite;
	transform-origin: 50% 60%;
}

@keyframes qcta-ring {
	0% {
		transform: scale(1);
		opacity: 0.45;
	}

	70% {
		opacity: 0;
	}

	100% {
		transform: scale(2.1);
		opacity: 0;
	}
}

@keyframes qcta-shake {
	0%,
	52%,
	100% {
		transform: rotate(0deg);
	}

	4%,
	12%,
	20%,
	28% {
		transform: rotate(-16deg);
	}

	8%,
	16%,
	24%,
	32% {
		transform: rotate(16deg);
	}

	36% {
		transform: rotate(0deg);
	}
}

/* --------------------------------------------------------- Toggle handle */

.qcta__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	order: 2;
	width: var(--qcta-size);
	height: var(--qcta-size);
	padding: 0;
	border: 0;
	border-radius: var(--qcta-radius);
	background: #1f2937;
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
	transition: transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.qcta__toggle:hover {
	transform: scale(1.06);
}

.qcta__toggle .qcta__glyph--close,
.qcta__toggle[aria-expanded="true"] .qcta__glyph--open {
	display: none;
}

.qcta__toggle[aria-expanded="true"] .qcta__glyph--close {
	display: flex;
}

.qcta--mode-toggle .qcta__list {
	order: 1;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.22s ease;
}

.qcta--mode-toggle.is-open .qcta__list {
	max-height: 80vh;
	overflow: visible;
	opacity: 1;
	transform: translateY(0);
}

/* Back-to-top only appears once the page has been scrolled. Instead of
   toggling `display` (which pops the whole stack), the button collapses its own
   box — the negative margin swallows the flex gap — so it fades and slides in
   while the buttons above glide into place. */
.qcta__item--top {
	height: 0;
	margin-top: calc(var(--qcta-gap) * -1);
	opacity: 0;
	visibility: hidden;
	transform: scale(0.4);
	pointer-events: none;
	transition:
		height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1),
		margin-top 0.3s cubic-bezier(0.2, 0.9, 0.3, 1),
		opacity 0.25s ease,
		transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.35),
		visibility 0.3s;
}

.qcta.is-scrolled .qcta__item--top {
	height: var(--qcta-size);
	margin-top: 0;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	pointer-events: auto;
}

/* Restore the shared hover lift, which the rule above would otherwise win. */
.qcta.is-scrolled .qcta__item--top:hover,
.qcta.is-scrolled .qcta__item--top:focus-visible {
	transform: scale(1.08);
}

.qcta.is-scrolled .qcta__item--top:active {
	transform: scale(0.96);
}

/* ------------------------------------------------------- Fixed form bar */

.qcta-bar {
	--qcta-bar-bg: #111827;
	--qcta-accent: #ef4444;

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 99989;
	background: var(--qcta-bar-bg);
	box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.22);
	box-sizing: border-box;
}

.qcta-bar * {
	box-sizing: border-box;
}

/* Keeps the end of the document reachable above the fixed bar without
   touching the theme's own body padding. */
.qcta-bar-spacer {
	height: var(--qcta-bar-h, 0px);
}

/* ------------------------------------------------------------------ Form */

.qcta-form {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #1f2937;
}

.qcta-form__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 20px;
}

.qcta-form__intro {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	min-width: 0;
}

.qcta-form__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.qcta-form__desc {
	font-size: 13px;
	opacity: 0.75;
}

.qcta-form__fields {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.qcta-form__row {
	flex: 1 1 150px;
	min-width: 0;
	margin: 0;
}

.qcta-form__row--submit {
	flex: 0 0 auto;
}

.qcta-form__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

/* Themes are not required to ship .screen-reader-text, so define our own copy
   scoped to the form — without it the bar labels render as visible text. */
.qcta-form .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.qcta-form__req {
	color: #ef4444;
}

.qcta-form__control {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: #111827;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qcta-form__control:focus {
	border-color: var(--qcta-accent, #2563eb);
	/* Neutral ring first, then an accent-tinted one where color-mix is supported. */
	box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--qcta-accent, #2563eb) 22%, transparent);
	outline: none;
}

.qcta-form__row.has-error .qcta-form__control {
	border-color: #ef4444;
}

.qcta-form__error {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	color: #fca5a5;
}

textarea.qcta-form__control {
	resize: vertical;
}

.qcta-form__consent {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 10px;
	font-size: 12.5px;
	opacity: 0.7;
}

.qcta-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	border: 0;
	border-radius: 10px;
	background: var(--qcta-accent, #2563eb);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.qcta-form__submit:hover {
	filter: brightness(1.08);
}

.qcta-form__submit[disabled] {
	opacity: 0.7;
	cursor: default;
}

.qcta-form__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: qcta-spin 0.7s linear infinite;
}

.qcta-form.is-sending .qcta-form__spinner {
	display: block;
}

@keyframes qcta-spin {
	to {
		transform: rotate(360deg);
	}
}

.qcta-form__message {
	max-width: 1200px;
	margin: 0 auto;
	font-size: 14px;
}

.qcta-form__message:empty {
	display: none;
}

.qcta-form__message.is-success {
	padding: 16px 20px;
	color: #6ee7b7;
	font-weight: 600;
	text-align: center;
}

.qcta-form__message.is-error {
	padding: 0 20px 12px;
	color: #fca5a5;
}

/* Once accepted, the bar collapses to the confirmation only. */
.qcta-form.is-done .qcta-form__inner,
.qcta-form.is-done .qcta-form__consent {
	display: none;
}

/* Shown to administrators only, when the shortcode is not configured yet. */
.qcta-form__notice {
	padding: 12px 16px;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	color: #1f2937;
	font-size: 14px;
}

/* Honeypot — hidden from humans, reachable by bots. */
.qcta-form__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -------------------------------------------------------- Bar colour mode */

.qcta-form--bar {
	color: #fff;
}

.qcta-form--bar .qcta-form__control {
	border-color: transparent;
}

/* ------------------------------------------------------- Inline (shortcode) */

.qcta-form--inline {
	max-width: 540px;
	padding: 28px;
	border: 1px solid #e8eaee;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.06);
}

.qcta-form--inline .qcta-form__inner {
	display: block;
	max-width: none;
	padding: 0;
}

.qcta-form--inline .qcta-form__intro {
	gap: 5px;
	margin-bottom: 20px;
}

.qcta-form--inline .qcta-form__title {
	font-size: 21px;
	letter-spacing: -0.01em;
	color: #111827;
}

.qcta-form--inline .qcta-form__desc {
	font-size: 14px;
	line-height: 1.55;
	color: #6b7280;
	opacity: 1;
}

.qcta-form--inline .qcta-form__fields {
	display: block;
}

.qcta-form--inline .qcta-form__row {
	margin-bottom: 16px;
}

.qcta-form--inline .qcta-form__row:last-child {
	margin-bottom: 0;
}

.qcta-form--inline .qcta-form__label {
	margin-bottom: 7px;
	font-size: 13px;
	letter-spacing: 0.01em;
}

.qcta-form--inline .qcta-form__req {
	margin-left: 2px;
	font-size: 12px;
}

.qcta-form--inline .qcta-form__control {
	padding: 12px 14px;
	border-color: #d7dae0;
	border-radius: 10px;
}

.qcta-form--inline .qcta-form__control::placeholder {
	color: #9ca3af;
}

.qcta-form--inline .qcta-form__row--submit {
	margin-top: 20px;
}

.qcta-form--inline .qcta-form__submit {
	width: 100%;
	padding: 13px 24px;
	letter-spacing: 0.01em;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.qcta-form--inline .qcta-form__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 24, 40, 0.14);
}

.qcta-form--inline .qcta-form__submit:active {
	transform: translateY(0);
}

.qcta-form--inline textarea.qcta-form__control {
	min-height: 96px;
}

.qcta-form--inline .qcta-form__consent,
.qcta-form--inline .qcta-form__message {
	padding: 0;
	margin-top: 12px;
	color: inherit;
}

.qcta-form--inline .qcta-form__message.is-success {
	padding: 12px 14px;
	border-radius: 10px;
	background: #ecfdf5;
	color: #047857;
	text-align: left;
}

.qcta-form--inline .qcta-form__message.is-error {
	padding: 12px 14px;
	border-radius: 10px;
	background: #fef2f2;
	color: #b91c1c;
}

.qcta-form--inline .qcta-form__error {
	color: #dc2626;
}

/* --------------------------------------------------------- Small screens */

@media (max-width: 900px) {
	/* The bar collapses to a single row: inputs + submit, nothing else.
	   The intro is dropped because placeholders already carry the message. */
	.qcta-form--bar .qcta-form__inner {
		flex-wrap: nowrap;
		gap: 8px;
		padding: 10px 12px;
	}

	.qcta-form--bar .qcta-form__intro {
		display: none;
	}

	.qcta-form--bar .qcta-form__fields {
		flex-wrap: nowrap;
		gap: 8px;
	}

	/* flex-basis 0 + min-width 0 lets every field shrink instead of wrapping. */
	.qcta-form--bar .qcta-form__row {
		flex: 1 1 0;
		min-width: 0;
	}

	.qcta-form--bar .qcta-form__row--submit {
		flex: 0 0 auto;
	}

	.qcta-form--bar .qcta-form__submit {
		padding: 11px 16px;
		font-size: 14px;
	}

	.qcta-form--bar .qcta-form__control {
		padding: 10px 12px;
		font-size: 16px; /* Stops iOS Safari from zooming on focus. */
		text-overflow: ellipsis;
	}

	/* Keep a message field on the same line as the rest. */
	.qcta-form--bar textarea.qcta-form__control {
		height: 42px;
		min-height: 0;
		overflow: hidden;
		resize: none;
	}

	.qcta-form--bar .qcta-form__message.is-error {
		padding: 0 12px 10px;
	}

	.qcta-form--bar .qcta-form__message.is-success {
		padding: 12px;
	}

	.qcta-form--bar .qcta-form__consent {
		padding: 0 12px 8px;
	}

	.qcta--has-tooltip .qcta__label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qcta__ring,
	.qcta__item--ringing .qcta__glyph {
		animation: none !important;
	}

	.qcta__item,
	.qcta__label {
		transition: none !important;
	}

	.qcta__item--top {
		transition: none !important;
	}
}