/* Overlay */
.map-popup{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.75);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:9999;

    opacity:0;
    visibility:hidden;
    transition:all 0.35s ease;
}

.map-popup.active{
    opacity:1;
    visibility:visible;
}

/* Popup content */
.map-popup-content{
    position:relative;
    max-width:1000px;
    width:100%;

    transform:translateY(30px) scale(0.95);
    opacity:0;
    transition:all 0.35s ease;
}

.map-popup.active .map-popup-content{
    transform:translateY(0) scale(1);
    opacity:1;
}

/* Image */
.map-popup-content img{
    width:100%;
    max-height:85vh;
    object-fit:contain;
    display:block;
    border-radius:16px;
    background:#fff;
}

/* Close button */
.close-map-popup{
    position:absolute;
    top:-18px;
    right:-18px;

    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#000;
    font-size:22px;
    cursor:pointer;

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

    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    transition:0.3s ease;
}

.close-map-popup:hover{
    transform:rotate(90deg);
}

/* Popup FareHarbor */
#fh-popup { display:none; position:fixed; inset:0; z-index:99999; }
#fh-popup.open { display:block; }
#fh-popup .fh-popup__overlay { position:absolute; inset:0; background:rgba(0,0,0,.7); }
#fh-popup .fh-popup__box {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(920px,95vw); height:min(90vh,820px);
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:0 12px 48px rgba(0,0,0,.35);
}
#fh-popup .fh-popup__close {
    position:absolute; top:8px; right:14px; z-index:3; border:0;
    background:rgba(0,0,0,.06); width:38px; height:38px; border-radius:50%;
    font-size:26px; line-height:1; cursor:pointer;
}
#fh-popup .fh-popup__close:hover { background:rgba(0,0,0,.14); }
#fh-popup .fh-loading {
    position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; background:#fff; z-index:2;
}
#fh-popup .fh-spinner {
    width:44px; height:44px; border-radius:50%;
    border:4px solid #e5e7eb;
    border-top-color: #056ac9;
    animation:fh-spin .75s linear infinite;
}
@keyframes fh-spin {
    to { transform:rotate(360deg); }
}
#fh-popup #fh-iframe { width:100%; height:100%; border:0; }

/* Ẩn popup list item khi đang xem FareHarbor */
#popup.fh-hidden { display:none !important; }

/* Mobile: full màn hình */
@media (max-width: 768px) {
    #fh-popup .fh-popup__box {
        top:0; left:0; transform:none;
        width:100%; height:100%;
        max-width:none; max-height:none;
        border-radius:0;
    }
    #fh-popup .fh-popup__close {
        top:10px; right:10px;
        background:rgba(0,0,0,.12);
        width:42px; height:42px;
    }
}

/* Responsive */
@media(max-width:768px){

    .map-popup{
        padding:16px;
    }

    .map-popup-content img{
        max-height:80vh;
        border-radius:12px;
    }

    .close-map-popup{
        width:36px;
        height:36px;
        font-size:18px;
        top:-12px;
        right:-12px;
    }

    .btn-map{
        width:100%;
        max-width:260px;
    }
}