/*
 * Loffredo "Delivery Area Map" widget (child theme, inc/delivery-map-widget.php).
 * Base look = loffredo.com's Distribution Area page, measured at 1920 / 1440 / 1280 / 1024 / 820 / 390 px.
 * The widget's Style controls write more specific rules, so anything set in Elementor wins over this file.
 * The two media queries repeat the controls' tablet / phone defaults (live's 992 px and 768 px steps).
 */
.lf-dmap { position: relative; }

/* Search row: live's Bootstrap grid (row 10/12, field 6/12 after a 2/12 gap, button in the last 4/12). */
.lf-dmap__search { padding: 0 15px 15px; }
.lf-dmap__form { display: flex; flex-wrap: wrap; align-items: flex-start; width: 83.3333%; margin: 0 auto; }
.lf-dmap__field { box-sizing: border-box; width: 50%; margin-left: 16.6667%; padding: 0 15px; }
.lf-dmap__action { box-sizing: border-box; flex: 1 1 0%; min-width: max-content; padding: 0 15px 10px; text-align: left; }

/* Address field (live: .form-control, 34 px tall). */
.lf-dmap .lf-dmap__input {
	display: block; box-sizing: border-box; width: 100%; height: auto; margin: 0; padding: 6px 12px;
	font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 400; color: #555;
	background-color: #fff; border: 1px solid #6E6766; border-radius: 0; outline: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.lf-dmap .lf-dmap__input::placeholder { color: #999; opacity: 1; }
.lf-dmap .lf-dmap__input:focus { border-color: #66AFE9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }

/* Button (live: .green-btn at 14 px, 30 px tall). Hover / keyboard focus: a circle grows from the centre, like the
   site's other filled buttons. */
.lf-dmap .lf-dmap__button {
	position: relative; z-index: 0; isolation: isolate; overflow: hidden; display: inline-block; vertical-align: top;
	margin: 0; padding: 5px 10px; font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 700;
	text-transform: uppercase; white-space: nowrap; color: #fff; background-color: #007F3E; border: 0; border-radius: 0;
	cursor: pointer; transition: color .25s ease-in-out;
}
.lf-dmap .lf-dmap__button:hover, .lf-dmap .lf-dmap__button:focus { color: #fff; background-color: #007F3E; }
.lf-dmap .lf-dmap__button::before {
	content: ""; position: absolute; left: 49%; top: 50%; width: 1px; height: 1px; border-radius: 100%;
	background-color: #ED1A3B; transform: scale(.1); transition: transform .25s ease-in-out; z-index: -1; pointer-events: none;
}
.lf-dmap .lf-dmap__button:focus-visible::before { transform: scale(600); }
@media (hover: hover) { .lf-dmap .lf-dmap__button:hover::before { transform: scale(600); } } /* no "stuck" red after a tap on phones */
.lf-dmap .lf-dmap__button[aria-busy="true"] { cursor: progress; }

/* "Not found" message: its own line under the row; takes no space while empty. */
.lf-dmap__message { box-sizing: border-box; flex: 0 0 100%; margin: 0 0 10px; padding: 0 15px; text-align: center; font-size: 14px; line-height: 20px; color: #3A3635; }
.lf-dmap__message:empty { display: none; }

/* Map: its own stacking context, so the sticky header always stays above Leaflet's layers. */
.lf-dmap__map { position: relative; z-index: 0; width: 100%; height: 800px; background-color: #EFEFEF; font-family: inherit; }
/* Grey map like live's styled Google map: grey, then lower contrast and raise brightness so land stays #EFEFEF and water
   comes out near live's #D3D3D3 (contrast before brightness, otherwise light colours clip to white). */
.lf-dmap .leaflet-tile-pane { filter: grayscale(var(--lf-dmap-grey, 100%)) contrast(var(--lf-dmap-contrast, 65%)) brightness(var(--lf-dmap-brightness, 119%)); }
.lf-dmap .leaflet-marker-icon { max-width: none; }
.lf-dmap__notice { margin: 0; padding: 10px 15px; font-size: 13px; color: #ED1A3B; background: #fff; }

@media (max-width: 991px) {
	.lf-dmap__form { width: 100%; }
}
@media (max-width: 767px) {
	.lf-dmap__field { width: 100%; margin-left: 0; }
	.lf-dmap__action { text-align: center; }
	.lf-dmap .lf-dmap__button { margin-top: 15px; }
}