.gflp-container {
    position: relative;
}

.gflp-map,
.gflp-mapbox-picker,
.gflp-googlemaps-picker,
.gflp-openstreetmap-picker {
    position: relative; /* anchors the confirmation bubble */
    width: 100%;
    height: 200px;
}

/* Read only map under a submitted entry, in wp-admin. It sits outside the form
   wrapper, so none of the theme framework defences below apply to it. */
.gflp-entry-map {
    max-width: 640px;
    margin: 0 0 10px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    overflow: hidden;
}

/* Address autocomplete: the wrapper anchors the suggestion list. */
.gflp-address {
    position: relative;
    margin-bottom: 8px;
}

.gflp-container .gflp-autocomplete-address {
    width: 100%;
    box-sizing: border-box;
}

.gflp-container .gflp-autocomplete-address[disabled] {
    background: #f6f7f7;
    cursor: default;
}

/* Suggestion list. A theme's `li { list-style: disc }` applies directly to the
   items, so list-style is cleared on them, not just on the container. */
.gflp-container .gflp-suggestions,
.gflp-address-anchor .gflp-suggestions {
    position: absolute;
    z-index: 500;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    margin: 2px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    text-align: left;
}

.gflp-container .gflp-suggestions__item,
.gflp-container .gflp-suggestions__empty,
.gflp-address-anchor .gflp-suggestions__item,
.gflp-address-anchor .gflp-suggestions__empty {
    margin: 0;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    list-style: none;
    color: inherit;
}

.gflp-container .gflp-suggestions__item,
.gflp-address-anchor .gflp-suggestions__item {
    cursor: pointer;
}

.gflp-container .gflp-suggestions__item:hover,
.gflp-container .gflp-suggestions__item.is-active,
.gflp-address-anchor .gflp-suggestions__item:hover,
.gflp-address-anchor .gflp-suggestions__item.is-active {
    background: #f0f6fc;
}

.gflp-container .gflp-suggestions__empty,
.gflp-address-anchor .gflp-suggestions__empty {
    color: #646970;
}

/* Usage hint below the map. */
.gflp-container .gflp-hint {
    display: block;
    margin: 5px 0 0;
    padding: 0;
    font-size: 11px;
    font-style: italic;
    line-height: 1.4;
    color: #666;
}

/* Themes very commonly ship `svg, img { height: auto; max-width: 100% }` -
   Twenty Twenty does. Mapbox sizes its marker with width and height attributes
   on the SVG, and the marker's own div is absolutely positioned with no width,
   so that max-width resolves against zero and collapses the pin to 0x0: the
   marker is in the DOM, positioned correctly, and invisible. Leaflet and Google
   escape it because they set inline sizes on their marker elements.
   Marked important because a theme that sets this usually does so bluntly. */
.gflp-map .mapboxgl-marker svg {
    max-width: none !important;
}

/* Markers read as clickable. The hover effect deliberately does not use
   transform: both Leaflet and Mapbox position their markers with an inline
   transform, so an author rule either loses to it or, with !important, wins and
   throws the marker to the corner of the map. */
.mapboxgl-marker,
.leaflet-marker-icon {
    cursor: pointer !important;
    transition: filter 0.15s ease;
}

