/*
 * Location Finder — front-end styles per the Gulf.de mockups.
 * Every color/size routes through a CSS custom property so themes can
 * restyle without touching templates.
 */

.fsf-finder {
	--fsf-height: 640px;
	/* Brand colours sampled from the Gulf.de mockups. The settings page
	   overrides --fsf-primary / --fsf-navy per site; these are the fallbacks. */
	--fsf-primary: #f76a2d;        /* Gulf orange — CTAs, badges, active states */
	--fsf-primary-dark: #d95d28;   /* orange hover */
	--fsf-navy: #1a266f;           /* headings, chips border, buttons */
	--fsf-navy-light: #3c4684;     /* navy hover (also from the mockups) */
	--fsf-tinq-blue: #00a0df;      /* TinQ brand blue — matches marker-tinq.svg */
	--fsf-panel-bg: #ffffff;
	--fsf-panel-width: 340px;
	--fsf-text: #232d3f;
	--fsf-muted: #5a6482;
	--fsf-line: #d8dee8;
	--fsf-radius: 10px;
	--fsf-chip-radius: 8px;
	--fsf-shadow: 0 8px 28px rgba(16, 24, 64, 0.18);
	--fsf-font: inherit;

	position: relative;
	font-family: var(--fsf-font);
	color: var(--fsf-text) !important;
	line-height: 1.45 !important;
	margin: 0 0 1.5em;
}

.fsf-finder *,
.fsf-finder *::before,
.fsf-finder *::after { box-sizing: border-box; }

/* ---------- map area ---------- */

.fsf-map-wrap {
	position: relative;
	height: var(--fsf-height) !important;
	border-radius: var(--fsf-radius) !important;
	overflow: hidden;
	background: #dfe8ef !important;
}

.fsf-map { position: absolute; inset: 0; }

.fsf-map-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px !important;
	background: linear-gradient(0deg, rgba(223, 232, 239, 0.88), rgba(223, 232, 239, 0.88)),
		repeating-linear-gradient(45deg, #cfdbe6 0 2px, transparent 2px 14px) !important;
}

.fsf-map-placeholder p {
	max-width: 420px;
	background: var(--fsf-panel-bg) !important;
	border-left: 4px solid var(--fsf-primary) !important;
	border-radius: var(--fsf-chip-radius) !important;
	padding: 14px 18px !important;
	margin: 0;
	box-shadow: var(--fsf-shadow) !important;
	font-size: 14px !important;
}

/* ---------- floating panel (mockup) ---------- */

/* The dock is the positioned unit: buttons + panel travel together, exactly
   as they are drawn in the designs — the buttons butt straight up against the
   panel with no gap. It spans the map, so it must not swallow map gestures:
   only its children take pointer events.
   JS drives left/top (see positionDock) so moves can be animated. */
.fsf-panel-dock {
	position: absolute;
	top: 16px;
	right: 16px;
	/* Height follows the panel — JS caps the panel to the room left below (or
	   above) its anchor. A fixed calc() here would overflow the map as soon as
	   the anchor moved off the top edge. */
	height: auto !important;
	display: flex;
	/* flex-start, never stretch: the panel keeps its own height instead of
	   being pulled down to the map's, which used to leave dead white space
	   under the last filter group. */
	align-items: flex-start;
	gap: 0;
	z-index: 5;
	pointer-events: none;
}
.fsf-panel-dock > * { pointer-events: auto; }
.fsf-anchor-bottom .fsf-panel-dock { align-items: flex-end; }

/* Buttons sit on the map-facing side of the panel, whichever side it is on. */
.fsf-side-left .fsf-panel-dock { right: auto; left: 16px; flex-direction: row-reverse; }

/* Once JS takes over positioning, animate corner moves — but never while the
   visitor is dragging, or the dock would lag behind the pointer. */
.fsf-panel-dock.fsf-animated { transition: left 0.3s ease, top 0.3s ease; }
.fsf-panel-dock.fsf-dragging { transition: none; }
.fsf-panel-dock.fsf-placed { right: auto; bottom: auto; }

/* Closed: the panel is gone, so the dock is just the icon stack. */
.fsf-panel-closed .fsf-panel-dock { height: auto !important; }

.fsf-panel {
	position: relative;
	width: var(--fsf-panel-width) !important;
	height: var(--fsf-panel-height, auto) !important;
	max-height: 100%;
	background: var(--fsf-panel-bg) !important;
	border-radius: var(--fsf-radius) !important;
	box-shadow: var(--fsf-shadow) !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.28s ease, opacity 0.28s ease;
}

