/* # FRONT END ------------------------------------------------------------- */

/* The height is deliberately NOT set here. It is configurable, and the field
   writes it as an inline style, which no stylesheet can override. That also
   survived the Gravity Forms theme reset, which used to zero the min-height
   set from here: its `.gform-theme--framework :where(...)` rule adds no
   specificity, so it tied with this class selector and won on source order.
   The container now also carries .gform-theme__disable, which exempts it from
   that reset, but the height stays inline because it is a setting.
   See GravityGeotools::get_map_height(). */
.gravitygeotools-mapcontainer{
    background: #eee;
    width: 100%;
}

/* Spacing follows the form's own rhythm. Gravity Forms exposes these custom
   properties on the form wrapper, so the field spaces itself like the
   questions around it under any theme, and falls back to comparable values
   when a theme does not define them.
 *
 * Everything that sets margin, gap or display below is scoped through
 * .ginput_container_geometry on purpose. The Gravity Forms theme reset zeroes
 * those properties on every element it is not told to skip, with a
 * `.gform-theme--framework :where(...)` selector. :where() adds no
 * specificity, so that rule scores (0,1,0) and ties with a bare class of ours,
 * then wins because it loads later. Adding the container class puts these at
 * (0,2,0) so they survive. The map and the toolbar do not need this: they
 * carry .gform-theme__disable and are exempt from the reset entirely. */

/* The map and the toolbar carry .gform-theme__disable, which exempts them from
   the Gravity Forms theme reset and framework styling. That keeps Mapbox's own
   controls looking like map controls under every form theme and layout, but it
   also means nothing else styles the toolbar, so the buttons are fully
   described here rather than inheriting from the active theme. */
.gravitygeotools-toolbar{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gf-field-gap-x, 12px);
    margin-top: var(--gf-field-gap-y, 12px);
}

.gravitygeotools-toolbar:empty{
    display: none;
}

.gravitygeotools-button{
    /* Contrast ratio against #fff is 8.6:1, above the WCAG AA minimum of 4.5:1. */
    background: #1f2933;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: .5rem 1rem;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.gravitygeotools-button:hover{
    background: #323f4b;
}

/* A visible focus ring in both directions, so the control is keyboard-usable
   whatever the surrounding theme does to :focus. */
.gravitygeotools-button:focus-visible{
    outline: 2px solid #1f2933;
    outline-offset: 2px;
}

.gravitygeotools-button--secondary{
    background: #fff;
    color: #1f2933;
    border-color: #6b7280;
}

.gravitygeotools-button--secondary:hover{
    background: #f3f4f6;
}

/* The size is deliberately NOT set here: it is a setting, and the field writes
   it inline. A fixed size here would override it. cursor: grab signals that
   the pin can be dragged. */
