/* Brand logos swapped into the Site Title block: PetSmart | Vet Care. */
.vetcare-site-logo {
	display: flex;
	align-items: center;
	gap: 14px;
}

.vetcare-site-logo a {
	display: inline-flex;
	line-height: 0;
}

.vetcare-logo-petsmart svg {
	height: 28px;
	width: auto;
	display: block;
}

.vetcare-logo-vetcare svg {
	height: 18px;
	width: auto;
	display: block;
}

.vetcare-logo-divider {
	width: 1px;
	height: 26px;
	background: #acacac; /* Logo bar lives in the theme header, outside the --vc-* scope. */
	flex: 0 0 auto;
}

.vetcare-map-wrap {
	/* Figma sparky tokens — use these vars, don't hardcode hex. */
	--vc-red: #dd2834; /* Vet Care red. */
	--vc-red-dark: #c31f2a; /* darker Vet Care red — CTA hover. */
	--vc-ink: #131313; /* button/toolbar/foreground — primary text + icons. */
	--vc-placeholder: #ababab; /* placeholder + muted leading icon. */
	--vc-disabled: #acacac; /* button/background-on-disabled — secondary gray. */
	--vc-blue: #206ef6; /* button/primary — Apply. */
	--vc-blue-fill: #eaf0fe; /* pale brand-blue for the selected list row. */
	--vc-blue-hover: #f4f7fd; /* even paler brand-blue for hover/focus. */
	--vc-fill: #f7f7f7; /* button/modal + selected-row fill. */
	--vc-border: #e5e6ea; /* section divider gray. */
	--vc-green: #008a1a; /* Sparky green 700 — "open" status. */
	--vc-green-dark: #15713f;
	--vc-orange: #b45303; /* Sparky orange 900 — "closed" / "opens at" status. */
	--vc-pill-bg: #f0f1f2;
	--vc-text: #333;
	--vc-muted: #5b5b5b;
	display: flex;
	flex-direction: column;
	height: var(--vetcare-map-height, 600px);
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	overflow: hidden;
}

/* The optional notice sits on top (auto height); this grid fills the rest. */
.vetcare-map-grid {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: 380px 1fr;
}

/* Theme overrides, scoped via :has() so they ONLY affect a page that renders
   the fullscreen map — the rest of the site (Ollie header/footer/titles) is
   untouched. Targets Ollie's core-block markup. */
body:has( .vetcare-map-wrap.is-fullscreen ) .wp-block-post-title,
body:has( .vetcare-map-wrap.is-fullscreen ) .site-header .wp-block-navigation {
	display: none !important;
}

/* Logo bar ("top bar"): drop the theme's bottom border rule, swap in the Figma
   drop shadow, and align the logo with the edge-to-edge content below it. */
body:has( .vetcare-map-wrap.is-fullscreen ) .site-header > .wp-block-group {
	border-bottom: 0 !important; /* kill the inline border-bottom rule. */
	box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.2 ); /* sparky/box-shadow/sm: offset (0,1), blur 2, spread 1. */
	padding-left: 16px !important;  /* match .vetcare-headline / .vetcare-search (16px). */
	padding-right: 16px !important;
}

/* Defeat the inner alignwide constraint so the logo sits flush-left at 16px,
   lining up with the headline and search instead of the centered wide column. */
