/* ==========================================================================
   CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Facet tag colors */
  --facet-region-color: var(--colors-brand--purple);
  --facet-amenity-color: var(--colors-brand--duck-blue);
  --facet-category-color: var(--colors-brand--orange-bright);
  --facet-city-color: var(--colors-brand--light-green);
  --facet-highlight-color: var(--colors-brand--dark-green);

  /* Common spacing */
  --tag-gap: 0.5rem;
  --card-gap: 1.5rem;
  --filter-gap: 2rem;

  /* Common sizes */
  --button-height: 3rem;
  --button-width: 3rem;
  --pagination-size: 2.5rem;
}

/* Facet tag color variants */
.active-facet-tag.region-tag,
.on-card-facet-tag.region-tag {
  background-color: var(--facet-region-color);
  color: var(--facet-region-color);
}

/* ==========================================================================
     LAYOUT CONTAINERS
     ========================================================================== */

.f-cards-layout-1_CurrentRefinements-list {
  display: flex;
  flex: 1;
  flex-flow: wrap;
  justify-content: flex-end;
  max-width: 40rem;
  gap: var(--tag-gap);
}

.f-cards-grid-layout-1_map-list .hits-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ==========================================================================
     SEARCH HIGHLIGHTING
     ========================================================================== */

.ais-Highlight-highlighted,
.ais-Snippet-highlighted {
  background-color: rgb(188 118 166 / 20%);
  color: #bc76a6;
}

/* ==========================================================================
     SEARCH BOX
     ========================================================================== */

.ais-SearchBox-form {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--button-height);
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-color: var(--_primitives---colors-neutral--neutral-4);
  border-radius: var(--_sizes---border-radius--medium);
}

.ais-SearchBox-form::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.75rem;
  background: transparent
    url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M10%2018C11.775%2017.9996%2013.4988%2017.4054%2014.897%2016.312L19.293%2020.708L20.707%2019.294L16.311%2014.898C17.405%2013.4997%2017.9996%2011.7754%2018%2010C18%205.589%2014.411%202%2010%202C5.589%202%202%205.589%202%2010C2%2014.411%205.589%2018%2010%2018ZM10%204C13.309%204%2016%206.691%2016%2010C16%2013.309%2013.309%2016%2010%2016C6.691%2016%204%2013.309%204%2010C4%206.691%206.691%204%2010%204Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3AcurrentColor%3Bfill%3Acolor(display-p3%200.0902%200.0902%200.0902)%3Bfill-opacity%3A1%3B%22/%3E%3C/svg%3E")
    no-repeat;
}

.ais-SearchBox-input {
  flex: 1;
  padding-left: 3rem;
  font-size: 1rem;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.ais-SearchBox-input::placeholder {
  color: var(--_primitives---colors-neutral--neutral-50);
}

.f-cards-grid-layout-1_search-target {
  margin-bottom: 0.88rem;
}

/* ==========================================================================
     MAP
   ========================================================================== */

.f-cards-grid-layout-1_map-list-wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
}

.f-map-filter_header {
  margin-bottom: 4.5rem;
}

#f-map-filter_map-canvas {
  height: 100%;
}

/* The main container for our custom marker, acts as the hover target */
.custom-marker {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.f-cards-grid-layout-1_map-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.f-cards-grid-layout-1_map-section {
  border: 1px solid #e5e3de;
  border-radius: 1.25rem;
  overflow: hidden;
}

.f-cards-grid-layout-1_map-list {
  padding: 0.66rem;
  background: #fafafa;
}

/* --- Advanced Marker Styles --- */
.advanced-marker {
  width: 32px;
  height: 32px;
  background-color: #780c57; /* This gives the pin a visible color */
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}

.advanced-marker img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1); /* Makes the SVG icon white */
}

/* Style for the active/selected marker */
.advanced-marker.is-active {
  background-color: #a6117d; /* A lighter/brighter color for active state */
  transform: scale(1.3);
  z-index: 999;
}

@media screen and (max-width: 991px) {
  .f-map-filter_header {
    margin-bottom: 0rem;
  }
}

/* ==========================================================================
     INFO WINDOW
   ========================================================================== */

