/*
 * The draw button and its panel, in the theme's own map-control row (the chat module gathers the zoom,
 * fullscreen and Prev/Next clusters into one row at the top left of the map).
 *
 * The button is the theme's .map-btn box with the theme's primary colour, so it reads as one of the
 * row and not as a guest: 30px tall, 4px corners, 10px uppercase, the same shadow. The colour arrives
 * as --ere-region-draw-color from the server, which reads houzez_primary_color.
 */

.ere-region-draw {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ere-region-draw__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    margin-left: 3px;
    border: 0;
    border-radius: 4px;
    background: var(--ere-region-draw-color, #4288D5);
    color: #fff;
    /* Not the `font` shorthand: `inherit` is not allowed inside it, so the whole declaration would be
       dropped and the button would render at the page's 16px/400 instead of the row's 10px/700. */
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* The label keeps its width and the toolbar row wraps instead, rather than the words breaking. */
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.ere-region-draw__button:hover,
.ere-region-draw__button:focus-visible { filter: brightness(0.9); }

.ere-region-draw__button.is-active { background: #00aeef; filter: none; }

/* The pencil comes from the theme's own icon font, sized exactly like the icon inside a .map-btn
   (measured: 10px, line-height 10px, display block) so the toolbar reads as one set. */
.ere-region-draw__icon {
    font-size: 10px;
    line-height: 10px;
    display: block;
    flex: 0 0 auto;
}

.ere-region-draw__panel {
    position: absolute;
    top: 36px;
    /* The button is the last item in the map row, so the panel grows to the LEFT from the button's
       right edge. Anchored left it runs off the map and out of the viewport. */
    right: 0;
    left: auto;
    z-index: 5;
    width: min(360px, calc(100vw - 32px));
    padding: 12px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 25, 45, 0.28);
    text-transform: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: #1c2b3a;
}

.ere-region-draw__panel[hidden] { display: none; }

/* Opened from the search form: away from the map row, so it sits under that button instead. Nothing of the
   map row's positioning (or a transform on it) may influence this, hence fixed. */
.ere-region-draw__panel--floating {
    position: fixed;
    right: auto;
    left: 0;
    top: 0;
    z-index: 9999;
}

/* The second way in: on the search form's Radius line, to the left of the Radius control and on the same
   line as it, wearing the theme's blue as a SOLID button — the same fill as the Search button beside it,
   not the white outline that read as an empty slot. Desktop only (see the media query at the end); the map
   row keeps its own button. */
.ere-region-draw__form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 40px;
    /* The Radius row carries its own `gap-4`, so the button needs no margin of its own to stand clear of
       the Radius control it now sits beside. */
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--ere-region-draw-color, #4288D5);
    border-radius: 4px;
    background: var(--ere-region-draw-color, #4288D5);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.ere-region-draw__form-button:hover,
.ere-region-draw__form-button:focus-visible {
    filter: brightness(0.9);
}

.ere-region-draw__hint { margin: 0 0 10px; color: #4a5866; }

/* Which shape to draw. Two small tabs, the active one in the theme's blue. */
.ere-region-draw__tools { display: flex; gap: 6px; margin-bottom: 10px; }

.ere-region-draw__tool {
    flex: 1 1 0;
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid #d5dbe3;
    border-radius: 4px;
    background: #fff;
    color: #4a5866;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.ere-region-draw__tool.is-on {
    border-color: var(--ere-region-draw-color, #4288D5);
    background: var(--ere-region-draw-color, #4288D5);
    color: #fff;
}

/* The zones drawn so far, each with its own area and remove button. */
.ere-region-draw__zones {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    max-height: 132px;
    overflow-y: auto;
}

.ere-region-draw__zones[hidden] { display: none; }

.ere-region-draw__zone {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-top: 1px solid #eef1f5;
}

.ere-region-draw__zone-name { flex: 1 1 auto; font-weight: 600; }

.ere-region-draw__zone-area { color: #4a5866; font-variant-numeric: tabular-nums; }

.ere-region-draw__zone-remove {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #d5dbe3;
    border-radius: 4px;
    background: #fff;
    color: #b3261e;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.ere-region-draw__zone-remove:hover { background: #fdf3f2; border-color: #b3261e; }

/* Shown when the visitor asks for an email alert before naming the area. */
.ere-region-draw__note {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--ere-region-draw-color, #4288D5);
    border-radius: 0 4px 4px 0;
    background: #f2f7fc;
    color: #1c2b3a;
    font-weight: 600;
}

.ere-region-draw__note[hidden] { display: none; }

.ere-region-draw__area { color: #4a5866; }
.ere-region-draw__area.is-over { color: #b3261e; font-weight: 600; }

.ere-region-draw__label { display: block; margin-bottom: 10px; }

.ere-region-draw__label span { display: block; margin-bottom: 4px; color: #4a5866; }

.ere-region-draw__label input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid #d5dbe3;
    border-radius: 4px;
    font: inherit;
    color: #1c2b3a;
}

.ere-region-draw__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Wide enough for the three buttons on one row; the panel keeps its right edge on the button. */
.ere-region-draw__ghost,
.ere-region-draw__go {
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.ere-region-draw__ghost { border: 1px solid #d5dbe3; background: #fff; color: #4288D5; }

.ere-region-draw__go { margin-left: auto; border: 0; background: var(--ere-region-draw-color, #4288D5); color: #fff; }

.ere-region-draw__go:hover { filter: brightness(0.9); }

/* On a phone the row is tight: the theme drops the text from its own buttons, so this one becomes the
   square icon button beside them — and because that button sits at the END of the toolbar, a panel
   anchored to the button falls off the left of the screen. Let the toolbar row be the anchor instead:
   the panel opens under the whole row, from its left edge, which is inside the viewport. */
@media (max-width: 767px) {
    .ere-region-draw__text { display: none; }
    .ere-region-draw__button { width: 30px; padding: 0; }
    .ere-region-draw { position: static; }
    .ere-region-draw__panel {
        left: 0;
        right: auto;
        top: 100%;
        width: min(calc(100vw - 40px), 420px);
    }
    .ere-region-draw__ghost,
    .ere-region-draw__go { font-size: 11px; padding: 8px; }
}

/* The form's own button is for the desktop layout: on a phone the form is the mobile one and the map's
   button is the way in. Freehand goes with it — it is a mouse gesture, and the panel is too tight. */
@media (max-width: 991px) {
    .ere-region-draw__form-button { display: none; }
    .ere-region-draw__tool[data-ere-tool="freehand"] { display: none; }
}

/* On a desktop the map row carries no button of its own: the one in the search form is the way in. The
   panel still works from there, because it is moved to the page while it is open. Phones keep the map
   button — the form button is hidden there, so it is the only way in. */
@media (min-width: 992px) {
    .ere-region-draw { display: none; }
}

/* The × on each zone, on the map itself: a zone can be dropped where it is drawn, without opening the
   panel. Leaflet puts it in a div icon, so it needs no image and inherits the theme's font. */
.ere-region-draw__zone-pin {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #00335a;
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 25, 45, 0.45);
    cursor: pointer;
}

.ere-region-draw__zone-pin:hover,
.ere-region-draw__zone-pin:focus-visible { background: #b3261e; }

/* The wrapper Leaflet's div icon comes with: no background, no border, no padding of its own. */
.ere-region-draw__pin-wrap { background: none; border: 0; }

/* A placed point. */
.ere-region-draw__dot {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #00335a;
    box-shadow: 0 1px 4px rgba(0, 25, 45, 0.4);
    cursor: crosshair;
}