/* SP Cadouri în Coș — stiluri frontend
   Totul e prefixat cu .spg- ca să nu atingem nimic din temă.
   Culoarea de accent vine ca variabilă din setări. */

:root {
	--spg-accent: #c0392b;
	/* Rescrisă din PHP, derivată din accent. Valoarea de aici e doar plasa de
	   siguranță pentru cazul în care accentul din setări nu e un hex valid. */
	--spg-accent-soft: rgba(192, 57, 43, 0.07);
	--spg-radius: 10px;

	/* Bara de transport. Rescrise din PHP; valorile de aici sunt plasa de
	   siguranță pentru cazul în care culoarea din setări nu e un hex valid. */
	--spg-ship: #111111;
	--spg-ship-ink: #ffffff;
	--spg-ship-track: rgba(255, 255, 255, 0.22);
}

/* ── Anunțurile din minicart: cadouri și transport gratuit ────────────────
   Aceeași formă ca anunțul de colaborator B2B de pe checkout (plugin-ul Google
   Ads Profit, `.gap-collab-prompt`): card gri deschis, chenar subțire, dungă de
   accent în stânga, text la stânga, pastilă la dreapta.

   Măsurat pe checkout: fundal #fafafa, chenar 1px #e0e0e0, dungă stângă 4px,
   colț 8px, padding 14px/18px, text 15px, pastilă 15px/600 cu colț de 6px.
   Aici totul e scalat pentru un panou de ~340px, restul e identic.

   Culorile stau în variabile: dunga și pastila iau `--spg-accent` la cadouri și
   `--spg-ship` la transport, deci se schimbă din setări fără să se atingă
   structura.

   Selectorii sunt „grăsuți" intenționat (`.widget_shopping_cart_content
   button…`): anunțul de cadouri e un <button>, iar temele WooCommerce
   stilizează butoanele agresiv. Rey îi lua fundalul, îi îngroșa și centra
   textul și îi punea padding-ul ei — se vedea ca un titlu cu buton, nu ca
   anunțul de dedesubt. Fiecare proprietate rescrisă mai jos e acolo din motivul
   ăsta, nu din exces. */

.spg-note,
.widget_shopping_cart_content button.spg-note,
.rey-cartPanel button.spg-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px solid #e0e0e0;
	border-left: 4px solid var(--spg-accent);
	border-radius: 8px;
	background: #fafafa;
	color: #484f56;
	font: inherit;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	min-height: 0;
	box-shadow: none;
}

