.global-presence{
	margin-bottom: 50px;
}
.global-presence h2{
	text-transform: uppercase;
	font-size: 25px;
	margin-bottom: 20px;
}
#ikl-global-map{
	position: relative;
	width: 100%;
	/* Scales with viewport width between the two bounds, so it grows
	   on desktop, shrinks toward the floor on phones (never eating
	   the whole screen), and doesn't run away on ultra-wide monitors
	   either — .conteiner has no max-width, so the container itself
	   can get very wide. */
	height: clamp(340px, 50vw, 620px);
	border-radius: 15px;
	border: 2px solid #f26e1c;
	margin-top: 20px;
	z-index: 1;
}
.ikl-zoom-hint{
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 13px;
	white-space: nowrap;
	z-index: 1000;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ikl-zoom-hint.is-visible{
	opacity: 1;
}
#ikl-global-map .leaflet-control-attribution{
	background: transparent;
	box-shadow: none;
	font-size: 9px;
	line-height: 1.2;
	padding: 1px 4px;
	color: rgba(0, 0, 0, 0.45);
	opacity: 0.7;
}
#ikl-global-map .leaflet-control-attribution a{
	color: rgba(0, 0, 0, 0.45);
}
.ikl-marker-icon{
	background: transparent;
	border: none;
}
.ikl-marker-dot{
	width: 16px;
	height: 16px;
	background: #f26e1c;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(242, 110, 28, 0.28);
	cursor: pointer;
}
.ikl-office-tooltip{
	background: #fff;
	color: #000;
	border: none;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0,0,0,0.3);
	padding: 16px 18px 18px;
	font-size: 13px;
	line-height: 1.4;
	opacity: 1 !important;
	width: 380px;
	max-width: 380px;
	white-space: normal;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.ikl-office-tooltip::before{
	display: none;
}
.ikl-office-tooltip .ikl-office-name{
	display: block;
	flex: 0 0 auto;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 0.3px;
	margin-bottom: 4px;
	color: #000;
	border-left: 4px solid #f26e1c;
	padding-left: 10px;
}
.ikl-office-tooltip .ikl-office-address{
	display: flex;
	align-items: flex-start;
	gap: 6px;
	flex: 0 0 auto;
	font-size: 12.5px;
	color: #888;
	line-height: 1.5;
	margin-bottom: 12px;
	padding-left: 10px;
}
/* Nudged down a couple pixels so it lines up with the cap-height of
   the first address line rather than that line's full (1.5) height. */
.ikl-office-address-icon{
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: 2px;
	color: #f26e1c;
}
/* The one part of the popup allowed to scroll — see the max-height
   safety net in the tooltipopen handler. Name/address/actions are
   flex: 0 0 auto (fixed, always fully visible); this wrap is the
   only flexible (1 1 auto, min-height: 0) item, so it's the only
   one that gets compressed — and therefore the only one that can
   ever need its own scrollbar — when the popup hits that cap. */
