/* SolarSpark widget — scoped under .solarspark-widget so it never leaks
   into (or is leaked into by) the host theme. */

.solarspark-widget {
	--ss-accent: #F2A93B;
	--ss-ink: #0B3D3A;
	--ss-paper: #FFFDF7;
	--ss-mist: #E7F1EE;
	--ss-muted: #5B6B68;
	--ss-danger: #C4432B;
	--ss-radius: 18px;
	--ss-font-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
	--ss-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	all: initial;
	display: block;
	font-family: var(--ss-font-body);
	color: var(--ss-ink);
	max-width: 480px;
	margin: 2rem auto;
	box-sizing: border-box;
}
.solarspark-widget *,
.solarspark-widget *::before,
.solarspark-widget *::after {
	box-sizing: border-box;
	font-family: inherit;
}

@font-face {
	font-family: 'Fraunces';
	src: local('Fraunces');
	font-display: swap;
}

.solarspark-widget .ss-card {
	background: var(--ss-paper);
	border-radius: var(--ss-radius);
	padding: 2rem 1.75rem;
	box-shadow: 0 1px 2px rgba(11,61,58,0.06), 0 20px 40px -20px rgba(11,61,58,0.25);
	border: 1px solid rgba(11,61,58,0.08);
	position: relative;
	overflow: hidden;
}
.solarspark-widget .ss-card::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, var(--ss-accent) 0%, transparent 70%);
	opacity: 0.25;
	pointer-events: none;
}

.solarspark-widget .ss-panel { display: none; position: relative; z-index: 1; }
.solarspark-widget[data-step="bill"]     .ss-panel[data-panel="bill"]     { display: block; }
.solarspark-widget[data-step="loading"]  .ss-panel[data-panel="loading"]  { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 0; }
.solarspark-widget[data-step="results"]  .ss-panel[data-panel="results"]  { display: block; }
.solarspark-widget[data-step="done"]     .ss-panel[data-panel="done"]     { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0; }

.solarspark-widget .ss-eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-accent);
	margin: 0 0 0.5rem;
}
.solarspark-widget .ss-headline {
	font-family: var(--ss-font-display);
	font-weight: 600;
	font-size: 1.65rem;
	line-height: 1.2;
	margin: 0 0 0.5rem;
	color: var(--ss-ink);
}
.solarspark-widget .ss-sub {
	font-size: 0.95rem;
	color: var(--ss-muted);
	margin: 0 0 1.5rem;
	line-height: 1.5;
}

.solarspark-widget .ss-label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ss-ink);
	margin: 1.1rem 0 0.4rem;
}
.solarspark-widget .ss-input {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1.5px solid rgba(11,61,58,0.15);
	border-radius: 10px;
	font-size: 0.95rem;
	background: #fff;
	color: var(--ss-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.solarspark-widget .ss-input:focus {
	outline: none;
	border-color: var(--ss-accent);
	box-shadow: 0 0 0 3px rgba(242,169,59,0.25);
}
.solarspark-widget .ss-bill-input { position: relative; }
.solarspark-widget .ss-currency-prefix {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ss-muted);
	font-weight: 600;
	pointer-events: none;
}
.solarspark-widget .ss-bill-input .ss-input { padding-left: 1.75rem; }

.solarspark-widget .ss-slider {
	width: 100%;
	margin: 0.6rem 0 0.2rem;
	accent-color: var(--ss-accent);
}

.solarspark-widget .ss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 1.5rem;
	padding: 0.85rem 1.25rem;
	border: none;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.solarspark-widget .ss-btn-primary {
	background: var(--ss-ink);
	color: var(--ss-paper);
}
.solarspark-widget .ss-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(11,61,58,0.5); }
.solarspark-widget .ss-btn-primary:active { transform: translateY(0); }
.solarspark-widget .ss-btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.solarspark-widget .ss-fineprint {
	font-size: 0.75rem;
	color: var(--ss-muted);
	text-align: center;
	margin: 0.6rem 0 0;
}

/* Loading ring */
.solarspark-widget .ss-ring { position: relative; width: 96px; height: 96px; margin: 0 auto 1.25rem; }
.solarspark-widget .ss-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.solarspark-widget .ss-ring-track { fill: none; stroke: var(--ss-mist); stroke-width: 8; }
.solarspark-widget .ss-ring-fill {
	fill: none;
	stroke: var(--ss-accent);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 327;
	stroke-dashoffset: 327;
	animation: ss-fill 1.1s ease forwards;
}
@keyframes ss-fill { to { stroke-dashoffset: 40; } }
.solarspark-widget .ss-ring-icon {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.6rem;
}
.solarspark-widget .ss-ring-done { width: 72px; height: 72px; }
.solarspark-widget .ss-ring-done .ss-ring-icon {
	background: var(--ss-accent);
	color: var(--ss-ink);
	border-radius: 50%;
	width: 72px; height: 72px;
	font-size: 1.8rem;
}
.solarspark-widget .ss-loading-text { color: var(--ss-muted); font-size: 0.9rem; }

/* Results */
.solarspark-widget .ss-results-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 0.75rem 0 1.5rem;
}
.solarspark-widget .ss-result-figure {
	background: var(--ss-mist);
	border-radius: 14px;
	padding: 1rem 0.9rem;
	position: relative;
}
.solarspark-widget .ss-result-hero {
	grid-column: 1 / -1;
	background: var(--ss-ink);
	color: var(--ss-paper);
}
.solarspark-widget .ss-result-hero .ss-result-label { color: rgba(255,253,247,0.7); }
.solarspark-widget .ss-result-value {
	display: block;
	font-family: var(--ss-font-display);
	font-size: 1.6rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.solarspark-widget .ss-result-hero .ss-result-value { font-size: 2.1rem; color: var(--ss-accent); }
.solarspark-widget .ss-result-label {
	display: block;
	font-size: 0.75rem;
	color: var(--ss-muted);
	margin-top: 0.25rem;
}
.solarspark-widget .ss-blurred .ss-result-value { filter: blur(6px); user-select: none; }
.solarspark-widget .ss-blurred::after {
	content: "🔒";
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	font-size: 0.85rem;
}

.solarspark-widget .ss-unlock {
	border-top: 1px dashed rgba(11,61,58,0.18);
	padding-top: 1.25rem;
}
.solarspark-widget .ss-unlock-title {
	font-family: var(--ss-font-display);
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.solarspark-widget .ss-error {
	color: var(--ss-danger);
	font-size: 0.85rem;
	margin-top: 0.75rem;
	text-align: center;
}

@media (max-width: 380px) {
	.solarspark-widget .ss-results-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.solarspark-widget .ss-ring-fill { animation: none; stroke-dashoffset: 40; }
	.solarspark-widget .ss-btn { transition: none; }
}