/**
 * Bonus questions (Campeão / Vice / Terceiro) flag-styled dropdown + top block.
 * Loaded after 08-join in the child-theme cascade. Token vars come from 01-tokens.css.
 */

.bolao-bonus-top {
	margin: 0 0 1.25rem;
	padding: 1rem;
	border: 1px solid var(--gray-100, #ECEEF2);
	border-radius: 12px;
	background: var(--brand-white, #fff);
}

.bolao-bonus-top .questions-block {
	display: grid;
	gap: 0.75rem;
}

.bolao-bonus-top .bonus.question {
	display: grid;
	gap: 0.35rem;
}

/* Hide the native select once enhanced; keep it focusable/submittable. */
select.bolao-bonus-native-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.bolao-bonus-picker {
	position: relative;
}

.bolao-bonus-trigger {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.6rem 0.75rem;
	min-height: 44px;
	border: 1px solid var(--gray-300, #C8CDD6);
	border-radius: 10px;
	background: #fff;
	color: var(--gray-900, #0F172A);
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.bolao-bonus-trigger:focus-visible {
	outline: 2px solid var(--brand-green, #009739);
	outline-offset: 2px;
}

.bolao-bonus-trigger .placeholder {
	color: var(--gray-500, #6B7280);
}

.bolao-bonus-flag {
	width: 28px;
	height: 19px;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.08 );
	flex: 0 0 auto;
}

.bolao-bonus-list {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	top: calc( 100% + 4px );
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--gray-300, #C8CDD6);
	border-radius: 10px;
	box-shadow: var(--shadow-lg, 0 10px 30px rgba( 0, 0, 0, 0.12 ));
	padding: 0.25rem;
}

.bolao-bonus-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.65rem 0.6rem;
	min-height: 44px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gray-900, #0F172A);   /* was inheriting white → invisible on the white list */
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.bolao-bonus-option:hover,
.bolao-bonus-option:focus {
	background: var(--gray-50, #F7F8FA);
}

/* A team already chosen in another picker (Campeão/Vice/Terceiro must be distinct). */
.bolao-bonus-option.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.bolao-bonus-option:focus-visible {
	outline: 2px solid var(--brand-green, #009739);
	outline-offset: -2px;
	background: var(--gray-50, #F7F8FA);
}

/* Locked / user-page answer decorated with a flag. */
.bolao-bonus-answer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}