.f-map-filter_info-card {
  border-top-left-radius: var(--_sizes---border-radius--large);
  border-top-right-radius: var(--_sizes---border-radius--large);
  border-bottom-left-radius: var(--_sizes---border-radius--large);
  border-bottom-right-radius: var(--_sizes---border-radius--large);
  background-color: var(--colors-brand--white);
  flex-flow: column;
  width: 24.5rem;
  display: flex;
  overflow: hidden;
}
.f-map-filter_info-card-header {
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.35rem;
  display: flex;
  gap: 0.5rem;
}
.f-map-filter_info-card-image {
  object-fit: cover;
  width: 100%;
  height: 11.25rem;
}
.f-map-filter_info-card-bottom {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem 1.35rem;
  display: flex;
}
.f-map-filter_info-card-paragraph {
  color: var(--_primitives---colors-neutral--neutral-80);
  font-size: var(--_typography---font-size--text-small);
  line-height: var(--_typography---line-height--xhuge);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.f-map-filter_info-card-close-button {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.375rem;
  min-width: 1.375rem;
  height: 1.375rem;
  display: flex;
  cursor: pointer;
}
.f-map-filter_info-card-heading {
  font-size: var(--_typography---font-size--text-large);
  margin-bottom: 0.25rem;
  font-weight: 700;
}
.f-map-filter_info-card-tag {
  color: var(--colors-brand--orange);
  font-size: var(--_typography---font-size--text-small);
  font-weight: 500;
}

.popup-anchor {
  position: absolute;
}

.custom-popup-container {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 25px 50px -12px #00000040;
  overflow: hidden;
  /* Prevents the map from capturing pan/zoom events when interacting with the popup */
  touch-action: none;
  cursor: default;
}

.f-map-filter_info-card-head-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-pane-icon-container {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-pane-icon-container.small {
  width: 1.75rem;
  height: 1.75rem;
}

.info-pane-icon-container.small img {
  width: 0.75rem;
  height: 0.75rem;
}

.info-pane-icon-container img {
  width: 1.25rem;
  height: 1.25rem;
  filter: brightness(0) invert(1); /* Makes SVG white */
}

.f-map-filter_info-card-about-text {
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
}

/* ==========================================================================
     LIST
   ========================================================================== */

.f-cards-grid-layout-1_filter-item-icon {
  display: inline-block; /* Or block, depending on your layout */
  width: 0.875rem; /* Or whatever width your icons should be */
  height: 0.875rem; /* Or whatever height your icons should be */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0; /* Prevents the icon from shrinking if you're using flexbox */
}

.f-cards-grid-layout-1_filter-name-and-result {
  line-height: 1.5;
}

.ais-RefinementList-item {
  padding: 0;
  margin: 0;
}

.f-map-filter_filter-collection-item {
  grid-column-gap: 0.45rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.72rem;
  display: flex;
  flex-direction: row;
  border-radius: 6.25rem;
  border: 1px solid #eee;
}

/* Add this to your existing stylesheet */

/* This makes the image container a positioning parent for the tag */
.f-map-filter_item-card-image-wrapper {
  position: relative;
}

/* This styles the new tag */
.place-type-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background-color: #333; /* Fallback color */
  color: white;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
     LIST ITEM
   ========================================================================== */

.f-map-filter_item-card {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  border: 2px solid var(--_primitives---colors-neutral--neutral-8);
  border-radius: var(--_sizes---border-radius--small);
  justify-content: flex-start;
  align-items: center;
  padding: 0.5rem;
  display: flex;
  transition: box-shadow 300ms ease;
}

.f-map-filter_item-card:hover {
  box-shadow: 4px 5px 8px 0px rgba(0, 0, 0, 0.1);
}

.f-map-filter_item-card.is-active {
  border-color: black;
}
.f-map-filter_item-card-image-wrapper {
  justify-content: flex-start;
  align-items: center;
  height: min-content;
  display: flex;
  position: relative;
}
.f-map-filter_item-card-content {
  padding-left: 0;
  padding-right: 0;
  flex: 1;
}
.f-map-filter_item-card-image {
  aspect-ratio: 10 / 7;
  border-radius: var(--_sizes---border-radius--large);
  object-fit: cover;
  width: 8.75rem;
}
.f-map-filter_item-card-content-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.25rem;
}
.f-map-filter_item-card-h3 {
  font-size: var(--_typography---font-size--h6);
  line-height: var(--_typography---line-height--xlarge);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
.f-map-filter_item-card-paragraph {
  color: var(--_primitives---colors-neutral--neutral-70);
  font-size: var(--_typography---font-size--text-small);
  line-height: var(--_typography---line-height--huge);
}
.f-map-filter_item-card-heart {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.375rem;
  height: 1.375rem;
  display: flex;
  position: absolute;
  inset: 0.5rem 0.5rem auto auto;
}
.f-map-filter_item-card-arrow-button {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  min-width: 1.625rem;
}

/* --- List Item Result Card --- */

/* Replace your old .place-type-tag style with this */
.list-item-icon-tag {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.list-item-icon-tag img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) invert(1); /* Makes SVG white */
}

/* Positions the heart icon */
.f-map-filter_item-card-heart {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

/* ==========================================================================
     DRAWER STYLES
   ========================================================================== */

/* Hide the mobile handle */
.drawer-handle {
  display: none;
}

.drawer-bg-overlay {
  pointer-events: none;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
  display: block;
}

.drawer-bg-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Revert the drawer back to a side panel */
.f-cards-grid-layout-1_map-list-wrapper {
  position: static;
  transform: none;
  width: 26rem;
  height: 100%;
  box-shadow: none;
  border-radius: 0;
}

.drawer-content {
  height: auto;
}

@media screen and (max-width: 991px) {
  .drawer-handle-bar {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }

  .drawer-handle-title {
    /* This is just for centering with the close button present */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: 600;
  }

  /* Style for the new close button */
  .drawer-close-button {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto; /* Pushes it to the far right */
    z-index: 1; /* Ensure it's clickable */
  }
  /* Hide content scrollbar initially */
  .drawer-content {
    overflow-y: auto;
    height: 100%;
  }

  .drawer-handle {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative;
    cursor: pointer;
    border: none;
    background-color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .drawer-handle-bar {
    width: 40px;
    height: 4px;
    background-color: #d1d1d6;
    border-radius: 2px;
    margin-bottom: 8px;
  }

  .f-cards-grid-layout-1_map-list-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 75vh;
    max-height: 75vh;
    background-color: #fff;
    box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.15);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* transition: transform 100ms ease; */
  }

  /* The open state for the drawer */
  .f-cards-grid-layout-1_map-list-wrapper.is-open {
    transform: translateY(0);
  }

  .f-cards-grid-layout-1_map-list-wrapper.is-dragging {
    transition: none;
  }

  .f-cards-grid-layout-1_map-list-wrapper {
    overflow: visible;
  }

  .f-cards-grid-layout-1_map-section {
    border: none;
    border-radius: 0;
  }

  .f-cards-grid-layout-1_map-section {
    height: calc(100vh - 4.5rem - 3rem);
  }

  .f-map-filter_info-card {
    width: 80vw;
  }
}

/* ==========================================================================
     INFO DRAWER STYLES
   ========================================================================== */

/* --- Draggable Info Drawer (Mobile Only) --- */
.info-drawer-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;

  /* Height based on content + handle */
  max-height: 75vh;

  background-color: #fff;
  box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.15);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  z-index: 1001; /* Higher than the main drawer */

  /* Start closed */
  transform: translateY(100%);
  /* A snappy transition */
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-drawer-card.is-open {
  transform: translateY(0);
}

