/* Regras compartilhadas de seleção, etapas, rolagem e paleta do configurador. */
.ibc {
	color: var(--ibc-text, #f3f3f3);
}
.ibc :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,b,li,span) {
	color: inherit;
}
.ibc :is(a,button) {
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ibc :is(input,select,textarea) {
	color: var(--ibc-text, #f3f3f3) !important;
	background-color: var(--ibc-surface, #0a1423) !important;
	border-color: var(--ibc-border, #33425a) !important;
	accent-color: var(--ibc-gold, #ad8a58);
}
.ibc :is(input,select,textarea):focus-visible {
	border-color: var(--ibc-gold, #ad8a58) !important;
	box-shadow: 0 0 0 2px rgba(187, 144, 83, .2) !important;
	outline-color: var(--ibc-gold, #ad8a58) !important;
}

/* Todos os barcos usam a mesma caixa e o mesmo brilho suave de seleção. */
.ibc .ibc__choice {
	border-radius: 13px !important;
	transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease !important;
}
.ibc .ibc__choice:hover,
.ibc .ibc__choice:focus-within {
	border-color: var(--ibc-gold, #ad8a58) !important;
	background-color: var(--ibc-card, #101f34) !important;
	box-shadow: 0 0 0 1px rgba(187, 144, 83, .16), 0 0 18px rgba(187, 144, 83, .14) !important;
	transform: none !important;
}
.ibc .ibc__choice.is-selected {
	border-color: var(--ibc-gold, #ad8a58) !important;
	background-color: var(--ibc-active, #172942) !important;
	box-shadow: 0 0 0 1px rgba(187, 144, 83, .14), 0 0 15px rgba(187, 144, 83, .12) !important;
}
.ibc[class*="ibc--boat-"] .ibc__choice input[type="checkbox"],
.ibc[class*="ibc--boat-"] .ibc__choice input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	inline-size: 18px !important;
	block-size: 18px !important;
	min-inline-size: 18px !important;
	min-block-size: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1.5px solid #8192a5 !important;
	background: #f5f4ef !important;
	box-shadow: none !important;
	accent-color: var(--ibc-gold, #ad8a58);
	flex: 0 0 18px !important;
	cursor: pointer;
}
.ibc[class*="ibc--boat-"] .ibc__choice input[type="checkbox"] { border-radius: 4px !important; }
.ibc[class*="ibc--boat-"] .ibc__choice input[type="radio"] { border-radius: 50% !important; }
.ibc[class*="ibc--boat-"] .ibc__choice input[type="checkbox"]:checked,
.ibc[class*="ibc--boat-"] .ibc__choice input[type="radio"]:checked {
	border-color: var(--ibc-gold, #ad8a58) !important;
	background: var(--ibc-gold, #ad8a58) !important;
}
.ibc[class*="ibc--boat-"] .ibc__choice input[type="checkbox"]:checked {
	background: var(--ibc-gold, #ad8a58) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6 2.4 2.4L10 3' fill='none' stroke='%2306101f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
}
.ibc[class*="ibc--boat-"] .ibc__choice input[type="radio"]:checked {
	background: radial-gradient(circle, var(--ibc-bg, #06101f) 0 3px, var(--ibc-gold, #ad8a58) 3.5px) center / 100% 100% no-repeat !important;
}

/* A grade é recalculada para a quantidade real de etapas de cada barco. */
.ibc[class*="ibc--boat-"] .ibc__progress {
	display: grid !important;
	grid-template-columns: repeat(var(--ibc-stage-count, 3), minmax(0, 1fr)) !important;
	align-items: start !important;
	gap: 0 !important;
	width: 100% !important;
	margin-inline: 0 !important;
	border-top: 1px solid var(--ibc-border, #33425a) !important;
	border-bottom: 0 !important;
	overflow: visible !important;
	position: relative !important;
}
.ibc[class*="ibc--boat-"] .ibc__progress::before {
	content: "" !important;
	position: absolute !important;
	top: -1px !important;
	left: 0 !important;
	width: var(--ibc-progress, 0%) !important;
	height: 2px !important;
	background: var(--ibc-gold, #ad8a58) !important;
	transition: width .65s cubic-bezier(.22, 1, .36, 1) !important;
}
.ibc[class*="ibc--boat-"] .ibc__progress > button {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	position: relative !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 20px 2px 16px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--ibc-muted, #b8c1cf) !important;
	font-size: 11px !important;
	letter-spacing: .04em !important;
	line-height: 1.3 !important;
	text-align: left !important;
	text-transform: uppercase;
	white-space: normal !important;
	justify-self: stretch !important;
}
.ibc[class*="ibc--boat-"] .ibc__progress > button:not(:first-child):not(:last-child) { justify-content: center !important; text-align: center !important; }
.ibc[class*="ibc--boat-"] .ibc__progress > button:last-child { justify-content: flex-end !important; text-align: right !important; }
.ibc[class*="ibc--boat-"].ibc--optionals-only .ibc__progress > button:first-child { justify-content: flex-start !important; text-align: left !important; }
.ibc[class*="ibc--boat-"] .ibc__progress > button.is-active,
.ibc[class*="ibc--boat-"] .ibc__progress > button:hover,
.ibc[class*="ibc--boat-"] .ibc__progress > button:focus-visible { color: var(--ibc-text, #f3f3f3) !important; }
.ibc[class*="ibc--boat-"] .ibc__progress > button:hover,
.ibc[class*="ibc--boat-"] .ibc__progress > button:focus-visible { text-shadow: 0 0 12px rgba(187, 144, 83, .42) !important; outline: 0 !important; }
.ibc[class*="ibc--boat-"] .ibc__progress > button span {
	position: relative;
	z-index: 1;
	margin-right: 2px;
	color: var(--ibc-gold, #ad8a58) !important;
	font-size: 10px !important;
}
.ibc[class*="ibc--boat-"] .ibc__progress > button[style*="--ibc-step-position"]::after {
	content: "" !important;
	position: absolute !important;
	top: -5px !important;
	left: var(--ibc-step-position) !important;
	width: 9px !important;
	height: 9px !important;
	border: 2px solid var(--ibc-gold, #ad8a58) !important;
	border-radius: 50% !important;
	background: var(--ibc-bg, #06101f) !important;
	box-shadow: 0 0 0 0 rgba(187, 144, 83, 0) !important;
	transform: translateX(-50%) !important;
	transition: background-color .24s ease, box-shadow .24s ease !important;
}
.ibc[class*="ibc--boat-"] .ibc__progress > button[style*="--ibc-step-position"].is-active::after {
	background: var(--ibc-gold, #ad8a58) !important;
	box-shadow: 0 0 10px rgba(187, 144, 83, .48) !important;
}
.ibc[class*="ibc--boat-"] .ibc__progress > button:first-child[style*="--ibc-step-position"]::after { transform: translateX(0) !important; }
.ibc[class*="ibc--boat-"] .ibc__progress > button:last-child[style*="--ibc-step-position"]::after { transform: translateX(-100%) !important; }

/* Barras e rolagem são sempre locais ao componente e funcionam no toque. */
.ibc .ibc__options,
.ibc .ibc__option-area,
.ibc .ibc__spec-modal-inner {
	scrollbar-width: thin;
	scrollbar-color: var(--ibc-gold, #ad8a58) var(--ibc-surface, #0a1423);
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
}
.ibc .ibc__options::-webkit-scrollbar,
.ibc .ibc__option-area::-webkit-scrollbar,
.ibc .ibc__spec-modal-inner::-webkit-scrollbar { width: 7px; }
.ibc .ibc__options::-webkit-scrollbar-thumb,
.ibc .ibc__option-area::-webkit-scrollbar-thumb,
.ibc .ibc__spec-modal-inner::-webkit-scrollbar-thumb {
	background: var(--ibc-gold, #ad8a58);
	border-radius: 8px;
}
@media (max-width: 760px) {
	.ibc[class*="ibc--boat-"] .ibc__progress > button { padding-top: 18px !important; padding-bottom: 14px !important; font-size: 9px !important; letter-spacing: .01em !important; }
	.ibc[class*="ibc--boat-"] .ibc__progress > button span { font-size: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.ibc .ibc__choice,
	.ibc .ibc__progress::before,
	.ibc .ibc__progress > button::after { transition: none !important; }
}