.place-finder {
  --clr-text: #333;
  --clr-radio: #d70000;
  --clr-filter-background: #f4f4f4;
  --clr-status-background: #3b3935;
  --tra-short: 250ms;
  --tra-very-short: 125ms;
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  font-size: 14px;
  interpolate-size: allow-keywords;  
}

.place-finder .map {
  height: 70svh;
/*
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(0 0 0 / 0.4);
    pointer-events: none;
    opacity: 0;
    transition: var(--tra-short);
  }
*/
}

/*
.place-finder:has(.filter-panel.expanded) .map::after {
  opacity: 1;
}
*/

.place-finder .filters {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
  background: var(--clr-filter-background);
  align-items: stretch;
  line-height: 1.3;
}

.place-finder .filters, .place-finder .filters * {
  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  color: var(--clr-text);
}

.place-finder .filters .radio-set {
  @container (min-width: 750px) {text-align: center;}
  text-wrap: balance;
  label {
    display: inline-flex;
    gap: 0.4em;
    align-items: center;
    padding: 0 0.3em;    
  }
}

.place-finder .filters .radio-set input[type="radio"] {
  appearance: none;
  margin: 0;
  font: inherit;
  color: var(--clr-status-background);
  background-color: #ccc;
  width: 0.85em;
  height: 0.85em;
  border: none;
  border-radius: 50%;
  box-sizing: border-box;
  outline: none;
  &:focus-visible {outline: 2px solid -webkit-focus-ring-color;}
  &:checked {background: var(--clr-radio); bor222der-color: var(--clr-radio);}
}

/*
.place-finder .filters gmp-place-autocomplete {
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid pink;
  border-radius: 5px;
  margin-top: -1em;
  margin-bottom: -1em;
    
  &::part(prediction-item) {
    background-color: lime;
    font-family: inherit;
    font-size: inherit;
  }
  
  &::part(selected-item) {
    color: blue;
    background-color: cyan;
  }
}
*/
/*
.place-finder .status {
  text-align: center;
  ** font-size: small; **
  color: white;
  background: var(--clr-status-background);
  img {
    width: 1em;
    margin: 0 5px;
    position: relative;
    top: 2px;
  }
}
*/

.place-finder .above {
  color: white;
  background: var(--clr-status-background);
  padding: 0.25em 1em;
  display: flex;
  gap: 1em;
  justify-content: space-between;
  align-items: center;
  line-height: 1.2;
  .status img {
    width: 1em;
    margin: 0 5px;
    position: relative;
    top: 2px;
  }
  .filters2 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1em;
    img {
      width: 1.5em;
      cursor: pointer;
    }
  }
}

.place-finder .near {
  display: inline-flex;
  align-items: center;
  padding: 0 0.3em;
}

.place-finder .near-widget {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  z-index: 5;
}

.place-finder .near-widget .near-input {
  width: 20em;
  max-width: 67cqw;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #888;
  padding: 3px 8px;
  color: currentColor;
}

