/* Visconde de Mauá 360º - Custom Styles */

/* Base configuration for full height rendering */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

/* Ensure that containers don't collapse */
#map-container, #pano-container {
    height: 100%; /* In mobile, this refers to 100% of its parent's half (h-1/2) */
    width: 100%;
}

/* Utility to override the default Google Maps interactions if needed 
   Touch-action manipulation helps with zooming without triggering page scroll. */
/* #map-container > div {
    touch-action: pan-x pan-y;
} */

/* VM360 Custom Cluster Styling (restores the bubble look from the final design) */
.vm360-cluster {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: visible;
}

.vm360-cluster .cluster-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.2s ease;
}

.vm360-cluster.cluster-status-free {
    border-color: rgba(15, 23, 42, 0.65);
}

.vm360-cluster.cluster-status-advanced {
    border-color: #3b82f6;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.45);
}

.vm360-cluster.cluster-status-elite {
    border-color: #fbbf24;
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.55);
}

.vm360-cluster .cluster-inner span {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
}

.vm360-cluster svg {
    display: none;
}

.vm360-cluster .cluster-inner::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.2;
}

.vm360-cluster span.absolute {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}