/*
The Boss Love Theme — Style Quiz page.
Loaded only on pages using the "Style Quiz" template.
*/

/* ============ Style Quiz ============ */
.bl-quiz-wrap{ padding-bottom:70px; }
.bl-quiz{ max-width:860px; margin:10px auto 0; }
.bl-quiz-head{ text-align:center; margin-bottom:30px; }
.bl-quiz-brand{ font-size:var(--bl-fs-xs); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--bl-theme-text,#D4145A); }
.bl-quiz-title{ font-size:clamp(1.8rem,3vw + 1rem,2.9rem); line-height:1.2; margin:10px 0 8px; }
.bl-quiz-sub{ color:var(--bl-soft); font-size:var(--bl-fs-sm); margin:0 0 20px; }
.bl-quiz-progress{ height:5px; border-radius:20px; background:var(--bl-line); overflow:hidden; max-width:420px; margin:0 auto; }
.bl-quiz-progress-bar{ display:block; height:100%; background:var(--bl-theme); border-radius:20px; transition:width .45s ease-out; }

.bl-quiz-step{ display:none; border:0; padding:0; margin:0; }
.bl-quiz-step.is-active{ display:block; animation:bl-fade .45s ease-out; }
@keyframes bl-fade{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }
.bl-quiz-num{ display:block; text-align:center; font-size:var(--bl-fs-xs); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--bl-theme); margin-bottom:6px; }
.bl-quiz-q{ display:block; width:100%; text-align:center; font-family:var(--bl-font-display); font-size:clamp(1.3rem,1.6vw + 1rem,1.8rem); font-weight:600; color:var(--bl-dark); margin:0 auto 24px; padding:0; }

.bl-quiz-options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.bl-quiz-option{
	position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
	background:var(--bl-surface); border:2px solid var(--bl-line); border-radius:15px; padding:24px 18px; cursor:pointer;
	font-family:var(--bl-font-body); transition:var(--bl-transition);
}
.bl-quiz-option:hover{ border-color:color-mix(in srgb, var(--bl-theme) 50%, transparent); transform:translateY(-3px); box-shadow:var(--bl-shadow-sm); }
.bl-quiz-option.is-selected{ border-color:var(--bl-theme); background:color-mix(in srgb, var(--bl-theme) 5%, #fff); box-shadow:var(--bl-glow); }
.bl-quiz-icon{ display:inline-flex; transition:var(--bl-transition); margin-bottom:4px; }
.bl-quiz-option.is-selected .bl-quiz-icon{ transform:scale(1.08); }
.bl-quiz-label{ font-family:var(--bl-font-display); font-size:1.02rem; font-weight:600; color:var(--bl-dark); }
.bl-quiz-option.is-selected .bl-quiz-label{ color:var(--bl-theme-text,#D4145A); }
.bl-quiz-note{ font-size:var(--bl-fs-xs); color:var(--bl-soft); }
.bl-quiz-check{
	position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--bl-theme);
	color:#fff !important; font-size:12px; display:grid; place-items:center; opacity:0; transform:scale(.6); transition:var(--bl-transition);
}
.bl-quiz-option.is-selected .bl-quiz-check{ opacity:1; transform:scale(1); }

.bl-quiz-actions{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px; }
.bl-quiz-back{ background:none; border:0; cursor:pointer; font-family:var(--bl-font-body); font-size:var(--bl-fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bl-soft); transition:var(--bl-transition); }
.bl-quiz-back:hover{ color:var(--bl-theme-text,#D4145A); }
.bl-quiz-next[disabled], .bl-quiz-submit[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.bl-quiz-loading{ text-align:center; padding:50px 0; }
.bl-quiz-spinner{ width:42px; height:42px; border:3px solid var(--bl-line); border-top-color:var(--bl-theme); border-radius:50%; display:inline-block; animation:bl-spin .8s linear infinite; }
@keyframes bl-spin{ to{ transform:rotate(360deg);} }
.bl-quiz-loading p{ margin-top:14px; color:var(--bl-soft); font-size:var(--bl-fs-sm); }

.bl-quiz-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.bl-quiz-chip{ font-size:var(--bl-fs-xs); font-weight:600; padding:6px 14px; border-radius:20px; background:color-mix(in srgb, var(--bl-theme) 9%, #fff); color:var(--bl-theme); border:1.5px solid color-mix(in srgb, var(--bl-theme) 35%, transparent); }
.bl-quiz-retake{ background:none; border:0; cursor:pointer; font-family:var(--bl-font-body); font-size:var(--bl-fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bl-dark); transition:var(--bl-transition); }
.bl-quiz-retake:hover{ color:var(--bl-theme-text,#D4145A); }
.bl-quiz-empty{ color:var(--bl-soft); font-size:var(--bl-fs-sm); font-style:italic; }
.bl-quiz-extra{ max-width:860px; margin:40px auto 0; }


@media (max-width:600px){
	.bl-quiz-options{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
	.bl-quiz-option{ padding:18px 12px; border-radius:12px; }
}