/* Configurator ELCAR × Murlink® — stiluri izolate sub .emc */

.emc {
	--emc-navy: #0a2345;
	--emc-blue: #235488;
	--emc-blue-deep: #153e70;
	--emc-electric: #1487e4;
	--emc-sky: #eaf4ff;
	--emc-ice: #f5f9fd;
	--emc-ink: #12223a;
	--emc-copy: #46566f;
	--emc-muted: #7e899a;
	--emc-line: #dbe5ef;
	--emc-white: #fff;
	--emc-ok: #1a7f4b;
	--emc-ok-bg: #e8f6ee;
	--emc-warn: #a4610a;
	--emc-warn-bg: #fdf3e3;
	--emc-stop: #b3261e;
	--emc-stop-bg: #fdecea;
	--emc-radius: 16px;
	--emc-radius-sm: 10px;
	--emc-shadow: 0 18px 44px rgba(10, 35, 69, 0.1);
	--emc-shadow-sm: 0 2px 10px rgba(10, 35, 69, 0.07);

	box-sizing: border-box;
	color: var(--emc-ink);
	background: var(--emc-white);
	font-family: "Sora", "Inter", "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.emc *,
.emc *::before,
.emc *::after { box-sizing: border-box; }

.emc img { display: block; max-width: 100%; }

.emc h1, .emc h2, .emc h3, .emc h4, .emc p, .emc ul, .emc ol { margin: 0; }
.emc ul { padding-left: 1.1em; }

.emc__wrap {
	max-width: 1220px;
	margin: 0 auto;
	padding: 28px 20px 72px;
}

/* ---------------------------------------------------------------- antet */

.emc__head { margin-bottom: 22px; }

.emc__eyebrow {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--emc-sky);
	color: var(--emc-blue-deep);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.emc__title {
	margin-top: 12px;
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.emc__lede {
	margin-top: 10px;
	max-width: 62ch;
	color: var(--emc-copy);
}

/* --------------------------------------------------------------- alerte */

.emc-nota {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--emc-radius-sm);
	border: 1px solid transparent;
	font-size: 14.5px;
	line-height: 1.55;
}

.emc-nota strong { display: block; margin-bottom: 2px; }
.emc-nota__icon { flex: 0 0 auto; font-size: 17px; line-height: 1.4; }
.emc-nota--info { background: var(--emc-ice); border-color: var(--emc-line); color: var(--emc-copy); }
.emc-nota--ok   { background: var(--emc-ok-bg); border-color: #bfe4cf; color: #14603a; }
.emc-nota--warn { background: var(--emc-warn-bg); border-color: #f0d9ae; color: var(--emc-warn); }
.emc-nota--stop { background: var(--emc-stop-bg); border-color: #f3c4bf; color: var(--emc-stop); }
.emc-nota + .emc-nota { margin-top: 10px; }

/* ---------------------------------------------------------------- taburi */

.emc-taburi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin-bottom: 22px;
}

.emc-tab {
	display: block;
	padding: 13px 16px;
	border: 1.5px solid var(--emc-line);
	border-radius: var(--emc-radius-sm);
	background: var(--emc-white);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.emc-tab:hover { border-color: #b9cee3; background: var(--emc-ice); }
.emc-tab:focus-visible { outline: 2px solid var(--emc-electric); outline-offset: 2px; }

.emc-tab--activ {
	border-color: var(--emc-navy);
	background: var(--emc-navy);
	color: #fff;
}

.emc-tab--activ:hover { background: var(--emc-blue-deep); border-color: var(--emc-blue-deep); }
.emc-tab__nume { display: block; font-size: 15.5px; font-weight: 700; }
.emc-tab__desc { display: block; margin-top: 2px; font-size: 12.5px; color: var(--emc-muted); }
.emc-tab--activ .emc-tab__desc { color: rgba(255, 255, 255, 0.72); }

/* ---------------------------------------------------------------- grila */

.emc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 940px) {
	.emc__grid { grid-template-columns: minmax(0, 1fr); }
}

.emc-card {
	background: var(--emc-white);
	border: 1px solid var(--emc-line);
	border-radius: var(--emc-radius);
	box-shadow: var(--emc-shadow-sm);
}

.emc-card__body { padding: 22px; }

@media (max-width: 560px) {
	.emc__wrap { padding: 20px 14px 56px; }
	.emc-card__body { padding: 16px; }
	/* pe ecrane inguste, indentarea pasilor consuma prea mult din latime */
	.emc-camp, .emc-optiuni, .emc-unghi, .emc-prag { margin-left: 0; }
	.emc-pas__ajutor { margin-left: 0; }
	.emc-optiuni { grid-template-columns: minmax(0, 1fr); }
	.emc-input { max-width: none; }
}

/* ------------------------------------------------------------ formularul */

.emc-pas + .emc-pas {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--emc-line);
}

.emc-pas__cap {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}

.emc-pas__nr {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--emc-navy);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	align-self: center;
}

.emc-pas__titlu { font-size: 16.5px; font-weight: 700; }
.emc-pas__ajutor { margin: 2px 0 12px 34px; color: var(--emc-muted); font-size: 13.5px; }

/* câmpuri numerice */

.emc-camp { margin-left: 34px; }
.emc-camp--liber { margin-left: 0; }

.emc-input {
	display: flex;
	align-items: stretch;
	max-width: 260px;
	border: 1.5px solid var(--emc-line);
	border-radius: var(--emc-radius-sm);
	background: var(--emc-white);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.emc-input:focus-within {
	border-color: var(--emc-electric);
	box-shadow: 0 0 0 3px rgba(20, 135, 228, 0.15);
}

.emc-input--rau { border-color: var(--emc-stop); }
.emc-input--rau:focus-within { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14); }

.emc-input input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 12px;
	border: 0;
	border-radius: var(--emc-radius-sm) 0 0 var(--emc-radius-sm);
	background: transparent;
	color: var(--emc-ink);
	font: inherit;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.emc-input input:focus { outline: none; }

/* ascunde săgețile native — avem propriile limite și validări */
.emc-input input::-webkit-outer-spin-button,
.emc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.emc-input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.emc-input__um {
	display: flex;
	align-items: center;
	padding: 0 13px;
	border-left: 1px solid var(--emc-line);
	background: var(--emc-ice);
	border-radius: 0 var(--emc-radius-sm) var(--emc-radius-sm) 0;
	color: var(--emc-muted);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.emc-eroare {
	margin-top: 7px;
	color: var(--emc-stop);
	font-size: 13.5px;
	font-weight: 600;
}

.emc-eroare:empty { display: none; }

/* selectoare */

.emc-select {
	width: 100%;
	max-width: 380px;
	padding: 11px 12px;
	border: 1.5px solid var(--emc-line);
	border-radius: var(--emc-radius-sm);
	background: var(--emc-white);
	color: var(--emc-ink);
	font: inherit;
	font-weight: 600;
}

.emc-select:focus {
	outline: none;
	border-color: var(--emc-electric);
	box-shadow: 0 0 0 3px rgba(20, 135, 228, 0.15);
}

/* două câmpuri alăturate */

.emc-doua {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-left: 34px;
}

.emc-doua .emc-camp { margin-left: 0; }

.emc-eticheta {
	margin-bottom: 5px;
	color: var(--emc-muted);
	font-size: 12.5px;
	font-weight: 650;
}

.emc-ajutor-img {
	margin: 12px 0 0 34px;
	max-width: 320px;
	border: 1px solid var(--emc-line);
	border-radius: var(--emc-radius-sm);
}

@media (max-width: 560px) {
	.emc-doua { margin-left: 0; }
	.emc-ajutor-img { margin-left: 0; }
}

/* opțiuni sub formă de carduri */

.emc-optiuni {
	display: grid;
	gap: 10px;
	margin-left: 34px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.emc-optiuni--stranse { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

.emc-optiune {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	border: 1.5px solid var(--emc-line);
	border-radius: var(--emc-radius-sm);
	background: var(--emc-white);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.emc-optiune:hover { border-color: #b9cee3; background: var(--emc-ice); }

/* Radio-urile raman in arborele de accesibilitate si focusabile, dar invizibile. */
.emc-optiune input,
.emc-varianta input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.emc-optiune__marca {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid #c3d2e2;
	border-radius: 50%;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.emc-optiune input:checked ~ .emc-optiune__marca {
	border-color: var(--emc-electric);
	box-shadow: inset 0 0 0 4px var(--emc-electric);
}

.emc-optiune input:focus-visible ~ .emc-optiune__marca {
	outline: 2px solid var(--emc-electric);
	outline-offset: 3px;
}

.emc-optiune:has(input:checked) {
	border-color: var(--emc-electric);
	background: var(--emc-sky);
}

.emc-optiune__text { min-width: 0; flex: 1 1 auto; }
.emc-optiune__nume { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.emc-optiune__desc { display: block; margin-top: 2px; color: var(--emc-muted); font-size: 12.5px; line-height: 1.35; }

.emc-optiune__schita {
	flex: 0 0 auto;
	width: 46px;
	height: 58px;
	object-fit: contain;
	margin-left: auto;
	mix-blend-mode: multiply;
}

/* unghi: cursor + valoare */

.emc-unghi { display: flex; align-items: center; gap: 16px; margin-left: 34px; flex-wrap: wrap; }
.emc-unghi__slider { flex: 1 1 200px; min-width: 160px; }

.emc-unghi__slider input[type="range"] {
	display: block;
	width: 100%;
	margin: 0;
	accent-color: var(--emc-electric);
}

.emc-unghi__scala {
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
	color: var(--emc-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.emc-unghi .emc-input { max-width: 130px; }

.emc-prag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	margin-left: 34px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--emc-ice);
	color: var(--emc-copy);
	font-size: 13px;
	font-weight: 600;
}

.emc-prag b { color: var(--emc-navy); }

/* ------------------------------------------------------------- rezultat */

.emc-rezultat { position: sticky; top: 16px; }

@media (max-width: 940px) {
	.emc-rezultat { position: static; }
}

.emc-rezultat__gol {
	padding: 46px 24px;
	text-align: center;
	color: var(--emc-muted);
}

.emc-rezultat__gol svg { margin: 0 auto 14px; opacity: 0.5; }

.emc-vizual {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 18px 20px;
	border-bottom: 1px solid var(--emc-line);
	background: linear-gradient(180deg, var(--emc-ice), var(--emc-white));
	border-radius: var(--emc-radius) var(--emc-radius) 0 0;
}

@media (max-width: 420px) {
	.emc-vizual { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 14px; }
}

.emc-vizual__img {
	width: 100%;
	height: 230px;
	object-fit: contain;
	background: var(--emc-white);
	border: 1px solid var(--emc-line);
	border-radius: var(--emc-radius-sm);
	padding: 8px;
}

@media (max-width: 420px) { .emc-vizual__img { height: 160px; } }

.emc-vizual__conf { color: var(--emc-muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.emc-vizual__ref { margin-top: 4px; font-size: clamp(21px, 3.4vw, 27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.emc-vizual__sub { margin-top: 3px; color: var(--emc-copy); font-size: 14px; }

.emc-cifre {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1px;
	background: var(--emc-line);
	border-bottom: 1px solid var(--emc-line);
}

.emc-cifra { padding: 14px 16px; background: var(--emc-white); }
.emc-cifra__et { color: var(--emc-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.emc-cifra__val { margin-top: 3px; font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.emc-cifra__val small { font-size: 13px; font-weight: 600; color: var(--emc-muted); }

/* bară de utilizare */

.emc-bara { padding: 16px 20px; border-bottom: 1px solid var(--emc-line); }
.emc-bara__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; font-size: 13.5px; }
.emc-bara__cap b { font-variant-numeric: tabular-nums; }
.emc-bara__sina { height: 9px; border-radius: 999px; background: var(--emc-line); overflow: hidden; }
.emc-bara__fill { height: 100%; border-radius: 999px; background: var(--emc-ok); transition: width 0.25s ease; }
.emc-bara__fill--sus { background: var(--emc-warn); }

/* secțiuni în cardul de rezultat */

.emc-sect { padding: 18px 20px; border-bottom: 1px solid var(--emc-line); }
.emc-sect:last-child { border-bottom: 0; }
.emc-sect__t { margin-bottom: 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--emc-muted); }

/* tabel accesorii */

.emc-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.emc-tabel th { padding: 0 8px 8px 0; color: var(--emc-muted); font-size: 12px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: 0.05em; }
.emc-tabel th:not(:first-child), .emc-tabel td:not(:first-child) { text-align: right; }
.emc-tabel td { padding: 8px 8px 8px 0; border-top: 1px solid var(--emc-line); font-variant-numeric: tabular-nums; }
.emc-tabel td:first-child { font-weight: 600; }
.emc-tabel tr.emc-tabel--nu td { color: var(--emc-warn); }
.emc-tabel__nu { font-size: 13px; font-weight: 600; }

.emc-tabel__nume { display: flex; align-items: center; gap: 9px; }
.emc-tabel__pict { flex: 0 0 auto; width: 26px; height: 34px; object-fit: contain; }
.emc-tabel--nu .emc-tabel__pict { opacity: 0.4; }
.emc-tabel tr.emc-tabel--guv td { background: var(--emc-sky); font-weight: 700; }
.emc-tabel tr.emc-tabel--guv td:first-child { border-left: 3px solid var(--emc-electric); padding-left: 7px; }

/* eticheta de gamă */

.emc-eticheta-gama {
	display: inline-block;
	margin-top: 7px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--emc-ice);
	border: 1px solid var(--emc-line);
	color: var(--emc-copy);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.emc-eticheta-gama--hero { background: #fff3e0; border-color: #f0d9ae; color: var(--emc-warn); }

/* economie */

.emc-econ { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.emc-econ__c { padding: 12px 14px; border-radius: var(--emc-radius-sm); background: var(--emc-ice); }
.emc-econ__c--tare { background: var(--emc-ok-bg); }
.emc-econ__et { color: var(--emc-muted); font-size: 12px; font-weight: 600; }
.emc-econ__val { margin-top: 2px; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.emc-econ__c--tare .emc-econ__val { color: var(--emc-ok); }

/* -------------------------------------------------------- galerie variante */

.emc-galerie { margin-top: 24px; }
.emc-galerie__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.emc-galerie h3 { font-size: 18px; }
.emc-galerie p { color: var(--emc-copy); font-size: 14.5px; max-width: 68ch; }

.emc-galerie__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.emc-varianta {
	position: relative;
	display: block;
	padding: 6px;
	border: 1.5px solid var(--emc-line);
	border-radius: var(--emc-radius-sm);
	background: var(--emc-white);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s, transform 0.15s;
}

.emc-varianta:hover { border-color: #b9cee3; transform: translateY(-2px); }
.emc-varianta:has(input:checked) { border-color: var(--emc-electric); background: var(--emc-sky); }
.emc-varianta:has(input:focus-visible) { outline: 2px solid var(--emc-electric); outline-offset: 2px; }
.emc-varianta img { width: 100%; height: 92px; object-fit: contain; }
.emc-varianta__et { margin-top: 4px; color: var(--emc-muted); font-size: 11.5px; font-weight: 600; }

/* ------------------------------------------------------------- acțiuni */

.emc-actiuni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.emc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 650;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.emc-btn--primar { background: var(--emc-navy); color: #fff; }
.emc-btn--primar:hover { background: var(--emc-blue-deep); }
.emc-btn--secundar { background: var(--emc-white); border-color: var(--emc-line); color: var(--emc-navy); }
.emc-btn--secundar:hover { border-color: var(--emc-blue); background: var(--emc-ice); }
.emc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.emc-btn:focus-visible { outline: 2px solid var(--emc-electric); outline-offset: 3px; }

/* ------------------------------------------------------------- condiții */

.emc-conditii { margin-top: 28px; }
.emc-conditii summary { cursor: pointer; font-weight: 650; padding: 14px 20px; }
.emc-conditii summary::marker { color: var(--emc-muted); }
.emc-conditii__corp { padding: 0 20px 18px; color: var(--emc-copy); font-size: 14.5px; }
.emc-conditii__corp li + li { margin-top: 5px; }
.emc-conditii__corp p { margin-top: 12px; }
.emc-conditii__corp h4 {
	margin: 16px 0 6px;
	color: var(--emc-navy);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.emc-conditii__corp h4:first-child { margin-top: 0; }

.emc-sursa { margin-top: 18px; color: var(--emc-muted); font-size: 12.5px; line-height: 1.6; }

/* ---------------------------------------------------------------- print */

@media print {
	.emc { font-size: 12pt; }
	.emc__wrap { max-width: none; padding: 0; }
	.emc__grid { display: block; }
	.emc-card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
	.emc-rezultat { position: static; }
	.emc-formular, .emc-galerie, .emc-actiuni, .emc__lede, .emc-nota--info { display: none !important; }
	.emc-conditii[open] .emc-conditii__corp { display: block; }
	.emc-vizual { background: none; }
	.emc-vizual__img { height: 180px; }
	.emc-print-doar { display: block !important; }
}

.emc-print-doar { display: none; }
