/**
 * Complete Public-facing CSS for Facility Locator Plugin
 */

/* Design tokens (--gfl-*) moved to guardian-facility-locator-tokens.css in 3.2.0
   so the grid view can load them without this file. This stylesheet declares it
   as a wp_register_style dependency, so the tokens are always present. */

/* =============================================================================
   BASE STYLES & LEGACY COMPATIBILITY
   ============================================================================= */

/* General Container */
.guardian-facility-locator-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
}

/* Legacy CTA Button Styles */
.guardian-facility-locator-cta {
  margin: 20px 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.guardian-facility-locator-cta-button {
  display: inline-block;
  padding: 16px 32px;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background: #007bff;
  /* Fallback - actual color comes from inline style */
}

.guardian-facility-locator-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
}

/* Legacy Basic Popup Styles */
.guardian-facility-locator-popup {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  z-index: 99999 !important;
  overflow: auto !important;
}

.guardian-facility-locator-popup[style*='display: block'] {
  display: block !important;
}

.guardian-facility-locator-popup-content {
  position: relative;
  background-color: #fff;
  margin: 50px auto;
  padding: 30px;
  width: 80%;
  max-width: 800px;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  min-height: 200px;
  z-index: 1;
}

.guardian-facility-locator-popup-close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  z-index: 2;
}

.guardian-facility-locator-popup-close:hover {
  color: #333;
  background-color: #f0f0f0;
}

/* Legacy Form Styles */
.guardian-facility-locator-form {
  padding: 10px 0;
  min-height: 150px;
}

.guardian-facility-locator-form h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
  text-align: center;
}

.guardian-facility-locator-steps {
  min-height: 200px;
}

.guardian-facility-locator-step {
  display: none;
  animation: fadeIn 0.3s ease;
}

.guardian-facility-locator-step.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.guardian-facility-locator-field {
  margin-bottom: 20px;
}

.guardian-facility-locator-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.guardian-facility-locator-field input[type='text'],
.guardian-facility-locator-field input[type='email'],
.guardian-facility-locator-field select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.guardian-facility-locator-field-options {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guardian-facility-locator-field-option {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guardian-facility-locator-field-option label {
  display: inline-block;
  font-weight: normal;
  margin-left: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  line-height: 1.4;
}

.guardian-facility-locator-field-option input[type='radio'],
.guardian-facility-locator-field-option input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--gfl-primary);
}

/* =============================================================================
     ENHANCED FORM STYLES
     ============================================================================= */

.form-columns-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin: 20px 0;
}

.guardian-facility-locator-column {
  background: var(--gfl-surface);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.guardian-facility-locator-column h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.guardian-facility-locator-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  color: #374151;
}

.guardian-facility-locator-form-navigation {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--gfl-border);
}

.guardian-facility-locator-prev-btn,
.guardian-facility-locator-next-btn,
.guardian-facility-locator-submit-btn {
  padding: 12px 24px;
  background: var(--gfl-primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.guardian-facility-locator-prev-btn {
  background: #6b7280;
}

.guardian-facility-locator-prev-btn:hover {
  background: #4b5563;
}

.guardian-facility-locator-next-btn:hover,
.guardian-facility-locator-submit-btn:hover {
  background: var(--gfl-primary-hover);
}

.guardian-facility-locator-form-skip {
  margin-top: 16px;
  text-align: center;
}

a.guardian-facility-locator-skip-link,
.guardian-facility-locator-skip-link {
  color: var(--gfl-text);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

a.guardian-facility-locator-skip-link:hover,
a.guardian-facility-locator-skip-link:focus,
.guardian-facility-locator-skip-link:hover,
.guardian-facility-locator-skip-link:focus {
  color: var(--gfl-text-hover);
  text-decoration: none;
}

/* =============================================================================
     MAIN INTERFACE LAYOUT
     ============================================================================= */

.guardian-facility-locator-main-interface {
  width: 100%;
  height: 100%;
  position: relative;
  display: none;
  flex-direction: column;
}

.guardian-facility-locator-main-interface.active {
  display: flex;
}

/* =============================================================================
     STICKY FILTER BAR
     ============================================================================= */

.guardian-facility-locator-filter-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e1e5e9;
  z-index: var(--gfl-z-filterbar);
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-scroll-container {
  display: flex;
  align-items: center;
  /* wrap rather than side-scroll: the bar now carries the location + sort controls as well
     as the taxonomy dropdowns, and a hidden horizontal scroll would bury them. */
  flex-wrap: wrap;
  gap: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-scroll-container::-webkit-scrollbar {
  display: none;
}

.filter-items {
  display: flex;
  flex-wrap: wrap;
  /* wrap dropdown buttons to a new row instead of scrolling sideways */
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.filter-dropdown {
  position: relative;
  flex-shrink: 0;
}

.gfl-fbdrop {
  position: relative;
  flex-shrink: 0;
}

.filter-dropdown-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.filter-dropdown.open .filter-dropdown-arrow,
.gfl-fbdrop.open .filter-dropdown-arrow {
  transform: rotate(180deg);
}

.filter-dropdown-menu,
.gfl-fbdrop-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border: 1px solid var(--gfl-border);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  max-width: 320px;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  /* never scroll the option list sideways */
  z-index: var(--gfl-z-dropdown);
  display: none;
  margin-top: 4px;
  transform: translateY(-8px);
  opacity: 0;
  transition: all 0.2s ease;
  animation: dropDown 0.2s ease;
}

.filter-dropdown.open .filter-dropdown-menu,
.gfl-fbdrop.open .gfl-fbdrop-menu {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

/* Near the right edge of the bar these would run off screen, so they open leftward. */
.filter-actions .gfl-fbdrop-menu {
  left: auto;
  right: 0;
}

/* A tick reserved on every row so the label never shifts when the selection moves. */
.gfl-fbdrop-opt .gfl-opt-tick {
  width: 16px;
  flex: 0 0 auto;
  visibility: hidden;
  color: var(--gfl-primary);
}

.gfl-fbdrop-opt[aria-checked='true'] .gfl-opt-tick {
  visibility: visible;
}

/* Label plus an optional hint beneath it, e.g. why an option is unavailable. */
.gfl-fbdrop-opt .gfl-opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gfl-fbdrop-opt .gfl-opt-hint {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--gfl-muted);
}

@keyframes dropDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 0;
  -webkit-user-select: none;
  user-select: none;
}

.filter-option:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.filter-option:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.filter-option:hover {
  background: #f3f4f6;
}

.filter-option input[type='checkbox'] {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--gfl-primary);
  border-radius: 4px;
  margin-right: 8px;
}

/* Prevent double-click issues */
.filter-option input[type='checkbox']:focus {
  outline: 2px solid var(--gfl-primary);
  outline-offset: 2px;
}

.filter-option label {
  flex: 1;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  line-height: 1.4;
  -webkit-user-select: none;
  user-select: none;
}

/* -----------------------------------------------------------------------------
   IN-DROPDOWN OPTION SEARCH
   Sticky, because the menu is itself the scroll container: on a 30-item list the
   field has to stay reachable after you have scrolled past where it started.
   ----------------------------------------------------------------------------- */

.gfl-optsearch {
  /* Gutter width lives in one variable because the icon is absolutely positioned against it;
     the mobile sheet overrides just this and the glyph follows. Same binding as --gfl-panel-pad. */
  --gfl-optsearch-pad: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px var(--gfl-optsearch-pad);
  background: #fff;
  border-bottom: 1px solid var(--gfl-border);
}

/* Inside the field's left padding, not beside the field — a magnifier floating in the gutter
   reads as decoration rather than as "type here to search". */
.gfl-optsearch-icon {
  position: absolute;
  left: calc(var(--gfl-optsearch-pad) + 9px);
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

/* TYPED AND SCOPED ON PURPOSE — do not simplify to a bare .gfl-optsearch-input.
   Theme resets style the bare element, e.g. Astra ships
   `input[type="search"] { padding: .5rem 1rem; border-radius: 3px }` at (0,1,1), which beats a
   lone class at (0,1,0) and silently reclaims the left padding the magnifier sits in — the icon
   then lands on top of the placeholder. (0,2,1) wins outright, without relying on load order. */
.gfl-optsearch input.gfl-optsearch-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 9px 7px 31px;
  border: 1px solid var(--gfl-border);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: #374151;
  -webkit-appearance: none;
  appearance: none;
}

.gfl-optsearch input.gfl-optsearch-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.gfl-optsearch input.gfl-optsearch-input:focus {
  outline: 2px solid var(--gfl-primary);
  outline-offset: 1px;
  border-color: var(--gfl-primary);
}

/* Rows filtered out by the query. Hidden, never detached: the checkbox stays in the DOM so a
   selection made before the search still counts (see applyOptionSearch). Two classes, so this
   outranks the display:flex on .filter-option / .gfl-pop-opt. */
.filter-option.gfl-optsearch-hide,
.gfl-pop-opt.gfl-optsearch-hide {
  display: none;
}

.gfl-optsearch-empty {
  padding: 14px 16px;
  font-size: 14px;
  color: #6b7280;
}

.gfl-optsearch-empty[hidden] {
  display: none;
}

/* =============================================================================
     MAP AND SIDEBAR CONTAINER
     ============================================================================= */

.guardian-facility-locator-map-sidebar-container {
  display: flex;
  flex: 1;
  position: relative;
  height: calc(100% - 80px);
}

/* Legacy map container styles */
.guardian-facility-locator-map-container {
  margin-top: 20px;
}

.guardian-facility-locator-filters {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.guardian-facility-locator-filter {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 10px;
}

.guardian-facility-locator-filter label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
}

.guardian-facility-locator-filter select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 150px;
}

.guardian-facility-locator-map {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border: none;
}

.guardian-facility-locator-map-wrapper {
  flex: 1;
  position: relative;
  background: #f3f4f6;
}

/* =============================================================================
     DEDICATED MAP PAGE (view="map") — full-width map that fills the available
     content-area viewport (below the header/nav/title, above the footer).
     The height is set at runtime by sizeMapView() in the JS; the map stays in
     normal page flow (it does NOT cover the theme header, nav, or footer).
     ============================================================================= */

.guardian-facility-locator-container[data-view="map"] {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Clip the ~scrollbar-width horizontal overflow that 100vw introduces when a vertical
   scrollbar is present. overflow-y stays scrollable so the footer remains reachable. */
html.guardian-flocator-map-page,
body.guardian-flocator-map-page {
  overflow-x: hidden;
}

/* =============================================================================
     TAXONOMY ITEM DESCRIPTION TOOLTIPS (info icon next to filter/form options)
     ============================================================================= */

.guardian-facility-locator-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  border-radius: 50%;
  background: #6b7280;
  color: #fff;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  position: relative;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
  flex: 0 0 auto;
}

.guardian-facility-locator-tooltip:hover,
.guardian-facility-locator-tooltip:focus {
  background: #374151;
  outline: none;
}

.guardian-facility-locator-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 140px;
  max-width: 240px;
  width: max-content;
  padding: 8px 10px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: var(--gfl-z-tooltip);
  pointer-events: none;
}

