.d360-map-card,
.d360-map-card *{
    box-sizing:border-box;
}

.d360-map-card{
    --d360-map-height:520px;
    --d360-map-accent:#16A9E0;
    --d360-overlay-align:flex-start;

    position:relative;
    width:100%;
    max-width:100%;
    min-width:0;
    height:var(--d360-map-height);
    min-height:260px;
    overflow:hidden;
    isolation:isolate;
    border-radius:28px;
    background:#dfe6ea;
    container-type:inline-size;
    container-name:d360MapCard;
}

.d360-map-frame{
    position:absolute;
    inset:0;
    min-width:0;
}

.d360-map-frame iframe{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    border:0;
    transform:scale(1.002);
    transform-origin:center;
}

.d360-map-filter-grayscale .d360-map-frame iframe{
    filter:grayscale(1) contrast(.96);
}

.d360-map-filter-soft-dark .d360-map-frame iframe{
    filter:grayscale(.6) brightness(.78) contrast(1.12) saturate(.7);
}

.d360-map-filter-soft-blue .d360-map-frame iframe{
    filter:saturate(.72) contrast(.96) hue-rotate(155deg);
}

.d360-map-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(5,14,20,.02),rgba(5,14,20,.12)),
        linear-gradient(90deg,rgba(6,18,27,.10),transparent 38%);
}

.d360-map-overlay{
    position:absolute;
    z-index:3;
    left:24px;
    right:auto;
    bottom:24px;
    width:430px;
    max-width:calc(100% - 48px);
    min-width:0;
    padding:20px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    border-radius:22px;
    transition:transform .25s ease,box-shadow .25s ease;
}

.d360-map-card{
    display:flex;
    justify-content:var(--d360-overlay-align);
}

.d360-map-card .d360-map-overlay{
    left:auto;
    right:auto;
}

.d360-map-overlay--glass{
    border:1px solid rgba(255,255,255,.48);
    background:rgba(255,255,255,.82);
    box-shadow:0 18px 48px rgba(8,25,36,.18);
    backdrop-filter:blur(18px) saturate(1.15);
    -webkit-backdrop-filter:blur(18px) saturate(1.15);
}

.d360-map-overlay--light{
    border:1px solid rgba(8,25,36,.08);
    background:#fff;
    box-shadow:0 18px 48px rgba(8,25,36,.16);
}

.d360-map-overlay--dark{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(7,17,25,.93);
    box-shadow:0 18px 50px rgba(0,0,0,.24);
    color:#fff;
}

.d360-map-pin{
    position:relative;
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:color-mix(in srgb,var(--d360-map-accent) 13%,white);
    border:1px solid color-mix(in srgb,var(--d360-map-accent) 20%,transparent);
}

.d360-map-pin::before{
    content:"";
    width:20px;
    height:25px;
    border:2px solid var(--d360-map-accent);
    border-radius:50% 50% 55% 55%;
    clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);
}

.d360-map-pin span{
    position:absolute;
    top:17px;
    left:21px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--d360-map-accent);
}

.d360-map-copy{
    min-width:0;
}

.d360-map-copy strong{
    display:block;
    margin:0;
    color:#101820;
    font-size:16px;
    line-height:1.22;
    font-weight:800;
    letter-spacing:-.2px;
    word-break:normal;
    overflow-wrap:normal;
    hyphens:none;
}

.d360-map-copy span{
    display:block;
    margin-top:5px;
    color:#68747c;
    font-size:12px;
    line-height:1.45;
}

.d360-map-overlay--dark .d360-map-copy strong{
    color:#fff;
}

.d360-map-overlay--dark .d360-map-copy span{
    color:#aab4bb;
}

.d360-map-button{
    min-height:44px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;
    background:#0B1720;
    color:#fff;
    text-decoration:none!important;
    font-size:11px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    transition:transform .2s ease,opacity .2s ease;
}

.d360-map-button:hover{
    transform:translateY(-2px);
    opacity:.92;
}

.d360-map-button span{
    margin:0;
    color:inherit;
    font-size:14px;
}

@container d360MapCard (max-width:760px){
    .d360-map-overlay{
        bottom:16px;
        max-width:calc(100% - 32px);
        grid-template-columns:auto minmax(0,1fr);
        gap:12px;
        border-radius:19px;
    }

    .d360-map-button{
        grid-column:1 / -1;
        width:100%;
    }
}

@container d360MapCard (max-width:430px){
    .d360-map-overlay{
        bottom:12px;
        max-width:calc(100% - 24px);
        padding:15px;
        border-radius:17px;
    }

    .d360-map-pin{
        width:44px;
        height:44px;
        flex-basis:44px;
        border-radius:14px;
    }

    .d360-map-pin span{
        top:14px;
        left:18px;
    }

    .d360-map-copy strong{
        font-size:15px;
    }

    .d360-map-copy span{
        font-size:11px;
    }

    .d360-map-button{
        min-height:42px;
    }
}