/* Hair Quiz — styled to match the site's real design system (see theme/botanical-science.css):
   Source Serif 4 for headings, Hanken Grotesk for body, near-black text, gold + botanical-green accents. */

.nlq-wrap {
	--nlq-green: #065954;
	--nlq-green-dark: #043330;
	--nlq-gold: #E1B335;
	--nlq-gold-dark: #B18E21;
	--nlq-ink: #1c1b1b;
	--nlq-muted: #5d5f5f;
	--nlq-line: #e5e2e1;
	--nlq-cream: #fdf8f8;

	max-width: 640px;
	margin: 0 auto;
	padding: 0 20px;
	font-family: 'Hanken Grotesk', Arial, sans-serif;
	color: var(--nlq-ink);
	box-sizing: border-box;
}
.nlq-wrap *, .nlq-wrap *::before, .nlq-wrap *::after {
	box-sizing: border-box;
}

/* ---- Intro / info section around the quiz ---- */
.nlq-intro {
	text-align: center;
	padding: 56px 0 32px;
}
.nlq-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nlq-gold);
	margin-bottom: 14px;
}
.nlq-intro__title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 38px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--nlq-ink);
	margin: 0 0 14px;
	font-weight: 600;
}
.nlq-intro__title em { font-style: italic; color: var(--nlq-green); }
.nlq-intro__subtitle {
	font-size: 16px;
	line-height: 1.6;
	color: var(--nlq-muted);
	max-width: 460px;
	margin: 0 auto;
}
.nlq-trust-row {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin-top: 28px;
	flex-wrap: wrap;
}
.nlq-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nlq-ink);
}
.nlq-trust-item svg { width: 16px; height: 16px; color: var(--nlq-green); flex: none; }

/* ---- Card ---- */
.nlq-app {
	background: #fff;
	border: 1px solid var(--nlq-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
	margin-bottom: 56px;
}

.nlq-progress {
	height: 4px;
	background: #f0eeed;
}
.nlq-progress-bar {
	height: 100%;
	background: var(--nlq-green);
	width: 0%;
	transition: width .4s ease;
}

.nlq-body {
	padding: 44px 40px;
}
@media (max-width: 600px) {
	.nlq-body { padding: 32px 22px; }
	.nlq-intro { padding: 40px 0 24px; }
	.nlq-intro__title { font-size: 30px; }
}

.nlq-h1 {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 26px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--nlq-ink);
	margin: 0 0 8px;
	white-space: pre-line;
}
.nlq-sub {
	font-size: 14px;
	color: var(--nlq-muted);
	margin: 0 0 24px;
}

.nlq-input {
	width: 100%;
	font-family: inherit;
	font-size: 17px;
	padding: 14px 16px;
	border: 1.5px solid var(--nlq-line);
	border-radius: 8px;
	margin-bottom: 28px;
	background: var(--nlq-cream);
	color: var(--nlq-ink);
}
.nlq-input::placeholder { color: #9a9997; }
/* !important here is deliberate: the site loads a global Tailwind CDN with the
   `forms` plugin, which applies its own blue focus ring (border + box-shadow) to
   every <input> on every page, after this stylesheet, and otherwise wins the tie. */
.nlq-input:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--nlq-gold) !important;
	background: #fff !important;
}

.nlq-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 28px;
}
.nlq-options.nlq-options--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
@media (max-width: 420px) {
	.nlq-options.nlq-options--grid { grid-template-columns: 1fr; }
}

.nlq-option {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	padding: 14px 16px;
	border: 1.5px solid var(--nlq-line);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--nlq-ink);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
}
/* !important throughout these states: Storefront's base stylesheet has a bare
   `button:hover, .button:hover { color: #fff }` rule. It's an element+pseudo-class
   selector, which beats a plain class selector on specificity — so any state here
   that doesn't re-declare color explicitly silently inherits white-on-near-white
   text from the theme. Confirmed by inspecting computed styles directly. */
.nlq-option:hover {
	border-color: #c9c6c5 !important;
	background: var(--nlq-cream) !important;
	color: var(--nlq-ink) !important;
}
.nlq-option.is-selected {
	border-color: var(--nlq-green) !important;
	border-width: 2px;
	padding: 13px 15px; /* compensate for the extra border width so layout doesn't jump */
	background: rgba(6, 89, 84, 0.05) !important;
	font-weight: 600;
	color: var(--nlq-green-dark) !important;
	box-shadow: 0 2px 8px rgba(6, 89, 84, 0.12);
}
.nlq-option:focus:not(.is-selected) {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(6, 89, 84, 0.15) !important;
}

.nlq-check {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 1.5px solid #c9c6c5;
	flex: none;
	position: relative;
	background: #fff;
	transition: background .15s ease, border-color .15s ease;
}
.nlq-option.is-selected .nlq-check {
	background: var(--nlq-green);
	border-color: var(--nlq-green);
}
.nlq-option.is-selected .nlq-check::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* single-select radio dot (no checkbox square rendered; the whole row highlight is enough,
   but we add a small dot indicator for consistency with the multi-select rows) */
.nlq-radio {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid #c9c6c5;
	flex: none;
	position: relative;
	background: #fff;
	transition: background .15s ease, border-color .15s ease;
}
.nlq-option.is-selected .nlq-radio {
	border-color: var(--nlq-green);
}
.nlq-option.is-selected .nlq-radio::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--nlq-green);
	transform: translate(-50%, -50%);
}