.guardian-facility-locator-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111827;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: var(--gfl-z-tooltip);
  pointer-events: none;
}

.guardian-facility-locator-tooltip:hover::after,
.guardian-facility-locator-tooltip:focus::after,
.guardian-facility-locator-tooltip:hover::before,
.guardian-facility-locator-tooltip:focus::before {
  opacity: 1;
  visibility: visible;
}

/* =============================================================================
     GOOGLE STAR RATING (shown under the facility name on cards + detail panel)
     ============================================================================= */

.guardian-facility-locator-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
  font-size: 13px;
  color: #374151;
}

.grf-stars {
  position: relative;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  color: #d1d5db;
  /* empty stars */
  letter-spacing: 2px;
  white-space: nowrap;
}

.grf-stars::before {
  content: '★★★★★';
}

.grf-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f59e0b;
  /* filled stars */
}

.grf-stars-fill::before {
  content: '★★★★★';
}

.grf-rating-value {
  font-weight: 600;
}

.grf-rating-count {
  color: #6b7280;
}

.guardian-facility-locator-container[data-view="map"] .guardian-facility-locator-main-interface {
  min-height: 400px;
  /* fallback until sizeMapView() sets the exact height */
}

.guardian-facility-locator-container[data-view="map"] .guardian-facility-locator-map-sidebar-container {
  flex: 1;
  min-height: 0;
  height: auto;
}

.guardian-facility-locator-container[data-view="map"] .guardian-facility-locator-map-wrapper {
  height: 100%;
}

/* Override the template's inline height:100vh so the map fills its (flex) wrapper exactly. */
.guardian-facility-locator-container[data-view="map"] .guardian-facility-locator-map {
  height: 100% !important;
  margin-bottom: 0;
  border-radius: 0;
}

/* =============================================================================
     SIDEBAR
     ============================================================================= */

.guardian-facility-locator-sidebar {
  width: 360px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--gfl-z-sidebar);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--gfl-border);
  background: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