/* Closing: the panel leaves the flow at once — so the dock is immediately just
   the icon stack and can glide to its corner in the *same* motion — while
   staying visible over the spot it occupied and sliding away from there.
   left:100% is exactly its old flex position, so nothing jumps. */
.fsf-panel.fsf-slide-out {
	position: absolute;
	top: 0;
	left: 100%;
	height: 100% !important;
	transform: translateX(calc(100% + 24px));
	opacity: 0;
}
.fsf-side-left .fsf-panel.fsf-slide-out {
	left: auto;
	right: 100%;
	transform: translateX(calc(-100% - 24px));
}

@media (prefers-reduced-motion: reduce) {
	.fsf-panel, .fsf-panel-dock.fsf-animated { transition: none; }
}

.fsf-layout-split { display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.fsf-layout-split .fsf-panel-dock { position: static; }
.fsf-layout-split .fsf-panel { box-shadow: none !important; border: 1px solid var(--fsf-line) !important; }

/* min-height:0 lets this flex child actually scroll instead of stretching.
   border-radius is repeated here (matching .fsf-panel's) rather than relying
   on .fsf-panel's overflow:hidden alone to round it off: a position:sticky
   descendant (.fsf-results-btn) can get promoted to its own compositing
   layer, which some browsers then fail to clip against a *separate* outer
   ancestor's rounded overflow:hidden - it paints past the rounded corner,
   straight onto the map. Rounding the scrolling element itself (the sticky
   button's actual containing scroller) clips reliably instead. */
.fsf-panel-scroll { overflow-y: auto; padding: 14px !important; flex: 1; min-height: 0 !important; border-radius: var(--fsf-radius) !important; }

/* ---------- open / close the panel ---------- */

/* The close button rides on the first row instead of owning a strip of its
   own. It floats at the row's right end rather than taking width from it, so
   the control beside it keeps the panel's full width and lines up with the
   search field below. min-height keeps the row usable when the close button
   is all it holds (e.g. nearest="off"). */
.fsf-head-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	min-height: 28px !important;
}
.fsf-head-row > :first-child { flex: 1; margin-bottom: 0; }
.fsf-head-row .fsf-back { padding-bottom: 0; }
/* Reserve room so the label never runs under the close button. */
.fsf-head-row .fsf-nearest { padding-right: 48px; }
.fsf-head-row .fsf-panel-close {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}

.fsf-panel-close {
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex: 0 0 auto;
	border-radius: 50% !important;
	border: 1.5px solid var(--fsf-navy) !important;
	background: var(--fsf-panel-bg) !important;
	color: var(--fsf-navy) !important;
	font-size: 13px !important;
	line-height: 1 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}
