/* BLOCO CALCULADORA — específico do motor "agua" (copos no resultado).
   Carregado só quando esse motor é usado, junto com agua.js — ver
   befit_enqueue_calculator_type_assets() em utils/blocks/calculators/calculators.php.
   A casca da calculadora, campos, botões e o esqueleto do resultado vêm de
   style.css, comum a qualquer tipo. */

/* Um copo por unidade da recomendação: silhueta de copo (trapézio) com a
   água preenchendo a parte de baixo, na cor de destaque azul do site
   (#70AEC2, a mesma da proteína em macros.css e de "abaixo do peso" no IMC). */
.calculator-agua-glasses {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.calculator-agua-glass {
	position: relative;
	width: 22px;
	height: 30px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top: none;
	border-radius: 0 0 5px 5px;
	clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
	background: linear-gradient(to top, #70AEC2 0 70%, transparent 70% 100%);
}

.calculator-agua .calculator-agua-glasses-text {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--calc-text-medium);
}

/* Linhas do detalhamento que o JS oculta (treino/clima quando não se
   aplicam): o CSS comum dá display:flex a .calculator-data-item, o que
   venceria o [hidden] do navegador. */
.calculator-agua [hidden] {
	display: none !important;
}