.results-count {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.facility-cards-container {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* =============================================================================
     FACILITY CARDS
     ============================================================================= */

.facility-card {
  background: white;
  border-bottom: 1px solid var(--gfl-border);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  animation: slideInLeft 0.3s ease;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.facility-card:hover {
  background: var(--gfl-surface);
}

.facility-card.highlighted {
  background: #eff6ff;
  border-left: 4px solid var(--gfl-primary);
  transform: translateX(0);
  box-shadow: inset 4px 0 0 var(--gfl-primary);
}

.facility-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.facility-card-header .facility-name {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.4;
  flex: 1;
  margin-right: 12px;
}

.facility-type {
  background: #e0f2fe;
  color: #0277bd;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.facility-address {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* =============================================================================
     IMAGE CAROUSEL
     ============================================================================= */

.facility-image-carousel {
  position: relative;
  margin-bottom: 16px;
  border-radius: var(--gfl-radius);
  overflow: hidden;
  background: var(--gfl-surface-2);
  aspect-ratio: 3 / 2;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Sideways drags are the photo swipe (public JS); vertical drags still scroll the panel and
   pinches still zoom the page. Only on a carousel with two or more photos (.gfl-swipeable),
   and scoped to the plugin's carousel: a single photo, and a theme slider using the same
   generic class names, keep the browser's own touch handling. */
.facility-image-carousel .carousel-container.gfl-swipeable {
  touch-action: pan-y pinch-zoom;
}

/* While the page is pinch-zoomed (class set from visualViewport in the public JS), sideways
   drags on the photo pan the page as everywhere else; the swipe stands down. */
.gfl-page-zoomed .facility-image-carousel .carousel-container.gfl-swipeable {
  touch-action: auto;
}

/* While a finger drags the strip it follows the finger directly; the slide transition returns
   for the snap on release. */
.facility-image-carousel.is-dragging .carousel-slides {
  transition: none;
}

.carousel-slides {
  display: flex;
  transition: transform 0.3s ease;
  height: 100%;
}

.carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A swipe must move the strip, not pick up the photo, select it, or (after a resting finger on
   iOS) open the Save Image menu, which cancels the swipe. Scoped like the touch-action above. */
.facility-image-carousel .carousel-slide img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.carousel-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f3f4f6 0%, var(--gfl-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gfl-muted);
  font-size: 14px;
  font-weight: 500;
}

.carousel-prev {
  left: 12px;
}

.carousel-next {
  right: 12px;
}

.carousel-indicators {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.carousel-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-indicator.active {
  background: white;
  transform: scale(1.2);
}

/* =============================================================================
     FEATURE TAGS
     ============================================================================= */

.facility-features {
  margin-bottom: 16px;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feature-tag {
  background: #f0f9ff;
  color: #0369a1;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #e0f2fe;
}

/* =============================================================================
     ACTION BUTTONS
     ============================================================================= */

.facility-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* =============================================================================
     LEGACY FACILITY LIST
     ============================================================================= */

.guardian-facility-locator-list {
  margin-top: 20px;
}

.facility-item {
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.facility-item h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
}

.facility-item p {
  margin: 5px 0;
  font-size: 14px;
}

.facility-item-categories,
.facility-item-attributes {
  margin-top: 10px;
}

.facility-item-categories span,
.facility-item-attributes span {
  display: inline-block;
  background-color: #f0f0f0;
  padding: 3px 8px;
  margin: 2px;
  border-radius: 3px;
  font-size: 12px;
}

.facility-item-actions {
  margin-top: 15px;
}

.facility-item-action {
  display: inline-block;
  margin-right: 10px;
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
}

.facility-item-action:hover {
  text-decoration: underline;
}

/* =============================================================================
     DETAILED FACILITY MODAL - GOOGLE MAPS STYLE
     ============================================================================= */

.facility-detail-modal {
  /* Absolute so the panel is contained within the map/sidebar container (which is
     position: relative) rather than floating over the whole viewport. */
  position: absolute;
  top: 20px;
  right: 20px;
  /* Height follows the content and only grows to the map's height, so a facility with
     little to show renders a short card instead of a full-height panel trailed by dead
     space. Past that cap .facility-detail-body scrolls as before. */
  max-height: calc(100% - 40px);
  width: 500px;
  max-width: calc(100% - 40px);
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* Hidden in-bounds (no off-screen transform, so it can't cause horizontal overflow or
     peek over the map). It only appears when a facility is clicked (.open is added in JS). */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: var(--gfl-z-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.facility-detail-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  /* Visible at once when opening (the fade is opacity's job), so focus can move into the panel
     in the same task; closing keeps the 0.3s visibility delay above. */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.facility-detail-content {
  /* Grows with the modal rather than height:100%, which resolved to auto once the modal
     switched to an auto height clamped by max-height — that let the body outgrow the
     panel and be clipped instead of scrolled. min-height:0 keeps the scroll working. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --gfl-panel-pad drives both this padding and the full-bleed masthead's negative
   margin, so the two can never drift apart. Override it (not the margin) per context. */
.facility-detail-body {
  --gfl-panel-pad: 24px;
  flex: 1;
  overflow-y: auto;
  padding: var(--gfl-panel-pad);
}

.facility-detail-header {
  margin-bottom: 20px;
}

.facility-detail-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.fl-panel-header .fl-panel-name {
  margin: 0 0 8px;
  font-family: var(--gfl-heading);
  font-size: 26px;
  line-height: 1.15;
  color: var(--gfl-primary);
}

.facility-detail-type {
  background: #e0f2fe;
  color: #0277bd;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

.facility-detail-info {
  margin-top: 20px;
}

.facility-detail-section {
  margin-bottom: 24px;
}

.facility-detail-section h4 {
  margin: 0 0 12px 0;
  font-size: 19px;
  font-weight: 400;
  font-family: var(--gfl-heading);
  color: var(--gfl-primary);
  border-bottom: 2px solid var(--gfl-accent);
  display: inline-block;
  padding-bottom: 3px;
}

.facility-detail-section p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}

.facility-detail-section a {
  color: var(--gfl-link);
  text-decoration: none;
}

.facility-detail-section a:hover {
  text-decoration: underline;
}

.facility-description {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
}

.facility-detail-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

/* =============================================================================
     MOBILE FILTER DRAWER
     ============================================================================= */

.mobile-filter-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1003;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.mobile-filter-drawer.open {
  transform: translateY(0);
}

.mobile-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--gfl-border);
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

.mobile-filter-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.mobile-filter-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.mobile-filter-section {
  margin-bottom: 24px;
}

.mobile-filter-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.mobile-filter-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-filter-footer {
  display: flex;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid var(--gfl-border);
  background: white;
}

/* =============================================================================
     MOBILE RESPONSIVE
     ============================================================================= */

@media (max-width: 768px) {
  .guardian-facility-locator-popup-content {
    width: 95% !important;
    margin: 20px auto !important;
    padding: 20px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  .guardian-facility-locator-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .guardian-facility-locator-container {
    height: 100vh;
    border-radius: 0;
  }

  .guardian-facility-locator-filter-bar {
    padding: 12px 16px;
  }

  /* The mobile styling for the location + sort controls is NOT here. It has to come after
     their base rules, which live further down the file — a media query adds no specificity,
     so an earlier @media block loses to a later unguarded rule. See the block at the end of
     the "SIDEBAR LOCATION + SORT CONTROLS" section. */

  .filter-items {
    display: none;
  }

  .mobile-filter-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gfl-primary);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }

  /* Map is the persistent background */
  .guardian-facility-locator-map-sidebar-container {
    position: relative;
    height: calc(100% - 64px);
  }

  .guardian-facility-locator-map-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Bottom sheet shell */
  .guardian-facility-locator-sidebar.gfl-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1001;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: none; /* JS owns vertical drag */
  }

  .guardian-facility-locator-sidebar.gfl-sheet.is-peek {
    height: 24%;
  }

  .guardian-facility-locator-sidebar.gfl-sheet.is-half {
    height: 52%;
  }

  .guardian-facility-locator-sidebar.gfl-sheet.is-full {
    height: 100%;
    border-radius: 0;
  }

  /* Grab handle */
  .gfl-sheet .sidebar-header {
    position: relative;
    cursor: grab;
    padding: 16px 20px 10px;
  }

  .gfl-sheet .sidebar-header::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
  }

  /* The scrollable list area; scroll only enabled at half/full (JS adds .is-scrollable) */
  .gfl-sheet .facility-list-scroll {
    flex: 1 1 auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .gfl-sheet.is-half .facility-list-scroll,
  .gfl-sheet.is-full .facility-list-scroll {
    overflow-y: auto;
  }

  /* Full-height detail view (distinct from the full list snap) */
  .gfl-sheet-detail {
    position: fixed;
    inset: 0;
    z-index: 1002;
    background: #fff;
    transform: translateY(100%);
    /* Hidden once it has slid away, so its buttons leave the tab order and the accessibility
       tree; visibility switches at the end of the close and at the start of the open. */
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
    display: flex;
    flex-direction: column;
  }

  .gfl-sheet-detail.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.28s ease;
  }

  /* The sheet is tighter than the desktop modal; the masthead's bleed follows
     automatically because it is derived from --gfl-panel-pad. */
  .gfl-sheet-detail .facility-detail-body {
    --gfl-panel-pad: 16px;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--gfl-panel-pad);
  }

  .facility-detail-modal {
    width: 100%;
  }

  /* NOTE: the mobile .fl-panel-body gap and .fl-role-items single-column override used to live
     here and were dead — the plain rules further down the file carry the same (0,1,0)
     specificity and a @media block adds none of its own, so the LATER rule won at every width
     (docs/frontend-ui-architecture.md §4.7c). They now sit after those rules instead. */

  /* Pin-tap peek card: compact single-facility summary shown at the top of the sheet
     (Peek snap) so the map stays visible until the user explicitly expands to detail. */
  .gfl-peek-slot {
    padding: 4px 12px 10px;
  }

  .gfl-peek-card {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .gfl-peek-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    flex: none;
    background: var(--gfl-border);
  }

  .gfl-peek-name {
    font-weight: 600;
    font-size: 15px;
  }

  .gfl-peek-meta {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: #6b7280;
    margin: 2px 0 6px;
  }

  .gfl-peek-cta {
    display: flex;
    gap: 8px;
  }

  /* Mobile filter chip row (lives in the sheet, below the grab handle) */
  .gfl-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 12px 10px;
    -webkit-overflow-scrolling: touch;
    flex: none;
  }

  .gfl-chip-badge {
    /* The badge sits on a selected chip, which uses the Primary button colours: it inverts that
       pair, so it stays legible with any colours chosen in Settings → Button Colours. */
    background: var(--gfl-btn-primary-text);
    color: var(--gfl-btn-primary-bg);
    font-weight: 700;
    border-radius: 8px;
    padding: 0 5px;
    font-size: 11px;
  }

  /* Popover + full-sheet overlays */
  .gfl-pop-wrap,
  .gfl-full-filter-wrap {
    position: fixed;
    inset: 0;
    z-index: 1003;
  }

  .gfl-pop-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
  }

  /* Group popover (live apply) */
  .gfl-pop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gfl-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .gfl-pop-head h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  }

  /* Full-bleed to the sheet's padding box so the sticky header covers rows sliding under it.
     Exactly -16px cancels .gfl-pop's padding; any more would push content past the scrollport
     and, since overflow-y:auto forces overflow-x to auto, raise a horizontal scrollbar. */
  .gfl-pop .gfl-optsearch {
    --gfl-optsearch-pad: 16px;
    /* Chrome resolves a sticky offset against the scroll container's CONTENT box, so top:0
       would pin the header 16px below the sheet's edge and let rows scroll through the gap.
       Cancelling .gfl-pop's padding pins it flush; the resting position is unaffected. */
    top: calc(var(--gfl-optsearch-pad) * -1);
    margin: 0 -16px 8px;
    padding: 8px var(--gfl-optsearch-pad) 10px;
  }

  .gfl-pop-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    font-size: 15px;
  }

  .gfl-pop-opt input[type='checkbox'] {
    width: 20px;
    height: 20px;
    flex: none;
  }

  /* Full filter sheet (explicit apply) */
  .gfl-full-filter {
    position: absolute;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .gfl-full-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #eef2f4;
  }

  .gfl-full-head h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
  }

  .gfl-full-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gfl-full-group {
    border-bottom: 1px solid #eef2f4;
  }

  .gfl-full-acc-count {
    color: #2563eb;
  }

  .gfl-full-acc-arrow {
    transition: transform 0.2s ease;
    color: #94a3b8;
  }

  .gfl-full-group.is-open .gfl-full-acc-arrow {
    transform: rotate(90deg);
  }

  .gfl-full-acc-body {
    display: none;
    padding: 0 16px 12px;
  }

  .gfl-full-group.is-open .gfl-full-acc-body {
    display: block;
  }

  .gfl-full-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    font-size: 15px;
  }

  .gfl-full-opt input[type='checkbox'] {
    width: 20px;
    height: 20px;
    flex: none;
  }

  .gfl-full-footer {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eef2f4;
  }

  .guardian-facility-locator-form-navigation {
    flex-direction: column;
    gap: 10px;
  }

  .guardian-facility-locator-prev-btn,
  .guardian-facility-locator-next-btn,
  .guardian-facility-locator-submit-btn {
    width: 100%;
  }

  .form-columns-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Thumb-friendly touch targets (Task 8): bump interactive controls to >= 44px
     on mobile without altering desktop sizing (all rules stay inside this block). */
  .guardian-facility-locator-container .gm-control-active,
  .guardian-facility-locator-container button.gm-ui-hover-effect {
    min-width: 44px;
    min-height: 44px;
  }
}

/* =============================================================================
     WIDESCREEN ADJUSTMENTS
     ============================================================================= */

@media (min-width: 1400px) {
  .guardian-facility-locator-sidebar {
    width: 400px;
  }
}

/* =============================================================================
     UTILITY STATES
     ============================================================================= */

/* No Results State */
.no-results {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 16px;
  background: white;
  border-radius: 8px;
  margin: 20px;
}

/* Loading States */
.facility-cards-container.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f4f6;
  border-top: 3px solid var(--gfl-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* =============================================================================
     SCROLLBARS & ACCESSIBILITY
     ============================================================================= */

/* Custom Scrollbars */
.facility-cards-container::-webkit-scrollbar,
.filter-dropdown-menu::-webkit-scrollbar,
.mobile-filter-content::-webkit-scrollbar,
.facility-detail-body::-webkit-scrollbar {
  width: 6px;
}

.facility-cards-container::-webkit-scrollbar-track,
.filter-dropdown-menu::-webkit-scrollbar-track,
.mobile-filter-content::-webkit-scrollbar-track,
.facility-detail-body::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.facility-cards-container::-webkit-scrollbar-thumb,
.filter-dropdown-menu::-webkit-scrollbar-thumb,
.mobile-filter-content::-webkit-scrollbar-thumb,
.facility-detail-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.facility-cards-container::-webkit-scrollbar-thumb:hover,
.filter-dropdown-menu::-webkit-scrollbar-thumb:hover,
.mobile-filter-content::-webkit-scrollbar-thumb:hover,
.facility-detail-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Accessibility Improvements */
.guardian-facility-locator-next-btn:focus,
.guardian-facility-locator-prev-btn:focus,
.guardian-facility-locator-submit-btn:focus {
  outline: 2px solid var(--gfl-primary);
  outline-offset: 2px;
}

.filter-option:focus-within {
  background: #f3f4f6;
  outline: 1px solid var(--gfl-primary);
  border-radius: 4px;
}

/* High contrast: a black card outline. `more` is the standard value; the old `high` never
   matched in any browser. */
@media (prefers-contrast: more) {
  .facility-card {
    border: 2px solid #000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  .guardian-facility-locator-container {
    height: auto;
    overflow: visible;
  }

  .guardian-facility-locator-map-wrapper {
    display: none;
  }

  .guardian-facility-locator-sidebar {
    width: 100%;
    position: static;
    box-shadow: none;
  }

  .facility-card {
    break-inside: avoid;
    border: 1px solid #000;
    margin-bottom: 20px;
  }
}

/* Reset any theme overrides that might interfere */
.guardian-facility-locator-popup * {
  box-sizing: border-box;
}

/* Prevent theme interference */
.guardian-facility-locator-popup p {
  margin: 0 0 1em 0;
}

.guardian-facility-locator-popup h1,
.guardian-facility-locator-popup h2,
.guardian-facility-locator-popup h3,
.guardian-facility-locator-popup h4,
.guardian-facility-locator-popup h5,
.guardian-facility-locator-popup h6 {
  margin: 0 0 0.5em 0;
  font-weight: 600;
}

/* Ensure buttons are visible and clickable */
.guardian-facility-locator-popup button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* =============================================================================
   Map UI redesign (v2.5.0): sidebar card + detail panel
   ========================================================================== */

/* Numeric score shown alongside the stars in both rating orderings. */
.grf-rating-score {
  font-weight: 600;
  color: #111827;
}

/* --- Sidebar card --- */

/* Rating + "Insurance Accepted" share one inline row on the card. */
.fl-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 10px;
}

