/* HPP térkép — a 2026-10-02-i "saját copy" terv szerint (Nano-Weboldal_saját_copy,
   frame 372:46686 / 369:33706, térkép-szekció), a 2026-10-03-i szűkítéssel:
   a kártyán EGYETLEN kereső mező van ("Keresés" halvány helyőrzővel), a nagyító
   a mező elején (ugyanolyan szürkén, mint a helyőrző), a jobb szélén a
   helyzet-gomb (célkereszt). Kiválasztás nélkül LISTA látszik (távolság vagy
   ABC szerint), kiválasztva pedig a partner adatlapja, "vissza a listához"
   gombbal. A marker mellett a látogatótól mért távolság címkéje látszik;
   ugyanez a buborékban és az adatlapon is.

   Elrendezés a tervből (1440 px széles oldal):
     bal margó 48 px | kártya 374x566 r20 #FAFAFA | 26 px rés | térkép 953x565 | 39 px jobb margó
   A kártya belső rácsa: 30 px oldalpadding, 31 px felső; egy sor
   (266x38, 1 px fekete körvonalú, átlátszó pill, r50, Poppins 600 12 px),
   majd a lista (név 600 12,5 px + hely 400 11 px, jobbra a távolság), illetve
   a kiválasztott szakreferens adatlapja:
   név 600 15 px, "Elérhetőségek:" 400 12 px, 26x26 sötét (#434343) ikonnal jelölt
   telefon / e-mail / cím sorok 600 11 px, sötét (#4B4A4A) "Útvonalterv" pill
   131x28, végül 315x160 r20 kép.

   A widget saját stylesheetje: az EMCP csak akkor tölti be, ha a widget az
   oldalon van. A testreszabható méreteket a widget inline CSS-változóként adja
   át (--hpp-h = magasság, --hpp-cw = a kártya szélessége, --hpp-sat = a csempék
   telítettsége). */

