/* RadioButton - Bootstrap 5 style form-check input */
.hourgate-form-field input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	margin: 0 0.5rem 0 0;
	height: 1.125rem;
	width: 1.125rem;
	flex-shrink: 0;
	vertical-align: middle;
	border: 0.0938rem solid var(--hourgate-border-color-strong, #ccc) !important;
	border-radius: 50% !important;
	background-color: var(--hourgate-surface-color, #fff);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.55rem;
	cursor: pointer;
	transition: background-color var(--hourgate-transition-fast, 120ms ease), border-color var(--hourgate-transition-fast, 120ms ease);
}

.hourgate-form-field input[type="radio"]:hover {
	border-color: var(--hourgate-text-tertiary-color, #94a3b8) !important;
}

.hourgate-form-field input[type="radio"]:checked {
	background-color: var(--hourgate-primary-color);
	border-color: var(--hourgate-primary-color) !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.hourgate-form-field input[type="radio"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.hourgate-radio-option {
	display: inline-flex;
	align-items: center;
	font-size: 0.8125rem;
	font-weight: 400;
	color: #1e1e1e;
}

.hourgate-form-field-label + .hourgate-radio-option {
	margin-top: 0.375rem;
}

.hourgate-radio-option + .hourgate-radio-option {
	margin-top: 0.25rem;
}

/* The group wraps the options (OW-053); keep the field's spacing. */
.hourgate-radio-group {
	display: flex;
	flex-direction: column;
	gap: 3px;
}