/* =========================================================
   MAP WIDGET
   ========================================================= */

.map_widget_wrapper {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.markers_container {
    flex: 0 0 230px;
    width: 100%;
    max-width: 230px;
    max-height: 600px;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: #394662 #F0F0F0;
    scrollbar-gutter: both-edges;
}

.map_container {
    flex: 1 1 400px;
    width: -webkit-fill-available;
    min-height: 400px;
    overflow: hidden;
    border-radius: 8px;
}

.map_widget_map {
    width: 100%;
    min-height: 400px;
    border-radius: 8px;
}


/* =========================================================
   GROUPS
   ========================================================= */

.marker_group {
    margin-bottom: 12px;
    border: 1px solid #DFE0E1;
    border-radius: 10px;
    overflow: hidden;
}

.marker_group h3 {
    margin: 0;
    padding: 5px 10px;

    font-size: 16px;

    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 10px;

    transition:
        background .4s ease,
        border-radius .4s ease;
}

.marker_group h3:hover {
    background: #F1F6FF;
    border-radius: 6px;
}

.marker_group.active {
    width: 100%;
}

.marker_group.active h3 {
    border-bottom: 1px solid #DFE0E1;
}


/* =========================================================
   ADDRESS LIST
   ========================================================= */

.addresses {
    display: none;

    list-style: none;
    padding: 0;
    margin: 0;

    flex-direction: column;
    gap: 6px;
}

.marker_group.active .addresses {
    display: flex;
}


/* =========================================================
   ADDRESS ITEM
   ========================================================= */

.adress-item {
    padding: 2px 5px;

    border-bottom: 1px solid #DFE0E1;

    border-radius: 8px;

    cursor: pointer;

    transition:
        background .2s ease,
        box-shadow .3s ease,
        transform .2s ease;
}

.adress-item:hover {
    background: #F1F6FF;

    box-shadow:
        -1px 1px 7px darkgrey;
}

.adress-item h4 {
    margin: 0 0 4px;

    font-size: 14px;
}

.adress-item p {
    margin: 0 0 5px;

    font-size: 13px;

    color: #64748b;
}


/* =========================================================
   ACTIVE ADDRESS
   ========================================================= */

.adress-item.active {
    background: #F1F6FF;

    box-shadow:
        -1px 1px 7px darkgrey;
}

.adress-item.active h4 {
    font-weight: 700;
}


/* =========================================================
   MARKER INFO
   ========================================================= */

.marker-info {
    margin-top: 8px;
}


/* =========================================================
   GOOGLE ADVANCED MARKER
   ========================================================= */

/*
 * Сам PinElement залишається стандартним Google Pin.
 *
 * Тут нічого не змінюємо в нормальному стані,
 * щоб маркери виглядали стандартно.
 */

.map-marker-pin {
    transition:
        filter .2s ease,
        transform .2s ease;
}


/*
 * Активний маркер.
 *
 * Саме тут з'являється тінь.
 */

.map-marker-pin.map-marker-active {
    filter:
        drop-shadow(0 0 4px rgba(60, 78, 115, .9))
        drop-shadow(0 3px 6px rgba(0, 0, 0, .45));

    transform: scale(1.12);
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

.back_btn {
    display: none;

    background: #3C4E73;
    color: #F8D5B4;

    border: 1px solid #3C4E73;

    padding: 10px 20px;

    font-size: 0;
    line-height: 0;

    border-radius: 6px;

    cursor: pointer;
}

.marker_group.active .back_btn {
    display: inline-block;
}

.back_btn svg {
    fill: #F8D5B4;
}

.back_btn:hover {
    background: #F8D5B4;
    border-color: #F8D5B4;
}

.back_btn:hover svg {
    fill: #3C4E73;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .map_widget_wrapper {
        flex-direction: column;
        margin-top: 20px;
    }

    .markers_container {
        flex: none;

        width: calc(100% - 10px);
        max-width: calc(100% - 10px) !important;

        max-height: 400px;

        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .marker_group {
        min-width: 35%;

        margin: 0 2px;

        background: #3c4e731c;

        border-radius: 5px;

        display: flex;
        align-items: center;

        text-align: center;
    }

    .marker_group.active {
        width: 100%;

        flex-direction: column;

        align-items: stretch;

        background: unset;

        text-align: start;
    }

    .addresses {
        flex-direction: row;
    }

    .marker_group.active .addresses {
        flex-direction: row;
    }

    .adress-item {
        min-width: 170px;

        padding:
            0
            5px
            0
            10px;

        line-height: 20px;

        box-shadow:
            0 -1px 2px #DFE0E1;
    }

    .adress-item.active {
        box-shadow:
            0 0 7px rgba(60, 78, 115, .45);
    }

    .adress-item p {
        margin-bottom: 5px;
    }

    .map_container {
        width: 100%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .map_widget_wrapper {
        flex-direction: column;
    }

    .markers_container {
        width: 100%;
        max-width: 100% !important;
    }

    .map_container {
        flex: none;
        width: 100%;
    }

    .map_widget_map {
        width: 100% !important;
    }
}