.mapboxgl-marker:hover,
.leaflet-marker-icon:hover {
    filter: brightness(1.08) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Map error styling */
.gflp-map-error {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 120px;
    padding: 20px;
    text-align: center;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
}

.gflp-map-error p {
    margin: 0;
    line-height: 1.4;
}

/* In-place confirmation bubble shown instead of window.confirm(). */
.gflp-confirm {
    position: absolute;
    z-index: 600;
    width: 190px;
    padding: 10px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.gflp-confirm__text {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.3;
    color: #1d2327;
}

.gflp-confirm__actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.gflp-confirm__button {
    flex: 1;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.2;
    color: #1d2327;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    cursor: pointer;
}

.gflp-confirm__button:hover {
    background: #ebebec;
}

.gflp-confirm__button--confirm {
    color: #fff;
    background: #d63638;
    border-color: #d63638;
}

.gflp-confirm__button--confirm:hover {
    background: #b32d2e;
    border-color: #b32d2e;
}

.gflp-confirm__button:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

/* Form editor: initial centre location setting.
   Selectors are scoped to the setting's own <li> so they outrank the generic
   full-width input styling in the Gravity Forms settings panel. */
li.gflp_init_location_setting .gflp-latlng {
    display: flex;
    gap: 12px;
    align-items: center;
}

li.gflp_init_location_setting .gflp-latlng input[type="text"] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
}

li.gflp_init_location_setting .gflp-use-map-view {
    display: inline-block;
    width: auto;
    height: auto;
    margin-top: 12px;
    padding: 3px 12px;
    font-size: 12px;
    line-height: 1.8;
}

li.gflp_init_location_setting .gflp-setting-hint {
    margin-top: 8px;
}

/* The instruction text box sits under its own checkbox rather than under a
   section label, so it gets no spacing from Gravity Forms. */
li.gflp_hint_setting #gflp_hint_text_setting {
    margin-top: 10px;
}

.gflp-setting-hint {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: #646970;
}

/* The Gravity Forms theme framework resets position/overflow on every element
   inside a form via a zero specificity :where() selector, which collapses the
   absolutely positioned layers the map libraries build. The opt-out classes in
   the markup handle this; these rules are a second line of defence with higher
   specificity than both the reset and the libraries' own stylesheets. */
.gflp-container .gflp-map {
    overflow: hidden;
}

.gflp-container .leaflet-pane,
.gflp-container .leaflet-control-container,
.gflp-container .mapboxgl-canvas-container,
.gflp-container .mapboxgl-ctrl-top-right,
.gflp-container .mapboxgl-ctrl-bottom-right,
.gflp-container .mapboxgl-ctrl-bottom-left {
    position: absolute;
}

.gflp-container .leaflet-marker-icon,
.gflp-container .leaflet-marker-shadow,
.gflp-container .leaflet-tile {
    position: absolute;
}

.gflp-container .gflp-suggestions {
    position: absolute;
}

/* Optional list of selected locations, shown under the map.

   These controls are buttons, and themes style buttons heavily (background,
   text-transform, padding, font size). The field opts out of the Gravity Forms
   theme reset so the map libraries keep their layout, which means nothing else
   neutralises the theme here: the component resets its own controls. Hence the
   scoped selectors and the !important on theme-prone properties. */
.gflp-container .gflp-locations {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.gflp-container .gflp-locations__item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px solid #e5e5e5;
    list-style: none;
}

.gflp-container .gflp-locations__item:last-child {
    border-bottom: 0;
}

