.ere-nearby{max-width:100%}
.ere-nearby-title{margin:0 0 10px 0}
.ere-nearby-intro{opacity:.85;margin:0 0 12px 0;line-height:1.45}
.ere-nearby-beach{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;margin:0 0 14px 0}
.ere-nearby-beach--green{border:1px solid rgba(0,128,0,.35);background:rgba(0,128,0,.08)}
.ere-nearby-beach--orange{border:1px solid rgba(255,140,0,.35);background:rgba(255,140,0,.10)}
.ere-nearby-beach__title{font-weight:600}

.ere-nearby-preview{display:grid;gap:10px;margin:0 0 12px 0}
.ere-nearby-preview--cols-2{grid-template-columns:1fr 1fr}
.ere-nearby-preview--cols-1{grid-template-columns:1fr}
.ere-nearby-list{display:grid;gap:10px;margin:10px 0 16px 0}

.ere-nearby-item{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:10px 12px;background:#fff; cursor:pointer}
.ere-nearby-type{font-size:.86em;opacity:.65;margin-bottom:4px}
.ere-nearby-name{font-weight:400;line-height:1.25}
.ere-nearby-distance{margin-top:6px;opacity:.78;font-size:.9em}
.ere-nearby-h3{margin:16px 0 6px 0}
.ere-nearby-groupdesc{opacity:.75;font-size:.92em;margin:0 0 6px 0}

.ere-nearby-name-row{display:block}
@media (max-width: 767px){
  .ere-nearby-name-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
  .ere-nearby-distance{margin-top:0; white-space:nowrap; text-align:right}
}

.ere-nearby-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 10px 0}
.ere-nearby-btn{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
}
.ere-nearby-btn--secondary{background:rgba(0,0,0,.02)}
.ere-nearby-btn--secondary.is-on{border-color:rgba(0,0,0,.35)}

.ere-nearby-note{font-size:12px;opacity:.75;margin:10px 0 0 0}
.ere-nearby-note--top{margin:0 0 6px 0}

/* Chips ONLY in popup */
.ere-nearby-chips{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0}
.ere-nearby-chip{
  display:flex;align-items:center;gap:6px;
  padding:5px 8px;border:1px solid rgba(0,0,0,.08);
  border-radius:999px;background:#fff;
  font-size:12px;line-height:1;user-select:none;
}
.ere-nearby-chip input{width:14px;height:14px;margin:0}
.ere-nearby-chip__dot{width:8px;height:8px;border-radius:99px;background:var(--ere-color);display:inline-block}
.ere-nearby-chip__txt{color:var(--ere-color);font-weight:600;white-space:nowrap}

/* Modal */
.ere-nearby-modal{position:fixed;inset:0;display:none;z-index:9999}
.ere-nearby-modal[aria-hidden="false"]{display:block}
.ere-nearby-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.ere-nearby-modal__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1200px,96vw);height:min(86vh,860px);
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.ere-nearby-modal__close{
  position:absolute;top:10px;right:12px;z-index:10;
  border:0;background:rgba(255,255,255,.9);
  width:36px;height:36px;border-radius:999px;
  font-size:22px;line-height:1;cursor:pointer;
}
.ere-nearby-modal__grid{display:grid;grid-template-columns:52% 48%;height:100%}
.ere-nearby-modal__map{
  border-right:1px solid rgba(0,0,0,.08);
  padding:14px;background:#fafafa;
  display:flex;flex-direction:column;gap:10px;
}
.ere-nearby-modal__mapSlot{width:100%;flex:1;min-height:280px}
.ere-nearby-modal__content{padding:18px 16px;overflow:auto}

@media (max-width: 991px){
  .ere-nearby-modal__panel{width:96vw;height:92vh}
  .ere-nearby-modal__grid{grid-template-columns:1fr;grid-template-rows:320px 1fr}
  .ere-nearby-modal__map{border-right:0;border-bottom:1px solid rgba(0,0,0,.08)}
}

.ere-nearby-modal-open{overflow:hidden}

@media (max-width: 991px){ }

.ere-nearby-pin{background:transparent;border:none}
.ere-nearby-pin svg{display:block}


  /* Add breathing room so close button never overlaps the top note/text */
  .ere-nearby-modal__map{
    padding-top: 58px;
  }
  .ere-nearby-modal__content{
    padding-top: 58px;
  }
  .ere-nearby-note--top{
    padding-right: 56px;
  }
}


/* Make moved Leaflet map fill the available slot (desktop + mobile) */
.ere-nearby-modal__mapSlot{min-height:0; overflow:hidden; border-radius:14px;}
.ere-nearby-modal__mapSlot > *{height:100% !important; min-height:100% !important; width:100% !important;}
.ere-nearby-modal__mapSlot .kfs-map-fill{height:100% !important; min-height:100% !important;}
.ere-nearby-modal__mapSlot .leaflet-container{height:100% !important; min-height:100% !important; width:100% !important;}


@media (max-width: 991px){
  .ere-nearby-modal__grid{grid-template-columns:1fr; grid-template-rows:min(52vh,420px) 1fr;}
  .ere-nearby-modal__map{min-height:0;}
  .ere-nearby-modal__content{min-height:0;}
}


/* Action buttons: make them stand out a bit more */
.ere-nearby-buttons{align-items:center}
.ere-nearby-btn{font-weight:600; letter-spacing:.2px}
.ere-nearby-btn:not(.ere-nearby-btn--secondary){
  background: rgba(17,17,17,.92);
  color:#fff;
  border-color: rgba(17,17,17,.92);
}
.ere-nearby-btn:not(.ere-nearby-btn--secondary):hover{background: rgba(17,17,17,1)}
.ere-nearby-btn--secondary{
  background:#fff;
}
.ere-nearby-btn--secondary.is-on{
  background: rgba(17,17,17,.06);
}


@media (max-width: 991px){
  .ere-nearby-modal__close{
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
  /* Reserve space only where needed (map column already padded by its own top note) */
  .ere-nearby-modal__map{padding-top: 12px;}
  .ere-nearby-modal__content{padding-top: 16px;}
}


/* Mobile: distance/time should be UNDER the name (stacked) */
@media (max-width: 767px){
  .ere-nearby-name-row{display:block !important;}
  .ere-nearby-distance{
    display:block !important;
    margin-top:6px !important;
    white-space:normal !important;
    text-align:left !important;
  }
}


/* Mobile: beach badge distance should be on the next line */
@media (max-width: 767px){
  .ere-nearby-beach{
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px;
  }
  .ere-nearby-beach__dist{
    margin: 0 !important;
    opacity: .9;
  }
}

/* Mobile (popup): make type checkboxes (chips) more compact */
@media (max-width: 767px){
  .ere-nearby-chips{gap:6px 6px;}
  .ere-nearby-chip{
    padding:4px 6px;
    font-size:11px;
    line-height:1;
  }
  .ere-nearby-chip input{width:13px;height:13px;}
  .ere-nearby-chip__dot{width:7px;height:7px;}
}

/* Ensure popup close button stays above Leaflet map */
.ere-nearby-modal__mapSlot{position:relative; z-index:1;}
.ere-nearby-modal__close{z-index:1000000 !important; pointer-events:auto;}
.ere-nearby-modal__mapSlot .leaflet-container,
.ere-nearby-modal__mapSlot .leaflet-pane,
.ere-nearby-modal__mapSlot .leaflet-control{z-index:1;}