.pin-popup {
  width: 400px;
  max-width: 100%;
  padding: 0.5em 1em 1em;
  background: white;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  font-family: sans-serif;
  text-align: center;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pin-popup .popup-thumbnail {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  margin: 0;
}

.pin-popup .popup-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}

.pin-popup h3 {
  margin-top: -15px;
  margin-bottom: 0.3em;
  font-size: 2.2em;
}

.pin-popup p {
  margin: 0 0 1em;
  font-size: 1.1em;
  color: #444;
}

.pin-popup a {
  color: #ee7100;
  text-decoration: underline;
  word-break: break-word;
}

.gm-style .gm-style-iw a {
  pointer-events: auto;
}

.pin-popup .pin-button {
  display: inline-block;
  padding: 0.5em 1.5em;
  background: #F9B000;
  color: white;
  text-decoration: none;
  border-radius: 0 0.3em;
  font-size: 1.1em;
  margin: 1em auto 0 auto; /* boven 1em, midden auto, onder 0 */
  text-align: center;
}

.pin-popup .pin-button:hover {
  text-decoration: none;
  background: #b0015e;
  color: white;
}

.popup-themas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: -5px;
  margin-bottom: 0.7em;
  padding: 0;
}

.popup-themas img {
  height: 24px;
  width: auto;
  display: inline-block;
}

/* === Popup-styling en Google Maps overflow fix === */
.pin-popup {
  box-shadow: none;
}

.gm-style-iw,
.gm-style .gm-style-iw-d {
  overflow: visible !important;
  max-height: none !important;
}

/* === google maps styling voor popup uitschakelen === */
.gm-style .gm-style-iw {
  max-width: none !important;
  width: auto !important;
}

.gm-style .gm-style-iw-c {
  max-width: none !important;
  width: auto !important;
}

.gm-style-iw-d {
  max-width: none !important;
  width: auto !important;
}

/* ==============================
   Filters (combined map)
   ============================== */
.mijn-maps-filters {
  margin: 0 0 14px;
  max-width: 75%;
  margin-left: 2rem;
}
.mijn-maps-filters-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  max-width: 75%;
  margin-left: 2rem;
}

.mijn-maps-filter {
  min-width: 200px;
}

.mijn-maps-multiselect {
  position: relative;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  background: #fff;
  overflow: visible;
}

.mijn-maps-multiselect > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.mijn-maps-multiselect > summary::-webkit-details-marker {
  display: none;
}

.mijn-maps-filter-label {
  font-weight: 600;
  white-space: nowrap;
}

.mijn-maps-filter-value {
  opacity: 0.85;
  font-size: 0.95em;
  text-align: right;
}

.mijn-maps-multiselect-panel {
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  margin-top: 6px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 260px;
  overflow: auto;
}

.mijn-maps-multiselect-panel label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  cursor: pointer;
}

.mijn-maps-filter-reset {
  display: flex;
  align-items: center;
}

.mijn-maps-reset {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  cursor: pointer;
}

/* ==============================
   v1.9.4 - Filters UX (Impreza style, desktop dropdowns + mobile panel)
   ============================== */

/* Desktop: filters naast elkaar */
.mijn-maps-filters-inner{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
}


