/* =========================================================================
 * Layout widgets — Stat Badge + Guarantee Bar
 * Colors are CSS variables overridden per-instance by the Elementor controls.
 * ====================================================================== */

/* ---------------------------------------------------------------------
 * STAT BADGE (e.g. the "750+ Water Heaters Installed" badge)
 * ------------------------------------------------------------------ */
.ail-badge {
	--ail-badge-bg: #3E8E41;
	--ail-badge-wave: rgba(255, 255, 255, .16);
	--ail-badge-text: #ffffff;
	--ail-badge-icon: rgba(255, 255, 255, .85);

	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 26px 30px;
	background: var(--ail-badge-bg);
	color: var(--ail-badge-text);
	border-radius: 40px 10px 40px 10px;
	overflow: hidden;
	isolation: isolate;
	max-width: 100%;
}
.ail-badge__wave {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--ail-badge-wave-h, 100%);
	z-index: 0;
	pointer-events: none;
}
.ail-badge__wave svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.ail-badge__icon,
.ail-badge__num,
.ail-badge__label { position: relative; z-index: 1; }
.ail-badge__icon { font-size: 30px; line-height: 1; color: var(--ail-badge-icon); }
.ail-badge__icon svg { width: 1em; height: 1em; fill: currentColor; }
.ail-badge__num { font-weight: 800; font-size: 52px; line-height: 1; }
.ail-badge__label { font-weight: 700; font-size: 18px; line-height: 1.2; }

/* ---------------------------------------------------------------------
 * GUARANTEE BAR (e.g. the "1 YEAR Labor Warranty" bar)
 * ------------------------------------------------------------------ */
.ail-gbar {
	--ail-gbar-bg: #3E8E41;
	--ail-gbar-wave: rgba(0, 0, 0, .10);
	--ail-gbar-seal: #EAD264;
	--ail-gbar-seal-text: #1c1c1c;
	--ail-gbar-heading: #ffffff;
	--ail-gbar-hl: #EAD26A;
	--ail-gbar-body: rgba(255, 255, 255, .92);
	--ail-gbar-radius: 22px;
	--ail-gbar-seal-size: 200px;
	--ail-gbar-seal-overlap: 26px;

	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 22px 48px;
	border-radius: var(--ail-gbar-radius);
	overflow: visible; /* let the seal break out of the bar */
}

/* clipped fill layer — keeps the semi-circle and rounded corners inside the bar */
.ail-gbar__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--ail-gbar-bg);
	border-radius: var(--ail-gbar-radius);
	overflow: hidden;
}
.ail-gbar__wave { position: absolute; z-index: 0; pointer-events: none; }
.ail-gbar__wave--diagonal {
	inset: 0;
	background: var(--ail-gbar-wave);
	clip-path: polygon(0 0, 62% 0, 26% 100%, 0 100%);
}
.ail-gbar__wave--circle {
	width: var(--ail-gbar-wave-size, 360px);
	height: var(--ail-gbar-wave-size, 360px);
	left: var(--ail-gbar-wave-x, -40px);
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--ail-gbar-wave);
}

.ail-gbar__text { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }

/* seal — in-flow flex item; negative margins let it break past the bar top & bottom */
.ail-gbar__seal {
	position: relative;
	z-index: 2;
	flex: 0 0 var(--ail-gbar-seal-size);
	width: var(--ail-gbar-seal-size);
	height: var(--ail-gbar-seal-size);
	margin-top: calc(-1 * var(--ail-gbar-seal-overlap));
	margin-bottom: calc(-1 * var(--ail-gbar-seal-overlap));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.ail-gbar__seal .seal-shape,
.ail-gbar__seal .seal-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .22));
}
.ail-gbar__seal-gloss {
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
.ail-gbar__seal-gloss::before {
	content: "";
	position: absolute;
	top: -30%;
	left: -40%;
	width: 90%;
	height: 170%;
	background: linear-gradient(115deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
	transform: rotate(16deg);
}
.ail-gbar__seal-top,
.ail-gbar__seal-sub { position: relative; z-index: 2; color: var(--ail-gbar-seal-text); }
.ail-gbar__seal-top { font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: .01em; }
.ail-gbar__seal-sub { font-weight: 700; font-size: 14px; line-height: 1.2; margin-top: 4px; }

/* text */
.ail-gbar__title {
	color: var(--ail-gbar-heading);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 8px;
}
.ail-gbar__title .ail-gbar__hl { color: var(--ail-gbar-hl); }
.ail-gbar__body {
	color: var(--ail-gbar-body);
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
}

/* builder empty state (shared) */
.ail-badge-empty,
.ail-gbar-empty {
	padding: 24px;
	text-align: center;
	color: #6B7280;
	border: 1px dashed #cfd6d2;
	border-radius: 14px;
}

/* responsive */
@media (max-width: 767px) {
	.ail-badge__num { font-size: 42px; }
	.ail-gbar {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 14px;
		padding: 22px 22px 26px;
	}
	.ail-gbar__seal {
		width: 150px;
		height: 150px;
		flex-basis: 150px;
		margin-top: -40px;   /* pokes above the bar's top edge */
		margin-bottom: 0;
	}
	.ail-gbar__seal-top { font-size: 24px; }
	.ail-gbar__title { font-size: 22px; }
	.ail-gbar__wave--circle { width: var(--ail-gbar-wave-size, 240px); height: var(--ail-gbar-wave-size, 240px); left: 50%; transform: translate(-50%, -50%); top: 26%; }
}

/* ---------------------------------------------------------------------
 * RATING BADGE (stars + Google logo + title + subtitle)
 * ------------------------------------------------------------------ */
.ail-rating {
	--ail-star: #F5B301;
	--ail-star-empty: rgba(255, 255, 255, .30);
	display: block;
	text-align: center;
	width: 100%;
}
.ail-rating__row {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	vertical-align: middle;
}
/* stars: rounded SVGs; the fill layer is clipped to an exact em width */
.ail-rating__stars {
	position: relative;
	display: inline-block;
	font-size: 26px;
	line-height: 0;
	vertical-align: middle;
}
.ail-rating__stars-row {
	display: flex;
	gap: .12em;
	width: max-content;
}
.ail-rating__stars-row svg {
	width: 1em;
	height: 1em;
	flex: 0 0 1em;
	display: block;
}
.ail-rating__stars-empty svg { fill: var(--ail-star-empty); }
.ail-rating__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
}
.ail-rating__stars-fill svg { fill: var(--ail-star); }
.ail-rating__g { width: 26px; height: 26px; flex: 0 0 auto; display: block; }
.ail-rating__title { font-weight: 700; font-size: 22px; line-height: 1.2; color: #fff; }
.ail-rating__sub { margin-top: 8px; font-size: 20px; line-height: 1.35; color: rgba(255, 255, 255, .72); }

/* desktop only — larger title to match the design */
@media (min-width: 1025px) {
	.ail-rating__title { font-size: 32px; }
}

@media (max-width: 767px) {
	.ail-rating__row { gap: 8px; }
	.ail-rating__title { font-size: 18px; }
	.ail-rating__sub { font-size: 16px; }
}

/* ---------------------------------------------------------------------
 * CONTACT INFO (icon + title + subtitle list)
 * ------------------------------------------------------------------ */
.ail-contact {
	--ail-ci-icon: #F2C94C;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	row-gap: 28px;
	column-gap: 32px;
}
.ail-contact__item {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.ail-contact__item::before { content: none; } /* neutralise theme list bullets */
.ail-contact__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	font-size: 26px;
	line-height: 1;
	color: var(--ail-ci-icon);
}
.ail-contact__icon i { font-size: 1em; line-height: 1; color: var(--ail-ci-icon); }
.ail-contact__icon svg { width: 1em; height: 1em; fill: var(--ail-ci-icon); }
.ail-contact__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0; /* allow long text to wrap instead of overflowing */
}
.ail-contact__title {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	overflow-wrap: break-word;
	transition: color .2s ease;
}
a.ail-contact__title:hover,
a.ail-contact__title:focus { color: var(--ail-ci-icon); }
.ail-contact__sub {
	font-size: 15px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .88);
	overflow-wrap: break-word;
}