/* Shared neutralisation of whatever the theme does to buttons. */
.gflp-container .gflp-locations__show,
.gflp-container .gflp-locations__remove,
.gflp-container .gflp-confirm__button {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* The row label is a button: clicking it centres the map on that location. */
.gflp-container .gflp-locations__show {
    display: flex !important;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    color: inherit !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.gflp-container .gflp-locations__show:hover .gflp-locations__label {
    text-decoration: underline;
}

.gflp-container .gflp-locations__show[disabled] {
    cursor: default !important;
    opacity: 1;
}

.gflp-container .gflp-locations__show:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

.gflp-container .gflp-locations__index {
    flex: 0 0 auto;
    color: #646970;
}

.gflp-container .gflp-locations__label {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.gflp-container .gflp-locations__remove {
    flex: 0 0 auto;
    padding: 2px 8px !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    color: #b32d2e !important;
    background: transparent !important;
    border: 1px solid #d7d7d7 !important;
    border-radius: 3px !important;
}

.gflp-container .gflp-locations__remove:hover {
    color: #fff !important;
    background: #d63638 !important;
    border-color: #d63638 !important;
}

.gflp-container .gflp-locations__remove:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

.gflp-container .gflp-locations__empty {
    margin: 0;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.4;
    color: #646970;
    list-style: none;
}

/* In-place confirmation bubble shown instead of window.confirm(). */
.gflp-container .gflp-confirm {
    position: absolute;
    z-index: 600;
    width: 190px;
    padding: 10px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.gflp-container .gflp-confirm__text {
    margin: 0 0 8px;
    padding: 0;
    font-size: 13px;
    line-height: 1.3;
    color: #1d2327;
}

.gflp-container .gflp-confirm__actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.gflp-container .gflp-confirm__button {
    flex: 1 1 0;
    padding: 5px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: #1d2327 !important;
    background: #f6f7f7 !important;
    border: 1px solid #c3c4c7 !important;
    border-radius: 3px !important;
}

.gflp-container .gflp-confirm__button:hover {
    background: #ebebec !important;
}

.gflp-container .gflp-confirm__button--confirm {
    color: #fff !important;
    background: #d63638 !important;
    border-color: #d63638 !important;
}

.gflp-container .gflp-confirm__button--confirm:hover {
    background: #b32d2e !important;
    border-color: #b32d2e !important;
}

.gflp-container .gflp-confirm__button:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

/* Optional list of selected locations, shown under the map. */
.gflp-locations {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.gflp-locations__item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 13px;
    line-height: 1.4;
}

.gflp-locations__item:last-child {
    border-bottom: 0;
}

/* The row label is a button: clicking it centres the map on that location. */
.gflp-locations__show {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.gflp-locations__show:hover .gflp-locations__label {
    text-decoration: underline;
}

.gflp-locations__show[disabled] {
    cursor: default;
}

.gflp-locations__show:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

.gflp-locations__index {
    flex: 0 0 auto;
    color: #646970;
}

.gflp-locations__label {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.gflp-locations__remove {
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.6;
    color: #b32d2e;
    background: transparent;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    cursor: pointer;
}

.gflp-locations__remove:hover {
    color: #fff;
    background: #d63638;
    border-color: #d63638;
}

.gflp-locations__remove:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

.gflp-locations__empty {
    margin: 0;
    padding: 6px 0;
    font-size: 12px;
    color: #646970;
}

/* Anchors the suggestion list under the street line of a Gravity Forms
   Address field, whose markup is not ours to change.

   These must outrank the Gravity Forms theme reset, which sets position: unset
   on every descendant of a form through a zero specificity :where() selector.
   That scores the same as a single class and wins on load order, which left the
   list with no containing block: it escaped to the page corner in Chrome and
   collapsed to nothing in Firefox. The address wrapper is listed too, so both
   autocompletes are anchored the same way. */
.gform_wrapper .gflp-address,
.gform_wrapper .gflp-address-anchor,
.gflp-address,
.gflp-address-anchor {
    position: relative !important;
}

.gflp-address-hook {
    display: none;
}

/* Map provider controls.

   The map opts out of the Gravity Forms theme reset so the libraries keep their
   layout, which also means a theme's button and link styling reaches the zoom
   and attribution controls the libraries render. Each library only styles the
   properties it cares about, so anything it leaves alone (background, padding,
   font size, text transform) is inherited from the theme. These rules restore
   each library's own control appearance. */
.gflp-container .mapboxgl-ctrl button,
.gflp-container .leaflet-bar a,
.gflp-container .gm-style button {
    box-sizing: border-box !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.gflp-container .mapboxgl-ctrl-group {
    background: #fff;
    border-radius: 4px;
}

.gflp-container .mapboxgl-ctrl-group button {
    width: 29px !important;
    height: 29px !important;
    padding: 0 !important;
    color: #333 !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.gflp-container .mapboxgl-ctrl-attrib-button {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 0 !important;
    border-radius: 12px !important;
}

.gflp-container .mapboxgl-ctrl-attrib {
    color: #333;
}

.gflp-container .mapboxgl-ctrl-attrib a {
    color: #333 !important;
    text-decoration: none !important;
}

/* Leaflet draws its zoom control with links rather than buttons. */
.gflp-container .leaflet-bar a {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    line-height: 26px !important;
    color: #000 !important;
    background-color: #fff !important;
    text-align: center !important;
}

.gflp-container .leaflet-control-attribution a {
    color: #0078a8 !important;
    background: none !important;
}