.fsf-panel-close:hover { background: var(--fsf-primary) !important; border-color: var(--fsf-primary) !important; color: #fff !important; }

/* Map buttons — orange search square + navy locate circle, per the designs.
   Docked flush against the panel's map-facing edge and moving with it. */
/* Flush with the panel's anchored edge: the icons and the panel start on the
   same line, which is the Y from the position setting. */
.fsf-map-buttons {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	align-self: flex-start;
}
.fsf-side-left .fsf-map-buttons { align-items: flex-start; }

/* Anchored to the bottom, the stack hangs off the panel's lower edge so its Y
   is identical whether the panel is open or closed. */
.fsf-anchor-bottom .fsf-map-buttons { align-self: flex-end; }


.fsf-btn-search,
.fsf-btn-locate {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	cursor: pointer;
	box-shadow: var(--fsf-shadow) !important;
	padding: 0 !important;
	color: #fff !important;
}

/* Square against the panel, rounded on the map-facing side only — the search
   button reads as a tab of the panel rather than a separate control. */
.fsf-btn-search {
	background: var(--fsf-primary) !important;
	border-radius: var(--fsf-chip-radius) 0 0 var(--fsf-chip-radius) !important;
}
.fsf-side-left .fsf-btn-search { border-radius: 0 var(--fsf-chip-radius) var(--fsf-chip-radius) 0 !important; }
/* Detached from the panel, it is rounded all round again. */
.fsf-panel-closed .fsf-btn-search { border-radius: var(--fsf-chip-radius) !important; }
.fsf-btn-search:hover { background: var(--fsf-primary-dark) !important; }

.fsf-btn-locate {
	background: var(--fsf-navy) !important;
	border-radius: 50% !important;
}
.fsf-btn-locate:hover { background: var(--fsf-navy-light) !important; }
.fsf-btn-locate.fsf-busy { opacity: 0.6; pointer-events: none; }

/* The icon stack is the drag handle once the panel is closed. */
.fsf-panel-closed .fsf-map-buttons.fsf-draggable { cursor: grab; touch-action: none; }
.fsf-panel-closed .fsf-map-buttons.fsf-dragging { cursor: grabbing; }

/* Closing hides the panel; the dock shrinks to just the buttons, which is
   how the visitor gets it back. */
.fsf-finder.fsf-panel-closed .fsf-panel { display: none; }
.fsf-layout-split.fsf-panel-closed { grid-template-columns: 1fr auto; }

.fsf-icon { display: block; }

/* Panel dragging */
.fsf-panel.fsf-draggable { cursor: grab; touch-action: none; }
.fsf-panel.fsf-dragging { cursor: grabbing; user-select: none; }
.fsf-panel.fsf-draggable .fsf-panel-scroll { cursor: auto; }

/* Icon badge + message + dismiss button, all-round card instead of the old
   flat left-border strip - reads as a deliberate alert rather than a stray
   line of orange-tinted text. Dismissible since geolocation/search notices
   aren't time-limited on their own; the visitor should be able to clear it
   once they've read it, not wait for the next state change to replace it. */
.fsf-note {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	background: #fff4ec !important;
	border: 1px solid #fcd9b8 !important;
	border-radius: var(--fsf-chip-radius) !important;
	padding: 12px 12px 12px 10px !important;
	margin: 0 0 12px;
	box-shadow: 0 2px 8px rgba(247, 106, 45, 0.12);
}

.fsf-note-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fsf-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	font-style: normal;
	line-height: 1;
}

.fsf-note-text {
	flex: 1;
	font-size: 12.5px !important;
	line-height: 1.5;
	color: var(--fsf-text) !important;
	padding-top: 2px;
}

.fsf-note-close {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 20px !important;
	height: 20px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	color: var(--fsf-muted) !important;
	font-size: 11px !important;
	line-height: 1 !important;
	cursor: pointer;
}
.fsf-note-close:hover { background: rgba(0, 0, 0, 0.06) !important; color: var(--fsf-text) !important; }

/* ---------- search & nearest ---------- */

.fsf-nearest {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100% !important;
	background: var(--fsf-navy) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--fsf-chip-radius) !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	margin-bottom: 10px;
}
.fsf-nearest:hover { background: var(--fsf-navy-light) !important; }
.fsf-nearest .fsf-icon { flex: 0 0 auto; }