body:has( .vetcare-map-wrap.is-fullscreen ) .site-header > .wp-block-group .alignwide {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Collapse the theme's padding (vertical xx-large + horizontal global padding)
   on every layout wrapper that contains the map, so it sits flush under the
   header and edge-to-edge. */
.is-layout-flow:has( .vetcare-map-wrap.is-fullscreen ),
.is-layout-constrained:has( .vetcare-map-wrap.is-fullscreen ),
.has-global-padding:has( .vetcare-map-wrap.is-fullscreen ),
.wp-block-post-content:has( .vetcare-map-wrap.is-fullscreen ) {
	padding: 0 !important;
	margin: 0 !important;
}

/* Full-bleed app layout: header (rendered by the theme) sits above; this fills
   the rest of the viewport edge-to-edge. Breaks out of the theme's constrained
   content width; the exact height is set by JS (window height minus its top). */
.vetcare-map-wrap.is-fullscreen {
	width: 100%;        /* parent's horizontal padding is zeroed above → fills viewport. */
	max-width: none !important; /* beat the theme's constrained max-width. */
	margin: 0 !important;       /* beat the theme's centering margin: auto. */
	height: 80vh; /* JS overrides with the precise fill height on load/resize. */
	border: 0;
	border-radius: 0;
}

.vetcare-map-notice {
	flex: 0 0 auto;
	padding: 12px 16px;
	background: #fff8e1;
	border-bottom: 1px solid #f0e0a0;
	font-size: 14px;
}

/* --- Headline (H1) --- */
/* Plain white, no rule/shadow — the drop shadow lives on the logo bar above. */
.vetcare-headline {
	flex: 0 0 auto;
	background: #fff;
	padding: 16px; /* left edge aligns with .vetcare-search / .vetcare-filterbar (16px). */
}

.vetcare-headline-title {
	margin: 0; /* reset theme/browser h1 margins. */
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: var(--vc-ink);
}

.vetcare-sidebar {
	position: relative; /* anchor for the full-height drawers. */
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--vc-border);
	background: #fff;
	min-height: 0;
	color: var(--vc-text);
}

/* --- Search bar --- */
.vetcare-search {
	display: flex;
	align-items: center;
	gap: 16px; /* Figma gap-16. */
	min-height: 69px; /* Figma textfield height; input stretches to fill it. */
	padding: 0 20px; /* Figma px-20; height comes from min-height so the field fills full height. */
	border-bottom: 1px solid var(--vc-border); /* Figma 1px divider above the filter row. */
	flex: 0 0 auto;
}

.vetcare-search-icon {
	width: 24px; /* Figma size-24. */
	height: 24px;
	color: var(--vc-placeholder); /* Figma: leading icon matches placeholder gray. */
	flex: 0 0 auto;
}

/* When the clear (X) button is shown, hide the magnifying-glass — they share
   the leading slot so only one icon is ever visible. */
.vetcare-search:has( .vetcare-search-clear:not( [hidden] ) ) .vetcare-search-icon {
	display: none;
}

.vetcare-search-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vc-ink);
	cursor: pointer;
	flex: 0 0 auto;
	border-radius: 4px;
}

.vetcare-search-clear svg {
	width: 20px;
	height: 20px;
}

.vetcare-search-clear:hover {
	background: #f3f3f3;
}

.vetcare-search-clear[hidden] {
	display: none;
}

/* The Ollie theme styles all inputs with a border/shadow/radius via a selector
   that out-specifies a plain class, so !important is needed to render the field
   as borderless inline text (incl. :focus), per Figma. */
.vetcare-search .vetcare-search-input {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch; /* Fill the full height of the search bar. */
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	font-size: 16px; /* Figma body/regular/lg. */
	color: var(--vc-text);
	background: transparent !important;
	padding: 0 !important;
}

.vetcare-search-input::placeholder {
	color: var(--vc-placeholder); /* Figma placeholder. */
}

.vetcare-geolocate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--vc-ink); /* Figma: locate icon is near-black. */
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	flex: 0 0 auto;
}

.vetcare-geolocate svg {
	width: 24px; /* Figma size-24. */
	height: 24px;
}

.vetcare-geolocate:hover {
	background: #f3f3f3;
}

.vetcare-geolocate.is-locating {
	color: var(--vc-green);
	animation: vetcare-pulse 1s ease-in-out infinite;
}

@keyframes vetcare-pulse {
	50% { opacity: 0.4; }
}

/* Suggestions dropdown — Mapbox geocoding results, anchored to the search bar.
   The .vetcare-search row is the positioning context (see below). */
.vetcare-search {
	position: relative;
}

.vetcare-search-suggestions {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 10;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--vc-border);
	border-top: 0;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
	max-height: 280px;
	overflow-y: auto;
}

