/* ==========================================================================
   Mate Tootevõrdlus - esiotsa stiil.
   Kõik reeglid skoobitud mpc- prefiksiga klasside alla, et vältida
   konflikte teistes pluginates/teemas oleva CSS-iga.
   ========================================================================== */

:root {
	--mpc-accent: #1c1f22;
	--mpc-accent-active: #ff5a1f;
}

/* ---- Positsioneeritud esivanem tootekaardi jaoks ----
   Vajalik, et .mpc-compare-btn--card (position:absolute) paikneks TOOTEKAARDI,
   mitte lehe suhtes. tooriistakeskus-modern-shop plugina enda kaardid on juba
   position:relative, aga see rida tagab sama ka juhul, kui see plugin pole
   aktiivne või tootekaart tuleb mõnest muust allikast. Ei mõjuta paigutust,
   kuna offset-väärtusi (top/left) sellele elemendile endale ei anta. */
.woocommerce ul.products li.product {
	position: relative;
}

/* ---- Võrdle nupp tootekaardil (ikoon, pildi nurgas) ---- */
.mpc-compare-btn {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mpc-compare-btn--card {
	width: 100%;
	justify-content: center;
	margin-top: 8px;
	padding: 9px 14px;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	background: #fff;
	color: #333;
	font-weight: 600;
	font-size: 0.85em;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mpc-compare-btn--card:hover {
	border-color: #999;
	background: #f7f7f7;
}
.mpc-compare-btn--card.is-active {
	background: var(--mpc-accent-active);
	color: #fff;
	border-color: var(--mpc-accent-active);
}
.mpc-compare-btn--card .mpc-compare-label {
	white-space: nowrap;
}

/* ---- Võrdle nupp tootevaates (ikoon + tekst, ostukorvi nupu all) ---- */
.mpc-compare-btn--single {
	margin-top: 10px;
	padding: 10px 16px;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	background: #fff;
	color: #333;
	font-weight: 600;
	font-size: 0.88em;
}
.mpc-compare-btn--single:hover {
	border-color: #999;
	background: #f7f7f7;
}
.mpc-compare-btn--single.is-active {
	background: var(--mpc-accent-active);
	border-color: var(--mpc-accent-active);
	color: #fff;
}

.mpc-icon { flex-shrink: 0; }

/* ---- Kleepuv riba ---- */
.mpc-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	background: #1c1f22;
	color: #fff;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
	transform: translateY(100%);
	transition: transform 0.22s ease;
}
.mpc-bar.is-visible { transform: translateY(0); }

.mpc-bar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.mpc-bar-count { font-size: 0.92em; opacity: 0.9; }
.mpc-bar-count strong { font-size: 1.1em; margin-right: 4px; }

.mpc-bar-actions { display: flex; gap: 10px; }
.mpc-bar-clear,
.mpc-bar-compare {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.88em;
	padding: 9px 16px;
	border-radius: 6px;
	text-align: center;
}
.mpc-bar-clear {
	color: #ccc;
	border: 1px solid #444;
}
.mpc-bar-clear:hover { color: #fff; border-color: #777; }
.mpc-bar-compare {
	background: var(--mpc-accent-active);
	color: #fff;
}
.mpc-bar-compare:hover { background: #e14e15; }
.mpc-bar-compare:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Teavitus "Toode lisatud võrdlusesse" ---- */
.mpc-toast {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10000;
	width: 100%;
	max-width: 340px;
	background: #fff;
	color: #1c1f22;
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	padding: 20px 22px;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.94);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
	text-align: center;
}
.mpc-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	pointer-events: auto;
}
.mpc-toast-text {
	display: block;
	font-size: 0.95em;
	font-weight: 600;
	margin-bottom: 14px;
}
.mpc-toast-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}
.mpc-toast-view,
.mpc-toast-dismiss {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 0.85em;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 6px;
	text-align: center;
	flex: 1 1 auto;
}
.mpc-toast-view {
	background: var(--mpc-accent-active);
	color: #fff;
}
.mpc-toast-view:hover { background: #e14e15; }
.mpc-toast-dismiss {
	background: #f2f2f2;
	color: #444;
}
.mpc-toast-dismiss:hover { background: #e6e6e6; }

/* Kerge tumendus tausta, et keskele ilmuv teade jääks selgelt silma
   (nagu modaalilgi, aga kergem - klõps taustale sulgeb teavituse). */
.mpc-toast-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(20, 20, 22, 0.35);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.mpc-toast-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 480px) {
	.mpc-toast {
		width: calc(100% - 32px);
		max-width: none;
	}
}

/* ---- Modaal ---- */
.mpc-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	padding: 20px;
}
.mpc-modal:not( [hidden] ) {
	display: flex;
	align-items: center;
	justify-content: center;
}
.mpc-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 22, 0.6);
}
.mpc-modal-dialog {
	position: relative;
	background: #fff;
	border-radius: 12px;
	max-width: 1100px;
	width: 100%;
	max-height: 88vh;
	overflow: auto;
	padding: 28px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.mpc-modal-close {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	color: #555;
	cursor: pointer;
	background: #f2f2f2;
}
.mpc-modal-close:hover { background: #e6e6e6; color: #111; }

.mpc-modal-loading,
.mpc-modal-empty {
	padding: 60px 20px;
	text-align: center;
	color: #777;
	font-style: italic;
}

/* ---- Võrdlustabel (JS ehitab, üks veerg toote kohta) ---- */
.mpc-compare-table {
	display: grid;
	grid-template-columns: 160px repeat(var(--mpc-cols, 2), 1fr);
	gap: 0;
	width: 100%;
}
.mpc-compare-table .mpc-cell {
	padding: 12px 14px;
	border-bottom: 1px solid #ececec;
	font-size: 0.9em;
	display: flex;
	align-items: center;
}
.mpc-compare-table .mpc-row-label {
	font-weight: 600;
	color: #666;
	background: #fafafa;
	position: sticky;
	left: 0;
}

.mpc-compare-col-head {
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
	padding-top: 24px;
}
.mpc-compare-col-remove {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 4px;
	right: 4px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f2f2f2;
	color: #666;
	cursor: pointer;
	font-size: 16px;
}
.mpc-compare-col-remove:hover { background: #ffe3df; color: #c0392b; }

.mpc-compare-col-head img {
	max-width: 100px;
	max-height: 100px;
	object-fit: contain;
}
.mpc-compare-col-head .mpc-name {
	font-weight: 700;
	font-size: 0.95em;
	color: #1c1f22;
	text-decoration: none;
	line-height: 1.3;
}
.mpc-compare-col-head .mpc-name:hover { color: #ff5a1f; }

.mpc-price-cell .price { font-weight: 700; }
.mpc-price-cell .price del { color: #999; font-weight: 400; font-size: 0.85em; margin-right: 4px; }
.mpc-price-cell .price ins { color: #ff5a1f; text-decoration: none; }

.mpc-stock-cell.mpc-stock-in { color: #3a7d34; font-weight: 600; }
.mpc-stock-cell.mpc-stock-out { color: #c0392b; font-weight: 600; }
.mpc-stock-cell.mpc-stock-backorder { color: #c97a1a; font-weight: 600; }

.mpc-compare-buy {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #1c1f22;
	color: #fff;
	font-weight: 600;
	font-size: 0.85em;
	padding: 9px 14px;
	border-radius: 6px;
	margin: 10px auto 0;
	transition: background-color 0.15s ease;
}
.mpc-compare-buy:hover { background: #ff5a1f; }
.mpc-compare-buy.is-loading { opacity: 0.6; pointer-events: none; }
.mpc-compare-buy.is-added { background: #3a7d34; }
.mpc-compare-buy:disabled { background: #ccc; cursor: not-allowed; }

.mpc-cart-cell {
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.mpc-cart-cell.mpc-is-loading { opacity: 0.55; pointer-events: none; }

.mpc-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	overflow: hidden;
	margin: 10px auto 0;
}
.mpc-qty-minus,
.mpc-qty-plus {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	width: 32px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
	color: #444;
	background: #f7f7f7;
}
.mpc-qty-minus:hover,
.mpc-qty-plus:hover { background: #ececec; color: #111; }
.mpc-qty-value {
	min-width: 34px;
	text-align: center;
	font-weight: 700;
	font-size: 0.9em;
}
.mpc-qty-note {
	display: block;
	font-size: 0.72em;
	color: #3a7d34;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.mpc-compare-error {
	min-height: 1.2em;
	font-size: 0.76em;
	color: #c0392b;
	text-align: center;
	margin-top: 4px;
}

@media (max-width: 780px) {
	.mpc-compare-table {
		grid-template-columns: 120px repeat(var(--mpc-cols, 2), minmax(140px, 1fr));
	}
	.mpc-modal-dialog { padding: 20px 14px; }
	.mpc-compare-table { overflow-x: auto; }
}

@media (max-width: 480px) {
	.mpc-bar-inner { padding: 10px 14px; }
	.mpc-bar-count-label { display: none; }
}