.fsf-view-all {
	display: block !important;
	width: 100% !important;
	background: none !important;
	border: 1.5px solid var(--fsf-navy) !important;
	color: var(--fsf-navy) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 9px 12px !important;
	cursor: pointer;
	margin-bottom: 14px;
	text-align: center !important;
}
.fsf-view-all:hover { background: #eef2f9 !important; }

.fsf-search {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 2px solid var(--fsf-navy) !important;
	border-radius: var(--fsf-chip-radius) !important;
	padding: 4px 6px 4px 12px !important;
	margin-bottom: 14px;
	position: relative;
	color: var(--fsf-navy) !important;
}
.fsf-search > .fsf-icon { flex: 0 0 auto; }
.fsf-search input {
	flex: 1;
	border: 0 !important;
	outline: none !important;
	font-size: 14px !important;
	background: transparent !important;
	color: var(--fsf-text) !important;
	min-width: 0 !important;
}
.fsf-search-go {
	background: var(--fsf-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 15px !important;
	cursor: pointer;
	flex: 0 0 auto;
}
.fsf-search-go:hover { background: var(--fsf-primary-dark) !important; }

.fsf-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: -2px;
	right: -2px;
	background: var(--fsf-panel-bg) !important;
	border: 1px solid var(--fsf-line) !important;
	border-radius: var(--fsf-chip-radius) !important;
	box-shadow: var(--fsf-shadow) !important;
	list-style: none;
	margin: 0;
	padding: 4px 0 !important;
	z-index: 30;
	max-height: 240px;
	overflow-y: auto;
}
.fsf-suggest li {
	padding: 8px 12px !important;
	font-size: 13.5px !important;
	cursor: pointer;
	margin: 0;
}
.fsf-suggest li:hover,
.fsf-suggest li.fsf-active { background: #eef2f9 !important; }
.fsf-suggest .fsf-suggest-sub { color: var(--fsf-muted) !important; font-size: 12px !important; display: block; }

/* ---------- filters ---------- */

.fsf-filter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 0 10px;
	padding-top: 10px;
	border-top: 2px solid var(--fsf-primary) !important;
}
.fsf-filter-head h3 {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--fsf-navy) !important;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.fsf-filter-head h3 .fsf-icon { flex: 0 0 auto; }
.fsf-clear-all {
	background: transparent !important;
	border: 1px solid var(--fsf-navy) !important;
	border-radius: 999px !important;
	color: var(--fsf-navy) !important;
	font-size: 12px !important;
	padding: 4px 12px !important;
	cursor: pointer;
}
.fsf-clear-all:hover { background: #eef2f9 !important; }

.fsf-group { margin-bottom: 14px; }
.fsf-group-title {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--fsf-navy) !important;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.fsf-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.fsf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid var(--fsf-navy) !important;
	border-radius: var(--fsf-chip-radius) !important;
	background: var(--fsf-panel-bg) !important;
	color: var(--fsf-navy) !important;
	font-size: 12.5px !important;
	padding: 5px 10px !important;
	cursor: pointer;
	user-select: none;
}
.fsf-chip .fsf-box {
	width: 13px !important;
	height: 13px !important;
	border: 1.5px solid var(--fsf-navy) !important;
	border-radius: 3px !important;
	display: inline-block;
	position: relative;
	flex: 0 0 auto;
}
.fsf-chip.fsf-on {
	background: var(--fsf-navy) !important;
	color: #fff !important;
}
.fsf-chip.fsf-on .fsf-box { border-color: #fff !important; background: #fff !important; }
.fsf-chip.fsf-on .fsf-box::after {
	content: "✓";
	position: absolute;
	inset: -3px 0 0 1px;
	font-size: 11px !important;
	color: var(--fsf-navy) !important;
}

.fsf-more {
	background: none !important;
	border: 0 !important;
	color: var(--fsf-navy) !important;
	font-size: 12.5px !important;
	text-decoration: underline !important;
	cursor: pointer;
	padding: 6px 0 0 !important;
}

/* ---------- results button & list ---------- */

/* Sticky at the bottom of the scrollable filter list (.fsf-panel-scroll is
   the overflow-y:auto ancestor position:sticky anchors to) instead of
   scrolling away with the filters above it - visible and reachable with one
   thumb on mobile no matter how far down the filter list someone has
   scrolled. .fsf-panel-scroll gets its own opaque background (rather than
   just relying on .fsf-panel's) so the area around the pinned button is
   reliably white. The ::before sits flush above the button - not overlapping
   its box - and fades content scrolling underneath into that white instead
   of clipping it abruptly. (An earlier version had the ::before overlap the
   button itself to fake a backdrop; an element's own background always
   paints behind its ::before regardless of z-index, so that painted solid
   white over the button's fill and hid it entirely - don't repeat that.) */
.fsf-panel-scroll { background: var(--fsf-panel-bg) !important; }

.fsf-results-btn {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: block !important;
	width: 100% !important;
	background: var(--fsf-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--fsf-chip-radius) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	padding: 12px !important;
	cursor: pointer;
	margin-top: 4px;
}
.fsf-results-btn::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	height: 20px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}
.fsf-results-btn:hover {
	background: var(--fsf-primary-dark) !important;
}
/* Brief scale/flash triggered from JS (updateCount()) only when the result
   count actually changes - confirms a filter change registered, on a button
   whose text otherwise just updates silently with no other feedback. */
.fsf-results-btn.fsf-pulse { animation: fsf-results-pulse 0.4s ease; }

@keyframes fsf-results-pulse {
	0% { transform: scale(1); }
	35% { transform: scale(1.035); box-shadow: 0 -8px 20px rgba(16, 24, 64, 0.3); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.fsf-results-btn.fsf-pulse { animation: none; }
}

.fsf-back {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none !important;
	border: 0 !important;
	color: var(--fsf-navy) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	padding: 0 0 12px !important;
}
.fsf-back .fsf-back-ico {
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background: var(--fsf-primary) !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px !important;
}

.fsf-card {
	border: 1.5px solid var(--fsf-navy) !important;
	border-radius: var(--fsf-chip-radius) !important;
	padding: 10px 12px !important;
	margin-bottom: 10px;
	cursor: pointer;
	background: var(--fsf-panel-bg) !important;
}
.fsf-card:hover { border-color: var(--fsf-primary) !important; }
.fsf-card-tinq { border-color: var(--fsf-tinq-blue) !important; }
.fsf-card.fsf-selected {
	border-color: var(--fsf-primary) !important;
	box-shadow: 0 0 0 1px var(--fsf-primary) !important;
}
.fsf-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fsf-card-name { font-size: 14.5px !important; font-weight: 700 !important; color: var(--fsf-navy) !important; margin: 0 0 6px; }
.fsf-card-pin { display: none; }
.fsf-card.fsf-selected .fsf-card-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	background: var(--fsf-primary) !important;
	border-radius: var(--fsf-chip-radius) !important;
	color: #fff !important;
	font-size: 16px !important;
	flex: 0 0 auto;
}
.fsf-card-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px !important; flex-wrap: wrap; }
.fsf-card-distance { color: var(--fsf-muted) !important; margin-left: auto; }

