/**
 * Bestlab Product Advisor — front-end wizard.
 * Uses the theme's --bl-* tokens where present, with safe fallbacks so it also
 * works standalone. Per-instance accent via --bl-adv-accent (set inline).
 */

.bl-adv {
	--bl-adv-accent: #E8550D;
	--_navy: var(--bl-navy, #0B2C5A);
	--_ink: var(--bl-ink, #1A1F2B);
	--_muted: var(--bl-muted, #6B7280);
	--_line: var(--bl-line, #E5E7EB);
	--_soft: var(--bl-soft, #F6F8FB);
	--_radius: var(--bl-radius, 10px);
	font-family: var(--bl-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	color: var(--_ink);
	background: #fff;
	border: 1px solid var(--_line);
	border-radius: var(--_radius);
	box-shadow: var(--bl-shadow, 0 1px 3px rgba(16, 24, 40, .1));
	padding: clamp(16px, 3vw, 28px);
	margin: 24px 0;
	max-width: 960px;
}

/* Intro -------------------------------------------------------------------- */
.bl-adv__intro { margin-bottom: 18px; }
.bl-adv__intro-h { margin: 0 0 6px; color: var(--_navy); font-size: 1.35rem; }
.bl-adv__intro-t { margin: 0; color: var(--_muted); }

/* Progress ----------------------------------------------------------------- */
.bl-adv__progress { margin-bottom: 22px; }
.bl-adv__progress-bar {
	height: 6px; border-radius: 999px; background: var(--_line); overflow: hidden; margin-bottom: 14px;
}
.bl-adv__progress-bar span {
	display: block; height: 100%; width: 0; background: var(--bl-adv-accent);
	border-radius: 999px; transition: width .35s ease;
}
.bl-adv__progress-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-adv__dot {
	width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--_line);
	background: #fff; color: var(--_muted); font-weight: 700; font-size: .82rem;
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	padding: 0; transition: all .2s ease;
}
.bl-adv__dot[disabled] { cursor: default; opacity: .55; }
.bl-adv__dot.is-active { border-color: var(--bl-adv-accent); color: var(--bl-adv-accent); transform: scale(1.08); }
.bl-adv__dot.is-done { border-color: var(--bl-adv-accent); background: var(--bl-adv-accent); color: #fff; }

/* Steps -------------------------------------------------------------------- */
.bl-adv__step[hidden] { display: none; }
.bl-adv__step { animation: bl-adv-fade .3s ease; }
@keyframes bl-adv-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bl-adv__step-head { margin-bottom: 16px; }
.bl-adv__step-title { margin: 0 0 4px; color: var(--_navy); font-size: 1.25rem; }
.bl-adv__step-sub { margin: 0; color: var(--_muted); font-size: .95rem; }
.bl-adv__step-optional { margin: 10px 0 0; color: var(--_muted); font-size: .82rem; font-style: italic; }

/* Options ------------------------------------------------------------------ */
.bl-adv__options { display: grid; gap: 12px; }
.bl-adv__options--cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bl-adv__options--buttons { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.bl-adv__options--swatches { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

.bl-adv__opt {
	position: relative; display: flex; flex-direction: column; align-items: center;
	gap: 8px; text-align: center; background: #fff; border: 2px solid var(--_line);
	border-radius: var(--_radius); padding: 16px 14px; cursor: pointer;
	font: inherit; color: var(--_ink); transition: border-color .15s, box-shadow .15s, transform .1s;
}
.bl-adv__opt:hover { border-color: var(--bl-adv-accent); box-shadow: var(--bl-shadow, 0 2px 8px rgba(0, 0, 0, .08)); }
.bl-adv__opt:focus-visible { outline: 2px solid var(--bl-adv-accent); outline-offset: 2px; }
.bl-adv__opt[aria-pressed="true"] {
	border-color: var(--bl-adv-accent);
	background: color-mix(in srgb, var(--bl-adv-accent) 8%, #fff);
}
.bl-adv__options--buttons .bl-adv__opt { flex-direction: row; justify-content: flex-start; text-align: left; padding: 14px 16px; }

.bl-adv__opt-img { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bl-adv__opt-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bl-adv__opt-label { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.bl-adv__opt-desc { font-size: .8rem; color: var(--_muted); }

.bl-adv__swatch { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); }

.bl-adv__opt-check {
	position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid var(--_line); background: #fff; transition: all .15s; opacity: 0; transform: scale(.7);
}
.bl-adv__opt[aria-pressed="true"] .bl-adv__opt-check {
	opacity: 1; transform: none; border-color: var(--bl-adv-accent); background: var(--bl-adv-accent);
}
.bl-adv__opt[aria-pressed="true"] .bl-adv__opt-check::after {
	content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Navigation --------------------------------------------------------------- */
.bl-adv__nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.bl-adv__live { flex: 1 1 auto; color: var(--_muted); font-size: .9rem; min-height: 1.2em; }
.bl-adv__live strong { color: var(--bl-adv-accent); }
.bl-adv__btn {
	font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--_radius);
	padding: 11px 20px; border: 1px solid var(--_line); background: #fff; color: var(--_navy);
	transition: all .15s;
}
.bl-adv__btn:hover { border-color: var(--_navy); }
.bl-adv__btn[hidden] { display: none; }
.bl-adv__btn--primary { background: var(--bl-adv-accent); border-color: var(--bl-adv-accent); color: #fff; }
.bl-adv__btn--primary:hover { filter: brightness(.94); }
.bl-adv__btn:disabled { opacity: .5; cursor: not-allowed; }

/* Result ------------------------------------------------------------------- */
.bl-adv__result-h { margin: 0 0 6px; color: var(--_navy); }
.bl-adv__result-count { margin: 0 0 16px; color: var(--_muted); }
.bl-adv__result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 18px; }
.bl-adv__product { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--_ink); border: 1px solid var(--_line); border-radius: var(--_radius); padding: 12px; transition: box-shadow .15s; }
.bl-adv__product:hover { box-shadow: var(--bl-shadow-lg, 0 8px 20px rgba(0, 0, 0, .1)); }
.bl-adv__product-img { position: relative; display: block; }
.bl-adv__product-img img { width: 100%; height: auto; border-radius: 6px; }
.bl-adv__product-name { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.bl-adv__product-price { color: var(--bl-adv-accent); font-weight: 700; font-size: .9rem; }
.bl-adv__cta {
	display: inline-flex; align-items: center; gap: 8px; background: var(--bl-adv-accent);
	color: #fff; font-weight: 700; padding: 12px 24px; border-radius: var(--_radius); text-decoration: none;
}
.bl-adv__cta:hover { filter: brightness(.94); color: #fff; }
.bl-adv__cta.is-empty { background: var(--_muted); pointer-events: none; opacity: .7; }

.bl-adv.is-loading .bl-adv__live { opacity: .6; }

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 600px) {
	.bl-adv__nav { gap: 8px; }
	.bl-adv__live { order: 3; flex-basis: 100%; text-align: center; }
	.bl-adv__btn { flex: 1; text-align: center; }
}