/* ===== LiveMate Dashboard Update ===== */

.map-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    padding-top: 13px;
}

.map-actions .btn {
    font-size: 11px;
    padding: 10px 13px;
}

/* Map markers */

.lm-marker-container {
    background: transparent;
    border: 0;
}

.lm-marker {
    position: relative;
    width: 120px;
    height: 64px;
    overflow: visible;
    pointer-events: none;
}

.lm-marker-pin {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50% 50% 50% 7px;
    transform: rotate(-45deg);
    background: var(--marker-color);
    border: 2px solid #fff;
    box-shadow: 0 5px 16px #0005;
    display: grid;
    place-items: center;
}

.lm-marker-pin span {
    transform: rotate(45deg);
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 2px #0004;
}

.lm-marker-label {
    position: absolute;
    left: 42px;
    top: 3px;
    max-width: 76px;
    padding: 5px 7px;
    background: #f8fbff;
    color: #132e43;
    border: 1px solid #d8e6ee;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 3px 12px #0002;
}

/* Marker popup */

.lm-popup {
    min-width: 155px;
    line-height: 1.65;
}

.lm-popup strong,
.lm-popup small {
    display: block;
}

.lm-popup strong {
    font-size: 12px;
}

.lm-popup small {
    font-size: 10px;
    color: #60798b;
}

.lm-popup-directions {
    display: inline-block;
    margin-top: 6px;
    font-weight: 800;
    font-size: 11px;
}

/* Friend cards */

.lm-empty {
    padding: 10px 0;
    color: var(--muted);
    font-size: 12px;
}

.lm-empty p {
    margin: 0 0 7px;
}

.lm-friend-card {
    border-bottom: 1px solid #ffffff12;
    padding: 10px 0;
}

.lm-friend-card:last-child {
    border-bottom: 0;
}

.lm-friend-main {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
    text-align: left;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.lm-friend-main:disabled {
    cursor: default;
    opacity: .82;
}

.lm-avatar {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(
        135deg,
        var(--friend-color),
        #8be5df
    );
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 5px 16px #0002;
}

.lm-friend-info {
    flex: 1;
    min-width: 0;
}

.lm-friend-info strong,
.lm-friend-info small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-friend-info strong {
    font-size: 11px;
}

.lm-friend-info small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 3px;
}

.lm-friend-info .lm-distance {
    color: #bdebdc;
}

/* Live / Offline badges */

.lm-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 9px;
    white-space: nowrap;
}

.lm-status i {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #73869a;
}

.lm-status-live {
    color: #75f0c4;
}

.lm-status-live i {
    background: #75f0c4;
    box-shadow: 0 0 0 3px #75f0c41a;
}

.lm-status-offline {
    color: #a4b2bf;
}

/* Update time and directions */

.lm-friend-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0 0 48px;
    font-size: 9px;
    color: #90a9bb;
}

.lm-directions-btn {
    border: 1px solid #75baff3d;
    background: #75baff10;
    color: #9dd2ff;
    border-radius: 8px;
    padding: 5px 7px;
    font-size: 9px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.lm-directions-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Mobile responsive */

@media (max-width: 650px) {
    .lm-status {
        max-width: 75px;
        font-size: 8px;
    }

    .lm-friend-meta {
        padding-left: 0;
    }

    .lm-marker-label {
        max-width: 68px;
    }

    .map-actions .btn {
        flex: 1;
    }
}