.fl-rating-row .fl-rating-slot:empty {
  display: none;
}

.fl-rating-row .guardian-facility-locator-rating {
  margin: 0;
}

/* "Insurance Accepted" affordance: shield + label + caret, with a hover/focus tooltip. */
.fl-insurance-accepted {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #047857;
  cursor: help;
  outline: none;
}

.fl-inline-icon {
  color: #047857;
  flex: 0 0 auto;
}

.fl-caret-icon {
  color: #047857;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.fl-insurance-accepted:hover .fl-caret-icon,
.fl-insurance-accepted:focus .fl-caret-icon,
.fl-insurance-accepted:focus-within .fl-caret-icon {
  transform: rotate(180deg);
}

.fl-insurance-text {
  line-height: 1;
}

/* The rich tooltip element (can contain links). Revealed while the whole affordance is
   hovered/focused; because it's a descendant, moving the cursor onto it keeps it open so
   the links stay clickable. */
/* Anchored to the full-width row that holds the affordance, NOT to the affordance itself
   — see .fl-rating-row / .fl-panel-meta below. box-sizing matters: with content-box the
   24px of horizontal padding sits outside max-width and the box still overhangs. */
.fl-insurance-tooltip {
  position: absolute;
  box-sizing: border-box;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--gfl-z-tooltip);
  /* Both bounds yield to the row's width. A bare `min-width: 200px` outranks max-width and
     overflows again on narrow phones, where the text column is under 200px. */
  min-width: min(200px, 100%);
  max-width: min(280px, 100%);
  width: max-content;
  padding: 10px 12px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Invisible bridge so the cursor can travel from the label to the tooltip without a gap. */
.fl-insurance-tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.fl-insurance-accepted:hover .fl-insurance-tooltip,
.fl-insurance-accepted:focus .fl-insurance-tooltip,
.fl-insurance-accepted:focus-within .fl-insurance-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fl-insurance-tooltip a {
  color: #93c5fd;
  text-decoration: underline;
}

.fl-insurance-tooltip a:hover {
  color: #bfdbfe;
}

/* The tooltip is far wider than the affordance that owns it, so anchoring it to the
   affordance put its left edge wherever the row's preceding content happened to end —
   pushing it past the card and out of the sidebar. That cost two visible bugs at once:
   the box contributes to scrollable overflow even while visibility:hidden, so it gave the
   sidebar a permanent horizontal scrollbar, and on hover it was clipped by the sidebar's
   overflow:hidden. Making the full-width row the containing block instead pins the
   tooltip to the card's content edge, so its position no longer depends on the row's
   contents. The affordance is always the last flex item, so its bottom edge is the row's
   bottom edge and `top: calc(100% + 8px)` still lands directly beneath it. */
.fl-rating-row,
.fl-panel-meta {
  position: relative;
}

.fl-rating-row .fl-insurance-accepted,
.fl-panel-meta .fl-insurance-accepted {
  position: static;
}

/* =============================================================================
     SIDEBAR LOCATION + SORT CONTROLS
     These live in .sidebar-header, which on mobile is also the bottom sheet's drag
     handle — the drag gesture explicitly ignores touches landing in .gfl-locbar.
     ============================================================================= */

/* Sits inside .filter-actions, alongside Clear All — a horizontal strip, not a stack.
   nowrap keeps the pill and the sort control together as one atomic block: letting them
   wrap independently is what turned the filter bar into three ragged rows. */
.gfl-locbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.filter-actions {
  flex-wrap: nowrap;
}

/* The location button's own bits. Its shape comes from the BUTTONS section at the end of
   this file; only the label clamp is specific to it. */
.gfl-locdrop-label {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gfl-fbdrop .filter-dropdown-arrow {
  transition: transform 0.2s ease;
  opacity: 0.7;
}

/* The location menu holds a form rather than a list of options, so it gets padding the
   option-row menus don't need. */
.gfl-locmenu-pick,
.gfl-locmenu-set {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  min-width: 240px;
}

.gfl-locmenu-from {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gfl-text);
}

.gfl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Unset state: typing a ZIP and sharing the device location are peers, not a primary
   action and a fallback — the person searching is often not the person travelling. */
.gfl-locform {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.gfl-loc-input {
  flex: 1 1 120px;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--gfl-border);
  border-radius: var(--gfl-radius);
  background: #fff;
  color: var(--gfl-text);
  font-family: inherit;
  font-size: 14px;
}

.gfl-loc-input:focus-visible {
  outline: 2px solid var(--gfl-primary);
  outline-offset: 2px;
}

/* The map's two text fields (ZIP / city, and the filter search) are 16px on touch screens: iOS
   Safari zooms the whole page in when a field under 16px takes focus (the ZIP field pushed Go
   off the right edge; the filter search auto-focuses when a dropdown opens). any-pointer: coarse rather than a width
   breakpoint, so iPads, which zoom the same way at any width, are covered (including with a
   trackpad or keyboard attached, when the primary pointer reads as fine), and mouse-only users
   keep the 14px look. The two :not() raise it to (0,4,1), above the (0,3,1) rule Elementor's Site
   Settings → Form Fields typography emits (.elementor-kit-N input:not([type=button]):not(…)). */
@media (any-pointer: coarse) {
  .guardian-facility-locator-container input.gfl-loc-input:not([type='button']):not([type='submit']),
  .guardian-facility-locator-container input.gfl-optsearch-input:not([type='button']):not([type='submit']) {
    font-size: 16px;
  }
}

/* --- Mobile: the controls render into .gfl-chip-row, above the list ---------------------
   This block MUST stay after the base rules above. A media query contributes nothing to
   specificity, so when these lived in the earlier mobile section they were silently
   overridden by the unguarded desktop rules further down — the computed padding on a phone
   was the desktop 10px/16px. Same trap as the full-bleed masthead in 2.8.3. */
@media (max-width: 768px) {
  /* display:contents so the two buttons become direct flex children of the chip row and
     line up with the taxonomy chips instead of forming a nested group. */
  .gfl-locbar {
    display: contents;
  }

  .gfl-fbdrop {
    flex: none;
  }

  .gfl-locdrop-label {
    max-width: 12ch;
  }

  /* The anchored dropdown is desktop-only. On mobile these open the same scrim + sheet the
     filter chips use (openControlSheet), so the panel never has to escape .gfl-chip-row's
     horizontal overflow. */
  .gfl-fbdrop-menu {
    display: none !important;
  }

  /* Inside that sheet the location form is full width and the option rows are touch sized. */
  .gfl-pop .gfl-locmenu-pick,
  .gfl-pop .gfl-locmenu-set {
    padding: 0;
    min-width: 0;
  }

  .gfl-pop .gfl-loc-input {
    min-height: 44px;
  }
}

/* Distance label, on a sidebar card and in the detail panel's meta row. One rule set for
   both so the number reads identically wherever the visitor meets it. Previously defined
   only inside the mobile media query, back when "near me" was mobile-only. */
.fl-card-distance,
.fl-panel-distance {
  font-weight: 600;
  color: var(--gfl-link);
}

/* Non-blocking notice (geolocation denied, lookup failed). Also formerly mobile-only. */
.gfl-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 1100;
  background: #0f172a;
  color: #fff;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.25s;
}

.gfl-toast.show {
  opacity: 1;
}

/* Facility card thumbnail: the first uploaded image, beside the name and rating so the
   list stays scannable. A full-width banner would show half as many results per screen. */
.fl-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.fl-card-thumb {
  width: 76px;
  height: 76px;
  /* border-box so the placeholder's 1px border does not make it 2px larger than a photo */
  box-sizing: border-box;
  flex: 0 0 auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  background: var(--gfl-surface-2);
}

/* A facility with no photo gets the locator's own pin mark rather than a grey void, so a
   missing image reads as intentional in a list where its neighbours have one. */
.fl-card-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gfl-border);
  color: var(--gfl-primary);
  opacity: 0.28;
}

.fl-card-thumb--empty .fl-pin-icon {
  width: 26px;
  height: 26px;
}

/* min-width: 0 lets the text column shrink below its content's intrinsic width so long
   facility names wrap instead of forcing the thumbnail out of the card. */