.nlq-info-btn {
	background: none !important;
	border: none;
	color: var(--nlq-gold-dark) !important;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	padding: 0 0 20px;
	margin-top: -14px;
	display: block;
	font-family: inherit;
}
.nlq-info-btn:hover { color: var(--nlq-gold) !important; }
.nlq-info-box {
	display: none;
	background: var(--nlq-cream);
	border-left: 3px solid var(--nlq-gold);
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--nlq-muted);
	margin: -14px 0 22px;
	border-radius: 0 8px 8px 0;
}
.nlq-info-box.is-open { display: block; }

.nlq-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.nlq-btn {
	font-family: 'Hanken Grotesk', Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 15px 32px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}
.nlq-btn:active { transform: scale(.97); }
/* !important on color/background/opacity throughout: Storefront's stylesheet sets
   `button:hover, .button:hover { color: #fff }` and its own disabled/opacity rules
   on bare `button`/`input` element selectors, which otherwise bleed through here. */
.nlq-btn-primary {
	background: var(--nlq-green) !important;
	color: #fff !important;
	margin-left: auto;
	opacity: 1;
}
.nlq-btn-primary:hover:not(:disabled) {
	background: var(--nlq-green-dark) !important;
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(6, 89, 84, 0.25);
}
.nlq-btn-primary:disabled {
	background: #e5e2e1 !important;
	color: #9a9997 !important;
	opacity: 1 !important;
	cursor: not-allowed;
	box-shadow: none !important;
}
.nlq-btn-back {
	background: none !important;
	color: var(--nlq-muted) !important;
	padding: 15px 8px;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
}
.nlq-btn-back:hover { color: var(--nlq-ink) !important; background: none !important; }

/* ---- Welcome screen ---- */
.nlq-welcome { text-align: center; }
.nlq-welcome .nlq-h1 { font-size: 28px; }
.nlq-welcome-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}
.nlq-welcome-list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--nlq-ink);
}
.nlq-welcome-list svg { width: 18px; height: 18px; color: var(--nlq-green); flex: none; margin-top: 1px; }
.nlq-welcome .nlq-btn-primary { width: 100%; }

.nlq-loading {
	text-align: center;
	padding: 70px 20px;
	color: var(--nlq-muted);
	font-size: 14px;
}
.nlq-loading::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 16px;
	border-radius: 50%;
	border: 2.5px solid var(--nlq-line);
	border-top-color: var(--nlq-green);
	animation: nlq-spin 0.8s linear infinite;
}
@keyframes nlq-spin { to { transform: rotate(360deg); } }

/* ---- Results ---- */
.nlq-results-header {
	text-align: center;
	margin-bottom: 28px;
}
.nlq-results-header h2 {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 26px;
	color: var(--nlq-ink);
	margin: 8px 0 0;
	font-weight: 600;
}
.nlq-rec-card {
	display: flex;
	gap: 16px;
	border: 1.5px solid var(--nlq-line);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 16px;
	align-items: center;
}
.nlq-rec-card.is-primary {
	border-color: var(--nlq-green);
	background: rgba(6, 89, 84, .04);
}
.nlq-rec-thumb {
	width: 80px;
	height: 80px;
	border-radius: 10px;
	background: var(--nlq-cream) center/cover no-repeat;
	flex: none;
	border: 1px solid var(--nlq-line);
}
.nlq-rec-body { flex: 1; min-width: 0; }
.nlq-rec-tag {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--nlq-gold-dark);
	font-weight: 700;
	margin-bottom: 4px;
	display: block;
}
.nlq-rec-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--nlq-ink); margin: 0 0 6px; }
.nlq-rec-blurb { font-size: 13px; line-height: 1.5; color: var(--nlq-muted); margin: 0 0 10px; }
.nlq-rec-price { font-size: 15px; font-weight: 700; color: var(--nlq-ink); margin-bottom: 12px; }
.nlq-rec-cta {
	display: inline-block;
	background: var(--nlq-green);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 10px 20px;
	border-radius: 8px;
	text-decoration: none !important; /* the theme's .entry-content link styles otherwise win this tie on source order */
	transition: background .2s ease;
}
.nlq-rec-cta:hover { background: var(--nlq-green-dark); }

.nlq-breakdown {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--nlq-line);
}
.nlq-breakdown h3 {
	font-family: 'Hanken Grotesk', Arial, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--nlq-muted);
	margin: 0 0 14px;
	font-weight: 600;
}
.nlq-breakdown-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
@media (max-width: 480px) {
	.nlq-breakdown-grid { grid-template-columns: 1fr; }
	.nlq-rec-card { flex-direction: column; text-align: center; }
}
.nlq-breakdown-item {
	border: 1px solid var(--nlq-line);
	border-radius: 10px;
	padding: 14px 16px;
	background: var(--nlq-cream);
}
.nlq-breakdown-item .nlq-bi-label { font-weight: 700; color: var(--nlq-ink); font-size: 13px; display:block; margin-bottom:4px; }
.nlq-breakdown-item .nlq-bi-blurb { font-size: 12px; line-height: 1.5; color: var(--nlq-muted); }

.nlq-empty-note {
	font-size: 13px;
	color: var(--nlq-muted);
	background: var(--nlq-cream);
	padding: 14px 16px;
	border-radius: 10px;
	margin-bottom: 16px;
}