/* Olea mapa apoteka, 4everdesign */
.olea-mapa {
	--om-zelena: #015643;
	--om-zelena-tamna: #013b2e;
	--om-zelena-svijetla: #0b6b53;
	--om-maslina: #a4b54a;
	--om-maslina-tamna: #7d8c33;
	--om-mastilo: #12211d;
	--om-sekund: #5a6b66;
	--om-podloga: #f4f8f6;
	--om-linija: #e2ebe7;
	--om-bijela: #ffffff;
	font-family: inherit;
	color: var(--om-mastilo);
	/* ista širina kao zaglavlje sajta: 1320 px sadržaja, 50 px sa strane na manjim ekranima */
	width: 100%;
	max-width: 1420px;
	margin: 0 auto;
	padding: 24px 50px 64px;
	box-sizing: border-box;
	display: grid;
	gap: 28px;
}
.olea-mapa *, .olea-mapa *::before, .olea-mapa *::after { box-sizing: border-box; }
.olea-mapa > * { min-width: 0; }
.om-skriveno { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* WordPress naslov stranice se ne prikazuje na stranici sa mapom */
body.olea-mapa-stranica .page-header,
body.olea-mapa-stranica .entry-title { display: none !important; }
body.olea-mapa-stranica .site-main { padding-top: 0; }

/* Naslovna traka */
.om-hero {
	position: relative;
	z-index: 5;
	overflow: visible;
	isolation: isolate;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(164, 181, 74, .28) 0%, rgba(164, 181, 74, 0) 55%),
		linear-gradient(160deg, var(--om-zelena-svijetla) 0%, var(--om-zelena) 45%, var(--om-zelena-tamna) 100%);
	color: var(--om-bijela);
	border-radius: 28px;
	padding: clamp(30px, 4.5vw, 56px) clamp(20px, 5vw, 64px) clamp(24px, 3vw, 36px);
}
.om-ukras-okvir {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	z-index: -1;
	pointer-events: none;
}
.om-list-ukras {
	position: absolute;
	right: clamp(-40px, -2vw, 0px);
	top: 50%;
	width: clamp(220px, 30vw, 380px);
	height: auto;
	transform: translateY(-50%) rotate(28deg);
	color: rgba(255, 255, 255, .09);
	z-index: -1;
	pointer-events: none;
}
.om-nadnaslov {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--om-maslina);
}
.olea-mapa h1 {
	margin: 0 0 16px;
	max-width: 22ch;
	font-size: clamp(30px, 4.4vw, 54px);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--om-bijela);
	text-wrap: balance;
}
.om-uvod {
	margin: 0 0 26px;
	max-width: 60ch;
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}