.hpp-map{position:relative;display:flex;align-items:flex-start;gap:26px;
	width:100%;height:var(--hpp-h,566px);box-sizing:border-box;padding:0 39px 0 48px;
	font-family:Poppins,"Helvetica Neue",Arial,sans-serif;color:#141718;}

/* A kártya. A Leaflet panejei z-index 200-700, ezért a kártya ezek FÖLÉ kerül. */
.hpp-map__panel{flex:0 0 var(--hpp-cw,374px);width:var(--hpp-cw,374px);height:100%;
	box-sizing:border-box;position:relative;z-index:800;background:#FAFAFA;border-radius:20px;
	box-shadow:0 30px 80px rgba(0,0,0,.20);padding:31px 30px 28px;
	display:flex;flex-direction:column;overflow:hidden;}

/* A térkép a maradék hely: a Leaflet-nek saját méretű, pozicionált konténer kell. */
.hpp-map__canvas{position:relative;flex:1 1 auto;min-width:0;height:565px;z-index:0;
	background:#F3F3F3;overflow:hidden;}
.hpp-map .leaflet-tile-pane{filter:saturate(var(--hpp-sat,110%));}

/* --- a sor: egyetlen körvonalas pill, benne a nagyító és a helyzet-gomb --- */
.hpp-row{display:flex;align-items:center;gap:20px;width:100%;margin:0;padding:0;border:0;
	background:none;font:inherit;color:inherit;text-align:left;}

/* A befogadó téma link- és gomb-hover színei NE szivárogjanak be a
   komponensbe: az "Útvonalterv" felirata ne váltson sötétkékre. Minden
   interaktív elem minden állapotára a saját színünk érvényes (a téma
   `a:hover` / `button:hover` szabályaival szemben is). */
/* Szándékosan nem adunk itt színt az `a`-ra: a .hpp-map a:hover (0,2,1)
   felülírná a .hpp-card__route:hover (0,2,0) fehérjét; minden link a saját
   szabályában kapja meg a színét. */
.hpp-map a,.hpp-map a:link,.hpp-map a:visited{text-decoration:none;}
.hpp-map a:hover,.hpp-map a:focus,.hpp-map a:active{text-decoration:none;}
.hpp-map button:not(.hpp-search__locate),
.hpp-map button:not(.hpp-search__locate):hover,
.hpp-map button:not(.hpp-search__locate):focus,
.hpp-map button:not(.hpp-search__locate):active{
	background:none !important;color:inherit !important;border:0;}
.hpp-contact,.hpp-contact:visited{color:#000 !important;}
.hpp-contact:hover,.hpp-contact:focus{color:#000 !important;}
.hpp-card__route,.hpp-card__route:link,.hpp-card__route:visited{color:#fff !important;}
.hpp-card__route:hover,.hpp-card__route:focus{color:#fff !important;background:#3a3939;}
.hpp-pop__act,.hpp-pop__act:visited{color:#141718 !important;}
.hpp-pop__act:hover,.hpp-pop__act:focus{color:#141718 !important;}
.hpp-map__credit a,.hpp-map__credit a:visited{color:inherit !important;}
.hpp-row__pill{flex:1 1 auto;min-width:0;height:38px;box-sizing:border-box;
	border:1px solid rgba(0,0,0,.2);border-radius:50px;background:rgba(255,255,255,.1);color:#000;
	display:flex;align-items:center;padding:0 20px;
	font:600 12px/18px Poppins,"Helvetica Neue",Arial,sans-serif;}
/* A kereső pill: a nagyító a mező elején, a jobb szélen a helyzet-gomb. */
.hpp-search{padding:0 6px 0 16px;gap:9px;}
.hpp-search:focus-within{border-color:rgba(0,0,0,.5);box-shadow:0 0 0 3px rgba(0,0,0,.08);}
/* A nagyító ugyanolyan szürke, mint a helyőrző szöveg. */
.hpp-search__icon{flex:none;display:flex;align-items:center;color:rgba(0,0,0,.35);}
.hpp-search__icon svg{display:block;}
.hpp-search__input{flex:1 1 auto;min-width:0;height:100%;box-sizing:border-box;margin:0;padding:0;
	border:0;background:none;color:#000;
	font:600 12px/18px Poppins,"Helvetica Neue",Arial,sans-serif;
	appearance:none;-webkit-appearance:none;cursor:text;}
.hpp-search__input:focus{outline:none;}
/* A helyőrző halvány (tulajdonosi kérés). */
.hpp-search__input::placeholder{color:rgba(0,0,0,.35);opacity:1;font-weight:600;}
.hpp-search__input::-webkit-search-cancel-button,
.hpp-search__input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none;}
/* A helyzet-gomb: a befogadó téma gomb-stílusai ne szivárogjanak be. */
.hpp-map button.hpp-search__locate,.hpp-map button.hpp-search__locate:hover,
.hpp-map button.hpp-search__locate:focus,.hpp-map button.hpp-search__locate:active{
	flex:none;width:26px;height:26px;padding:0;border:0;border-radius:50%;cursor:pointer;
	background:rgba(0,0,0,.06) !important;color:#000 !important;
	display:flex;align-items:center;justify-content:center;}
.hpp-map button.hpp-search__locate svg{display:block;}
.hpp-map button.hpp-search__locate:hover,
.hpp-map button.hpp-search__locate:focus-visible{background:rgba(0,0,0,.14) !important;}
.hpp-map button.hpp-search__locate:focus{outline:none;}
.hpp-map button.hpp-search__locate:focus-visible{outline:2px solid rgba(0,0,0,.35);outline-offset:2px;}
.hpp-map button.hpp-search__locate.is-active,
.hpp-map button.hpp-search__locate.is-active:hover{background:#08A0E8 !important;color:#fff !important;}

/* --- lista (amíg a látogató nem választ markert) --- */
.hpp-list{flex:1 1 auto;min-height:0;overflow-y:auto;margin:6px -8px 0;padding:0 8px;}
.hpp-list__empty{margin:10px 0 0;font:400 12px/18px Poppins,"Helvetica Neue",Arial,sans-serif;color:#6C7275;}
/* A sor: név + hely, jobbra a távolság. A téma gomb-stílusai ne szivárogjanak
   be (ezért itt is !important a háttér/szín, mint a helyzet-gombnál). */
.hpp-map button.hpp-item,.hpp-map button.hpp-item:hover,.hpp-map button.hpp-item:focus,
.hpp-map button.hpp-item:active{
	display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
	margin:0;padding:10px 2px;border:0;border-bottom:1px solid rgba(0,0,0,.07);
	border-radius:0;cursor:pointer;text-align:left;
	background:none !important;color:#000 !important;}
.hpp-map button.hpp-item:last-child{border-bottom:0;}
.hpp-map button.hpp-item:hover,.hpp-map button.hpp-item:focus-visible{background:rgba(0,0,0,.04) !important;}
.hpp-map button.hpp-item:focus{outline:none;}
.hpp-map button.hpp-item:focus-visible{outline:2px solid rgba(0,0,0,.35);outline-offset:-2px;}
.hpp-item__body{flex:1 1 auto;min-width:0;display:block;}
.hpp-item__name{display:block;font:600 12.5px/18px Poppins,"Helvetica Neue",Arial,sans-serif;color:#000;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hpp-item__meta{display:block;font:400 11px/16px Poppins,"Helvetica Neue",Arial,sans-serif;color:rgba(0,0,0,.5);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hpp-item__dist{flex:none;font:600 11px/16px Poppins,"Helvetica Neue",Arial,sans-serif;
	color:rgba(0,0,0,.45);white-space:nowrap;}

/* --- a kiválasztott szakreferens adatlapja --- */
.hpp-card__name{margin:17.5px 0 0;font:600 15px/22.5px Poppins,"Helvetica Neue",Arial,sans-serif;color:#000;}
/* Az adatlap feje: név (+ távolság) és a "vissza a listához" gomb. */
.hpp-card__head{display:flex;align-items:flex-start;gap:8px;margin-top:17.5px;}
.hpp-card__head .hpp-card__name{margin:0;flex:1 1 auto;min-width:0;}
.hpp-map button.hpp-card__back,.hpp-map button.hpp-card__back:hover,
.hpp-map button.hpp-card__back:focus,.hpp-map button.hpp-card__back:active{
	flex:none;width:26px;height:26px;padding:0;border:0;border-radius:50%;cursor:pointer;
	background:rgba(0,0,0,.06) !important;color:#000 !important;
	display:flex;align-items:center;justify-content:center;}
.hpp-map button.hpp-card__back svg{display:block;}
.hpp-map button.hpp-card__back:hover,
.hpp-map button.hpp-card__back:focus-visible{background:rgba(0,0,0,.14) !important;}
.hpp-map button.hpp-card__back:focus{outline:none;}
.hpp-map button.hpp-card__back:focus-visible{outline:2px solid rgba(0,0,0,.35);outline-offset:2px;}
/* A látogatótól mért távolság a név mellett (halvány, kis méret). */
.hpp-card__dist{margin-left:8px;font:600 11px/16.5px Poppins,"Helvetica Neue",Arial,sans-serif;
	color:rgba(0,0,0,.45);white-space:nowrap;}
.hpp-card__label{margin:2.5px 0 0;font:400 12px/18px Poppins,"Helvetica Neue",Arial,sans-serif;color:rgba(0,0,0,.5);}
.hpp-card__contacts{margin:3px 0 0;}
/* A tervben a harmadik kontakt-sor 1 px-rel szorosabb — pixelpontosan ezt vesszuk. */
.hpp-card__contacts .hpp-contact:nth-child(3){margin-top:-1px;}
.hpp-contact{display:flex;align-items:center;gap:7px;height:26px;text-decoration:none;color:#000;}
.hpp-contact__icon{flex:none;width:26px;height:26px;display:block;}
.hpp-contact__icon img{display:block;width:26px;height:26px;}
.hpp-contact__text{font:600 11px/16.5px Poppins,"Helvetica Neue",Arial,sans-serif;color:#000;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hpp-contact:hover .hpp-contact__text{text-decoration:underline;text-underline-offset:2px;}

.hpp-card__route{margin:10px 0 0;align-self:center;display:inline-flex;align-items:center;gap:10px;
	height:28px;box-sizing:border-box;padding:0 16.5px;border-radius:50px;background:#4B4A4A;color:#fff;
	text-decoration:none;font:600 12px/18px Poppins,"Helvetica Neue",Arial,sans-serif;}
.hpp-card__route:hover{background:#3a3939;}
.hpp-card__route svg{display:block;flex:none;}

.hpp-card__image{margin:22px 0 0;width:315px;max-width:100%;height:160px;border-radius:20px;
	overflow:hidden;background:#EFEFEF;}
.hpp-card__image img{width:100%;height:100%;object-fit:cover;display:block;}

.hpp-map__credit{position:absolute;right:49px;bottom:6px;margin:0;font-size:10px;color:#5b5b5b;z-index:800;
	background:rgba(255,255,255,.75);padding:2px 6px;border-radius:4px;}
.hpp-map__credit a{color:inherit;}
.hpp-map__empty{margin:0;padding:0;font:400 12px/18px Poppins,"Helvetica Neue",Arial,sans-serif;color:#6C7275;}

/* A Leaflet popup a markerre kattintva (a kártyától független, saját adatlap). */
.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.16);}
.leaflet-popup-content{margin:14px 16px;font-family:Poppins,"Helvetica Neue",Arial,sans-serif;
	font-size:12px;line-height:1.55;color:#141718;}
.leaflet-popup-content strong{display:block;font-size:13px;font-weight:600;}
.leaflet-popup-content em{font-style:normal;font-weight:500;color:#6C7275;}
.leaflet-popup-content a{color:#141718;}
.leaflet-container a.leaflet-popup-close-button{display:none;}
.hpp-pop__head{display:flex;align-items:center;gap:10px;}
.hpp-pop__logo{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;flex:none;
	background:#EFEFEF;box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.hpp-pop__id{min-width:0;}
.leaflet-popup-content em.hpp-pop__dist{display:block;font-weight:600;color:#4B4A4A;}
.hpp-pop__addr{display:block;margin-top:8px;}
.hpp-pop__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
.hpp-pop__act{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;
	line-height:18px;color:#141718;text-decoration:none;max-width:100%;}
.hpp-pop__act:hover{text-decoration:underline;}
.hpp-pop__act svg{display:block;flex:none;}
.hpp-pop__act span{overflow-wrap:anywhere;}

/* A marker csak egy pont: kék pont szürke halo-val (a tulajdonosi kérés szerint). */
.hpp-pin{position:relative;}
.hpp-pin__halo{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;
	background:rgba(8,160,232,.18);transition:transform .15s ease,background .15s ease;}
.leaflet-marker-icon.hpp-pin:hover .hpp-pin__halo{transform:scale(1.15);background:rgba(8,160,232,.3);}
.hpp-pin__dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;
	background:#08A0E8;box-shadow:0 0 0 2px #fff;}
/* A látogatótól mért távolság a pont mellett (csak ha a helyzet ismert). */
.hpp-pin__dist{position:absolute;left:14px;top:-10px;height:20px;display:inline-flex;align-items:center;
	padding:0 8px;border-radius:10px;background:rgba(255,255,255,.94);color:#141718;
	font:600 11px/20px Poppins,"Helvetica Neue",Arial,sans-serif;white-space:nowrap;
	box-shadow:0 1px 4px rgba(0,0,0,.22);}
.leaflet-marker-icon.hpp-pin:hover .hpp-pin__dist{background:#141718;color:#fff;}

/* Mobilon és tableten (a terv mobil nézete, 375 px): FELÜL a térkép, ALUL a
   szűrő/lista, egy képernyőn belül. A terv térkép-szekciója 375x547 px
   (210 px térkép + 22 px rés + 315 px kártya); rövidebb kijelzőn a teljes
   magasság a viewporthoz igazodik, és a kártya belül görget. A kártya a terven
   314 px széles, a térkép teljes szélességű. */
@media (max-width:1024px){
	.hpp-map{flex-direction:column;align-items:center;gap:22px;width:100%;
		height:min(547px,calc(100vh - 84px));
		height:min(547px,calc(100svh - 84px));min-height:420px;
		padding:0;margin:0 auto;}
	.hpp-map__canvas{order:1;flex:0 0 auto;width:100%;height:210px;min-height:140px;}
	.hpp-map__panel{order:2;flex:1 1 auto;width:314px;max-width:calc(100% - 40px);
		height:auto;min-height:0;padding:22px 20px 18px;overflow-y:auto;
		-webkit-overflow-scrolling:touch;}
	.hpp-list{max-height:none;}
	.hpp-card__image{width:100%;height:140px;margin-top:16px;}
	/* A térkép-jelölés a térkép aljára kerül (a kártya fölött, nem alatta). */
	.hpp-map__credit{top:186px;right:6px;bottom:auto;}
}