/*
=====================================================================================
    map-style css
=====================================================================================
	
	Version History:
	Name				Date		Changes
	------------------	----------	-------------------------------------------------
	map-style-05.css	Aug 2026	Improved map popups and click to zoom functionality 
	------------------	----------	-------------------------------------------------
	map-style-04.css	Jul 2026	Fixed ESRI search box issue folowing ArcGIS release
	------------------	----------	-------------------------------------------------
	map-style-03.css	Mar 2025	Collated code from Alloy map forms
									Reduced font size and margins on popup so it  
									takes up less space on mobile
	------------------	----------	-----------------------------------------------
	map-style-02.css	Aug 2024	Popup title - removed bold
									Popup bottom margin - reduced to 15px when docked
									Popup action text (btn) - text centered
	------------------	----------	-----------------------------------------------
	map-style-01.css	2023		Initial map styles
	------------------	----------	-----------------------------------------------
*/

/* ── Map container layout ──────────────────────────────────────────────────
   On desktop the container is locked to 100svh so the map fills the screen
   without a scrollbar; the fixed height works because the intro text above
   the map is short and predictable.

   On mobile the intro text (#dform_widget_html_map_intro_bin_problem) can
   vary in length, so we switch to min-height: 100svh.  This lets the
   container grow if needed — the user can scroll down to the footer — while
   still filling the viewport on devices where the text is short.

   The map widget itself is given an explicit height on mobile (via the media
   query below) so it never collapses when its flex parent is taller than the
   viewport.  On desktop it continues to use height: 100% / flex-grow: 1.    */

#dform_page_map_page > div {
    display: flex;
    flex-direction: column;
    height: 100svh !important;
}

    /* this reverses the above rule on any divs that have .header2 */
    #dform_page_map_page > div.header2 {
        height: auto !important;
    }

#dform_widget_html_DgcMapWidget {
    flex: 1 1 auto;   /* grow to fill remaining space in the flex column */
    min-height: 0;    /* allow flex shrink below content size */
    overflow: visible;
    position: relative;
}

#map-view {
    height: 100%;
    width: 100%;
}

/* ── Mobile overrides ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Allow the container to grow beyond 100svh when intro text is long.
       The page becomes scrollable; the footer appears naturally below.     */
    #dform_page_map_page > div {
        height: auto !important;
        min-height: 100svh !important;
    }

    /* Give the map a concrete height on mobile.
       height: 100% would resolve to 0 when the parent grows beyond the
       viewport, so we fall back to a viewport-based value instead.
       Adjust the offset (200px) to match the combined height of the
       header, intro text block, and any other content above the map.       */
    #dform_widget_html_DgcMapWidget {
        height: calc(100svh - 200px) !important;
        flex: none;
    }

    #dform_widget_html_mapInformation p {
        margin: 0;
    }
}

#dform_widget_cs_customer_search_searchbutton {
    background-color: mediumblue;
}

#dform_container div[title='Zoom to'] {
    display: none !important;
}

#dform_container div[title='Dock'] {
    display: none;
}

#dform_container .coordinate-comma {
    padding-right: 2px;
}

.esri-widget {
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.hidden {
    display: none;
}

.container {
    height: 10%;
    width: 95%;
}

#dform_container .esri-search__container,
#dform_container .esri-search__input-container,
#dform_container .esri-search__form {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: center;
}

#dform_container .esri-search__form {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: stretch;
}

#dform_container .esri-search__submit-button {
    flex: 0 0 auto;
}

#dform_container .esri-search__input,
#dform_container .esri-search__submit-button {
    height: 36px !important;
    box-sizing: border-box;
}

.footer {
    margin-top: 1rem;
}

#dform_container .esri-search__container button {
    background-image: none !important;
    background-color: #007A33 !important;
    border: 2px solid #007A33;
    color: #fff;
    padding: 0.1em 0.8em;
}

#dform_container .esri-search__container button {
    width: inherit;
}

#dform_container .esri-search__container button {
    min-width: auto;
    height: auto;
    margin: auto;
    margin-top: inherit;
}

#dform_container .esri-search__submit-button {
    border-radius: 0 4.5rem 4.5rem 0;
}

#dform_container .esri-search__sources-button {
    display: none;
}

    #dform_container .esri-search__sources-button .esri-widget--button {
        border-radius: 0 !important;
        border-bottom-left-radius: 4.5rem;
        border-top-left-radius: 4.5rem;
    }

#dform_container .esri-search__clear-button {
    display: none;
}

/* ======================= */
/*         Popup           */
/* ======================= */
.esri-ui .esri-popup {
    min-width: 300px;
    max-width: 380px;
}

#dform_container div.esri-popup .esri-popup__main-container {
    width: auto !important;
    min-height: 75px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: flex !important;
    flex-direction: column !important;
}

#dform_container div.esri-popup .esri-popup__header {
    order: 1 !important;
}

#dform_container div.esri-popup .esri-popup__content {
    order: 2 !important;
}

/* Hide popup content container ONLY when it is empty */
#dform_container div.esri-popup .esri-popup__content:empty {
    display: none !important;
}

