/*==================================================
    MAP PANEL
==================================================*/

.map-panel{

    position:fixed;

    top:80px;
    right:-420px;

    width:390px;
    height:calc(100vh - 80px);

    display:flex;
    flex-direction:column;

    background:#ffffff;

    border-radius:18px 0 0 18px;

    box-shadow:
        0 12px 40px rgba(0,0,0,.18);

    overflow:hidden;

    transition:right .25s ease;

    z-index:9999;
}

.map-panel.show{

    right:0;
}


/*==================================================
    HEADER
==================================================*/

.map-panel__header{

    position:relative;

    background:#1f4678;

    color:#fff;

    padding:22px 22px 18px;

    flex-shrink:0;
}

.map-panel__title{

    margin:0;

    font-size:18px;

    font-weight:700;

    line-height:1.35;
}

.map-panel__category{

    margin-top:8px;

    display:inline-flex;

    align-items:center;

    padding:4px 10px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    font-size:12px;

    font-weight:600;

    letter-spacing:.3px;
}


/*==================================================
    CLOSE BUTTON
==================================================*/

.map-panel__close{

    position:absolute;

    top:14px;
    right:14px;

    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#d9e6ff;

    cursor:pointer;

    transition:.2s;
}

.map-panel__close:hover{

    background:rgba(255,255,255,.12);

    color:#ffffff;
}

.map-panel__close i{

    font-size:18px;
}


/*==================================================
    IMAGE
==================================================*/

.map-panel__gallery{

    width:100%;

    height:230px;

    flex-shrink:0;

    background:#f2f4f7;
}

.map-panel__gallery img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}


/*==================================================
    CONTENT
==================================================*/

.map-panel__content{

    flex:1;

    overflow-y:auto;

    padding:18px 22px;
}


/*==================================================
    FIELD
==================================================*/

.map-panel__field{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:14px 0;

    border-bottom:1px solid #edf1f5;
}

.map-panel__field:last-child{

    border-bottom:none;
}

.map-panel__field-icon{

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#f8fafc;

    color:#1f4678;

    flex-shrink:0;
}

.map-panel__field-icon i{

    font-size:16px;
}

.map-panel__field-body{

    flex:1;

    min-width:0;
}

.map-panel__field-label{

    margin-bottom:4px;

    font-size:11px;

    color:#8a94a6;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.4px;
}

.map-panel__field-value{

    font-size:15px;

    color:#263238;

    line-height:1.55;

    word-break:break-word;
}


/*==================================================
    FOOTER
==================================================*/

.map-panel__footer{

    flex-shrink:0;

    display:flex;

    gap:12px;

    padding:16px;

    background:#ffffff;

    border-top:1px solid #edf1f5;
}

.map-panel__btn{

    flex:1;

    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    border-radius:14px;

    border:1px solid #d8dee8;

    background:#ffffff;

    color:#1f2937;

    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.map-panel__btn:hover{

    background:#f7f9fb;
}

.map-panel__btn--primary{

    background:#1f4678;

    color:#ffffff;

    border-color:#1f4678;
}

.map-panel__btn--primary:hover{

    background:#173760;
}


/*==================================================
    SCROLLBAR
==================================================*/

.map-panel__content::-webkit-scrollbar{

    width:6px;
}

.map-panel__content::-webkit-scrollbar-thumb{

    background:#c9d2dc;

    border-radius:10px;
}