/* Harta cu magazinele noastre si ce sta in jurul ei: fereastra din checkout in
   care se alege magazinul de ridicare (Click&Collect) si blocul de deasupra
   listei de pe /magazine.

   creat de Claude in 09.09.2026.

   Se incarca doar in cele doua pagini care o folosesc (vezi CheckoutController si
   StoreController), nu pe tot site-ul. Fereastra imprumuta clasele `.lk-pop*` din
   css/lockere.css -- e aceeasi fereastra peste pagina ca la punctele de ridicare,
   si n-are rost sa fie desenata a doua oara -- deci foaia aceea se cere impreuna
   cu asta. Aici raman doar deosebirile.

   Aceleasi variabile si acelasi limbaj vizual ca in app.css. */

/* ---- panza propriu-zisa ---- */

.harta-mag { position: relative; }

.harta-mag-panza {
	height: 380px; width: 100%;
	border: 1px solid var(--linie); border-radius: var(--radius);
	background: var(--fundal);
	/* Google deseneaza in interiorul elementului si nu stie de coltul rotunjit:
	   fara asta dalele ies din chenar */
	overflow: hidden;
}

/* harta nu s-a putut incarca (cheia lipseste sau Google n-a raspuns): panza
   dispare, iar lista de sub ea ramane singura si intreaga */
.harta-mag--esuata .harta-mag-panza { display: none; }

.harta-mag-nota { margin: 6px 0 0; }
.harta-mag-nota[hidden] { display: none; }

/* ---- balonul de deasupra unui ac ---- */
/* Google pune continutul intr-o casuta a lui, cu marginile ei; aici se aseaza
   doar ce scriem noi in ea. */

.harta-balon { display: grid; gap: 2px; font-size: 14px; line-height: 1.4; max-width: 240px; }
.harta-balon b { font-size: 15px; }
.harta-balon span { color: var(--muted); font-size: 13px; }
.harta-balon em { font-style: normal; font-size: 12px; }

