/* Solar4life Marketing — front-end styles */

.s4lm-bar,
.s4lm-trust,
.s4lm-figures,
.s4lm-side,
.s4lm-popup,
.s4lm-card {
	--s4lm-deep: #163b32;
	--s4lm-ink: #203c35;
	--s4lm-bright: #86df94;
	--s4lm-mid: #2f7d4e;
	--s4lm-cream: #faf9f5;
	--s4lm-line: #e0eae4;
	box-sizing: border-box;
	font-family: inherit;
}

.s4lm-bar *,
.s4lm-trust *,
.s4lm-figures *,
.s4lm-side *,
.s4lm-popup *,
.s4lm-card * { box-sizing: border-box; }

.s4lm-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Announcement bar ---------------------------------------------------- */

.s4lm-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 11px 48px;
	z-index: 90;
}

.s4lm-bar--bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
}

.s4lm-bar--dark { background: var(--s4lm-deep); color: var(--s4lm-cream); }
.s4lm-bar--accent { background: var(--s4lm-bright); color: var(--s4lm-deep); }
.s4lm-bar--light { background: var(--s4lm-cream); color: var(--s4lm-ink); border-bottom: 1px solid var(--s4lm-line); }

.s4lm-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	max-width: 1180px;
	width: 100%;
}

.s4lm-bar__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	font-weight: 500;
	text-align: center;
}

.s4lm-bar__cta {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, opacity .15s ease;
}

.s4lm-bar--dark .s4lm-bar__cta { background: var(--s4lm-bright); color: var(--s4lm-deep); }
.s4lm-bar--accent .s4lm-bar__cta { background: var(--s4lm-deep); color: var(--s4lm-cream); }
.s4lm-bar--light .s4lm-bar__cta { background: var(--s4lm-deep); color: var(--s4lm-cream); }
.s4lm-bar__cta:hover { transform: translateY(-1px); opacity: .92; }

.s4lm-bar__close {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
	opacity: .65;
}

.s4lm-bar__close:hover { opacity: 1; }

.s4lm-countdown {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .3px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
}

.s4lm-bar--accent .s4lm-countdown,
.s4lm-bar--light .s4lm-countdown { background: rgba(22, 59, 50, .1); }

/* --- Accreditation strip ------------------------------------------------- */

.s4lm-trust {
	background: var(--s4lm-cream);
	border-top: 1px solid var(--s4lm-line);
	border-bottom: 1px solid var(--s4lm-line);
	padding: 18px 16px;
	overflow: hidden;
}

.s4lm-trust__heading {
	margin: 0 0 12px;
	text-align: center;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--s4lm-mid);
}

.s4lm-trust__viewport { overflow: hidden; }

.s4lm-trust__track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.s4lm-trust.is-marquee .s4lm-trust__track {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	animation: s4lm-scroll 42s linear infinite;
}

.s4lm-trust.is-marquee:hover .s4lm-trust__track { animation-play-state: paused; }

@keyframes s4lm-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.s4lm-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid var(--s4lm-line);
	border-radius: 999px;
	color: var(--s4lm-ink);
	white-space: nowrap;
	flex: 0 0 auto;
}

.s4lm-trust__item .s4lm-icon { color: var(--s4lm-mid); }
.s4lm-trust__label { font-size: 13.5px; font-weight: 650; }
.s4lm-trust__sub { font-size: 12px; color: #5d7a6f; }

@media (prefers-reduced-motion: reduce) {
	.s4lm-trust.is-marquee .s4lm-trust__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
}

/* --- Achievement figures ------------------------------------------------- */

.s4lm-figures {
	background: var(--s4lm-deep);
	color: var(--s4lm-cream);
	padding: 32px 20px;
}

.s4lm-figures__heading {
	margin: 0 0 20px;
	text-align: center;
	font-size: 11px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--s4lm-bright);
}

.s4lm-figures__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px;
	max-width: 1080px;
	margin: 0 auto;
}

