/**
 * PrintBox custom: Upload Sheet v3 — panoul de upload-zone ca foaie de jos
 * (mobil) / card centrat (desktop). 100% CSS — FĂRĂ JavaScript.
 *
 * ⚠ Lecții din v1/v2 (ambele înghețau renderer-ul pe staging):
 *  - panoul FPD e componentă web care își RECONCILIAZĂ copiii → orice DOM
 *    injectat de noi (cap, backdrop) era șters de FPD, observerul nostru îl
 *    re-adăuga → ping-pong infinit. De aceea v3 nu injectează NIMIC:
 *    mânerul = ::before pe panou, fundalul întunecat = ::after pe panou,
 *    titlul = ::before pe .fpd-upload-image;
 *  - textele (titlu/buton/rând) vin din variabile CSS (--pbx-sheet-*)
 *    injectate din PHP (wp_add_inline_style) — fără lupte pe DOM;
 *  - grila FPD (.fpd-photo-grid) NU se suprascrie (JS-ul FPD o dimensionează).
 * Documentație: UPLOAD-SHEET-README.md
 */

/* ——— Garda anti-flash la inițializarea designerului ———
   Simptom: la deschiderea designerului, panoul modulului „Adaugă Text" apărea
   vizibil ~1 secundă, apoi dispărea singur.
   Cauza (măsurată pe staging cu sampler pe cadre): FPD inițializează designerul
   la încărcarea paginii de produs (cât e ascuns) și lasă starea
   `fpd-module-visible` APRINSĂ pe container. Când clientul apasă
   „Personalizează Produsul", containerul devine vizibil cu starea aia încă
   aprinsă → panoul de text e afișat până când FPD îl închide singur, la primul
   element adăugat (măsurat: vizibil de la +35 ms după click până la +1,16 s).
   Ancoră sigură = LOADERUL FPD: cât timp `.fpd-loader-wrapper` NU are
   `.fpd-hidden`, designerul e încă în încărcare, deci un panou de modul vizibil
   NU poate veni de la client. Fereastra de flash e complet acoperită: FPD
   ascunde panoul la +1,16 s și abia la +1,25 s ascunde loaderul.
   Ascundem doar VIZUAL (visibility/opacity, nu display) — FPD măsoară elementul.
   După încărcare garda e inactivă → „Adaugă Text" apăsat de client se deschide
   instant (măsurat: 10 ms = următorul cadru).
   ⚠ De ce NU animație CSS (varianta încercată și RETRACTATĂ pe 2026-08-01):
   animațiile repornesc la fiecare tranziție display:none→block, deci întârziau
   cu ~2s ȘI deschiderile manuale, nu doar init-ul.
   Foaia de upload NU e atinsă: trăiește în `.fpd-secondary-content`, frate cu
   `.fpd-module-content`. */
@media (max-width: 767px) {
	.fpd-container:has(> .fpd-loader-wrapper:not(.fpd-hidden)) fpd-main-bar > .fpd-module-content {
		visibility: hidden !important;
		opacity: 0 !important;
	}
}

/* ——— Foaia (mobil, implicit) ——— */
.fpd-upload-zone-panel.fpd-active {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	width: auto !important;
	height: 56vh !important;
	max-height: 56vh;
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	background: #fff !important;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
	padding: 22px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	z-index: 10;
}

/* Lanțul flex până la grilă: pozele derulează ÎN foaie, nu cresc foaia. */
.fpd-upload-zone-panel.fpd-active .fpd-upload-zone-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.fpd-upload-zone-panel.fpd-active fpd-module-uploads .fpd-scroll-area {
	flex: 1 1 auto;
	min-height: 0;
	height: auto !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}

/* Tabloul rămâne VIZIBIL în spatele foii: pe layout-ul sidebar, fpd-main-bar
   (fundal alb) acoperă scena cât timp panoul e deschis — îl facem transparent
   DOAR atunci; pânza produsului apare în spate, întunecată de fundalul foii. */
