/**
 * Sherifi Angebot – Frontend styles.
 *
 * FULLY THEME-INDEPENDENT. Every selector is scoped under .sgo-app and every
 * theme-attackable property (background, color, border, box-shadow, font,
 * text-transform, text-decoration) is forced with !important so the active
 * WordPress theme can neither bleed into the widget nor be affected by it.
 * Light mode only.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
 * 0. Isolation reset
 * ------------------------------------------------------------------------- */
.sgo-app {
	all: initial;
	display: block;
	/* Scoped design tokens (colors injected inline per instance). */
	--sgo-surface: #ffffff;
	--sgo-panel: #f4f7fb;
	--sgo-panel-2: #eaf1fa;
	--sgo-border: #e2e8f2;
	--sgo-border-strong: #b9cbe4;
	--sgo-muted: #5b6b7e;
	--sgo-muted-2: #8a99ac;
	--sgo-danger: #d64545;
	--sgo-radius: 16px;
	--sgo-radius-sm: 11px;
	--sgo-shadow: 0 1px 2px rgba(15, 42, 67, .04), 0 12px 32px -12px rgba(15, 42, 67, .18);
	--sgo-shadow-sm: 0 8px 20px -12px rgba(15, 42, 67, .28);
	--sgo-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--sgo-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	color: var(--sgo-ink, #0f2a43) !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background: transparent !important;
	box-sizing: border-box;
	text-align: left !important;
}
.sgo-app *,
.sgo-app *::before,
.sgo-app *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	float: none !important;
	max-width: none;
	min-width: 0;
	white-space: normal;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
}

/* Force the widget's own typography onto every descendant (kills theme fonts). */
.sgo-app, .sgo-app p, .sgo-app span, .sgo-app div, .sgo-app a, .sgo-app small,
.sgo-app label, .sgo-app button, .sgo-app input, .sgo-app textarea, .sgo-app select,
.sgo-app section, .sgo-app aside, .sgo-app main, .sgo-app header, .sgo-app li {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
	line-height: 1.55;
	color: var(--sgo-ink);
}
.sgo-app h1, .sgo-app h2, .sgo-app h3,
.sgo-app .sgo-hero-title, .sgo-app .sgo-h2, .sgo-app .sgo-intro-title,
.sgo-app .sgo-price-big, .sgo-app .sgo-done-title, .sgo-app .sgo-brand {
	font-family: 'Archivo', 'Inter', system-ui, sans-serif !important;
	color: var(--sgo-ink);
	text-transform: none !important;
}
/* Force sentence-case + normal tracking on all widget text (beats theme
   `.entry-content h2 {text-transform:uppercase}` style rules at 0,2,0). */
.sgo-app .sgo-panel *, .sgo-app .sgo-hero *, .sgo-app .sgo-intro-block *,
.sgo-app .sgo-summary *, .sgo-app .sgo-svc-txt h3 {
	text-transform: none !important;
	letter-spacing: normal !important;
}
/* Re-assert the only intentionally uppercased elements. */
.sgo-app .sgo-eyebrow { text-transform: uppercase !important; letter-spacing: .14em !important; }
.sgo-app .sgo-brand { letter-spacing: -.01em !important; }
.sgo-app .sgo-hero-title, .sgo-app .sgo-h2, .sgo-app .sgo-intro-title, .sgo-app .sgo-done-title, .sgo-app .sgo-price-big { letter-spacing: -.02em !important; }

