/* NIRO — Vizualizare 3D live
   Stil aliniat la cardul configuratorului (fundal cald, radius 14). */

.niro3d {
	width: 100% !important;
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 14px 14px 12px;
	background: #faf9f7;
	border: 1px solid #e7e3dc;
	border-radius: 14px;
	float: none !important;
	clear: both;
}

.niro3d__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.niro3d__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8a8579;
	margin: 0;
}

/* --- comutator de vedere --- */
.niro3d__views {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: #f1eee9;
	border: 1px solid #e2ddd4;
	border-radius: 999px;
}

.niro3d__view {
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #6b665c;
	padding: 7px 12px;
	border-radius: 999px;
	transition: background .18s, color .18s;
}

.niro3d__view:hover { color: #1c1b18; }

.niro3d__view.is-on {
	background: #1c1b18;
	color: #fff;
}

/* --- scena --- */
.niro3d__stage {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background:
		radial-gradient(120% 80% at 50% 8%, #ffffff 0%, #f3f1ed 55%, #e9e5df 100%);
	border: 1px solid #eae6df;
}

.niro3d__stage canvas {
	display: block;
	width: 100%;
	height: 430px;
	touch-action: none;
	cursor: grab;
}

.niro3d__stage canvas:active { cursor: grabbing; }

.niro3d__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: #8a8579;
	background: #f6f4f0;
}

/* --- buton deschide ușa --- */
.niro3d__deschide {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: #1c1b18;
	background: rgba(255, 255, 255, .92);
	border: 1px solid #ddd7cd;
	border-radius: 999px;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background .18s, color .18s, border-color .18s;
}

.niro3d__deschide svg { width: 16px; height: 16px; }

.niro3d__deschide:hover {
	background: #1c1b18;
	color: #fff;
	border-color: #1c1b18;
}

.niro3d__hint {
	position: absolute;
	right: 12px;
	bottom: 14px;
	margin: 0;
	font-size: 11px;
	color: #9a958a;
	pointer-events: none;
}

/* --- legenda --- */
.niro3d__legenda {
	margin: 9px 2px 0;
	font-size: 12px;
	color: #6b665c;
	line-height: 1.45;
}

/* --- mobil --- */
@media (max-width: 600px) {
	.niro3d { padding: 12px 12px 10px; }
	.niro3d__stage canvas { height: 320px; }
	.niro3d__hint { display: none; }
	.niro3d__view { padding: 7px 10px; font-size: 11.5px; }
}

@media (max-width: 400px) {
	.niro3d__head { gap: 8px; }
	.niro3d__views { width: 100%; }
	.niro3d__view { flex: 1; text-align: center; }
}

/* --- sensul de deschidere (doar vizualizare, la ușile fără sens în configurator) --- */
.niro3d__dir {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 10px 2px 0;
}

.niro3d__dir-et {
	font-size: 12px;
	color: #8a8579;
	margin-right: 2px;
}

.niro3d__dir-b {
	appearance: none;
	border: 1px solid #ddd7cd;
	background: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: #4a463f;
	padding: 8px 14px;
	border-radius: 999px;
	transition: background .18s, color .18s, border-color .18s;
}

.niro3d__dir-b:hover { border-color: #1c1b18; color: #1c1b18; }

.niro3d__dir-b.is-on {
	background: #1c1b18;
	border-color: #1c1b18;
	color: #fff;
}

@media (max-width: 400px) {
	.niro3d__dir-b { flex: 1; text-align: center; padding: 8px 10px; }
	.niro3d__dir-et { width: 100%; margin-bottom: 2px; }
}