/* Stoked Quiz Funnels — frontend styles (v0.1).
   Themed by --stkf-primary / --stkf-accent set inline per instance:
   quiz config theme > plugin settings > defaults. */

.stkf-quiz {
	--stkf-primary: #6d5df6;
	--stkf-accent: #ffb020;
	--stkf-ink: #14142b;
	--stkf-muted: #5a5f7a;
	--stkf-line: #e6e2d9;
	--stkf-bg: #ffffff;
	box-sizing: border-box;
	max-width: 560px;
	margin: 1.5rem auto;
	padding: 1.75rem 1.5rem 1.25rem;
	background: var(--stkf-bg);
	border: 1px solid var(--stkf-line);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(20, 20, 43, 0.08);
	font-family: inherit;
	color: var(--stkf-ink);
}
.stkf-quiz *, .stkf-quiz *::before, .stkf-quiz *::after { box-sizing: inherit; }

.stkf-head { text-align: left; margin-bottom: 1rem; }
.stkf-logo { max-height: 44px; width: auto; display: block; margin-bottom: 0.75rem; }
.stkf-title { margin: 0; font-size: 1.6rem; line-height: 1.15; color: var(--stkf-primary); }
.stkf-sub { margin: 0.35rem 0 0; color: var(--stkf-muted); font-size: 1rem; }

.stkf-progress { height: 8px; border-radius: 99px; background: var(--stkf-line); overflow: hidden; margin-bottom: 1.25rem; }
.stkf-progress-fill { height: 100%; width: 0; background: var(--stkf-accent); border-radius: 99px; transition: width 0.35s ease; }

.stkf-q { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.3; }
.stkf-hint { margin: -0.5rem 0 1rem; color: var(--stkf-muted); font-size: 0.95rem; }

.stkf-options { display: grid; gap: 0.6rem; }
.stkf-opt {
	display: block; width: 100%; text-align: left;
	padding: 0.85rem 1rem; font-size: 1rem; cursor: pointer;
	background: #fff; color: var(--stkf-ink);
	border: 2px solid var(--stkf-line); border-radius: 12px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.stkf-opt:hover, .stkf-opt:focus-visible { border-color: var(--stkf-primary); background: rgba(0, 0, 0, 0.02); }

.stkf-input {
	display: block; width: 100%; margin-bottom: 0.75rem;
	padding: 0.85rem 1rem; font-size: 1.05rem;
	border: 2px solid var(--stkf-line); border-radius: 12px; color: var(--stkf-ink);
}
.stkf-input:focus { outline: none; border-color: var(--stkf-primary); }
.stkf-err { min-height: 1.2em; margin: 0 0 0.5rem; color: #b3261e; font-size: 0.92rem; }

.stkf-cta {
	display: inline-block; width: 100%; text-align: center;
	padding: 0.95rem 1rem; font-size: 1.05rem; font-weight: 700; cursor: pointer;
	background: var(--stkf-primary); color: #fff; text-decoration: none;
	border: 0; border-radius: 12px;
}
.stkf-cta:hover, .stkf-cta:focus-visible { filter: brightness(1.08); }

.stkf-result-label { margin: 0 0 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; color: var(--stkf-muted); }
.stkf-match { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 2px solid var(--stkf-primary); border-radius: 14px; margin-bottom: 1rem; }
.stkf-score { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; border: 5px solid var(--stkf-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stkf-score-num { font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--stkf-primary); }
.stkf-score-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stkf-muted); }
.stkf-match-name { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.stkf-match-city { margin: 0.25rem 0 0; color: var(--stkf-muted); }

.stkf-actions { display: grid; gap: 0.6rem; margin-bottom: 0.75rem; }
.stkf-callback { background: var(--stkf-accent); color: var(--stkf-ink); }
.stkf-site { display: inline-block; margin-bottom: 1rem; color: var(--stkf-primary); font-weight: 600; }

.stkf-alt-label { margin: 0.5rem 0; font-size: 0.9rem; font-weight: 700; color: var(--stkf-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stkf-alts { display: grid; gap: 0.5rem; }
.stkf-alt { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.85rem; border: 1px solid var(--stkf-line); border-radius: 10px; }
.stkf-alt-fit { font-weight: 700; color: var(--stkf-primary); }

.stkf-done { padding: 1rem; border: 2px solid var(--stkf-accent); border-radius: 14px; margin-bottom: 1rem; }
.stkf-brand { margin: 1rem 0 0; text-align: center; font-size: 0.8rem; color: var(--stkf-muted); }
.stkf-error { color: #b3261e; }

@media (max-width: 480px) {
	.stkf-quiz { padding: 1.25rem 1rem 1rem; border-radius: 12px; }
	.stkf-match { flex-direction: column; text-align: center; }
}