/* Neutralise theme button / input / link chrome before we restyle. */
.sgo-app button {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	color: inherit !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer;
	width: auto;
	min-width: 0;
	text-transform: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.sgo-app input, .sgo-app textarea, .sgo-app select {
	background: var(--sgo-surface) !important;
	color: var(--sgo-ink) !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.sgo-app a { text-decoration: none !important; color: inherit; background: transparent !important; }
.sgo-app svg { display: inline-block; vertical-align: middle; }
.sgo-app img { max-width: 100%; height: auto; display: block; }
.sgo-app label { margin: 0; font-weight: 500; }

.sgo-app .sgo-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sgo-app .sgo-wrap-pull { position: relative; }

/* ---------------------------------------------------------------------------
 * 1. Top bar + hero
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-topbar { background: var(--sgo-ink) !important; color: #fff !important; }
.sgo-app .sgo-topbar-in { display: flex; align-items: center; justify-content: space-between; height: 46px; font-size: 13.5px; }
.sgo-app .sgo-topbar-brand { color: #cfe0f2 !important; }
.sgo-app .sgo-topbar-links { display: flex; gap: 22px; }
.sgo-app .sgo-topbar-links a { color: #cfe0f2 !important; transition: color 160ms ease; }
.sgo-app .sgo-topbar-links a:hover { color: #fff !important; }
@media (max-width: 640px) { .sgo-app .sgo-hide-sm { display: none; } }

.sgo-app .sgo-hero {
	background:
		radial-gradient(900px 380px at 88% -40%, color-mix(in srgb, var(--sgo-accent) 18%, transparent), transparent 60%),
		linear-gradient(180deg, var(--sgo-ink) 0%, color-mix(in srgb, var(--sgo-ink) 84%, #1a4d7a) 100%) !important;
	color: #fff !important;
	padding: 38px 0 118px;
	position: relative;
	overflow: hidden;
}
@supports not (color: color-mix(in srgb, red, blue)) {
	.sgo-app .sgo-hero { background: linear-gradient(180deg, #0f2a43 0%, #123a5c 100%) !important; }
}
.sgo-app .sgo-brand { display: flex; align-items: center; gap: 12px; font-weight: 800 !important; letter-spacing: -.01em !important; font-size: 20px !important; color: #fff !important; }
.sgo-app .sgo-brand-dot { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--sgo-accent), #0fd197) !important; display: grid; place-items: center; color: #06231a !important; font-weight: 800 !important; font-size: 16px !important; }
.sgo-app .sgo-hero-title { font-weight: 800 !important; font-size: clamp(28px, 4.4vw, 46px) !important; letter-spacing: -.02em !important; line-height: 1.05 !important; margin: 26px 0 12px; max-width: 18ch; color: #fff !important; }
.sgo-app .sgo-hero-text { color: #bcd0e6 !important; max-width: 54ch; font-size: 16.5px !important; }
.sgo-app .sgo-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sgo-app .sgo-trust-item { font-size: 13px !important; color: #dceaf8 !important; background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .12) !important; padding: 7px 13px; border-radius: 999px; display: inline-flex; gap: 7px; align-items: center; }
.sgo-app .sgo-trust-item svg { color: var(--sgo-accent) !important; }

/* Compact intro (header off, intro on). */
.sgo-app .sgo-intro-block { max-width: 1180px; margin: 0 auto 22px; padding: 4px 20px 0; }
.sgo-app .sgo-intro-title { font-weight: 800 !important; font-size: clamp(24px, 3vw, 34px) !important; letter-spacing: -.02em !important; line-height: 1.1 !important; margin: 8px 0 8px; color: var(--sgo-ink) !important; }
.sgo-app .sgo-intro-text { color: var(--sgo-muted) !important; max-width: 60ch; font-size: 16px !important; }

/* ---------------------------------------------------------------------------
 * 2. Board layout
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-board { display: grid; grid-template-columns: 1fr 360px; gap: 26px; padding-bottom: 70px; position: relative; z-index: 2; }
.sgo-app .sgo-wrap-pull .sgo-board { margin-top: -86px; }
.sgo-app .sgo-board.sgo-solo { grid-template-columns: 1fr; max-width: 820px; margin-left: auto; margin-right: auto; }
@media (max-width: 920px) {
	.sgo-app .sgo-board { grid-template-columns: 1fr; }
	.sgo-app .sgo-wrap-pull .sgo-board { margin-top: -90px; }
}

.sgo-app .sgo-card { background: var(--sgo-surface) !important; border: 1px solid var(--sgo-border) !important; border-radius: var(--sgo-radius); box-shadow: var(--sgo-shadow) !important; }

/* ---------------------------------------------------------------------------
 * 3. Stepper & range slider
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-steps { display: flex; padding: 18px 22px; gap: 6px; border-bottom: 1px solid var(--sgo-border) !important; overflow-x: auto; scrollbar-width: none; }
.sgo-app .sgo-steps::-webkit-scrollbar { display: none; }
.sgo-app .sgo-step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 132px; }
.sgo-app .sgo-step-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700 !important; font-size: 13px !important; background: var(--sgo-panel-2) !important; color: var(--sgo-muted) !important; flex: none; transition: background 250ms var(--sgo-ease-out), color 250ms var(--sgo-ease-out), transform 250ms var(--sgo-ease-out); }
.sgo-app .sgo-step-num .sgo-step-digit { color: inherit !important; font-weight: 700 !important; }
.sgo-app .sgo-step-num svg { opacity: 0; transform: scale(.6); transition: opacity 180ms var(--sgo-ease-out), transform 180ms var(--sgo-ease-out); position: absolute; color: #fff !important; }
.sgo-app .sgo-step-lbl { font-size: 13px !important; color: var(--sgo-muted) !important; font-weight: 600 !important; line-height: 1.15; }
.sgo-app .sgo-step-lbl small { display: block; color: var(--sgo-muted-2) !important; font-weight: 500 !important; font-size: 11px !important; }
.sgo-app .sgo-step.is-active .sgo-step-num { background: var(--sgo-primary) !important; color: #fff !important; transform: scale(1.06); }
.sgo-app .sgo-step.is-done .sgo-step-num { background: var(--sgo-accent) !important; color: #fff !important; position: relative; }
.sgo-app .sgo-step.is-done .sgo-step-num .sgo-step-digit { display: none; }
.sgo-app .sgo-step.is-done .sgo-step-num svg { opacity: 1; transform: scale(1); position: static; }
.sgo-app .sgo-step.is-active .sgo-step-lbl, .sgo-app .sgo-step.is-done .sgo-step-lbl { color: var(--sgo-ink) !important; }
.sgo-app .sgo-step-bar { height: 2px; background: var(--sgo-border) !important; flex: 1; border-radius: 2px; min-width: 12px; overflow: hidden; }
.sgo-app .sgo-step-bar::after { content: ''; display: block; height: 100%; width: 0; background: var(--sgo-accent) !important; transition: width 350ms var(--sgo-ease-out); }
.sgo-app .sgo-step.is-done + .sgo-step-bar::after { width: 100%; }
@media (max-width: 920px) {
	.sgo-app .sgo-step-bar { display: none; }
	.sgo-app .sgo-step { min-width: auto; flex: none; }
	.sgo-app .sgo-step-lbl { display: none; }
	.sgo-app .sgo-step.is-active .sgo-step-lbl { display: block; }
}

/* ---------------------------------------------------------------------------
 * 4. Panel + scenes
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-panel { padding: 30px 32px 34px; }
@media (max-width: 560px) { .sgo-app .sgo-panel { padding: 24px 18px 26px; } }
.sgo-app .sgo-scene { display: none; }
.sgo-app .sgo-scene.sgo-show { display: block; animation: sgo-fade 350ms var(--sgo-ease-out); }
@keyframes sgo-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sgo-app .sgo-eyebrow { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--sgo-primary) !important; }
.sgo-app .sgo-eyebrow.sgo-accent { color: var(--sgo-accent-dark) !important; }
.sgo-app .sgo-h2 { font-weight: 800 !important; font-size: 24px !important; letter-spacing: -.02em !important; margin: 8px 0 4px; color: var(--sgo-ink) !important; line-height: 1.2 !important; }
.sgo-app .sgo-sub { color: var(--sgo-muted) !important; font-size: 15px !important; margin-bottom: 24px; }
.sgo-app .sgo-block-title { font-weight: 700 !important; font-size: 15px !important; margin: 22px 0 12px; color: var(--sgo-ink) !important; }

/* ---------------------------------------------------------------------------
 * 5. Service cards
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) { .sgo-app .sgo-svc-grid { grid-template-columns: 1fr; } }
.sgo-app .sgo-svc {
	display: flex; gap: 13px; align-items: flex-start; text-align: left !important; padding: 15px;
	border: 1.5px solid var(--sgo-border) !important; border-radius: var(--sgo-radius-sm); background: var(--sgo-surface) !important;
	cursor: pointer; width: 100%; box-shadow: none !important;
	transition: border-color 180ms var(--sgo-ease-out), box-shadow 180ms var(--sgo-ease-out), transform 180ms var(--sgo-ease-out);
	opacity: 0; transform: translateY(10px); animation: sgo-rise 420ms var(--sgo-ease-out) forwards;
}
@keyframes sgo-rise { to { opacity: 1; transform: none; } }
.sgo-app .sgo-svc:active { transform: scale(.98); }
.sgo-app .sgo-svc:focus { outline: none; }
.sgo-app .sgo-svc:focus-visible { outline: 2px solid var(--sgo-primary); outline-offset: 2px; }
.sgo-app .sgo-svc.is-sel {
	border-color: var(--sgo-primary) !important;
	background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--sgo-primary) 5%, #fff)) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sgo-primary) 14%, transparent) !important;
}
@supports not (color: color-mix(in srgb, red, blue)) {
	.sgo-app .sgo-svc.is-sel { background: #f5f9ff !important; box-shadow: 0 0 0 3px rgba(14, 98, 196, .14) !important; }
}
.sgo-app .sgo-svc-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--sgo-panel-2) !important; display: grid; place-items: center; flex: none; color: var(--sgo-primary) !important; transition: background 180ms var(--sgo-ease-out), color 180ms var(--sgo-ease-out), transform 220ms var(--sgo-ease-out); }
.sgo-app .sgo-svc-ic svg, .sgo-app .sgo-svc-ic img { width: 24px; height: 24px; }
.sgo-app .sgo-svc.is-sel .sgo-svc-ic { background: var(--sgo-primary) !important; color: #fff !important; }
.sgo-app .sgo-svc-txt { flex: 1 1 0%; min-width: 0; white-space: normal !important; overflow: hidden; }
.sgo-app .sgo-svc-txt h3 { font-size: 14.5px !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--sgo-ink) !important; white-space: normal !important; overflow-wrap: anywhere; }
.sgo-app .sgo-svc-txt p { font-size: 12.5px !important; color: var(--sgo-muted) !important; margin-top: 2px; line-height: 1.4 !important; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
.sgo-app .sgo-svc.is-sel .sgo-svc-txt h3 { color: var(--sgo-ink) !important; }
.sgo-app .sgo-svc.is-sel .sgo-svc-txt p { color: var(--sgo-muted) !important; }
.sgo-app .sgo-svc-chk { margin-left: 6px; align-self: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sgo-border) !important; flex: none; display: grid; place-items: center; color: #fff !important; background: transparent !important; transition: border-color 160ms var(--sgo-ease-out), background 160ms var(--sgo-ease-out); }
.sgo-app .sgo-svc.is-sel .sgo-svc-chk { border-color: var(--sgo-accent) !important; background: var(--sgo-accent) !important; }
.sgo-app .sgo-svc-chk svg { opacity: 0; transform: scale(.5); transition: opacity 150ms var(--sgo-ease-out), transform 150ms var(--sgo-ease-out); }
.sgo-app .sgo-svc.is-sel .sgo-svc-chk svg { opacity: 1; transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
	.sgo-app .sgo-svc:hover { border-color: var(--sgo-border-strong) !important; transform: translateY(-2px); box-shadow: var(--sgo-shadow-sm) !important; }
	.sgo-app .sgo-svc:hover .sgo-svc-ic { transform: rotate(-4deg) scale(1.05); }
	.sgo-app .sgo-svc.is-sel:hover .sgo-svc-ic { transform: scale(1.05); }
}

/* ---------------------------------------------------------------------------
 * 6. Form fields
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.sgo-app .sgo-field { display: flex; flex-direction: column; gap: 7px; }
.sgo-app .sgo-field.sgo-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .sgo-app .sgo-fields { grid-template-columns: 1fr; } }
.sgo-app .sgo-detail-group { margin-bottom: 18px; }
/* Per-service detail block (groups a service's questions in a soft card). */
.sgo-app .sgo-svc-block { border: 1px solid var(--sgo-border) !important; border-radius: 14px; padding: 18px 18px 4px; margin-bottom: 16px; background: linear-gradient(180deg, #fff, var(--sgo-panel)) !important; }
@supports not (color: color-mix(in srgb, red, blue)) { .sgo-app .sgo-svc-block { background: #fff !important; } }
.sgo-app .sgo-svc-block-head { display: flex; align-items: center; gap: 10px; font-weight: 700 !important; font-size: 15px !important; color: var(--sgo-ink) !important; margin-bottom: 15px; }
.sgo-app .sgo-svc-block-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--sgo-panel-2) !important; color: var(--sgo-primary) !important; display: grid; place-items: center; flex: none; }
.sgo-app .sgo-svc-block-ic svg, .sgo-app .sgo-svc-block-ic img { width: 18px; height: 18px; }
.sgo-app .sgo-svc-block .sgo-detail-group:last-child { margin-bottom: 14px; }
.sgo-app .sgo-fl { font-size: 13px !important; font-weight: 600 !important; color: var(--sgo-ink) !important; }
.sgo-app .sgo-fl .sgo-opt, .sgo-app .sgo-opt { color: var(--sgo-muted-2) !important; font-weight: 500 !important; }
.sgo-app input[type=text], .sgo-app input[type=email], .sgo-app input[type=tel], .sgo-app input[type=number], .sgo-app textarea, .sgo-app select {
	font-size: 15px !important; padding: 12px 14px !important; border: 1.5px solid var(--sgo-border) !important; border-radius: 11px !important;
	background: var(--sgo-surface) !important; color: var(--sgo-ink) !important; width: 100%; outline: none; box-shadow: none !important; height: auto;
	transition: border-color 150ms var(--sgo-ease-out), box-shadow 150ms var(--sgo-ease-out);
}
.sgo-app textarea { resize: vertical; min-height: 96px; }
.sgo-app input:focus, .sgo-app textarea:focus, .sgo-app select:focus { border-color: var(--sgo-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sgo-primary) 14%, transparent) !important; background: var(--sgo-surface) !important; color: var(--sgo-ink) !important; }
@supports not (color: color-mix(in srgb, red, blue)) {
	.sgo-app input:focus, .sgo-app textarea:focus, .sgo-app select:focus { box-shadow: 0 0 0 3px rgba(14, 98, 196, .14) !important; }
}
.sgo-app input::placeholder, .sgo-app textarea::placeholder { color: var(--sgo-muted-2) !important; opacity: 1; }
.sgo-app .sgo-hint { font-size: 12px !important; color: var(--sgo-muted-2) !important; }
.sgo-app .sgo-errmsg { font-size: 12px !important; color: var(--sgo-danger) !important; display: none; }
.sgo-app .sgo-field.is-err input, .sgo-app .sgo-field.is-err textarea { border-color: var(--sgo-danger) !important; }
.sgo-app .sgo-field.is-err .sgo-errmsg { display: block; animation: sgo-shake 320ms var(--sgo-ease-out); }
@keyframes sgo-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.sgo-app .sgo-inline-err { font-size: 13px !important; color: var(--sgo-danger) !important; margin-top: 12px; display: none; font-weight: 600 !important; }
.sgo-app .sgo-inline-err.sgo-show { display: block; animation: sgo-shake 320ms var(--sgo-ease-out); }

/* Segmented control (chip groups). */
.sgo-app .sgo-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.sgo-app .sgo-seg button {
	font-size: 13.5px !important; font-weight: 600 !important; padding: 10px 15px !important; min-height: 44px;
	border: 1.5px solid var(--sgo-border) !important; background: var(--sgo-surface) !important; border-radius: 10px !important; color: var(--sgo-muted) !important; box-shadow: none !important;
	transition: border-color 150ms var(--sgo-ease-out), background 150ms var(--sgo-ease-out), color 150ms var(--sgo-ease-out), transform 120ms var(--sgo-ease-out);
}
.sgo-app .sgo-seg button:active { transform: scale(.96); }
.sgo-app .sgo-seg button:focus, .sgo-app .sgo-seg button:focus-visible { outline: none; background: var(--sgo-surface) !important; color: var(--sgo-muted) !important; }
.sgo-app .sgo-seg button.is-on { border-color: var(--sgo-primary) !important; background: color-mix(in srgb, var(--sgo-primary) 8%, #fff) !important; color: var(--sgo-primary) !important; }
.sgo-app .sgo-seg button.is-on:focus { background: color-mix(in srgb, var(--sgo-primary) 8%, #fff) !important; color: var(--sgo-primary) !important; }
@supports not (color: color-mix(in srgb, red, blue)) {
	.sgo-app .sgo-seg button.is-on, .sgo-app .sgo-seg button.is-on:focus { background: #eef5ff !important; }
}
@media (hover: hover) and (pointer: fine) { .sgo-app .sgo-seg button:hover { border-color: var(--sgo-border-strong) !important; } }

/* Number stepper. */
.sgo-app .sgo-stepper { display: flex; align-items: center; border: 1.5px solid var(--sgo-border) !important; border-radius: 11px; overflow: hidden; width: fit-content; }
.sgo-app .sgo-stepper button { width: 44px; height: 46px; background: var(--sgo-panel) !important; font-size: 20px !important; color: var(--sgo-ink) !important; font-weight: 600 !important; border: 0 !important; transition: background 150ms var(--sgo-ease-out); }
.sgo-app .sgo-stepper button:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .sgo-app .sgo-stepper button:hover { background: var(--sgo-panel-2) !important; } }
.sgo-app .sgo-stepper input { border: none !important; text-align: center !important; width: 74px; box-shadow: none !important; font-weight: 600 !important; -moz-appearance: textfield; }
.sgo-app .sgo-stepper input::-webkit-outer-spin-button, .sgo-app .sgo-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sgo-app .sgo-stepper .sgo-u { padding: 0 14px; color: var(--sgo-muted) !important; font-size: 13px !important; border-left: 1px solid var(--sgo-border) !important; height: 46px; display: grid; place-items: center; }

/* Range slider (surface / area etc.). */
.sgo-app .sgo-slider-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.sgo-app .sgo-slider-top .sgo-fl { margin: 0 !important; }
.sgo-app .sgo-slider-val { font-family: 'Archivo', 'Inter', system-ui, sans-serif !important; font-size: 26px !important; font-weight: 800 !important; color: var(--sgo-primary) !important; line-height: 1 !important; white-space: nowrap; letter-spacing: -.01em !important; }
.sgo-app .sgo-slider-val strong { font-weight: 800 !important; }
.sgo-app .sgo-slider-unit { font-size: 15px !important; font-weight: 700 !important; }
.sgo-app .sgo-slider-scale { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: var(--sgo-muted) !important; font-size: 13px !important; font-weight: 500 !important; }
.sgo-app input[type="range"].sgo-slider {
	-webkit-appearance: none; appearance: none;
	display: block; width: 100% !important; height: 6px; margin: 4px 0; padding: 0 !important;
	border: 0 !important; border-radius: 999px !important; outline: none; box-shadow: none !important; cursor: pointer;
	background: linear-gradient(to right, var(--sgo-primary) 0%, var(--sgo-primary) var(--sgo-fill, 0%), var(--sgo-panel-2) var(--sgo-fill, 0%), var(--sgo-panel-2) 100%) !important;
}
.sgo-app input[type="range"].sgo-slider::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--sgo-surface) !important; border: 3px solid var(--sgo-primary) !important;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--sgo-primary) 20%, transparent), 0 1px 3px rgba(15, 42, 67, .25);
	transition: box-shadow 150ms var(--sgo-ease-out), transform 120ms var(--sgo-ease-out);
}
.sgo-app input[type="range"].sgo-slider::-moz-range-thumb {
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--sgo-surface) !important; border: 3px solid var(--sgo-primary) !important;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--sgo-primary) 20%, transparent), 0 1px 3px rgba(15, 42, 67, .25);
	transition: box-shadow 150ms var(--sgo-ease-out), transform 120ms var(--sgo-ease-out);
}
.sgo-app input[type="range"].sgo-slider::-moz-range-track { background: transparent; border: 0; }
.sgo-app input[type="range"].sgo-slider:active::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 0 0 7px color-mix(in srgb, var(--sgo-primary) 22%, transparent), 0 1px 3px rgba(15, 42, 67, .25); }
.sgo-app input[type="range"].sgo-slider:active::-moz-range-thumb { transform: scale(1.08); box-shadow: 0 0 0 7px color-mix(in srgb, var(--sgo-primary) 22%, transparent), 0 1px 3px rgba(15, 42, 67, .25); }
.sgo-app input[type="range"].sgo-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px color-mix(in srgb, var(--sgo-primary) 28%, transparent); }
.sgo-app input[type="range"].sgo-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 7px color-mix(in srgb, var(--sgo-primary) 28%, transparent); }
@supports not (color: color-mix(in srgb, red, blue)) {
	.sgo-app input[type="range"].sgo-slider::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--sgo-panel-2), 0 1px 3px rgba(15, 42, 67, .25); }
	.sgo-app input[type="range"].sgo-slider::-moz-range-thumb { box-shadow: 0 0 0 5px var(--sgo-panel-2), 0 1px 3px rgba(15, 42, 67, .25); }
}
@media (prefers-reduced-motion: reduce) {
	.sgo-app input[type="range"].sgo-slider::-webkit-slider-thumb { transition: none; }
	.sgo-app input[type="range"].sgo-slider::-moz-range-thumb { transition: none; }
}