.fsf-empty { font-size: 13.5px !important; color: var(--fsf-muted) !important; }

/* ---------- badge ---------- */

.fsf-badge {
	display: inline-block;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	border-radius: 4px !important;
	padding: 2px 8px !important;
}
.fsf-badge-open { background: var(--fsf-primary) !important; color: #fff !important; }
.fsf-badge-closed { background: transparent !important; color: var(--fsf-navy) !important; border: 1px solid var(--fsf-navy) !important; }
.fsf-hours-today { font-size: 12.5px !important; color: var(--fsf-text) !important; }

/* ---------- popup (info window) ---------- */

/* A definite width makes Google size the info window to fit, so long German
   place names and both action buttons wrap instead of being clipped. */
.fsf-popup { font-family: var(--fsf-font); width: 280px !important; max-width: 100%; padding: 6px 4px !important; }
.fsf-popup-name { font-size: 16px !important; font-weight: 700 !important; color: var(--fsf-navy) !important; margin: 0 0 8px; letter-spacing: 0.1px; }
.fsf-popup-status { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--fsf-primary) !important; }
.fsf-popup-address { font-size: 13px !important; margin: 0 0 10px; color: var(--fsf-muted) !important; line-height: 1.5; overflow-wrap: break-word; }
.fsf-popup-icons { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; font-size: 15px !important; }
.fsf-popup-icons .fsf-fico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px !important;
	height: 27px !important;
	background: #eef2f9 !important;
	border: 1px solid #dde6f3;
	border-radius: 6px !important;
	font-size: 14px !important;
	transition: transform 0.1s ease;
}
.fsf-popup-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.fsf-popup-actions .fsf-btn { flex: 1 1 auto; justify-content: center; }