/* This class gets added during drag for instant feedback */
.info-drawer-card.is-dragging {
  transition: none;
}

.info-card_content {
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

.info-card_image {
  height: 12.5rem;
  object-fit: cover;
  width: 100%;
}

.info-card_icon-button {
  height: 2.2rem;
  width: 2.2rem;
  border-radius: 0.5rem;
  display: flex;
  padding: 0.6rem;
  color: #272726;
  position: absolute;
  top: 0.85rem;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.info-card_icon-button.close {
  left: 0.85rem;
  border-radius: 100%;
}

.info-card_icon-button.heart {
  right: 0.85rem;
}

.info-card_header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.info-card_heading {
  font-size: 1.3125rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.info-card_about-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.info-card_paragraph {
  margin-bottom: 0.45rem;
}

.info-drawer-handle {
  width: 100%;
  padding: 1rem;
  padding-bottom: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  flex-shrink: 0; /* Prevent handle from shrinking */
  position: absolute;
  align-self: center;
}

.info-drawer-handle:active {
  cursor: grabbing;
}

/* The little grey bar */
.info-drawer-handle::before {
  content: "";
  width: 40px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
}

.info-drawer-content {
  overflow-y: auto;
}

.info-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000; /* Below the info drawer, above everything else */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.info-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   PULSE ANIMATION FOR ACTIVE MARKER
   ========================================================================== */

/* Define the animation */
@keyframes frank {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Create the pseudo-element that will be our pulse ring */
.advanced-marker::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: transparent;

  /* Start hidden and not animating */
  transform: scale(1);
  opacity: 0;

  /* This is the key: it's a ring, not a solid circle */
  border: 2px solid;

  /* Place it behind the main marker dot */
  z-index: -1;
}

/* When the marker is active, trigger the animation on its pseudo-element */
.advanced-marker.is-active::after {
  animation: frank 1.5s ease-out infinite;
}

/* Set the pulse color based on the data-attribute we added */
.advanced-marker[data-place-type="parks-monuments"]::after {
  border-color: var(--colors-brand--dark-green);
}
.advanced-marker[data-place-type="cities"]::after {
  border-color: var(--colors-brand--orange);
}
.advanced-marker[data-place-type="american-indian"]::after {
  border-color: var(--colors-brand--brown-darker);
}
.advanced-marker[data-place-type="rivers-lakes"]::after {
  border-color: var(--colors-brand--duck-blue);
}