/**
 * 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;
}

/* The location and sort controls share these declarations rather than copying them, so the
   filter bar keeps one button vocabulary and the two can never drift apart. `.gfl-fbdrop-*`
   is the shared shape; they can't reuse `.filter-dropdown` itself because
   updateFilterButtonStates() iterates that class and rewrites each button's label. */
.filter-dropdown-button,
.gfl-fbdrop-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 1px solid var(--gfl-primary);
  border-radius: 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--gfl-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* color restated on every state — a host theme's `button:hover` would otherwise win. */
.filter-dropdown-button:hover,
.gfl-fbdrop-button:hover,
.filter-dropdown-button:focus,
.gfl-fbdrop-button:focus {
  background: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: #fff;
}

.filter-dropdown-button.active,
.gfl-fbdrop-button.active {
  background: var(--gfl-primary);
  color: white;
  border-color: var(--gfl-primary);
}

.filter-dropdown-button.active:hover,
.gfl-fbdrop-button.active:hover {
  background: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: white;
}

.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;
}

/* Option rows inside a shared dropdown: same metrics as .filter-option, but they are
   buttons rather than checkbox rows because picking one is an immediate, single choice. */
.gfl-fbdrop-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gfl-fbdrop-opt:hover:not(:disabled) {
  background: #f3f4f6;
  color: #374151;
}

.gfl-fbdrop-opt[aria-checked='true'] {
  color: var(--gfl-primary);
  font-weight: 600;
}

.gfl-fbdrop-opt:disabled {
  color: var(--gfl-muted);
  cursor: default;
}

/* 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;
}

@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;
}

/* Link-styled button: body colour at rest, Elementor secondary on hover, no underline. */
.clear-all-filters {
  background: none;
  border: none;
  color: var(--gfl-text);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.clear-all-filters:hover,
.clear-all-filters:focus {
  color: var(--gfl-text-hover);
  background: #f3f4f6;
  text-decoration: 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-name {
  font-size: 16px;
  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;
}

.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;
}

.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-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 14px;
  opacity: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.facility-image-carousel:hover .carousel-nav {
  opacity: 1;
}

.carousel-nav:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.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;
}

/* Typed selector: the host theme ships `.page-content a { text-decoration: underline }` at
   (0,1,1), which outranks a bare `.facility-action-btn` at (0,1,0) and underlined every CTA.
   `a.facility-action-btn` ties on specificity and wins on source order. Same trap as the
   Verify Insurance link. */