.harta-balon-stare { color: #912018; font-weight: 600; }
.harta-balon-stare.e-deschis { color: var(--verde); }
.harta-balon-program { color: var(--muted); }
.harta-balon-dist { color: var(--verde-inchis); font-weight: 600; }

.harta-balon-butoane {
	display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap;
}
.harta-balon-drum { font-size: 13px; color: var(--muted); text-decoration: underline; }
.harta-balon-alege { padding: 7px 12px; font-size: 13px; border: 0; cursor: pointer; }

/* ---- fereastra de alegere din checkout ---- */

/* mai lata decat fereastra punctelor de ridicare: aici deasupra listei sta o
   harta, si sub 640px harta e o dunga in care nu se distinge nimic */
.hm-pop .lk-pop-panou { max-width: 700px; }

/* creat de Claude in 09.09.2026
   Cine imparte inaltimea ferestrei. Panoul e o coloana flex cu inaltime marginita,
   iar in ea harta are inaltime fixa: fara regulile de mai jos, pe o fereastra
   scunda titlul + butonul + harta + cele doua casete umpleau tot, iar lista ramanea
   dedesubt, in afara ecranului -- adica magazinele nu se vedeau deloc.

   Deci: harta nu se intinde niciodata (`flex: 0 0 auto`) si se face mai scunda pe
   masura ce ecranul scade, iar lista ia tot ce ramane, dar niciodata mai putin de
   cateva randuri. `overflow-y` pe panou e plasa de siguranta: daca tot nu incape
   (litera marita din browser), se deruleaza, nu dispare. */
.hm-pop .lk-pop-panou { overflow-y: auto; }
.hm-pop .harta-mag { flex: 0 0 auto; }
.hm-pop .lk-pop-titlu,
.hm-pop .lk-aproape,
.hm-pop .hm-filtre,
.hm-pop [data-hm-stare] { flex: 0 0 auto; }

.hm-pop .harta-mag-panza { height: 230px; }
@media (min-width: 700px) { .hm-pop .harta-mag-panza { height: 290px; } }

.hm-filtre { margin-top: 2px; }

/* lista ia locul ramas, dar nu coboara sub cateva randuri */
.hm-lista { flex: 1 1 auto; min-height: 128px; }

/* creat de Claude in 09.09.2026
   Ecran scund (fereastra mica de browser, telefon culcat): fereastra nu se mai
   imparte in doua zone de derulare, ci se deruleaza ca o pagina -- harta sus, sub
   ea lista intreaga.

   Masurat pe 542x527: titlul, butonul, harta, cele doua casete si randul de stare
   iau vreo 450px, deci listei ii ramaneau 128px, adica un rand si ceva, si tot
   depasea panoul. Impartit asa, nu se vedea nici harta ca lumea, nici lista. Cand
   se deruleaza tot panoul, fiecare bucata are cat ii trebuie in clipa in care te
   uiti la ea.

   Pragul e pe INALTIME, nu pe latime: un telefon in picioare (844px) ramane pe
   varianta cu lista derulata separat, care acolo e mai buna. */
@media (max-height: 700px) {
	.hm-pop .hm-lista { flex: 0 0 auto; min-height: 0; max-height: none; overflow: visible; }

	/* Nu ajunge sa se deruleze: daca deasupra listei raman 450px de antet, harta si
	   casete, primul magazin incepe tot sub marginea de jos si fereastra pare goala.
	   Deci tot ce sta deasupra ei se strange -- masurat pe 542x527, asa incap doua
	   magazine intregi de la prima privire, iar restul la o miscare de deget. */
	.hm-pop .lk-pop-panou { padding: 12px; gap: 7px; }
	.hm-pop .lk-pop-titlu { font-size: 15px; margin-right: 32px; }
	.hm-pop .lk-pop-x { width: 32px; height: 32px; font-size: 24px; }
	.hm-pop .lk-aproape { padding: 8px 12px; font-size: 14px; }
	.hm-pop .harta-mag-panza { height: 140px; }
	.hm-pop .hm-filtre { grid-template-columns: 1fr 1fr; gap: 8px; }
	.hm-pop [data-hm-stare] { font-size: 12px; }

	/* randurile se strang si ele: programul complet e oricum in balonul de pe harta
	   si in „Cum ajung”, iar starea de acum („Deschis pana la 20:00”) ramane */
	.hm-pop .hm-rand { padding: 8px 2px; }
	.hm-pop .hm-rand .mag-program { display: none; }
}

@media (max-height: 520px) {
	.hm-pop .harta-mag-panza { height: 110px; }
}

/* pe telefon `100vh` e inaltimea CU bara de adresa, deci panoul iese sub ecran si
   ultimele magazine nu se pot atinge; `100dvh` e inaltimea care chiar se vede */
@supports (height: 100dvh) {
	.hm-pop .lk-pop-panou { max-height: calc(100dvh - 10px); }
	@media (max-width: 559.98px) { .hm-pop .lk-pop-panou { height: 100dvh; } }
}
.hm-gol { margin: 6px 0 0; }
.hm-gol[hidden] { display: none; }

/* creat de Claude in 09.09.2026 -- randul ascuns de filtru chiar dispare.
   `.lk-rand` (css/lockere.css) e `display: flex`, iar o regula de autor bate
   `[hidden] { display: none }` din foaia browserului: fara randul asta, alegerea
   unei localitati lasa toate magazinele pe ecran, desi codul le pusese `hidden`.
   La punctele de ridicare nu se vedea, fiindca acolo lista se rescrie din
   innerHTML, nu se ascund randuri. */
.hm-rand[hidden] { display: none; }

/* randul magazinului ales si cel apasat pe harta: se vede care e despre ce, fara
   sa sara nimic din loc */
.hm-rand--ales { background: #f2f9e9; box-shadow: inset 3px 0 0 var(--verde); }
.hm-rand--atins { background: var(--fundal); }

.hm-rand .mag-stare { color: #912018; font-weight: 600; font-style: normal; font-size: 12px; }
.hm-rand .mag-stare--deschis { color: var(--verde); }
.hm-rand .mag-program { color: var(--muted); font-style: normal; font-size: 12px; }

/* ---- panoul din lista de metode de livrare ---- */
/* Acelasi tipar ca la punctele de ridicare (.lockere din css/lockere.css): cat
   timp nu e ales niciun magazin se vede un buton, dupa alegere un bloc care se
   citeste ca o adresa de livrare. */

.magazine-ridicare { padding-bottom: 13px; }
.magazine-ridicare[hidden] { display: none; }
.magazine-ridicare button { cursor: pointer; }
.magazine-ridicare [data-mag-indemn] { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.magazine-ridicare [data-mag-indemn][hidden] { display: none; }

.mag-ales {
	display: grid; gap: 2px; margin-bottom: 12px; padding: 12px;
	background: var(--fundal); border: 1px solid var(--linie); border-radius: var(--radius);
	font-size: 14px; line-height: 1.4;
}
.mag-ales[hidden] { display: none; }
.mag-ales b { font-size: 15px; }
.mag-ales > span { color: var(--muted); }
.mag-ales em { display: block; font-style: normal; font-size: 12px; }
.mag-ales .mag-stare { color: #912018; font-weight: 600; }
.mag-ales .mag-stare--deschis { color: var(--verde); }
.mag-ales .mag-program { color: var(--muted); }
.mag-ales .mag-harta { justify-self: start; margin-top: 4px; font-size: 13px; text-decoration: underline; }

/* scris cu .magazine-ridicare in fata, ca la .lockere .lk-deschide: altfel .btn
   (fundal verde plin, din app.css) ar bate regulile de aici, avand aceeasi
   specificitate */
.magazine-ridicare .mag-deschide {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	background: #f2f9e9; color: var(--verde-inchis);
	border: 1.5px solid var(--verde);
	padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700;
	box-shadow: 0 1px 2px rgba(15, 23, 20, .08);
}
.magazine-ridicare .mag-deschide:hover { background: #e6f3d6; color: var(--verde-inchis); }

.mag-deschide svg {
	width: 16px; height: 16px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* pe telefon butonul ia tot randul: e mai greu de ratat si mai usor de atins */
@media (max-width: 559.98px) { .magazine-ridicare .mag-deschide { display: flex; width: 100%; } }

/* ---- harta de pe pagina /magazine ---- */
/* Acolo harta sta deasupra grilei de carduri, pe toata latimea continutului, si
   e mai inalta: e o pagina in care omul cauta un magazin, nu un pas dintr-o
   comanda. */

.mag-harta-bloc { margin: 0 0 18px; }
@media (max-width: 559.98px) { .mag-harta-bloc .harta-mag-panza { height: 300px; } }

/* cardul magazinului spre care s-a sarit de pe harta: se aprinde o clipa, cat
   sa se vada unde a ajuns pagina */
.mag--atins { outline: 2px solid var(--verde); outline-offset: 2px; }