.fsf-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	padding: 7px 14px !important;
	cursor: pointer;
	text-decoration: none !important;
	white-space: nowrap;
}
.fsf-btn-outline { background: #fff !important; border: 1.5px solid var(--fsf-navy) !important; color: var(--fsf-navy) !important; }
.fsf-btn-outline:hover { background: #eef2f9 !important; }
.fsf-btn-primary { background: var(--fsf-navy) !important; border: 1.5px solid var(--fsf-navy) !important; color: #fff !important; }
.fsf-btn-primary:hover { background: var(--fsf-navy-light) !important; color: #fff !important; }

/* ---------- detail overlay ---------- */

.fsf-detail {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 64, 0.6) !important;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px !important;
	border-radius: var(--fsf-radius) !important;
}
.fsf-detail[hidden] { display: none; }

.fsf-detail-inner {
	background: var(--fsf-panel-bg) !important;
	border-radius: 16px !important;
	max-width: 760px;
	width: 100% !important;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	box-shadow: 0 24px 60px rgba(16, 24, 64, 0.35) !important;
}
.fsf-detail-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
	background: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	font-size: 15px !important;
	cursor: pointer;
	z-index: 2;
	backdrop-filter: blur(4px);
}
.fsf-detail-close:hover { background: #fff !important; color: var(--fsf-navy) !important; }

/* Full-bleed gradient banner, rounded to match the modal's top corners - the
   station's "hero" moment, distinct from the flat white body below it. */
.fsf-detail-hero {
	text-align: center !important;
	padding: 34px 32px 26px !important;
	margin-bottom: 0;
	border-radius: 16px 16px 0 0;
	background: linear-gradient(135deg, var(--fsf-navy) 0%, var(--fsf-navy-light) 100%) !important;
	position: relative;
	overflow: hidden;
}
.fsf-detail-pin {
	display: inline-block;
	width: 30px !important;
	height: 30px !important;
	background: var(--fsf-primary) !important;
	border-radius: 50% 50% 50% 0 !important;
	transform: rotate(-45deg);
	margin-bottom: 14px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.fsf-detail-name {
	font-size: 26px !important;
	font-weight: 700 !important;
	color: #fff !important;
	letter-spacing: 0.2px;
	margin: 0;
}

.fsf-detail-body { padding: 26px 32px 32px !important; }

/* Contact card: a soft-tinted panel lifts address/hours/phone off the plain
   white body, so it reads as one grouped unit at a glance. */
.fsf-detail-address {
	background: #f6f8fc;
	border: 1px solid var(--fsf-line);
	border-radius: var(--fsf-chip-radius) !important;
	padding: 16px 18px !important;
	margin-bottom: 22px;
}
.fsf-detail-street { font-size: 16px !important; font-weight: 700 !important; color: var(--fsf-navy) !important; margin: 0 0 2px; }
.fsf-detail-city { font-size: 13.5px !important; color: var(--fsf-muted) !important; margin: 0 0 12px; }
.fsf-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.fsf-detail-status { display: flex; align-items: center; gap: 8px; margin: 0; }
.fsf-detail-phone { margin: 0; }
.fsf-detail-phone-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px;
	color: var(--fsf-navy) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	text-decoration: none !important;
}
.fsf-detail-phone-link:hover { color: var(--fsf-primary) !important; }

.fsf-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 0 0 24px; }
.fsf-detail-cols h4 {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px;
	color: var(--fsf-primary) !important;
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.fsf-hours-table { width: 100% !important; border-collapse: collapse; font-size: 13.5px !important; border: 1px solid var(--fsf-line); border-radius: 8px; overflow: hidden; }
.fsf-hours-table tr:nth-child(even) td { background: #f6f8fc; }
.fsf-hours-table td { padding: 7px 10px !important; }
.fsf-hours-table td:first-child { font-weight: 600 !important; color: var(--fsf-navy) !important; }

.fsf-feature-group { margin-bottom: 16px; }
.fsf-feature-group p { font-size: 13.5px !important; margin: 0; }
.fsf-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fsf-detail-chip {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid var(--fsf-line) !important;
	border-radius: var(--fsf-chip-radius) !important;
	background: #f6f8fc !important;
	color: var(--fsf-text) !important;
	font-size: 12.5px !important;
	padding: 4px 9px !important;
}

.fsf-detail-custom-fields {
	background: #f6f8fc;
	border: 1px solid var(--fsf-line);
	border-radius: var(--fsf-chip-radius) !important;
	padding: 14px 18px !important;
	margin-bottom: 22px;
}
.fsf-detail-custom-fields h4 {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px;
	color: var(--fsf-primary) !important;
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.fsf-detail-custom-field {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 13.5px !important;
	border-top: 1px solid var(--fsf-line);
}
.fsf-detail-custom-field:first-of-type { border-top: 0; }
.fsf-detail-custom-label { color: var(--fsf-muted); }
.fsf-detail-custom-value { color: var(--fsf-navy) !important; font-weight: 600 !important; text-align: right; }

.fsf-detail-actions { text-align: center !important; margin-top: 8px; }
.fsf-detail-actions .fsf-btn-primary {
	padding: 13px 30px !important;
	font-size: 14.5px !important;
	box-shadow: 0 10px 22px rgba(26, 38, 111, 0.3) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fsf-detail-actions .fsf-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 26px rgba(26, 38, 111, 0.38) !important;
}

/* ---------- responsive ---------- */

@media (max-width: 782px) {
	/* Narrow screens: the dock sits along the bottom, buttons above the panel. */
	.fsf-panel-dock,
	.fsf-side-left .fsf-panel-dock {
		top: auto;
		left: 12px;
		right: 12px;
		bottom: 12px;
		flex-direction: column;
		align-items: flex-end;
		max-height: 70%;
	}
	.fsf-panel { width: 100% !important; }
	.fsf-map-buttons { flex-direction: row; align-self: flex-end; }
	.fsf-layout-split { grid-template-columns: 1fr; }
	.fsf-detail-cols { grid-template-columns: 1fr; }
	.fsf-detail-hero { padding: 26px 20px 20px !important; }
	.fsf-detail-body { padding: 20px !important; }
}