/* ==========================================================================
   Selector / Product-Finder Quiz
   trybloomlab theme — selector.css
   ========================================================================== */

.tb-selector-page {
	--tb-selector-accent: var(--tb-mint-2);
	--tb-selector-warm:   var(--tb-coral);
	--tb-selector-green:  var(--tb-green-2);
	--tb-selector-ink:    var(--tb-teal-4);
	background: var(--tb-bg);
	color: var(--tb-text);
	font-family: var(--tb-font-sans, "Plus Jakarta Sans", Arial, sans-serif);
}

/* --------------------------------------------------------------------------
   Layout shells
   -------------------------------------------------------------------------- */

.tb-selector-section__inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--tb-container);
	padding: var(--tb-space-6) 1rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.tb-selector-hero {
	background:
		linear-gradient(90deg, rgba(26, 107, 99, 0.12) 1px, transparent 1px),
		linear-gradient(180deg, rgba(242, 250, 247, 0.98), rgba(251, 250, 243, 0.86));
	background-size: 44px 44px, auto;
	border-bottom: 1px solid var(--tb-border);
}

.tb-selector-hero__inner {
	align-items: start;
	box-sizing: border-box;
	display: grid;
	gap: var(--tb-space-5);
	margin-inline: auto;
	max-width: var(--tb-container);
	min-height: min(640px, calc(100svh - 7rem));
	padding: var(--tb-space-6) 1rem;
}

.tb-selector-hero__copy {
	max-width: 780px;
}

.tb-selector-hero h1 {
	color: var(--tb-selector-ink);
	font-size: var(--tb-step-4);
	letter-spacing: 0;
	line-height: 1.04;
	margin: 0;
}

.tb-selector-hero__copy > p {
	color: rgba(17, 17, 17, 0.74);
	font-size: var(--tb-step-1);
	margin: var(--tb-space-3) 0 0;
	max-width: 780px;
}

.tb-selector-hero__trust {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-space-2) var(--tb-space-4);
	margin-top: var(--tb-space-4);
}

.tb-selector-hero__trust span {
	border: 1px solid rgba(26, 75, 82, 0.2);
	border-radius: var(--tb-radius-pill);
	color: var(--tb-selector-ink);
	font-size: var(--tb-step--1);
	font-weight: 700;
	padding: 0.25rem 0.75rem;
}

.tb-selector-hero__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-space-2);
	margin-top: var(--tb-space-4);
}

.tb-selector-hero__disclaimer {
	color: rgba(17, 17, 17, 0.52);
	font-size: var(--tb-step--1);
	margin: var(--tb-space-3) 0 0;
}

/* hero panel / product strip */

.tb-selector-hero__panel {
	background: var(--tb-white);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius-sm);
	border-top: 5px solid var(--tb-selector-warm);
	box-shadow: var(--tb-shadow-soft);
	padding: var(--tb-space-4);
}

.tb-selector-product-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-space-2);
	justify-content: center;
	margin-bottom: var(--tb-space-3);
}

.tb-selector-product-strip img {
	border-radius: var(--tb-radius-sm);
	display: block;
	height: 90px;
	object-fit: contain;
	width: 90px;
}

.tb-selector-hero__note {
	display: grid;
	gap: 0.35rem;
}

.tb-selector-hero__note strong {
	color: var(--tb-selector-ink);
	font-size: var(--tb-step-0);
}

.tb-selector-hero__note span {
	color: rgba(17, 17, 17, 0.68);
	font-size: var(--tb-step--1);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Shared section wrapper
   -------------------------------------------------------------------------- */

.tb-selector-section {
	border-bottom: 1px solid var(--tb-border);
}

.tb-selector-section--alt {
	background: rgba(242, 250, 247, 0.5);
}

.tb-selector-section__header {
	margin-bottom: var(--tb-space-5);
}

.tb-selector-section__header h2,
.tb-selector-result h2 {
	color: var(--tb-selector-ink);
	font-size: var(--tb-step-3);
	letter-spacing: 0;
	line-height: 1.08;
	margin: 0;
	max-width: 920px;
}

.tb-selector-section__header > p {
	color: rgba(17, 17, 17, 0.74);
	font-size: var(--tb-step-1);
	margin: var(--tb-space-3) 0 0;
	max-width: 780px;
}

/* --------------------------------------------------------------------------
   Quiz shell + progress
   -------------------------------------------------------------------------- */

.tb-selector-shell {
	background: var(--tb-white);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius-sm);
	box-shadow: var(--tb-shadow-soft);
	padding: var(--tb-space-4);
}

