.solution-hotspots-panel__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hotspot-panel-close {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    background: var(--site-surface);
    color: var(--site-text);
    font: inherit;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.solution-hotspots-panel.has-hotspot-js .hotspot-card {
    display: none;
}

.solution-hotspots-panel.has-hotspot-js .hotspot-card.is-active {
    display: block;
}

.hotspot-card.is-active {
    border-color: color-mix(in srgb, var(--green) 50%, var(--site-border));
    box-shadow: 0 16px 36px rgba(13, 39, 66, .12);
}

.hotspot-pin.is-active {
    background: var(--navy);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 22%, transparent), 0 10px 26px rgba(13, 39, 66, .28);
}

html[dir="ltr"] .hotspot-pin {
    transform: translate(-50%, -50%);
}

.hotspot-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 960px) {
    .solution-hotspots-panel.has-hotspot-js {
        position: fixed;
        z-index: 1600;
        inset-inline: 0;
        bottom: 0;
        max-height: min(78vh, 680px);
        padding: 18px;
        border: 1px solid var(--site-border);
        border-radius: 24px 24px 0 0;
        background: var(--site-surface);
        box-shadow: 0 -24px 70px rgba(15, 23, 42, .24);
        overflow-y: auto;
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .22s ease, visibility .22s ease;
    }

    .solution-hotspots-panel.has-hotspot-js.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    .solution-hotspots-panel.has-hotspot-js .hotspot-panel-close {
        display: inline-grid;
        place-items: center;
    }

    .solution-hotspots-panel.has-hotspot-js h2 {
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {
    .solution-hotspots-panel.has-hotspot-js {
        max-height: 82vh;
        padding: 16px;
    }
}