.mijn-maps-filter{
  flex: 0 1 20%;
  max-width: 20%;
  width: 20%;
}
@media (max-width: 1024px){
  .mijn-maps-filter{
    flex: 1 1 220px;
    max-width: 260px;
    width: auto;
  }
  .mijn-maps-filters-inner{
    grid-template-columns: 1fr auto;
    max-width: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
  .mijn-maps-filters{
    max-width: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
/* Trigger als "field" (Impreza us-field-style_1 draagt de styling) */
.mijn-maps-multiselect{
  position:relative;
}

.mijn-maps-filter-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}

.mijn-maps-caret,
.mijn-maps-chevron{
  display:inline-block;
  width:10px;
  height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
  opacity:.85;
}

details[open] > summary .mijn-maps-caret{
  transform:rotate(-135deg);
}

/* Dropdown panel + slide down */
.mijn-maps-multiselect-panel{
  position:absolute;
  left:0;
  right:0;
  z-index:999;
  margin-top:6px;
  border-radius:8px;
  max-height:0;
  opacity:0;
  transform:translateY(-4px);
  transition:max-height .25s ease, opacity .25s ease, transform .25s ease;
}

details[open] .mijn-maps-multiselect-panel{
  opacity:1;
  transform:translateY(0);
}

/* Reset: subtiel, alleen tonen als JS display!=none */
.mijn-maps-reset{
  padding:0;
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.18);
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mijn-maps-reset i{font-size:14px; opacity:.65;}

/* Mobile */
.mijn-maps-mobile-trigger{display:none;}

@media (max-width:1024px){
  .mijn-maps-filters{margin-left:1rem;margin-right:1rem;margin-bottom:6px;}

  .mijn-maps-mobile-trigger{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,0.15);
    border-radius:10px;
    background:#fff;
    cursor:pointer;
    margin-bottom:6px;
  }


  /* Mobile reset button rechts van de trigger (verschijnt alleen bij actieve filters) */
  .mijn-maps-filters{position:relative;}
  .mijn-maps-mobile-trigger{transition:width .25s ease;}
  .mijn-maps-reset{
    position:absolute;
    top:6px;
    right:0;
    opacity:0;
    pointer-events:none;
    transform:scale(.9);
    transition:opacity .25s ease, transform .25s ease;
  }
  .mijn-maps-filters.has-active-filters .mijn-maps-reset{
    opacity:1;
    pointer-events:auto;
    transform:scale(1);
  }
  .mijn-maps-filters.has-active-filters .mijn-maps-mobile-trigger{
    width:calc(100% - 42px);
  }
  .mijn-maps-filters .mijn-maps-chevron{
    transform:rotate(45deg);
  }
  .mijn-maps-filters.is-mobile-open .mijn-maps-chevron{
    transform:rotate(-135deg);
  }

  /* Onder de mobile trigger: alle filters als lijst (geen dropdowns) */
  .mijn-maps-filters-inner{
    display:block;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }

  .mijn-maps-filter{min-width:unset; margin:0 0 14px;}

  .mijn-maps-multiselect > summary{display:none;}
  .mijn-maps-group-heading{
    display:block;
    font-weight:700;
    margin:0 0 8px;
  }

  .mijn-maps-multiselect-panel{
    position:static;
    margin-top:0;
    border:0;
    box-shadow:none;
    max-height:none;
    opacity:1;
    transform:none;
    padding:0;
  }

  /* Mobile: opties compacter (checkbox + tekst), koppen/labels blijven gelijk */
  .mijn-maps-multiselect-panel label{
    font-size: 13px;
    padding: 4px 2px;
    gap: 6px;
  }
  .mijn-maps-multiselect-panel input[type="checkbox"]{
    transform: scale(0.9);
    transform-origin: left center;
  }

  /* Mobile: geen randen om filtertypes */
  .mijn-maps-multiselect{border:none !important; background:transparent !important;}
}

/* ==============================
   v1.9.8 - Desktop filters breder + betere verdeling
   - vanaf 2rem links, tot 80% breed
   - benut de ruimte met 3 gelijke kolommen + gap 10px
   ============================== */
@media (min-width: 1025px){
.mijn-maps-filters{max-width:80%; margin-left:2rem;}
.mijn-maps-filters-inner{
  max-width:80%;
  margin-left:2rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap:10px;
  align-items:start;
}
.mijn-maps-filter{
  width:auto;
  max-width:none;
  min-width:0;
}
.mijn-maps-filters-inner > .mijn-maps-reset{
  justify-self:end;
  align-self:end;
}
}







/* Mobile filter container spacing */
@media (max-width: 1024px){
  .mijn-maps-filters{
    max-width: 100%;
    margin: 0 1rem 8px;
  }
  .mijn-maps-filters-inner{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:16px;
    max-width:100%;
    margin-left:0;
  }
  .mijn-maps-filter{
    width:100%;
  }
}

@media (max-width: 520px){
  .mijn-maps-filters-inner{
    grid-template-columns: 1fr;
  }
}