/* =============================================
   Calculadora Custo de Impressão — Base Styles
   ============================================= */

/* --- Defaults via CSS vars (overridden by shortcode inline or Elementor selectors) --- */
.calc-impressao-wrap {
	--calc-form-bg:        #ffffff;
	--calc-form-radius:    12px;
	--calc-form-padding:   32px;
	--calc-campo-cor:      #1a1a2e;
	--calc-campo-bg:       #f5f7fa;
	--calc-campo-borda:    #d0d7e2;
	--calc-campo-borda-px: 1px;
	--calc-campo-radius:   8px;
	--calc-btn-bg:         #0057FF;
	--calc-btn-cor:        #ffffff;
	--calc-btn-radius:     8px;
	--calc-res-bg:         #f0f4ff;
	--calc-res-cor:        #1a1a2e;
	--calc-res-valor-cor:  #0057FF;
	--calc-titulo-cor:     #1a1a2e;
	--calc-subtitulo-cor:  #4a5568;
	--calc-label-cor:      #374151;

	font-family: inherit;
	box-sizing: border-box;
}

.calc-impressao-wrap *,
.calc-impressao-wrap *::before,
.calc-impressao-wrap *::after {
	box-sizing: border-box;
}

/* --- Form Box --- */
.calc-form-box {
	background-color: var(--calc-form-bg);
	border-radius:    var(--calc-form-radius);
	padding:          var(--calc-form-padding);
	width: 100%;
}

/* --- Headings --- */
.calc-titulo {
	color:       var(--calc-titulo-cor);
	font-size:   1.6rem;
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	line-height: 1.25;
}

.calc-subtitulo {
	color:      var(--calc-subtitulo-cor);
	font-size:  1rem;
	margin: 0 0 1.75rem 0;
	line-height: 1.5;
}

/* --- Grid de campos --- */
.calc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem 1.5rem;
	margin-bottom: 1.75rem;
}

/* --- Field unit --- */
.calc-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.calc-field label {
	color:       var(--calc-label-cor);
	font-size:   0.875rem;
	font-weight: 500;
}

.calc-form input[type="number"] {
	color:            var(--calc-campo-cor);
	background-color: var(--calc-campo-bg);
	border:           var(--calc-campo-borda-px) solid var(--calc-campo-borda);
	border-radius:    var(--calc-campo-radius);
	padding:          0.6rem 0.85rem;
	font-size:        1rem;
	width:            100%;
	outline:          none;
	transition:       border-color 0.2s, box-shadow 0.2s;
	appearance:       textfield;
	-moz-appearance:  textfield;
}

.calc-form input[type="number"]::-webkit-inner-spin-button,
.calc-form input[type="number"]::-webkit-outer-spin-button {
	opacity: 1;
}

.calc-form input[type="number"]:focus {
	border-color: var(--calc-btn-bg, #0057FF);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--calc-btn-bg, #0057FF) 18%, transparent);
}

/* --- Arquivo toggle --- */
.calc-arquivo-toggle {
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}

.calc-toggle-label {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	cursor:      pointer;
	font-size:   0.875rem;
	font-weight: 500;
	color:       var(--calc-label-cor);
	user-select: none;
}

.calc-toggle-label input[type="checkbox"] {
	width:  1.1rem;
	height: 1.1rem;
	accent-color: var(--calc-btn-bg, #0057FF);
	cursor: pointer;
}

.calc-arquivo-input {
	animation: calc-fade-in 0.2s ease;
}

.calc-help {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.78rem;
	opacity: 0.75;
	color: var(--calc-label-cor);
}

@keyframes calc-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Botão --- */
.calc-btn {
	display:          inline-block;
	background-color: var(--calc-btn-bg);
	color:            var(--calc-btn-cor);
	border:           none;
	border-radius:    var(--calc-btn-radius);
	padding:          0.75rem 2.25rem;
	font-size:        1rem;
	font-weight:      600;
	cursor:           pointer;
	transition:       background-color 0.2s, transform 0.1s, box-shadow 0.2s;
	letter-spacing:   0.02em;
}

.calc-btn:hover {
	filter:     brightness(0.88);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--calc-btn-bg, #0057FF) 35%, transparent);
}

.calc-btn:active {
	transform: scale(0.97);
}

/* --- Área de resultados --- */
.calc-resultados {
	background-color: var(--calc-res-bg);
	color:            var(--calc-res-cor);
	border-radius:    12px;
	padding:          28px 32px;
	margin-top:       1.75rem;
	animation:        calc-fade-in 0.3s ease;
}

.calc-res-titulo {
	font-size:   1.2rem;
	font-weight: 700;
	margin: 0 0 1.25rem 0;
	color:       inherit;
}

/* --- Grid de resultados --- */
.calc-res-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem 1.5rem;
	margin-bottom: 1.5rem;
}

.calc-res-item {
	display:        flex;
	flex-direction: column;
	gap:            0.25rem;
}

.calc-res-item--total {
	grid-column: 1 / -1;
	border-top:  2px solid color-mix(in srgb, var(--calc-res-valor-cor, #0057FF) 30%, transparent);
	padding-top: 1rem;
}

.calc-res-label {
	font-size:   0.8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.7;
}

.calc-res-valor {
	font-size:   1.5rem;
	font-weight: 700;
	color:       var(--calc-res-valor-cor);
	line-height: 1.1;
}

.calc-res-valor--total {
	font-size: 2rem;
}

/* --- Microcopy & CTA --- */
.calc-microcopy {
	font-size:   0.95rem;
	font-weight: 600;
	font-style:  italic;
	margin: 0 0 0.6rem 0;
	color:       var(--calc-label-cor, #374151);
}

.calc-cta-text {
	font-size:  0.9rem;
	margin:     0;
	line-height: 1.55;
	opacity:    0.85;
}

/* --- Responsive --- */
@media (max-width: 600px) {
	.calc-form-box,
	.calc-resultados {
		padding: 20px 16px;
	}

	.calc-titulo    { font-size: 1.3rem; }
	.calc-res-valor { font-size: 1.25rem; }
	.calc-res-valor--total { font-size: 1.6rem; }

	.calc-btn {
		width: 100%;
		text-align: center;
	}
}