.place-finder .near-widget .results-list {
  position: absolute;
  background: white;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  width: max-content;
  box-shadow: 0 0 6px #888;
/*  appearance: none; */
  outline: none;
  &:empty {display: none;}
  li {
    list-style: none;
    font-size: smaller;
    padding: 3px 8px;
    &:hover {background-color: #f0f0f0; cursor: pointer;}
  }
  &[data-selected-index="0"] li:nth-child(1) {background-color: #e5f3ff;}
  &[data-selected-index="1"] li:nth-child(2) {background-color: #e5f3ff;}
  &[data-selected-index="2"] li:nth-child(3) {background-color: #e5f3ff;}
  &[data-selected-index="3"] li:nth-child(4) {background-color: #e5f3ff;}
  &[data-selected-index="4"] li:nth-child(5) {background-color: #e5f3ff;}
}

.place-finder .filter-panel {
  position: absolute;
  margin-top: 0;
  top: 0;
  right: -260px;
  bottom: 0;
  width: 260px;
  max-width: 100%;
  background-color: white;
  padding: 1em;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgb(0 0 0 / 0.25);
  transition: var(--tra-short);
  overflow: auto;
  z-index: 9;
  opacity: 0;
  &.expanded {
    right: 0;
    opacity: 1;
  }
  > :first-child {
    margin: -1em -1em 0.2em;
    padding: 1em;
    position: sticky;
    top: -1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--clr-status-background);
    color: white;
  }
  .close-button {
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    svg {
      width: 1em;
      height: 1em;
      line {stroke: white;}
    }
    &:hover {
      background: white;
      svg line {stroke: black;}
    }
  }
  h3 {margin: 0; color: inherit;}
  label {font-weight: normal;}
  .radio-set {
    padding-top: 1em;
    label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.25em;
      line-height: 1.4;
      cursor: pointer;
      .counter {
        font-size: smaller;
        color: #888;
      }
    }
  }
  details {
    border-bottom: 1px solid #eee;
    padding: 1em 0;
    summary {
      font-weight: bold;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      &::-webkit-details-marker {display: none;}      /* safari */
      img {transition: var(--tra-very-short);}
    }
    &[open] summary img {
      transform: rotate(-180deg);
    }
    &::details-content {
      height: 0;
      overflow: clip;
      transition: 250ms allow-discrete;
    }
    &[open]::details-content {
      height: auto;
    }
  }
}

.place-finder .place-panel {
  position: relative;
  margin-top: -20svh;
  border-radius: 1em 1em 0 0;
  overflow: hidden;
  background-color: white;
  padding: 1em;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgb(0 0 0 / 0.25);
  transition: 500ms;
  display: none;
  cursor: pointer;
  &.expanded {
    display: block;
  }
}

@container (min-width: 600px) {
  .place-finder .place-panel {
    display: block;
    position: absolute;
    margin-top: 0;
    top: 0;
    right: -360px;
    bottom: 0;
    width: 360px;
    max-width: 50cqw;
    border-radius: 0;
    overflow: auto;
    z-index: 9;
    opacity: 0;
    &.expanded {
      right: 0;
      opacity: 1;
    }
  }
}

.place-finder .place-panel .apf-primary-image {
  margin: -1em -1em 1em;
  img {width: 100%;}
  display: none;
  @container (min-width: 600px) {
    display: block;
  }
}

.place-finder .place-panel .apf-title {
  margin: 0;
  font-size: 1.25em;
}

.place-finder .place-panel .apf-type {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: smaller;
  color: #888;
}

.place-finder .place-panel .apf-socials {
  display: flex;
  gap: 0.75em;
  align-items: center;
  img {width: 30px;}
  svg {
    display: inline-block;
    width: 30px;
    height: 30px;
    &:hover {fill: var(--clr-radio);}
  }
  .website {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M415.9 344L225 344C227.9 408.5 242.2 467.9 262.5 511.4C273.9 535.9 286.2 553.2 297.6 563.8C308.8 574.3 316.5 576 320.5 576C324.5 576 332.2 574.3 343.4 563.8C354.8 553.2 367.1 535.8 378.5 511.4C398.8 467.9 413.1 408.5 416 344zM224.9 296L415.8 296C413 231.5 398.7 172.1 378.4 128.6C367 104.2 354.7 86.8 343.3 76.2C332.1 65.7 324.4 64 320.4 64C316.4 64 308.7 65.7 297.5 76.2C286.1 86.8 273.8 104.2 262.4 128.6C242.1 172.1 227.8 231.5 224.9 296zM176.9 296C180.4 210.4 202.5 130.9 234.8 78.7C142.7 111.3 74.9 195.2 65.5 296L176.9 296zM65.5 344C74.9 444.8 142.7 528.7 234.8 561.3C202.5 509.1 180.4 429.6 176.9 344L65.5 344zM463.9 344C460.4 429.6 438.3 509.1 406 561.3C498.1 528.6 565.9 444.8 575.3 344L463.9 344zM575.3 296C565.9 195.2 498.1 111.3 406 78.7C438.3 130.9 460.4 210.4 463.9 296L575.3 296z'/%3E%3C/svg%3E");
  }
}

.place-finder .place-panel .apf-description {
  line-height: 1.4;
}

.place-finder .place-panel {
  .apf-description {line-height: 1.4;}
  .apf-section-title {font-size: 1.15em; margin: 1em 0 0.5em;}
  .apf-photos:empty, .apf-photos-title:has(+ .apf-photos:empty) {display: none;}
  @media (min-width: 600px) {
    .apf-photos > .primary, .apf-photos-title:has(+ .apf-photos > .primary:only-child) {display: none;}
  }
  ul {
    margin-left: 0;
    padding-left: 1.5em;
    line-height: 1.4;
  }
}