/* --- Estilos para o Mapa Interativo do Cemitério --- */

#cemetery-map-container {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Padrão */
}

.quadra-clickable {
    position: absolute;
    background-color: rgba(59, 130, 246, 0.2); /* Azul semi-transparente para visualização */
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

    display: flex;
    align-items: center;      /* Centraliza verticalmente */
    justify-content: center;  /* Centraliza horizontalmente */
    
    /* Estilos do texto */
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 2px; /* Pequeno espaçamento interno */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Sombra para melhor legibilidade */
    /* Unidade responsiva: 2% da largura da tela, com um mínimo de 10px e máximo de 18px */
    font-size: clamp(10px, 2vw, 18px); 
}

.quadra-clickable:hover {
    background-color: rgba(59, 130, 246, 0.4);
    transform: scale(1.03);
}

/* Imagem base: 1080x1490 px */

/* Capela */
[data-quadra-id="capela"] {
    top: 3.71%;      /* 55.3 / 1490 */
    left: 35.14%;    /* 379.6 / 1080 */
    width: 11.22%;   /* 121.2 / 1080 */
    height: 9.54%;   /* 142.2 / 1490 */
}

/* Quadra 5 */
[data-quadra-id="quadra5"] {
    top: 1.12%;      /* 16.7 / 1490 */
    left: 52.54%;    /* 567.5 / 1080 */
    width: 32.51%;   /* 351.2 / 1080 */
    height: 14.34%;  /* 213.7 / 1490 */
}

/* Quadra 6 */
[data-quadra-id="quadra6"] {
    top: 17.85%;     /* 266 / 1490 */
    left: 51.7%;     /* 558.4 / 1080 */
    width: 32.51%;   /* 351.2 / 1080 */
    height: 19.6%;   /* 292.1 / 1490 */
}

/* Quadra 7 */
[data-quadra-id="quadra7"] {
    top: 38.21%;     /* 569.4 / 1490 */
    left: 50.87%;    /* 549.5 / 1080 */
    width: 32.51%;   /* 351.2 / 1080 */
    height: 12.17%;  /* 181.4 / 1490 */
}

/* Quadra 8 */
[data-quadra-id="quadra8"] {
    top: 51.14%;     /* 762.1 / 1490 */
    left: 50.58%;    /* 546.3 / 1080 */
    width: 32.51%;   /* 351.2 / 1080 */
    height: 19.37%;  /* 288.7 / 1490 */
}

/* Quadra 10 */
[data-quadra-id="quadra10"] {
    top: 71.76%;     /* 1069.3 / 1490 */
    left: 61.0%;     /* 658.7 / 1080 */
    width: 21.46%;   /* 231.8 / 1080 */
    height: 24.05%;  /* 358.4 / 1490 */
}

/* --- Estilos para o Modal --- */
#quadra-modal.visible {
    opacity: 1;
    pointer-events: auto;
}
#quadra-modal.visible #quadra-modal-content {
    transform: scale(1);
}