.gravitygeotools-marker{
    display: block;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.gravitygeotools-marker:active{
    cursor: grabbing;
}

/* Mapbox positions its controls absolutely inside the map. Themes that set a
   global max-width or float on generic elements can drag them out of place. */
.gravitygeotools-mapcontainer .mapboxgl-ctrl-group,
.gravitygeotools-mapcontainer .mapboxgl-ctrl-geocoder{
    float: none;
    max-width: none;
    box-sizing: border-box;
}

/* Mapbox GL Draw always creates its control group, even when it is configured
   without any buttons. It collapses to nothing on its own, but it carries a
   white background, so a theme that gives generic elements padding or a
   min-height would turn it into a stray white box on the map. */
.gravitygeotools-mapcontainer .mapboxgl-ctrl-group:empty{
    display: none;
}

/* Keep the search box usable on narrow screens, where the Mapbox default of a
   fixed 240px min-width can overflow the map. */
.gravitygeotools-mapcontainer .mapboxgl-ctrl-geocoder{
    min-width: 0;
    width: min(100%, 320px);
}

/* Set apart from the map by the same distance the form puts between its own
   questions, so the properties read as a separate block rather than as labels
   stuck to the bottom edge of the map. */
.ginput_container_geometry .gravitygeotools-properties{
    display: grid;
    row-gap: calc(var(--gf-field-gap-y, 12px) * 2);
    margin-top: var(--gf-form-gap-y, 32px);
}

/* Matches the gap Gravity Forms puts between a field label and its input. */
.ginput_container_geometry .gravitygeotools-property:not(.gravitygeotools-property--checkbox) > label{
    display: block;
    margin-bottom: var(--gf-label-space-primary, 8px);
}

/* A checkbox reads as one line: the label sits beside the box, not above it. */
.ginput_container_geometry .gravitygeotools-property--checkbox{
    display: flex;
    align-items: center;
    gap: var(--gf-label-space-x-secondary, 12px);
}

.ginput_container_geometry .gravitygeotools-property--checkbox > label{
    display: inline;
    margin-bottom: 0;
}

.gravitygeotools-property input[type="text"],
.gravitygeotools-property input[type="number"],
.gravitygeotools-property select{
    width: 100%;
}

.gravitygeotools-property--checkbox input{
    width: auto;
}

/* # FORM EDITOR ----------------------------------------------------------- */

/* The editor shows a summary instead of a live map, so configuring the field
   does not fire a Mapbox request on every keystroke. */
.ginput_container_geometry .gravitygeotools-preview__map{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.5rem;
    border: 1px dashed #c3c4c7;
    border-radius: 4px;
    background: #f6f7f7;
    color: #50575e;
    text-align: center;
}

.ginput_container_geometry .gravitygeotools-preview__properties{
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.ginput_container_geometry .gravitygeotools-preview__properties li{
    padding: .25rem 0;
    border-bottom: 1px solid #f0f0f1;
    font-size: .9em;
}

.ginput_container_geometry .gravitygeotools-preview__properties code{
    margin: 0 .35rem;
    font-size: .85em;
}

.ginput_container_geometry .gravitygeotools-preview__properties em{
    color: #646970;
}

/* The marker picker: a grid of the installed markers, so the editor chooses by
   sight rather than from a list of names like "green triangle". */
.geo-marker-picker{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: 6px;
}

.geo-marker-picker__option{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.geo-marker-picker__option:hover{
    border-color: #8c8f94;
}

.geo-marker-picker__option.is-selected{
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    background: #f0f6fc;
}

.geo-marker-picker__option:focus-visible{
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

.geo-marker-picker__option img{
    display: block;
}

/* The properties are edited in a modal: a key, label, type, required flag and
   a choice list per property do not fit in the narrow settings sidebar. */
#geo-properties-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 100050;
    display: none;
}

#geo-properties-modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: min(92vw, 820px);
    max-height: 86vh;
    display: none;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    z-index: 100051;
}

#geo-properties-modal .geo-modal__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #dcdcde;
}

#geo-properties-modal .geo-modal__head h2{
    margin: 0;
    font-size: 16px;
}

#geo-properties-modal .geo-modal__close{
    cursor: pointer;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
}

#geo-properties-modal .geo-modal__body{
    padding: 16px 20px;
    overflow: auto;
}

#geo-properties-modal .geo-modal__foot{
    padding: 12px 20px;
    border-top: 1px solid #dcdcde;
    text-align: right;
}

#geo-properties-modal .geo-property-row{
    margin-bottom: .75rem;
    padding: .75rem;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    background: #fff;
}

#geo-properties-modal .geo-property-row__line{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
    margin-bottom: .5rem;
}

#geo-properties-modal .geo-property-row__line:last-child{
    margin-bottom: 0;
}

#geo-properties-modal .geo-property-row__line > label{
    flex: 1 1 45%;
}

#geo-properties-modal .geo-property-row .geo-property-required-label{
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
}

#geo-properties-modal .geo-property-row input[type="text"],
#geo-properties-modal .geo-property-row select,
#geo-properties-modal .geo-property-row textarea{
    width: 100%;
}

#geo-properties-modal .geo-property-row .geo-property-delete{
    flex: 0 0 auto;
    color: #b32d2e;
    cursor: pointer;
}