.fl-card-top-text {
  flex: 1;
  min-width: 0;
}

.fl-card-top-text .facility-card-header {
  margin-bottom: 6px;
}

.fl-pin-icon {
  color: var(--gfl-muted);
  flex: 0 0 auto;
  margin-top: 2px;
}

.fl-hours-slot:empty,
.fl-hours:empty {
  display: none;
}

.fl-hours {
  margin: 0 0 12px;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}

.fl-hours-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.fl-tag {
  background: #f3f4f6;
  color: #374151;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* Highlighted Treatment Program lead tag. */
.fl-tag-lead {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-weight: 600;
}

/* Lazy-render sentinel (invisible; observed to load the next chunk). */
.fl-lazy-sentinel {
  height: 1px;
  width: 100%;
}

/* --- Detail panel additions --- */

/* Rating + treatment program + Insurance Accepted share one inline row under the name. */
.fl-panel-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
}

.fl-panel-meta .fl-rating-slot:empty {
  display: none;
}

.fl-panel-meta .guardian-facility-locator-rating {
  margin: 0;
}

.fl-panel-program {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  color: #111827;
}

/* roleIconImg() emits an <img> when the item has an uploaded logo and an <i> when it
   only has a picked Line Awesome class, so both need sizing — width/height alone do
   nothing to a non-replaced inline element. Mirrors the img./i. .fl-role-icon split. */
img.fl-program-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

i.fl-program-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--gfl-primary);
  flex: 0 0 auto;
}

.fl-panel-address {
  font-weight: 500;
  color: #374151;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.fl-panel-hours:empty {
  display: none;
}

.fl-panel-hours h4 {
  margin: 12px 0 8px;
}

/* About (expanded section, no longer a collapsible <details>) */
.fl-about .facility-description {
  margin-top: 4px;
}

/* Single-column detail panel layout (same flow on desktop and mobile). A two-column
   grid was tried in 2.8.0 but left large dead space whenever the panel was as tall as
   the map, so the content reads as one column at every width. */
/* The carousel runs edge to edge as the panel's masthead rather than sitting inset in
   the body padding. The modal's own border-radius + overflow:hidden clip its top
   corners, and .facility-detail-close was already placed to sit over it. The pull is
   derived from --gfl-panel-pad, so this single rule is correct at every viewport and
   in both the desktop modal and the mobile sheet. */
.facility-detail-body > .facility-image-carousel {
  margin: calc(var(--gfl-panel-pad, 24px) * -1) calc(var(--gfl-panel-pad, 24px) * -1) 16px;
  border-radius: 0;
}

.fl-panel-header {
  padding: 4px 0 8px;
}

.fl-panel-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
  min-width: 0;
}

/* Contact block (CTAs + address + hours) sits directly under the header so the
   actionable details stay above the long-form content. */
.fl-panel-contact {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  background: var(--gfl-surface);
  border: 1px solid var(--gfl-border);
  border-radius: var(--gfl-radius);
  padding: 16px;
}

/* The flex gaps above own the vertical rhythm, so the stacked children drop the
   margins they carry elsewhere (otherwise gap + margin compound into dead space). */
.fl-panel-body > .facility-detail-section {
  margin-bottom: 0;
}

/* The address now sits directly above the CTAs, and the column's 14px gap read as cramped
   under a line of text: the buttons looked attached to the address rather than following
   it. 8px more separates the statement from the actions it belongs to. */
.fl-panel-contact .fl-panel-address + .facility-detail-actions {
  margin-top: 8px;
}

.fl-panel-contact .facility-detail-actions {
  margin-top: 0;
}

/* "Hours" is a metadata label inside the contact block, not a content section, so it
   reads as a quiet utility label rather than borrowing the serif section-heading rule. */
.fl-panel-hours h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gfl-muted);
}

/* Role sections (Levels of Care, Highlights) — Airbnb-style icon + label rows */
.fl-role-items {
  display: grid;
  /* Pairs up at the 500px panel width and drops to one column on its own once a
     column would get too tight for a level-of-care name. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
}

.fl-role-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--gfl-text);
}

img.fl-role-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

i.fl-role-icon {
  font-size: 22px;
  color: var(--gfl-primary);
  width: 24px;
  text-align: center;
  flex: 0 0 auto;
}

/* Insurance Accepted logo grid */
/* Three fixed columns so the carriers read as a tidy plate rather than a ragged wrap —
   logos vary wildly in aspect ratio and a flex wrap left odd gaps on the last row. */
.fl-insurance-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
}

.fl-insurance-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--gfl-border);
  border-radius: 8px;
}

.fl-insurance-logo img {
  /* Up to 48px tall and 96px wide; never wider than the cell, so a wide wordmark cannot
     overflow it in the narrower mobile grid (about 86px of room per cell on a phone). */
  max-height: 48px;
  max-width: min(96px, 100%);
  object-fit: contain;
}

.fl-insurance-logo-text {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

/* Verify Insurance link */
.fl-verify-insurance {
  margin-top: 4px;
}

/* =============================================================================
   MOBILE OVERRIDES THAT MUST FOLLOW THEIR BASE RULES
   Placed at the very end on purpose. Each of these targets a selector whose base
   rule appears earlier at the SAME specificity, and a media query contributes no
   specificity of its own — so source order is the only thing that decides the
   winner. Moving these back up the file silently disables them.
   ============================================================================= */

@media (max-width: 768px) {
  /* One column: at 430px the sheet body is ~398px, which is wide enough for
     minmax(180px, 1fr) to fit two cramped columns. */
  .fl-role-items {
    grid-template-columns: 1fr;
  }

  .fl-panel-body {
    gap: 16px;
  }
}

/* =============================================================================
   DETAIL PANEL — CONTACT
   Label/value pairs on a shared left edge, so a visitor scanning for a number
   finds every one of them in the same place. Two columns rather than inline
   prose because these are facts, not sentences.
   ============================================================================= */

.fl-contact-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0;
  align-items: baseline;
}

.fl-contact-list dt {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gfl-text);
  white-space: nowrap;
}

.fl-contact-list dd {
  margin: 0;
  font-size: 15px;
  color: var(--gfl-text);
}

/* Typed + scoped: .facility-detail-section a is (0,1,1) and would otherwise win. */
.fl-contact-list dd a.fl-contact-link,
.fl-contact-list dd a {
  color: var(--gfl-link);
  text-decoration: none;
}

.fl-contact-list dd a:hover,
.fl-contact-list dd a:focus {
  color: var(--gfl-text-hover);
  text-decoration: underline;
}


/* ==========================================================================
   Map pin card: the Google InfoWindow that opens above a pin (desktop)
   ========================================================================== */

/* Google pads its window and lets the content scroll, so a photo could never reach the edges
   or follow the rounded corners. These overrides only touch windows holding this card (:has),
   leaving any other map on the page alone; a browser without :has shows the photo inset. */
.gm-style .gm-style-iw-c:has(.gfl-iw) {
  padding: 0;
  /* With its header row turned off, Google writes padding-top: 12px into the element's own
     style attribute to make room for the content. Only !important outranks an inline style;
     without it the photo starts 12px below the window's top edge. */
  padding-top: 0 !important;
  overflow: hidden;
}

.gm-style .gm-style-iw-c:has(.gfl-iw) .gm-style-iw-d {
  padding: 0;
  /* In Chrome, Google also writes overflow: scroll into this element's style attribute, which
     draws its always-on scrollbar tracks (18px on the right, 12px along the bottom) around
     the card. Only !important outranks an inline style. The card is sized to fit, so there is
     nothing to scroll. Edge does not get the inline value, which is why it looked fine there. */
  overflow: hidden !important;
}

.gfl-iw {
  position: relative;
  width: 280px;
  max-width: 100%;
  color: var(--gfl-text);
}

/* Google sets Roboto on every div, span, label and a inside the map at (0,1,1), which beats a
   font set once on the card and inherited. Restate the site font on each element type used. */
.gm-style .gfl-iw,
.gm-style .gfl-iw div,
.gm-style .gfl-iw p,
.gm-style .gfl-iw h4,
.gm-style .gfl-iw a,
.gm-style .gfl-iw button {
  font-family: var(--gfl-font);
}

.gfl-iw-photo {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--gfl-border);
}

.gfl-iw-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gfl-iw-body {
  padding: 14px 16px 16px;
}

.gm-style .gfl-iw-name {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gfl-text);
}

/* Without a photo the close button sits in the body's corner; keep the name clear of it. */
.gfl-iw:not(.gfl-iw--photo) .gfl-iw-name {
  padding-right: 32px;
}

.gm-style .gfl-iw-address {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gfl-text);
}

.gm-style .gfl-iw-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.gm-style .gfl-iw-line + .gfl-iw-line {
  margin-top: 4px;
}

/* (0,2,1): theme and Elementor kit link rules are (0,1,1) and load after this file. */
.gm-style .gfl-iw a {
  color: var(--gfl-link);
  font-weight: 500;
  text-decoration: none;
}

.gm-style .gfl-iw a:hover,
.gm-style .gfl-iw a:focus {
  color: var(--gfl-link);
  text-decoration: underline;
}


