.wgfb-widget {
	--wgfb-bg: #f7f1ea;
	--wgfb-card: #ffffff;
	--wgfb-accent: #1f3a38;
	--wgfb-gold: #c79f63;
	--wgfb-text: #2c2c2c;
	--wgfb-muted: #6f6f6f;
	background: linear-gradient(135deg, #fff7ed 0%, var(--wgfb-bg) 100%);
	border: 1px solid rgba(31, 58, 56, 0.12);
	border-radius: 16px;
	padding: 18px;
	margin: 0 0 20px;
	color: var(--wgfb-text);
	box-shadow: 0 10px 28px rgba(31, 58, 56, 0.08);
}

.wgfb-widget__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
}

.wgfb-widget h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--wgfb-accent);
}

.wgfb-progress {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--wgfb-muted);
}

.wgfb-progress--done {
	color: #3d6d43;
}

.wgfb-slider {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
}

.wgfb-tier {
	scroll-snap-align: start;
	background: var(--wgfb-card);
	border-radius: 14px;
	border: 1px solid rgba(31, 58, 56, 0.1);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wgfb-tier--active {
	border-color: rgba(199, 159, 99, 0.45);
	box-shadow: inset 0 0 0 1px rgba(199, 159, 99, 0.28);
}

.wgfb-widget--needs-choice {
	border-color: rgba(188, 46, 46, 0.25);
}

.wgfb-widget--attention {
	border-color: #c93636;
	box-shadow: 0 0 0 3px rgba(201, 54, 54, 0.2), 0 10px 28px rgba(31, 58, 56, 0.08);
}

.wgfb-tier--needs-choice {
	border-color: #c93636;
	background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.wgfb-tier__header {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	align-items: flex-start;
}

.wgfb-tier__header strong {
	font-size: 15px;
	color: var(--wgfb-accent);
	line-height: 1.3;
}

.wgfb-tier__header span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: #f2f2f2;
	color: #555;
}

.wgfb-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.wgfb-option {
	display: grid;
	grid-template-columns: 18px 42px 1fr;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 10px;
	border: 1px solid rgba(31, 58, 56, 0.12);
	cursor: pointer;
	font-size: 14px;
	min-height: 56px;
}

.wgfb-option.is-selected {
	border-color: var(--wgfb-gold);
	background: rgba(199, 159, 99, 0.1);
}

.wgfb-selected-chip {
	display: inline-flex;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #1f3a38;
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	vertical-align: middle;
}

.wgfb-option img {
	width: 42px;
	height: 42px;
	object-fit: cover;
	border-radius: 8px;
}

.wgfb-select {
	border: none;
	border-radius: 999px;
	padding: 10px 14px;
	font-weight: 600;
	font-size: 14px;
	background: linear-gradient(135deg, var(--wgfb-accent), #385f5b);
	color: #fff;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
	min-height: 44px;
}

.wgfb-select:hover {
	transform: translateY(-1px);
}

.wgfb-select:disabled {
	opacity: 0.65;
	cursor: wait;
}

.wgfb-locked-text {
	margin: 0;
	font-size: 14px;
	color: var(--wgfb-muted);
}

.wgfb-required {
	margin: 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: #ffe9e9;
	color: #8f1f1f;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid rgba(143, 31, 31, 0.18);
}

.wgfb-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	background: #1f3a38;
	color: #fff;
	padding: 12px 14px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	max-width: 420px;
}

.wgfb-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 768px) {
	.wgfb-widget {
		padding: 14px;
		border-radius: 14px;
		margin: 0 0 16px;
	}
	.wgfb-widget__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.wgfb-widget h3 {
		font-size: 18px;
	}
	.wgfb-progress {
		font-size: 13px;
		line-height: 1.4;
	}
	.wgfb-slider {
		grid-auto-flow: row;
		grid-auto-columns: 1fr;
		grid-template-columns: 1fr;
		overflow: visible;
		scroll-snap-type: none;
		gap: 10px;
		padding-bottom: 0;
	}
	.wgfb-tier {
		padding: 12px;
		border-radius: 12px;
		gap: 9px;
	}
	.wgfb-tier__header {
		flex-direction: column;
		gap: 6px;
	}
	.wgfb-tier__header span {
		font-size: 11px;
	}
	.wgfb-options {
		gap: 9px;
	}
	.wgfb-option {
		grid-template-columns: 20px 46px 1fr;
		padding: 10px;
		border-radius: 10px;
	}
	.wgfb-option img {
		width: 46px;
		height: 46px;
	}
	.wgfb-select {
		width: 100%;
		font-size: 15px;
		padding: 12px 14px;
	}
	.wgfb-required {
		font-size: 12px;
	}
	.wgfb-locked-text {
		font-size: 13px;
		line-height: 1.4;
	}
	.wgfb-toast {
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom));
		max-width: none;
		padding: 12px;
	}
}

@media (max-width: 420px) {
	.wgfb-widget {
		padding: 12px;
	}
	.wgfb-option {
		grid-template-columns: 18px 42px 1fr;
		padding: 9px;
	}
	.wgfb-option img {
		width: 42px;
		height: 42px;
	}
	.wgfb-select {
		font-size: 14px;
	}
}