.tb-selector-progress {
	display: grid;
	gap: var(--tb-space-2);
	margin-bottom: var(--tb-space-4);
}

.tb-selector-progress > span {
	color: rgba(17, 17, 17, 0.64);
	font-size: var(--tb-step--1);
	font-weight: 800;
	text-transform: uppercase;
}

.tb-selector-progress > div {
	background: rgba(26, 75, 82, 0.1);
	border-radius: var(--tb-radius-pill);
	height: 0.55rem;
	overflow: hidden;
}

.tb-selector-progress > div > span {
	background: linear-gradient(90deg, var(--tb-selector-accent), var(--tb-selector-green));
	border-radius: inherit;
	display: block;
	height: 100%;
	transition: width 200ms ease;
	width: 0;
}

/* --------------------------------------------------------------------------
   Fieldset / options
   -------------------------------------------------------------------------- */

.tb-selector-step {
	border: 0;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

.tb-selector-step legend {
	color: var(--tb-selector-ink);
	font-size: var(--tb-step-2);
	font-weight: 800;
	line-height: 1.12;
	margin: 0;
	padding: 0;
}

.tb-selector-step__helper {
	color: rgba(17, 17, 17, 0.68);
	margin: var(--tb-space-2) 0 var(--tb-space-4);
}

.tb-selector-options {
	display: grid;
	gap: var(--tb-space-2);
}

.tb-selector-option {
	cursor: pointer;
	display: block;
	position: relative;
}

.tb-selector-option input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.tb-selector-option__body {
	background: rgba(242, 250, 247, 0.62);
	border: 1px solid rgba(26, 75, 82, 0.14);
	border-radius: var(--tb-radius-sm);
	display: grid;
	gap: 0.35rem;
	min-height: 5.5rem;
	padding: var(--tb-space-3);
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.tb-selector-option strong {
	color: var(--tb-selector-ink);
	font-size: var(--tb-step-0);
	line-height: 1.25;
}

.tb-selector-option small {
	color: rgba(17, 17, 17, 0.64);
	font-size: var(--tb-step--1);
	line-height: 1.45;
}

.tb-selector-option input:checked + .tb-selector-option__body {
	background: var(--tb-white);
	border-color: var(--tb-selector-accent);
	box-shadow: 0 0 0 3px rgba(50, 151, 166, 0.18);
}

.tb-selector-option input:focus-visible + .tb-selector-option__body {
	outline: 3px solid rgba(50, 151, 166, 0.38);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Error + controls
   -------------------------------------------------------------------------- */

.tb-selector-error {
	background: rgba(232, 139, 106, 0.12);
	border: 1px solid rgba(232, 139, 106, 0.38);
	border-radius: var(--tb-radius-sm);
	color: #8b2f19;
	font-weight: 800;
	margin: var(--tb-space-3) 0 0;
	padding: var(--tb-space-2) var(--tb-space-3);
}

.tb-selector-controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-space-2);
	margin-top: var(--tb-space-4);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.tb-selector-button,
.tb-selector-page .tb-shopee-cta {
	align-items: center;
	border-radius: var(--tb-radius-pill);
	display: inline-flex;
	font-weight: 800;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.2rem;
	text-decoration: none;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.tb-selector-button {
	border: 1px solid transparent;
	cursor: pointer;
}

.tb-selector-button--primary,
.tb-selector-page .tb-shopee-cta {
	background: var(--tb-teal);
	border-color: var(--tb-teal);
	color: var(--tb-white);
}

.tb-selector-button--secondary {
	background: var(--tb-white);
	border-color: rgba(26, 75, 82, 0.2);
	color: var(--tb-selector-ink);
}

.tb-selector-button--text {
	background: transparent;
	border-color: transparent;
	color: var(--tb-selector-ink);
	padding-inline: 0.25rem;
}

.tb-selector-button:hover,
.tb-selector-button:focus-visible,
.tb-selector-page .tb-shopee-cta:hover,
.tb-selector-page .tb-shopee-cta:focus-visible {
	transform: translateY(-1px);
}

.tb-selector-button--primary:hover,
.tb-selector-button--primary:focus-visible,
.tb-selector-page .tb-shopee-cta:hover,
.tb-selector-page .tb-shopee-cta:focus-visible {
	background: var(--tb-teal-2);
	border-color: var(--tb-teal-2);
}

.tb-selector-button--secondary:hover,
.tb-selector-button--secondary:focus-visible {
	border-color: var(--tb-selector-accent);
}

.tb-selector-page .tb-shopee-cta--soon {
	background: rgba(26, 75, 82, 0.08);
	border-color: rgba(26, 75, 82, 0.16);
	color: rgba(17, 17, 17, 0.64);
}

.tb-selector-page .tb-shopee-cta--choose {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Result card
   -------------------------------------------------------------------------- */

.tb-selector-result {
	display: grid;
	gap: var(--tb-space-4);
}

.tb-selector-result[hidden],
.tb-selector-form[hidden] {
	display: none;
}

.tb-selector-result__card {
	background: var(--tb-white);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius-sm);
	box-shadow: var(--tb-shadow-soft);
	padding: var(--tb-space-4);
}

.tb-selector-result__eyebrow {
	color: var(--tb-selector-accent);
	font-size: var(--tb-step--1);
	font-weight: 800;
	margin: 0 0 var(--tb-space-2);
	text-transform: uppercase;
}

.tb-selector-result__layout {
	display: grid;
	gap: var(--tb-space-4);
}

.tb-selector-result__image {
	display: flex;
	justify-content: center;
}

.tb-selector-result__image img {
	border-radius: var(--tb-radius-sm);
	display: block;
	height: auto;
	max-width: 220px;
	object-fit: contain;
	width: 100%;
}

.tb-selector-result__tagline {
	color: rgba(17, 17, 17, 0.72);
	font-size: var(--tb-step-1);
	margin: var(--tb-space-2) 0 0;
	max-width: 780px;
}

.tb-selector-result__body {
	display: grid;
	gap: var(--tb-space-3);
	margin-top: var(--tb-space-4);
}

.tb-selector-result__block {
	border-left: 4px solid var(--tb-selector-warm);
	padding-left: var(--tb-space-3);
}

.tb-selector-result__block h3 {
	color: var(--tb-selector-ink);
	font-size: var(--tb-step-1);
	line-height: 1.18;
	margin: 0;
}

.tb-selector-result__block p {
	color: rgba(17, 17, 17, 0.7);
	margin: var(--tb-space-1) 0 0;
}

.tb-selector-result__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-space-2);
	margin-top: var(--tb-space-4);
}

/* --------------------------------------------------------------------------
   Comparison table (both in result and static section)
   -------------------------------------------------------------------------- */

.tb-selector-compare {
	background: var(--tb-white);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius-sm);
	box-shadow: var(--tb-shadow-soft);
	padding: var(--tb-space-4);
}