.vetcare-search-suggestion {
	padding: 10px 20px; /* match .vetcare-search horizontal padding. */
	font-size: 14px;
	color: var(--vc-text);
	cursor: pointer;
	line-height: 1.35;
}

.vetcare-search-suggestion:hover,
.vetcare-search-suggestion:focus {
	background: var(--vc-blue-hover);
	outline: none;
}

/* --- Filter bar --- */
.vetcare-filterbar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--vc-border);
	flex: 0 0 auto;
}

/* Both controls are identical toggle buttons — same layout, font and behavior. */
.vetcare-filter-toggle,
.vetcare-distance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 16px 10px 16px 20px; /* Figma pl-20 pr-10. */
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-align: left;
	color: var(--vc-ink); /* Both dropdowns match: near-black. */
}

.vetcare-filter-toggle {
	border-right: 1px solid var(--vc-border); /* divider between the two. */
}

/* Label + selected-count bubble, grouped left of the chevron. */
.vetcare-filter-toggle-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* Active-filter count shown inline as "(2)" — click to clear all filters. */
.vetcare-filter-count {
	color: var(--vc-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: color 0.15s ease;
}

.vetcare-filter-count[hidden] {
	display: none;
}

/* Hover cues that clicking the count clears filters. */
.vetcare-filter-count:hover {
	color: var(--vc-red);
	text-decoration: underline;
}

.vetcare-chevron {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.vetcare-filter-toggle.is-open .vetcare-chevron,
.vetcare-distance.is-open .vetcare-chevron {
	transform: rotate( 180deg );
}

/* Disabled until a search context exists (typed input or geolocate result).
   pointer-events stays enabled so the explainer tooltip can show on hover/focus;
   the click handler in map.js no-ops while .is-disabled is present. */
.vetcare-distance.is-disabled {
	position: relative; /* anchor for the explainer tooltip below. */
	color: var(--vc-disabled);
	cursor: not-allowed;
}

.vetcare-distance.is-disabled .vetcare-chevron {
	opacity: 0.5;
}

/* "Why is this greyed out?" tooltip. Text comes from the data-vetcare-tooltip
   attribute set in templates/map.php; gated on .is-disabled so it disappears
   the moment the radius control becomes usable. */
.vetcare-distance.is-disabled:hover::after,
.vetcare-distance.is-disabled:focus-visible::after {
	content: attr( data-vetcare-tooltip );
	position: absolute;
	top: calc( 100% + 8px );
	right: 8px;
	z-index: 10;
	width: max-content;
	max-width: 220px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--vc-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	white-space: normal;
	box-shadow: 0 4px 12px rgba( 19, 19, 19, 0.18 );
	pointer-events: none;
}

/* Caret connecting the tooltip to the button. */
.vetcare-distance.is-disabled:hover::before,
.vetcare-distance.is-disabled:focus-visible::before {
	content: "";
	position: absolute;
	top: calc( 100% + 2px );
	right: 16px;
	z-index: 11;
	border: 6px solid transparent;
	border-bottom-color: var(--vc-ink);
	pointer-events: none;
}

/* --- Drawers (Filters / Radius) — overlay the whole sidebar --- */
.vetcare-drawer {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.vetcare-drawer[hidden] {
	display: none;
}

.vetcare-drawer-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border-bottom: 1px solid var(--vc-border);
}

.vetcare-drawer-title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: var(--vc-ink);
}

.vetcare-drawer-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 8px;
	border: 0;
	border-radius: 50%;
	background: var(--vc-fill);
	color: var(--vc-ink);
	cursor: pointer;
}

.vetcare-drawer-close .vetcare-x {
	width: 16px;
	height: 16px;
}

.vetcare-drawer-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-top: 16px;
}

.vetcare-drawer-footer {
	flex: 0 0 auto;
	padding: 16px;
}

.vetcare-apply {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 4px;
	background: var(--vc-blue);
	color: #fff;
	font: inherit;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	cursor: pointer;
}

