/* FF Commerce7 Shipper Preference
 * Rendered as a .c7-account-block inside .c7-account-blocks, so the base
 * layout is provided by Commerce7's own styles. We only style the options.
 */
.ff-c7-shipper-pref {
	position: relative;
}

.ff-c7-shipper-pref .ff-c7-shipper-pref__options {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.ff-c7-shipper-pref__option {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	padding: 0.5rem 1.25rem;
	border: 2px solid currentColor;
	border-radius: 3px;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background-color 0.15s, color 0.15s;
	user-select: none;
}

.ff-c7-shipper-pref__option:hover {
	background-color: rgba(0, 0, 0, 0.06);
}

.ff-c7-shipper-pref__option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.ff-c7-shipper-pref__option:has(input[type="radio"]:checked) {
	background-color: currentColor;
}

.ff-c7-shipper-pref__option:has(input[type="radio"]:checked) span {
	color: #fff;
}

.ff-c7-shipper-pref__option:has(input[type="radio"]:disabled) {
	opacity: 0.5;
	cursor: not-allowed;
}

.ff-c7-shipper-pref__status {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: #2f7a2f;
	position: absolute;
	top: 0;
	right: 1rem;
}

.ff-c7-shipper-pref__status.is-error {
	color: #a12525;
}

.ff-c7-shipper-pref__check {
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	height: 1em;
	margin-right: 0.3em;
	position: relative;
	top: -0.05em;
}

@media screen and (min-width: 769px) {
	.c7-account-club__details .c7-account-blocks {
		grid-template-columns: 1fr 1fr 1fr;
	}
}