.tb-selector-compare h3,
.tb-selector-result__compare > h3 {
	color: var(--tb-selector-ink);
	font-size: var(--tb-step-2);
	line-height: 1.12;
	margin: 0;
}

.tb-selector-compare > p {
	color: rgba(17, 17, 17, 0.7);
	margin: var(--tb-space-1) 0 0;
}

.tb-selector-compare__scroll {
	margin-top: var(--tb-space-3);
	overflow-x: auto;
}

.tb-selector-compare__table {
	border-collapse: collapse;
	min-width: 640px;
	width: 100%;
}

.tb-selector-compare__table th,
.tb-selector-compare__table td {
	border-bottom: 1px solid rgba(26, 75, 82, 0.12);
	padding: var(--tb-space-2);
	text-align: left;
	vertical-align: top;
}

.tb-selector-compare__table thead th {
	background: rgba(242, 250, 247, 0.82);
	color: var(--tb-selector-ink);
	font-weight: 800;
}

.tb-selector-compare__label-col {
	width: 10rem;
}

.tb-selector-compare__table tbody th {
	color: var(--tb-selector-ink);
	font-weight: 800;
	width: 10rem;
}

.tb-selector-compare__table td {
	color: rgba(17, 17, 17, 0.72);
}

.tb-selector-compare__table .is-empty {
	background: rgba(242, 250, 247, 0.3);
	color: rgba(17, 17, 17, 0.3);
}

