/*
 __  __          _____  
|  \/  |   /\   |  __ \ 
| \  / |  /  \  | |__) |
| |\/| | / /\ \ |  ___/ 
| |  | |/ ____ \| |     
|_|  |_/_/    \_\_|

*/






#map, #pano { height: 100%; width: 100%; background-color: #F8F8FC; outline: none; }
#map { z-index: 4; }
#map, #map:active, #map:focus, #map:focus-within, #map:visited, #map:focus-visible
/*#map *, #map *:active, #map *:focus, #map *:focus-within, #map *:visited, #map *:focus-visible*/ {
  border: 0 !important;
  outline: none !important;
  box-shadow: var(--box-shadow-none);
}

/*@keyframes ripple-pulse {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; }
    to   { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}*/

@keyframes ripple-pulse {

    0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.25; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

@keyframes ripple-click {
    from { width: 0; height: 0; opacity: 0.6; }
    to   { width: 200px; height: 200px; opacity: 0; }
}

& .ripple-container {
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        border-radius: var(--border-radius);
        background: var(--brand);
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0; 
        pointer-events: none;
        animation: ripple-pulse 3000ms ease-out infinite;
    }

    &::after { animation-delay: 3000ms; }

    & .ripple-icon {

        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: var(--border-radius);
        background: var(--brand);
        transform: translate(-50%, -50%);
        pointer-events: none;
        animation: ripple-click 1500ms ease-out forwards;

    }
}


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

body {

    & #map {

        & .full-screen-loader {
            position: relative;
            
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--brand-light); /* Semi-transparent background */
            z-index: 6;
        }

        & .circle {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50% !important;
            background-color: #FFF; /* Circle background */
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Optional shadow */

            /* Spinning Notch */
            &::after {
                content: '';
                position: absolute;
                top: -10px;
                left: -10px;
                width: 120px;
                height: 120px;
                border: 5px solid transparent;
                border-top: 5px solid var(--brand); /* Spinning color */
                border-radius: 50%;
                animation: spin 500ms linear infinite;
            }

            & .number {
                font-size: 2rem;
                font-weight: bold;
                color: var(--brand); /* Number color */
                z-index: 1;
            }
        }

        & #map-type-select {
          /*width: auto; 
          padding: 0px 15px;
          font-weight: bold;
          display: flex; 
          justify-content: flex-start;*/

            & i {
                /*font-family: var(--font-family);*/
            }
            &.show.is-checked:hover {
                color: var(--white) !important;
            }
            &.show.is-checked:hover i {
                color: var(--white) !important;
            }
            & #map-type-select-dropdown {
                width: 160px; 
                min-width: 160px; 
                max-width: 160px; 
                padding: 0px;
                border: 1px solid var(--box-border);
                box-shadow: var(--box-shadowz);
            }
        }

        .mapboxgl-popup {
            max-width: unset !important;
        }

        & .card {
            min-width: 300px;
        }

        & .avatar-marker {

            width: var(--input-size);
            height: var(--input-size);
            border-radius: var(--border-radius);
            border: 3px solid var(--brand);
            background-size: cover;
            background-position: center;
            z-index: 1;
            cursor: pointer;
            transition: opacity 0.3s ease;
            pointer-events: auto;

            &:hover { transform: translateY(1px); }
            &:active { transform: translateY(3px); }
        }

        & .avatar-marker.hidden,
        & .ripple-container.hidden {
            opacity: 0 !important;
            pointer-events: none;
        }

        /* RIPPLE EFFECT -
           https://time2hack.com/css-tutorial-ripples-loading-animation-like-in-tinder
           */

        /*& .ripple-container {
            width: 200px;
            height: 200px;
            position: relative;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            &::before,
            &::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                border-radius: var(--border-radius);
                background: var(--brand);

                transform: translate(-50%, -50%) scale(0.8);
                opacity: 0; 
                pointer-events: none;
                animation: ripple-pulse 3000ms ease-out infinite;
            }
            &::after { animation-delay: 1500ms; }

            & .ripple-icon {

                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                border-radius: var(--border-radius);
                background: var(--brand);
                transform: translate(-50%, -50%);
                pointer-events: none;
                animation: ripple-click 1500ms ease-out forwards;

            }
        }*/
    }
}



                
                

                
#mapbox {
    width: 100%;
    height: 100%;
    overflow: unset;

    width: 100%;    /* Full width of the parent element */
    height: 100%;   /* Adjust the height as necessary */
    position: relative;

}

#mapbox,
#mapbox div:not(.avatar-marker),
.mapboxgl-map,
#mapbox .canvas {
  outline: none !important;
  border: none !important;
}

/*.mapboxgl-ctrl-top-left,*/
.mapboxgl-ctrl-top-right,
.mapboxgl-ctrl-bottom-left, 
.mapboxgl-ctrl-bottom-right {
  display: none;
}

