/* Photo Map Explorer styles */

.pme-thumb-pin {
  width:60px;
  height:60px;
  border-radius:50%;
  background-size:cover;
  background-position:center center;
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.leaflet-marker-icon:hover .pme-thumb-pin {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  z-index: 1000;
}

.pme-popup-img {
  display:block;
  width:100%;
  max-width:none;
  height:250px;
  object-fit: cover;
  border-radius:12px;
  margin-bottom:10px;
}

.pme-popup .pme-popup-title{
  font-size:18px;
  font-weight:700;
  margin:6px 0;
  color:#1a73e8;
  white-space: normal;
  word-wrap: break-word;
  line-height:1.3;
}

.pme-date{
  font-size:13px;
  color:#555;
  opacity:.9;
  margin-top:4px;
}

.pme-popup-btn {
  display:inline-block;
  margin-top:10px;
  padding:6px 12px;
  font-size:14px;
  font-weight:600;
  color:#fff !important;
  background-color:#1a73e8;
  border-radius:6px;
  text-decoration:none;
  transition:background-color 0.2s ease, transform 0.2s ease;
}
.pme-popup-btn:hover {
  background-color:#155ab6;
  transform:translateY(-2px);
}
/* Add alongside the default MarkerCluster.css you already load */
.marker-cluster-tiny div {
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
}
/* Make the search input a bit wider and keep controls above markers */
.leaflet-control-geocoder { z-index: 1000; }
.leaflet-control-geocoder .leaflet-control-geocoder-form input {
  width: 260px;
}