/* Pretraga */
.om-pretraga {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	max-width: 920px;
}
.om-polje {
	position: relative;
	flex: 1 1 420px;
	display: flex;
	align-items: center;
	background: var(--om-bijela);
	border-radius: 999px;
	padding: 6px 6px 6px 22px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
	min-width: 0;
}
.om-lupa { width: 22px; height: 22px; flex: none; color: var(--om-zelena); }
.om-polje input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 56px;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 14px !important;
	font: inherit;
	font-size: 17px;
	color: var(--om-mastilo);
}
.om-polje input::placeholder { color: #8c9c97; }
.om-polje input::-webkit-search-cancel-button { cursor: pointer; }
.om-trazi {
	flex: none;
	height: 56px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: var(--om-zelena);
	color: var(--om-bijela);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}
.om-trazi:hover { background: var(--om-zelena-tamna); }
.om-polje:focus-within { box-shadow: 0 0 0 4px rgba(164, 181, 74, .55), 0 18px 40px rgba(0, 0, 0, .18); }

.om-oko-mene {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 26px;
	min-height: 68px;
	border: 2px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: var(--om-bijela);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
.om-oko-mene svg { width: 22px; height: 22px; }
.om-oko-mene:hover { background: rgba(255, 255, 255, .18); border-color: var(--om-bijela); }
.om-oko-mene[aria-busy="true"] svg { animation: om-okret 1.2s linear infinite; }
@keyframes om-okret { to { transform: rotate(360deg); } }

.om-trazi:focus-visible, .om-oko-mene:focus-visible, .om-stavka:focus-visible,
.om-jos:focus-visible, .om-ponisti:focus-visible, .om-poziv-dugme:focus-visible {
	outline: 3px solid var(--om-maslina);
	outline-offset: 3px;
}

/* Dugmad: tema ima svoju (rozu) boju za hover i fokus dugmadi, ovdje je pregazimo */
.olea-mapa button { text-transform: none; letter-spacing: normal; }
.olea-mapa .om-trazi:hover, .olea-mapa .om-trazi:focus { background: var(--om-zelena-tamna); color: var(--om-bijela); }
.olea-mapa .om-oko-mene:hover, .olea-mapa .om-oko-mene:focus { background: rgba(255, 255, 255, .18); color: var(--om-bijela); }
.olea-mapa .om-ponisti:hover, .olea-mapa .om-ponisti:focus { background: none; color: var(--om-zelena-tamna); }
.olea-mapa .om-jos:focus { background: var(--om-bijela); color: var(--om-zelena); }
.olea-mapa .om-jos:hover { background: var(--om-zelena); color: var(--om-bijela); }

/* Prijedlozi */
.om-prijedlozi {
	position: absolute;
	left: 0; right: 0;
	top: calc(100% + 8px);
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--om-bijela);
	border-radius: 18px;
	box-shadow: 0 24px 48px rgba(1, 59, 46, .25);
	z-index: 1000;
	max-height: 340px;
	overflow-y: auto;
}
.om-prijedlozi li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 12px;
	cursor: pointer;
	color: var(--om-mastilo);
	font-size: 15px;
}
.om-prijedlozi li[aria-selected="true"], .om-prijedlozi li:hover { background: var(--om-podloga); }
.om-prijedlozi .om-p-ikona {
	flex: none;
	width: 32px; height: 32px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--om-podloga);
	color: var(--om-zelena);
	font-size: 13px;
	font-weight: 700;
}
.om-prijedlozi li[aria-selected="true"] .om-p-ikona, .om-prijedlozi li:hover .om-p-ikona { background: var(--om-bijela); }
.om-prijedlozi .om-p-tekst { min-width: 0; display: grid; }
.om-prijedlozi .om-p-tekst span { font-size: 13px; color: var(--om-sekund); }
.om-prijedlozi mark { background: none; color: var(--om-zelena); font-weight: 700; }

/* Brojke */
.om-brojke {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 36px;
	margin: 28px 0 0;
	padding: 20px 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 14px;
	color: rgba(255, 255, 255, .78);
}
.om-brojke strong {
	display: inline-block;
	margin-right: 4px;
	font-size: 22px;
	font-weight: 700;
	color: var(--om-bijela);
	font-variant-numeric: tabular-nums;
}

/* Lista i mapa */
.om-tijelo {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
	border: 1px solid var(--om-linija);
	border-radius: 24px;
	overflow: hidden;
	background: var(--om-bijela);
	box-shadow: 0 20px 50px rgba(1, 86, 67, .07);
}
.om-lista {
	background: var(--om-podloga);
	padding: 22px;
	height: 640px;
	overflow-y: auto;
	overflow-x: hidden;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.om-lista-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.om-status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--om-sekund); }
.om-status strong { color: var(--om-mastilo); }
.om-ponisti {
	flex: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--om-zelena);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.om-najblize { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: om; }