/* =============================================================================
   BUTTONS — the only place map buttons are styled
   -----------------------------------------------------------------------------
   Host themes style every button and link. Elementor kits ship
     .elementor-kit-N button { padding: 21px }                      (0,1,1)
     .elementor-kit-N button:hover, button:focus { accent fill,
       border-style: solid, … }                                     (0,2,1)
   which padded 32px buttons to 48px, drew borders on hover and left clicked
   buttons accent blue. Every map button is therefore defined ONCE, here, at
   (0,2,1) — .guardian-facility-locator-container button.X / a.X — with states
   at (0,3,1):

     - shared reset           (first: every property themes set, for every .gfl-btn
                               in rest, :hover, :focus, :active)
     - shared focus ring      (straight after; the reset is the only outline: none)
     - per-button shape       (only what differs from the reset)
     - resting colours        (rest, :focus, :active — a click looks like rest)
     - hover colours          (:hover, then :focus-visible as its own rule: a browser
                               that cannot parse :focus-visible drops only that rule)

   A new map button needs the gfl-btn class in its markup (tests/js/button-markup.test.js
   fails without it) and its own shape and colour rules here. Mobile sizes follow in @media (max-width: 768px) blocks with the same
   selectors, so desktop rules can never override them. Do not style a map button
   anywhere else in this file. Checked by tests/visual/run.html (theme invariance).
   ============================================================================= */

/* ---- Shared reset: every property a theme or Elementor kit sets on buttons, restated once
   for every map button (marker class .gfl-btn) in every state, at (0,2,1) / (0,3,1): the same
   as the per-button rules below, which come later and win. Plain selectors, not :is(), so an
   older browser that cannot parse :is() does not drop the whole reset. ---- */