/* Radius option rows inside the drawer body. */
.vetcare-radius-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 16px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: var(--vc-ink); /* near-black; selected row adds a fill highlight. */
}

.vetcare-radius-option.is-selected {
	background: var(--vc-fill);
	color: var(--vc-ink);
}

.vetcare-radius-check {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	visibility: hidden; /* only the selected row shows the checkmark. */
}

.vetcare-radius-option.is-selected .vetcare-radius-check {
	visibility: visible;
}

.vetcare-filters-empty {
	margin: 0;
	padding: 0 16px;
	color: #8a8a8a;
	font-size: 13px;
}

/* --- Providers (hospital types) --- */
/* The drawer subheading above the provider grid. */
.vetcare-providers-heading {
	margin: 0 0 12px;
	padding: 0 16px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: var(--vc-ink);
}

/* Two-column card grid, used both in the sidebar default view and the drawer. */
.vetcare-providers-browse,
.vetcare-providers-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 16px;
}

.vetcare-provider-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92px;
	padding: 0; /* logos ship with their own whitespace baked in. */
	overflow: hidden;
	border: 1px solid var(--vc-border);
	border-radius: 6px;
	background: var(--vc-fill);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.vetcare-provider-logo {
	display: block;
	width: 100%;
	height: auto;
}

.vetcare-provider-name {
	padding: 24px 16px;
	font-size: 15px;
	line-height: 19px;
	font-weight: 700;
	text-align: center;
	color: var(--vc-ink);
}

/* Selected card: blue ring + white field. */
.vetcare-provider-card.is-selected {
	background: #fff;
	border-color: var(--vc-blue);
	box-shadow: inset 0 0 0 1px var(--vc-blue);
}

/* Once anything is selected, fade the cards that aren't — so it's clear which
   providers are off. */
.has-selection .vetcare-provider-card:not( .is-selected ) {
	opacity: 0.4;
}

/* Hovering a dimmed card previews the selectable state: full opacity + blue
   ring, so it's clear the visitor can click to add it to the selection. */
.has-selection .vetcare-provider-card:not( .is-selected ):hover {
	opacity: 1;
	border-color: var(--vc-blue);
}

/* --- Service facets (vet care services + additional services) --- */
/* Section heading above each checkbox list. Matches the providers heading. */
.vetcare-facet-heading {
	margin: 24px 0 4px;
	padding: 0 16px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: var(--vc-ink);
}

.vetcare-facet-list {
	display: flex;
	flex-direction: column;
	padding: 4px 8px 8px;
}

/* One checkbox row: square box + label, full-width and left-aligned. */
.vetcare-facet-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	line-height: 22px;
	text-align: left;
	color: var(--vc-ink);
}

.vetcare-facet-box {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
}

.vetcare-facet-box rect {
	stroke: var(--vc-border);
	transition: fill 0.15s ease, stroke 0.15s ease;
}

.vetcare-facet-tick {
	stroke: #fff;
	opacity: 0; /* only the checked row shows the tick. */
}

.vetcare-facet-option:hover .vetcare-facet-box rect {
	stroke: var(--vc-blue);
}

/* Checked: blue-filled box + white tick. */
.vetcare-facet-option.is-selected .vetcare-facet-box rect {
	fill: var(--vc-blue);
	stroke: var(--vc-blue);
}

.vetcare-facet-option.is-selected .vetcare-facet-tick {
	opacity: 1;
}

/* --- Faceted gray-out: an option that can't yield any results is disabled.
   Applies to provider cards (both surfaces) and service rows. Disabled wins
   over the provider hover-preview because pointer-events are off. --- */
.vetcare-provider-card.is-disabled,
.vetcare-facet-option.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* Default-view toggle: provider grid shows by default; the list takes over once
   a provider is selected or a search is active (JS toggles .is-browsing). */
.vetcare-sidebar:not( .is-browsing ) [data-vetcare-providers-browse] {
	display: none;
}

