.calculator {
	margin-top: 1.5rem;
}

.calculator .btn-toolbar {
	display: flex;
    flex-wrap: wrap;
    gap: 1rem;

	margin: 10px 0 10px -20px;
}

.calculator .btn-group {
    display: flex;
}

.calculator .btn-group .btn {
	border-radius: 0;
    border-right-width: 0;

	border: 1px solid var(--border);
	text-transform: none;
}

.calculator .btn-group .btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.calculator .btn-group .btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-right-width: 1px;
}

.calculator .btn-toolbar .btn.active,
.calculator .btn-toolbar .btn:focus {
	background-color: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.measurements svg {
	margin-bottom: -2px;
}

.tooltip-wrapper {
	position: relative;
    display: flex;
    width: min-content;
    gap: 5px;
}

.tooltip-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 115%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    width: 250px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tooltip-wrapper:hover .tooltip-popup {
    opacity: 1;
    visibility: visible;
}

.calculator .btn.calculate {
	background-color: var(--navy);
	border: 1px solid var(--navy);
	color: var(--white);
}

.calculator .btn.calculate:hover {
	background-color: var(--navy-light);
	border-color: var(--navy-light);
    box-shadow: 0 10px 25px rgba(var(--navy-rgb), 0.3);
    color: var(--gold);
}

.calculator .carpet-price {
	font-size: 18px;
}

.calculator .carpet-price span {
	display: inline-block;
	padding: 5px 10px;
	background-color: var(--gold);
	color: var(--navy);
	border-radius: var(--radius-lg);
}

.calculator .disclaimer {
	font-size: 0.9em;
	font-style: italic;
}

.calculator .error-message {
	color: red;
	font-style: italic;
}