.ikl-office-gallery-wrap{
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
/* Static showcase collage — a plain grid of the branch's photos, no
   carousel/autoplay/paging (every branch tops out at 4 photos, so
   there's never more than one page's worth to show). The
   aspect-ratio lives on the GRID ITSELF (not each cell) so the
   collage's total height stays fixed relative to the popup's width
   no matter how many rows of photos it holds, which the auto-flip/
   autoPan logic below (unchanged) needs: at this map's default
   zoom the world already fills the container edge-to-edge, leaving
   autoPan no slack to compensate for a popup taller than expected.
   grid-auto-rows:1fr then divides that fixed height evenly across
   however many rows exist. Each photo still fits whole via
   object-fit:contain — never cropped. */
.ikl-office-collage{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 6px;
	aspect-ratio: 4 / 3;
}
.ikl-office-collage.ikl-office-collage-single{
	grid-template-columns: 1fr;
}
.ikl-office-collage-item{
	min-width: 0;
	min-height: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ikl-office-collage-item img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	-webkit-user-drag: none;
	user-select: none;
}
/* Minimalist "icon + text" actions, styled after the place-card
   actions in Google/Apple Maps — no fill, no caps, just a subtle
   color shift on hover. A mix of <a> (mailto) and <button> (opens
   the rating modal), so this resets both to the same plain look. */
.ikl-office-actions{
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	margin-top: 14px;
}
/* Doubled-up selector (rather than plain .ikl-office-action) so this
   reliably outranks Leaflet's own ".leaflet-container a" rule, which
   would otherwise paint the "Send email" link its default blue. */
.ikl-office-actions .ikl-office-action{
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
	padding: 6px 4px;
	color: #555;
	font-size: 12.5px;
	line-height: 1.3;
	text-decoration: none;
	background: none;
	border: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.ikl-office-actions .ikl-office-action:hover{
	color: #f26e1c;
}
.ikl-office-action:hover .ikl-office-action-text{
	text-decoration: underline;
}
.ikl-office-action svg{
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}
.ikl-office-action-divider{
	width: 1px;
	margin: 2px 10px;
	background: #e2e2e2;
}
@media (max-width: 767px){
	.ikl-office-tooltip{
		width: 300px;
		max-width: 300px;
		padding: 12px 14px 14px;
	}
	.ikl-office-collage{
		aspect-ratio: 3 / 2;
	}
	.ikl-office-action{
		font-size: 11px;
		padding: 5px 3px;
	}
}
/* Branch rating form, opened from "Rate this branch" —
   a single instance shared by every marker's popup (built lazily
   on first use, reused after), centered on the viewport rather
   than anchored to the marker it was opened from. */
.ikl-rating-modal{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	padding: 20px;
	box-sizing: border-box;
}
.ikl-rating-modal.is-open{
	opacity: 1;
	visibility: visible;
}
.ikl-rating-modal-box{
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 30px 26px 26px;
	width: 440px;
	max-width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.ikl-rating-modal-close{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: none;
	border: none;
	color: #999;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.ikl-rating-modal-close:hover{
	background: #f4f4f4;
	color: #555;
}
.ikl-rating-modal-title{
	margin: 0 30px 22px 0;
	font-size: 17px;
	font-weight: 700;
	color: #222;
}
/* Two columns of three criteria rather than one long list — same
   row-gap for every gap between blocks (both within and across
   the implicit grid rows), so the six cells read as one even
   grid instead of a list with uneven spacing. */
.ikl-rating-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px 18px;
}
.ikl-rating-row-head{
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #444;
	margin-bottom: 7px;
}
.ikl-rating-row-label{
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}
.ikl-rating-row-label svg{
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: #f26e1c;
}
/* Stars and their numeric readout live in the same flex row (not
   opposite ends of the block) so the number reads as "belonging"
   to the stars right next to it. */
.ikl-rating-stars-row{
	display: flex;
	align-items: center;
	gap: 8px;
}
.ikl-rating-value{
	font-weight: 700;
	font-size: 13px;
	color: #f26e1c;
	white-space: nowrap;
}
.ikl-rating-stars{
	display: flex;
	gap: 4px;
}
/* Outline by default; filled (solid + orange) once selected by
   click, or previewed on hover up to the hovered star — same
   .is-filled class either way, toggled purely by JS re-rendering
   on mouseenter/mouseleave/click rather than any CSS :hover, since
   "up to and including this star" can't be expressed with sibling
   selectors alone here (stars are plain buttons, not radios). */
.ikl-rating-star{
	background: none;
	border: none;
	padding: 0;
	line-height: 0;
	cursor: pointer;
	color: #ccc;
}
.ikl-rating-star svg{
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}
.ikl-rating-star.is-filled{
	color: #f26e1c;
}
.ikl-rating-star.is-filled svg{
	fill: currentColor;
}
.ikl-rating-submit{
	display: block;
	width: 100%;
	margin-top: 26px;
	padding: 12px;
	border: none;
	border-radius: 6px;
	background: #f26e1c;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.ikl-rating-submit:hover{
	background: #d95e12;
}