.vetcare-sidebar.is-browsing .vetcare-list {
	display: none;
}

/* --- List + cards --- */
.vetcare-list {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	flex: 1 1 auto;
	/* The list is virtualized — renderWindow() rebuilds its innerHTML on every
	   scroll frame. Disable the browser's scroll-anchoring so it doesn't nudge
	   scrollTop to "keep an anchor stable" and fight the visitor's scroll. */
	overflow-anchor: none;
}

/* Sized stand-ins for off-window rows in the virtualized list — they reserve the
   scroll height of cards that aren't currently in the DOM. No box, no interaction. */
.vetcare-list-spacer {
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
}

/* Two-column grid so the provider badge sits in column 2 next to the address,
   while the action button (Show more / close X) anchors column 2 at the top. */
.vetcare-item {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	grid-template-areas:
		"title  action"
		"addr   logo"
		"status status";
	column-gap: 16px;
	row-gap: 16px;
	padding: 22px 18px;
	border-bottom: 1px solid var(--vc-border);
	cursor: pointer;
	transition: background 0.15s ease;
}

.vetcare-item.is-expanded {
	grid-template-areas:
		"title  action"
		"addr   logo"
		"status status"
		"extras extras";
}

.vetcare-item:hover,
.vetcare-item:focus {
	background: var( --vc-blue-hover );
	outline: none;
}

.vetcare-item.is-active {
	background: var( --vc-blue-fill );
	box-shadow: inset 3px 0 0 var( --vc-blue );
}

.vetcare-item-title {
	grid-area: title;
	align-self: start;
	margin: 0;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	color: var(--vc-ink);
}

.vetcare-item-address {
	grid-area: addr;
	align-self: center;
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--vc-ink);
}

/* Open/closed status: a colored dot + matching colored label. */
.vetcare-item-status {
	grid-area: status;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--vc-green);
}

.vetcare-item-status.is-closed {
	color: var(--vc-orange);
}

.vetcare-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vc-green);
	flex: 0 0 auto;
}

.vetcare-item-status.is-closed .vetcare-dot {
	background: var(--vc-orange);
}

/* "Show more" button — top of column 2. */
.vetcare-item-more {
	grid-area: action;
	align-self: start;
	justify-self: end;
	padding: 10px 18px;
	border: 0;
	border-radius: 4px;
	background: var(--vc-blue);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}

/* Provider logo in a small bordered card — aligned with the address row. */
.vetcare-item-logo {
	grid-area: logo;
	align-self: center;
	justify-self: end;
	width: 104px;
	padding: 0; /* logo image already includes its own whitespace. */
	overflow: hidden;
	border: 1px solid var(--vc-border);
	border-radius: 6px;
	background: #fff;
}

.vetcare-item-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Inline expanded card --- */
/* Expand state swap: hide Show more, show Close X, reveal the extras block. */
.vetcare-item-close {
	grid-area: action;
	align-self: start;
	justify-self: end;
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 8px;
	border: 0;
	border-radius: 50%;
	background: var( --vc-fill );
	color: var( --vc-ink );
	cursor: pointer;
}

.vetcare-item-close .vetcare-x {
	width: 16px;
	height: 16px;
}

.vetcare-item-extras {
	grid-area: extras;
	display: none;
	flex-direction: column;
	gap: 16px;
}

.vetcare-item.is-expanded {
	cursor: default;
	background: #fff;       /* override the .is-active pale-blue fill while expanded. */
	box-shadow: none;       /* drop the left ribbon too — match the spec's clean panel. */
}

.vetcare-item.is-expanded .vetcare-item-more {
	display: none;
}

.vetcare-item.is-expanded .vetcare-item-close {
	display: inline-flex;
}

.vetcare-item.is-expanded .vetcare-item-extras {
	display: flex;
}


/* Directions link — reads as a plain blue text link to Google Maps. */
.vetcare-item-directions {
	display: inline-block;
	color: var( --vc-blue );
	font-size: 18px;
	font-weight: 400;
	text-decoration: none;
	width: fit-content;
}

