/* Compact place heading; independent of the travel plugin's card styles. */

.mskt-place-header .mb-place-heading-row {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 4px 20px;

}

.mskt-place-header .mb-place-heading-row h1 {

    flex: 0 1 auto;

    min-width: 0;

    max-width: 100%;

    margin: 0;

    overflow-wrap: anywhere;

}

.mskt-place-header .mskt-place-location.mb-place-heading-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    min-width: 0;

    max-width: 100%;

    margin: 0;

    gap: 6px 10px;

    color: var(--msk-muted, #707589);

    font: 400 15px/1.5 var(--msk-sans, system-ui, sans-serif);

}

.mskt-place-header .mb-place-country {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

    overflow-wrap: anywhere;

}

.mskt-place-header .mb-place-country .mskt-flag {

    flex: 0 0 44px;

    width: 44px;

    height: 44px;

    max-width: none;

    margin: 0;

}

.mskt-place-header .mb-place-heading-meta .mskt-place-tip { align-self: center; }

.mskt-place-header .mb-place-back { margin: 12px 0 0; }

.mskt-place-header .mb-place-map-trigger,

.mb-place-map-dialog .mb-place-map-close {

    display: inline-flex;

    flex: 0 0 44px;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    min-height: 44px;

    margin: 0;

    padding: 0;

    border: 1px solid transparent;

    border-radius: 50%;

    color: var(--msk-magenta, #d00065);

    background: #fbedf4;

    text-decoration: none;

    cursor: pointer;

}

.mskt-place-header .mb-place-map-trigger:hover,

.mb-place-map-dialog .mb-place-map-close:hover { background: #f7dbe9; }

.mskt-place-header .mb-place-map-trigger:focus-visible,

.mb-place-map-dialog :focus-visible {

    outline: 2px solid var(--msk-magenta, #d00065);

    outline-offset: 3px;

}

html.mb-place-map-open,

html.mb-place-map-open body { overflow: hidden; }

dialog.mb-place-map-dialog:not([open]) { display: none; }

dialog.mb-place-map-dialog {

    box-sizing: border-box;

    width: min(960px, calc(100% - 40px));

    max-width: none;

    max-height: calc(100vh - 40px);

    max-height: calc(100dvh - 40px);

    margin: auto;

    padding: 0;

    border: 0;

    border-radius: 14px;

    overflow: auto;

    color: var(--msk-ink, #17172e);

    background: #fff;

    box-shadow: 0 24px 90px #09091855;

    font-family: var(--msk-sans, system-ui, sans-serif);

}

dialog.mb-place-map-dialog::backdrop { background: #0c0c1cc4; }

.mb-place-map-dialog[open] { display: flex; flex-direction: column; }

.mb-place-map-dialog .mb-place-map-top {

    display: flex;

    flex: 0 0 auto;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    padding: 22px 24px 18px;

}

.mb-place-map-dialog .mb-place-map-heading { min-width: 0; }

.mb-place-map-dialog .mb-place-map-heading h2 {

    margin: 0;

    font: 700 clamp(23px, 3vw, 30px)/1.2 var(--msk-sans, system-ui, sans-serif);

    letter-spacing: -.03em;

    overflow-wrap: anywhere;

}

.mb-place-map-dialog .mb-place-map-heading p {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 8px 0 0;

    color: var(--msk-muted, #707589);

    font: 400 14px/1.5 var(--msk-sans, system-ui, sans-serif);

    overflow-wrap: anywhere;

}

.mb-place-map-dialog .mskt-flag {

    flex: 0 0 22px;

    width: 22px;

    height: 22px;

    margin: 0;

    border-radius: 50%;

    object-fit: cover;

}

.mb-place-map-dialog .mb-place-map-body {

    position: relative;

    flex: 0 0 auto;

    height: min(56vh, 520px);

    height: min(56dvh, 520px);

    min-height: 180px;

    background: #f2f2f5;

}

.mb-place-map-dialog .mb-place-map-canvas { width: 100%; height: 100%; }

.mb-place-map-dialog .mb-place-map-status {

    position: absolute;

    z-index: 800;

    bottom: 30px;

    left: 12px;

    right: 12px;

    width: fit-content;

    max-width: calc(100% - 24px);

    margin: 0;

    padding: 10px 14px;

    border-radius: 6px;

    background: #fff;

    box-shadow: 0 2px 12px #17172e1f;

    color: var(--msk-ink, #17172e);

    font: 400 13px/1.5 var(--msk-sans, system-ui, sans-serif);

    pointer-events: none;

}

.mb-place-map-dialog .mb-place-map-status[hidden] { display: none; }

.mb-place-map-dialog .mb-place-map-footer {

    flex: 0 0 auto;

    padding: 12px 24px;

    border-top: 1px solid var(--msk-line, #dadbe4);

}

.mb-place-map-dialog .mb-place-map-footer a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 44px;

    color: var(--msk-magenta, #d00065);

    font: 600 14px/1.4 var(--msk-sans, system-ui, sans-serif);

}

.mb-place-map-dialog .mb-place-map-footer svg { width: 17px; height: 17px; }

.mb-place-map-dialog .mb-place-map-pin {

    border: 0;

    background: transparent;

    color: var(--msk-magenta, #d00065);

    filter: drop-shadow(0 2px 3px #17172e44);

}

.mb-place-map-dialog .mb-place-map-pin svg { display: block; width: 32px; height: 42px; }

.mb-place-map-dialog .leaflet-control-zoom { border: 1px solid var(--msk-line, #dadbe4); box-shadow: 0 2px 10px #17172e1a; }

.mb-place-map-dialog .leaflet-control-zoom a {

    width: 44px;

    height: 44px;

    line-height: 44px;

    color: var(--msk-ink, #17172e);

    background: #fff;

    font-size: 23px;

    text-decoration: none;

}

.mb-place-map-dialog .leaflet-control-attribution {

    color: #50505a;

    background: #fffffff2;

    font: 400 11px/1.5 var(--msk-sans, system-ui, sans-serif);

}

.mb-place-map-dialog .leaflet-control-attribution a { color: #50505a; text-decoration: underline; }

@media (max-width: 600px) {

    .mskt-place-header .mb-place-heading-row { column-gap: 14px; }

    .mskt-place-header .mskt-place-location.mb-place-heading-meta { font-size: 14px; gap: 6px 8px; }

    dialog.mb-place-map-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 11px; }

    .mb-place-map-dialog .mb-place-map-top { padding: 16px; gap: 10px; }

    .mb-place-map-dialog .mb-place-map-footer { padding: 8px 16px; }

}