.st-gate-calculator-wrapper {
	margin: 20px 0;
	padding: 15px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}

.st-slider-group {
	margin-bottom: 20px;
}

.st-slider-group label {
	display: block;
	font-weight: bold;
	margin-bottom: 8px;
}

.st-range-slider {
	width: 100%;
	height: 8px;
	border-radius: 5px;
	background: #555;
	outline: none;
	opacity: 0.7;
	transition: opacity .2s;
	-webkit-appearance: none;
	appearance: none;
}

.st-range-slider:hover {
	opacity: 1;
}

.st-range-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #be713f;
	cursor: pointer;
}

.st-range-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #be713f;
	cursor: pointer;
}

.st-addons-list-wrapper {
	margin: 20px 0;
	padding: 15px 0;
	border-top: 1px dashed rgba(255,255,255,0.2);
}

.st-addons-list-wrapper > label {
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
}

.st-addon-item {
	margin-bottom: 8px;
}

.st-addon-item label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-weight: normal;
}

.st-addon-item input[type="checkbox"] {
	margin-right: 10px;
	width: 18px;
	height: 18px;
	accent-color: #be713f; /* Use the copper color for the checkbox */
}

.st-dynamic-price-wrapper {
	margin-top: 20px;
	font-size: 1.2em;
	padding-top: 15px;
	border-top: 1px dashed rgba(255,255,255,0.2);
}
