/* ===========================================================================
   MOBIL — fundația comună (19.08.2026)
   Sursa de adevăr: machetele „DiagnozaPRO mobile design.zip" (design/mobil/).
   Aici stau DOAR lucrurile globale: jaloanele, bara de jos, clasele de lucru
   pe care le folosesc paginile, și corecțiile care privesc tot site-ul.

   ⛔ FIȘIER REZERVAT ORCHESTRATORULUI. Paginile își au fișierele lor
      (home.css, categorie.css, produs.css, cos.css, checkout.css, cont.css,
      blog.css, pagini.css, antet-mobil.css). Nu scrie aici din alt fișier de zonă.

   Prag: 767px. Sub el suntem „pe telefon"; între 768 și 999 rămâne
   comportamentul de tabletă pe care îl are deja tema.
   =========================================================================== */

:root {
	/* înălțimea barei de jos, calculată din machetă:
	   padding 8px sus + 44px conținut + 12px jos + 1px linie = 65px */
	--dpm-nav-h: 65px;
	--dpm-nav-total: calc(var(--dpm-nav-h) + env(safe-area-inset-bottom, 0px));

	/* jaloanele machetei mobile */
	--dpm-pad: 16px;          /* marginea laterală a ecranului */
	--dpm-gap: 12px;
	--dpm-radius: 12px;
	--dpm-radius-mic: 10px;
	--dpm-radius-sheet: 18px;
	--dpm-card-border: #E3E8F0;
	--dpm-card-bg: #FFFFFF;
	--dpm-tap: 44px;          /* zona minimă de atins */
}

/* ===========================================================================
   1. BARA DE JOS (bara de navigare a aplicației)
   Machetă: <nav position:fixed;bottom:0;…;display:grid;grid-template-columns:repeat(5,1fr);
             padding:8px 4px 12px;border-top:1px solid #e3e8f0>
   Apare pe 11 din cele 14 machete. Lipsește la Finalizare, Confirmare și Login —
   acolo pagina cere atenție întreagă și are propria bară de acțiune.
   =========================================================================== */

.dpm-nav { display: none; }