.guardian-facility-locator-container button.gfl-btn,
.guardian-facility-locator-container button.gfl-btn:hover,
.guardian-facility-locator-container button.gfl-btn:focus,
.guardian-facility-locator-container button.gfl-btn:active,
.guardian-facility-locator-container a.gfl-btn,
.guardian-facility-locator-container a.gfl-btn:hover,
.guardian-facility-locator-container a.gfl-btn:focus,
.guardian-facility-locator-container a.gfl-btn:active {
  box-sizing: border-box;
  color: inherit;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: 0;
  vertical-align: baseline;
  font-family: inherit;
  font-style: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  white-space: normal;
  text-decoration: none;
  text-shadow: none;
  background-image: none;
  box-shadow: none;
  transform: none;
  opacity: 1;
  filter: none;
  text-align: center;
  outline: none;
  transition: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ---- Keyboard focus ring for every map button: on every :focus, then taken off again for
   focus that is not keyboard focus. A browser that cannot parse :focus-visible drops only the
   second rule, so it rings every focus rather than none. Straight after the reset, the only
   rule that sets outline: none; buttons with their own ring (photo arrows, the detail panel's close,
   option rows, accordion rows, Back to map) declare it on :focus-visible later. ---- */

.guardian-facility-locator-container button.gfl-btn:focus,
.guardian-facility-locator-container a.gfl-btn:focus {
  outline: 2px solid var(--gfl-primary);
  outline-offset: 2px;
}

.guardian-facility-locator-container button.gfl-btn:focus:not(:focus-visible),
.guardian-facility-locator-container a.gfl-btn:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Colour sets of Settings → Button Colours.
   Primary (filled): Call, Details, Verify Insurance, Go, Show results, Apply Filters — through
   the gfl-btn--primary modifier — and any filter pill or chip with a selection (.active,
   .is-active).
   Secondary (outline): Visit Website, Use my location, Clear all (mobile filter sheet) — through
   gfl-btn--secondary — and the idle desktop filter pills. The selected-pill selectors carry one
   more class than the idle ones, so a selected pill keeps Primary in every state. On mobile the
   idle pills and chips are grey instead (mobile block further down). ---- */

.guardian-facility-locator-container button.gfl-btn--primary,
.guardian-facility-locator-container button.gfl-btn--primary:focus,
.guardian-facility-locator-container button.gfl-btn--primary:active,
.guardian-facility-locator-container a.gfl-btn--primary,
.guardian-facility-locator-container a.gfl-btn--primary:focus,
.guardian-facility-locator-container a.gfl-btn--primary:active,
.guardian-facility-locator-container button.filter-dropdown-button.active,
.guardian-facility-locator-container button.filter-dropdown-button.active:focus,
.guardian-facility-locator-container button.filter-dropdown-button.active:active,
.guardian-facility-locator-container button.gfl-fbdrop-button.active,
.guardian-facility-locator-container button.gfl-fbdrop-button.active:focus,
.guardian-facility-locator-container button.gfl-fbdrop-button.active:active,
.guardian-facility-locator-container button.gfl-chip.is-active,
.guardian-facility-locator-container button.gfl-chip.is-active:focus,
.guardian-facility-locator-container button.gfl-chip.is-active:active {
  background-color: var(--gfl-btn-primary-bg);
  background-image: none;
  border-color: var(--gfl-btn-primary-bg);
  color: var(--gfl-btn-primary-text);
}

.guardian-facility-locator-container button.gfl-btn--primary:hover,
.guardian-facility-locator-container a.gfl-btn--primary:hover,
.guardian-facility-locator-container button.filter-dropdown-button.active:hover,
.guardian-facility-locator-container button.gfl-fbdrop-button.active:hover,
.guardian-facility-locator-container button.gfl-chip.is-active:hover {
  background-color: var(--gfl-btn-primary-hover-bg);
  background-image: none;
  border-color: var(--gfl-btn-primary-hover-bg);
  color: var(--gfl-btn-primary-hover-text);
  text-decoration: none;
}

.guardian-facility-locator-container button.gfl-btn--primary:focus-visible,
.guardian-facility-locator-container a.gfl-btn--primary:focus-visible,
.guardian-facility-locator-container button.filter-dropdown-button.active:focus-visible,
.guardian-facility-locator-container button.gfl-fbdrop-button.active:focus-visible,
.guardian-facility-locator-container button.gfl-chip.is-active:focus-visible {
  background-color: var(--gfl-btn-primary-hover-bg);
  background-image: none;
  border-color: var(--gfl-btn-primary-hover-bg);
  color: var(--gfl-btn-primary-hover-text);
  text-decoration: none;
}

.guardian-facility-locator-container button.gfl-btn--secondary,
.guardian-facility-locator-container button.gfl-btn--secondary:focus,
.guardian-facility-locator-container button.gfl-btn--secondary:active,
.guardian-facility-locator-container a.gfl-btn--secondary,
.guardian-facility-locator-container a.gfl-btn--secondary:focus,
.guardian-facility-locator-container a.gfl-btn--secondary:active,
.guardian-facility-locator-container button.filter-dropdown-button,
.guardian-facility-locator-container button.filter-dropdown-button:focus,
.guardian-facility-locator-container button.filter-dropdown-button:active,
.guardian-facility-locator-container button.gfl-fbdrop-button,
.guardian-facility-locator-container button.gfl-fbdrop-button:focus,
.guardian-facility-locator-container button.gfl-fbdrop-button:active {
  background-color: var(--gfl-btn-secondary-bg);
  background-image: none;
  border-color: var(--gfl-btn-secondary-text);
  color: var(--gfl-btn-secondary-text);
}

.guardian-facility-locator-container button.gfl-btn--secondary:hover,
.guardian-facility-locator-container a.gfl-btn--secondary:hover,
.guardian-facility-locator-container button.filter-dropdown-button:hover,
.guardian-facility-locator-container button.gfl-fbdrop-button:hover {
  background-color: var(--gfl-btn-secondary-hover-bg);
  background-image: none;
  border-color: var(--gfl-btn-secondary-hover-bg);
  color: var(--gfl-btn-secondary-hover-text);
  text-decoration: none;
}

.guardian-facility-locator-container button.gfl-btn--secondary:focus-visible,
.guardian-facility-locator-container a.gfl-btn--secondary:focus-visible,
.guardian-facility-locator-container button.filter-dropdown-button:focus-visible,
.guardian-facility-locator-container button.gfl-fbdrop-button:focus-visible {
  background-color: var(--gfl-btn-secondary-hover-bg);
  background-image: none;
  border-color: var(--gfl-btn-secondary-hover-bg);
  color: var(--gfl-btn-secondary-hover-text);
  text-decoration: none;
}

/* ---- Group 1+2: card and panel actions (Call = primary, Visit Website = secondary) ---- */

.guardian-facility-locator-container a.facility-action-btn,
.guardian-facility-locator-container a.facility-action-btn:hover,
.guardian-facility-locator-container a.facility-action-btn:focus,
.guardian-facility-locator-container a.facility-action-btn:active {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-width: 1.5px;
  border-style: solid;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ---- Group 1: peek card (mobile) — Call link + Details button, both primary ---- */

.guardian-facility-locator-container a.gfl-peek-btn,
.guardian-facility-locator-container a.gfl-peek-btn:hover,
.guardian-facility-locator-container a.gfl-peek-btn:focus,
.guardian-facility-locator-container a.gfl-peek-btn:active,
.guardian-facility-locator-container button.gfl-peek-btn,
.guardian-facility-locator-container button.gfl-peek-btn:hover,
.guardian-facility-locator-container button.gfl-peek-btn:focus,
.guardian-facility-locator-container button.gfl-peek-btn:active {
  flex: 1;
  display: block;
  padding: 8px 0;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* ---- Group 1: Verify Insurance (detail panel) ---- */

.guardian-facility-locator-container a.fl-verify-link,
.guardian-facility-locator-container a.fl-verify-link:hover,
.guardian-facility-locator-container a.fl-verify-link:focus,
.guardian-facility-locator-container a.fl-verify-link:active {
  display: inline-block;
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.4;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ---- Group 1: Go (location form) ---- */

.guardian-facility-locator-container button.gfl-loc-go,
.guardian-facility-locator-container button.gfl-loc-go:hover,
.guardian-facility-locator-container button.gfl-loc-go:focus,
.guardian-facility-locator-container button.gfl-loc-go:active {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--gfl-radius);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

/* ---- Group 2: Use my location (secondary; disabled while locating) ---- */

.guardian-facility-locator-container button.gfl-locate-btn,
.guardian-facility-locator-container button.gfl-locate-btn:hover,
.guardian-facility-locator-container button.gfl-locate-btn:focus,
.guardian-facility-locator-container button.gfl-locate-btn:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--gfl-radius);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* A disabled "Use my location" (geolocating) keeps its resting colours under the pointer. */
.guardian-facility-locator-container button.gfl-locate-btn:disabled,
.guardian-facility-locator-container button.gfl-locate-btn:disabled:hover {
  background-color: var(--gfl-btn-secondary-bg);
  background-image: none;
  border-color: var(--gfl-btn-secondary-text);
  color: var(--gfl-btn-secondary-text);
}

.guardian-facility-locator-container button.gfl-locate-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- Group 1+2: mobile full filter sheet footer (Clear all = secondary, Show results = primary) ---- */

.guardian-facility-locator-container button.gfl-full-clear,
.guardian-facility-locator-container button.gfl-full-clear:hover,
.guardian-facility-locator-container button.gfl-full-clear:focus,
.guardian-facility-locator-container button.gfl-full-clear:active,
.guardian-facility-locator-container button.gfl-full-apply,
.guardian-facility-locator-container button.gfl-full-apply:hover,
.guardian-facility-locator-container button.gfl-full-apply:focus,
.guardian-facility-locator-container button.gfl-full-apply:active {
  padding: 12px 16px;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.4;
}

.guardian-facility-locator-container button.gfl-full-clear,
.guardian-facility-locator-container button.gfl-full-clear:hover,
.guardian-facility-locator-container button.gfl-full-clear:focus,
.guardian-facility-locator-container button.gfl-full-clear:active {
  flex: 0 0 auto;
  font-weight: 600;
}

.guardian-facility-locator-container button.gfl-full-apply,
.guardian-facility-locator-container button.gfl-full-apply:hover,
.guardian-facility-locator-container button.gfl-full-apply:focus,
.guardian-facility-locator-container button.gfl-full-apply:active {
  flex: 1 1 auto;
  font-weight: 700;
}

@media (max-width: 768px) {
  /* Touch targets inside the mobile control sheet. */

  .guardian-facility-locator-container .gfl-pop button.gfl-loc-go,
  .guardian-facility-locator-container .gfl-pop button.gfl-loc-go:hover,
  .guardian-facility-locator-container .gfl-pop button.gfl-loc-go:focus,
  .guardian-facility-locator-container .gfl-pop button.gfl-loc-go:active,
  .guardian-facility-locator-container .gfl-pop button.gfl-locate-btn,
  .guardian-facility-locator-container .gfl-pop button.gfl-locate-btn:hover,
  .guardian-facility-locator-container .gfl-pop button.gfl-locate-btn:focus,
  .guardian-facility-locator-container .gfl-pop button.gfl-locate-btn:active {
    min-height: 44px;
  }
}

/* ---- Group 3: filter pills — taxonomy filters, Location, Sort (desktop look) ----
   An idle pill uses the Secondary (outline) colours; a pill with a selection uses the Primary
   (filled) colours — both in the colour-set rules above. Both defaults resolve to the same
   outline-then-fill look. */

.guardian-facility-locator-container button.filter-dropdown-button,
.guardian-facility-locator-container button.filter-dropdown-button:hover,
.guardian-facility-locator-container button.filter-dropdown-button:focus,
.guardian-facility-locator-container button.filter-dropdown-button:active,
.guardian-facility-locator-container button.gfl-fbdrop-button,
.guardian-facility-locator-container button.gfl-fbdrop-button:hover,
.guardian-facility-locator-container button.gfl-fbdrop-button:focus,
.guardian-facility-locator-container button.gfl-fbdrop-button:active {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-width: 1px;
  border-style: solid;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ---- Group 6: option rows in dropdowns (sort options). Not affected by settings. ---- */

.guardian-facility-locator-container button.gfl-fbdrop-opt,
.guardian-facility-locator-container button.gfl-fbdrop-opt:hover,
.guardian-facility-locator-container button.gfl-fbdrop-opt:focus,
.guardian-facility-locator-container button.gfl-fbdrop-opt:active {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  transition: background-color 0.2s ease;
}

.guardian-facility-locator-container button.gfl-fbdrop-opt,
.guardian-facility-locator-container button.gfl-fbdrop-opt:focus,
.guardian-facility-locator-container button.gfl-fbdrop-opt:active {
  background-color: transparent;
  background-image: none;
  color: #374151;
}

.guardian-facility-locator-container button.gfl-fbdrop-opt:hover:not(:disabled) {
  background-color: #f3f4f6;
  background-image: none;
  color: #374151;
  text-decoration: none;
}

.guardian-facility-locator-container button.gfl-fbdrop-opt:focus-visible:not(:disabled) {
  background-color: #f3f4f6;
  background-image: none;
  color: #374151;
  text-decoration: none;
}

/* Selected: after hover so it keeps its colour under the pointer. */

.guardian-facility-locator-container button.gfl-fbdrop-opt[aria-checked='true'],
.guardian-facility-locator-container button.gfl-fbdrop-opt[aria-checked='true']:hover,
.guardian-facility-locator-container button.gfl-fbdrop-opt[aria-checked='true']:focus,
.guardian-facility-locator-container button.gfl-fbdrop-opt[aria-checked='true']:active {
  color: var(--gfl-primary);
  font-weight: 600;
  text-decoration: none;
}

.guardian-facility-locator-container button.gfl-fbdrop-opt:disabled,
.guardian-facility-locator-container button.gfl-fbdrop-opt:disabled:hover,
.guardian-facility-locator-container button.gfl-fbdrop-opt:disabled:focus,
.guardian-facility-locator-container button.gfl-fbdrop-opt:disabled:active {
  background-color: transparent;
  background-image: none;
  color: var(--gfl-muted);
  text-decoration: none;
  cursor: default;
  opacity: 1;
}

.guardian-facility-locator-container button.gfl-fbdrop-opt:focus-visible {
  outline: 2px solid var(--gfl-primary);
  outline-offset: -2px;
}

@media (max-width: 768px) {
  /* Location/Sort match the chips: grey, 44px touch target, quieter hover. The "⚙ Filters"
     chip (.gfl-chip--all) is deliberately the same grey: its old dark rule never applied on
     live sites (the 2.17.1 theme armour overrode it), so grey is the look users know. */

  .guardian-facility-locator-container button.gfl-fbdrop-button,
  .guardian-facility-locator-container button.gfl-fbdrop-button:hover,
  .guardian-facility-locator-container button.gfl-fbdrop-button:focus,
  .guardian-facility-locator-container button.gfl-fbdrop-button:active,
  .guardian-facility-locator-container button.gfl-chip,
  .guardian-facility-locator-container button.gfl-chip:hover,
  .guardian-facility-locator-container button.gfl-chip:focus,
  .guardian-facility-locator-container button.gfl-chip:active {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 7px 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .guardian-facility-locator-container button.gfl-fbdrop-button,
  .guardian-facility-locator-container button.gfl-fbdrop-button:hover,
  .guardian-facility-locator-container button.gfl-fbdrop-button:focus,
  .guardian-facility-locator-container button.gfl-fbdrop-button:active {
    font-weight: 500;
  }

  .guardian-facility-locator-container button.gfl-chip,
  .guardian-facility-locator-container button.gfl-chip:hover,
  .guardian-facility-locator-container button.gfl-chip:focus,
  .guardian-facility-locator-container button.gfl-chip:active {
    font-weight: 400;
  }

  .guardian-facility-locator-container button.gfl-fbdrop-button,
  .guardian-facility-locator-container button.gfl-fbdrop-button:focus,
  .guardian-facility-locator-container button.gfl-fbdrop-button:active,
  .guardian-facility-locator-container button.gfl-fbdrop-button:hover,
  .guardian-facility-locator-container button.gfl-chip,
  .guardian-facility-locator-container button.gfl-chip:focus,
  .guardian-facility-locator-container button.gfl-chip:active {
    background-color: #f1f5f9;
    background-image: none;
    border-color: #e2e8f0;
    color: #475569;
  }

  .guardian-facility-locator-container button.gfl-fbdrop-button:focus-visible {
    background-color: #f1f5f9;
    background-image: none;
    border-color: #e2e8f0;
    color: #475569;
  }

  .guardian-facility-locator-container button.gfl-chip:hover {
    background-color: #e2e8f0;
    background-image: none;
    border-color: #e2e8f0;
    color: #475569;
    text-decoration: none;
  }

  .guardian-facility-locator-container button.gfl-chip:focus-visible {
    background-color: #e2e8f0;
    background-image: none;
    border-color: #e2e8f0;
    color: #475569;
    text-decoration: none;
  }

  /* Option rows inside the mobile control sheet are touch sized. */

  .guardian-facility-locator-container .gfl-pop button.gfl-fbdrop-opt,
  .guardian-facility-locator-container .gfl-pop button.gfl-fbdrop-opt:hover,
  .guardian-facility-locator-container .gfl-pop button.gfl-fbdrop-opt:focus,
  .guardian-facility-locator-container .gfl-pop button.gfl-fbdrop-opt:active {
    padding: 14px 4px;
    font-size: 15px;
  }

  /* Full filter sheet: accordion headers. Not affected by settings. */

  .guardian-facility-locator-container button.gfl-full-acc,
  .guardian-facility-locator-container button.gfl-full-acc:hover,
  .guardian-facility-locator-container button.gfl-full-acc:focus,
  .guardian-facility-locator-container button.gfl-full-acc:active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
  }

  .guardian-facility-locator-container button.gfl-full-acc:focus-visible {
    outline: 2px solid var(--gfl-primary);
    outline-offset: -2px;
  }
}

/* ---- Group 4: icon buttons. Fixed styling, not affected by settings. ---- */

/* Detail panel close (desktop modal). Opacity-only feedback, 0.85 → 1. */

.guardian-facility-locator-container .facility-detail-content button.facility-detail-close,
.guardian-facility-locator-container .facility-detail-content button.facility-detail-close:hover,
.guardian-facility-locator-container .facility-detail-content button.facility-detail-close:focus,
.guardian-facility-locator-container .facility-detail-content button.facility-detail-close:active {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: #6b7280;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.guardian-facility-locator-container .facility-detail-content button.facility-detail-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.9);
  color: #6b7280;
  text-decoration: none;
}

.guardian-facility-locator-container .facility-detail-content button.facility-detail-close:focus-visible {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.9);
  color: #6b7280;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6);
}

/* Photo arrows (detail panel desktop + mobile). With a mouse, hidden until the photo is
   hovered (0.75); on a touch screen, always at 0.75 (see the hover: none rule below); full
   opacity on the arrow itself or with keyboard focus. */

.guardian-facility-locator-container .carousel-container button.carousel-nav,
.guardian-facility-locator-container .carousel-container button.carousel-nav:hover,
.guardian-facility-locator-container .carousel-container button.carousel-nav:focus,
.guardian-facility-locator-container .carousel-container button.carousel-nav:active {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* (0,4,1), the same as the arrow's own :hover below, which comes later and so wins. */

.guardian-facility-locator-container .facility-image-carousel:hover button.carousel-nav {
  opacity: 0.75;
  color: #fff;
}

/* On a touch screen there is no hover to reveal the arrows, so they stay at the same 0.75:
   an invisible button that still takes taps at the photo's edges would jump photos with
   nothing on screen to explain it, and screen-reader users need them visible. (0,4,1) and
   after the shape rule, so it holds in every state; the :hover and :focus-visible rules below
   still take them to full opacity. */
@media (hover: none) {
  .guardian-facility-locator-container .facility-image-carousel .carousel-container button.carousel-nav {
    opacity: 0.75;
  }
}

.guardian-facility-locator-container .carousel-container button.carousel-nav:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-decoration: none;
}

.guardian-facility-locator-container .carousel-container button.carousel-nav:focus-visible {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6);
}

/* Map pin card close (desktop). Lives inside Google's map markup. */

.guardian-facility-locator-container .gm-style button.gfl-iw-close,
.guardian-facility-locator-container .gm-style button.gfl-iw-close:hover,
.guardian-facility-locator-container .gm-style button.gfl-iw-close:focus,
.guardian-facility-locator-container .gm-style button.gfl-iw-close:active {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-family: var(--gfl-font);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.guardian-facility-locator-container .gm-style button.gfl-iw-close,
.guardian-facility-locator-container .gm-style button.gfl-iw-close:focus,
.guardian-facility-locator-container .gm-style button.gfl-iw-close:active {
  background-color: rgba(255, 255, 255, 0.92);
  background-image: none;
  color: var(--gfl-text);
}

.guardian-facility-locator-container .gm-style button.gfl-iw-close:hover {
  background-color: #fff;
  background-image: none;
  color: var(--gfl-primary);
  text-decoration: none;
}

.guardian-facility-locator-container .gm-style button.gfl-iw-close:focus-visible {
  background-color: #fff;
  background-image: none;
  color: var(--gfl-primary);
  text-decoration: none;
}

/* ---- Group 5: text-link buttons. Body colour at rest, Elementor secondary on hover. ---- */

.guardian-facility-locator-container button.clear-all-filters,
.guardian-facility-locator-container button.clear-all-filters:hover,
.guardian-facility-locator-container button.clear-all-filters:focus,
.guardian-facility-locator-container button.clear-all-filters:active {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.guardian-facility-locator-container button.clear-all-filters,
.guardian-facility-locator-container button.clear-all-filters:focus,
.guardian-facility-locator-container button.clear-all-filters:active {
  background-color: transparent;
  background-image: none;
  color: var(--gfl-text);
}

.guardian-facility-locator-container button.clear-all-filters:hover {
  background-color: #f3f4f6;
  background-image: none;
  color: var(--gfl-text-hover);
  text-decoration: none;
}

.guardian-facility-locator-container button.clear-all-filters:focus-visible {
  background-color: #f3f4f6;
  background-image: none;
  color: var(--gfl-text-hover);
  text-decoration: none;
}

.guardian-facility-locator-container button.gfl-loc-change,
.guardian-facility-locator-container button.gfl-loc-change:hover,
.guardian-facility-locator-container button.gfl-loc-change:focus,
.guardian-facility-locator-container button.gfl-loc-change:active {
  align-self: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.guardian-facility-locator-container button.gfl-loc-change,
.guardian-facility-locator-container button.gfl-loc-change:focus,
.guardian-facility-locator-container button.gfl-loc-change:active {
  color: var(--gfl-text);
}

.guardian-facility-locator-container button.gfl-loc-change:hover {
  background-color: transparent;
  color: var(--gfl-text-hover);
  text-decoration: none;
}

.guardian-facility-locator-container button.gfl-loc-change:focus-visible {
  background-color: transparent;
  color: var(--gfl-text-hover);
  text-decoration: none;
}

@media (max-width: 768px) {
  /* Mobile control sheet: Done. */

  .guardian-facility-locator-container button.gfl-pop-done,
  .guardian-facility-locator-container button.gfl-pop-done:hover,
  .guardian-facility-locator-container button.gfl-pop-done:focus,
  .guardian-facility-locator-container button.gfl-pop-done:active {
    padding: 4px 6px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
  }

  .guardian-facility-locator-container button.gfl-pop-done,
  .guardian-facility-locator-container button.gfl-pop-done:focus,
  .guardian-facility-locator-container button.gfl-pop-done:active {
    color: var(--gfl-text);
  }

  .guardian-facility-locator-container button.gfl-pop-done:hover {
    background-color: transparent;
    color: var(--gfl-text-hover);
    text-decoration: none;
  }

  .guardian-facility-locator-container button.gfl-pop-done:focus-visible {
    background-color: transparent;
    color: var(--gfl-text-hover);
    text-decoration: none;
  }

  /* Full filter sheet close (×). */

  .guardian-facility-locator-container button.gfl-full-close,
  .guardian-facility-locator-container button.gfl-full-close:hover,
  .guardian-facility-locator-container button.gfl-full-close:focus,
  .guardian-facility-locator-container button.gfl-full-close:active {
    padding: 1px 6px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: #64748b;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
  }

  /* Mobile detail overlay: ‹ Back to map (now a real <button>). */

  .guardian-facility-locator-container .gfl-sheet-detail button.gfl-detail-back,
  .guardian-facility-locator-container .gfl-sheet-detail button.gfl-detail-back:hover,
  .guardian-facility-locator-container .gfl-sheet-detail button.gfl-detail-back:focus,
  .guardian-facility-locator-container .gfl-sheet-detail button.gfl-detail-back:active {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid #eef2f4;
    border-radius: 0;
    background-color: #fff;
    color: var(--gfl-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
  }

  .guardian-facility-locator-container .gfl-sheet-detail button.gfl-detail-back:focus-visible {
    outline: 2px solid var(--gfl-primary);
    outline-offset: -2px;
  }
}

/* ---- Legacy filter drawer (.mobile-filter-drawer). No current code path opens it; its
   checkboxes still mirror the filter state, so the markup stays. Defined here so it obeys the
   same rules as every other map button. Apply = Primary; close = fixed icon button. ---- */

.guardian-facility-locator-container button.mobile-filter-close,
.guardian-facility-locator-container button.mobile-filter-close:hover,
.guardian-facility-locator-container button.mobile-filter-close:focus,
.guardian-facility-locator-container button.mobile-filter-close:active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #6b7280;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.guardian-facility-locator-container button.mobile-filter-close,
.guardian-facility-locator-container button.mobile-filter-close:focus,
.guardian-facility-locator-container button.mobile-filter-close:active {
  background-color: transparent;
}

.guardian-facility-locator-container button.mobile-filter-close:hover {
  background-color: #f3f4f6;
  color: #6b7280;
}

.guardian-facility-locator-container button.mobile-filter-close:focus-visible {
  background-color: #f3f4f6;
  color: #6b7280;
}

.guardian-facility-locator-container button.apply-mobile-filters,
.guardian-facility-locator-container button.apply-mobile-filters:hover,
.guardian-facility-locator-container button.apply-mobile-filters:focus,
.guardian-facility-locator-container button.apply-mobile-filters:active {
  flex: 1;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---- Go and "Use my location" while a location lookup is running. ---- */

.guardian-facility-locator-container .gfl-locform.is-loading button.gfl-loc-go,
.guardian-facility-locator-container button.gfl-locate-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 768px) {
  /* The desktop modal only opens above 768px, but a window narrowed (or a tablet rotated)
     while it is open keeps it on screen: keep its close button a 44px touch target. */

  .guardian-facility-locator-container .facility-detail-content button.facility-detail-close,
  .guardian-facility-locator-container .facility-detail-content button.facility-detail-close:hover,
  .guardian-facility-locator-container .facility-detail-content button.facility-detail-close:focus,
  .guardian-facility-locator-container .facility-detail-content button.facility-detail-close:active {
    width: 44px;
    height: 44px;
  }
}