a.facility-action-btn,
.facility-action-btn {
  flex: 1;
  padding: 10px 16px;
  border: 1.5px solid var(--gfl-primary);
  border-radius: 6px;
  background: #fff;
  color: var(--gfl-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Outline button: primary border and text at rest, filling with the accent on hover. The
   lift-and-shadow that used to accompany this is gone — the colour change carries it. */
a.facility-action-btn:hover,
a.facility-action-btn:focus,
.facility-action-btn:hover,
.facility-action-btn:focus {
  background: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: #fff;
}

a.facility-action-btn.primary,
.facility-action-btn.primary {
  background: var(--gfl-primary);
  color: white;
  border-color: var(--gfl-primary);
}

a.facility-action-btn.primary:hover,
a.facility-action-btn.primary:focus,
.facility-action-btn.primary:hover,
.facility-action-btn.primary:focus {
  background: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: #fff;
}

/* =============================================================================
     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);
}

.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;
}

.facility-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: #6b7280;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.facility-detail-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #374151;
}

/* --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-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: 600;
  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-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.mobile-filter-close:hover {
  background: #f3f4f6;
}

.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;
}

.apply-mobile-filters {
  flex: 1;
  background: var(--gfl-primary);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.apply-mobile-filters:hover {
  background: var(--gfl-primary-hover);
}

/* =============================================================================
     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%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
  }

  .gfl-sheet-detail.open {
    transform: translateY(0);
  }

  .gfl-sheet-detail .gfl-detail-back {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-weight: 600;
    border-bottom: 1px solid #eef2f4;
    background: #fff;
  }

  /* 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;
  }

  .gfl-peek-btn {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: var(--gfl-primary);
    color: #fff;
    border: none;
    text-decoration: none;
  }

  /* 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 {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.2;
    padding: 7px 12px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    white-space: nowrap;
  }

  .gfl-chip.is-active {
    background: var(--gfl-primary);
    color: #fff;
    border-color: var(--gfl-primary);
  }

  .gfl-chip--all {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
  }

  .gfl-chip-badge {
    background: #fff;
    color: #2563eb;
    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;
  }

  .gfl-pop-done {
    background: none;
    border: none;
    color: var(--gfl-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
  }

  .gfl-pop-done:hover,
  .gfl-pop-done:focus {
    color: var(--gfl-text-hover);
    text-decoration: none;
  }

  /* 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;
  }

  /* 16px minimum or iOS Safari zooms the whole page when the field takes focus.
     Must carry the SAME (0,2,1) specificity as the base rule — a @media block adds none of its
     own (§4.7c), so a bare .gfl-optsearch-input here would just lose to the 14px above. */
  .gfl-optsearch input.gfl-optsearch-input {
    font-size: 16px;
  }

  .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-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
  }

  .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 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
  }

  .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;
  }

  .gfl-full-clear {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .gfl-full-apply {
    flex: 1 1 auto;
    padding: 12px 16px;
    border-radius: 10px;
    border: none;
    background: var(--gfl-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }

  .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;
  }

  .gfl-chip {
    min-height: 44px;
  }

  .facility-detail-close,
  .gfl-detail-back {
    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 */
.facility-action-btn:focus,
.filter-dropdown-button:focus,
.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 mode support */
@media (prefers-contrast: high) {
  .facility-card {
    border: 2px solid #000;
  }

  .filter-dropdown-button {
    border: 2px solid #000;
  }

  .facility-action-btn {
    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 shared .gfl-fbdrop-button
   rules up in the filter-bar section; 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,
.gfl-loc-go:focus-visible,
.gfl-locate-btn:focus-visible,
.gfl-loc-change:focus-visible,
.gfl-fbdrop-button:focus-visible,
.gfl-fbdrop-opt:focus-visible {
  outline: 2px solid var(--gfl-primary);
  outline-offset: 2px;
}

.gfl-loc-go {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--gfl-primary);
  border-radius: var(--gfl-radius);
  background: var(--gfl-primary);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Every hover state below restates color. A host theme's `button:hover { color: #fff }` is
   (0,1,1) and beats the base `.gfl-*` rule at (0,1,0), which is exactly how "Use my location"
   ended up white-on-white. Setting only background/border here is not enough. */
.gfl-loc-go:hover,
.gfl-loc-go:focus {
  background: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: #fff;
}

.gfl-locate-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--gfl-primary);
  border-radius: var(--gfl-radius);
  background: #fff;
  color: var(--gfl-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.gfl-locate-btn:hover:not(:disabled),
.gfl-locate-btn:focus:not(:disabled) {
  background: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: #fff;
}

.gfl-locate-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.gfl-loc-change:hover,
.gfl-loc-change:focus {
  color: var(--gfl-text-hover);
  text-decoration: none;
}

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

.gfl-loc-change {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gfl-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* --- 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;
  }

  /* Match .gfl-chip exactly — including the 44px touch target the mobile rules give it, so
     the row reads as one set of controls rather than two visual languages. */
  .gfl-fbdrop-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
  }

  .gfl-fbdrop-button:hover {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
    transform: none;
    box-shadow: none;
  }

  .gfl-fbdrop-button.active,
  .gfl-fbdrop-button.active:hover {
    background: var(--gfl-primary);
    border-color: var(--gfl-primary);
    color: #fff;
  }

  .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-fbdrop-opt {
    padding: 14px 4px;
    font-size: 15px;
  }

  .gfl-pop .gfl-locate-btn,
  .gfl-pop .gfl-loc-input,
  .gfl-pop .gfl-loc-go {
    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 {
  max-height: 36px;
  max-width: 120px;
  object-fit: contain;
}

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

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

/* Typed selector so this outranks `.facility-detail-section a`, which is the link's
   ancestor rule and would otherwise paint the label --gfl-link on the --gfl-primary
   fill (~1.5:1 contrast). */
a.fl-verify-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--gfl-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

a.fl-verify-link:hover {
  background: var(--gfl-primary-hover);
  color: #fff;
}

/* =============================================================================
   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;
}

/* =============================================================================
   THEME ARMOUR — FILTER BAR CONTROLS
   -----------------------------------------------------------------------------
   Host themes style buttons globally. Elementor's kit is the usual offender:

     .elementor-kit-21 button { padding: 17px 26px; border-width: 2px; font-size: 18px }

   That is (0,1,1) — one class plus one element — so it beats EVERY plugin rule
   written as a bare class at (0,1,0), and a kit designed for big page CTAs lands
   on the map's compact filter chips. Observed on boilerplate.teenproof.com:
   21px padding, 18px text and 2px borders on controls meant to be 10px/14px/1px.

   Fix: scope to the container AND type the element, giving (0,2,1), which
   outranks the kit without needing !important. Placed last in the file so source
   order backs the specificity up.

   WHAT THIS DOES NOT DO: it does not freeze colour. Backgrounds and text still
   resolve through the --gfl-* tokens, which read the client's Elementor globals,
   because propagating their palette is the whole point of that layer. This makes
   the controls immune to the theme's BUTTON styling, not to its brand colours.

   Only the properties a button kit actually sets are restated. Anything not
   listed here is still free to inherit.
   ============================================================================= */

/* Pill buttons: taxonomy filters, plus the Location and Sort controls. */
.guardian-facility-locator-container button.filter-dropdown-button,
.guardian-facility-locator-container button.gfl-fbdrop-button {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--gfl-primary);
  border-radius: 20px;
  background-color: #fff;
  color: var(--gfl-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Active state has to be restated at the same weight, or the armour above wins
   over it and a selected filter stops looking selected. */
.guardian-facility-locator-container button.filter-dropdown-button.active,
.guardian-facility-locator-container button.gfl-fbdrop-button.active {
  background-color: var(--gfl-primary);
  color: #fff;
}

/* Option rows inside a dropdown — full-width, borderless, left-aligned. */
.guardian-facility-locator-container button.gfl-fbdrop-opt {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #374151;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* "Clear All" is a link in button's clothing. */
.guardian-facility-locator-container button.clear-all-filters {
  box-sizing: border-box;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: var(--gfl-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ZIP submit + "Use my location", inside the Location dropdown. */
.guardian-facility-locator-container button.gfl-loc-go {
  box-sizing: border-box;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--gfl-primary);
  border-radius: var(--gfl-radius);
  background-color: var(--gfl-primary);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.guardian-facility-locator-container button.gfl-locate-btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--gfl-primary);
  border-radius: var(--gfl-radius);
  background-color: #fff;
  color: var(--gfl-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 768px) {
  /* Mobile filter chips. min-height stays 44px — that is the touch target, not
     theme spill. */
  .guardian-facility-locator-container button.gfl-chip {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background-color: #f1f5f9;
    color: #475569;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
  }

  .guardian-facility-locator-container button.gfl-chip.is-active {
    background-color: var(--gfl-primary);
    border-color: var(--gfl-primary);
    color: #fff;
  }
}

/* -----------------------------------------------------------------------------
   ...AND THEIR STATES.
   The armour above is (0,2,1). Every hover/focus rule in this stylesheet is
   written as `.class:hover` = (0,2,0), so the armour outranked them and the
   buttons went inert on mouseover. Each state is restated here at (0,3,1) so it
   beats the armour it sits under.

   `color` is restated on every one of these, per the rule in CLAUDE.md: a host
   theme's `button:hover { color: #fff }` is (0,1,1) and specificity cannot win a
   property you never declare.
   ----------------------------------------------------------------------------- */

.guardian-facility-locator-container button.filter-dropdown-button:hover,
.guardian-facility-locator-container button.gfl-fbdrop-button:hover {
  background-color: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: #fff;
}

.guardian-facility-locator-container button.filter-dropdown-button.active:hover,
.guardian-facility-locator-container button.gfl-fbdrop-button.active:hover {
  background-color: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: #fff;
}

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

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

.guardian-facility-locator-container button.gfl-loc-go:hover,
.guardian-facility-locator-container button.gfl-loc-go:focus {
  background-color: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: #fff;
}

.guardian-facility-locator-container button.gfl-locate-btn:hover:not(:disabled),
.guardian-facility-locator-container button.gfl-locate-btn:focus:not(:disabled) {
  background-color: var(--gfl-primary-hover);
  border-color: var(--gfl-primary-hover);
  color: #fff;
}

@media (max-width: 768px) {
  /* Mobile gives Location/Sort a quieter grey hover than the desktop teal — the
     compact chip row would be very loud in full brand colour. Same specificity as
     the rule above, so this has to stay AFTER it (a @media adds none of its own). */
  .guardian-facility-locator-container button.gfl-fbdrop-button:hover {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
  }

  .guardian-facility-locator-container button.gfl-fbdrop-button.active:hover {
    background-color: var(--gfl-primary);
    border-color: var(--gfl-primary);
    color: #fff;
  }

  .guardian-facility-locator-container button.gfl-chip:hover {
    background-color: #e2e8f0;
    color: #475569;
  }

  .guardian-facility-locator-container button.gfl-chip.is-active:hover {
    background-color: var(--gfl-primary-hover);
    border-color: var(--gfl-primary-hover);
    color: #fff;
  }
}