.vetcare-item-directions:hover {
	text-decoration: underline;
}

.vetcare-item-phone {
	display: block;
	margin: 0;
	font-size: 18px;
	color: var( --vc-ink );
	text-decoration: none;
}

.vetcare-item-website {
	color: var( --vc-ink );
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	width: fit-content;
}

.vetcare-item-website:hover {
	text-decoration: underline;
}

/* "Book now" primary CTA — filled Vet Care red, distinct from the plain website link. */
.vetcare-item-book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 10px 20px;
	border-radius: 999px;
	background: var( --vc-red );
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

.vetcare-item-book:hover {
	background: var( --vc-red-dark );
}

/* ShotVet collapsed "Check availability" CTA — surfaced on the card before
   "Show more". Hidden once expanded so the copy in the extras panel below
   isn't duplicated. Scoped to ShotVet via the .has-cta class set in makeCard. */
.vetcare-item.has-cta {
	grid-template-areas:
		"title  action"
		"addr   logo"
		"status status"
		"cta    cta";
}

/* When expanded, reuse the extras row (the collapsed CTA is display:none). The
   extra class keeps specificity above the generic .vetcare-item.is-expanded rule. */
.vetcare-item.has-cta.is-expanded {
	grid-template-areas:
		"title  action"
		"addr   logo"
		"status status"
		"extras extras";
}

/* Reuses .vetcare-item-website styling (plain text link, matching the copy shown
   after "Show more"); this rule only places it in the cta grid row. */
.vetcare-item-cta {
	grid-area: cta;
	justify-self: start;
}

.vetcare-item.is-expanded .vetcare-item-cta {
	display: none;
}

/* Tag pills (services + additional services). */
.vetcare-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vetcare-tag {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: var( --vc-pill-bg );
	color: var( --vc-ink );
	font-size: 14px;
	line-height: 1.2;
}

.vetcare-item-divider {
	margin: 4px 0;
	height: 1px;
	border: 0;
	background: var( --vc-border );
}

/* "Additional Services" accordion toggle. */
.vetcare-details-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --vc-ink );
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}

.vetcare-details-toggle[aria-expanded="true"] .vetcare-chevron {
	transform: rotate( 180deg );
}

.vetcare-services-extra[hidden] {
	display: none;
}

.vetcare-loading,
.vetcare-empty {
	padding: 18px;
	color: #888;
	font-size: 14px;
}

/* Distance-filter empty state: message + actions to widen the search radius. */
.vetcare-empty-radius {
	color: var(--vc-text);
	padding: 20px;
}

.vetcare-empty-message {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--vc-muted);
}

.vetcare-empty-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vetcare-empty-action {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	width: 100%;
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid var(--vc-blue);
	background: var(--vc-blue);
	color: #fff;
	cursor: pointer;
	text-align: center;
}

.vetcare-empty-action:hover {
	filter: brightness( 0.95 );
}

.vetcare-empty-action-secondary {
	background: #fff;
	color: var(--vc-blue);
}

.vetcare-empty-action-secondary:hover {
	background: var(--vc-blue-hover);
	filter: none;
}

.vetcare-map {
	min-height: 0;
}

/* Graceful fallback when Mapbox GL can't initialize (WebGL disabled/blacklisted or
   the CDN blocked). The list + filters still work; this fills the empty map pane
   with a centered notice (injected by map.js) instead of leaving it blank. */
.vetcare-map-wrap.vetcare-map-unavailable .vetcare-map {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 24px;
	background: var( --vc-fill );
}

.vetcare-map-down {
	max-width: 320px;
	text-align: center;
	color: var( --vc-muted );
	font-size: 14px;
	line-height: 20px;
}

/* Diagnostic reason line, shown only with ?vcdebug=1 so QA can read why the map
   failed without DevTools. Deliberately understated — it's a debugging aid, not
   part of the normal fallback message. */
.vetcare-map-down-reason {
	display: block;
	margin-top: 8px;
	color: var( --vc-muted );
	font-size: 12px;
	line-height: 16px;
	opacity: 0.75;
	word-break: break-word;
}