/* Toggle add-ons / checkboxes. */
.sgo-app .sgo-addons { display: grid; gap: 10px; }
.sgo-app .sgo-addon { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1.5px solid var(--sgo-border) !important; border-radius: 11px; cursor: pointer; background: var(--sgo-surface) !important; transition: border-color 150ms var(--sgo-ease-out), background 150ms var(--sgo-ease-out); }
.sgo-app .sgo-addon:active { transform: scale(.99); }
.sgo-app .sgo-addon.is-on { border-color: var(--sgo-accent) !important; background: color-mix(in srgb, var(--sgo-accent) 7%, #fff) !important; }
@supports not (color: color-mix(in srgb, red, blue)) { .sgo-app .sgo-addon.is-on { background: #f1fbf7 !important; } }
.sgo-app .sgo-addon .sgo-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--sgo-border) !important; flex: none; display: grid; place-items: center; color: #fff !important; background: transparent !important; transition: border-color 150ms var(--sgo-ease-out), background 150ms var(--sgo-ease-out); }
.sgo-app .sgo-addon.is-on .sgo-box { background: var(--sgo-accent) !important; border-color: var(--sgo-accent) !important; }
.sgo-app .sgo-addon .sgo-box svg { opacity: 0; transform: scale(.5); transition: opacity 150ms var(--sgo-ease-out), transform 150ms var(--sgo-ease-out); }
.sgo-app .sgo-addon.is-on .sgo-box svg { opacity: 1; transform: scale(1); }
.sgo-app .sgo-addon .sgo-addon-t { font-size: 14px !important; font-weight: 600 !important; color: var(--sgo-ink) !important; }
.sgo-app .sgo-addon .sgo-addon-t small { display: block; font-weight: 500 !important; color: var(--sgo-muted) !important; font-size: 12px !important; }
.sgo-app .sgo-addon .sgo-addon-pr { margin-left: auto; font-size: 13px !important; font-weight: 700 !important; color: var(--sgo-accent-dark) !important; white-space: nowrap; }

/* File upload. */
.sgo-app .sgo-drop { border: 1.6px dashed var(--sgo-border-strong) !important; border-radius: 12px; padding: 22px; text-align: center; color: var(--sgo-muted) !important; cursor: pointer; background: transparent !important; transition: border-color 160ms var(--sgo-ease-out), background 160ms var(--sgo-ease-out); }
.sgo-app .sgo-drop:hover { border-color: var(--sgo-primary) !important; background: var(--sgo-panel) !important; }
.sgo-app .sgo-drop b { color: var(--sgo-primary) !important; font-weight: 700 !important; }
.sgo-app .sgo-drop input { display: none; }
.sgo-app .sgo-drop-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sgo-app .sgo-drop-item { font-size: 12px !important; background: var(--sgo-panel-2) !important; border-radius: 8px; padding: 5px 10px; color: var(--sgo-ink) !important; }

/* Emergency banner. */
.sgo-app .sgo-emerg { margin-top: 20px; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: color-mix(in srgb, var(--sgo-danger) 6%, #fff) !important; border: 1px solid color-mix(in srgb, var(--sgo-danger) 22%, #fff) !important; }
@supports not (color: color-mix(in srgb, red, blue)) { .sgo-app .sgo-emerg { background: #fdf1f1 !important; border-color: #f3d1d1 !important; } }
.sgo-app .sgo-emerg-t { font-weight: 700 !important; font-size: 14px !important; color: var(--sgo-ink) !important; }
.sgo-app .sgo-emerg-t small { display: block; font-weight: 500 !important; color: var(--sgo-muted) !important; font-size: 12.5px !important; margin-top: 2px; }

/* ---------------------------------------------------------------------------
 * 7. Consent + honeypot
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-consent { display: flex; align-items: flex-start; gap: 13px; margin-top: 18px; cursor: pointer; }
.sgo-app .sgo-consent .sgo-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--sgo-border) !important; flex: none; display: grid; place-items: center; color: #fff !important; background: transparent !important; transition: border-color 150ms var(--sgo-ease-out), background 150ms var(--sgo-ease-out); margin-top: 1px; }
.sgo-app .sgo-consent.is-on .sgo-box { background: var(--sgo-accent) !important; border-color: var(--sgo-accent) !important; }
.sgo-app .sgo-consent .sgo-box svg { opacity: 0; transform: scale(.5); transition: opacity 150ms var(--sgo-ease-out), transform 150ms var(--sgo-ease-out); }
.sgo-app .sgo-consent.is-on .sgo-box svg { opacity: 1; transform: scale(1); }
.sgo-app .sgo-consent-t { font-size: 13px !important; color: var(--sgo-muted) !important; line-height: 1.5 !important; }
.sgo-app .sgo-consent-t a { color: var(--sgo-primary) !important; text-decoration: underline !important; }
.sgo-app .sgo-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------------
 * 8. Nav buttons
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.sgo-app .sgo-btn {
	font-weight: 700 !important; font-size: 15px !important; padding: 14px 26px !important; border-radius: 12px !important; cursor: pointer;
	border: 1.5px solid transparent !important; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; justify-content: center; width: auto;
	text-decoration: none !important; box-shadow: none !important;
	transition: background 180ms var(--sgo-ease-out), border-color 180ms var(--sgo-ease-out), color 180ms var(--sgo-ease-out), transform 140ms var(--sgo-ease-out), box-shadow 180ms var(--sgo-ease-out);
}
.sgo-app .sgo-btn:active { transform: scale(.97); }
.sgo-app .sgo-btn:focus { outline: none; }
.sgo-app .sgo-btn:focus-visible { outline: 2px solid var(--sgo-primary); outline-offset: 2px; }
.sgo-app .sgo-btn-primary, .sgo-app .sgo-btn-primary:focus, .sgo-app .sgo-btn-primary:visited { background: var(--sgo-primary) !important; color: #fff !important; border-color: transparent !important; }
.sgo-app .sgo-btn-ghost, .sgo-app .sgo-btn-ghost:focus, .sgo-app .sgo-btn-ghost:visited { background: transparent !important; border-color: var(--sgo-border) !important; color: var(--sgo-muted) !important; }
.sgo-app .sgo-btn-go, .sgo-app .sgo-btn-go:focus, .sgo-app .sgo-btn-go:visited { background: var(--sgo-accent) !important; color: #fff !important; border-color: transparent !important; }
.sgo-app .sgo-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.sgo-app .sgo-btn .sgo-arr { transition: transform 200ms var(--sgo-ease-out); color: inherit !important; }
.sgo-app .sgo-btn.is-loading { pointer-events: none; }
.sgo-app .sgo-btn.is-loading .sgo-arr { display: none; }
.sgo-app .sgo-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4) !important; border-top-color: #fff !important; animation: sgo-spin .7s linear infinite; display: none; }
.sgo-app .sgo-btn.is-loading .sgo-spin { display: inline-block; }
@keyframes sgo-spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
	.sgo-app .sgo-btn-primary:hover { background: var(--sgo-primary-dark) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--sgo-primary) 60%, transparent) !important; }
	.sgo-app .sgo-btn-go:hover { background: var(--sgo-accent-dark) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--sgo-accent) 60%, transparent) !important; }
	.sgo-app .sgo-btn-ghost:hover { border-color: var(--sgo-border-strong) !important; color: var(--sgo-ink) !important; background: transparent !important; }
	.sgo-app .sgo-btn-primary:hover .sgo-arr, .sgo-app .sgo-btn-go:hover .sgo-arr { transform: translateX(3px); }
}

/* WhatsApp button — text must stay white regardless of link colors. */
.sgo-app .sgo-btn.sgo-wa, .sgo-app .sgo-btn.sgo-wa:link, .sgo-app .sgo-btn.sgo-wa:visited, .sgo-app .sgo-btn.sgo-wa:focus { color: #fff !important; background: #25d366 !important; border-color: transparent !important; width: 100%; }
.sgo-app .sgo-btn.sgo-wa svg { flex: none; color: #fff !important; }
.sgo-app .sgo-or { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; color: var(--sgo-muted-2) !important; font-size: 12.5px !important; font-weight: 600 !important; }
.sgo-app .sgo-or::before, .sgo-app .sgo-or::after { content: ''; flex: 1; height: 1px; background: var(--sgo-border) !important; }
.sgo-app .sgo-wa-wrap { text-align: center; }
.sgo-app .sgo-wa-share { max-width: 360px; margin: 24px auto 0; text-align: center; }
.sgo-app .sgo-wa-share .sgo-or { margin-top: 4px; }
.sgo-app .sgo-wa-share-note { margin-top: 10px; font-size: 12px !important; line-height: 1.5; color: var(--sgo-muted-2) !important; }
@media (hover: hover) and (pointer: fine) {
	.sgo-app .sgo-btn.sgo-wa:hover { background: #1fbe5b !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(37, 211, 102, .7) !important; }
}

/* ---------------------------------------------------------------------------
 * 9. Summary panel
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-summary { position: sticky; top: 18px; align-self: start; }
.sgo-app .sgo-sum-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--sgo-border) !important; }
.sgo-app .sgo-price-big { font-weight: 800 !important; letter-spacing: -.02em !important; font-size: 38px !important; line-height: 1 !important; margin-top: 8px; color: var(--sgo-ink) !important; }
.sgo-app .sgo-price-big .sgo-cur { font-size: 20px !important; color: var(--sgo-muted) !important; font-weight: 700 !important; }
.sgo-app .sgo-price-empty { color: var(--sgo-muted-2) !important; font-weight: 600 !important; font-size: 16px !important; font-family: 'Inter', sans-serif !important; }
.sgo-app .sgo-price-note { font-size: 12.5px !important; color: var(--sgo-muted) !important; margin-top: 7px; }
.sgo-app .sgo-sum-lead { margin-top: 8px; font-size: 15px !important; font-weight: 600 !important; color: var(--sgo-ink) !important; }
.sgo-app .sgo-sum-body { padding: 18px 22px; }
.sgo-app .sgo-sum-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px !important; padding: 7px 0; color: var(--sgo-muted) !important; }
.sgo-app .sgo-sum-line span:last-child { color: var(--sgo-ink) !important; font-weight: 600 !important; text-align: right; }
.sgo-app .sgo-sum-empty { color: var(--sgo-muted-2) !important; font-size: 13.5px !important; text-align: center; padding: 14px 0; }
.sgo-app .sgo-breakdown { border-top: 1px dashed var(--sgo-border) !important; margin-top: 8px; padding-top: 8px; }
.sgo-app .sgo-breakdown .sgo-sum-line { font-size: 13px !important; }
.sgo-app .sgo-sum-foot { padding: 14px 22px 20px; border-top: 1px solid var(--sgo-border) !important; background: var(--sgo-panel) !important; border-radius: 0 0 var(--sgo-radius) var(--sgo-radius); }
.sgo-app .sgo-badge-free { display: flex; gap: 9px; align-items: center; font-size: 12.5px !important; color: var(--sgo-accent-dark) !important; font-weight: 600 !important; }
.sgo-app .sgo-badge-free svg { color: var(--sgo-accent-dark) !important; }

/* Mobile sticky price bar. */
.sgo-app .sgo-mbar { display: none; }
@media (max-width: 920px) {
	.sgo-app .sgo-summary { display: none; }
	.sgo-app .sgo-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff !important; border-top: 1px solid var(--sgo-border) !important; box-shadow: 0 -8px 24px -12px rgba(15, 42, 67, .25) !important; padding: 11px 18px; align-items: center; justify-content: space-between; gap: 14px; }
	.sgo-app .sgo-mbar .sgo-mp small { display: block; font-size: 11px !important; color: var(--sgo-muted) !important; font-weight: 600 !important; }
	.sgo-app .sgo-mbar .sgo-mp b { font-size: 21px !important; color: var(--sgo-ink) !important; }
	.sgo-app .sgo-mbar-btn { padding: 11px 20px !important; min-height: 44px; }
	.sgo-app .sgo-board { padding-bottom: 90px; }
}

/* ---------------------------------------------------------------------------
 * 10. Success + toast
 * ------------------------------------------------------------------------- */
.sgo-app .sgo-done { text-align: center; padding: 30px 10px; }
.sgo-app .sgo-done-ic { width: 74px; height: 74px; border-radius: 50%; background: color-mix(in srgb, var(--sgo-accent) 14%, #fff) !important; color: var(--sgo-accent-dark) !important; display: grid; place-items: center; margin: 0 auto 18px; animation: sgo-pop 420ms var(--sgo-ease-out); }
@supports not (color: color-mix(in srgb, red, blue)) { .sgo-app .sgo-done-ic { background: #e9faf4 !important; } }
@keyframes sgo-pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.sgo-app .sgo-done-title { font-weight: 800 !important; font-size: 26px !important; margin-bottom: 8px; color: var(--sgo-ink) !important; }
.sgo-app .sgo-done-text { color: var(--sgo-muted) !important; max-width: 46ch; margin: 0 auto 8px; }
.sgo-app .sgo-done-mail { color: var(--sgo-muted) !important; }
.sgo-app .sgo-ref { display: inline-block; margin-top: 12px; font-weight: 700 !important; background: var(--sgo-panel-2) !important; padding: 8px 16px; border-radius: 10px; color: var(--sgo-ink) !important; }

.sgo-app .sgo-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); background: var(--sgo-ink) !important; color: #fff !important; padding: 13px 20px; border-radius: 12px; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 14px 40px -12px rgba(15, 42, 67, .5) !important; z-index: 60; opacity: 0; transition: opacity 200ms var(--sgo-ease-out), transform 200ms var(--sgo-ease-out); max-width: 90vw; }
.sgo-app .sgo-toast.sgo-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------------------
 * 11. Reduced motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sgo-app *, .sgo-app *::before, .sgo-app *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.sgo-app .sgo-svc { opacity: 1; transform: none; }
}