/**
 * clinic/services-goal-finder — "Temukan Perawatan" finder.
 *
 * Ported from docs/mockups/goal-finder-mockup.html's `.gf-*` phone-frame
 * prototype: renamed to `.svc-gf__*`, phone-frame/status-bar chrome dropped,
 * colours pulled from theme.json presets (fallback hex kept for editor
 * preview / no-CSS-var contexts).
 *
 * No-JS: every step renders and stacks top to bottom. `.is-enhanced` is
 * added by view.js (Task 5) once it takes over show/hide.
 */

.svc-gf {
	--svc-gf-gold: var( --wp--preset--color--primary, #bca443 );
	--svc-gf-gold-dark: var( --wp--preset--color--gold-dark, #8c7332 );
	--svc-gf-surface: var( --wp--preset--color--primary-surface, #f7f3e8 );
	--svc-gf-peach: var( --wp--preset--color--peach-bg, #fdfaf2 );
	--svc-gf-heading: var( --wp--preset--color--heading, #262626 );
	--svc-gf-body: var( --wp--preset--color--body, #3a3833 );
	--svc-gf-muted: var( --wp--preset--color--muted, #8a8472 );
	--svc-gf-border: var( --wp--preset--color--border, #ece9df );
	--svc-gf-border-muted: var( --wp--preset--color--border-muted, #cfc9b4 );
	--svc-gf-green: #2e7d32;
	--svc-gf-wa: #25d366;
	max-width: 1216px;
	margin: 0 auto;
	padding: 32px 20px 64px;
	font-family: var( --wp--preset--font-family--body, 'Lato', sans-serif );
	color: var( --svc-gf-body );
	line-height: 1.5;
	position: relative;
}
.svc-gf * { box-sizing: border-box; }

/* Steps: no-JS shows everything; is-enhanced hides inactive steps. */
.svc-gf__step { margin: 0 0 48px; }
.svc-gf.is-enhanced .svc-gf__step:not( .is-active ) { display: none; }

.svc-gf__steps { display: flex; gap: 6px; align-items: center; margin: 0 0 18px; font-size: 11px; color: var( --svc-gf-muted ); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.svc-gf__steps span { flex: 1; height: 4px; border-radius: 2px; background: var( --svc-gf-border-muted ); }
.svc-gf__steps span.on { background: var( --svc-gf-gold ); }
.svc-gf__steps b { font-weight: 700; color: var( --svc-gf-gold-dark ); white-space: nowrap; }
.svc-gf__steps small { white-space: nowrap; }

.svc-gf__eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var( --wp--preset--font-family--body, 'Lato', sans-serif ); letter-spacing: 2px; color: var( --svc-gf-gold-dark ); text-transform: uppercase; }
.svc-gf__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var( --svc-gf-gold ); }

.svc-gf__h2, .svc-gf__h {
	font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif );
	font-weight: 500;
	line-height: 1.15;
	color: var( --svc-gf-heading );
	margin: 8px 0 8px;
	letter-spacing: -.3px;
}
.svc-gf__h2 { font-size: 32px; }
.svc-gf__h { font-size: 26px; }
.svc-gf__lede { margin: 0 0 20px; font-size: 15px; max-width: 60ch; }
.svc-gf__question { font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-size: 22px; font-weight: 500; line-height: 1.2; color: var( --svc-gf-heading ); margin: 18px 0 10px; }

.svc-gf__back { display: inline-block; background: none; border: 0; color: var( --svc-gf-gold-dark ); font: 700 13px var( --wp--preset--font-family--body, 'Lato', sans-serif ); padding: 0; margin: 0 0 14px; cursor: pointer; text-decoration: none; }
.svc-gf__back:hover { text-decoration: underline; }

/* goal doors */
.svc-gf__goals { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 4px 0 16px; }
@media ( min-width: 768px ) { .svc-gf__goals { grid-template-columns: 1fr 1fr; } }

.svc-gf__goal { display: block; border: 0; border-radius: 20px; overflow: hidden; position: relative; height: 220px; cursor: pointer; box-shadow: 0 12px 30px rgba( 25, 28, 29, .08 ); color: #fff; text-decoration: none; transition: transform .15s; }
.svc-gf__goal:hover, .svc-gf__goal:focus-visible { transform: translateY( -2px ); color: #fff; }
/* Global link hover (theme.json) recolours text to gold; on a photo that kills contrast. Text stays white; the arrow chip carries the hover. */
.svc-gf__goal:hover .svc-gf__goal-tx, .svc-gf__goal:focus-visible .svc-gf__goal-tx { background: linear-gradient( to top, rgba( 20, 18, 14, .84 ) 0%, rgba( 20, 18, 14, .55 ) 55%, transparent 100% ); }
.svc-gf__goal:hover .svc-gf__goal-arrow, .svc-gf__goal:focus-visible .svc-gf__goal-arrow { background: var( --svc-gf-gold-dark ); color: #fff; }
.svc-gf__goal:focus-visible { outline: 3px solid var( --svc-gf-gold-dark ); outline-offset: 3px; }
.svc-gf__goal-photo { position: absolute; inset: 0; }
.svc-gf__goal--heal .svc-gf__goal-photo { background: linear-gradient( 135deg, #6e5d3e 0%, #a48b57 55%, #d8c98a 100% ); }
.svc-gf__goal--uplift .svc-gf__goal-photo { background: linear-gradient( 135deg, #3c3324 0%, #8c7332 50%, #d6c422 100% ); }
.svc-gf__goal-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.svc-gf__goal-photo.has-img::after { display: none; }
.svc-gf__goal-photo::after { content: attr( data-photo ); position: absolute; right: 12px; top: 12px; font: 600 10px var( --wp--preset--font-family--body, 'Lato', sans-serif ); letter-spacing: .3px; background: rgba( 0, 0, 0, .35 ); padding: 4px 8px; border-radius: 6px; opacity: .9; }
.svc-gf__goal-tx { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 44px 22px 18px; background: linear-gradient( to top, rgba( 20, 18, 14, .78 ) 0%, rgba( 20, 18, 14, .45 ) 55%, transparent 100% ); text-shadow: 0 1px 2px rgba( 0, 0, 0, .45 ); transition: background .15s; }
.svc-gf__goal-tx small { display: block; font-weight: 700; letter-spacing: 2px; font-size: 11px; opacity: .9; margin-bottom: 4px; }
.svc-gf__goal-tx strong { display: block; font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-weight: 500; font-size: 24px; line-height: 1.15; }
.svc-gf__goal-tx em { display: block; font-style: normal; font-size: 13px; opacity: .92; margin-top: 4px; }
.svc-gf__goal-arrow { position: absolute; right: 18px; bottom: 20px; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var( --svc-gf-gold-dark ); display: grid; place-items: center; font-weight: 700; }

.svc-gf__extras:empty { display: none; }

/* face-map entry point — ported from docs/mockups/goal-finder-mockup.html
   frame 2's `.gf-face` / `.gf-zone-out` (classes renamed `svc-gf__face*` /
   `svc-gf__zone-out*` / `svc-gf__zone*`). */
.svc-gf__face { background: #fff; border: 1px solid var( --svc-gf-border ); border-radius: 20px; padding: 14px 16px 16px; margin: 4px 0 20px; }
.svc-gf__face-h { margin: 0; font: 700 13.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-gold-dark ); padding: 4px 0; letter-spacing: 0; }
.svc-gf__face-svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 14px auto 12px; }
.svc-gf__face-svg[hidden] { display: none; }
.svc-gf__zone { fill: rgba( 188, 164, 67, .10 ); stroke: var( --svc-gf-gold ); stroke-width: 1.2; cursor: pointer; transition: fill .15s; }
.svc-gf__zone:hover, .svc-gf__zone.is-on { fill: rgba( 188, 164, 67, .42 ); }
.svc-gf__zone.is-on { stroke-width: 2.2; }
.svc-gf__zone:focus-visible { fill: rgba( 188, 164, 67, .42 ); outline: 2px solid var( --svc-gf-gold-dark ); outline-offset: 1px; }
.svc-gf__zone-label { font: 700 10px var( --wp--preset--font-family--body, 'Lato', sans-serif ); fill: var( --svc-gf-gold-dark ); pointer-events: none; text-anchor: middle; letter-spacing: .3px; }
.svc-gf__face-outline { fill: var( --svc-gf-surface ); stroke: var( --svc-gf-border-muted ); stroke-width: 1.5; pointer-events: none; }
.svc-gf__face-svg.has-img { border-radius: 18px; }
.svc-gf__face-svg.has-img .svc-gf__face-outline { display: none; } /* the drawing has its own face edge; the placeholder oval never matched it */
.svc-gf__face-svg.has-img .svc-gf__zone { fill: rgba( 188, 164, 67, .16 ); stroke: #fff; stroke-width: 1.4; }
.svc-gf__face-svg.has-img .svc-gf__zone:hover, .svc-gf__face-svg.has-img .svc-gf__zone.is-on { fill: rgba( 188, 164, 67, .55 ); }
.svc-gf__face-svg.has-img .svc-gf__zone-label { fill: #fff; paint-order: stroke; stroke: rgba( 38, 38, 38, .55 ); stroke-width: 2px; }

/* body-map SVG — taller figure, otherwise same treatment as the face SVG. */
.svc-gf__body-svg { width: 100%; max-width: 240px; height: auto; display: block; margin: 14px auto 12px; }
.svc-gf__body-svg[hidden] { display: none; }
.svc-gf__body-svg.has-img { border-radius: 18px; }
.svc-gf__body-svg.has-img .svc-gf__zone { fill: rgba( 188, 164, 67, .16 ); stroke: #fff; stroke-width: 1.4; }
.svc-gf__body-svg.has-img .svc-gf__zone:hover, .svc-gf__body-svg.has-img .svc-gf__zone.is-on { fill: rgba( 188, 164, 67, .55 ); }
.svc-gf__body-svg.has-img .svc-gf__zone-label { fill: #fff; paint-order: stroke; stroke: rgba( 38, 38, 38, .55 ); stroke-width: 2px; }

/* body-part (Wajah/Tubuh) + goal-filter (Semua/Masalah kulit/Estetika) pill
   rows — same look as the results-step filter chips (.svc-gf__chip). */
.svc-gf__map-part, .svc-gf__map-goal { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.svc-gf__map-part { margin-top: 12px; }
.svc-gf__map-part button, .svc-gf__map-goal button { border: 1px solid var( --svc-gf-border-muted ); background: #fff; border-radius: 999px; padding: 7px 14px; min-height: 36px; font: 600 12.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-body ); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.svc-gf__map-part button[aria-pressed="true"], .svc-gf__map-goal button[aria-pressed="true"] { background: var( --svc-gf-gold ); border-color: var( --svc-gf-gold-dark ); color: #fff; }
.svc-gf__map-part button:focus-visible, .svc-gf__map-goal button:focus-visible { outline: 2px solid var( --svc-gf-gold ); outline-offset: 2px; }

/* Zone dimmed + inert when the active goal filter excludes it. */
.svc-gf__zone.is-off { opacity: .3; pointer-events: none; }

/* "Seluruh tubuh" pill (no shape on the body SVG) + the goal-filter "show
   all" link that appears inside the zone panel when chips are hidden. */
.svc-gf__zone--all { display: inline-flex; align-items: center; justify-content: center; margin: 10px auto 0; padding: 10px 20px; min-height: 44px; border: 1.5px solid var( --svc-gf-gold-dark ); border-radius: 999px; background: #fff; font: 700 13px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-heading ); cursor: pointer; }
.svc-gf__zone--all:hover, .svc-gf__zone--all.is-on { background: rgba( 188, 164, 67, .32 ); }
.svc-gf__zone--all[hidden] { display: none; }
.svc-gf__zone-showall { display: inline-block; margin-top: 8px; font: 700 12.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-gold-dark ); text-decoration: underline; text-underline-offset: 3px; }
.svc-gf__zone-showall:hover { text-decoration-color: currentColor; }

/* Legend under the SVGs: green dot = Masalah kulit (heal), gold = Estetika. */
.svc-gf__map-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12px; color: var( --svc-gf-muted ); }
.svc-gf__map-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 2px; }
.svc-gf__map-dot--heal { background: #2d5c3b; }
.svc-gf__map-dot--uplift { background: var( --svc-gf-gold ); }

/* Goal-filter tints: "all" recolours single-goal zones (heal-only = green,
   uplift-only = the existing gold default, dual-goal zones stay neutral
   gold); "heal"/"uplift" recolour every remaining (non-off) zone since the
   others are already dimmed by .is-off above. Higher specificity than the
   .has-img base rules above so it wins regardless of source order. */
.svc-gf__face[data-goal-filter="all"] .svc-gf__zone[data-goals~="heal"]:not( [data-goals~="uplift"] ) { fill: rgba( 45, 92, 59, .22 ); }
.svc-gf__face[data-goal-filter="all"] .svc-gf__zone[data-goals~="heal"]:not( [data-goals~="uplift"] ):hover,
.svc-gf__face[data-goal-filter="all"] .svc-gf__zone[data-goals~="heal"]:not( [data-goals~="uplift"] ).is-on { fill: rgba( 45, 92, 59, .5 ); }
.svc-gf__face[data-goal-filter="heal"] .svc-gf__zone { fill: rgba( 45, 92, 59, .22 ); }
.svc-gf__face[data-goal-filter="heal"] .svc-gf__zone:hover,
.svc-gf__face[data-goal-filter="heal"] .svc-gf__zone.is-on { fill: rgba( 45, 92, 59, .5 ); }
.svc-gf__face[data-goal-filter="uplift"] .svc-gf__zone { fill: rgba( 188, 164, 67, .1 ); }
.svc-gf__face[data-goal-filter="uplift"] .svc-gf__zone:hover,
.svc-gf__face[data-goal-filter="uplift"] .svc-gf__zone.is-on { fill: rgba( 188, 164, 67, .42 ); }

.svc-gf__zone-out { background: #fff; border: 1px solid var( --svc-gf-border ); border-radius: 16px; padding: 12px 14px; min-height: 76px; }
.svc-gf__zone-out b { font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-weight: 500; color: var( --svc-gf-heading ); font-size: 15px; display: block; margin-bottom: 4px; }
.svc-gf__zone-out b span { font-weight: 400; color: var( --svc-gf-muted ); }
.svc-gf__paused-note { margin: 4px 0 16px; padding-left: 10px; border-left: 2px solid var( --svc-gf-gold ); font-size: .95rem; color: var( --svc-gf-muted, #6b6b6b ); }
/* Empty state: two numbered steps so the visitor knows what the face map is for. */
.svc-gf__zone-hint { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.svc-gf__zone-hint li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var( --svc-gf-heading ); }
.svc-gf__zone-hint b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var( --svc-gf-surface ); color: var( --svc-gf-gold-dark ); display: grid; place-items: center; font: 700 12px var( --wp--preset--font-family--body, 'Lato', sans-serif ); }
.svc-gf__zone-cap { margin: 0 0 10px; font-size: 12.5px; color: var( --svc-gf-muted ); }
.svc-gf__zone-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* One chip style for both goals (a solid vs outlined pair read as selected /
   not-selected). Trailing arrow + 44px min height so they read as the next tap. */
.svc-gf__zone-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 1.5px solid var( --svc-gf-gold-dark ); background: #fff; border-radius: 999px; padding: 8px 14px; font: 700 13px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-heading ); text-decoration: none; transition: background .15s, transform .1s; }
.svc-gf__zone-chip[hidden] { display: none; }
.svc-gf__zone-chip::after { content: "\2192"; color: var( --svc-gf-gold-dark ); font-weight: 700; }
.svc-gf__zone-chip:hover, .svc-gf__zone-chip:focus-visible { background: var( --svc-gf-peach ); color: var( --svc-gf-heading ); text-decoration: none; }
.svc-gf__zone-chip:focus-visible { outline: 2px solid var( --svc-gf-gold-dark ); outline-offset: 2px; }
.svc-gf__zone-chip:active { transform: translateY( 1px ); }
.svc-gf__zone-noscript p { margin: 0 0 10px; }
.svc-gf__zone-noscript b { display: block; margin-bottom: 6px; font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-weight: 500; color: var( --svc-gf-heading ); }
.svc-gf__zone-noscript .svc-gf__zone-chip { margin: 0 6px 6px 0; display: inline-block; }

.svc-gf__unsure { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var( --svc-gf-border ); border-radius: 14px; padding: 14px 16px; font-size: 13px; margin-top: 8px; }
.svc-gf__unsure b { display: block; font-size: 13.5px; color: var( --svc-gf-heading ); font-weight: 600; }
.svc-gf__unsure-q { width: 36px; height: 36px; border-radius: 50%; background: var( --svc-gf-surface ); color: var( --svc-gf-gold-dark ); display: grid; place-items: center; font: 700 16px var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); flex: none; }
.svc-gf__unsure a { margin-left: auto; color: var( --svc-gf-gold-dark ); font-weight: 700; white-space: nowrap; text-decoration: none; }
.svc-gf__unsure a:hover { text-decoration: underline; }

/* "Tidak yakin?" quiz — always expanded (owner ruling 2026-09-04): a plain
   <section> + h3, same chrome as the face map; no entry button. */
/* Finder subtitle, moved from under the H1 into the quiz panel (owner request
   2026-09-23); typeset like the panel's own copy, not the hero lede. */
.svc-gf__quiz-intro { margin: 0 0 10px; font: 400 14px/1.55 var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-heading ); max-width: 60ch; }
.svc-gf__quiz-h { margin: 0 0 6px; font: 700 13.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-gold-dark ); padding: 4px 0; letter-spacing: 0; }
.svc-gf__quiz-h b { font-weight: 700; color: var( --svc-gf-heading ); }

/* "Tidak yakin?" quiz panel — ported from docs/mockups/goal-finder-mockup.html
   frame 5 (`.gf-quiz-prog` / `.gf-opt` → `svc-gf__quiz-prog` / `svc-gf__opt`). */
.svc-gf__quiz { background: #fff; border: 1px solid var( --svc-gf-border ); border-radius: 20px; padding: 16px 18px 18px; margin: 10px 0 0; }

.svc-gf__quiz-prog { height: 6px; background: var( --svc-gf-border-muted ); border-radius: 3px; margin: 4px 0 16px; overflow: hidden; }
.svc-gf__quiz-prog i { display: block; height: 100%; width: 20%; background: var( --svc-gf-gold ); transition: width .2s; }

.svc-gf__q { border: 0; padding: 0; margin: 0; }
.svc-gf__q[hidden] { display: none; }
.svc-gf__q legend { font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-weight: 500; font-size: 16px; color: var( --svc-gf-heading ); margin: 0 0 10px; padding: 0; }
.svc-gf__q-hint { display: block; font: 400 12.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-muted ); margin-top: 2px; }

.svc-gf__opt { display: flex; align-items: center; gap: 12px; border: 1.5px solid var( --svc-gf-border-muted ); background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; font-size: 14px; color: var( --svc-gf-heading ); cursor: pointer; }
.svc-gf__opt input[type="radio"], .svc-gf__opt input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var( --svc-gf-gold ); }
.svc-gf__opt:has( input:checked ) { border-color: var( --svc-gf-gold ); background: var( --svc-gf-peach ); }
.svc-gf__opt:has( input:focus-visible ) { outline: 2px solid var( --svc-gf-gold-dark ); outline-offset: 2px; }
.svc-gf__opt span { flex: 1; }

.svc-gf__quiz-nav { display: flex; gap: 10px; margin-top: 4px; }
.svc-gf__quiz-nav .svc-gf__btn { flex: 1; }
.svc-gf__quiz-nav [data-quiz-back][hidden] { display: none; }
.svc-gf__quiz-nav [data-quiz-next]:disabled { opacity: .5; cursor: not-allowed; }

.svc-gf__quiz-result[hidden] { display: none; }
.svc-gf__quiz-result { margin-top: 18px; }
.svc-gf__quiz-result .svc-gf__cards { margin-bottom: 12px; }
.svc-gf__quiz-result .svc-gf__empty { margin: 0; }
.svc-gf__quiz-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; padding: 10px 12px; background: var( --svc-gf-surface ); border-radius: 12px; font-size: 12.5px; color: var( --svc-gf-muted ); }
@media ( min-width: 768px ) { .svc-gf__quiz-summary { justify-content: flex-end; } }
.svc-gf__quiz-summary-l { font-weight: 700; color: var( --svc-gf-gold-dark ); margin-right: 2px; }
.svc-gf__quiz-summary-chip { display: inline-block; background: #fff; border: 1px solid var( --svc-gf-border ); border-radius: 999px; padding: 3px 10px; color: var( --svc-gf-heading ); line-height: 1.3; }
.svc-gf__quiz-summary-edit { margin-left: auto; background: none; border: 0; padding: 4px 2px; font: inherit; font-weight: 700; color: var( --svc-gf-gold-dark ); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.svc-gf__quiz-summary-edit:hover, .svc-gf__quiz-summary-edit:focus-visible { color: var( --svc-gf-heading ); outline: 0; }
.svc-gf__quiz-result-count { margin: 0 0 12px; font-size: 13.5px; color: var( --svc-gf-muted ); }
.svc-gf__quiz-area { order: -1; margin: 12px 16px -6px; font: 600 11.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-gold-dark ); }
.svc-gf__quiz-result .svc-gf__card .svc-gf__img { order: -2; }
.svc-gf__quiz-near { margin: -4px 16px 10px; padding: 6px 10px; border-radius: 8px; background: var( --svc-gf-surface ); font: 600 11.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-gold-dark ); }
.svc-gf__quiz-more { margin-top: 6px; padding-top: 16px; border-top: 1px solid var( --svc-gf-border ); }
.svc-gf__quiz-more-h { margin: 0 0 12px; font: 500 15px var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); color: var( --svc-gf-heading ); }
.svc-gf__quiz-more-row { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
@media ( min-width: 600px ) { .svc-gf__quiz-more-row { grid-template-columns: 88px 1fr; align-items: start; gap: 10px; } }
.svc-gf__quiz-more-row:last-child { margin-bottom: 0; }
.svc-gf__quiz-more-l { font: 700 13px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-heading ); padding-top: 9px; }
.svc-gf__quiz-more-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-gf__quiz-more-btn.svc-gf__btn { flex: 0 1 auto; min-height: 40px; padding: 9px 14px 9px 16px; border-radius: 999px; text-align: left; display: inline-flex; align-items: center; gap: 8px; }
.svc-gf__quiz-more-btn.svc-gf__btn::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate( -45deg ); flex: none; opacity: .7; }
@media ( max-width: 599px ) { .svc-gf__quiz-more-btn.svc-gf__btn { flex: 1 1 100%; justify-content: space-between; } }

/* concern grid */
.svc-gf__concerns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media ( min-width: 768px ) { .svc-gf__concerns { grid-template-columns: repeat( 4, 1fr ); } }

.svc-gf__concern { border: 1px solid var( --svc-gf-border ); background: #fff; border-radius: 16px; padding: 16px 14px 14px; text-align: left; cursor: pointer; color: var( --svc-gf-heading ); position: relative; min-height: 118px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.svc-gf__concern:hover, .svc-gf__concern:focus-visible { border-color: var( --svc-gf-gold ); box-shadow: 0 8px 22px rgba( 188, 164, 67, .18 ); outline: 0; }
.svc-gf__concern svg { width: 28px; height: 28px; stroke: var( --svc-gf-gold-dark ); fill: none; }
.svc-gf__concern-img { display: block; width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: var( --svc-gf-surface ); margin-bottom: 2px; }
@media ( min-width: 768px ) { .svc-gf__concern-img { width: 84px; height: 84px; } }
.svc-gf__concern b { font-size: 14.5px; line-height: 1.25; font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-weight: 500; }
.svc-gf__concern small { font-size: 11.5px; color: var( --svc-gf-muted ); line-height: 1.3; }
.svc-gf__concern-n { position: absolute; top: 12px; right: 12px; font-size: 10.5px; color: var( --svc-gf-gold-dark ); background: var( --svc-gf-surface ); border-radius: 999px; padding: 2px 8px; font-weight: 700; }

/* results head */
.svc-gf__filters { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.svc-gf__filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-gf__filter-l { flex: none; min-width: 64px; font: 600 12.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-muted ); }
.svc-gf__filter[hidden] { display: none; }
.svc-gf__filter-t { flex: none; margin-left: auto; border: 0; background: none; padding: 6px 2px; min-height: 36px; font: 600 12.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-gold-dark ); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var( --svc-gf-border-muted ); white-space: nowrap; }
.svc-gf__filter-t:hover { text-decoration-color: currentColor; }
.svc-gf__filter-t:focus-visible { outline: 2px solid var( --svc-gf-gold ); outline-offset: 2px; border-radius: 4px; }
.svc-gf__filter-t.is-active { color: var( --svc-gf-heading ); text-decoration: none; }
.svc-gf__filter-t.is-active::before { content: "\2713\00a0"; color: var( --svc-gf-gold-dark ); }
@media ( max-width: 479px ) { .svc-gf__filter-t { margin-left: 0; flex-basis: 100%; text-align: left; padding-left: 0; } }
.svc-gf__chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.svc-gf__chip { border: 1px solid var( --svc-gf-border-muted ); background: #fff; border-radius: 999px; padding: 7px 14px; min-height: 36px; font: 600 12.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-body ); cursor: pointer; white-space: nowrap; }
.svc-gf__chip.is-active { background: var( --svc-gf-heading ); border-color: var( --svc-gf-heading ); color: #fff; }
.svc-gf__chip:focus-visible { outline: 2px solid var( --svc-gf-gold ); outline-offset: 2px; }
.svc-gf__count { font-size: 13px; color: var( --svc-gf-muted ); margin: 0 0 16px; }
.svc-gf__why { margin: -2px 0 14px; font-size: 13px; color: var( --svc-gf-muted ); }
.svc-gf__empty { font-size: 14px; color: var( --svc-gf-muted ); background: #fff; border: 1px dashed var( --svc-gf-border-muted ); border-radius: 14px; padding: 20px; text-align: center; }
.svc-gf__empty[hidden] { display: none; }

/* result cards */
.svc-gf__cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 8px; }
@media ( min-width: 768px ) { .svc-gf__cards { grid-template-columns: 1fr 1fr; } }
@media ( min-width: 1200px ) { .svc-gf__cards { grid-template-columns: repeat( 3, 1fr ); } }

.svc-gf__card { background: #fff; border: 1px solid var( --svc-gf-border ); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba( 25, 28, 29, .05 ); display: flex; flex-direction: column; }
.svc-gf__card[hidden] { display: none; }
.svc-gf__img { height: 160px; position: relative; display: flex; align-items: flex-end; padding: 10px 12px; color: #fff; }
@media ( min-width: 768px ) { .svc-gf__img { height: 180px; } }
.svc-gf__img::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 160deg, var( --c1, #8c7332 ), var( --c2, #d8c98a ) ); }
.svc-gf__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-gf__img-ph { position: relative; z-index: 1; background: rgba( 0, 0, 0, .35 ); padding: 4px 8px; border-radius: 6px; font: 600 11px var( --wp--preset--font-family--body, 'Lato', sans-serif ); }
.svc-gf__badge { position: absolute; top: 12px; left: 14px; z-index: 1; background: #fff; color: var( --svc-gf-gold-dark ); border-radius: 999px; padding: 4px 10px; font: 700 10.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); letter-spacing: .5px; }
.svc-gf__badge--v { left: auto; right: 14px; background: #d6c422; color: #3a3020; }

.svc-gf__title { font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-size: 17px; margin: 14px 14px 2px; color: var( --svc-gf-heading ); font-weight: 500; line-height: 1.2; }
.svc-gf__price { margin: 0 14px; font-size: 13.5px; color: var( --svc-gf-muted ); }
.svc-gf__price b { color: var( --svc-gf-heading ); font-size: 15.5px; display: block; }
.svc-gf__price small { display: block; }
.svc-gf__desc { font-size: 13px; margin: 8px 14px; color: var( --svc-gf-body ); }
.svc-gf__tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 14px 14px; }
.svc-gf__tags span { font-size: 11px; background: var( --svc-gf-surface ); color: var( --svc-gf-gold-dark ); border-radius: 6px; padding: 3px 8px; font-weight: 700; }
.svc-gf__tags span.svc-gf__tag--dt { background: #eef5ee; color: var( --svc-gf-green ); }
.svc-gf__row { display: flex; gap: 8px; padding: 0 14px 14px; margin-top: auto; }

.svc-gf__btn { flex: 1; text-align: center; border-radius: 12px; padding: 11px 10px; font: 700 13.5px var( --wp--preset--font-family--body, 'Lato', sans-serif ); cursor: pointer; border: 1.5px solid var( --svc-gf-gold ); background: #fff; color: var( --svc-gf-gold-dark ); text-decoration: none; }
.svc-gf__btn:hover { background: var( --svc-gf-surface ); }
.svc-gf__btn--solid, .svc-gf__btn.svc-gf__btn--solid { background: var( --svc-gf-gold ); color: #fff; }
.svc-gf__btn--solid:hover { background: var( --svc-gf-gold-dark ); }
.svc-gf__add.is-on { background: var( --svc-gf-heading ); border-color: var( --svc-gf-heading ); color: #fff; }

/* cross-sell + consult */
.svc-gf__cross { background: var( --svc-gf-heading ); color: #fff; border-radius: 16px; padding: 18px 20px; margin: 8px 0 16px; }
.svc-gf__cross small { letter-spacing: 2px; font-weight: 700; font-size: 10.5px; color: #d6c422; }
.svc-gf__cross b { display: block; font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-weight: 500; font-size: 16px; margin: 6px 0 4px; }
/* Owner PDF 2026-09-29: description was near-invisible (inherited body grey at .85 opacity). */
.svc-gf__cross p { margin: 0; font-size: 13px; color: #fff; }
.svc-gf__cross .svc-gf__btn { margin-top: 12px; display: inline-block; flex: none; }

.svc-gf__consult { border: 1.5px dashed var( --svc-gf-gold, #d8c98a ); background: var( --svc-gf-peach ); border-radius: 16px; padding: 18px 20px; margin: 8px 0 16px; font-size: 13.5px; }
.svc-gf__consult b { font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-weight: 500; font-size: 16px; color: var( --svc-gf-heading ); display: block; margin-bottom: 4px; }
.svc-gf__consult p { margin: 0; }
.svc-gf__consult a { display: inline-block; margin-top: 10px; font-weight: 700; color: var( --svc-gf-gold-dark ); text-decoration: none; }
.svc-gf__consult a:hover { text-decoration: underline; }

/* compare */
.svc-gf__compare { margin: 20px 0 24px; }
/* Always visible (owner ruling 2026-09-04, same as the face map): a plain
   heading, no <details> expander. */
.svc-gf__compare-h { margin: 0; font: 500 18px var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); color: var( --svc-gf-heading ); letter-spacing: -.2px; }
.svc-gf__compare-body { margin-top: 12px; }

/* compare table — ported from docs/mockups/goal-finder-mockup.html's `.gf-cmp`.
   Border/radius live on the wrapper (not the table) so a fixed table-layout +
   overflow-x:auto doesn't clip corners. */
.svc-gf__cmp-wrap { overflow-x: auto; border: 1px solid var( --svc-gf-border ); border-radius: 16px; background: #fff; -webkit-overflow-scrolling: touch; }
.svc-gf__cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13.5px; line-height: 1.45; }

/* Fixed label-column width; table-layout:fixed then splits the rest equally
   across the 3 service columns -- this is the actual fix for the unequal
   column widths `table-layout:auto` used to produce. */
.svc-gf__cmp th:first-child, .svc-gf__cmp td:first-child { width: 112px; }

.svc-gf__cmp th, .svc-gf__cmp td { padding: 12px 16px; border-bottom: 1px solid var( --svc-gf-border ); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.svc-gf__cmp thead th { font: 500 15px var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); color: var( --svc-gf-heading ); background: var( --svc-gf-surface ); padding: 14px 16px; }
.svc-gf__cmp .svc-gf__cmp-label { color: var( --svc-gf-muted ); font: 600 13px var( --wp--preset--font-family--body, 'Lato', sans-serif ); vertical-align: top; padding-top: 12px; }
.svc-gf__cmp-cta td { border-bottom: 0; }
.svc-gf__cmp td b { font: 500 16px var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); color: var( --svc-gf-heading ); }
.svc-gf__cmp .rec { background: #fffbe9; }
.svc-gf__cmp .star { display: block; color: var( --svc-gf-gold-dark ); font-weight: 700; font-size: 12px; }
.svc-gf__cmp-none { color: var( --svc-gf-muted ); }
.svc-gf__cmp .svc-gf__btn { display: inline-block; flex: none; padding: 9px 14px; font-size: 13px; }
.svc-gf__cmp .svc-gf__btn:focus-visible { outline: 2px solid var( --svc-gf-gold ); outline-offset: 2px; }
.svc-gf__compare .svc-gf__fine { margin-top: 10px; }

@media ( max-width: 767px ) {
	.svc-gf__cmp { table-layout: auto; min-width: 100%; }
	.svc-gf__cmp thead th { font-size: 14px; }
	.svc-gf__cmp .svc-gf__cmp-label { font-size: 12px; }
	.svc-gf__cmp th, .svc-gf__cmp td { padding: 11px 12px; }
	.svc-gf__cmp th:not( :first-child ), .svc-gf__cmp td:not( :first-child ) { width: 200px; min-width: 200px; }
	/* Label column becomes sticky so it doesn't scroll away with the 3
	   service columns. It's never `.rec`, so the white/surface background
	   stays correct without extra rules. */
	.svc-gf__cmp th:first-child, .svc-gf__cmp td:first-child { position: sticky; left: 0; z-index: 1; width: 96px; min-width: 96px; background: #fff; box-shadow: 1px 0 0 var( --svc-gf-border ); }
	.svc-gf__cmp thead th:first-child { background: var( --svc-gf-surface ); }
}

/* sticky plan bar — full-width dock on mobile, floating centered dock ≥768px */
.svc-gf__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 8px; align-items: center; padding: 10px 16px calc( 10px + env( safe-area-inset-bottom, 0px ) ); background: rgba( 255, 255, 255, .94 ); -webkit-backdrop-filter: blur( 10px ); backdrop-filter: blur( 10px ); border-top: 1px solid var( --svc-gf-border ); box-shadow: 0 -12px 32px rgba( 60, 50, 20, .08 ); }
.svc-gf__bar[hidden] { display: none; }
/* Reserve room so the last card is never hidden behind the bar. */
.svc-gf:has( .svc-gf__bar:not( [hidden] ) ) { padding-bottom: 112px; }

.svc-gf__plan { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0 4px 0 0; padding: 4px 6px 4px 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: var( --wp--preset--font-family--body, 'Lato', sans-serif ); color: var( --svc-gf-muted ); line-height: 1.2; }
.svc-gf__plan b { font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-weight: 500; font-size: 15px; color: var( --svc-gf-heading ); white-space: nowrap; }
.svc-gf__plan span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var( --svc-gf-gold-dark ); white-space: nowrap; }
.svc-gf__plan:hover span, .svc-gf__plan:focus-visible span { text-decoration: underline; text-underline-offset: 2px; }
.svc-gf__plan:focus-visible { outline: 2px solid var( --svc-gf-gold ); outline-offset: 2px; border-radius: 6px; }

.svc-gf__bar .svc-gf__btn { flex: 1; padding: 12px 12px; white-space: nowrap; }
.svc-gf__bar .svc-gf__btn--wa { background: #fff; border-color: #1fb85a; color: #128c41; }
.svc-gf__bar .svc-gf__btn--wa:hover { background: #eefaf2; opacity: 1; }
.svc-gf__btn--wa { background: var( --svc-gf-wa ); border-color: var( --svc-gf-wa ); color: #fff; }
.svc-gf__btn--wa:hover { opacity: .9; }

@media ( min-width: 768px ) {
	.svc-gf__bar { left: 50%; right: auto; bottom: 20px; transform: translateX( -50% ); width: max-content; max-width: calc( 100vw - 40px ); gap: 10px; padding: 12px 14px 12px 22px; border: 1px solid var( --svc-gf-border ); border-radius: 18px; box-shadow: 0 8px 24px rgba( 60, 50, 20, .10 ), 0 24px 60px rgba( 60, 50, 20, .12 ); }
	.svc-gf:has( .svc-gf__bar:not( [hidden] ) ) { padding-bottom: 140px; }
	.svc-gf__plan { margin-right: 14px; padding-right: 22px; border-right: 1px solid var( --svc-gf-border ); }
	.svc-gf__bar .svc-gf__btn { flex: none; min-width: 148px; padding: 12px 22px; }
}

/* toast */
.svc-gf__toast { position: fixed; left: 20px; right: 20px; bottom: calc( 88px + env( safe-area-inset-bottom, 0px ) ); z-index: 61; background: var( --svc-gf-heading ); color: #fff; border-radius: 12px; padding: 12px 16px; font-size: 13px; opacity: 0; transform: translateY( 8px ); transition: .25s; pointer-events: none; max-width: 420px; margin: 0 auto; }
.svc-gf__toast.is-show { opacity: 1; transform: none; }

/* "Rencana saya" bottom sheet — ported from docs/mockups/goal-finder-mockup.html's `.gf-sheet` / `.gf-wa-msg`. */
body.svc-gf-lock { overflow: hidden; }

.svc-gf__backdrop { position: fixed; inset: 0; z-index: 65; background: rgba( 25, 22, 15, .45 ); }
.svc-gf__backdrop[hidden] { display: none; }

.svc-gf__sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -20px 50px rgba( 0, 0, 0, .18 ); padding: 10px 16px calc( 22px + env( safe-area-inset-bottom ) ); max-height: 78vh; display: flex; flex-direction: column; }
.svc-gf__sheet[hidden] { display: none; }
.svc-gf__grab { width: 44px; height: 5px; border-radius: 3px; background: var( --svc-gf-border-muted ); margin: 0 auto 10px; flex: none; }
.svc-gf__sheet h3 { font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif ); font-weight: 500; font-size: 18px; margin: 0 0 2px; color: var( --svc-gf-heading ); }
.svc-gf__sub { font-size: 12px; color: var( --svc-gf-muted ); margin: 0 0 10px; }
.svc-gf__sheet ul { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; }
.svc-gf__sheet li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var( --svc-gf-border ); font-size: 13px; }
.svc-gf__sheet li.is-missing { color: var( --svc-gf-muted ); }
.svc-gf__sheet li b { color: var( --svc-gf-heading ); font-weight: 700; }
.svc-gf__sheet li span { white-space: nowrap; color: var( --svc-gf-heading ); font-weight: 700; }
.svc-gf__sheet li.is-missing span { color: var( --svc-gf-muted ); white-space: normal; text-align: right; }
.svc-gf__sheet li button[data-remove] { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var( --svc-gf-border-muted ); background: #fff; color: var( --svc-gf-muted ); font-size: 15px; line-height: 1; cursor: pointer; }
.svc-gf__sheet li button[data-remove]:hover { border-color: var( --svc-gf-gold ); color: var( --svc-gf-gold-dark ); }
.svc-gf__tot { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 6px; font-size: 13px; color: var( --svc-gf-muted ); flex: none; }
.svc-gf__tot b { font-size: 16px; color: var( --svc-gf-heading ); }
.svc-gf__fine { font-size: 10.5px; color: var( --svc-gf-muted ); margin: 0 0 10px; flex: none; }
.svc-gf__sheet .svc-gf__row { padding: 0; margin-top: 0; flex: none; }
.svc-gf__close { position: absolute; top: 10px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var( --svc-gf-surface ); color: var( --svc-gf-gold-dark ); font-size: 18px; line-height: 1; cursor: pointer; }

/* wa-msg preview — ported for reuse (not wired into the sheet yet). */
.svc-gf__wa-msg { background: #e7f8ec; border: 1px solid #bfe6cb; border-radius: 12px 12px 12px 2px; padding: 10px 12px; font-size: 12px; color: #1b3d25; white-space: pre-line; line-height: 1.45; margin-bottom: 10px; }

@media ( min-width: 768px ) {
	.svc-gf__sheet {
		left: 50%;
		right: auto;
		bottom: auto;
		top: 50%;
		transform: translate( -50%, -50% );
		width: 480px;
		max-width: calc( 100vw - 40px );
		max-height: 80vh;
		border-radius: 20px;
	}
	.svc-gf__toast { bottom: 104px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.svc-gf__goal, .svc-gf__concern, .svc-gf__toast, .svc-gf__bar { transition: none; }
}

/* --- design pass 2026-09-11 -------------------------------------------------
   Two labels above the head restated what was already on screen:

   1. "• MULAI" sat above the H1 while the step indicator directly above it
      already read "TUJUAN … 1/3" — an all-caps tracked eyebrow saying the same
      fact a second time. Hidden in the launcher head and the goal step only;
      the concern steps keep their eyebrow, which names the goal you picked.
   2. "Terkait topik: <keluhan>" printed immediately under the <h2> that is
      that same keluhan label — both read from $concern_data['label'], so it
      could never say anything the heading did not.

   Markup is left in place (screen-reader-neutral, both are decorative
   restatements); only the rendering is dropped. */
.svc-gf__head > .svc-gf__eyebrow,
.svc-gf__step[ data-step="goal" ] > .svc-gf__eyebrow,
.svc-gf__results > .svc-gf__why { display: none; }

/* Visitor-selected comparisons (owner PDF, 2026-09-25). */
.svc-gf__compare [hidden] { display: none !important; }
.svc-gf__compare-choices { margin: 16px 0 0; padding: 14px; border: 1px solid var(--svc-gf-border); border-radius: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; }
.svc-gf__compare-choices legend { font-size: 14px; padding: 0 6px; }
.svc-gf__compare-choices label { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 14px; cursor: pointer; }
.svc-gf__compare-choices input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--svc-gf-gold-dark); }
.svc-gf__compare-choices input:disabled + span { opacity: .55; }
.svc-gf__compare-choices input:focus-visible { outline: 2px solid var(--svc-gf-gold-dark); outline-offset: 3px; }