@media (max-width: 767px) {

	.dpm-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		background: #FFFFFF;
		border-top: 1px solid #E3E8F0;
		box-shadow: 0 -6px 18px rgba(22, 35, 61, 0.07);
		padding: 8px 4px calc(12px + env(safe-area-inset-bottom, 0px));
		margin: 0;
	}

	.dpm-nav a {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: var(--dpm-tap);
		color: #5A6675;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.dpm-nav a svg { width: 22px; height: 22px; display: block; }
	.dpm-nav a span { font-size: 10px; font-weight: 700; line-height: 1; }

	/* pagina curentă */
	.dpm-nav a.dpm-activ { color: var(--dp-blue); }
	.dpm-nav a.dpm-activ span { font-weight: 800; }

	/* insigna de pe coș — machetă: top:2px;right:22px;15×15;9px/800 */
	.dpm-nav .dpm-badge {
		position: absolute;
		top: 2px;
		right: 22px;
		min-width: 15px;
		height: 15px;
		padding: 0 3px;
		border-radius: 999px;
		background: var(--dp-red);
		color: #FFFFFF;
		font-size: 9px;
		font-weight: 800;
		line-height: 15px;
		text-align: center;
	}
	.dpm-nav .dpm-badge[hidden] { display: none; }

	/* corpul paginii lasă loc barei; paginile cu bară de acțiune adaugă
	   încă un rând prin .dpm-cu-bara (vezi §2) */
	body.dpm-are-nav { padding-bottom: var(--dpm-nav-total); }
	body.dpm-are-nav.dpm-cu-bara { padding-bottom: calc(var(--dpm-nav-total) + 66px); }
	/* paginile fără bară de jos, dar cu bară de acțiune (finalizare) */
	body.dpm-cu-bara:not(.dpm-are-nav) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

	/* ===================================================================
	   2. BARA DE ACȚIUNE (deasupra barei de jos)
	   Machetă (Coș, Produs): position:fixed;bottom:64px;padding:10px 16px;
	   display:flex;gap:10px;align-items:center;border-top:1px solid #e3e8f0
	   =================================================================== */

	.dpm-bara {
		position: fixed;
		bottom: var(--dpm-nav-total);
		left: 0;
		right: 0;
		z-index: 59;
		display: flex;
		gap: 10px;
		align-items: center;
		background: #FFFFFF;
		border-top: 1px solid #E3E8F0;
		padding: 10px var(--dpm-pad);
	}
	/* pe paginile fără bară de jos, bara de acțiune coboară la 0 */
	body:not(.dpm-are-nav) .dpm-bara {
		bottom: 0;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}

	.dpm-bara .dpm-bara-pret { flex: 0 0 auto; line-height: 1.15; }
	.dpm-bara .dpm-bara-buton { flex: 1 1 auto; }
	.dpm-bara .dpm-bara-buton .button,
	.dpm-bara .dpm-bara-buton button,
	.dpm-bara .dpm-bara-buton a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		border-radius: var(--dpm-radius-mic);
		font-size: 15px;
		font-weight: 700;
	}

	/* ===================================================================
	   3. FOAIA DE JOS (bottom sheet) — filtre, sortare, opțiuni
	   Machetă (Categorie): fundal rgba(19,26,38,0.5) + panou
	   border-radius:18px 18px 0 0; padding:18px 16px 24px; max-height:75vh
	   =================================================================== */

	.dpm-voal {
		position: fixed;
		inset: 0;
		z-index: 80;
		background: rgba(19, 26, 38, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.18s ease, visibility 0.18s ease;
	}
	.dpm-voal.dpm-deschis { opacity: 1; visibility: visible; }

	.dpm-foaie {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 90;
		background: #FFFFFF;
		border-radius: var(--dpm-radius-sheet) var(--dpm-radius-sheet) 0 0;
		padding: 18px var(--dpm-pad) calc(24px + env(safe-area-inset-bottom, 0px));
		max-height: 75vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateY(101%);
		transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	.dpm-foaie.dpm-deschis { transform: translateY(0); }

	.dpm-foaie-cap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 0 14px;
	}
	.dpm-foaie-cap h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--dp-navy); }
	.dpm-inchide {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--dpm-tap);
		height: var(--dpm-tap);
		margin: -10px -10px -10px 0;
		border: 0;
		background: none;
		color: #5A6675;
		cursor: pointer;
	}
	/* Cât timp e deschisă o foaie, pagina din spate nu se derulează.
	   ⚠️ Se cere de la AMÂNDOUĂ: de la `body` pentru cazul obișnuit, și de la `html`
	   pentru că sub `overflow-x: clip` (vezi §5) corpul nu mai e container de derulare,
	   deci un `overflow:hidden` pus doar pe el nu mai oprește nimic. */
	body.dpm-blocat { overflow: hidden; }
	html:has(body.dpm-blocat) { overflow: hidden; }

	/* ===================================================================
	   4. CLASE DE LUCRU, folosite de fișierele de zonă
	   =================================================================== */

	/* rând care se derulează pe orizontală (produse similare, mărci, recenzii) */
	.dpm-scroller {
		display: flex;
		gap: var(--dpm-gap);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		/* iese din marginea paginii ca primul card să înceapă la 16px
		   și ultimul să se termine tot la 16px */
		margin-inline: calc(var(--dpm-pad) * -1);
		padding-inline: var(--dpm-pad);
		padding-bottom: 2px;
		/* ⚠️ Fără asta, „snap"-ul oprește cardul lipit de marginea ecranului, sub
		   padding — arată ca și cum rândul ar fi tăiat. Semnalat de agentul PRODUS,
		   care întâlnise același lucru la rândul lui de produse similare. */
		scroll-padding-inline: var(--dpm-pad);
	}
	.dpm-scroller::-webkit-scrollbar { display: none; }
	.dpm-scroller > * { scroll-snap-align: start; flex: 0 0 auto; }

	/* pastilă (chip) — filtre, categorii de blog, căutări frecvente */
	.dpm-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 36px;
		padding: 7px 12px;
		border: 1px solid #CDD6E4;
		border-radius: 999px;
		background: #FFFFFF;
		color: #33415C;
		font-size: 12.5px;
		font-weight: 700;
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
	}
	.dpm-chip.dpm-chip-plin { background: var(--dp-navy); border-color: var(--dp-navy); color: #FFFFFF; }
	.dpm-chip.dpm-chip-activ { border-color: var(--dp-blue); color: var(--dp-blue); }

	/* antet compact de secțiune: titlu la stânga, „Toate →" la dreapta */
	.dpm-sectiune-cap {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		margin: 0 0 12px;
	}
	.dpm-sectiune-cap > :first-child { margin: 0; font-size: 20px; font-weight: 800; color: var(--dp-navy); }
	.dpm-sectiune-cap a { font-size: 12.5px; font-weight: 700; }

	/* ===================================================================
	   5. CORECȚII GLOBALE
	   =================================================================== */

	/* Nimic nu are voie să lățească pagina.
	   ⛔⛔ CAPCANĂ COSTISITOARE (prinsă 19.08, independent, de doi agenți):
	   `overflow-x: hidden` pe `<body>` face din corp un **container de derulare** —
	   iar `position: sticky` se lipește atunci de el, nu de fereastră. Barele lipite
	   sus (filtre pe categorie, ancore pe produs, antetul compact) par pur și simplu
	   că „nu merg", fără nicio eroare și fără nicio regulă vizibil greșită.
	   `clip` taie exact la fel, dar NU creează container ⇒ sticky rămâne întreg.
	   Pentru browserele care nu cunosc `clip`, rămâne `hidden` doar pe `<html>`,
	   unde valoarea se propagă la fereastră fără să strice sticky-ul din corp. */
	html { overflow-x: hidden; }
	body { max-width: 100%; }
	@supports (overflow-x: clip) {
		html, body { overflow-x: clip; }
	}

	/* insigna reCAPTCHA stă peste conținut și peste bara de jos.
	   O ascundem și punem mențiunea cerută de Google în text, lângă butoanele
	   de trimitere (vezi diagpro-mobil.php). */
	.grecaptcha-badge { visibility: hidden; }

	/* bula de chat s-ar suprapune peste bara de jos — pe telefon intrarea în
	   chat e în bara de jos, deci bula se ascunde */
	body.dpm-are-nav .woot--bubble-holder,
	body.dpm-are-nav #chatwoot-live-chat-widget,
	body.dpm-are-nav .woot-widget-bubble { display: none !important; }
	/* fereastra de chat, dacă e deschisă, rămâne */
	body.dpm-are-nav .woot-widget-holder { display: block !important; }

	/* butoanele și linkurile ating minimul de 44px cerut de machetă */
	.dpm-nav a, .dpm-chip, .dpm-inchide { touch-action: manipulation; }

	/* imaginile nu ies din ecran nicăieri */
	img, video, iframe, table { max-width: 100%; }
}

/* peste 767px bara nu există deloc — nici măcar ca element ascuns care
   ar lăsa spațiu gol în subsol */
@media (min-width: 768px) {
	.dpm-nav, .dpm-bara, .dpm-voal, .dpm-foaie { display: none !important; }
	body.dpm-are-nav, body.dpm-cu-bara { padding-bottom: 0; }
}