/* TS Trip Style Picker (1.11.0): question + buttons; the chosen button highlights parts of the page. */
.ts-pick {
	--ts-pick-ring: var(--ts-terra);
	--ts-pick-fade: .5;
}

.ts-pick__box {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 20px;
	padding: 20px 24px;
	border: 1px solid var(--ts-line);
	border-radius: 28px;
	background: var(--ts-cream);
}

.ts-pick--stacked .ts-pick__box {
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (max-width: 1024px) {
	.ts-pick__box {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 18px;
	}
}

.ts-w .ts-pick__q {
	font-family: var(--ts-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ts-esp);
}

.ts-w .ts-pick__sub {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ts-muted-2);
}

.ts-pick__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ts-w .ts-pick__btn {
	margin: 0;
	padding: 9px 16px;
	border: 1.5px solid var(--ts-line);
	border-radius: 100px;
	background: #fff;
	color: var(--ts-esp);
	font-family: var(--ts-font-body);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.ts-w .ts-pick__btn:hover,
.ts-w .ts-pick__btn:focus {
	border-color: var(--ts-terra);
	background: #fff;
	color: var(--ts-esp);
}

.ts-w .ts-pick__btn:focus-visible {
	outline: 3px solid var(--ts-tq);
	outline-offset: 2px;
}

.ts-w .ts-pick__btn[aria-pressed="true"] {
	border-color: var(--ts-esp);
	background: var(--ts-esp);
	color: #fff;
}

.ts-w .ts-pick__tip {
	min-height: 1.6em;
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ts-muted-2);
}

/* The parts of the page the picker points at (outside the widget). The script copies the
 * picker's line colour and fade into each part as --ts-pick-ring / --ts-pick-fade. */
.ts-pick-part {
	transition: box-shadow .3s, border-color .3s, opacity .3s;
}

.ts-pick-part.ts-pick-match {
	border-color: var(--ts-pick-ring, #F3692A);
	box-shadow: 0 0 0 2px var(--ts-pick-ring, #F3692A), 0 18px 40px rgba(56, 37, 32, .08);
}

.ts-pick-part.ts-pick-faded {
	opacity: var(--ts-pick-fade, .5);
}

@media (prefers-reduced-motion: reduce) {
	.ts-pick-part,
	.ts-w .ts-pick__btn {
		transition: none;
	}
}