.map-overlay {
  font: 12px/20px;
  font-family: var(--font-family);
  position: absolute;
  width: 200px;
  top: 0;
  left: 0;
  padding: 10px;
}

#mapbox canvas {
  /* THIS STRETCHES THE CANVAS. NEED TO FIND ANOTHER WAY */
  /*width: 100% !important;
  height: 100% !important;*/
}

.mapboxgl-popup-close-button {
  background-color: transparent;
  border: 0;
  border-radius: 0 3px 0 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  min-width: 15px;
  height: 15px;
  color: var(--brand);
}

#mapbox {
  position: relative;
  z-index: 0;
}

#mapbox > .map-wrapper {
  position: relative;
  z-index: 5;
}

#mapbox:before {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 10;
  pointer-events: none;

  -webkit-box-shadow: var(--box-shadow-inset-dark);
  -moz-box-shadow: var(--box-shadow-inset-dark);
  box-shadow: var(--box-shadow-inset-dark);
}

#cluster-count { border-radius: 50% !important; }



#compass {

    color: var(--brand);
    position: absolute;
    top: 30px;
    left: 30px;
    transition: var(--transition);
    cursor: pointer;
    z-index: 2;
    background-color: var(--white);
    border-radius: 50%;

    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);

}

#mapbox:hover + #compass,
#compass:hover {

  /*-ms-transform: translateY(-0px);
      transform: translateY(-0px) rotate(-45deg);
  opacity: 1;*/

}


#pitch {
    /* Basic reset of appearance */
    width: 0px;
    height: 175px;
    /* padding: 0 5px; */
    /* -webkit-appearance: none; */
    /* appearance: none; */
    /* height: 1px; */
    transform: rotate(180deg);
    /* transform-origin: bottom left; */
    /* background: red; */
    /* outline: none; */
    /* z-index: 99; */
    position: absolute;
    top: 200px;
    left: 30px;
    writing-mode: vertical-lr;
    direction: rtl;

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 10px;  /* Width of the thumb */
        height: 10px; /* Height of the thumb */
        background: var(--brand); /* Color of the thumb */
        cursor: pointer;
    }

    &::-moz-range-thumb {
        width: 10px;
        height: 10px;
        background: var(--brand);
        cursor: pointer;
    }
}

    




& .map-overlay {

    font:
      12px/20px 'Helvetica Neue',
      Arial,
      Helvetica,
      sans-serif;
    position: absolute;
    width: 200px;
    top: 0;
    left: 0;
    padding: 10px;

    & .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;

        & fieldset {
            display: flex;
            justify-content: space-between;
            border: none;
        }

        & label {
            font-weight: bold;
            margin-right: 10px;
        }

        & .select-fieldset {
            
            display: block;

            & label {
                display: block;
                margin-bottom: 5px;
            }

            & select {
              width: 100%;
            }
        }
    }
}



    







& .mapboxgl-popup {

    padding: 0;
    margin: 0;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--box-shadow) !important;

    & .mapboxgl-popup-content {
        padding: 0 !important;
        margin: 0;

        border-radius: var(--border-radius) !important;
        box-shadow: none !important;

        &:has(.card) {
            padding: 0;
        }

    }

}







                

                



        


.isotope-gridz .card {
    margin: 15px 0px;
}

/* USER'S WORK ADDRESS */

#users-work-address {
    position: relative;

    & .pac-container {
        /*top: 0px !important;
        position: inherit;*/
    }

}

/* GOOGLE POINTS OF INTEREST (POI'S) */

#toggle-poi-panel {
    max-width: var(--input-size);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}
.poi-panel {
    width: auto;
    min-width: 601px;
    height: auto;
    padding: 15px 0px 15px 15px;
    margin: 0;
    background-color: var(--white);
    border-radius: var(--border-radius);
    border: 1px solid var(--box-border);
    box-shadow: var(--box-shadowz);
    position: absolute;
    top: 73px;
    right: 0px !important;
}
#poi-btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: unset;
}
#poi-btn-group li {
    margin-bottom: 15px;
}
#poi-btn-group button {
    background-color: var(--box-border);
    border-radius: var(--border-radius) !important;
}
#poi-btn-group button:hover {
    color: var(--brand) !important;
    background-color: var(--box-border); !important;
}
#poi-btn-group button.poi_active:hover,
#poi-btn-group button.poi_active {
    color: var(--white) !important;
    background-color: var(--brand) !important;
}
#poi-btn-group button i {
    color: var(--brand);
    font-size: 20px;
}
#poi-btn-group button.poi_active i {
    color: var(--white);
}

 /* ZOOM CONTROLS */

#zoomOutput {
    position: absolute;
    bottom: 105px;
    left: 15px;
    color: var(--header-text) !important;
    background-color: #FFF !important;
    display: none;
}

/* CSS FOR PROPERTY CARDS WHEN IN MAP SIDE VIEW */

.mapboxgl-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* USER'S AVATAR  */