/* ==========================================================================
   DiagPro — Favorite (/favorite/) și inimile de pe carduri/produs.
   ZONĂ PROPRIE: perechea acestui fișier e mu-plugins/diagpro-favorite.php.
   Prefix de clase: `.dpfv-`.

   ⚠️ Tema încarcă TOATE fișierele din css/ pe TOATE paginile (glob, prioritate 30).
   De aceea fiecare regulă de aici e legată fie de `.dpfv-…` (markup-ul meu), fie de
   `body.dpfv-pagina` (doar pagina de favorite), fie de butoanele inimă ale extensiei
   — nimic altceva. Alfabetic, `favorite.css` intră după `fbt.css` și înainte de
   `footer.css`; la specificitate egală câștigă ultimul încărcat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Starea goală
   Valorile sunt cele ale coșului gol (`.dpc-gol` din cos.css) — e tiparul deja
   aprobat pentru „pagină fără nimic în ea"; două pagini goale care arată diferit
   ar părea două site-uri.
   -------------------------------------------------------------------------- */

.dpfv-gol {
	max-width: 1280px;
	margin: 0 auto;
	/* Sus doar 24px: titlul „Favorite" e deja deasupra, în antetul paginii, cu spațiul lui.
	   (La coșul gol sunt 60px fiindcă acolo antetul e ascuns și blocul e tot ce există.) */
	padding: 24px 32px 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.dpfv-gol-ico {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: #eef3fb;
	display: flex;
	align-items: center;
	justify-content: center;
	color: oklch(0.5 0.15 260);
	flex: none;
}
.dpfv-gol-ico svg { display: block; fill: currentColor; }

/* `<p>`, nu `<h1>`: titlul paginii e deja `<h1>` în antetul temei. */
.dpfv-gol-t {
	margin: 0;
	padding: 0;
	font-size: 26px;
	font-weight: 800;
	color: #16233d;
	line-height: 1.25;
}
.dpfv-gol-p {
	margin: 0;
	font-size: 14.5px;
	color: #4a5568;
	max-width: 46ch;
}
.dpfv-gol-n {
	margin: 6px 0 0;
	font-size: 13px;
	color: #8b97a8;
	max-width: 50ch;
}

.dpfv .dpfv-gol-b {
	background: oklch(0.5 0.15 260);
	color: #ffffff !important;
	font-weight: 700;
	font-size: 14.5px;
	padding: 13px 26px;
	border-radius: 10px;
	margin-top: 6px;
	text-decoration: none;
	display: inline-block;
	min-height: 44px;
	line-height: 18px;
	transition: background 0.12s linear;
}
.dpfv .dpfv-gol-b:hover,
.dpfv .dpfv-gol-b:focus-visible { background: oklch(0.43 0.15 260); color: #ffffff !important; }

/* Titlul paginii se centrează, ca să facă un singur bloc cu textul de dedesubt. */
body.dpfv-pagina .hero-section .entry-header { text-align: center; }

/* --------------------------------------------------------------------------
   2. Tabelul cu produse salvate (când lista NU e goală)
   Blocksy ascunde sub 1000px coloanele „acțiuni" și „scoate" și mută butoanele
   în `.product-mobile-actions`, sub numele produsului. Aici doar îmbrăcăm.
   -------------------------------------------------------------------------- */

body.dpfv-pagina .ct-woocommerce-wishlist-table { margin-top: 8px; }

body.dpfv-pagina .ct-woocommerce-wishlist-table .shop_table {
	border: 1px solid #e3e8f0;
	border-radius: 12px;
	overflow: hidden;
}
body.dpfv-pagina .ct-woocommerce-wishlist-table thead th {
	background: #f2f5fa;
	color: #16233d;
	font-size: 13px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}
body.dpfv-pagina .wishlist-product-name > a {
	color: #16233d;
	font-weight: 700;
	text-decoration: none;
}
body.dpfv-pagina .wishlist-product-name > a:hover { color: oklch(0.5 0.15 260); }

/* ⭐ Coșul de gunoi care scoate produsul din listă venea 22×12px — se nimerea greu și cu
   mausul, darămite cu degetul. Îl ducem la 44px fără să mărim desenul: crește doar
   suprafața din jurul lui. */
body.dpfv-pagina .product-mobile-actions { align-items: center; gap: 6px; }

body.dpfv-pagina .product-mobile-actions > .remove,
body.dpfv-pagina .wishlist-product-remove > .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	color: #8b97a8;
	flex: none;
	transition: color 0.12s linear, background 0.12s linear;
}
body.dpfv-pagina .product-mobile-actions > .remove svg,
body.dpfv-pagina .wishlist-product-remove > .remove svg { width: 15px; height: 15px; }

body.dpfv-pagina .product-mobile-actions > .remove:hover,
body.dpfv-pagina .product-mobile-actions > .remove:focus-visible,
body.dpfv-pagina .wishlist-product-remove > .remove:hover,
body.dpfv-pagina .wishlist-product-remove > .remove:focus-visible {
	color: #c24a3f;
	background: #fdf4f3;
}

/* --------------------------------------------------------------------------
   3. Inima de pe cardul de produs (listări) și de pe pagina de produs
   Markup-ul e al extensiei; culoarea și zona de atins sunt ale noastre.
   -------------------------------------------------------------------------- */

/* Inima „plină" apare doar în starea activă (regula extensiei) — îi dăm roșul mărcii. */
[class*="ct-wishlist-button"][data-button-state="active"] { color: #c24a3f; }
[class*="ct-wishlist-button"][data-button-state="active"] .ct-heart-fill { fill: #c24a3f; }

[class*="ct-wishlist-button"]:hover,
[class*="ct-wishlist-button"]:focus-visible { color: #c24a3f; }

/* ⭐ Pe cardurile din listări, tema umple cercul cu albastrul de buton și lasă inima albă
   atât la hover, cât și în starea „salvat" (`.ct-woo-card-extra .ct-button:is(:hover,
   [data-button-state="active"])`). Arată ca un buton apăsat, nu ca un produs pus deoparte
   — și e exact aceeași înfățișare pentru „treci cu mausul" și pentru „l-ai salvat", adică
   două lucruri diferite spuse la fel. Îl întoarcem: cerc alb, inimă roșie. */
.ct-woo-card-extra[data-type="type-1"] .ct-button[class*="ct-wishlist-button"]:hover,
.ct-woo-card-extra[data-type="type-1"] .ct-button[class*="ct-wishlist-button"][data-button-state="active"] {
	background: #ffffff;
	color: #c24a3f;
}

/* --------------------------------------------------------------------------
   4. Mobil (pragul fundației: 767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* --- starea goală ------------------------------------------------------ */
	.dpfv-gol { padding: 16px 16px 56px; }
	.dpfv-gol-t { font-size: 22px; }
	.dpfv-gol-p { font-size: 14px; }
	.dpfv-gol-n { font-size: 12.5px; }
	.dpfv-gol-ico { width: 64px; height: 64px; }
	.dpfv .dpfv-gol-b { width: 100%; max-width: 320px; padding: 14px 20px; }

	/* --- inima de pe pagina de produs -------------------------------------- */
	/* Sub 690px Blocksy ascunde eticheta (`.ct-hidden-sm` cu `display:none !important`)
	   și lasă doar inima de 14px: un simbol fără cuvânt, într-un loc unde nimic altceva
	   nu e doar simbol. O aducem înapoi și facem din tot ansamblul un buton conturat de
	   44px. `!important` e obligatoriu — se bate cu `!important`-ul temei, nu cu o
	   regulă obișnuită. */
	.ct-product-additional-actions [class*="ct-wishlist-button"] .ct-label.ct-hidden-sm { display: block !important; }
	.ct-product-additional-actions [class*="ct-wishlist-button"] .ct-tooltip { display: none !important; }

	.ct-product-additional-actions [class*="ct-wishlist-button"] {
		min-height: 44px;
		padding: 0 18px;
		gap: 8px;
		border: 1px solid #e3e8f0;
		border-radius: 10px;
		background: #ffffff;
		font-size: 14px;
		font-weight: 700;
		color: #4a5568;
		justify-content: center;
	}
	.ct-product-additional-actions [class*="ct-wishlist-button"][data-button-state="active"] {
		border-color: #c24a3f;
		background: #fdf4f3;
	}

	/* --- inima de pe cardurile din listări --------------------------------- */
	/* ⭐ Butonul are 32px, adică sub minimul de 44px cerut pentru deget. Nu umflăm
	   CERCUL — ar acoperi imaginea produsului și ar dezechilibra cardurile altui agent.
	   Umflăm butonul la 44px și îl facem transparent, iar cercul alb se mută pe span-ul
	   dinăuntru, la 36px. Vizual aproape neschimbat, degetul are 44px.
	   (Varianta „strat transparent din ::before" a fost încercată și MĂSURATĂ: pe un
	   `<button>`, Chrome nu ia în calcul la atingere ce iese din caseta butonului —
	   `elementFromPoint` returna imaginea. De-aia nu e aici.)

	   Marginea negativă de 4px readuce cercul exact unde era: butonul crește cu 12px
	   (32→44), cercul rămâne 36px ⇒ 4px de fiecare parte. Fără ea, distanța față de
	   colțul imaginii ar sări de la 15px la 19px. */
	.ct-woo-card-extra[data-type="type-1"] { margin: -4px -4px 0 0; }

	.ct-woo-card-extra[data-type="type-1"] .ct-button[class*="ct-wishlist-button"] {
		width: 44px;
		height: 44px;
		min-height: 44px;
		background: transparent;
	}
	.ct-woo-card-extra[data-type="type-1"] .ct-button[class*="ct-wishlist-button"] .ct-icon-container {
		width: 36px;
		height: 36px;
		border-radius: 100%;
		background: #ffffff;
	}
	/* Pe mobil cercul alb e span-ul dinăuntru ⇒ butonul rămâne transparent și în stările
	   în care, pe desktop, el poartă fundalul. */
	.ct-woo-card-extra[data-type="type-1"] .ct-button[class*="ct-wishlist-button"]:hover,
	.ct-woo-card-extra[data-type="type-1"] .ct-button[class*="ct-wishlist-button"][data-button-state="active"] {
		background: transparent;
	}
	.ct-woo-card-extra[data-type="type-1"] .ct-button[class*="ct-wishlist-button"] svg { width: 16px; height: 16px; }

	/* --- tabelul cu produse salvate ---------------------------------------- */
	/* Capul de tabel („Produs" / „Acțiuni") n-are ce spune când coloanele s-au strâns
	   într-una singură — Blocksy le ascunde sub 1000px oricum. */
	body.dpfv-pagina .ct-woocommerce-wishlist-table thead { display: none; }
	body.dpfv-pagina .ct-woocommerce-wishlist-table .shop_table { font-size: 14px; }
	body.dpfv-pagina .wishlist-product-name > a { font-size: 14px; line-height: 1.35; }

	/* Miniatura ajungea lipită de marginea ecranului (măsurat: x = 1px). */
	body.dpfv-pagina .ct-woocommerce-wishlist-table .shop_table { --table-padding: 1.1em 0.6em; }
	body.dpfv-pagina .wishlist-product-thumbnail { padding-left: 12px; }
}

/* --------------------------------------------------------------------------
   5. Foaia „Salvează-l în contul tău” (vizitator nelogat care apasă inima)
   Markup: #dpfv-foaie în diagpro-favorite.php (secțiunea 8). Pe mobil, rama —
   voal, colțuri 18px, tranziție, Escape — vine de-a gata din fundație
   (.dpm-foaie, css/mobil.css); aici doar conținutul. Pe desktop, fundația își
   ascunde foile cu !important (mecanism gândit pentru telefon), așa că mai jos
   repornim NUMAI foaia noastră, ca un card centrat.
   -------------------------------------------------------------------------- */

/* conținutul — comun mobil + desktop */
.dpfv-foaie-p {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.5;
	color: #4a5568;
}

.dpfv-foaie .dpfv-foaie-b {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	width: 100%;
	background: oklch(0.5 0.15 260);
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.12s linear;
}
.dpfv-foaie .dpfv-foaie-b:hover,
.dpfv-foaie .dpfv-foaie-b:focus-visible { background: oklch(0.43 0.15 260); color: #ffffff !important; }

.dpfv-foaie-nu {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	width: 100%;
	margin-top: 8px;
	border: 0;
	background: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	color: #5a6675;
	cursor: pointer;
}
.dpfv-foaie-nu:hover,
.dpfv-foaie-nu:focus-visible { background: #f2f5fa; }

/* Pe mobil fundația ascunde foaia închisă DOAR împingând-o sub ecran (translateY 101%) —
   butoanele ei rămân în drumul lui Tab, iar capturile fullPage o desenează sub subsol.
   Foii noastre îi dăm și visibility, pe același ritm cu tranziția fundației. */
@media (max-width: 767px) {
	.dpm-foaie.dpfv-foaie {
		visibility: hidden;
		transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.22s;
	}
	.dpm-foaie.dpfv-foaie.dpm-deschis { visibility: visible; }
}

/* desktop: aceeași foaie, dar card centrat */
@media (min-width: 768px) {

	/* ⭐ mobil.css stinge pe desktop .dpm-foaie/.dpm-voal cu `display:none !important`
	   (o clasă). Regulile de aici au DOUĂ clase: la !important egal, specificitatea
	   mai mare câștigă, indiferent că favorite.css se încarcă înaintea lui mobil.css. */
	.dpm-foaie.dpfv-foaie {
		display: block !important;
		position: fixed;
		left: 50%;
		top: 50%;
		right: auto;
		bottom: auto;
		transform: translate(-50%, -46%);
		width: min(400px, calc(100vw - 48px));
		background: #ffffff;
		border-radius: 14px;
		padding: 20px 24px 24px;
		box-shadow: 0 24px 64px rgba(19, 26, 38, 0.35);
		z-index: 90;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
	}
	.dpm-foaie.dpfv-foaie.dpm-deschis {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, -50%);
	}

	/* Rama foii (cap, titlu, ×) există în fundație doar sub 768px — pe desktop o dăm noi. */
	.dpm-foaie.dpfv-foaie .dpm-foaie-cap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 0 10px;
	}
	.dpm-foaie.dpfv-foaie .dpm-foaie-cap h3 { margin: 0; font-size: 18px; font-weight: 800; color: #16233d; }
	.dpm-foaie.dpfv-foaie .dpm-inchide {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: -10px -12px -10px 0;
		border: 0;
		background: none;
		border-radius: 10px;
		color: #5a6675;
		cursor: pointer;
	}
	.dpm-foaie.dpfv-foaie .dpm-inchide:hover { background: #f2f5fa; }

	/* Voalul fundației e tot doar mobil — pe desktop îl aprindem NUMAI cât e deschisă
	   foaia NOASTRĂ (alte foi nu se deschid pe desktop, deci nu atingem nimic străin).
	   Tot de :has() e legată și oprirea derulării din spate. */
	html:has(.dpfv-foaie.dpm-deschis) .dpm-voal.dpm-deschis {
		display: block !important;
		position: fixed;
		inset: 0;
		z-index: 80;
		background: rgba(19, 26, 38, 0.5);
	}
	html:has(.dpfv-foaie.dpm-deschis) { overflow: hidden; }
}