.fpd-container.fpd-secondary-visible:has(.fpd-upload-zone-panel.fpd-active) fpd-main-bar {
	background: transparent !important;
}

/* Închiderea nativă: X-ul din fpd-main-bar (cel făcut vizibil de CSS-ul userului
   din UI Composer, pentru panoul vechi full-screen). Pe mobil, cât timp foaia e
   deschisă, îl reașezăm ca buton rotund centrat pe buza foii — în locul
   „mânerului" (decizie user). Clickul rămâne al FPD-ului → închidere nativă. */
@media (max-width: 767px) {
	.fpd-container.fpd-secondary-visible:has(.fpd-upload-zone-panel.fpd-active) fpd-main-bar > .fpd-close {
		position: fixed !important;
		left: 50% !important;
		right: auto !important;
		top: calc(44vh - 15px) !important;
		transform: translateX(-50%);
		width: 30px !important;
		height: 30px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #fff !important;
		border: 1px solid #e9e9ee;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
		cursor: pointer;
		z-index: 11;
	}
	.fpd-container.fpd-secondary-visible:has(.fpd-upload-zone-panel.fpd-active) fpd-main-bar > .fpd-close .fpd-icon-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-size: 13px;
		line-height: 1 !important;
		color: #52525b;
	}
	.fpd-container.fpd-secondary-visible:has(.fpd-upload-zone-panel.fpd-active) fpd-main-bar > .fpd-close .fpd-icon-close::before {
		line-height: 1 !important;
	}
}

/* Fundalul întunecat peste pânză: pe fpd-main-bar::before (panoul e deasupra
   lui natural — FĂRĂ z-index negativ, care pe Safari/telefon ajungea PESTE
   foaie și o făcea gri). Scopat pe starea reală: .fpd-secondary-visible apare
   pe container doar cât timp panoul e deschis (dispare la închidere).
   Primește clickurile → comportament modal, ca panoul original. */
.fpd-container.fpd-secondary-visible:has(.fpd-upload-zone-panel.fpd-active) fpd-main-bar::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(24, 24, 27, 0.38);
}

/* Butonul nativ de închidere al panoului (FPD îl ascunde pe unele layout-uri) —
   îl repunem în colțul foii; click-ul rămâne al FPD-ului (închidere nativă). */
.fpd-upload-zone-panel.fpd-active .fpd-back {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f4f4f5;
	color: #52525b;
	cursor: pointer;
	z-index: 2;
}
.fpd-upload-zone-panel.fpd-active .fpd-back .fpd-icon-back {
	font-size: 14px;
	line-height: 1;
}

/* Pe mobil, tabul „QR-code" (upload de pe telefon) e inutil — clientul E pe
   telefon. Îl ascundem sub 768px; bara rămâne pentru cazul cu ≥2 module vizibile. */
@media (max-width: 767px) {
	.fpd-upload-zone-panel.fpd-active .fpd-module-tabs > div[data-context="qr-code"] {
		display: none;
	}
}

/* Bara de taburi de module: ascunsă doar când are UN singur modul vizibil
   (după regula de mai sus, pe mobil rămâne doar Uploads → bara dispare). */
.fpd-upload-zone-panel.fpd-active .fpd-module-tabs:not(:has(> div:not(.fpd-hidden):not([data-context="qr-code"]) ~ div:not(.fpd-hidden):not([data-context="qr-code"]))) {
	display: none;
}
@media (min-width: 768px) {
	.fpd-upload-zone-panel.fpd-active .fpd-module-tabs:has(> div[data-context="qr-code"]:not(.fpd-hidden)) {
		display: flex;
	}
}

/* ——— Semnalul „mai sunt poze dedesubt" ———
   Clientul nu vedea că grila derulează (foaia se termină fix la marginea telefonului).
   Clasele vin din assets/js/fpd-upload-sheet-scroll.js și stau pe CONTAINER, nu în panou:
     · pbx-photos-more     = mai e conținut sub marginea foii (dispare când ajunge jos);
     · pbx-photos-scrolled = clientul a derulat deja măcar o dată în deschiderea curentă.
   Ambele indicii sunt pseudo-elemente ale panoului — zero DOM injectat. */