@media (max-width: 767px) {
	.ail-contact { row-gap: 22px; }
	.ail-contact__item { gap: 14px; }
	.ail-contact__icon { font-size: 22px; }
	.ail-contact__title { font-size: 16px; }
	.ail-contact__sub { font-size: 14px; }
}

/* ---------------------------------------------------------------------
 * MAP (interactive Google map with optional tap-to-interact lock)
 * ------------------------------------------------------------------ */
/* Elementor flex containers size widgets to their content. The map iframe is
   absolutely positioned (no intrinsic width), so without this the widget can
   collapse to 0px wide and the map "disappears". Force full column width. */
.elementor-widget-ail_map { width: 100%; max-width: 100%; flex-basis: 100%; }
.elementor-widget-ail_map > .elementor-widget-container { width: 100%; }
.ail-map {
	position: relative;
	width: 100%;
	height: 340px;
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;          /* keeps rounded corners clipping the iframe */
	background: #e5e3df;         /* Google's map tone while loading */
}
.ail-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
/* lock overlay — a div (not a <button>) so theme button styles can't touch it */
.ail-map__lock {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 18px;
	cursor: pointer;
	background: transparent;
	-webkit-tap-highlight-color: transparent;
}
.ail-map__lock:focus-visible { outline: 3px solid #E2BF4F; outline-offset: -3px; }
.ail-map__lock-label {
	pointer-events: none;
	background: rgba(17, 17, 17, .72);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 15px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.ail-map--lock-always .ail-map__lock { display: flex; }
@media (max-width: 767px) {
	.ail-map--lock-mobile .ail-map__lock { display: flex; }
}
.ail-map.is-unlocked .ail-map__lock { display: none; }

/* ---------------------------------------------------------------------
 * STATS BAR (count-up numbers card)
 * ------------------------------------------------------------------ */
.ail-stats {
	--ail-stats-div: #E6EAE7;
	--ail-stats-accent: #3E8E41;
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	border-radius: 16px;
	border-bottom: 4px solid var(--ail-stats-accent);
	overflow: hidden;              /* clips the outer divider lines */
}
.ail-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: -1px 0 0 -1px;         /* pushes first-row / first-column lines outside the clip */
}
.ail-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
	padding: 26px 16px;
	min-width: 0;
}
.ail-stats--dividers .ail-stats__item {
	border-left: 1px solid var(--ail-stats-div);
	border-top: 1px solid var(--ail-stats-div);
}
.ail-stats__icon { font-size: 26px; line-height: 1; color: #3E8E41; margin-bottom: 2px; }
.ail-stats__icon svg { width: 1em; height: 1em; fill: currentColor; }
.ail-stats__num {
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	color: #3E8E41;
	font-variant-numeric: tabular-nums; /* no width jitter while counting */
	white-space: nowrap;
}
.ail-stats__label {
	font-size: 15px;
	line-height: 1.3;
	color: #333;
	overflow-wrap: break-word;
}

@media (max-width: 1024px) {
	.ail-stats__item { padding: 22px 12px; }
	.ail-stats__num { font-size: 38px; }
	.ail-stats__label { font-size: 14px; }
}
@media (max-width: 767px) {
	.ail-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ail-stats__item { padding: 20px 10px; gap: 4px; }
	.ail-stats__num { font-size: 34px; }
	.ail-stats__label { font-size: 13px; }
}

/* Stats Bar overlap: keep the card above the next section when it sticks out */
.elementor-widget-ail_stats_bar { position: relative; z-index: 5; }
.ail-stats { will-change: transform; }

/* ---------------------------------------------------------------------
 * Overflow safety: in row-direction flex containers, a widget's default
 * min-width is its content width (e.g. a row of nowrap tabs, or a carousel
 * track), which can push the page wider than a phone screen. Let every
 * plugin widget shrink to its column instead.
 * ------------------------------------------------------------------ */
.elementor-widget[class*="elementor-widget-ail_"] { min-width: 0; max-width: 100%; }
.ail-reviews, .ail-sa, .ail-stats, .ail-gbar, .ail-map, .ail-contact, .ail-rating { max-width: 100%; }