/* Wrapper Mappa: Nasconde l'overflow per permettere lo zoom */
.fcm-map-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f8f8f8;
    /* Altezza fissa o responsive? Meglio lasciare auto o usare aspect-ratio */
}

.fcm-panzoom-container {
    /* Importante: Panzoom trasforma questo elemento */
    position: relative; 
    transform-origin: center center;
}

.fcm-map-image {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none; /* Evita drag dell'immagine fantasma */
}

/* STILE PIN */
/* STILE PIN STANDARD (Pallino Rosso) */
.fcm-pin {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #dc3545; /* Rosso */
    border: 2px solid #fff;    /* Bordo Bianco */
    border-radius: 50%;        /* Cerchio */
    cursor: pointer;
    transform: translate(-50%, -50%); /* Centra il pin esattamente sulle coordinate */
    z-index: 10;
    transition: transform 0.2s;
    
    /* Proprietà base per background image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.2s, border-color 0.2s;
}

/* STILE PIN PERSONALIZZATO (Icona) */
.fcm-pin.fcm-custom-pin {
    background-color: transparent !important; /* Rimuove il rosso */
    border: none !important;                  /* Rimuove il bordo bianco */
    border-radius: 0 !important;              /* Rimuove la forma a cerchio */
    box-shadow: none !important;
    
    /* Dimensioni per le icone (puoi aumentarle se necessario) */
    width: 40px;
    height: 40px;
}

/* Effetto Hover */
.fcm-pin:hover {
    z-index: 1000;
    filter: brightness(1.2);
    cursor: pointer;
}
/* Custom Pin (sovrascrive stili base se c'è immagine) */
.fcm-custom-pin {
    /* Gli stili inline gestiscono l'immagine */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* TOOLTIP HOVER */
.fcm-pin-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 5px;
}

.fcm-pin:hover .fcm-pin-tooltip {
    opacity: 1;
}

/* CONTROLLI ZOOM */
.fcm-zoom-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fcm-zoom-controls button {
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
}
.fcm-zoom-controls button:hover {
    background: #eee;
}
.fcm-description{
    overflow-y: scroll;
    max-height: 400px;
}
.fcm-map-wrapper .modal-content{
    max-height: 500px;
}
/* CAROSELLO MODALE: CROP 4:3 */
.fcm-modal .carousel-item img {
    width: 100%;
    aspect-ratio: 4 / 3;     /* Forza il rapporto 4:3 */
    object-fit: cover;       /* Ritaglia l'immagine per riempire lo spazio senza deformare */
    object-position: center; /* Centra il ritaglio */
    height: auto;            /* Reset altezza per far lavorare aspect-ratio */
}

/* Opzionale: Aggiorna anche le miniature per essere 4:3 (es. 80x60px) */
.fcm-thumb {
    width: 80px !important;
    height: 60px !important;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.fcm-thumb:hover {
    border-color: #0073aa;
}