/* --- Container de Visualização Dinâmica --- */
.conv-wall-viewport {
	width: 100%;
	height: 280px;
	background: #0f172a; /* Fundo escuro para destacar a simulação */
	border-radius: var(--conv-radius);
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--conv-border);
	overflow: hidden;
	position: relative;
}

/* A Parede que muda de tamanho via JS */
#dynamicWall {
	width: 160px;
	height: 140px;
	background-color: #f4f1ea;
	background-image: 
		radial-gradient(var(--conv-border) 1px, transparent 1px),
		radial-gradient(var(--conv-border) 1px, transparent 1px);
	background-size: 15px 15px;
	background-position: 0 0, 7.5px 7.5px;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border: 3px solid var(--conv-primary);
	box-shadow: 0 15px 30px rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Etiqueta de dimensões flutuante na parede */
#dynamicWall::before {
	content: attr(data-dim);
	font-size: 0.7rem;
	font-weight: 800;
	color: var(--conv-primary);
	background: white;
	padding: 3px 8px;
	border-radius: 4px;
	position: absolute;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- Resultados --- */
.conv-result-card {
	background: var(--conv-secondary);
	color: #fff;
	padding: 30px;
	border-radius: var(--conv-radius);
	text-align: center;
	margin-top: 25px;
	border-bottom: 5px solid var(--conv-primary);
}

.conv-rolls-val {
	display: block;
	font-size: clamp(2.5rem, 8vw, 3.5rem);
	font-weight: 900;
	color: var(--conv-primary);
	line-height: 1;
	margin: 10px 0;
	text-transform: uppercase;
}

.conv-specs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid rgba(255,255,255,0.1);
}

.conv-spec-item small {
	display: block;
	font-size: 0.65rem;
	color: var(--conv-muted);
	text-transform: uppercase;
	margin-bottom: 3px;
}

.conv-spec-item b {
	font-size: 1.1rem;
	color: #fff;
}

/* --- Dicas --- */
.conv-designer-tip {
	margin-top: 25px;
	padding: 20px;
	background: #fffafa;
	border-radius: var(--conv-radius);
	font-size: 0.9rem;
	line-height: 1.6;
	border: 1px solid var(--conv-border);
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

@media print {
	.conv-wall-viewport { background: white !important; }
	#dynamicWall { box-shadow: none !important; border: 1px solid #000 !important; }
	.conv-btn { display: none; }
}