/* =========================================================================
 * 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;
	top: 0; right: 0; bottom: 0; left: 0; /* fallback for iOS < 14.5 */
	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; }
.ail-badge__num, .ail-badge__label { max-width: 100%; overflow-wrap: break-word; }

/* ---------------------------------------------------------------------
 * 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;
	top: 0; right: 0; bottom: 0; left: 0; /* fallback for iOS < 14.5 */
	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 {
	top: 0; right: 0; bottom: 0; left: 0; /* fallback for iOS < 14.5 */
	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;
	top: 0; right: 0; bottom: 0; left: 0; /* fallback for iOS < 14.5 */
	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;
	top: 12%; right: 12%; bottom: 12%; left: 12%; /* fallback for iOS < 14.5 */
	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);
}
/* Text area = the circle inside the scallops (about 70% of the seal). Long
 * words wrap inside it; ail-guarantee-bar.js then scales the block down if any
 * line would still reach past the scalloped edge (e.g. large font settings). */
.ail-gbar__seal-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 70%;
	max-width: 70%;
	text-align: center;
	-webkit-transform: scale(var(--ail-gbar-fit, 1));
	transform: scale(var(--ail-gbar-fit, 1));
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.ail-gbar__seal-top,
.ail-gbar__seal-sub {
	position: relative;
	z-index: 2;
	/* flex + centre: a word too long for the circle stays whole and overflows
	 * evenly on both sides (instead of breaking mid-word); the script then
	 * scales the block down so it sits inside the scallops. */
	display: flex;
	justify-content: center;
	max-width: 100%;
	text-align: center;
	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 {
		/* follows the Seal Size control (mobile value defaults to 170px) */
		width: var(--ail-gbar-seal-size, 170px);
		height: var(--ail-gbar-seal-size, 170px);
		flex: 0 0 var(--ail-gbar-seal-size, 170px);
		max-width: 100%;
		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);
	--ail-rating-justify: center;
	display: block;
	text-align: center;
	width: 100%;
}
.ail-rating__row {
	display: inline-flex;
	align-items: center;
	/* follows the Alignment control, so a wrapped row stays centred/right */
	justify-content: var(--ail-rating-justify, center);
	gap: 12px;
	flex-wrap: wrap;
	vertical-align: middle;
	max-width: 100%;
}
.ail-rating__title { flex-basis: var(--ail-rating-title-basis, auto); min-width: 0; }
/* 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;
	top: 0; right: 0; bottom: 0; left: 0; /* fallback for iOS < 14.5 */
	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;
	top: 0; right: 0; bottom: 0; left: 0; /* fallback for iOS < 14.5 */
	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%; }