button.spg-note {
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.widget_shopping_cart_content button.spg-note:hover,
.widget_shopping_cart_content button.spg-note:focus-visible {
	background: #f4f4f4;
	border-color: #d2d2d2;
	border-left-color: var(--spg-accent);
	color: #484f56;
}

.spg-note__body {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}

.spg-note__text {
	min-width: 0;
	font-weight: 400;
	text-align: left;
}

/* Nota de sub mesaj: ce nu intră la numărătoare. Mai mică, mai ștearsă — e o
   precizare, nu promisiunea, și nu are voie să concureze cu mesajul de
   deasupra. Fără ea, un coș cu trei accesorii pare o bară stricată. */

.spg-note__hint {
	font-size: 10.5px;
	line-height: 1.3;
	color: #9a9a9a;
}

.spg-note__text strong,
.spg-note__text b {
	font-weight: 700;
}

/* Pastila de acțiune a anunțului de cadouri. Indicatorul de la transport NU o
   mai imită (vezi mai jos): păstrează doar lățimea și coloana, ca anunțurile să
   rămână aliniate unul sub altul. */

.spg-note__cta,
.widget_shopping_cart_content button.spg-note .spg-note__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 6px;
	width: 76px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--spg-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.spg-note__arrow {
	display: block;
	width: 6px;
	height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* Deblocare nouă: același card, dar textul se îngroașă. Un anunț care se
   colorează altfel ar fi al treilea limbaj în același panou; îngroșarea spune
   „citește asta acum" fără să inventeze o culoare nouă. */

.spg-note--gift.is-upgrade .spg-note__text {
	font-weight: 700;
	color: #2f3438;
}

/* ── Transportul gratuit ─────────────────────────────────────────────────── */

.spg-note--ship {
	border-left-color: var(--spg-ship);
}

/* Indicatorul de progres: segmente subțiri, nu pastilă plină.

   Pastila umplută pe jumătate avea exact silueta butonului de deasupra și
   clienții încercau s-o apese. Când forma și înțelesul se ceartă, câștigă
   forma. Liniuțele nu seamănă cu niciun buton din magazin și spun singure cât a
   mai rămas: trei liniuțe, una plină, adică 1 din 3 — fără contorul 2/3, scos
   fiindcă mânca lățimea mesajului. */

.spg-note__meter {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	width: 76px;
	height: 30px;
}

.spg-note__seg {
	flex: 1 1 0;
	height: 6px;
	border-radius: 99px;
	background: #dedede;
	transition: background-color 0.35s;
}

.spg-note__seg.is-on {
	background: var(--spg-ship);
}

/* Peste 6 praguri, segmentele ar fi prea înguste ca să se distingă: acolo, o
   linie continuă umplută procentual. */

.spg-note__meter--bar .spg-note__seg {
	position: relative;
	overflow: hidden;
}

.spg-note__segFill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background: var(--spg-ship);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Atins ≠ altă formă: cardul rămâne identic, se schimbă doar paharul. Un card
   care se recolorează la final ar fi al doilea anunț, nu același anunț ajuns la
   capăt. */

.spg-note--ship.is-done {
	background: #fafafa;
	border-color: #e0e0e0;
	border-left-color: var(--spg-ship);
	color: #484f56;
}

@media (max-width: 600px) {
	.spg-note {
		padding: 9px 11px;
		font-size: 12px;
	}

	.spg-note__cta,
	.widget_shopping_cart_content button.spg-note .spg-note__cta,
	.spg-note__meter {
		width: 68px;
		height: 28px;
	}
}

/* ── Panoul de cadouri ─────────────────────────────────────────────────── */

.spg-panel {
	border: 1px solid #e6e6e6;
	border-radius: var(--spg-radius);
	padding: 11px;
	margin: 12px 0;
	background: #fff;
	position: relative;
}

.spg-panel--unlocked {
	border-color: var(--spg-accent);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}

.spg-panel--locked {
	background: #fafafa;
}

/* Eticheta de deasupra produselor deblocate și rândul de teasing de deasupra
   fiecărui produs blocat. Două voci diferite: una spune ce ai, alta ce urmează,
   deci nu au voie să arate la fel. */

.spg-panel__lead {
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--spg-accent);
}

.spg-tease {
	margin: 8px 0 5px;
	font-size: 11.5px;
	line-height: 1.35;
	color: #8a8a8a;
}

.spg-tease del,
.spg-tease .woocommerce-Price-amount {
	color: inherit;
	font-weight: 600;
}

/* Progres către nivelul următor */

.spg-prog {
	margin: 10px 0 4px;
}

.spg-prog__track {
	height: 6px;
	background: #eee;
	border-radius: 99px;
	overflow: hidden;
}

.spg-prog__fill {
	height: 100%;
	background: var(--spg-accent);
	border-radius: 99px;
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Produsul oferit — unul singur, pe toată lățimea.
   Într-un panou lateral de ~340px, două carduri pe rând lasă numele produsului
   tăiat după trei cuvinte, adică exact informația pentru care există cardul. */

.spg-offers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

/* Trei coloane: poză · nume · acțiune.
   Grid, nu flex: coloanele laterale au lățime fixă și egală, deci iconița stă
   exact sub aceeași verticală indiferent cât de lung e numele, iar coloana din
   mijloc primește tot restul. Cu flex, un nume scurt lăsa iconița să migreze.

   Aproape fiecare proprietate de mai jos e rescrisă explicit pentru că elementul
   e un <button>, iar temele WooCommerce stilează butoanele agresiv: Rey îi dădea
   `text-align:center`, altă înălțime minimă și un fundal propriu. Un card care
   arată bine doar pe tema curentă nu e terminat. */

.spg-panel .spg-offer {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 10px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 7px 8px;
	border: 1px solid #e0e0e0;
	border-radius: var(--spg-radius);
	background: #fff;
	cursor: pointer;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	font: inherit;
	line-height: 1.35;
	color: inherit;
	min-height: 0;
	box-shadow: none;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.spg-panel .spg-offer:hover,
.spg-panel .spg-offer:focus-visible {
	border-color: var(--spg-accent);
	background: #fff;
	color: inherit;
}

.spg-panel .spg-offer.is-selected {
	border-color: var(--spg-accent);
	box-shadow: inset 0 0 0 1px var(--spg-accent);
	background: var(--spg-accent-soft);
}

/* Upgrade: clientul a urcat un nivel și cardul e o invitație la schimb, nu
   confirmarea a ceva ce are deja. Trebuie să ceară clicul. */

.spg-panel .spg-offer--upgrade {
	border-color: var(--spg-accent);
	background: var(--spg-accent-soft);
}

/* Modul cumulat: rândul neluat încă e tot o invitație, dar la ADĂUGARE, nu la
   schimb. Aceeași chemare vizuală, fiindcă e la fel de important să fie apăsat;
   diferența o face textul de pe pastilă („ADAUGĂ ÎN PLUS"), nu culoarea —
   două nuanțe apropiate n-ar fi spus nimănui care e care. */

.spg-panel .spg-offer--plus {
	border-color: var(--spg-accent);
	background: var(--spg-accent-soft);
}

/* Teaser: același card, dar e o promisiune, nu un buton. */

.spg-panel .spg-offer--teaser {
	cursor: default;
	border-style: dashed;
	background: #fff;
}

.spg-panel .spg-offer--teaser:hover {
	border-color: #e0e0e0;
}

/* Coloana 1 — poza, în propriul ei chenar.
   Fără cadrul ăsta, o poză pe fundal alb (cum sunt aproape toate pozele de
   produs) se lipea vizual de marginea cardului și colțul rotunjit dispărea. */

.spg-panel .spg-offer__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 3px;
	box-sizing: border-box;
	border: 1px solid #ececec;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}

.spg-panel .spg-offer__media img,
.spg-panel .spg-offer__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	margin: 0;
	border-radius: 2px;
}

.spg-panel .spg-offer__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	text-align: left;
}

/* Coloana 3 — acțiunea, la aceeași mărime cu poza. */

.spg-panel .spg-offer__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #c4c4c4;
	transition: color 0.15s;
}

