/* Fix final para el modal - Asegurar funcionalidad en desktop y móvil */

/* Asegurar que el modal esté por encima de todo */
#dataCollectionModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important; /* Máximo z-index posible */
}

/* Asegurar que el contenido del modal sea interactivo */
#dataCollectionModal .modal-content {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2147483647 !important;
}

/* Botón de cerrar siempre accesible */
.modal-close-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2147483648 !important;
    position: absolute !important;
    touch-action: manipulation !important;
}

/* Asegurar que TODOS los elementos del formulario sean clickeables */
#dataCollectionForm,
#dataCollectionForm * {
    pointer-events: auto !important;
}

/* Fix específico para el select */
#userOccupation {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1000 !important;
    display: block !important;
    width: 100% !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
}

/* Hacer el select más visible con estilo nativo como fallback */
@media (min-width: 768px) {
    #userOccupation {
        /* Fallback: si el estilo personalizado falla, usar nativo */
        background-color: rgba(255, 255, 255, 0.95) !important;
        color: #333 !important;
        border: 2px solid #ff6b00 !important;
        padding: 0.9rem 2.5rem 0.9rem 1rem !important;
        min-height: 50px !important;
    }

    #userOccupation:hover {
        background-color: white !important;
        border-color: #ff8800 !important;
    }

    #userOccupation option {
        background-color: white !important;
        color: #333 !important;
        padding: 10px !important;
    }
}

/* Fix específico para el botón submit */
.submit-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1000 !important;
    display: block !important;
    width: 100% !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.submit-btn:hover {
    opacity: 0.9 !important;
}

.submit-btn:active {
    transform: scale(0.98) !important;
}

/* Asegurar que los inputs también funcionen */
#userName,
#userEmail,
#userPhone {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100 !important;
    cursor: text !important;
}

/* Desktop - inputs más visibles */
@media (min-width: 768px) {
    #userName,
    #userEmail,
    #userPhone {
        background-color: rgba(255, 255, 255, 0.95) !important;
        color: #333 !important;
        border: 2px solid rgba(255, 107, 0, 0.3) !important;
    }

    #userName:focus,
    #userEmail:focus,
    #userPhone:focus {
        background-color: white !important;
        border-color: #ff6b00 !important;
        outline: none !important;
    }
}

/* Prevenir que otros elementos bloqueen el modal */
body.modal-open {
    overflow: hidden !important;
}

body.modal-open > *:not(#dataCollectionModal) {
    pointer-events: none !important;
}

/* Asegurar que el modal sea el único elemento interactivo cuando está abierto */
#dataCollectionModal.show {
    pointer-events: auto !important;
}

#dataCollectionModal.show .modal-content {
    pointer-events: auto !important;
}

/* Debug - bordes para verificar áreas clickeables (remover en producción) */
/*
#userOccupation {
    border: 3px solid red !important;
}

.submit-btn {
    border: 3px solid blue !important;
}
*/