.om-najblize > li { min-width: 0; }
.om-stavka {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 2px 12px;
	min-width: 0;
	align-items: start;
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	border: 1px solid var(--om-linija);
	border-radius: 16px;
	background: var(--om-bijela);
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.olea-mapa .om-stavka:focus { background: var(--om-bijela); color: var(--om-mastilo); }
.olea-mapa .om-stavka.om-aktivna { border-color: var(--om-zelena); box-shadow: 0 0 0 1px var(--om-zelena), 0 8px 20px rgba(1, 86, 67, .1); }
.olea-mapa .om-stavka:hover {
	background: var(--om-zelena-tamna);
	border-color: var(--om-zelena-tamna);
	color: var(--om-bijela);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(1, 59, 46, .22);
}
.olea-mapa .om-stavka:hover .om-adresa { color: rgba(255, 255, 255, .78); }
.olea-mapa .om-stavka:hover .om-daljina { color: var(--om-maslina); }
.olea-mapa .om-stavka:hover .om-redni { background: var(--om-bijela); color: var(--om-zelena-tamna); }
.om-redni {
	grid-row: span 2;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--om-podloga);
	color: var(--om-zelena);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.om-aktivna .om-redni { background: var(--om-zelena); color: var(--om-bijela); }
.om-ime { font-weight: 600; font-size: 15px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.om-daljina {
	font-size: 13px;
	font-weight: 700;
	color: var(--om-zelena);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.om-adresa { grid-column: 2 / -1; font-size: 13px; color: var(--om-sekund); line-height: 1.45; }
.om-prazno {
	padding: 22px;
	border: 1px dashed var(--om-linija);
	border-radius: 16px;
	background: var(--om-bijela);
	font-size: 14px;
	line-height: 1.55;
	color: var(--om-sekund);
}
.om-jos {
	align-self: center;
	border: 1px solid var(--om-zelena);
	background: var(--om-bijela);
	color: var(--om-zelena);
	border-radius: 999px;
	padding: 11px 22px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.om-jos:hover { background: var(--om-zelena); color: var(--om-bijela); }

.om-karta { height: 640px; min-width: 0; z-index: 0; }

/* Poziv na online narudžbu */
.om-poziv {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 48px);
	border-radius: 24px;
	background: var(--om-podloga);
	border: 1px solid var(--om-linija);
}
.om-poziv > div { max-width: 620px; min-width: 0; }
.om-poziv h2 {
	margin: 0 0 6px;
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--om-zelena);
}
.om-poziv p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--om-sekund); }
.om-poziv-dugme {
	display: inline-block;
	padding: 16px 28px;
	border-radius: 999px;
	background: var(--om-zelena);
	color: var(--om-bijela) !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
	transition: background .2s;
}
.om-poziv-dugme:hover { background: var(--om-zelena-tamna); }