.spg-panel .spg-offer__icon {
	width: 20px;
	height: 20px;
	display: block;
}

.spg-panel .spg-offer:hover .spg-offer__mark,
.spg-panel .spg-offer--upgrade .spg-offer__mark,
.spg-panel .spg-offer.is-selected .spg-offer__mark {
	color: var(--spg-accent);
}

.spg-panel .spg-offer--teaser .spg-offer__mark {
	color: #d0d0d0;
}


/* ── Tabul „CADOURI" din minicart ──────────────────────────────────────────
   Tema are deja tabs în panoul de coș („COȘUL MEU" / „VIZUALIZATE RECENT").
   Cardul de gratuități stă în al treilea, injectat de spg.js: primește toată
   înălțimea panoului și derulează singur, iar tabul de coș rămâne exact cum
   l-a făcut tema — fără să-i stricăm scroll-ul, cum s-a întâmplat când am
   încercat să înghesuim totul într-o singură coloană.

   Aici stilizăm doar ce adăugăm noi. Clasele temei (`__tab`, `__tab-content`,
   `--active`) rămân ale ei; noi le folosim, nu le redefinim. */

.rey-cartPanel .__tab-content.spg-tab {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 4px 0 20px;
}

/* Cardul, în tabul lui, n-are nevoie de chenar: chenarul e panoul însuși. */

.rey-cartPanel .spg-tab .spg-panel {
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	background: transparent;
}

/* Săgeata din pastila de cadouri. */

.spg-note__arrow {
	display: block;
	width: 6px;
	height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* Butonul: dreptunghi negru, majuscule — exact „ADAUGĂ ÎN COȘ" de pe listele de
   produse ale magazinului, doar mai mic, fiindcă rândul e mai mic.

   Valorile vin din tema activă (Rey), citite din butonul real: #282a30, 600,
   0.5px spațiere, colț de 2px. Litera NU e fixată aici — `font-family: inherit`
   ia fontul temei, deci butonul rămâne al magazinului chiar dacă tema se
   schimbă. Un buton desenat de noi ar fi arătat a plugin lipit peste site. */

.spg-panel .spg-offer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 7px 10px;
	border-radius: 2px;
	background: #282a30;
	color: #fff;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background-color 0.15s, color 0.15s;
}

.spg-panel .spg-offer:hover .spg-offer__cta,
.spg-panel .spg-offer:focus-visible .spg-offer__cta {
	background: #000;
}

/* „Este în coș" nu e o acțiune, e o stare: nu are voie să arate ca un buton pe
   care mai e ceva de apăsat. Rămâne conturul, dispare fundalul plin. */

.spg-panel .spg-offer__cta--added {
	background: transparent;
	color: var(--spg-accent);
	box-shadow: inset 0 0 0 1px currentColor;
}

.spg-panel .spg-offer:hover .spg-offer__cta--added {
	background: transparent;
	color: var(--spg-accent);
}

