/**
 * Blunor Which-System quiz — front-end styles.
 * Scoped under .bwn-quiz so it cannot leak into surrounding Elementor styles.
 * Brand palette: navy #242a56, accent orange #f26322, cream #f2f1ee.
 */

.bwn-quiz {
	position: relative;
	max-width: 1020px;
	margin: 0 auto;
	padding: 0;
	font-family: inherit;
	color: inherit;
	scroll-margin-top: 100px; /* room for sticky header when anchor-jumping */
}

/* Card treatment — the reason the quiz reads as a distinct call-to-action. */
.bwn-quiz--card {
	background: #fff;
	border-radius: 24px;
	box-shadow:
		0 1px 2px rgba(15, 17, 22, .04),
		0 24px 48px rgba(15, 17, 22, .10),
		0 6px 14px rgba(242, 99, 34, .08);
	border-top: 5px solid #f26322;
	padding: 44px 38px 40px;
}
@media (min-width: 700px) {
	.bwn-quiz--card { padding: 56px 60px 52px; }
}

/* Top meta bar — "30 seconds · no email required" reassurance. */
.bwn-quiz__meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	padding: 8px 18px;
	background: rgba(242, 99, 34, .09);
	color: #f26322;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.bwn-quiz__meta-icon { flex: 0 0 auto; }

/* Progress dots. */
.bwn-quiz__progress {
	display: flex;
	gap: 10px;
	margin: 0 0 26px;
}
.bwn-quiz__dot {
	display: inline-block;
	width: 40px;
	height: 5px;
	background: #e5e7eb;
	border-radius: 999px;
	transition: background .3s;
}
.bwn-quiz__dot.is-active { background: #f26322; }

/* Steps. */
.bwn-quiz__step { display: none; text-align: left; }
.bwn-quiz__step.is-active {
	display: block;
	animation: bwn-fade-in .35s ease-out both;
}
@keyframes bwn-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

.bwn-quiz__eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #6b7280;
}

.bwn-quiz__q {
	margin: 0 0 30px;
	font-size: clamp(26px, 3.6vw, 40px);
	line-height: 1.15;
	color: #242a56;
	font-weight: 700;
}

/* Options grid — big tappable cards. */
.bwn-quiz__options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 640px) {
	.bwn-quiz__options {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}

.bwn-quiz__opt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 26px 30px 28px;
	padding-right: 56px; /* room for arrow */
	border: 2px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	color: #242a56;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
	overflow: hidden;
}
.bwn-quiz__opt::before {
	/* Left accent bar — invisible until hover/focus. */
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
	background: #f26322;
	transform: scaleY(0);
	transform-origin: center;
	transition: transform .18s ease-out;
}
.bwn-quiz__opt:hover,
.bwn-quiz__opt:focus-visible {
	border-color: #f26322;
	background: #fff8f4 !important;
	color: #242a56 !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(242, 99, 34, .14);
}
.bwn-quiz__opt:hover::before,
.bwn-quiz__opt:focus-visible::before { transform: scaleY(1); }
.bwn-quiz__opt:focus-visible {
	outline: 3px solid rgba(242, 99, 34, .35);
	outline-offset: 2px;
}
.bwn-quiz__opt:active { transform: translateY(0); }

/* --- Label + description text colors ---
 * Astra/Elementor's global `button:hover, .elementor-button:hover` rules
 * ship with `color: #fff !important;`, which repaints the label span on
 * hover and makes "COLOSTRUM ONLY" disappear against our light-orange
 * background. We use `!important` here specifically to defeat that
 * cascade — do not remove without also removing the theme override. */
.bwn-quiz__opt-label,
.bwn-quiz__opt:hover .bwn-quiz__opt-label,
.bwn-quiz__opt:focus-visible .bwn-quiz__opt-label,
.bwn-quiz__opt:active .bwn-quiz__opt-label {
	color: #242a56 !important;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.25;
}
.bwn-quiz__opt-desc,
.bwn-quiz__opt:hover .bwn-quiz__opt-desc,
.bwn-quiz__opt:focus-visible .bwn-quiz__opt-desc,
.bwn-quiz__opt:active .bwn-quiz__opt-desc {
	color: #6b7280 !important;
	font-size: 15px;
	line-height: 1.4;
}

