/* Dream Greener — Summer 2026 floating offer bar. Homepage only.
   Brand tokens scoped to the bar so nothing leaks into the host theme. */
.dg-bar{
	--dg-midnight:#263E4C;
	--dg-verdant:#57931D;
	--dg-verdant-light:#A6D82B;
	--dg-stillwater:#B6CCC8;
	--dg-marigold:#F8D15D;
	--dg-paper:#F7F5F0;

	position:fixed;left:0;right:0;bottom:0;
	/* Below Popup Maker / any consent overlay (theirs sits at 1999999999),
	   above ordinary page content. */
	z-index:99990;
	background:var(--dg-midnight);
	color:var(--dg-paper);
	font-family:'Mulish',system-ui,-apple-system,sans-serif;
	border-top:2px solid var(--dg-verdant-light);
	box-shadow:0 -10px 40px rgba(0,0,0,.28);
	transform:translateY(110%);
	transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.dg-bar.is-in{transform:translateY(0)}
.dg-bar.is-out{transform:translateY(110%)}

.dg-bar *{box-sizing:border-box}

.dg-bar .dg-inner{
	max-width:1180px;margin:0 auto;
	display:flex;align-items:center;gap:clamp(20px,3vw,44px);
	padding:16px clamp(20px,4vw,40px);
}

.dg-bar .dg-lead{
	flex:0 0 auto;padding-right:clamp(20px,3vw,40px);
	border-right:1px solid rgba(182,204,200,.22);
}
.dg-bar .dg-lead .season{
	font-family:'Satisfy',cursive;font-size:22px;
	color:var(--dg-verdant-light);line-height:1;display:block;
}
.dg-bar .dg-lead .lead{
	display:block;font-weight:800;font-size:16px;line-height:1.25;
	max-width:13ch;margin-top:4px;color:var(--dg-paper);
}

.dg-bar .dg-offers{display:flex;gap:clamp(20px,3vw,44px);flex:1 1 auto}
.dg-bar .dg-offer{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.dg-bar .dg-offer .label{
	font-weight:700;letter-spacing:.14em;text-transform:uppercase;
	font-size:11px;color:var(--dg-stillwater);
}
.dg-bar .dg-offer .line{font-weight:600;font-size:14.5px;line-height:1.3;color:var(--dg-paper)}
.dg-bar .dg-offer .line .amt{color:var(--dg-marigold);font-weight:800}

.dg-bar .dg-cta{
	display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
	font-weight:800;font-size:13px;letter-spacing:.01em;
	color:var(--dg-midnight);background:var(--dg-verdant-light);
	text-decoration:none;border-radius:999px;padding:9px 16px;
	border:1.5px solid var(--dg-verdant-light);
	transition:background .18s ease,color .18s ease,transform .18s ease;
}
.dg-bar .dg-cta.ghost{background:transparent;color:var(--dg-verdant-light)}
.dg-bar .dg-cta:hover{background:transparent;color:var(--dg-verdant-light);transform:translateY(-1px)}
.dg-bar .dg-cta.ghost:hover{background:var(--dg-verdant-light);color:var(--dg-midnight)}
.dg-bar .dg-cta .arr{transition:transform .18s ease}
.dg-bar .dg-cta:hover .arr{transform:translateX(3px)}

.dg-bar .dg-close{
	flex:0 0 auto;margin-left:auto;align-self:flex-start;
	-webkit-appearance:none;appearance:none;
	background:transparent;border:0;box-shadow:none;cursor:pointer;
	/* Hard reset: the host theme puts 50px padding on every <button>, which with
	   border-box would override width and stretch this into an ellipse. */
	padding:0;min-width:0;
	color:var(--dg-stillwater);font-family:inherit;font-size:24px;line-height:1;
	width:34px;height:34px;
	display:flex;align-items:center;justify-content:center;
	transition:color .18s ease;
}
.dg-bar .dg-close:hover{color:var(--dg-paper)}
.dg-bar .dg-close:focus-visible,
.dg-bar .dg-cta:focus-visible{outline:2px solid var(--dg-verdant-light);outline-offset:3px}

@media (max-width:860px){
	.dg-bar .dg-inner{flex-wrap:wrap;gap:14px;padding:14px 18px 18px;position:relative}
	.dg-bar .dg-lead{
		border-right:0;border-bottom:1px solid rgba(182,204,200,.2);
		/* reserve room on the right so the heading never runs under the close button */
		padding:0 52px 12px 0;width:100%;display:flex;align-items:baseline;gap:10px;
	}
	.dg-bar .dg-lead .lead{max-width:none}
	.dg-bar .dg-offers{flex-direction:column;gap:16px;width:100%}
	.dg-bar .dg-offer{width:100%}
	/* Plain, brighter dismiss glyph pinned top-right (no background). */
	.dg-bar .dg-close{
		position:absolute;top:12px;right:14px;margin:0;
		color:var(--dg-paper);
	}
}

@media (prefers-reduced-motion:reduce){
	.dg-bar{transition:none}
	.dg-bar .dg-cta,
	.dg-bar .dg-cta .arr,
	.dg-bar .dg-close{transition:none}
}

/* Lift the Chatbase chat bubble above the banner while it's showing so the two
   don't collide in the bottom-right corner. The widget sets its bottom/right
   inline, so override with !important. --dg-summer-banner-h is published by
   banner.js (the bar's live height); fallback covers the brief pre-measure gap.
   Scoped to the bubble only — the open chat panel is left to Chatbase so its
   near-fullscreen mobile layout isn't disturbed. */
html.dg-summer-banner-open #chatbase-bubble-button{
	bottom:calc(var(--dg-summer-banner-h, 72px) + 18px) !important;
	transition:bottom .35s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:reduce){
	html.dg-summer-banner-open #chatbase-bubble-button{transition:none}
}