/* compare heading: product card inside th */
.tb-selector-compare__picker {
	display: grid;
	gap: var(--tb-space-1);
}

.tb-selector-compare__picker > span {
	color: rgba(17, 17, 17, 0.6);
	font-size: var(--tb-step--1);
	font-weight: 700;
}

.tb-selector-compare__picker select {
	background: var(--tb-white);
	border: 1px solid rgba(26, 75, 82, 0.2);
	border-radius: var(--tb-radius-sm);
	color: var(--tb-selector-ink);
	font-family: inherit;
	font-size: var(--tb-step--1);
	font-weight: 700;
	padding: 0.3rem 0.5rem;
	width: 100%;
}

.tb-selector-compare__product {
	align-items: center;
	display: grid;
	gap: var(--tb-space-1);
	margin-top: var(--tb-space-2);
	text-align: center;
}

.tb-selector-compare__product img {
	border-radius: var(--tb-radius-sm);
	display: block;
	height: 80px;
	margin-inline: auto;
	object-fit: contain;
	width: 80px;
}

.tb-selector-compare__product strong {
	color: var(--tb-selector-ink);
	font-size: var(--tb-step-0);
}

.tb-selector-compare__detail {
	color: var(--tb-selector-accent);
	font-size: var(--tb-step--1);
	font-weight: 700;
	text-decoration: underline;
}

.tb-selector-compare__empty-slot {
	color: rgba(17, 17, 17, 0.4);
	font-size: var(--tb-step--1);
	margin-top: var(--tb-space-2);
}

/* --------------------------------------------------------------------------
   Combo guide section
   -------------------------------------------------------------------------- */

.tb-selector-combo {
	border-bottom: 1px solid var(--tb-border);
}

.tb-selector-combo__layout {
	display: grid;
	gap: var(--tb-space-5);
}

.tb-selector-combo__layout h2 {
	color: var(--tb-selector-ink);
	font-size: var(--tb-step-3);
	line-height: 1.08;
	margin: 0;
}

.tb-selector-combo__copy > p {
	color: rgba(17, 17, 17, 0.72);
	margin: 0 0 var(--tb-space-4);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.tb-selector-faq {
	border-bottom: 0;
}

.tb-selector-faq__list {
	display: grid;
	gap: 1px;
}

.tb-selector-faq__item {
	background: var(--tb-white);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius-sm);
}

.tb-selector-faq__item + .tb-selector-faq__item {
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.tb-selector-faq__item:first-child {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.tb-selector-faq__item:not(:first-child):not(:last-child) {
	border-radius: 0;
}

.tb-selector-faq__item summary {
	color: var(--tb-selector-ink);
	cursor: pointer;
	font-size: var(--tb-step-0);
	font-weight: 700;
	list-style: none;
	padding: var(--tb-space-3) var(--tb-space-4);
	position: relative;
}

.tb-selector-faq__item summary::after {
	content: '+';
	position: absolute;
	right: var(--tb-space-4);
	top: 50%;
	transform: translateY(-50%);
}

.tb-selector-faq__item[open] summary::after {
	content: '−';
}

.tb-selector-faq__item summary::-webkit-details-marker {
	display: none;
}

.tb-selector-faq__item p {
	color: rgba(17, 17, 17, 0.72);
	line-height: 1.6;
	margin: 0;
	padding: 0 var(--tb-space-4) var(--tb-space-3);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
	.tb-selector-product-strip img {
		height: 110px;
		width: 110px;
	}

	.tb-selector-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 720px) {
	.tb-selector-result__body {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tb-selector-result__layout {
		align-items: start;
		grid-template-columns: 220px 1fr;
	}

	.tb-selector-combo__layout {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
	}
}

@media (min-width: 980px) {
	.tb-selector-hero__inner {
		align-items: center;
		grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.7fr);
	}

	.tb-selector-product-strip img {
		height: 130px;
		width: 130px;
	}

	.tb-selector-shell {
		padding: var(--tb-space-5);
	}
}

@media (max-width: 480px) {
	.tb-selector-hero__inner {
		max-width: 100%;
		padding-inline: 1rem;
		width: 100%;
	}

	.tb-selector-hero__copy,
	.tb-selector-hero h1,
	.tb-selector-hero__copy > p {
		max-width: 100%;
		min-width: 0;
		overflow-wrap: anywhere;
		width: 100%;
	}
}