/* LUS map look (libs/map-style.php): pairs with the Mapbox Streets tiles.
   Colours and sizes only. The popup keeps the parent theme's own geometry
   (fixed 320x220 card placed with negative margins), so nothing here moves it. */

/* ---- Map buttons (zoom, my location, full screen, prev/next) ----
   The parent draws these itself (#gmapzoomplus etc., icon sprite): square, grey
   outline. Round the corners, drop the outline, add a soft shadow. */
#gmapzoomplus,
#gmapzoomminus,
#geolocation-button,
#gmap-full,
#gmap-prev,
#gmap-next,
#gmapstreet {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  margin-right: 8px;
}
#gmapzoomplus:hover,
#gmapzoomminus:hover,
#geolocation-button:hover,
#gmap-full:hover,
#gmap-prev:hover,
#gmap-next:hover,
#gmapstreet:hover {
  background-color: #f1f1f1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
}

/* ---- Credits: small and quiet ---- */
.leaflet-container .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  color: #666;
  border-radius: 8px 0 0 0;
}

/* ---- Popup card ---- */
.leaflet-popup-content .info_details {
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.leaflet-popup-content .info_details .infoimage {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.leaflet-popup-content .info_details .infogradient {
  background: linear-gradient(to bottom, rgba(20, 22, 28, 0) 0%, rgba(20, 22, 28, 0.78) 100%);
}
.leaflet-popup-content .info_details .prop_detailsx {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.leaflet-popup-content .info_details #infobox_title {
  font-weight: 600;
  font-size: 17px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Close button: round, white, a real "x" instead of the parent's image sprite */
.leaflet-popup-content .info_details #infocloser {
  width: 30px;
  height: 30px;
  top: 10px;
  right: 10px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  background-image: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  opacity: 1;
}
.leaflet-popup-content .info_details #infocloser::before {
  content: "\00d7";
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 22px;
  line-height: 29px;
  color: #444;
}
.leaflet-popup-content .info_details #infocloser:hover::before {
  color: #000;
}

/* Price badge: full pill, parked left of the close button */
.leaflet-popup-content .info_details .prop_pricex {
  right: 50px;
  border-radius: 999px;
  padding: 5px 12px;
}

/* ---- Phones: the parent's fixed 320px card is wider than the map (about 270px),
   which cut off its right side and the close button. Narrower card, re-centred on
   the pin (the card's left edge sits a fixed distance from the pin, so +36px
   centres a 230px card). ---- */
@media only screen and (max-width: 480px) {
  .leaflet-popup-content .info_details {
    width: 230px !important;
    margin-left: 36px !important;
  }
}