/* Markers — custom teardrop pin (assets/pin.svg via --vc-pin). */
.vetcare-marker {
	width: 25px;
	height: 30px;
	background: var(--vc-pin) center / contain no-repeat;
	cursor: pointer;
	transform-origin: bottom center;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.vetcare-marker.is-active {
	transform: scale( 1.35 );
	filter: drop-shadow( 0 4px 5px rgba( 0, 0, 0, 0.4 ) );
	z-index: 2;
}

/* "You are here" marker (set after geolocation). */
.vetcare-user-marker {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #2d7ff9;
	border: 3px solid #fff;
	box-shadow: 0 0 0 4px rgba( 45, 127, 249, 0.3 );
}

/* Pin hover/click info card (Mapbox popup, restyled). */
.vetcare-pin-popup .mapboxgl-popup-content {
	position: relative;
	padding: 22px 28px 20px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.18 );
	min-width: 260px;
	max-width: 320px;
	color: var( --vc-text );
}

.vetcare-pin-popup-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 28px 14px 0; /* right margin clears the close X */
	color: var( --vc-ink );
}

.vetcare-pin-popup-address {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.4;
	color: var( --vc-text );
}

.vetcare-pin-popup-address span {
	display: block;
}

.vetcare-pin-popup-directions {
	color: var( --vc-blue );
	font-size: 16px;
	text-decoration: none;
}

.vetcare-pin-popup-directions:hover,
.vetcare-pin-popup-directions:focus {
	text-decoration: underline;
}

.vetcare-pin-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	color: var( --vc-muted );
	cursor: pointer;
	line-height: 0;
}

.vetcare-pin-popup-close:hover,
.vetcare-pin-popup-close:focus {
	color: var( --vc-ink );
}

.vetcare-pin-popup-close .vetcare-x {
	width: 18px;
	height: 18px;
}

@media ( max-width: 640px ) {
	/* Wrap grows to content; defeat the JS-set inline height from fitHeight(). */
	.vetcare-map-wrap,
	.vetcare-map-wrap.is-fullscreen {
		height: auto;
		overflow: visible;
	}

	/* Center the headline on mobile (desktop stays flush-left). */
	.vetcare-headline {
		text-align: center;
	}

	/* Center the PetSmart | Vet Care logo bar in the theme header. */
	body:has( .vetcare-map-wrap.is-fullscreen ) .site-header > .wp-block-group .vetcare-site-logo {
		justify-content: center;
		width: 100%;
	}

	/* Stack: map first, then the sidebar (search / filters / providers / results). */
	.vetcare-map-grid,
	.vetcare-map-wrap.is-fullscreen .vetcare-map-grid {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		grid-template-rows: none;
	}

	.vetcare-map,
	.vetcare-map-wrap.is-fullscreen .vetcare-map {
		order: 1;
		height: 55vh;
		min-height: 320px;
		flex: 0 0 auto;
	}

	.vetcare-sidebar {
		order: 2;
		max-height: none; /* drop the 240px cap that was clipping content. */
		border-right: none;
		border-bottom: none;
		border-top: 1px solid var( --vc-border );
	}

	/* Let the page scroll instead of trapping scroll inside the result list. */
	.vetcare-list {
		overflow-y: visible;
		flex: 0 0 auto;
	}

	/* The sidebar is in page flow here with no height cap, so an absolutely
	   positioned drawer stretches to the full (tall) sidebar and pushes its
	   Apply footer off-screen. Pin the drawer to the viewport instead; dvh
	   keeps the footer above the Android Chrome URL bar. Covers both the
	   Filters and Radius drawers (shared class). */
	.vetcare-drawer {
		position: fixed;
		inset: 0;
		height: 100vh;  /* fallback for browsers without dvh. */
		height: 100dvh; /* dynamic viewport — footer stays above the URL bar. */
		z-index: 1000;  /* sit above the map + theme chrome as a modal. */
	}
}