.om-ime .om-oznaka { display: table; margin: 4px 0 0; }
.om-oznaka { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #eef3dc; color: var(--om-maslina-tamna); font-size: 11px; font-style: normal; font-weight: 600; vertical-align: 2px; white-space: nowrap; }

/* B2B: distributeri za apoteke */
.om-b2b {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 24px 40px;
	align-items: start;
	padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 48px);
	border-radius: 24px;
	background: linear-gradient(150deg, var(--om-zelena-tamna), var(--om-zelena));
	color: rgba(255, 255, 255, .86);
}
.om-b2b-oznaka { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--om-maslina); }
.om-b2b h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; font-weight: 700; color: var(--om-bijela); }
.om-b2b-uvod p:last-child { margin: 0; font-size: 15px; line-height: 1.6; }
.om-b2b-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.om-b2b-kartica { position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 18px; background: var(--om-bijela); color: var(--om-mastilo); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); min-width: 0; }
.om-b2b-regija { display: block; margin: 0 0 6px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--om-maslina-tamna); }
.om-b2b-kartica h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--om-zelena); }
.om-b2b-adresa { margin: 0 0 6px; font-size: 14px; color: var(--om-mastilo); }
.om-b2b-opis { margin: 0; font-size: 13px; line-height: 1.5; color: var(--om-sekund); }
.om-b2b-sati { margin: 2px 0 16px; font-size: 13px; line-height: 1.5; color: var(--om-mastilo); font-weight: 600; }
.om-b2b-akcije { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.olea-mapa .om-b2b-dugme, .olea-mapa .om-b2b-link { display: inline-block; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: background .2s, color .2s; }
.olea-mapa .om-b2b-dugme { background: var(--om-zelena); color: var(--om-bijela) !important; }
.olea-mapa .om-b2b-dugme:hover { background: var(--om-zelena-tamna); }
.olea-mapa .om-b2b-link { background: var(--om-podloga); color: var(--om-zelena) !important; border: 1px solid var(--om-linija); }
.olea-mapa .om-b2b-link:hover { background: var(--om-zelena-tamna); color: var(--om-bijela) !important; }
@media (max-width: 860px) { .om-b2b { grid-template-columns: minmax(0, 1fr); } }

.om-podnozje { margin: -12px 0 0; font-size: 13px; color: var(--om-sekund); }

/* Pinovi */
.om-pin-omot { background: none; border: 0; }
.om-pin {
	display: block;
	width: 30px; height: 30px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: #015643;
	border: 2px solid #fff;
	box-shadow: 0 4px 10px rgba(1, 86, 67, .35);
	position: relative;
}
.om-pin::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 9px; height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: #fff;
}
.om-pin-omot.om-istaknut .om-pin { background: #a4b54a; transform: rotate(-45deg) scale(1.25); }

.om-ja {
	display: block;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #2a7de1;
	border: 3px solid #fff;
	animation: om-puls 2s infinite;
}
@keyframes om-puls {
	0% { box-shadow: 0 0 0 0 rgba(42, 125, 225, .45); }
	70% { box-shadow: 0 0 0 18px rgba(42, 125, 225, 0); }
	100% { box-shadow: 0 0 0 0 rgba(42, 125, 225, 0); }
}
.om-skup {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: #015643;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	border: 3px solid rgba(255, 255, 255, .95);
	box-shadow: 0 0 0 6px rgba(1, 86, 67, .18);
}

/* Oblačić */
.olea-mapa .leaflet-popup-content-wrapper { border-radius: 14px; }
.olea-mapa .leaflet-popup-content { margin: 16px 18px; font-family: inherit; font-size: 13px; line-height: 1.55; min-width: 210px; }
.om-o-ime { display: block; font-size: 16px; font-weight: 700; color: #015643; margin-bottom: 4px; }
.om-o-red { display: block; color: #5a6b66; }
.om-o-akcije { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.om-o-akcije a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 12px;
	text-decoration: none;
}
.om-o-put { background: #015643; color: #fff !important; }
.om-o-tel { border: 1px solid #e2ebe7; color: #015643 !important; }

/* Mobitel */
@media (max-width: 860px) {
	.olea-mapa { padding: 12px 16px 48px; gap: 20px; }
	.om-hero { border-radius: 22px; }
	.om-polje { flex-basis: 100%; padding-left: 16px; }
	.om-polje input[type="search"] { height: 52px; font-size: 16px; padding: 0 10px !important; }
	.om-trazi { height: 52px; padding: 0 20px; }
	.om-oko-mene { flex: 1 1 100%; min-height: 56px; }
	.om-brojke { gap: 8px 22px; margin-top: 28px; }
	.om-brojke strong { font-size: 19px; }
	.om-tijelo { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
	.om-lista { height: auto; padding: 16px; }
	.om-karta { height: 420px; }
	.om-poziv-dugme { width: 100%; text-align: center; }
}
@media (max-width: 420px) {
	.om-trazi { padding: 0 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.om-ja, .om-oko-mene[aria-busy="true"] svg { animation: none; }
	.om-stavka, .om-trazi, .om-oko-mene { transition: none; }
}


.om-b2b-uvod .om-b2b-tel { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.om-b2b-uvod .om-b2b-tel:hover { color: #c5d86d; }

/* Dugi nazivi: tema daje nowrap svim dugmadima, ovdje vraćamo prelamanje. */
.om-stavka, .om-stavka .om-ime, .om-stavka .om-adresa { white-space: normal; text-align: left; }
.om-stavka .om-daljina { white-space: nowrap; padding-left: 10px; }