/*
 * PB Odabir brave (mini kviz).
 * Lijevo situacije (bijele kartice, odabrana je teal s bijelim tekstom, kao gumb), desno panel s preporukom.
 * Na mobitelu se panel otvara odmah ispod odabrane situacije.
 */
.pbw-pick {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 24px;
	align-items: stretch;
}

.pbw-pick .pbw-pick__ask {
	margin: 0 0 14px;
	color: var(--text-secondary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/* Pitanje je u svom redu, a situacije i panel počinju u istoj liniji.
   Situacije se rastegnu na visinu panela, pa su oba stupca jednako visoka. */
.pbw-pick__opts {
	display: contents;
}

.pbw-pick .pbw-pick__ask {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: -10px;
}

.pbw-pick__list {
	display: flex;
	grid-column: 1;
	grid-row: 2;
	flex-direction: column;
	gap: 10px;
}

.pbw-pick > .pbw-pick__panel {
	grid-column: 2;
	grid-row: 2;
}

.pbw-pick__list > .pbw-pick__opt {
	flex: 1 1 auto;
}

/* ---------- Situacije ---------- */
.pbw-pick .pbw-pick__opt:not(#pb-x) {
	display: flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	min-height: 68px;
	margin: 0;
	padding: 16px 18px;
	border: 0;
	border-radius: var(--pbw-r-lg);
	background: var(--bg-alt);
	box-shadow: inset 0 0 0 1.5px transparent;
	color: var(--text);
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	/* Boja se mijenja odmah, bez prijelaza (želja korisnika) */
	transition: transform .15s;
	-webkit-tap-highlight-color: transparent;
}

.pbw-pick .pbw-pick__opt:not(#pb-x):hover {
	box-shadow: inset 0 0 0 1.5px var(--accent);
	background: var(--bg-alt);
	color: var(--text);
}

.pbw-pick .pbw-pick__opt:not(#pb-x):active {
	transform: scale(.985);
}

.pbw-pick .pbw-pick__opt[aria-checked="true"]:not(#pb-x) {
	background: var(--accent);
	box-shadow: inset 0 0 0 1.5px var(--accent);
	color: var(--on-accent);
}

.pbw-pick__otitle {
	flex: 1 1 auto;
	min-width: 0;
}

.pbw-pick__radio {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--border);
	border-radius: 50%;
	background: var(--bg);
	color: var(--accent);
}

.pbw-pick__radio svg {
	width: 14px;
	height: 14px;
	opacity: 0;
}

.pbw-pick__opt:hover .pbw-pick__radio {
	border-color: var(--accent);
}

.pbw-pick__opt[aria-checked="true"] .pbw-pick__radio {
	border-color: var(--bg);
	background: var(--bg);
}

.pbw-pick__opt[aria-checked="true"] .pbw-pick__radio svg {
	opacity: 1;
}

.pbw-pick__chev {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--text-tertiary);
	transition: transform .2s;
}

.pbw-pick__opt:hover .pbw-pick__chev {
	transform: translateX(3px);
	color: var(--accent);
}

.pbw-pick__opt[aria-checked="true"] .pbw-pick__chev {
	transform: translateX(3px);
	color: var(--on-accent);
}

/* ---------- Panel ---------- */
.pbw-pick__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 24px;
	border-radius: var(--pbw-r-lg);
	background: var(--bg-alt);
}

.pbw-pick.has-pick .pbw-pick__empty {
	display: none;
}

.pbw-pick__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: 24px 8px;
	text-align: center;
}

.pbw-pick__thumbs {
	display: flex;
	gap: 12px;
}

.pbw-pick__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 12px;
	background: var(--pb-sec-alt, #F5F5F7);
	animation: pbw-pick-float 3.2s ease-in-out infinite;
}

.pbw-pick__thumb:nth-child(2) { animation-delay: .4s; }
.pbw-pick__thumb:nth-child(3) { animation-delay: .8s; }
.pbw-pick__thumb:nth-child(4) { animation-delay: 1.2s; }

