/**
 * Single-Installer PQS Sites — Conversational Quote Widget styles.
 * Shared across every single-installer dealer site running this PQS
 * build. Load this BEFORE apq-widget-single-installer.js runs (it can
 * be enqueued any time — the visibility rule below applies immediately
 * from CSS, not from JS, which is what makes the flash-of-raw-form fix
 * work). Brand colours are read from --apq-primary / --apq-accent,
 * which the JS sets per-site from wp_localize_script — see fallbacks
 * below, which are Premier Pools' colours and will differ per site.
 *
 * ONE THING TO VERIFY PER SITE: the data-form-id value below is "24" —
 * confirmed identical on both Premier Pools and Blue Dot Pools, so this
 * file needs no edit for either of those. Still check it on any NEW
 * dealer site before enabling (inspect form[data-form-id] on that
 * site's quote page) rather than assuming it'll always be 24.
 * Deliberately NOT a blanket [data-form-id] rule — a site may have
 * other, unrelated JetFormBuilder forms elsewhere on the page (a
 * footer signup form, etc.) that must not be hidden by this rule.
 */

/* ---- Flash-of-raw-form fix -------------------------------------------
   Hidden by default. JS adds .apq-ready once the bubble UI is built,
   OR after a 4s safety-net timeout if the script fails for any reason —
   so the form is never permanently stuck invisible. */
form[data-form-id="24"] {
	visibility: hidden;
}
form[data-form-id="24"].apq-ready {
	visibility: visible;
}

/* ---- Depot: off-screen, not display:none -----------------------------
   display:none would break the Google Places autocomplete binding on
   the address input (it measures the element). Position off-screen
   instead so it stays "live" but invisible. */
.apq-depot {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Bubble shell ------------------------------------------------------ */
.apq-bubbles {
	max-width: 560px;
	margin: 0 auto;
	font-family: inherit;
}

.apq-step {
	display: none;
	animation: apq-fade-in 0.35s ease backwards;
}
.apq-step--active {
	display: block;
}

/* animation-delay requires animation-fill-mode: backwards (or both) —
   otherwise the staggered elements render fully visible immediately and
   only "flash" once their delayed animation eventually plays. */
@keyframes apq-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.apq-bot-bubble {
	background: #f1f5f9;
	color: #1f2937;
	border-radius: 16px 16px 16px 4px;
	padding: 12px 16px;
	margin: 0 0 12px;
	max-width: 90%;
	line-height: 1.45;
}

.apq-step .jet-form-builder-row,
.apq-step input[type='text'],
.apq-step input[type='email'],
.apq-step input[type='tel'],
.apq-step select,
.apq-step textarea {
	width: 100%;
	margin-bottom: 12px;
}

.apq-link {
	background: none;
	border: none;
	color: var(--apq-accent, #2188c2);
	text-decoration: underline;
	cursor: pointer;
	padding: 4px 0;
	font-size: 0.95em;
}

.apq-manual-address {
	background: #fff8ec;
	border-left: 3px solid var(--apq-primary, #ff5c39);
	padding: 12px 16px;
	border-radius: 6px;
	margin-top: 8px;
}

.apq-nav {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}

.apq-btn {
	border: none;
	border-radius: 24px;
	padding: 10px 22px;
	font-weight: 600;
	cursor: pointer;
	font-size: 1em;
}
.apq-btn--primary {
	background: var(--apq-primary, #ff5c39);
	color: #fff;
}
.apq-btn--primary:hover {
	filter: brightness(0.9);
}
.apq-btn--ghost {
	background: transparent;
	color: #6b7280;
	border: 1px solid #d1d5db;
}
.apq-btn--ghost:hover {
	background: #f3f4f6;
}

.apq-summary dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	background: #f9fafb;
	border-radius: 8px;
	padding: 16px;
	margin: 0 0 16px;
}
.apq-summary dt {
	font-weight: 600;
	color: #6b7280;
}
.apq-summary dd {
	margin: 0;
}

.apq-progress {
	text-align: center;
	padding: 24px 0;
}
.apq-progress__bubble {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--apq-accent, #2188c2);
	margin: 0 4px;
	animation: apq-bounce 1s infinite ease-in-out backwards;
}
.apq-progress__bubble--1 {
	animation-delay: 0s;
}
.apq-progress__bubble--2 {
	animation-delay: 0.15s;
}
.apq-progress__bubble--3 {
	animation-delay: 0.3s;
}
@keyframes apq-bounce {
	0%,
	80%,
	100% {
		transform: scale(0.6);
		opacity: 0.5;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}