/* Shared hotspot marker look for both the public tour viewer and the admin
   hotspot editor's live preview, so what an admin places matches what
   visitors see. Pannellum only ever applies its own ".pnlm-hotspot-base"
   class to these divs (supplying "cssClass" makes it skip its default
   ".pnlm-hotspot"/icon classes entirely), so all visual styling below is
   ours. */

.pnlm-hotspot-base.thv-hotspot {
    width: 44px;
    height: 44px;
    margin-left: -22px;
    margin-top: -22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--thv-color-accent, #1d4ed8);
    color: var(--thv-color-accent, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.pnlm-hotspot-base.thv-hotspot:hover,
.pnlm-hotspot-base.thv-hotspot:focus-visible {
    transform: scale(1.12);
    outline: none;
}

.pnlm-hotspot-base.thv-hotspot--info {
    border-color: #0f766e;
    color: #0f766e;
}

.pnlm-hotspot-base.thv-hotspot--inactive {
    opacity: 0.4;
}

.thv-hotspot__glyph {
    font-size: 1.05rem;
    font-weight: 700;
    pointer-events: none;
    display: block;
}

.thv-hotspot__label {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.pnlm-hotspot-base.thv-hotspot:hover .thv-hotspot__label,
.pnlm-hotspot-base.thv-hotspot:focus-visible .thv-hotspot__label {
    opacity: 1;
}