.place-finder {
  --clr-text: #333;
  --clr-radio: #d70000;
  --clr-filter-background: #f4f4f4;
  --clr-status-background: #3b3935;
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  font-size: 14px;
}

.place-finder .map {
  height: 70svh;
}

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

/*
#near-me {
  text-decoration: none;
}
#near-me:hover, #near-me:focus {
  text-decoration: underline;
}
.wrapper {
  box-shadow: 0 0 3px rgb(0 0 0 / 0.1);  
  overflow: hidden;
}
@media (max-width: 499px) {
  .wrapper {
    margin-left: min(-1em, -3vw);
    margin-right: min(-1em, -3vw);
  }
}
#map {width: 100%; height: 70svh;}
#map h3, #map p {
  margin: 0.5em 0;
}
#map h3 {
  font-size: 16px;
}
#map a {
  color: inherit;
  text-decoration: none;
  border: 1px solid #888;
  border-radius: 10px;
  padding: 4px 6px;
  display: inline-block;
}
#map a:hover {
  color: white;
  background: var(--clr-adventist-fire);
  border: 1px solid var(--clr-adventist-fire);
}
#map .opening-times td:first-child {
  text-align: right;
}
#map hr {
  margin-top: 1em;
  border: 0;
  border-top: 1px solid #ccc;
}
*/