/* „Scoate din coș" (modul cumulat) e o acțiune, dar una de retragere: nu are
   voie să arate la fel de tentant ca „adaugă". Contur, ca starea „este în coș",
   dar în gri — și se aprinde abia la hover, când clientul chiar se uită la el. */

.spg-panel .spg-offer__cta--drop {
	background: transparent;
	color: #6b6f76;
	box-shadow: inset 0 0 0 1px currentColor;
}

.spg-panel .spg-offer:hover .spg-offer__cta--drop,
.spg-panel .spg-offer:focus-visible .spg-offer__cta--drop {
	background: transparent;
	color: #282a30;
}

/* Rândurile blocate: stinse de tot, ca ochiul să le citească drept „nu încă",
   nu drept „ceva stricat". Poza în tonuri de gri, restul la jumătate de
   contrast — dar numele produsului rămâne lizibil, fiindcă el e promisiunea. */

.spg-panel .spg-offer--teaser {
	background: #fcfcfc;
	border-color: #ececec;
}

.spg-panel .spg-offer--teaser .spg-offer__media img,
.spg-panel .spg-offer--teaser .spg-offer__img {
	filter: grayscale(1);
	opacity: 0.55;
}

.spg-panel .spg-offer--teaser .spg-offer__name {
	color: #7a7a7a;
}

.spg-panel .spg-offer--teaser .spg-offer__price {
	opacity: 0.6;
}

.spg-offer__name {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.spg-offer__price {
	font-size: 12px;
	display: flex;
	gap: 6px;
	align-items: baseline;
}

.spg-offer__price del {
	color: #999;
	text-decoration: line-through;
}

.spg-offer__price ins {
	color: var(--spg-accent);
	font-weight: 700;
	text-decoration: none;
}

.spg-remove {
	margin-top: 10px;
	background: none;
	border: none;
	color: #888;
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

.spg-empty {
	font-size: 12.5px;
	color: #777;
	margin: 0;
}

/* Stare de încărcare */

.spg-panel.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

/* ── Marcaje în coș / minicart ─────────────────────────────────────────── */

/* Aici era `.spg-badge`, eticheta „🎁 GRATUIT" de sub numele produsului. A fost
   scoasă: spunea a doua oară ce spune coloana de preț de alături. */

.spg-free {
	color: var(--spg-accent);
	font-weight: 700;
	text-decoration: none;
	background: none;
}

.spg-old {
	color: #999;
}

/* ── Mesaj scurt (toast) ───────────────────────────────────────────────── */

.spg-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(12px);
	background: #111;
	color: #fff;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 13px;
	z-index: 99999;
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
	max-width: 90vw;
	text-align: center;
}

.spg-toast.is-on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.spg-toast--err {
	background: #a93226;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Suportul cardului sub sumarul comenzii (checkout cu plata în coloana stângă).
   Vezi checkoutPlace() din spg.js: suportul stă în afara zonei re-randate, deci
   are nevoie de propriul spațiu față de totaluri.
   ────────────────────────────────────────────────────────────────────────── */
.spg-checkout-slot {
	margin-top: 20px;
}

.spg-checkout-slot:empty {
	margin-top: 0;
}

/* ── Mesajele plugin-ului, în capul cardului ──────────────────────────────────
   Stau deasupra panoului, nu ca notice de temă: sertarul de minicart nu
   tipărește notice-uri WooCommerce, iar pe tema asta sertarul e practic
   singurul coș pe care îl vede clientul. Vezi SPG_Cart::notice().

   Blocul se randează și când cardul nu se randează deloc (coș fără produse
   plătite), deci are marginile lui și nu se sprijină pe panou. */
.spg-msgs {
	margin: 0 0 10px;
}

.spg-msg {
	margin: 0 0 6px;
	padding: 9px 11px;
	border-left: 4px solid var(--spg-accent);
	border-radius: var(--spg-radius);
	background: var(--spg-accent-soft);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #333;
}

.spg-msg:last-child {
	margin-bottom: 0;
}

.spg-msg a {
	color: var(--spg-accent);
	text-decoration: underline;
}


/* ── Semnul de mod verificare ───────────────────────────────────────────────
   Apare doar cât modul e pornit, și doar celor care au voie să vadă cardul —
   adică nimănui în trafic normal. Deliberat urât: e o etichetă de lucru, nu o
   parte din ofertă, și trebuie să fie imposibil de confundat cu ea sau de uitat
   pe un site pornit pentru clienți. */

.spg-preview-flag {
	margin: 0 0 10px;
	padding: 5px 9px;
	border: 1px dashed #b7791f;
	border-radius: 6px;
	background: #fdf6e7;
	color: #8a5d12;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}