/* Bricolando — comparare produse (v1.0.0). Verdele butonului temei: #1F8F2E; verde șters: #EEF6EE. */

/* ---------- butonul de pe imaginea produsului ---------- */
.brico-cmp-host { position: relative; }
.brico-cmp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 34px; height: 34px; padding: 0; margin: 0;
	border: 1px solid #d5d9d5; border-radius: 50%;
	background: #fff; color: #222; cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	transition: background .15s, color .15s, border-color .15s;
	font: inherit; line-height: 1;
}
.brico-cmp-host > .brico-cmp-btn { position: absolute; bottom: 8px; left: 8px; top: auto; right: auto; z-index: 6; }
.brico-cmp-btn:hover { border-color: #1F8F2E; color: #1F8F2E; }
.brico-cmp-btn.is-on { background: #1F8F2E; border-color: #1F8F2E; color: #fff; }
.brico-cmp-btn:focus-visible { outline: 2px solid #1F8F2E; outline-offset: 2px; }
.brico-cmp-ico { display: inline-flex; }
.brico-cmp-btn__t { display: none; }

/* explicația la trecerea cursorului (doar pe ecrane cu mouse) */
@media (hover: hover) {
	.brico-cmp-host > .brico-cmp-btn::after {
		content: attr(data-tip); position: absolute; left: 40px; right: auto; top: 50%; transform: translateY(-50%);
		background: #222; color: #fff; font-size: 12px; white-space: nowrap; padding: 4px 8px; border-radius: 4px;
		opacity: 0; pointer-events: none; transition: opacity .15s;
	}
	.brico-cmp-host > .brico-cmp-btn:hover::after { opacity: 1; }
}

/* varianta cu text, de pe pagina produsului (!important: tema pune reguli late pe orice buton din .summary) */
.brico-cmp-btn.brico-cmp-btn--text {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
	width: auto !important; height: auto !important; min-width: 0 !important; min-height: 40px; padding: 8px 16px !important; margin: 12px 0 0 !important;
	border: 1px solid #1F8F2E !important; border-radius: 4px !important; background: #fff !important; color: #1F8F2E !important;
	box-shadow: none; font-size: 14px; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer;
}
.brico-cmp-btn--text .brico-cmp-btn__t { display: inline !important; }
.brico-cmp-wrap { text-align: right; margin: 8px 0 4px; }
.brico-cmp-prijrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.brico-cmp-prijrow > .price { margin: 0; }
.brico-cmp-prijrow > .brico-cmp-wrap { margin: 0; }
.brico-cmp-wrap .brico-cmp-btn.brico-cmp-btn--text { margin: 0 !important; }
.brico-cmp-btn.brico-cmp-btn--text:hover { background: #EEF6EE !important; }
.brico-cmp-btn.brico-cmp-btn--text.is-on { background: #1F8F2E !important; color: #fff !important; }

/* ---------- caseta „Comparație” ---------- */
.brico-cmp-tray {
	position: fixed; left: 16px; bottom: 16px; z-index: 99990;
	width: 300px; max-width: calc(100vw - 32px);
	background: #fff; border-radius: 8px 8px 0 0; box-shadow: 0 2px 14px rgba(0, 0, 0, .28);
	font-size: 14px; color: #222;
}
.brico-cmp-tray[hidden] { display: none; }
.brico-cmp-tray__head {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: 12px 14px; border: 0; border-radius: 8px 8px 0 0; background: #1F8F2E; color: #fff;
	font: inherit; font-weight: 700; cursor: pointer;
}
.brico-cmp-tray__chev { display: inline-flex; transition: transform .2s; }
.brico-cmp-tray.is-closed .brico-cmp-tray__chev { transform: rotate(180deg); }
.brico-cmp-tray.is-closed .brico-cmp-tray__body { display: none; }
.brico-cmp-tray__list { list-style: none; margin: 0; padding: 4px 0; max-height: 40vh; overflow: auto; }
.brico-cmp-tray__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #eee; }
.brico-cmp-tray__img { flex: 0 0 48px; width: 48px; height: 48px; display: block; }
.brico-cmp-tray__img img { width: 48px; height: 48px; object-fit: contain; display: block; }
.brico-cmp-tray__nume {
	flex: 1; min-width: 0; color: #222; text-decoration: none; font-size: 13px; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.brico-cmp-tray__x { flex: 0 0 auto; border: 0; background: none; color: #777; cursor: pointer; padding: 4px; }
.brico-cmp-tray__x:hover { color: #c00; }
.brico-cmp-tray__go {
	display: block; margin: 10px 12px 6px; padding: 11px 12px; text-align: center; text-decoration: none;
	background: #1F8F2E; color: #fff; font-weight: 700; border-radius: 4px;
}
.brico-cmp-tray__go.is-off { background: #e2e6e2; color: #6b716b; cursor: default; }
.brico-cmp-tray__clear { display: block; margin: 0 auto 10px; border: 0; background: none; color: #666; text-decoration: underline; font-size: 12px; cursor: pointer; }

/* pe telefon: mai sus, ca să nu acopere bara de „Adaugă în coș” a temei */
@media (max-width: 767px) {
	.brico-cmp-tray { left: 8px; bottom: 8px; width: calc(100vw - 16px); }
	body.single-product .brico-cmp-tray { bottom: 76px; }
}

/* mesaj scurt */
.brico-cmp-toast {
	position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 99999;
	background: #222; color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 14px; max-width: 90vw;
	opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.brico-cmp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- pagina de comparare ---------- */
.brico-cmp-page { margin: 16px 0 40px; font-size: 14px; color: #222; }
.brico-cmp-incarcare, .brico-cmp-eroare, .brico-cmp-nota { padding: 24px 0; color: #555; }
.brico-cmp-gol { padding: 32px 16px; text-align: center; background: #EEF6EE; border-radius: 8px; }
.brico-cmp-cta {
	display: inline-block; margin-top: 8px; padding: 11px 22px; background: #1F8F2E; color: #fff;
	text-decoration: none; font-weight: 700; border-radius: 4px;
}
.brico-cmp-unelte { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.brico-cmp-diff { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.brico-cmp-diff input { width: 18px; height: 18px; accent-color: #1F8F2E; }
.brico-cmp-actiuni { display: flex; flex-wrap: wrap; gap: 8px; }
.brico-cmp-mic {
	padding: 7px 12px; border: 1px solid #cfd5cf; border-radius: 4px; background: #fff; color: #222;
	font: inherit; font-size: 13px; text-decoration: none; cursor: pointer;
}
.brico-cmp-mic:hover { border-color: #1F8F2E; color: #1F8F2E; }

.brico-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.brico-cmp-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; }
.brico-cmp-table th, .brico-cmp-table td { padding: 10px 12px; border-bottom: 1px solid #e6e9e6; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.brico-cmp-table td + td, .brico-cmp-table th + th, .brico-cmp-table th + td { border-left: 1px solid #eef0ee; }
.brico-cmp-eticheta { width: 150px; background: #f7f8f7; font-weight: 600; color: #333; }
.brico-cmp-table thead th { background: #fff; border-bottom: 2px solid #1F8F2E; }
.brico-cmp-table thead .brico-cmp-eticheta { background: #fff; }
.brico-cmp-prod { position: relative; padding-top: 32px !important; text-align: center !important; }
.brico-cmp-scoate { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: #777; cursor: pointer; padding: 4px; }
.brico-cmp-scoate:hover { color: #c00; }
.brico-cmp-poza { display: block; margin-bottom: 8px; }
.brico-cmp-poza img { max-width: 100%; max-height: 180px; width: auto; height: auto; object-fit: contain; display: inline-block; }
.brico-cmp-marca { display: block; margin: 0 auto 6px; max-height: 22px; width: auto; max-width: 110px; }
.brico-cmp-marca-t { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-bottom: 4px; }
.brico-cmp-titlu { display: block; color: #222; font-weight: 700; font-size: 14px; line-height: 1.35; text-decoration: none; margin-bottom: 4px; }
.brico-cmp-titlu:hover { color: #1F8F2E; }
.brico-cmp-cod { font-size: 12px; color: #777; margin-bottom: 6px; }
.brico-cmp-pret { margin: 6px 0; font-size: 18px; font-weight: 800; color: #b3002d; }
.brico-cmp-pret .amount { color: inherit; }
.brico-cmp-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; background: #EEF6EE; color: #1F8F2E; border: 1px solid #1F8F2E; border-radius: 10px; font-size: 11px; font-weight: 700; vertical-align: middle; }
.brico-cmp-stoc { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.brico-cmp-stoc--in { color: #1F8F2E; }
.brico-cmp-stoc--pre { color: #b26a00; }
.brico-cmp-stoc--out { color: #b00020; }
.brico-cmp-cos {
	display: block; padding: 10px 8px; background: #1F8F2E; color: #fff !important; text-decoration: none;
	font-weight: 700; border-radius: 4px; text-align: center;
}
.brico-cmp-cos:hover { background: #17741f; }
.brico-cmp-cos--alt { background: #fff; color: #1F8F2E !important; border: 1px solid #1F8F2E; }
.brico-cmp-cos.is-busy { opacity: .7; pointer-events: none; }
.brico-cmp-cos.is-done { background: #EEF6EE; color: #1F8F2E !important; border: 1px solid #1F8F2E; }

.brico-cmp-rand--descriere td { font-size: 14px; line-height: 1.5; color: #333; }
.brico-cmp-sectiune th { background: #EEF6EE; color: #1F8F2E; font-size: 15px; padding: 10px 12px; }
.brico-cmp-spec.is-diff td, .brico-cmp-spec.is-diff th { background: #EEF6EE; }
.brico-cmp-spec.is-diff td { font-weight: 600; }
.brico-cmp-spec.is-same td { color: #555; }
.brico-cmp-table td.is-lipsa { color: #aaa; }
.brico-cmp-table.doar-diferente .brico-cmp-spec.is-same { display: none; }

/* pe ecran lat nu e nevoie de derulare orizontală */
@media (min-width: 1100px) {
	.brico-cmp-scroll { overflow: visible; }
}
/* pe ecran îngust: prima coloană (etichetele) rămâne vizibilă la derulare orizontală */
@media (max-width: 1099px) {
	.brico-cmp-table tbody .brico-cmp-eticheta { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 #e6e9e6; }
	.brico-cmp-eticheta { width: 110px; }
}
@media (max-width: 767px) {
	.brico-cmp-eticheta { width: 84px; font-size: 13px; }
	.brico-cmp-table { min-width: 0; width: calc(84px + var(--brico-cmp-n, 3) * 190px); }
	.brico-cmp-table th, .brico-cmp-table td { padding: 8px; }
}

@media print {
	.brico-cmp-tray, .brico-cmp-toast, .brico-cmp-unelte, .brico-cmp-scoate, .brico-cmp-cos { display: none !important; }
	.brico-cmp-table { min-width: 0; }
}