/* FoodFlow calculator surface. */
.uff-product-calculator,
.uff-product-calculator * {
	box-sizing: border-box;
}

.uff-product-calculator {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--uff-color-border, rgba(37, 62, 102, .10));
	border-radius: var(--uff-radius-lg, 18px);
	background: var(--uff-color-surface, #fff);
	box-shadow: var(--uff-shadow-xs, 0 1px 3px rgba(0, 0, 0, .04));
	color: var(--uff-color-text, #253e66);
}

.uff-product-calculator__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--uff-color-border-light, rgba(37, 62, 102, .05));
}

.uff-product-calculator__head span {
	display: block;
	margin-bottom: 5px;
	color: var(--uff-color-primary, #253e66);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.uff-product-calculator__head h3 {
	margin: 0;
	color: var(--uff-color-text, #253e66);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.uff-product-calculator__head > strong {
	flex: 0 0 auto;
	color: var(--uff-color-primary, #253e66);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	text-align: right;
}

.uff-product-calculator__fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 18px;
}

.uff-product-calculator__fields > label {
	display: block;
	min-width: 0;
	margin: 0;
	color: var(--uff-color-text, #253e66);
	font-size: 12px;
	font-weight: 700;
}

.uff-product-calculator__fields > label > span {
	display: block;
	margin-bottom: 7px;
}

.uff-product-calculator__input-wrap {
	position: relative;
}

.uff-product-calculator__input-wrap input {
	display: block;
	width: 100%;
	height: 48px;
	min-width: 0;
	margin: 0;
	padding: 0 54px 0 14px;
	border: 1px solid var(--uff-color-border-strong, rgba(37, 62, 102, .15));
	border-radius: var(--uff-radius-md, 12px);
	background: var(--uff-color-surface, #fff);
	box-shadow: none;
	color: var(--uff-color-text, #253e66);
	font: 600 15px/1 var(--uff-font-body, Raleway, sans-serif);
	appearance: textfield;
	-moz-appearance: textfield;
	transition: border-color var(--uff-transition-fast, .18s ease), box-shadow var(--uff-transition-fast, .18s ease);
}

.uff-product-calculator__input-wrap input::-webkit-inner-spin-button,
.uff-product-calculator__input-wrap input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.uff-product-calculator__input-wrap input:focus {
	border-color: var(--uff-color-primary, #253e66);
	outline: 0;
	box-shadow: 0 0 0 3px var(--uff-color-focus, rgba(37, 62, 102, .18));
}

.uff-product-calculator__input-wrap small {
	position: absolute;
	top: 50%;
	right: 14px;
	margin: 0;
	transform: translateY(-50%);
	color: var(--uff-color-text-light, #64748b);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.uff-product-calculator__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--uff-color-border-light, rgba(37, 62, 102, .05));
	color: var(--uff-color-text-light, #64748b);
	font-size: 13px;
}

.uff-product-calculator__summary strong {
	color: var(--uff-color-primary, #253e66);
	font-size: 18px;
	font-weight: 800;
}

.uff-product-calculator.is-invalid .uff-product-calculator__input-wrap input {
	border-color: var(--uff-color-danger, #d9534f);
	box-shadow: 0 0 0 3px rgba(217, 83, 79, .12);
}

@media (max-width: 720px) {
	.uff-product-calculator__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
	.uff-product-calculator { padding: 16px; }
	.uff-product-calculator__head { display: block; }
	.uff-product-calculator__head > strong { display: block; margin-top: 10px; text-align: left; }
	.uff-product-calculator__fields { grid-template-columns: 1fr; }
}