.s4lm-figures__item { text-align: center; }
.s4lm-figures__item strong { display: block; font-size: 30px; line-height: 1.15; font-weight: 700; }
.s4lm-figures__item span { display: block; margin-top: 6px; font-size: 13.5px; color: #d8e8df; }

/* --- Sticky side promo --------------------------------------------------- */

.s4lm-side {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 280px;
	background: #fff;
	border: 1px solid var(--s4lm-line);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(22, 59, 50, .16);
	padding: 22px 20px 20px;
	z-index: 9980;
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
}

.s4lm-side--right { right: 18px; }
.s4lm-side--left { left: 18px; }
.s4lm-side.is-in { opacity: 1; }
.s4lm-side--right:not(.is-in) { transform: translate(24px, -50%); }
.s4lm-side--left:not(.is-in) { transform: translate(-24px, -50%); }

.s4lm-side__heading { margin: 0 0 8px; font-size: 16.5px; line-height: 1.35; font-weight: 700; color: var(--s4lm-deep); }
.s4lm-side__body { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #4a6459; }

.s4lm-side__cta {
	display: block;
	text-align: center;
	padding: 11px 16px;
	border-radius: 999px;
	background: var(--s4lm-bright);
	color: var(--s4lm-deep);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.s4lm-side__cta:hover { background: #6fd382; }

.s4lm-side__close {
	position: absolute;
	top: 6px;
	right: 10px;
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	color: #8aa196;
	cursor: pointer;
	padding: 4px;
}

.s4lm-side__close:hover { color: var(--s4lm-deep); }

@media (max-width: 1180px) {
	.s4lm-side--desktop { display: none; }
	.s4lm-side:not(.s4lm-side--desktop) {
		top: auto;
		bottom: 20px;
		transform: none;
		width: auto;
		left: 14px;
		right: 14px;
	}
	.s4lm-side:not(.s4lm-side--desktop):not(.is-in) { transform: translateY(16px); }
}

/* --- Offer popup --------------------------------------------------------- */

.s4lm-popup {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.s4lm-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 35, 29, .55);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .3s ease;
}

.s4lm-popup.is-in .s4lm-popup__backdrop { opacity: 1; }

.s4lm-popup__panel {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: 20px;
	padding: 34px 32px 28px;
	text-align: center;
	box-shadow: 0 30px 70px rgba(15, 35, 29, .3);
	transform: translateY(14px) scale(.985);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
}

.s4lm-popup.is-in .s4lm-popup__panel { opacity: 1; transform: none; }

.s4lm-popup__mark {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--s4lm-bright);
	color: var(--s4lm-deep);
	display: flex;
	align-items: center;
	justify-content: center;
}

.s4lm-popup__mark .s4lm-icon { width: 24px; height: 24px; }

.s4lm-popup__title { margin: 0 0 10px; font-size: 23px; line-height: 1.25; font-weight: 700; color: var(--s4lm-deep); }
.s4lm-popup__body { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #4a6459; }
.s4lm-popup__countdown { margin: 0 0 18px; }
.s4lm-popup__countdown .s4lm-countdown { background: rgba(22, 59, 50, .08); color: var(--s4lm-deep); }

.s4lm-popup__cta {
	display: block;
	padding: 13px 20px;
	border-radius: 999px;
	background: var(--s4lm-deep);
	color: var(--s4lm-cream);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.s4lm-popup__cta:hover { background: #102e27; }

.s4lm-popup__later {
	display: block;
	width: 100%;
	margin-top: 12px;
	background: none;
	border: 0;
	color: #7a938a;
	font-size: 13.5px;
	cursor: pointer;
	text-decoration: underline;
}

.s4lm-popup__note { margin: 16px 0 0; font-size: 11.5px; line-height: 1.5; color: #8aa196; }

.s4lm-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: #8aa196;
	cursor: pointer;
	padding: 0;
}

.s4lm-popup__close:hover { color: var(--s4lm-deep); }

@media (max-width: 860px) {
	.s4lm-bar { padding: 12px 42px 12px 16px; align-items: flex-start; }
	.s4lm-bar__close { top: 8px; right: 6px; transform: none; }
	.s4lm-bar__text { font-size: 13.5px; }
	.s4lm-figures__item strong { font-size: 25px; }
	.s4lm-popup__panel { padding: 30px 22px 24px; }
	.s4lm-popup__title { font-size: 20px; }
}

/* --- Inline promo card --------------------------------------------------- */

.s4lm-card {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	background: var(--s4lm-cream);
	border: 1px solid var(--s4lm-line);
	border-left: 4px solid var(--s4lm-bright);
	border-radius: 14px;
	padding: 22px 24px;
	margin: 28px 0;
}

.s4lm-card__mark { color: var(--s4lm-mid); display: flex; }
.s4lm-card__mark .s4lm-icon { width: 26px; height: 26px; }
.s4lm-card__text { flex: 1 1 220px; }
.s4lm-card__heading { margin: 0 0 4px; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--s4lm-deep); }
.s4lm-card__body { margin: 0; font-size: 14px; line-height: 1.55; color: #4a6459; }

.s4lm-card__cta {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--s4lm-deep);
	color: var(--s4lm-cream);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.s4lm-card__cta:hover { background: #102e27; }

/* --- Consent banner ------------------------------------------------------ */

.s4lm-consent {
	--s4lm-deep: #163b32;
	--s4lm-bright: #86df94;
	--s4lm-cream: #faf9f5;
	--s4lm-line: #e0eae4;
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 99995;
	width: min(390px, calc(100vw - 32px));
	background: #fff;
	border: 1px solid var(--s4lm-line);
	border-radius: 16px;
	box-shadow: 0 18px 46px rgba(22, 59, 50, .2);
	padding: 20px 22px 18px;
	font-family: inherit;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .3s ease, transform .3s ease;
	box-sizing: border-box;
}

.s4lm-consent * { box-sizing: border-box; }
.s4lm-consent.is-in { opacity: 1; transform: none; }

.s4lm-consent__text { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: #3c574c; }
.s4lm-consent__link { margin: 0 0 14px; font-size: 12.5px; }
.s4lm-consent__link a { color: #2f7d4e; }

.s4lm-consent__actions { display: flex; gap: 10px; }

.s4lm-consent__yes,
.s4lm-consent__no {
	flex: 1 1 0;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}

.s4lm-consent__yes { background: var(--s4lm-deep); color: var(--s4lm-cream); border: 1px solid var(--s4lm-deep); }
.s4lm-consent__no { background: #fff; color: #3c574c; border: 1px solid var(--s4lm-line); }
.s4lm-consent__yes:hover { background: #102e27; }
.s4lm-consent__no:hover { border-color: #b9ccc2; }

@media (max-width: 600px) {
	.s4lm-consent { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* --- Share and follow buttons -------------------------------------------- */

.s4lm-share,
.s4lm-follow {
	--s4lm-deep: #163b32;
	--s4lm-line: #e0eae4;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: inherit;
}

.s4lm-share { margin: 30px 0; padding-top: 22px; border-top: 1px solid var(--s4lm-line); }
.s4lm-follow { justify-content: center; padding: 26px 16px; background: #faf9f5; border-top: 1px solid var(--s4lm-line); }

.s4lm-share__label,
.s4lm-follow__label {
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	color: #5d7a6f;
	margin-right: 4px;
}

.s4lm-share__btn,
.s4lm-follow__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--s4lm-line);
	background: #fff;
	color: var(--s4lm-deep);
	cursor: pointer;
	padding: 0;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}

.s4lm-share__btn svg,
.s4lm-follow__btn svg { width: 18px; height: 18px; }

.s4lm-share__btn:hover,
.s4lm-follow__btn:hover { background: var(--s4lm-deep); color: #faf9f5; transform: translateY(-1px); }

.s4lm-share__copy.is-copied { background: #86df94; color: var(--s4lm-deep); border-color: #86df94; }