.pbw-pick__thumb img {
	width: 78%;
	height: 78%;
	object-fit: contain;
	opacity: .6;
	/* Fotografije s bijelom pozadinom (npr. SLIM, LONG) stope se sa sivim poljem */
	mix-blend-mode: multiply;
}

@keyframes pbw-pick-float {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-5px); }
}

.pbw-pick .pbw-pick__etext {
	max-width: 300px;
	margin: 0;
	color: var(--text-secondary);
	font-size: 17px;
	line-height: 1.45;
}

/* ---------- Preporuka ---------- */
.pbw-pick__res {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	gap: 28px;
	align-items: center;
}

.pbw-pick__res[hidden] {
	display: none;
}

.pbw-pick__res.is-in .pbw-pick__info {
	animation: pbw-pick-in .34s cubic-bezier(.2, .7, .2, 1) both;
}

.pbw-pick__res.is-in .pbw-pick__img img {
	animation: pbw-pick-img .4s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes pbw-pick-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes pbw-pick-img {
	from { opacity: 0; transform: scale(.94); }
	to { opacity: 1; transform: none; }
}

.pbw-pick .pbw-pick__img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: var(--pb-sec-alt, #F5F5F7);
}

.pbw-pick .pbw-pick__img img {
	width: 80%;
	height: 80%;
	object-fit: contain;
}

.pbw-pick__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.pbw-pick__label {
	color: var(--accent-hover);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.pbw-pick .pbw-pick__name {
	margin: 8px 0 0;
	color: var(--text);
	font-size: var(--t-lead, 21px);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -.01em;
}

.pbw-pick .pbw-pick__name a {
	color: inherit;
	text-decoration: none;
}

.pbw-pick__price {
	margin-top: 6px;
	color: var(--text);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
}

.pbw-pick .pbw-pick__desc {
	margin: 14px 0 0;
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.5;
}

.pbw-pick__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.pbw-pick :is(.pbw-pick__add, .pbw-pick__view):not(#pb-x) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 41px;
	margin: 0;
	padding: 11px 20px;
	border: 1px solid var(--fill);
	border-radius: 980px;
	background: var(--fill);
	color: var(--text);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 17px;
	letter-spacing: -.01em;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}

.pbw-pick .pbw-pick__add:not(#pb-x) {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

.pbw-pick .pbw-pick__add:not(#pb-x):is(:hover, :focus-visible) {
	border-color: var(--accent-hover);
	background: var(--accent-hover);
	color: var(--on-accent);
}

.pbw-pick .pbw-pick__view:not(#pb-x):is(:hover, :focus-visible) {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

.pbw-pick :is(.pbw-pick__add, .pbw-pick__view):not(#pb-x):active {
	transform: scale(.97);
}

.pbw-pick .pbw-pick__add[aria-busy="true"] {
	opacity: .7;
	pointer-events: none;
}

.pbw-pick .pbw-pick__free {
	margin-top: 16px;
}

/* Ista visina za sve proizvode, da panel ne skače pri promjeni */
@media (min-width: 768px) {
	.pbw-pick > .pbw-pick__panel {
		min-height: 312px;
	}
}

@media (max-width: 1100px) {
	.pbw-pick__res {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.pbw-pick .pbw-pick__img {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 767px) {
	.pbw-pick {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Panel se otvara ispod odabrane situacije; prije odabira ga nema. */
	.pbw-pick:not(.has-pick) .pbw-pick__panel {
		display: none;
	}

	.pbw-pick > .pbw-pick__panel {
		grid-column: 1;
		grid-row: auto;
	}

	.pbw-pick__panel {
		padding: 16px;
		animation: pbw-pick-in .3s cubic-bezier(.2, .7, .2, 1) both;
	}

	.pbw-pick .pbw-pick__img {
		aspect-ratio: 16 / 10;
	}

	/* Odabrana situacija se "otvara" prema dolje */
	.pbw-pick__opt[aria-checked="true"] .pbw-pick__chev {
		transform: rotate(90deg);
	}

	.pbw-pick__btns > * {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pbw-pick__thumb,
	.pbw-pick__panel,
	.pbw-pick__res.is-in .pbw-pick__info,
	.pbw-pick__res.is-in .pbw-pick__img img {
		animation: none;
	}
}