.bwn-quiz__opt-arrow {
	position: absolute;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	color: #d1d5db !important;
	font-size: 20px;
	font-weight: 700;
	transition: color .18s, transform .18s;
}
.bwn-quiz__opt:hover .bwn-quiz__opt-arrow,
.bwn-quiz__opt:focus-visible .bwn-quiz__opt-arrow {
	color: #f26322 !important;
	transform: translate(4px, -50%);
}

/* Attention pulse on the first render — draws the eye once, then stops. */
.bwn-quiz__step[data-bwn-step="q1"].is-active .bwn-quiz__opt {
	animation: bwn-nudge 2.4s ease-in-out .8s 2 both;
}
@keyframes bwn-nudge {
	0%,  100% { box-shadow: 0 0 0 0 rgba(242, 99, 34, 0); }
	50%       { box-shadow: 0 0 0 6px rgba(242, 99, 34, .10); }
}
@media (prefers-reduced-motion: reduce) {
	.bwn-quiz__step[data-bwn-step="q1"].is-active .bwn-quiz__opt { animation: none; }
	.bwn-quiz__step.is-active { animation: none; }
}

.bwn-quiz__back {
	display: inline-block;
	margin-top: 20px;
	padding: 6px 12px;
	background: transparent;
	border: 0;
	color: #6b7280;
	font-size: 13px;
	cursor: pointer;
	transition: color .2s;
}
.bwn-quiz__back:hover { color: #242a56; }

/* Loading. */
.bwn-quiz__step--loading {
	text-align: center;
	padding: 40px 20px 32px;
	color: #6b7280;
}
.bwn-quiz__spinner {
	width: 36px; height: 36px;
	margin: 0 auto 14px;
	border: 3px solid #f2f1ee;
	border-top-color: #f26322;
	border-radius: 50%;
	animation: bwn-spin .9s linear infinite;
}
@keyframes bwn-spin { to { transform: rotate(360deg); } }

/* No-match. */
.bwn-quiz__nomatch { text-align: center; padding: 24px 12px 8px; }
.bwn-quiz__nomatch h3 { color: #242a56; margin: 0 0 12px; }
.bwn-quiz__nomatch p { color: #6b7280; margin: 0 0 18px; }

.bwn-quiz__error { color: #b32d2e; text-align: center; }

/* --------- Result panel --------- */
.bwn-result { text-align: center; padding-top: 6px; }
.bwn-result__title {
	margin: 4px 0 22px;
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.15;
	color: #242a56;
}
.bwn-result__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 22px;
}
@media (min-width: 640px) {
	.bwn-result__grid { grid-template-columns: repeat(2, 1fr); }
}
.bwn-result__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e7e8ee;
	border-radius: 12px;
	overflow: hidden;
	text-align: left;
	transition: box-shadow .2s, transform .2s;
}
.bwn-result__card:hover {
	box-shadow: 0 12px 28px rgba(15, 17, 22, .10);
	transform: translateY(-2px);
}
.bwn-result__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	background: #f7f7f7;
	overflow: hidden;
}
.bwn-result__thumb img {
	display: block;
	width: 100%; height: 100%;
	object-fit: contain;
}
.bwn-result__body { padding: 14px 16px 18px; }
.bwn-result__name {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.3;
	color: #242a56;
}
.bwn-result__qty {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #f26322;
}
.bwn-result__price { margin: 0 0 10px; font-size: 14px; color: #4b5563; }
.bwn-result__more {
	font-size: 13px;
	color: #6b7280;
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
}
.bwn-result__more:hover { color: #f26322; border-bottom-color: #f26322; }

.bwn-result__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}
.bwn-result__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 34px;
	border-radius: 999px;
	background: #f26322;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, transform .15s, box-shadow .2s;
	box-shadow: 0 10px 24px rgba(242, 99, 34, .28);
}
.bwn-result__buy:hover {
	background: #d95419;
	transform: translateY(-1px);
	color: #fff;
	box-shadow: 0 14px 30px rgba(242, 99, 34, .34);
}
.bwn-result__buy.is-loading { opacity: .7; pointer-events: none; }

.bwn-result__restart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	border-radius: 999px;
	background: transparent;
	border: 2px solid #d6d8e0;
	color: #242a56;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .10em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}
.bwn-result__restart:hover { border-color: #242a56; }