#dform_container div.esri-popup .esri-popup__footer {
    order: 3 !important;
}

    #dform_container div.esri-popup .esri-popup__main-container h2 {
        color: #fff;
    }

    /* Popup Header */

    #dform_container div.esri-popup .esri-popup__main-container header {
        background-color: #5d285f;
    }

        #dform_container div.esri-popup .esri-popup__main-container header div[title='Dock'] {
            visibility: hidden;
        }

        #dform_container div.esri-popup .esri-popup__main-container header div[title='Close'] {
            color: #fff;
        }

            #dform_container div.esri-popup .esri-popup__main-container header div[title='Close']:hover {
                color: #ffffff;
                opacity: 0.8;
            }

#dform_container div.esri-popup .esri-popup__header-container {
    background: none;
    border: none;
    margin: 0;
    padding: 0.5rem 1rem;
    box-shadow: none;
}

    #dform_container div.esri-popup .esri-popup__header-container:focus,
    #dform_container div.esri-popup .esri-popup__header-container:active {
        background: none;
        border: none;
        box-shadow: none;
    }

    #dform_container div.esri-popup .esri-popup__header-container h2 {
        font-size: 1.15rem;
        font-weight: 600;
        text-transform: none;
        color: white;
        text-align: left;
        line-height: 1.3;
    }

#dform_container div.esri-popup .esri-popup__header-container--button:hover {
    background-color: #5d285f;
}

#dform_container div.esri-popup .esri-popup__header-title {
    border: none;
    margin: 0;
    padding: 0;
}

#dform_container div.esri-popup .esri-popup__header {
    background-color: #5d285f;
}

#dform_container .esri-popup__header-buttons .esri-popup__button {
    color: #fff;
}

/* Popup Content */

#dform_container div.esri-popup .popup-content {
    font-size: 1.0em;
    color: #333333;
    padding: 0 16px;
    font-family: "Segoe UI", Arial, sans-serif;
}

    #dform_container div.esri-popup .popup-content b {
        display: inline-block;
        width: 60px;
        margin-right: 4px;
        text-align: right;
    }

#dform_container div.esri-popup .esri-popup__content {
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 12px;
    margin: 0;
    color: #222222;
    align-items: flex-start;
    text-align: left;
}

.esri-component.esri-popup.esri-popup--is-docked.esri-popup--is-docked-bottom-center {
    margin-bottom: 0;
}

.esri-view-width-less-than-medium .esri-popup__action-text {
    display: initial;
}

.esri-popup__inline-actions-container:only-child {
    justify-content: center;
}

span.esri-popup__icon.esri-icon-default-action {
    display: none;
}

#dform_container .esri-popup__button[title="Close"] {
    display: none;
}

#dform_container .esri-popup__footer {
    padding: 10px 12px 14px 12px;
    background-color: #ffffff;
}

#dform_container .esri-popup__inline-actions-container div,
#dform_container .esri-popup__footer .esri-popup__button {
    border-style: none;
    background-color: #007A33;
    border-bottom: 0.1875rem solid #005624;
    border-radius: 0.3125rem;
    font-size: 0.95rem;
    font-weight: 600;
    height: auto;
    padding: 0.5rem 1.2rem;
    color: #ffffff;
    text-decoration: none;
    text-transform: none;
    background-image: none;
    min-width: auto;
    width: auto;
    margin: 0 auto;
    display: inline-block;
}

#dform_container div.esri-popup .esri-popup__action-image {
    display: none;
}

#dform_container .esri-popup__inline-actions-container:only-child {
    justify-content: center;
}

#dform_container span.esri-popup__action-text {
    font-size: 1rem;
    width: 100%;
    text-align: center;
    color: #ffffff;
}

#dform_container .esri-popup__inline-actions-container div:hover,
#dform_container .esri-popup__inline-actions-container div:focus {
    background-color: #005624;
    border-color: #003817;
    color: #fff;
}

#dform_container .esri-popup__inline-actions-container div:focus {
    box-shadow: 0 0 0 3px #FFBF47;
}

/* ====================================== */
/*         Map wait and spinner           */
/* ====================================== */

#map-wait {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(49,20,47,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

#map-wait-message {
    background: white;
    border-radius: 0.5rem;
    padding: 6px 12px;
}

#map-wait-text {
    margin: 6px 0;
}

#map-wait-spinner {
    border: 4px solid #5D285F;
    border-radius: 50%;
    border-top: 2px solid #007A33;
    width: 6px;
    height: 20px;
    margin: auto;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

/* ====================================== */
/*       media queries & keyframes        */
/* ====================================== */

/* ====================================== */
/*          Mobile Responsive Fixes       */
/* ====================================== */

/* Enable clean docked popup styling at the bottom of the map view on mobile */
.esri-popup--is-docked-bottom-center,
.esri-popup--is-docked-top-center,
.esri-popup--is-docked {
    margin: 0 !important;
}

/* Ensure popup content is NEVER hidden on small/mobile screens */
#dform_container div.esri-popup .esri-popup__content,
#dform_container div.esri-popup .esri-popup__content-container,
#dform_container div.esri-popup .popup-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

@media (max-width: 768px) {
    #dform_container .esri-search {
        width: calc(100% - 10px) !important;
        max-width: 100% !important;
    }

    .esri-ui .esri-popup {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #dform_container div.esri-popup .esri-popup__main-container {
        width: 100% !important;
        border-radius: 0;
    }

    #dform_container div.esri-popup .esri-popup__header-container h2 {
        font-size: 1rem;
    }

    #dform_container .esri-popup__footer {
        padding: 6px 10px 10px 10px;
        background-color: #ffffff;
    }
}

@media only screen and (max-height: 550px) {
    #dform_container div[data-type="header"] {
        display: none;
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}