.fpd-container.pbx-photos-more .fpd-upload-zone-panel.fpd-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 64px;
	background: linear-gradient(to top, #fff 34%, rgba(255, 255, 255, 0));
	pointer-events: none;
	z-index: 1;
}

/* Pastila de îndrumare: doar până la prima derulare, ca să nu devină zgomot. */
.fpd-container.pbx-photos-more:not(.pbx-photos-scrolled) .fpd-upload-zone-panel.fpd-active::before {
	content: var(--pbx-sheet-scroll, '↓ Derulează pentru toate pozele');
	position: absolute;
	left: 50%;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 2;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(24, 24, 27, 0.82);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

/* ——— Titlul foii + zona de upload ——— */
.fpd-upload-zone-panel.fpd-active .fpd-upload-image {
	display: flex;
	flex-direction: column;
	border: 0 !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
	cursor: pointer;
}
.fpd-upload-zone-panel.fpd-active .fpd-upload-image::before {
	content: var(--pbx-sheet-title, 'Pozele tale');
	display: block;
	order: 0;
	font-size: 15px;
	font-weight: 700;
	color: #18181b;
	text-align: left;
	margin: 0 0 10px;
}

/* Butonul devine eroul: textul original e ascuns, eticheta vine din variabilă */
.fpd-upload-zone-panel.fpd-active .fpd-upload-image .fpd-btn {
	order: 1;
	display: block;
	background: #27ae60 !important;
	color: #fff !important;
	border-radius: 10px;
	padding: 13px 14px;
	font-size: 0 !important;
	line-height: 0 !important;
	text-align: center;
	letter-spacing: 0 !important;
	margin: 0 0 6px !important;
}
.fpd-upload-zone-panel.fpd-active .fpd-upload-image .fpd-btn::after {
	content: var(--pbx-sheet-btn, 'Alege poza de pe telefon');
	font-size: 14px;
	line-height: 1.3;
	font-weight: 600;
	color: #fff;
	text-transform: none;
}
.fpd-upload-zone-panel.fpd-active .fpd-upload-image .fpd-btn:hover {
	background: #219150 !important;
}

/* Mesajul lung devine rândul mic de lămurire, cu textul din variabilă */
.fpd-upload-zone-panel.fpd-active .fpd-upload-image > span:not(.fpd-btn):not(.fpd-price) {
	order: 2;
	font-size: 0 !important;
	line-height: 0 !important;
	text-align: center;
	margin: 0 !important;
	letter-spacing: 0 !important;
}
.fpd-upload-zone-panel.fpd-active .fpd-upload-image > span:not(.fpd-btn):not(.fpd-price)::after {
	content: var(--pbx-sheet-hint, 'Din galerie sau direct cu camera');
	font-size: 11.5px;
	line-height: 1.4;
	color: #71717a;
	text-transform: none;
}

/* ——— Desktop: card centrat în loc de foaie ——— */
@media (min-width: 768px) {

	/* Textul butonului are variantă separată pe desktop („Încarcă o poză" în loc de
	   „Alege poza de pe telefon"). PHP-ul emite --pbx-sheet-btn-desktop DOAR dacă a fost
	   completat câmpul; altfel rămâne textul de mobil (var() ia fallback-ul numai când
	   variabila NU e definită, nu și când e string gol). */
	.fpd-upload-zone-panel.fpd-active .fpd-upload-image .fpd-btn::after {
		content: var(--pbx-sheet-btn-desktop, var(--pbx-sheet-btn, 'Încarcă o poză'));
	}

	.fpd-upload-zone-panel.fpd-active {
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		top: 50% !important;
		transform: translate(-50%, -50%);
		width: 420px !important;
		max-height: 70vh;
		border-radius: 14px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	}
}