.lxms-map {
    position: relative;
    width: var(--lxms-w, 100%);
    max-width: 100%;
    height: var(--lxms-h, 520px);
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--lxms-radius, 10px);
    background: #eef1f2;
}
.lxms-map .maplibregl-canvas { opacity: var(--lxms-opacity, 1); }
.lxms-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
    font: 500 14px/1.4 system-ui, sans-serif;
    color: #66747c;
    background: #eef1f2;
}
.lxms-marker {
    --lxms-marker-size: 46px;
    --lxms-marker-color: #caae5d;
    --lxms-marker-hover-color: var(--lxms-marker-color);
    width: var(--lxms-marker-size);
    height: var(--lxms-marker-size);
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--lxms-marker-color) !important;
    box-shadow: none !important;
    outline-offset: 3px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    filter: drop-shadow(0 5px 7px rgba(7, 28, 44, .22));
    transition: color .18s ease, filter .18s ease;
}
.lxms-map .lxms-marker:hover,
.lxms-map .lxms-marker:focus,
.lxms-map .lxms-marker:active {
    background: transparent !important;
    color: var(--lxms-marker-hover-color) !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.lxms-map .lxms-marker:focus-visible {
    outline: 2px solid var(--lxms-marker-hover-color) !important;
}
.lxms-marker svg,
.lxms-marker img { width: 100%; height: 100%; display: block; object-fit: contain; }
.lxms-marker-pin { height: calc(var(--lxms-marker-size) * 1.2083); }
.lxms-marker-circle {
    width: var(--lxms-marker-size);
    height: var(--lxms-marker-size);
    border-radius: 50%;
    background: var(--lxms-marker-color) !important;
    border: 4px solid #fff !important;
    box-shadow: 0 5px 14px rgba(7, 28, 44, .24);
}
.lxms-marker-diamond {
    width: calc(var(--lxms-marker-size) * .72);
    height: calc(var(--lxms-marker-size) * .72);
    background: var(--lxms-marker-color) !important;
    border: 3px solid #fff !important;
    transform: rotate(45deg);
    box-shadow: 0 5px 14px rgba(7, 28, 44, .24);
}
.lxms-map .lxms-marker-circle:hover,
.lxms-map .lxms-marker-circle:focus,
.lxms-map .lxms-marker-circle:active,
.lxms-map .lxms-marker-diamond:hover,
.lxms-map .lxms-marker-diamond:focus,
.lxms-map .lxms-marker-diamond:active {
    background: var(--lxms-marker-hover-color) !important;
}
.lxms-marker-custom { height: var(--lxms-marker-size); }
.lxms-popup { min-width: 190px; max-width: 280px; color: #18242b; }
.lxms-popup-title { display:block; margin:0 0 6px; font:600 16px/1.25 Manrope, system-ui, sans-serif; }
.lxms-popup-text { white-space: pre-line; margin-bottom: 10px; font:400 14px/1.45 Inter, system-ui, sans-serif; color:#66747c; }
.lxms-popup-button { display:inline-flex; text-decoration:none; font:600 13px/1.2 Inter, system-ui, sans-serif; color:#071c2c; border-bottom:1px solid #caae5d; padding-bottom:2px; }
.lxms-popup-button:hover { color:#0d2b3e; }
.lxms-map .maplibregl-popup-content { border-radius:8px; padding:16px 18px; box-shadow:0 12px 35px rgba(7,28,44,.18); }
.lxms-map .maplibregl-ctrl-group { border-radius:6px; overflow:hidden; }
.lxms-error { padding:12px; border:1px solid #d63638; color:#8a2424; background:#fff5f5; }
@media (max-width: 1024px) {
    .lxms-map { width: var(--lxms-w-tablet, 100%); height: var(--lxms-h-tablet, 440px); }
}
@media (max-width: 767px) {
    .lxms-map { width: var(--lxms-w-mobile, 100%); height: var(--lxms-h-mobile, 380px); }
}

/* 0.1.2: selector Vector / Satellite / Hybrid */
.lxms-mode-switcher {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: inline-flex;
    overflow: hidden;
    border: 1px solid rgba(7, 28, 44, .18);
    border-radius: 7px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 14px rgba(7, 28, 44, .12);
    backdrop-filter: blur(5px);
}
.lxms-mode-switcher button {
    appearance: none;
    border: 0;
    border-right: 1px solid rgba(7, 28, 44, .12);
    background: transparent;
    color: #31566d;
    padding: 8px 11px;
    font: 600 12px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
}
.lxms-mode-switcher button:last-child { border-right: 0; }
.lxms-mode-switcher button:hover:not(:disabled) { background: #f4f1e8; }
.lxms-mode-switcher button.is-active {
    background: #071c2c;
    color: #fff;
}
.lxms-mode-switcher button:disabled {
    opacity: .42;
    cursor: not-allowed;
}
@media (max-width: 480px) {
    .lxms-mode-switcher { top: 9px; left: 9px; }
    .lxms-mode-switcher button { padding: 8px 9px; font-size: 11px; }
}


/* 0.1.3: selector 2D / 3D */
.lxms-3d-switcher {
    position: absolute;
    top: 12px;
    right: 54px;
    z-index: 5;
    display: inline-flex;
    overflow: hidden;
    border: 1px solid rgba(7, 28, 44, .18);
    border-radius: 7px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 14px rgba(7, 28, 44, .12);
    backdrop-filter: blur(5px);
}
.lxms-3d-switcher button {
    appearance: none;
    border: 0;
    border-right: 1px solid rgba(7, 28, 44, .12);
    background: transparent;
    color: #31566d;
    padding: 8px 10px;
    font: 600 12px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
}
.lxms-3d-switcher button:last-child { border-right: 0; }
.lxms-3d-switcher button:hover:not(:disabled) { background: #f4f1e8; }
.lxms-3d-switcher button.is-active { background: #071c2c; color: #fff; }
.lxms-3d-switcher button:disabled { opacity: .42; cursor: not-allowed; }
@media (max-width: 480px) {
    .lxms-3d-switcher { top: 50px; right: 9px; }
    .lxms-3d-switcher button { padding: 8px 9px; font-size: 11px; }
}

/* 0.1.4: etichetă permanentă lângă marker */
.lxms-marker-label {
    --lxms-marker-label-size: 13px;
    --lxms-marker-label-color: #18242b;
    --lxms-marker-label-bg: #fff;
    pointer-events: none;
    white-space: nowrap;
    padding: 6px 9px;
    border-radius: 6px;
    color: var(--lxms-marker-label-color);
    background: color-mix(in srgb, var(--lxms-marker-label-bg) 94%, transparent);
    border: 1px solid rgba(7, 28, 44, .10);
    box-shadow: 0 4px 14px rgba(7, 28, 44, .14);
    font: 600 var(--lxms-marker-label-size)/1.15 Manrope, system-ui, sans-serif;
    backdrop-filter: blur(4px);
}
